@x-plat/design-system 0.5.16 → 0.5.18

package/dist/components/Drawer/index.cjs

@@ -58,7 +58,7 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 250;
 var Drawer = (props) => {
-  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
   const [mounted, setMounted] = import_react.default.useState(false);
   const [visible, setVisible] = import_react.default.useState(false);
   import_react.default.useEffect(() => {
@@ -74,7 +74,6 @@ var Drawer = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  const widthValue = typeof width === "number" ? `${width}px` : width;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -84,8 +83,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            className: clsx_default("lib-xplat-drawer", placement, stateClass),
-            style: { width: widthValue },
+            className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),

package/dist/components/Drawer/index.css

@@ -23,6 +23,18 @@
   transition: transform 0.25s ease;
   z-index: 1001;
 }
+.lib-xplat-drawer.sm {
+  width: 280px;
+}
+.lib-xplat-drawer.md {
+  width: 360px;
+}
+.lib-xplat-drawer.lg {
+  width: 480px;
+}
+.lib-xplat-drawer.xl {
+  width: 640px;
+}
 .lib-xplat-drawer.right {
   right: 0;
   transform: translateX(100%);

package/dist/components/Drawer/index.d.cts

@@ -1,11 +1,12 @@
 import React from 'react';
 
 type DrawerPlacement = "left" | "right";
+type DrawerSize = "sm" | "md" | "lg" | "xl";
 interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     placement?: DrawerPlacement;
-    width?: string | number;
+    size?: DrawerSize;
     title?: React.ReactNode;
     children?: React.ReactNode;
 }

package/dist/components/Drawer/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 
 type DrawerPlacement = "left" | "right";
+type DrawerSize = "sm" | "md" | "lg" | "xl";
 interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     placement?: DrawerPlacement;
-    width?: string | number;
+    size?: DrawerSize;
     title?: React.ReactNode;
     children?: React.ReactNode;
 }

package/dist/components/Drawer/index.js

@@ -22,7 +22,7 @@ var clsx_default = clsx;
 import { jsx, jsxs } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 250;
 var Drawer = (props) => {
-  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
   const [mounted, setMounted] = React.useState(false);
   const [visible, setVisible] = React.useState(false);
   React.useEffect(() => {
@@ -38,7 +38,6 @@ var Drawer = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  const widthValue = typeof width === "number" ? `${width}px` : width;
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
@@ -48,8 +47,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx_default("lib-xplat-drawer", placement, stateClass),
-            style: { width: widthValue },
+            className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),

package/dist/components/Dropdown/index.cjs

@@ -66,7 +66,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);

package/dist/components/Dropdown/index.js

@@ -30,7 +30,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);

package/dist/components/PopOver/index.cjs

@@ -66,7 +66,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);

package/dist/components/PopOver/index.css

@@ -1,7 +1,6 @@
 /* src/components/PopOver/popOver.scss */
 .lib-xplat-pop-over {
   position: relative;
-  width: fit-content;
   cursor: pointer;
   user-select: none;
 }

package/dist/components/PopOver/index.js

@@ -30,7 +30,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);

package/dist/components/Select/index.cjs

@@ -67,7 +67,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);
@@ -1220,7 +1220,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, minWidth: position.position.width },
+            style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
           }

package/dist/components/Select/index.js

@@ -30,7 +30,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);
@@ -1183,7 +1183,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, minWidth: position.position.width },
+            style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: /* @__PURE__ */ jsx297(context_default.Provider, { value: ctxValue, children: itemChildren })
           }

package/dist/components/Skeleton/index.cjs

@@ -42,11 +42,12 @@ var clsx_default = clsx;
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height
+    ...width != null && { width: toSizeVar(width) },
+    ...height != null && { height: toSizeVar(height) }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",

package/dist/components/Skeleton/index.d.cts

@@ -1,10 +1,11 @@
 import React from 'react';
 
 type SkeletonVariant = "text" | "circular" | "rectangular";
+type SizeToken = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | "full";
 interface SkeletonProps {
     variant?: SkeletonVariant;
-    width?: string | number;
-    height?: string | number;
+    width?: SizeToken;
+    height?: SizeToken;
 }
 declare const Skeleton: React.FC<SkeletonProps>;
 

package/dist/components/Skeleton/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 
 type SkeletonVariant = "text" | "circular" | "rectangular";
+type SizeToken = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | "full";
 interface SkeletonProps {
     variant?: SkeletonVariant;
-    width?: string | number;
-    height?: string | number;
+    width?: SizeToken;
+    height?: SizeToken;
 }
 declare const Skeleton: React.FC<SkeletonProps>;
 

package/dist/components/Skeleton/index.js

@@ -16,11 +16,12 @@ var clsx_default = clsx;
 
 // src/components/Skeleton/Skeleton.tsx
 import { jsx } from "react/jsx-runtime";
