@x-plat/design-system 0.5.19 → 0.5.20

package/dist/components/Skeleton/index.cjs

@@ -42,12 +42,20 @@ 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 SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",

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

@@ -1,7 +1,7 @@
 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";
+type SizeToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 interface SkeletonProps {
     variant?: SkeletonVariant;
     width?: SizeToken;

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

@@ -1,7 +1,7 @@
 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";
+type SizeToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 interface SkeletonProps {
     variant?: SkeletonVariant;
     width?: SizeToken;

package/dist/components/Skeleton/index.js

@@ -16,12 +16,20 @@ 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 SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ jsx(
     "div",

package/dist/components/index.cjs

@@ -4359,12 +4359,20 @@ 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 SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",

package/dist/components/index.js

@@ -4271,12 +4271,20 @@ 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 SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ jsx333(
     "div",

package/dist/index.cjs

@@ -8783,12 +8783,20 @@ 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 SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     "div",
@@ -9931,9 +9939,18 @@ var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime348 = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -9941,9 +9958,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime349 = require("react/jsx-runtime");
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/dist/index.js

@@ -8386,12 +8386,20 @@ 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 SIZE_MAP = {
+  xs: "var(--spacing-size-1)",
+  sm: "var(--spacing-size-2)",
+  md: "var(--spacing-size-4)",
+  lg: "var(--spacing-size-8)",
+  xl: "var(--spacing-size-12)",
+  "2xl": "var(--spacing-size-16)",
+  full: "100%"
+};
 var Skeleton = (props) => {
   const { variant = "text", width, height } = props;
   const style = {
-    ...width != null && { width: toSizeVar(width) },
-    ...height != null && { height: toSizeVar(height) }
+    ...width != null && { width: SIZE_MAP[width] },
+    ...height != null && { height: SIZE_MAP[height] }
   };
   return /* @__PURE__ */ jsx333(
     "div",
@@ -9534,9 +9542,18 @@ var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 import { jsx as jsx348 } from "react/jsx-runtime";
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ jsx348("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -9544,9 +9561,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 import { jsx as jsx349 } from "react/jsx-runtime";
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ jsx349("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

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

@@ -26,9 +26,18 @@ module.exports = __toCommonJS(FullGrid_exports);
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";

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

@@ -1,9 +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;
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 interface FullGridProps {
     children: React.ReactNode;
-    gap?: SpaceToken;
+    gap?: GapToken;
 }
 declare const FullGrid: React.FC<FullGridProps>;
 

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

@@ -1,9 +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;
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 interface FullGridProps {
     children: React.ReactNode;
-    gap?: SpaceToken;
+    gap?: GapToken;
 }
 declare const FullGrid: React.FC<FullGridProps>;
 

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

@@ -1,8 +1,17 @@
 // src/layout/Grid/FullGrid/FullGrid.tsx
 import { jsx } from "react/jsx-runtime";
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";

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

@@ -26,9 +26,18 @@ module.exports = __toCommonJS(FullScreen_exports);
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

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

@@ -1,9 +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;
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 interface FullScreenProps {
     children: React.ReactNode;
-    gap?: SpaceToken;
+    gap?: GapToken;
 }
 declare const FullScreen: React.FC<FullScreenProps>;
 

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

@@ -1,9 +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;
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 interface FullScreenProps {
     children: React.ReactNode;
-    gap?: SpaceToken;
+    gap?: GapToken;
 }
 declare const FullScreen: React.FC<FullScreenProps>;
 

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

@@ -1,8 +1,17 @@
 // src/layout/Grid/FullScreen/FullScreen.tsx
 import { jsx } from "react/jsx-runtime";
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/dist/layout/Grid/index.cjs

@@ -29,9 +29,18 @@ module.exports = __toCommonJS(Grid_exports);
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -39,9 +48,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/dist/layout/Grid/index.js

@@ -1,8 +1,17 @@
 // src/layout/Grid/FullGrid/FullGrid.tsx
 import { jsx } from "react/jsx-runtime";
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -10,9 +19,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ jsx2("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/dist/layout/index.cjs

@@ -44,9 +44,18 @@ module.exports = __toCommonJS(layout_exports);
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -54,9 +63,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/dist/layout/index.js

@@ -1,8 +1,17 @@
 // src/layout/Grid/FullGrid/FullGrid.tsx
 import { jsx } from "react/jsx-runtime";
+var GAP_MAP = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullGrid = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
   return /* @__PURE__ */ jsx("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
@@ -10,9 +19,18 @@ var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var GAP_MAP2 = {
+  none: "var(--spacing-space-none)",
+  xs: "var(--spacing-space-1)",
+  sm: "var(--spacing-space-2)",
+  md: "var(--spacing-space-4)",
+  lg: "var(--spacing-space-6)",
+  xl: "var(--spacing-space-8)",
+  "2xl": "var(--spacing-space-12)"
+};
 var FullScreen = (props) => {
   const { children, gap } = props;
-  const style = gap != null ? { gap: `var(--spacing-space-${gap})` } : void 0;
+  const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
   return /* @__PURE__ */ jsx2("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";

package/package.json

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