@x-plat/design-system 0.4.5 → 0.5.0

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

@@ -24,27 +24,18 @@ __export(FullGrid_exports, {
 });
 module.exports = __toCommonJS(FullGrid_exports);
 
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullGrid = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "lib-xplat-full-grid",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 interface FullGridProps {
     children: React.ReactNode;
-    className?: string;
+    gap?: string;
 }
 declare const FullGrid: React.FC<FullGridProps>;
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 interface FullGridProps {
     children: React.ReactNode;
-    className?: string;
+    gap?: string;
 }
 declare const FullGrid: React.FC<FullGridProps>;
 

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

@@ -1,24 +1,15 @@
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/layout/Grid/FullGrid/FullGrid.tsx
 import { jsx } from "react/jsx-runtime";
 var FullGrid = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "lib-xplat-full-grid",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;

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

@@ -24,27 +24,18 @@ __export(FullScreen_exports, {
 });
 module.exports = __toCommonJS(FullScreen_exports);
 
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullScreen = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "lib-xplat-full-screen",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 
-interface FullGridProps {
+interface FullScreenProps {
     children: React.ReactNode;
-    className?: string;
+    gap?: string;
 }
-declare const FullScreen: React.FC<FullGridProps>;
+declare const FullScreen: React.FC<FullScreenProps>;
 
 export { FullScreen };

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

@@ -1,9 +1,9 @@
 import React from 'react';
 
-interface FullGridProps {
+interface FullScreenProps {
     children: React.ReactNode;
-    className?: string;
+    gap?: string;
 }
-declare const FullScreen: React.FC<FullGridProps>;
+declare const FullScreen: React.FC<FullScreenProps>;
 
 export { FullScreen };

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

@@ -1,24 +1,15 @@
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/layout/Grid/FullScreen/FullScreen.tsx
 import { jsx } from "react/jsx-runtime";
 var FullScreen = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "lib-xplat-full-screen",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;

package/dist/layout/Grid/index.cjs

@@ -27,27 +27,18 @@ __export(Grid_exports, {
 });
 module.exports = __toCommonJS(Grid_exports);
 
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullGrid = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "lib-xplat-full-grid",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -55,8 +46,15 @@ var FullGrid_default = FullGrid;
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FullScreen = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "lib-xplat-full-screen",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
@@ -64,6 +62,22 @@ var FullScreen_default = FullScreen;
 // src/tokens/breakpoints.ts
 var BREAKPOINT_KEYS_ORDERED = ["laptop", "tablet", "mobile"];
 
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
 // src/layout/Grid/Item/Item.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var calculateSpans = (column) => {

package/dist/layout/Grid/index.js

@@ -1,24 +1,15 @@
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/layout/Grid/FullGrid/FullGrid.tsx
 import { jsx } from "react/jsx-runtime";
 var FullGrid = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "lib-xplat-full-grid",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -26,8 +17,15 @@ var FullGrid_default = FullGrid;
 // src/layout/Grid/FullScreen/FullScreen.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var FullScreen = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ jsx2("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "lib-xplat-full-screen",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
@@ -35,6 +33,22 @@ var FullScreen_default = FullScreen;
 // src/tokens/breakpoints.ts
 var BREAKPOINT_KEYS_ORDERED = ["laptop", "tablet", "mobile"];
 
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
 // src/layout/Grid/Item/Item.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var calculateSpans = (column) => {

package/dist/layout/index.cjs

@@ -42,27 +42,18 @@ __export(layout_exports, {
 });
 module.exports = __toCommonJS(layout_exports);
 
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/layout/Grid/FullGrid/FullGrid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FullGrid = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "lib-xplat-full-grid",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
@@ -70,8 +61,15 @@ var FullGrid_default = FullGrid;
 // src/layout/Grid/FullScreen/FullScreen.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FullScreen = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+  const { children, gap } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "lib-xplat-full-screen",
+      style: gap ? { gap } : void 0,
+      children
+    }
+  );
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
@@ -79,6 +77,22 @@ var FullScreen_default = FullScreen;
 // src/tokens/breakpoints.ts
 var BREAKPOINT_KEYS_ORDERED = ["laptop", "tablet", "mobile"];
 
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
 // src/layout/Grid/Item/Item.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var calculateSpans = (column) => {