@traefik-labs/faency 12.0.7

package/dist/components/Flex/Flex.js

@@ -0,0 +1,120 @@
+import { styled } from "../../stitches.config.js";
+const Flex = styled("div", {
+  boxSizing: "border-box",
+  display: "flex",
+  variants: {
+    direction: {
+      row: {
+        flexDirection: "row"
+      },
+      column: {
+        flexDirection: "column"
+      },
+      rowReverse: {
+        flexDirection: "row-reverse"
+      },
+      columnReverse: {
+        flexDirection: "column-reverse"
+      }
+    },
+    align: {
+      start: {
+        alignItems: "flex-start"
+      },
+      center: {
+        alignItems: "center"
+      },
+      end: {
+        alignItems: "flex-end"
+      },
+      stretch: {
+        alignItems: "stretch"
+      },
+      baseline: {
+        alignItems: "baseline"
+      },
+      ["space-evenly"]: {
+        alignItems: "space-evenly"
+      },
+      ["space-between"]: {
+        alignItems: "space-between"
+      },
+      ["space-around"]: {
+        alignItems: "space-around"
+      }
+    },
+    justify: {
+      start: {
+        justifyContent: "flex-start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      end: {
+        justifyContent: "flex-end"
+      },
+      between: {
+        justifyContent: "space-between"
+      },
+      ["space-evenly"]: {
+        justifyContent: "space-evenly"
+      },
+      ["space-between"]: {
+        justifyContent: "space-between"
+      },
+      ["space-around"]: {
+        justifyContent: "space-around"
+      }
+    },
+    wrap: {
+      noWrap: {
+        flexWrap: "nowrap"
+      },
+      wrap: {
+        flexWrap: "wrap"
+      },
+      wrapReverse: {
+        flexWrap: "wrap-reverse"
+      }
+    },
+    gap: {
+      1: {
+        gap: "$1"
+      },
+      2: {
+        gap: "$2"
+      },
+      3: {
+        gap: "$3"
+      },
+      4: {
+        gap: "$4"
+      },
+      5: {
+        gap: "$5"
+      },
+      6: {
+        gap: "$6"
+      },
+      7: {
+        gap: "$7"
+      },
+      8: {
+        gap: "$8"
+      },
+      9: {
+        gap: "$9"
+      }
+    }
+  },
+  defaultVariants: {
+    direction: "row",
+    align: "stretch",
+    justify: "start",
+    wrap: "noWrap"
+  }
+});
+export {
+  Flex
+};
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../components/Flex/Flex.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Flex = styled('div', {\n  boxSizing: 'border-box',\n  display: 'flex',\n\n  variants: {\n    direction: {\n      row: {\n        flexDirection: 'row',\n      },\n      column: {\n        flexDirection: 'column',\n      },\n      rowReverse: {\n        flexDirection: 'row-reverse',\n      },\n      columnReverse: {\n        flexDirection: 'column-reverse',\n      },\n    },\n    align: {\n      start: {\n        alignItems: 'flex-start',\n      },\n      center: {\n        alignItems: 'center',\n      },\n      end: {\n        alignItems: 'flex-end',\n      },\n      stretch: {\n        alignItems: 'stretch',\n      },\n      baseline: {\n        alignItems: 'baseline',\n      },\n      ['space-evenly']: {\n        alignItems: 'space-evenly',\n      },\n      ['space-between']: {\n        alignItems: 'space-between',\n      },\n      ['space-around']: {\n        alignItems: 'space-around',\n      },\n    },\n    justify: {\n      start: {\n        justifyContent: 'flex-start',\n      },\n      center: {\n        justifyContent: 'center',\n      },\n      end: {\n        justifyContent: 'flex-end',\n      },\n      between: {\n        justifyContent: 'space-between',\n      },\n      ['space-evenly']: {\n        justifyContent: 'space-evenly',\n      },\n      ['space-between']: {\n        justifyContent: 'space-between',\n      },\n      ['space-around']: {\n        justifyContent: 'space-around',\n      },\n    },\n    wrap: {\n      noWrap: {\n        flexWrap: 'nowrap',\n      },\n      wrap: {\n        flexWrap: 'wrap',\n      },\n      wrapReverse: {\n        flexWrap: 'wrap-reverse',\n      },\n    },\n    gap: {\n      1: {\n        gap: '$1',\n      },\n      2: {\n        gap: '$2',\n      },\n      3: {\n        gap: '$3',\n      },\n      4: {\n        gap: '$4',\n      },\n      5: {\n        gap: '$5',\n      },\n      6: {\n        gap: '$6',\n      },\n      7: {\n        gap: '$7',\n      },\n      8: {\n        gap: '$8',\n      },\n      9: {\n        gap: '$9',\n      },\n    },\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap',\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,OAAO,OAAO,OAAO;AAAA,EAChC,WAAW;AAAA,EACX,SAAS;AAAA,EAET,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,QACH,eAAe;AAAA,MAAA;AAAA,MAEjB,QAAQ;AAAA,QACN,eAAe;AAAA,MAAA;AAAA,MAEjB,YAAY;AAAA,QACV,eAAe;AAAA,MAAA;AAAA,MAEjB,eAAe;AAAA,QACb,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,IAEF,OAAO;AAAA,MACL,OAAO;AAAA,QACL,YAAY;AAAA,MAAA;AAAA,MAEd,QAAQ;AAAA,QACN,YAAY;AAAA,MAAA;AAAA,MAEd,KAAK;AAAA,QACH,YAAY;AAAA,MAAA;AAAA,MAEd,SAAS;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,MAEd,UAAU;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,MAEd,CAAC,cAAc,GAAG;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,MAEd,CAAC,eAAe,GAAG;AAAA,QACjB,YAAY;AAAA,MAAA;AAAA,MAEd,CAAC,cAAc,GAAG;AAAA,QAChB,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,gBAAgB;AAAA,MAAA;AAAA,MAElB,QAAQ;AAAA,QACN,gBAAgB;AAAA,MAAA;AAAA,MAElB,KAAK;AAAA,QACH,gBAAgB;AAAA,MAAA;AAAA,MAElB,SAAS;AAAA,QACP,gBAAgB;AAAA,MAAA;AAAA,MAElB,CAAC,cAAc,GAAG;AAAA,QAChB,gBAAgB;AAAA,MAAA;AAAA,MAElB,CAAC,eAAe,GAAG;AAAA,QACjB,gBAAgB;AAAA,MAAA;AAAA,MAElB,CAAC,cAAc,GAAG;AAAA,QAChB,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,MAAM;AAAA,MACJ,QAAQ;AAAA,QACN,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,aAAa;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,KAAK;AAAA,MACH,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG;AAAA,QACD,KAAK;AAAA,MAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC;"}

package/dist/components/Flex/Flex.vanilla.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const dynamic = require("@vanilla-extract/dynamic");
+const React = require("react");
+const cssProps = require("../../styles/cssProps.cjs");
+const themeContext = require("../../styles/themeContext.cjs");
+const Flex_vanilla_css = require("./Flex.vanilla.css.cjs");
+const FlexVanillaComponent = React.forwardRef(
+  ({ as, className, css, style, direction, align, justify, wrap, gap, ...props }, ref) => {
+    const Component = as || "div";
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    const recipeClass = Flex_vanilla_css.flexRecipe({ direction, align, justify, wrap, gap });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+FlexVanillaComponent.displayName = "FlexVanilla";
+const FlexVanilla = FlexVanillaComponent;
+exports.FlexVanilla = FlexVanilla;
+exports.FlexVanillaComponent = FlexVanillaComponent;
+//# sourceMappingURL=Flex.vanilla.cjs.map

package/dist/components/Flex/Flex.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.vanilla.cjs","sources":["../../../components/Flex/Flex.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport type {\n  FlexAlignSimplified,\n  FlexDirection,\n  FlexJustifySimplified,\n  Gap,\n} from '../../styles/types';\nimport { flexRecipe } from './Flex.vanilla.css';\n\ninterface FlexOwnProps extends CSSProps {\n  direction?: FlexDirection;\n  align?: FlexAlignSimplified;\n  justify?: FlexJustifySimplified;\n  wrap?: 'wrap' | 'noWrap' | 'wrapReverse';\n  gap?: Gap;\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps>;\ntype FlexComponent = PolymorphicComponent<'div', FlexProps<ElementType>>;\n\nexport const FlexVanillaComponent = React.forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, direction, align, justify, wrap, gap, ...props }: FlexProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = flexRecipe({ direction, align, justify, wrap, gap });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nFlexVanillaComponent.displayName = 'FlexVanilla';\n\nexport const FlexVanilla = FlexVanillaComponent as FlexComponent;\n"],"names":["useVanillaExtractTheme","processCSSProp","assignInlineVars","flexRecipe","jsx"],"mappings":";;;;;;;;AA6BO,MAAM,uBAAuB,MAAM;AAAA,EACxC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,WAAW,OAAO,SAAS,MAAM,KAAK,GAAG,MAAA,GACtE,QACG;AACH,UAAM,YAAY,MAAM;AAExB,UAAM,EAAE,OAAA,IAAWA,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAcC,iBAAAA,WAAW,EAAE,WAAW,OAAO,SAAS,MAAM,KAAK;AAEvE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,qBAAqB,cAAc;AAE5B,MAAM,cAAc;;;"}

package/dist/components/Flex/Flex.vanilla.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                       */
+;/* empty css                                      */
+;/* empty css                                  */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var flexRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "qtrdwq1 qtrdwq0", variantClassNames: { direction: { row: "qtrdwq2", column: "qtrdwq3", rowReverse: "qtrdwq4", columnReverse: "qtrdwq5" }, align: { start: "qtrdwq6", center: "qtrdwq7", end: "qtrdwq8", stretch: "qtrdwq9", baseline: "qtrdwqa" }, justify: { start: "qtrdwqb", center: "qtrdwqc", end: "qtrdwqd", "space-evenly": "qtrdwqe", "space-between": "qtrdwqf", "space-around": "qtrdwqg" }, wrap: { noWrap: "qtrdwqh", wrap: "qtrdwqi", wrapReverse: "qtrdwqj" }, gap: { "1": "qtrdwqk", "2": "qtrdwql", "3": "qtrdwqm", "4": "qtrdwqn", "5": "qtrdwqo", "6": "qtrdwqp", "7": "qtrdwqq", "8": "qtrdwqr", "9": "qtrdwqs" } }, defaultVariants: { direction: "row", align: "stretch", justify: "start", wrap: "noWrap" }, compoundVariants: [] });
+exports.flexRecipe = flexRecipe;
+//# sourceMappingURL=Flex.vanilla.css.cjs.map

package/dist/components/Flex/Flex.vanilla.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Flex/Flex.vanilla.css.js

@@ -0,0 +1,9 @@
+/* empty css                                     */
+/* empty css                                    */
+/* empty css                                */
+import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+var flexRecipe = createRuntimeFn({ defaultClassName: "qtrdwq1 qtrdwq0", variantClassNames: { direction: { row: "qtrdwq2", column: "qtrdwq3", rowReverse: "qtrdwq4", columnReverse: "qtrdwq5" }, align: { start: "qtrdwq6", center: "qtrdwq7", end: "qtrdwq8", stretch: "qtrdwq9", baseline: "qtrdwqa" }, justify: { start: "qtrdwqb", center: "qtrdwqc", end: "qtrdwqd", "space-evenly": "qtrdwqe", "space-between": "qtrdwqf", "space-around": "qtrdwqg" }, wrap: { noWrap: "qtrdwqh", wrap: "qtrdwqi", wrapReverse: "qtrdwqj" }, gap: { "1": "qtrdwqk", "2": "qtrdwql", "3": "qtrdwqm", "4": "qtrdwqn", "5": "qtrdwqo", "6": "qtrdwqp", "7": "qtrdwqq", "8": "qtrdwqr", "9": "qtrdwqs" } }, defaultVariants: { direction: "row", align: "stretch", justify: "start", wrap: "noWrap" }, compoundVariants: [] });
+export {
+  flexRecipe
+};
+//# sourceMappingURL=Flex.vanilla.css.js.map

package/dist/components/Flex/Flex.vanilla.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/Flex/Flex.vanilla.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React from "react";
+import { processCSSProp } from "../../styles/cssProps.js";
+import { useVanillaExtractTheme } from "../../styles/themeContext.js";
+import { flexRecipe } from "./Flex.vanilla.css.js";
+const FlexVanillaComponent = React.forwardRef(
+  ({ as, className, css, style, direction, align, justify, wrap, gap, ...props }, ref) => {
+    const Component = as || "div";
+    const { colors } = useVanillaExtractTheme();
+    const { style: cssStyles, vars } = processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...assignInlineVars(vars)
+    };
+    const recipeClass = flexRecipe({ direction, align, justify, wrap, gap });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+FlexVanillaComponent.displayName = "FlexVanilla";
+const FlexVanilla = FlexVanillaComponent;
+export {
+  FlexVanilla,
+  FlexVanillaComponent
+};
+//# sourceMappingURL=Flex.vanilla.js.map

package/dist/components/Flex/Flex.vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.vanilla.js","sources":["../../../components/Flex/Flex.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport type {\n  FlexAlignSimplified,\n  FlexDirection,\n  FlexJustifySimplified,\n  Gap,\n} from '../../styles/types';\nimport { flexRecipe } from './Flex.vanilla.css';\n\ninterface FlexOwnProps extends CSSProps {\n  direction?: FlexDirection;\n  align?: FlexAlignSimplified;\n  justify?: FlexJustifySimplified;\n  wrap?: 'wrap' | 'noWrap' | 'wrapReverse';\n  gap?: Gap;\n}\n\nexport type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps>;\ntype FlexComponent = PolymorphicComponent<'div', FlexProps<ElementType>>;\n\nexport const FlexVanillaComponent = React.forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, direction, align, justify, wrap, gap, ...props }: FlexProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = flexRecipe({ direction, align, justify, wrap, gap });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nFlexVanillaComponent.displayName = 'FlexVanilla';\n\nexport const FlexVanilla = FlexVanillaComponent as FlexComponent;\n"],"names":[],"mappings":";;;;;;AA6BO,MAAM,uBAAuB,MAAM;AAAA,EACxC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,WAAW,OAAO,SAAS,MAAM,KAAK,GAAG,MAAA,GACtE,QACG;AACH,UAAM,YAAY,MAAM;AAExB,UAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAc,WAAW,EAAE,WAAW,OAAO,SAAS,MAAM,KAAK;AAEvE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,qBAAqB,cAAc;AAE5B,MAAM,cAAc;"}

package/dist/components/Grid/Grid.cjs

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const stitches_config = require("../../stitches.config.cjs");
+const Grid = stitches_config.styled("div", {
+  boxSizing: "border-box",
+  display: "grid",
+  variants: {
+    align: {
+      start: {
+        alignItems: "start"
+      },
+      center: {
+        alignItems: "center"
+      },
+      end: {
+        alignItems: "end"
+      },
+      stretch: {
+        alignItems: "stretch"
+      },
+      baseline: {
+        alignItems: "baseline"
+      }
+    },
+    justify: {
+      start: {
+        justifyContent: "start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      end: {
+        justifyContent: "end"
+      },
+      between: {
+        justifyContent: "space-between"
+      }
+    },
+    flow: {
+      row: {
+        gridAutoFlow: "row"
+      },
+      column: {
+        gridAutoFlow: "column"
+      },
+      dense: {
+        gridAutoFlow: "dense"
+      },
+      rowDense: {
+        gridAutoFlow: "row dense"
+      },
+      columnDense: {
+        gridAutoFlow: "column dense"
+      }
+    },
+    columns: {
+      1: {
+        gridTemplateColumns: "repeat(1, 1fr)"
+      },
+      2: {
+        gridTemplateColumns: "repeat(2, 1fr)"
+      },
+      3: {
+        gridTemplateColumns: "repeat(3, 1fr)"
+      },
+      4: {
+        gridTemplateColumns: "repeat(4, 1fr)"
+      }
+    },
+    gap: {
+      1: {
+        gap: "$1"
+      },
+      2: {
+        gap: "$2"
+      },
+      3: {
+        gap: "$3"
+      },
+      4: {
+        gap: "$4"
+      },
+      5: {
+        gap: "$5"
+      },
+      6: {
+        gap: "$6"
+      },
+      7: {
+        gap: "$7"
+      },
+      8: {
+        gap: "$8"
+      },
+      9: {
+        gap: "$9"
+      }
+    },
+    gapX: {
+      1: {
+        columnGap: "$1"
+      },
+      2: {
+        columnGap: "$2"
+      },
+      3: {
+        columnGap: "$3"
+      },
+      4: {
+        columnGap: "$4"
+      },
+      5: {
+        columnGap: "$5"
+      },
+      6: {
+        columnGap: "$6"
+      },
+      7: {
+        columnGap: "$7"
+      },
+      8: {
+        columnGap: "$8"
+      },
+      9: {
+        columnGap: "$9"
+      }
+    },
+    gapY: {
+      1: {
+        rowGap: "$1"
+      },
+      2: {
+        rowGap: "$2"
+      },
+      3: {
+        rowGap: "$3"
+      },
+      4: {
+        rowGap: "$4"
+      },
+      5: {
+        rowGap: "$5"
+      },
+      6: {
+        rowGap: "$6"
+      },
+      7: {
+        rowGap: "$7"
+      },
+      8: {
+        rowGap: "$8"
+      },
+      9: {
+        rowGap: "$9"
+      }
+    }
+  }
+});
+exports.Grid = Grid;
+//# sourceMappingURL=Grid.cjs.map

package/dist/components/Grid/Grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.cjs","sources":["../../../components/Grid/Grid.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Grid = styled('div', {\n  boxSizing: 'border-box',\n  display: 'grid',\n\n  variants: {\n    align: {\n      start: {\n        alignItems: 'start',\n      },\n      center: {\n        alignItems: 'center',\n      },\n      end: {\n        alignItems: 'end',\n      },\n      stretch: {\n        alignItems: 'stretch',\n      },\n      baseline: {\n        alignItems: 'baseline',\n      },\n    },\n    justify: {\n      start: {\n        justifyContent: 'start',\n      },\n      center: {\n        justifyContent: 'center',\n      },\n      end: {\n        justifyContent: 'end',\n      },\n      between: {\n        justifyContent: 'space-between',\n      },\n    },\n    flow: {\n      row: {\n        gridAutoFlow: 'row',\n      },\n      column: {\n        gridAutoFlow: 'column',\n      },\n      dense: {\n        gridAutoFlow: 'dense',\n      },\n      rowDense: {\n        gridAutoFlow: 'row dense',\n      },\n      columnDense: {\n        gridAutoFlow: 'column dense',\n      },\n    },\n    columns: {\n      1: {\n        gridTemplateColumns: 'repeat(1, 1fr)',\n      },\n      2: {\n        gridTemplateColumns: 'repeat(2, 1fr)',\n      },\n      3: {\n        gridTemplateColumns: 'repeat(3, 1fr)',\n      },\n      4: {\n        gridTemplateColumns: 'repeat(4, 1fr)',\n      },\n    },\n    gap: {\n      1: {\n        gap: '$1',\n      },\n      2: {\n        gap: '$2',\n      },\n      3: {\n        gap: '$3',\n      },\n      4: {\n        gap: '$4',\n      },\n      5: {\n        gap: '$5',\n      },\n      6: {\n        gap: '$6',\n      },\n      7: {\n        gap: '$7',\n      },\n      8: {\n        gap: '$8',\n      },\n      9: {\n        gap: '$9',\n      },\n    },\n    gapX: {\n      1: {\n        columnGap: '$1',\n      },\n      2: {\n        columnGap: '$2',\n      },\n      3: {\n        columnGap: '$3',\n      },\n      4: {\n        columnGap: '$4',\n      },\n      5: {\n        columnGap: '$5',\n      },\n      6: {\n        columnGap: '$6',\n      },\n      7: {\n        columnGap: '$7',\n      },\n      8: {\n        columnGap: '$8',\n      },\n      9: {\n        columnGap: '$9',\n      },\n    },\n    gapY: {\n      1: {\n        rowGap: '$1',\n      },\n      2: {\n        rowGap: '$2',\n      },\n      3: {\n        rowGap: '$3',\n      },\n      4: {\n        rowGap: '$4',\n      },\n      5: {\n        rowGap: '$5',\n      },\n      6: {\n        rowGap: '$6',\n      },\n      7: {\n        rowGap: '$7',\n      },\n      8: {\n        rowGap: '$8',\n      },\n      9: {\n        rowGap: '$9',\n      },\n    },\n  },\n});\n"],"names":["styled"],"mappings":"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"}

package/dist/components/Grid/Grid.js

@@ -0,0 +1,160 @@
+import { styled } from "../../stitches.config.js";
+const Grid = styled("div", {
+  boxSizing: "border-box",
+  display: "grid",
+  variants: {
+    align: {
+      start: {
+        alignItems: "start"
+      },
+      center: {
+        alignItems: "center"
+      },
+      end: {
+        alignItems: "end"
+      },
+      stretch: {
+        alignItems: "stretch"
+      },
+      baseline: {
+        alignItems: "baseline"
+      }
+    },
+    justify: {
+      start: {
+        justifyContent: "start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      end: {
+        justifyContent: "end"
+      },
+      between: {
+        justifyContent: "space-between"
+      }
+    },
+    flow: {
+      row: {
+        gridAutoFlow: "row"
+      },
+      column: {
+        gridAutoFlow: "column"
+      },
+      dense: {
+        gridAutoFlow: "dense"
+      },
+      rowDense: {
+        gridAutoFlow: "row dense"
+      },
+      columnDense: {
+        gridAutoFlow: "column dense"
+      }
+    },
+    columns: {
+      1: {
+        gridTemplateColumns: "repeat(1, 1fr)"
+      },
+      2: {
+        gridTemplateColumns: "repeat(2, 1fr)"
+      },
+      3: {
+        gridTemplateColumns: "repeat(3, 1fr)"
+      },
+      4: {
+        gridTemplateColumns: "repeat(4, 1fr)"
+      }
+    },
+    gap: {
+      1: {
+        gap: "$1"
+      },
+      2: {
+        gap: "$2"
+      },
+      3: {
+        gap: "$3"
+      },
+      4: {
+        gap: "$4"
+      },
+      5: {
+        gap: "$5"
+      },
+      6: {
+        gap: "$6"
+      },
+      7: {
+        gap: "$7"
+      },
+      8: {
+        gap: "$8"
+      },
+      9: {
+        gap: "$9"
+      }
+    },
+    gapX: {
+      1: {
+        columnGap: "$1"
+      },
+      2: {
+        columnGap: "$2"
+      },
+      3: {
+        columnGap: "$3"
+      },
+      4: {
+        columnGap: "$4"
+      },
+      5: {
+        columnGap: "$5"
+      },
+      6: {
+        columnGap: "$6"
+      },
+      7: {
+        columnGap: "$7"
+      },
+      8: {
+        columnGap: "$8"
+      },
+      9: {
+        columnGap: "$9"
+      }
+    },
+    gapY: {
+      1: {
+        rowGap: "$1"
+      },
+      2: {
+        rowGap: "$2"
+      },
+      3: {
+        rowGap: "$3"
+      },
+      4: {
+        rowGap: "$4"
+      },
+      5: {
+        rowGap: "$5"
+      },
+      6: {
+        rowGap: "$6"
+      },
+      7: {
+        rowGap: "$7"
+      },
+      8: {
+        rowGap: "$8"
+      },
+      9: {
+        rowGap: "$9"
+      }
+    }
+  }
+});
+export {
+  Grid
+};
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../components/Grid/Grid.tsx"],"sourcesContent":["import { styled } from '../../stitches.config';\n\nexport const Grid = styled('div', {\n  boxSizing: 'border-box',\n  display: 'grid',\n\n  variants: {\n    align: {\n      start: {\n        alignItems: 'start',\n      },\n      center: {\n        alignItems: 'center',\n      },\n      end: {\n        alignItems: 'end',\n      },\n      stretch: {\n        alignItems: 'stretch',\n      },\n      baseline: {\n        alignItems: 'baseline',\n      },\n    },\n    justify: {\n      start: {\n        justifyContent: 'start',\n      },\n      center: {\n        justifyContent: 'center',\n      },\n      end: {\n        justifyContent: 'end',\n      },\n      between: {\n        justifyContent: 'space-between',\n      },\n    },\n    flow: {\n      row: {\n        gridAutoFlow: 'row',\n      },\n      column: {\n        gridAutoFlow: 'column',\n      },\n      dense: {\n        gridAutoFlow: 'dense',\n      },\n      rowDense: {\n        gridAutoFlow: 'row dense',\n      },\n      columnDense: {\n        gridAutoFlow: 'column dense',\n      },\n    },\n    columns: {\n      1: {\n        gridTemplateColumns: 'repeat(1, 1fr)',\n      },\n      2: {\n        gridTemplateColumns: 'repeat(2, 1fr)',\n      },\n      3: {\n        gridTemplateColumns: 'repeat(3, 1fr)',\n      },\n      4: {\n        gridTemplateColumns: 'repeat(4, 1fr)',\n      },\n    },\n    gap: {\n      1: {\n        gap: '$1',\n      },\n      2: {\n        gap: '$2',\n      },\n      3: {\n        gap: '$3',\n      },\n      4: {\n        gap: '$4',\n      },\n      5: {\n        gap: '$5',\n      },\n      6: {\n        gap: '$6',\n      },\n      7: {\n        gap: '$7',\n      },\n      8: {\n        gap: '$8',\n      },\n      9: {\n        gap: '$9',\n      },\n    },\n    gapX: {\n      1: {\n        columnGap: '$1',\n      },\n      2: {\n        columnGap: '$2',\n      },\n      3: {\n        columnGap: '$3',\n      },\n      4: {\n        columnGap: '$4',\n      },\n      5: {\n        columnGap: '$5',\n      },\n      6: {\n        columnGap: '$6',\n      },\n      7: {\n        columnGap: '$7',\n      },\n      8: {\n        columnGap: '$8',\n      },\n      9: {\n        columnGap: '$9',\n      },\n    },\n    gapY: {\n      1: {\n        rowGap: '$1',\n      },\n      2: {\n        rowGap: '$2',\n      },\n      3: {\n        rowGap: '$3',\n      },\n      4: {\n        rowGap: '$4',\n      },\n      5: {\n        rowGap: '$5',\n      },\n      6: {\n        rowGap: '$6',\n      },\n      7: {\n        rowGap: '$7',\n      },\n      8: {\n        rowGap: '$8',\n      },\n      9: {\n        rowGap: '$9',\n      },\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/components/Grid/Grid.vanilla.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const dynamic = require("@vanilla-extract/dynamic");
+const React = require("react");
+const cssProps = require("../../styles/cssProps.cjs");
+const themeContext = require("../../styles/themeContext.cjs");
+const Grid_vanilla_css = require("./Grid.vanilla.css.cjs");
+const GridVanillaComponent = React.forwardRef(
+  ({
+    as,
+    className,
+    css,
+    style,
+    align,
+    justify,
+    flow,
+    columns,
+    gap,
+    gapX,
+    gapY,
+    ...props
+  }, ref) => {
+    const Component = as || "div";
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const dynamicStyles = {};
+    if (columns !== void 0) {
+      dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+    }
+    const mergedStyles = {
+      ...cssStyles,
+      ...dynamicStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    const recipeClass = Grid_vanilla_css.gridRecipe({ align, justify, flow, gap, gapX, gapY });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+GridVanillaComponent.displayName = "GridVanilla";
+const GridVanilla = GridVanillaComponent;
+exports.GridVanilla = GridVanilla;
+exports.GridVanillaComponent = GridVanillaComponent;
+//# sourceMappingURL=Grid.vanilla.cjs.map

package/dist/components/Grid/Grid.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.vanilla.cjs","sources":["../../../components/Grid/Grid.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { ElementType } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport type { Gap, GridAlign, GridFlow, GridJustify } from '../../styles/types';\nimport { gridRecipe } from './Grid.vanilla.css';\n\ninterface GridOwnProps extends CSSProps {\n  align?: GridAlign;\n  justify?: GridJustify;\n  flow?: GridFlow;\n  columns?: number;\n  gap?: Gap;\n  gapX?: Gap;\n  gapY?: Gap;\n}\n\nexport type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps>;\ntype GridComponent = PolymorphicComponent<'div', GridProps<ElementType>>;\n\nexport const GridVanillaComponent = React.forwardRef(\n  <C extends ElementType = 'div'>(\n    {\n      as,\n      className,\n      css,\n      style,\n      align,\n      justify,\n      flow,\n      columns,\n      gap,\n      gapX,\n      gapY,\n      ...props\n    }: GridProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const dynamicStyles: React.CSSProperties = {};\n\n    // To support any value on the columns props\n    if (columns !== undefined) {\n      dynamicStyles.gridTemplateColumns = `repeat(${columns}, 1fr)`;\n    }\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...dynamicStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = gridRecipe({ align, justify, flow, gap, gapX, gapY });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nGridVanillaComponent.displayName = 'GridVanilla';\n\nexport const GridVanilla = GridVanillaComponent as GridComponent;\n"],"names":["useVanillaExtractTheme","processCSSProp","assignInlineVars","gridRecipe","jsx"],"mappings":";;;;;;;;AA0BO,MAAM,uBAAuB,MAAM;AAAA,EACxC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,MAAM;AAExB,UAAM,EAAE,OAAA,IAAWA,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,gBAAqC,CAAA;AAG3C,QAAI,YAAY,QAAW;AACzB,oBAAc,sBAAsB,UAAU,OAAO;AAAA,IACvD;AAEA,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAcC,4BAAW,EAAE,OAAO,SAAS,MAAM,KAAK,MAAM,MAAM;AAExE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,qBAAqB,cAAc;AAE5B,MAAM,cAAc;;;"}

package/dist/components/Grid/Grid.vanilla.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                       */
+;/* empty css                                      */
+;/* empty css                                  */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var gridRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_1qwrd2o1 _1qwrd2o0", variantClassNames: { align: { start: "_1qwrd2o2", center: "_1qwrd2o3", end: "_1qwrd2o4", stretch: "_1qwrd2o5", baseline: "_1qwrd2o6" }, justify: { start: "_1qwrd2o7", center: "_1qwrd2o8", end: "_1qwrd2o9", between: "_1qwrd2oa" }, flow: { row: "_1qwrd2ob", column: "_1qwrd2oc", dense: "_1qwrd2od", rowDense: "_1qwrd2oe", columnDense: "_1qwrd2of" }, gap: { "1": "_1qwrd2og", "2": "_1qwrd2oh", "3": "_1qwrd2oi", "4": "_1qwrd2oj", "5": "_1qwrd2ok", "6": "_1qwrd2ol", "7": "_1qwrd2om", "8": "_1qwrd2on", "9": "_1qwrd2oo" }, gapX: { "1": "_1qwrd2op", "2": "_1qwrd2oq", "3": "_1qwrd2or", "4": "_1qwrd2os", "5": "_1qwrd2ot", "6": "_1qwrd2ou", "7": "_1qwrd2ov", "8": "_1qwrd2ow", "9": "_1qwrd2ox" }, gapY: { "1": "_1qwrd2oy", "2": "_1qwrd2oz", "3": "_1qwrd2o10", "4": "_1qwrd2o11", "5": "_1qwrd2o12", "6": "_1qwrd2o13", "7": "_1qwrd2o14", "8": "_1qwrd2o15", "9": "_1qwrd2o16" } }, defaultVariants: {}, compoundVariants: [] });
+exports.gridRecipe = gridRecipe;
+//# sourceMappingURL=Grid.vanilla.css.cjs.map

package/dist/components/Grid/Grid.vanilla.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}