fix: semantic dom issue in layout

Author: lorant-one

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@once-ui-system/nextjs-starter",
-  "version": "1.0.0",
+  "version": "1.0.1",
+  "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
     "export": "next export",

src/app/(main)/layout.tsx

@@ -93,48 +93,48 @@ export default function RootLayout({
         />
       </head>
       <Providers>
-        <Background
-          position="absolute"
-          mask={{
-            x: effects.mask.x,
-            y: effects.mask.y,
-            radius: effects.mask.radius,
-            cursor: effects.mask.cursor,
-          }}
-          gradient={{
-            display: effects.gradient.display,
-            opacity: effects.gradient.opacity as opacity,
-            x: effects.gradient.x,
-            y: effects.gradient.y,
-            width: effects.gradient.width,
-            height: effects.gradient.height,
-            tilt: effects.gradient.tilt,
-            colorStart: effects.gradient.colorStart,
-            colorEnd: effects.gradient.colorEnd,
-          }}
-          dots={{
-            display: effects.dots.display,
-            opacity: effects.dots.opacity as opacity,
-            size: effects.dots.size as SpacingToken,
-            color: effects.dots.color,
-          }}
-          grid={{
-            display: effects.grid.display,
-            opacity: effects.grid.opacity as opacity,
-            color: effects.grid.color,
-            width: effects.grid.width,
-            height: effects.grid.height,
-          }}
-          lines={{
-            display: effects.lines.display,
-            opacity: effects.lines.opacity as opacity,
-            size: effects.lines.size as SpacingToken,
-            thickness: effects.lines.thickness,
-            angle: effects.lines.angle,
-            color: effects.lines.color,
-          }}
-        />
         <Column as="body" background="page" fillWidth margin="0" padding="0">
+          <Background
+            position="absolute"
+            mask={{
+              x: effects.mask.x,
+              y: effects.mask.y,
+              radius: effects.mask.radius,
+              cursor: effects.mask.cursor,
+            }}
+            gradient={{
+              display: effects.gradient.display,
+              opacity: effects.gradient.opacity as opacity,
+              x: effects.gradient.x,
+              y: effects.gradient.y,
+              width: effects.gradient.width,
+              height: effects.gradient.height,
+              tilt: effects.gradient.tilt,
+              colorStart: effects.gradient.colorStart,
+              colorEnd: effects.gradient.colorEnd,
+            }}
+            dots={{
+              display: effects.dots.display,
+              opacity: effects.dots.opacity as opacity,
+              size: effects.dots.size as SpacingToken,
+              color: effects.dots.color,
+            }}
+            grid={{
+              display: effects.grid.display,
+              opacity: effects.grid.opacity as opacity,
+              color: effects.grid.color,
+              width: effects.grid.width,
+              height: effects.grid.height,
+            }}
+            lines={{
+              display: effects.lines.display,
+              opacity: effects.lines.opacity as opacity,
+              size: effects.lines.size as SpacingToken,
+              thickness: effects.lines.thickness,
+              angle: effects.lines.angle,
+              color: effects.lines.color,
+            }}
+          />
           {children}
         </Column>
       </Providers>