+var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height
+    ...width != null && { width: toSizeVar(width) },
+    ...height != null && { height: toSizeVar(height) }
   };
   return /* @__PURE__ */ jsx(
     "div",

package/dist/components/index.cjs

@@ -3336,7 +3336,7 @@ var import_react_dom3 = require("react-dom");
 var import_jsx_runtime320 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
-  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
   const [mounted, setMounted] = import_react17.default.useState(false);
   const [visible, setVisible] = import_react17.default.useState(false);
   import_react17.default.useEffect(() => {
@@ -3352,7 +3352,6 @@ var Drawer = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  const widthValue = typeof width === "number" ? `${width}px` : width;
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
       "div",
@@ -3362,8 +3361,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
           "div",
           {
-            className: clsx_default("lib-xplat-drawer", placement, stateClass),
-            style: { width: widthValue },
+            className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
@@ -3416,7 +3414,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);
@@ -4222,7 +4220,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, minWidth: position.position.width },
+            style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
@@ -4239,11 +4237,12 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime333 = require("react/jsx-runtime");
+var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height
+    ...width != null && { width: toSizeVar(width) },
+    ...height != null && { height: toSizeVar(height) }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",

package/dist/components/index.css

@@ -2551,6 +2551,18 @@
   transition: transform 0.25s ease;
   z-index: 1001;
 }
+.lib-xplat-drawer.sm {
+  width: 280px;
+}
+.lib-xplat-drawer.md {
+  width: 360px;
+}
+.lib-xplat-drawer.lg {
+  width: 480px;
+}
+.lib-xplat-drawer.xl {
+  width: 640px;
+}
 .lib-xplat-drawer.right {
   right: 0;
   transform: translateX(100%);
@@ -2934,7 +2946,6 @@
 /* src/components/PopOver/popOver.scss */
 .lib-xplat-pop-over {
   position: relative;
-  width: fit-content;
   cursor: pointer;
   user-select: none;
 }

package/dist/components/index.js

@@ -3248,7 +3248,7 @@ import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx320, jsxs as jsxs205 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
-  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
   const [mounted, setMounted] = React16.useState(false);
   const [visible, setVisible] = React16.useState(false);
   React16.useEffect(() => {
@@ -3264,7 +3264,6 @@ var Drawer = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  const widthValue = typeof width === "number" ? `${width}px` : width;
   return createPortal2(
     /* @__PURE__ */ jsx320(
       "div",
@@ -3274,8 +3273,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ jsxs205(
           "div",
           {
-            className: clsx_default("lib-xplat-drawer", placement, stateClass),
-            style: { width: widthValue },
+            className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
@@ -3328,7 +3326,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);
@@ -4134,7 +4132,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, minWidth: position.position.width },
+            style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
@@ -4151,11 +4149,12 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 import { jsx as jsx333 } from "react/jsx-runtime";
+var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height
+    ...width != null && { width: toSizeVar(width) },
+    ...height != null && { height: toSizeVar(height) }
   };
   return /* @__PURE__ */ jsx333(
     "div",

package/dist/index.cjs

@@ -7760,7 +7760,7 @@ var import_react_dom3 = require("react-dom");
 var import_jsx_runtime320 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
-  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
   const [mounted, setMounted] = import_react17.default.useState(false);
   const [visible, setVisible] = import_react17.default.useState(false);
   import_react17.default.useEffect(() => {
@@ -7776,7 +7776,6 @@ var Drawer = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  const widthValue = typeof width === "number" ? `${width}px` : width;
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
       "div",
@@ -7786,8 +7785,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
           "div",
           {
-            className: clsx_default("lib-xplat-drawer", placement, stateClass),
-            style: { width: widthValue },
+            className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
@@ -7840,7 +7838,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);
@@ -8646,7 +8644,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, minWidth: position.position.width },
+            style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
@@ -8663,11 +8661,12 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime333 = require("react/jsx-runtime");
+var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height
+    ...width != null && { width: toSizeVar(width) },
+    ...height != null && { height: toSizeVar(height) }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
@@ -9812,14 +9811,8 @@ var Video_default = Video;
 var import_jsx_runtime348 = require("react/jsx-runtime");
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -9828,14 +9821,8 @@ var FullGrid_default = FullGrid;
 var import_jsx_runtime349 = require("react/jsx-runtime");
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/index.css

@@ -2551,6 +2551,18 @@
   transition: transform 0.25s ease;
   z-index: 1001;
 }
+.lib-xplat-drawer.sm {
+  width: 280px;
+}
+.lib-xplat-drawer.md {
+  width: 360px;
+}
+.lib-xplat-drawer.lg {
+  width: 480px;
+}
+.lib-xplat-drawer.xl {
+  width: 640px;
+}
 .lib-xplat-drawer.right {
   right: 0;
   transform: translateX(100%);
@@ -2934,7 +2946,6 @@
 /* src/components/PopOver/popOver.scss */
 .lib-xplat-pop-over {
   position: relative;
-  width: fit-content;
   cursor: pointer;
   user-select: none;
 }

package/dist/index.js

@@ -7363,7 +7363,7 @@ import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx320, jsxs as jsxs205 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
-  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
   const [mounted, setMounted] = React16.useState(false);
   const [visible, setVisible] = React16.useState(false);
   React16.useEffect(() => {
@@ -7379,7 +7379,6 @@ var Drawer = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  const widthValue = typeof width === "number" ? `${width}px` : width;
   return createPortal2(
     /* @__PURE__ */ jsx320(
       "div",
@@ -7389,8 +7388,7 @@ var Drawer = (props) => {
         children: /* @__PURE__ */ jsxs205(
           "div",
           {
-            className: clsx_default("lib-xplat-drawer", placement, stateClass),
-            style: { width: widthValue },
+            className: clsx_default("lib-xplat-drawer", placement, size, stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
@@ -7443,7 +7441,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
     if (left < 8) left = 8;
     setPosition({
-      position: { top, left, width: triggerRect.width },
+      position: { top, left },
       direction
     });
   }, [triggerRef, popRef]);
@@ -8249,7 +8247,7 @@ var SelectRoot = (props) => {
           {
             className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
             ref: contentRef,
-            style: { ...position.position, minWidth: position.position.width },
+            style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
             children: /* @__PURE__ */ jsx332(context_default.Provider, { value: ctxValue, children: itemChildren })
           }
@@ -8266,11 +8264,12 @@ var Select_default = Select;
 
 // src/components/Skeleton/Skeleton.tsx
 import { jsx as jsx333 } from "react/jsx-runtime";
+var toSizeVar = (token) => token === "full" ? "100%" : `var(--spacing-size-${token})`;
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height
+    ...width != null && { width: toSizeVar(width) },
+    ...height != null && { height: toSizeVar(height) }
   };
   return /* @__PURE__ */ jsx333(
     "div",
@@ -9415,14 +9414,8 @@ var Video_default = Video;
 import { jsx as jsx348 } from "react/jsx-runtime";
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx348(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx348("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -9431,14 +9424,8 @@ var FullGrid_default = FullGrid;
 import { jsx as jsx349 } from "react/jsx-runtime";
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx349(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx349("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/layout/Grid/FullGrid/index.cjs

@@ -28,14 +28,8 @@ module.exports = __toCommonJS(FullGrid_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;

package/dist/layout/Grid/FullGrid/index.d.cts

@@ -1,8 +1,9 @@
 import React from 'react';
 
+type SpaceToken = "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
 interface FullGridProps {
     children: React.ReactNode;
-    gap?: string;
+    gap?: SpaceToken;
 }
 declare const FullGrid: React.FC<FullGridProps>;
 

package/dist/layout/Grid/FullGrid/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 
+type SpaceToken = "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
 interface FullGridProps {
     children: React.ReactNode;
-    gap?: string;
+    gap?: SpaceToken;
 }
 declare const FullGrid: React.FC<FullGridProps>;
 

package/dist/layout/Grid/FullGrid/index.js

@@ -2,14 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;

package/dist/layout/Grid/FullScreen/index.cjs

@@ -28,14 +28,8 @@ module.exports = __toCommonJS(FullScreen_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/layout/Grid/FullScreen/index.d.cts

@@ -1,8 +1,9 @@
 import React from 'react';
 
+type SpaceToken = "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
 interface FullScreenProps {
     children: React.ReactNode;
-    gap?: string;
+    gap?: SpaceToken;
 }
 declare const FullScreen: React.FC<FullScreenProps>;
 

package/dist/layout/Grid/FullScreen/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 
+type SpaceToken = "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
 interface FullScreenProps {
     children: React.ReactNode;
-    gap?: string;
+    gap?: SpaceToken;
 }
 declare const FullScreen: React.FC<FullScreenProps>;
 

package/dist/layout/Grid/FullScreen/index.js

@@ -2,14 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/layout/Grid/index.cjs

@@ -31,14 +31,8 @@ module.exports = __toCommonJS(Grid_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -47,14 +41,8 @@ var FullGrid_default = FullGrid;
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/layout/Grid/index.js

@@ -2,14 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -18,14 +12,8 @@ var FullGrid_default = FullGrid;
 import { jsx as jsx2 } from "react/jsx-runtime";
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx2("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/layout/index.cjs

@@ -46,14 +46,8 @@ module.exports = __toCommonJS(layout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -62,14 +56,8 @@ var FullGrid_default = FullGrid;
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/layout/index.js

@@ -2,14 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 var FullGrid = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "lib-xplat-full-grid",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -18,14 +12,8 @@ var FullGrid_default = FullGrid;
 import { jsx as jsx2 } from "react/jsx-runtime";
 var FullScreen = (props) => {
   const { children, gap } = props;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: "lib-xplat-full-screen",
-      style: gap ? { gap } : void 0,
-      children
-    }
-  );
+  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  return /* @__PURE__ */ jsx2("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.16",
+  "version": "0.5.18",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",