@ultraviolet/ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/Stack/index.cjs

@@ -1,56 +1,81 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const Stack = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["gap", "direction", "alignItems", "justifyContent", "wrap", "width", "maxWidth", "minWidth", "flex"].includes(prop),
-  target: "ehpbis70"
-} : {
-  shouldForwardProp: (prop) => !["gap", "direction", "alignItems", "justifyContent", "wrap", "width", "maxWidth", "minWidth", "flex"].includes(prop),
-  target: "ehpbis70",
-  label: "Stack"
-})("display:flex;", ({
-  theme,
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const themes = require("@ultraviolet/themes");
+const dynamic = require("@vanilla-extract/dynamic");
+const react = require("react");
+const styles_css = require("./styles.css.cjs");
+const variables_css = require("./variables.css.cjs");
+const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce((acc, key) => ({
+  ...acc,
+  [key]: themes.consoleLightTheme.space[object[key]]
+}), {}) : {};
+const Stack = ({
   gap,
   direction = "column",
   alignItems = "normal",
   justifyContent = "normal",
   wrap = "nowrap",
+  className,
+  children,
+  id,
+  "data-testid": dataTestId,
   width,
   maxWidth,
   minWidth,
-  flex
-}) => `
-  ${wrap && typeof wrap === "boolean" ? "flex-wrap: wrap;" : ""}
-    ${wrap && typeof wrap === "object" ? Object.entries(wrap).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-               flex-wrap: ${value};
-              }`).join(" ") : `${wrap && typeof wrap !== "boolean" ? `flex-wrap: ${wrap};` : ""}`}
-    ${minWidth && typeof minWidth === "object" ? Object.entries(minWidth).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                min-width: ${value};
-              }`).join(" ") : `${minWidth ? `min-width: ${minWidth};` : ""}`}
-    ${maxWidth && typeof maxWidth === "object" ? Object.entries(maxWidth).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                max-width: ${value};
-              }`).join(" ") : `${maxWidth ? `max-width: ${maxWidth};` : ""}`}
-    ${width && typeof width === "object" ? Object.entries(width).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                width: ${value};
-              }`).join(" ") : `${width ? `width: ${width};` : ""}`}
-    ${flex && typeof flex === "object" ? Object.entries(flex).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                flex: ${value};
-              }`).join(" ") : `${flex ? `flex: ${flex};` : ""}`}
-    ${alignItems && typeof alignItems === "object" ? Object.entries(alignItems).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                align-items: ${value};
-              }`).join(" ") : `${alignItems ? `align-items: ${alignItems};` : ""}`}
-    ${justifyContent && typeof justifyContent === "object" ? Object.entries(justifyContent).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                justify-content: ${value};
-              }`).join(" ") : `${justifyContent ? `justify-content: ${justifyContent};` : ""}`}
-    ${direction && typeof direction === "object" ? Object.entries(direction).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                flex-direction: ${value};
-              }`).join(" ") : `${direction ? `flex-direction: ${direction};` : ""}`}
-
-    ${gap && typeof gap === "object" ? Object.entries(gap).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                gap: ${theme.space[value.toString()]};
-              }`).join(" ") : `${gap ? `gap: ${theme.space[gap]};` : ""}`}
-  `, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1N0YWNrL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RmMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU3RhY2svaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBDU1NQcm9wZXJ0aWVzLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgVWx0cmF2aW9sZXRVSVRoZW1lIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5cbnR5cGUgU3RhY2tQcm9wcyA9IHtcbiAgZ2FwPzpcbiAgICB8IGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXVxuICAgIHwgbnVtYmVyXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXSB8IG51bWJlclxuICAgICAgICA+XG4gICAgICA+XG4gIGRpcmVjdGlvbj86XG4gICAgfCAncm93J1xuICAgIHwgJ2NvbHVtbidcbiAgICB8IFBhcnRpYWw8UmVjb3JkPGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXSwgJ3JvdycgfCAnY29sdW1uJz4+XG4gIGFsaWduSXRlbXM/OlxuICAgIHwgQ1NTUHJvcGVydGllc1snYWxpZ25JdGVtcyddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIENTU1Byb3BlcnRpZXNbJ2FsaWduSXRlbXMnXVxuICAgICAgICA+XG4gICAgICA+XG4gIGp1c3RpZnlDb250ZW50PzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ2p1c3RpZnlDb250ZW50J11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snanVzdGlmeUNvbnRlbnQnXVxuICAgICAgICA+XG4gICAgICA+XG4gIHdyYXA/OlxuICAgIHwgYm9vbGVhblxuICAgIHwgQ1NTUHJvcGVydGllc1snZmxleFdyYXAnXVxuICAgIHwgUGFydGlhbDxcbiAgICAgICAgUmVjb3JkPFxuICAgICAgICAgIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXSxcbiAgICAgICAgICBib29sZWFuIHwgQ1NTUHJvcGVydGllc1snZmxleFdyYXAnXVxuICAgICAgICA+XG4gICAgICA+XG4gIHdpZHRoPzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ3dpZHRoJ11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sIENTU1Byb3BlcnRpZXNbJ3dpZHRoJ10+XG4gICAgICA+XG4gIG1heFdpZHRoPzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ21heFdpZHRoJ11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snbWF4V2lkdGgnXVxuICAgICAgICA+XG4gICAgICA+XG4gIG1pbldpZHRoPzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ21pbldpZHRoJ11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snbWluV2lkdGgnXVxuICAgICAgICA+XG4gICAgICA+XG4gIGZsZXg/OlxuICAgIHwgQ1NTUHJvcGVydGllc1snZmxleCddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8a2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLCBDU1NQcm9wZXJ0aWVzWydmbGV4J10+XG4gICAgICA+XG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgaWQ/OiBzdHJpbmdcbn1cblxuLyoqXG4gKiBBIFN0YWNrIGlzIGEgd2lkZ2V0IHRoYXQgb3JnYW5pemUgY2hpbGRyZW4gaW4gYSB2ZXJ0aWNhbCBvciBob3Jpem9udGFsIGxheW91dCBiYXNlZCBvbiBjc3MgRmxleCxcbiAqIGl0IGFjY2VwdHMgZmV3IHByb3BzIHRvIGRlYWwgd2l0aCBzcGFjaW5nIGFuZCBhbGlnbi5cbiAqL1xuZXhwb3J0IGNvbnN0IFN0YWNrID0gc3R5bGVkKCdkaXYnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+XG4gICAgIVtcbiAgICAgICdnYXAnLFxuICAgICAgJ2RpcmVjdGlvbicsXG4gICAgICAnYWxpZ25JdGVtcycsXG4gICAgICAnanVzdGlmeUNvbnRlbnQnLFxuICAgICAgJ3dyYXAnLFxuICAgICAgJ3dpZHRoJyxcbiAgICAgICdtYXhXaWR0aCcsXG4gICAgICAnbWluV2lkdGgnLFxuICAgICAgJ2ZsZXgnLFxuICAgIF0uaW5jbHVkZXMocHJvcCksXG59KTxTdGFja1Byb3BzPmBcbiAgZGlzcGxheTogZmxleDtcblxuICAkeyh7XG4gICAgdGhlbWUsXG4gICAgZ2FwLFxuICAgIGRpcmVjdGlvbiA9ICdjb2x1bW4nLFxuICAgIGFsaWduSXRlbXMgPSAnbm9ybWFsJyxcbiAgICBqdXN0aWZ5Q29udGVudCA9ICdub3JtYWwnLFxuICAgIHdyYXAgPSAnbm93cmFwJyxcbiAgICB3aWR0aCxcbiAgICBtYXhXaWR0aCxcbiAgICBtaW5XaWR0aCxcbiAgICBmbGV4LFxuICB9KSA9PiBgXG4gICR7d3JhcCAmJiB0eXBlb2Ygd3JhcCA9PT0gJ2Jvb2xlYW4nID8gJ2ZsZXgtd3JhcDogd3JhcDsnIDogJyd9XG4gICAgJHtcbiAgICAgIHdyYXAgJiYgdHlwZW9mIHdyYXAgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMod3JhcClcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICBmbGV4LXdyYXA6ICR7dmFsdWV9O1xuICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHt3cmFwICYmIHR5cGVvZiB3cmFwICE9PSAnYm9vbGVhbicgPyBgZmxleC13cmFwOiAke3dyYXB9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBtaW5XaWR0aCAmJiB0eXBlb2YgbWluV2lkdGggPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMobWluV2lkdGgpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIG1pbi13aWR0aDogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke21pbldpZHRoID8gYG1pbi13aWR0aDogJHttaW5XaWR0aH07YCA6ICcnfWBcbiAgICB9XG4gICAgJHtcbiAgICAgIG1heFdpZHRoICYmIHR5cGVvZiBtYXhXaWR0aCA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyhtYXhXaWR0aClcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICAgbWF4LXdpZHRoOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7bWF4V2lkdGggPyBgbWF4LXdpZHRoOiAke21heFdpZHRofTtgIDogJyd9YFxuICAgIH1cbiAgICAke1xuICAgICAgd2lkdGggJiYgdHlwZW9mIHdpZHRoID09PSAnb2JqZWN0J1xuICAgICAgICA/IE9iamVjdC5lbnRyaWVzKHdpZHRoKVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICB3aWR0aDogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke3dpZHRoID8gYHdpZHRoOiAke3dpZHRofTtgIDogJyd9YFxuICAgIH1cbiAgICAke1xuICAgICAgZmxleCAmJiB0eXBlb2YgZmxleCA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyhmbGV4KVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBmbGV4OiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7ZmxleCA/IGBmbGV4OiAke2ZsZXh9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBhbGlnbkl0ZW1zICYmIHR5cGVvZiBhbGlnbkl0ZW1zID09PSAnb2JqZWN0J1xuICAgICAgICA/IE9iamVjdC5lbnRyaWVzKGFsaWduSXRlbXMpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7YWxpZ25JdGVtcyA/IGBhbGlnbi1pdGVtczogJHthbGlnbkl0ZW1zfTtgIDogJyd9YFxuICAgIH1cbiAgICAke1xuICAgICAganVzdGlmeUNvbnRlbnQgJiYgdHlwZW9mIGp1c3RpZnlDb250ZW50ID09PSAnb2JqZWN0J1xuICAgICAgICA/IE9iamVjdC5lbnRyaWVzKGp1c3RpZnlDb250ZW50KVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6ICR7dmFsdWV9O1xuICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHtqdXN0aWZ5Q29udGVudCA/IGBqdXN0aWZ5LWNvbnRlbnQ6ICR7anVzdGlmeUNvbnRlbnR9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBkaXJlY3Rpb24gJiYgdHlwZW9mIGRpcmVjdGlvbiA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyhkaXJlY3Rpb24pXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7ZGlyZWN0aW9uID8gYGZsZXgtZGlyZWN0aW9uOiAke2RpcmVjdGlvbn07YCA6ICcnfWBcbiAgICB9XG5cbiAgICAke1xuICAgICAgZ2FwICYmIHR5cGVvZiBnYXAgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoZ2FwKVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBnYXA6ICR7dGhlbWUuc3BhY2VbdmFsdWUudG9TdHJpbmcoKSBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ3NwYWNlJ11dfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7Z2FwID8gYGdhcDogJHt0aGVtZS5zcGFjZVtnYXAgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydzcGFjZSddXX07YCA6ICcnfWBcbiAgICB9XG4gIGB9XG5gXG4iXX0= */"));
+  flex,
+  as,
+  ref,
+  ...props
+}) => {
+  const wrapValue = react.useMemo(() => {
+    if (typeof wrap === "boolean") {
+      return wrap ? "wrap" : "nowrap";
+    }
+    if (typeof wrap === "object") {
+      return Object.keys(wrap).reduce((acc, key) => ({
+        ...acc,
+        [key]: wrap[key] ? "wrap" : "nowrap"
+      }), {});
+    }
+    return wrap;
+  }, [wrap]);
+  const Component = as || "div";
+  const sprinkleClassName = styles_css.sprinkles({
+    alignItems: typeof alignItems === "object" ? alignItems : {
+      xxsmall: alignItems
+    },
+    flexDirection: typeof direction === "object" ? direction : {
+      xxsmall: direction
+    },
+    flexWrap: typeof wrapValue === "object" ? wrapValue : {
+      xxsmall: wrapValue
+    },
+    gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : {
+      xxsmall: gap ? themes.consoleLightTheme.space[gap] : void 0
+    },
+    justifyContent: typeof justifyContent === "object" ? justifyContent : {
+      xxsmall: justifyContent
+    }
+  });
+  const combinedClassName = [className, styles_css.stack, sprinkleClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: combinedClassName,
+      "data-testid": dataTestId,
+      id,
+      ref,
+      style: dynamic.assignInlineVars({
+        [variables_css.widthVar]: width?.toString(),
+        [variables_css.maxWidthVar]: maxWidth?.toString(),
+        [variables_css.minWidthVar]: minWidth?.toString(),
+        [variables_css.flexVar]: flex?.toString()
+      }),
+      ...props,
+      children
+    }
+  );
+};
 exports.Stack = Stack;

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

@@ -1,26 +1,24 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ElementType, ReactNode } from 'react';
 import type { UltravioletUITheme } from '../../theme';
-type StackProps = {
-    gap?: keyof UltravioletUITheme['space'] | number | Partial<Record<keyof UltravioletUITheme['breakpoints'], keyof UltravioletUITheme['space'] | number>>;
-    direction?: 'row' | 'column' | Partial<Record<keyof UltravioletUITheme['breakpoints'], 'row' | 'column'>>;
-    alignItems?: CSSProperties['alignItems'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['alignItems']>>;
-    justifyContent?: CSSProperties['justifyContent'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['justifyContent']>>;
-    wrap?: boolean | CSSProperties['flexWrap'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], boolean | CSSProperties['flexWrap']>>;
-    width?: CSSProperties['width'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['width']>>;
-    maxWidth?: CSSProperties['maxWidth'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['maxWidth']>>;
-    minWidth?: CSSProperties['minWidth'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['minWidth']>>;
-    flex?: CSSProperties['flex'] | Partial<Record<keyof UltravioletUITheme['breakpoints'], CSSProperties['flex']>>;
+import type { AlignItemsType, JustifyContentType } from './styles.css';
+import type { PolymorphicComponentProps } from './types';
+type ResponsiveProp<T> = T | Partial<Record<keyof UltravioletUITheme['breakpoints'], T>>;
+type ToNumber<T extends string> = T extends `${infer N extends number}` ? N : never;
+type OwnStackProps = {
+    gap?: ResponsiveProp<keyof UltravioletUITheme['space'] | ToNumber<keyof UltravioletUITheme['space']>>;
+    direction?: ResponsiveProp<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    alignItems?: ResponsiveProp<AlignItemsType>;
+    justifyContent?: ResponsiveProp<JustifyContentType>;
+    wrap?: ResponsiveProp<boolean | CSSProperties['flexWrap']>;
+    width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
+    minWidth?: CSSProperties['minWidth'];
+    flex?: CSSProperties['flex'];
     className?: string;
     children: ReactNode;
     'data-testid'?: string;
     id?: string;
 };
-/**
- * A Stack is a widget that organize children in a vertical or horizontal layout based on css Flex,
- * it accepts few props to deal with spacing and align.
- */
-export declare const Stack: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & StackProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export type StackProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T, OwnStackProps>;
+export declare const Stack: <T extends ElementType = "div">({ gap, direction, alignItems, justifyContent, wrap, className, children, id, "data-testid": dataTestId, width, maxWidth, minWidth, flex, as, ref, ...props }: StackProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Stack/index.js

@@ -1,54 +1,81 @@
 "use client";
-import _styled from "@emotion/styled/base";
-const Stack = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["gap", "direction", "alignItems", "justifyContent", "wrap", "width", "maxWidth", "minWidth", "flex"].includes(prop),
-  target: "ehpbis70"
-} : {
-  shouldForwardProp: (prop) => !["gap", "direction", "alignItems", "justifyContent", "wrap", "width", "maxWidth", "minWidth", "flex"].includes(prop),
-  target: "ehpbis70",
-  label: "Stack"
-})("display:flex;", ({
-  theme,
+import { jsx } from "@emotion/react/jsx-runtime";
+import { consoleLightTheme } from "@ultraviolet/themes";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { useMemo } from "react";
+import { sprinkles, stack } from "./styles.css.js";
+import { flexVar, minWidthVar, maxWidthVar, widthVar } from "./variables.css.js";
+const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce((acc, key) => ({
+  ...acc,
+  [key]: consoleLightTheme.space[object[key]]
+}), {}) : {};
+const Stack = ({
   gap,
   direction = "column",
   alignItems = "normal",
   justifyContent = "normal",
   wrap = "nowrap",
+  className,
+  children,
+  id,
+  "data-testid": dataTestId,
   width,
   maxWidth,
   minWidth,
-  flex
-}) => `
-  ${wrap && typeof wrap === "boolean" ? "flex-wrap: wrap;" : ""}
-    ${wrap && typeof wrap === "object" ? Object.entries(wrap).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-               flex-wrap: ${value};
-              }`).join(" ") : `${wrap && typeof wrap !== "boolean" ? `flex-wrap: ${wrap};` : ""}`}
-    ${minWidth && typeof minWidth === "object" ? Object.entries(minWidth).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                min-width: ${value};
-              }`).join(" ") : `${minWidth ? `min-width: ${minWidth};` : ""}`}
-    ${maxWidth && typeof maxWidth === "object" ? Object.entries(maxWidth).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                max-width: ${value};
-              }`).join(" ") : `${maxWidth ? `max-width: ${maxWidth};` : ""}`}
-    ${width && typeof width === "object" ? Object.entries(width).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                width: ${value};
-              }`).join(" ") : `${width ? `width: ${width};` : ""}`}
-    ${flex && typeof flex === "object" ? Object.entries(flex).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                flex: ${value};
-              }`).join(" ") : `${flex ? `flex: ${flex};` : ""}`}
-    ${alignItems && typeof alignItems === "object" ? Object.entries(alignItems).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                align-items: ${value};
-              }`).join(" ") : `${alignItems ? `align-items: ${alignItems};` : ""}`}
-    ${justifyContent && typeof justifyContent === "object" ? Object.entries(justifyContent).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                justify-content: ${value};
-              }`).join(" ") : `${justifyContent ? `justify-content: ${justifyContent};` : ""}`}
-    ${direction && typeof direction === "object" ? Object.entries(direction).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                flex-direction: ${value};
-              }`).join(" ") : `${direction ? `flex-direction: ${direction};` : ""}`}
-
-    ${gap && typeof gap === "object" ? Object.entries(gap).map(([breakpoint, value]) => `@media (min-width: ${theme.breakpoints[breakpoint]}) {
-                gap: ${theme.space[value.toString()]};
-              }`).join(" ") : `${gap ? `gap: ${theme.space[gap]};` : ""}`}
-  `, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1N0YWNrL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RmMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU3RhY2svaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBDU1NQcm9wZXJ0aWVzLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgVWx0cmF2aW9sZXRVSVRoZW1lIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5cbnR5cGUgU3RhY2tQcm9wcyA9IHtcbiAgZ2FwPzpcbiAgICB8IGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXVxuICAgIHwgbnVtYmVyXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnc3BhY2UnXSB8IG51bWJlclxuICAgICAgICA+XG4gICAgICA+XG4gIGRpcmVjdGlvbj86XG4gICAgfCAncm93J1xuICAgIHwgJ2NvbHVtbidcbiAgICB8IFBhcnRpYWw8UmVjb3JkPGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXSwgJ3JvdycgfCAnY29sdW1uJz4+XG4gIGFsaWduSXRlbXM/OlxuICAgIHwgQ1NTUHJvcGVydGllc1snYWxpZ25JdGVtcyddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8XG4gICAgICAgICAga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLFxuICAgICAgICAgIENTU1Byb3BlcnRpZXNbJ2FsaWduSXRlbXMnXVxuICAgICAgICA+XG4gICAgICA+XG4gIGp1c3RpZnlDb250ZW50PzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ2p1c3RpZnlDb250ZW50J11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snanVzdGlmeUNvbnRlbnQnXVxuICAgICAgICA+XG4gICAgICA+XG4gIHdyYXA/OlxuICAgIHwgYm9vbGVhblxuICAgIHwgQ1NTUHJvcGVydGllc1snZmxleFdyYXAnXVxuICAgIHwgUGFydGlhbDxcbiAgICAgICAgUmVjb3JkPFxuICAgICAgICAgIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXSxcbiAgICAgICAgICBib29sZWFuIHwgQ1NTUHJvcGVydGllc1snZmxleFdyYXAnXVxuICAgICAgICA+XG4gICAgICA+XG4gIHdpZHRoPzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ3dpZHRoJ11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sIENTU1Byb3BlcnRpZXNbJ3dpZHRoJ10+XG4gICAgICA+XG4gIG1heFdpZHRoPzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ21heFdpZHRoJ11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snbWF4V2lkdGgnXVxuICAgICAgICA+XG4gICAgICA+XG4gIG1pbldpZHRoPzpcbiAgICB8IENTU1Byb3BlcnRpZXNbJ21pbldpZHRoJ11cbiAgICB8IFBhcnRpYWw8XG4gICAgICAgIFJlY29yZDxcbiAgICAgICAgICBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ10sXG4gICAgICAgICAgQ1NTUHJvcGVydGllc1snbWluV2lkdGgnXVxuICAgICAgICA+XG4gICAgICA+XG4gIGZsZXg/OlxuICAgIHwgQ1NTUHJvcGVydGllc1snZmxleCddXG4gICAgfCBQYXJ0aWFsPFxuICAgICAgICBSZWNvcmQ8a2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddLCBDU1NQcm9wZXJ0aWVzWydmbGV4J10+XG4gICAgICA+XG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgaWQ/OiBzdHJpbmdcbn1cblxuLyoqXG4gKiBBIFN0YWNrIGlzIGEgd2lkZ2V0IHRoYXQgb3JnYW5pemUgY2hpbGRyZW4gaW4gYSB2ZXJ0aWNhbCBvciBob3Jpem9udGFsIGxheW91dCBiYXNlZCBvbiBjc3MgRmxleCxcbiAqIGl0IGFjY2VwdHMgZmV3IHByb3BzIHRvIGRlYWwgd2l0aCBzcGFjaW5nIGFuZCBhbGlnbi5cbiAqL1xuZXhwb3J0IGNvbnN0IFN0YWNrID0gc3R5bGVkKCdkaXYnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+XG4gICAgIVtcbiAgICAgICdnYXAnLFxuICAgICAgJ2RpcmVjdGlvbicsXG4gICAgICAnYWxpZ25JdGVtcycsXG4gICAgICAnanVzdGlmeUNvbnRlbnQnLFxuICAgICAgJ3dyYXAnLFxuICAgICAgJ3dpZHRoJyxcbiAgICAgICdtYXhXaWR0aCcsXG4gICAgICAnbWluV2lkdGgnLFxuICAgICAgJ2ZsZXgnLFxuICAgIF0uaW5jbHVkZXMocHJvcCksXG59KTxTdGFja1Byb3BzPmBcbiAgZGlzcGxheTogZmxleDtcblxuICAkeyh7XG4gICAgdGhlbWUsXG4gICAgZ2FwLFxuICAgIGRpcmVjdGlvbiA9ICdjb2x1bW4nLFxuICAgIGFsaWduSXRlbXMgPSAnbm9ybWFsJyxcbiAgICBqdXN0aWZ5Q29udGVudCA9ICdub3JtYWwnLFxuICAgIHdyYXAgPSAnbm93cmFwJyxcbiAgICB3aWR0aCxcbiAgICBtYXhXaWR0aCxcbiAgICBtaW5XaWR0aCxcbiAgICBmbGV4LFxuICB9KSA9PiBgXG4gICR7d3JhcCAmJiB0eXBlb2Ygd3JhcCA9PT0gJ2Jvb2xlYW4nID8gJ2ZsZXgtd3JhcDogd3JhcDsnIDogJyd9XG4gICAgJHtcbiAgICAgIHdyYXAgJiYgdHlwZW9mIHdyYXAgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMod3JhcClcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICBmbGV4LXdyYXA6ICR7dmFsdWV9O1xuICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHt3cmFwICYmIHR5cGVvZiB3cmFwICE9PSAnYm9vbGVhbicgPyBgZmxleC13cmFwOiAke3dyYXB9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBtaW5XaWR0aCAmJiB0eXBlb2YgbWluV2lkdGggPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMobWluV2lkdGgpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIG1pbi13aWR0aDogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke21pbldpZHRoID8gYG1pbi13aWR0aDogJHttaW5XaWR0aH07YCA6ICcnfWBcbiAgICB9XG4gICAgJHtcbiAgICAgIG1heFdpZHRoICYmIHR5cGVvZiBtYXhXaWR0aCA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyhtYXhXaWR0aClcbiAgICAgICAgICAgIC5tYXAoXG4gICAgICAgICAgICAgIChbYnJlYWtwb2ludCwgdmFsdWVdKSA9PlxuICAgICAgICAgICAgICAgIGBAbWVkaWEgKG1pbi13aWR0aDogJHt0aGVtZS5icmVha3BvaW50c1ticmVha3BvaW50IGFzIGtleW9mIFVsdHJhdmlvbGV0VUlUaGVtZVsnYnJlYWtwb2ludHMnXV19KSB7XG4gICAgICAgICAgICAgICAgbWF4LXdpZHRoOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7bWF4V2lkdGggPyBgbWF4LXdpZHRoOiAke21heFdpZHRofTtgIDogJyd9YFxuICAgIH1cbiAgICAke1xuICAgICAgd2lkdGggJiYgdHlwZW9mIHdpZHRoID09PSAnb2JqZWN0J1xuICAgICAgICA/IE9iamVjdC5lbnRyaWVzKHdpZHRoKVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICB3aWR0aDogJHt2YWx1ZX07XG4gICAgICAgICAgICAgIH1gLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLmpvaW4oJyAnKVxuICAgICAgICA6IGAke3dpZHRoID8gYHdpZHRoOiAke3dpZHRofTtgIDogJyd9YFxuICAgIH1cbiAgICAke1xuICAgICAgZmxleCAmJiB0eXBlb2YgZmxleCA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyhmbGV4KVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBmbGV4OiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7ZmxleCA/IGBmbGV4OiAke2ZsZXh9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBhbGlnbkl0ZW1zICYmIHR5cGVvZiBhbGlnbkl0ZW1zID09PSAnb2JqZWN0J1xuICAgICAgICA/IE9iamVjdC5lbnRyaWVzKGFsaWduSXRlbXMpXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7YWxpZ25JdGVtcyA/IGBhbGlnbi1pdGVtczogJHthbGlnbkl0ZW1zfTtgIDogJyd9YFxuICAgIH1cbiAgICAke1xuICAgICAganVzdGlmeUNvbnRlbnQgJiYgdHlwZW9mIGp1c3RpZnlDb250ZW50ID09PSAnb2JqZWN0J1xuICAgICAgICA/IE9iamVjdC5lbnRyaWVzKGp1c3RpZnlDb250ZW50KVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6ICR7dmFsdWV9O1xuICAgICAgICAgICAgICB9YCxcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgOiBgJHtqdXN0aWZ5Q29udGVudCA/IGBqdXN0aWZ5LWNvbnRlbnQ6ICR7anVzdGlmeUNvbnRlbnR9O2AgOiAnJ31gXG4gICAgfVxuICAgICR7XG4gICAgICBkaXJlY3Rpb24gJiYgdHlwZW9mIGRpcmVjdGlvbiA9PT0gJ29iamVjdCdcbiAgICAgICAgPyBPYmplY3QuZW50cmllcyhkaXJlY3Rpb24pXG4gICAgICAgICAgICAubWFwKFxuICAgICAgICAgICAgICAoW2JyZWFrcG9pbnQsIHZhbHVlXSkgPT5cbiAgICAgICAgICAgICAgICBgQG1lZGlhIChtaW4td2lkdGg6ICR7dGhlbWUuYnJlYWtwb2ludHNbYnJlYWtwb2ludCBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ2JyZWFrcG9pbnRzJ11dfSkge1xuICAgICAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiAke3ZhbHVlfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7ZGlyZWN0aW9uID8gYGZsZXgtZGlyZWN0aW9uOiAke2RpcmVjdGlvbn07YCA6ICcnfWBcbiAgICB9XG5cbiAgICAke1xuICAgICAgZ2FwICYmIHR5cGVvZiBnYXAgPT09ICdvYmplY3QnXG4gICAgICAgID8gT2JqZWN0LmVudHJpZXMoZ2FwKVxuICAgICAgICAgICAgLm1hcChcbiAgICAgICAgICAgICAgKFticmVha3BvaW50LCB2YWx1ZV0pID0+XG4gICAgICAgICAgICAgICAgYEBtZWRpYSAobWluLXdpZHRoOiAke3RoZW1lLmJyZWFrcG9pbnRzW2JyZWFrcG9pbnQgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydicmVha3BvaW50cyddXX0pIHtcbiAgICAgICAgICAgICAgICBnYXA6ICR7dGhlbWUuc3BhY2VbdmFsdWUudG9TdHJpbmcoKSBhcyBrZXlvZiBVbHRyYXZpb2xldFVJVGhlbWVbJ3NwYWNlJ11dfTtcbiAgICAgICAgICAgICAgfWAsXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgIDogYCR7Z2FwID8gYGdhcDogJHt0aGVtZS5zcGFjZVtnYXAgYXMga2V5b2YgVWx0cmF2aW9sZXRVSVRoZW1lWydzcGFjZSddXX07YCA6ICcnfWBcbiAgICB9XG4gIGB9XG5gXG4iXX0= */"));
+  flex,
+  as,
+  ref,
+  ...props
+}) => {
+  const wrapValue = useMemo(() => {
+    if (typeof wrap === "boolean") {
+      return wrap ? "wrap" : "nowrap";
+    }
+    if (typeof wrap === "object") {
+      return Object.keys(wrap).reduce((acc, key) => ({
+        ...acc,
+        [key]: wrap[key] ? "wrap" : "nowrap"
+      }), {});
+    }
+    return wrap;
+  }, [wrap]);
+  const Component = as || "div";
+  const sprinkleClassName = sprinkles({
+    alignItems: typeof alignItems === "object" ? alignItems : {
+      xxsmall: alignItems
+    },
+    flexDirection: typeof direction === "object" ? direction : {
+      xxsmall: direction
+    },
+    flexWrap: typeof wrapValue === "object" ? wrapValue : {
+      xxsmall: wrapValue
+    },
+    gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : {
+      xxsmall: gap ? consoleLightTheme.space[gap] : void 0
+    },
+    justifyContent: typeof justifyContent === "object" ? justifyContent : {
+      xxsmall: justifyContent
+    }
+  });
+  const combinedClassName = [className, stack, sprinkleClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: combinedClassName,
+      "data-testid": dataTestId,
+      id,
+      ref,
+      style: assignInlineVars({
+        [widthVar]: width?.toString(),
+        [maxWidthVar]: maxWidth?.toString(),
+        [minWidthVar]: minWidth?.toString(),
+        [flexVar]: flex?.toString()
+      }),
+      ...props,
+      children
+    }
+  );
+};
 export {
   Stack
 };

package/dist/components/Stack/styles.css.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                               */
+;/* empty css                            */
+const createRuntimeSprinkles = require("@vanilla-extract/sprinkles/createRuntimeSprinkles");
+var stack = "uv_toi52u0";
+var responsiveProperties = function() {
+  var x = { conditions: { defaultCondition: "xxsmall", conditionNames: ["xxsmall", "xsmall", "small", "medium", "large", "xlarge"], responsiveArray: ["xxsmall", "xsmall", "small", "medium", "large"] }, styles: { gap: { values: { "0rem": { conditions: { xxsmall: "uv_toi52u1", xsmall: "uv_toi52u2", small: "uv_toi52u3", medium: "uv_toi52u4", large: "uv_toi52u5", xlarge: "uv_toi52u6" }, defaultClass: "uv_toi52u1" }, "0.5rem": { conditions: { xxsmall: "uv_toi52u7", xsmall: "uv_toi52u8", small: "uv_toi52u9", medium: "uv_toi52ua", large: "uv_toi52ub", xlarge: "uv_toi52uc" }, defaultClass: "uv_toi52u7" }, "1rem": { conditions: { xxsmall: "uv_toi52ud", xsmall: "uv_toi52ue", small: "uv_toi52uf", medium: "uv_toi52ug", large: "uv_toi52uh", xlarge: "uv_toi52ui" }, defaultClass: "uv_toi52ud" }, "1.5rem": { conditions: { xxsmall: "uv_toi52uj", xsmall: "uv_toi52uk", small: "uv_toi52ul", medium: "uv_toi52um", large: "uv_toi52un", xlarge: "uv_toi52uo" }, defaultClass: "uv_toi52uj" }, "2rem": { conditions: { xxsmall: "uv_toi52up", xsmall: "uv_toi52uq", small: "uv_toi52ur", medium: "uv_toi52us", large: "uv_toi52ut", xlarge: "uv_toi52uu" }, defaultClass: "uv_toi52up" }, "2.5rem": { conditions: { xxsmall: "uv_toi52uv", xsmall: "uv_toi52uw", small: "uv_toi52ux", medium: "uv_toi52uy", large: "uv_toi52uz", xlarge: "uv_toi52u10" }, defaultClass: "uv_toi52uv" }, "3rem": { conditions: { xxsmall: "uv_toi52u11", xsmall: "uv_toi52u12", small: "uv_toi52u13", medium: "uv_toi52u14", large: "uv_toi52u15", xlarge: "uv_toi52u16" }, defaultClass: "uv_toi52u11" }, "3.5rem": { conditions: { xxsmall: "uv_toi52u17", xsmall: "uv_toi52u18", small: "uv_toi52u19", medium: "uv_toi52u1a", large: "uv_toi52u1b", xlarge: "uv_toi52u1c" }, defaultClass: "uv_toi52u17" }, "4rem": { conditions: { xxsmall: "uv_toi52u1d", xsmall: "uv_toi52u1e", small: "uv_toi52u1f", medium: "uv_toi52u1g", large: "uv_toi52u1h", xlarge: "uv_toi52u1i" }, defaultClass: "uv_toi52u1d" }, "4.5rem": { conditions: { xxsmall: "uv_toi52u1j", xsmall: "uv_toi52u1k", small: "uv_toi52u1l", medium: "uv_toi52u1m", large: "uv_toi52u1n", xlarge: "uv_toi52u1o" }, defaultClass: "uv_toi52u1j" }, "5rem": { conditions: { xxsmall: "uv_toi52u1p", xsmall: "uv_toi52u1q", small: "uv_toi52u1r", medium: "uv_toi52u1s", large: "uv_toi52u1t", xlarge: "uv_toi52u1u" }, defaultClass: "uv_toi52u1p" }, "0.25rem": { conditions: { xxsmall: "uv_toi52u1v", xsmall: "uv_toi52u1w", small: "uv_toi52u1x", medium: "uv_toi52u1y", large: "uv_toi52u1z", xlarge: "uv_toi52u20" }, defaultClass: "uv_toi52u1v" }, "0.125rem": { conditions: { xxsmall: "uv_toi52u21", xsmall: "uv_toi52u22", small: "uv_toi52u23", medium: "uv_toi52u24", large: "uv_toi52u25", xlarge: "uv_toi52u26" }, defaultClass: "uv_toi52u21" }, "0.75rem": { conditions: { xxsmall: "uv_toi52u27", xsmall: "uv_toi52u28", small: "uv_toi52u29", medium: "uv_toi52u2a", large: "uv_toi52u2b", xlarge: "uv_toi52u2c" }, defaultClass: "uv_toi52u27" } }, responsiveArray: void 0 }, flexDirection: { values: { column: { conditions: { xxsmall: "uv_toi52u2d", xsmall: "uv_toi52u2e", small: "uv_toi52u2f", medium: "uv_toi52u2g", large: "uv_toi52u2h", xlarge: "uv_toi52u2i" }, defaultClass: "uv_toi52u2d" }, row: { conditions: { xxsmall: "uv_toi52u2j", xsmall: "uv_toi52u2k", small: "uv_toi52u2l", medium: "uv_toi52u2m", large: "uv_toi52u2n", xlarge: "uv_toi52u2o" }, defaultClass: "uv_toi52u2j" }, "row-reverse": { conditions: { xxsmall: "uv_toi52u2p", xsmall: "uv_toi52u2q", small: "uv_toi52u2r", medium: "uv_toi52u2s", large: "uv_toi52u2t", xlarge: "uv_toi52u2u" }, defaultClass: "uv_toi52u2p" }, "column-reverse": { conditions: { xxsmall: "uv_toi52u2v", xsmall: "uv_toi52u2w", small: "uv_toi52u2x", medium: "uv_toi52u2y", large: "uv_toi52u2z", xlarge: "uv_toi52u30" }, defaultClass: "uv_toi52u2v" } }, responsiveArray: void 0 }, alignItems: { values: { normal: { conditions: { xxsmall: "uv_toi52u31", xsmall: "uv_toi52u32", small: "uv_toi52u33", medium: "uv_toi52u34", large: "uv_toi52u35", xlarge: "uv_toi52u36" }, defaultClass: "uv_toi52u31" }, stretch: { conditions: { xxsmall: "uv_toi52u37", xsmall: "uv_toi52u38", small: "uv_toi52u39", medium: "uv_toi52u3a", large: "uv_toi52u3b", xlarge: "uv_toi52u3c" }, defaultClass: "uv_toi52u37" }, center: { conditions: { xxsmall: "uv_toi52u3d", xsmall: "uv_toi52u3e", small: "uv_toi52u3f", medium: "uv_toi52u3g", large: "uv_toi52u3h", xlarge: "uv_toi52u3i" }, defaultClass: "uv_toi52u3d" }, start: { conditions: { xxsmall: "uv_toi52u3j", xsmall: "uv_toi52u3k", small: "uv_toi52u3l", medium: "uv_toi52u3m", large: "uv_toi52u3n", xlarge: "uv_toi52u3o" }, defaultClass: "uv_toi52u3j" }, end: { conditions: { xxsmall: "uv_toi52u3p", xsmall: "uv_toi52u3q", small: "uv_toi52u3r", medium: "uv_toi52u3s", large: "uv_toi52u3t", xlarge: "uv_toi52u3u" }, defaultClass: "uv_toi52u3p" }, "flex-start": { conditions: { xxsmall: "uv_toi52u3v", xsmall: "uv_toi52u3w", small: "uv_toi52u3x", medium: "uv_toi52u3y", large: "uv_toi52u3z", xlarge: "uv_toi52u40" }, defaultClass: "uv_toi52u3v" }, "flex-end": { conditions: { xxsmall: "uv_toi52u41", xsmall: "uv_toi52u42", small: "uv_toi52u43", medium: "uv_toi52u44", large: "uv_toi52u45", xlarge: "uv_toi52u46" }, defaultClass: "uv_toi52u41" }, "self-start": { conditions: { xxsmall: "uv_toi52u47", xsmall: "uv_toi52u48", small: "uv_toi52u49", medium: "uv_toi52u4a", large: "uv_toi52u4b", xlarge: "uv_toi52u4c" }, defaultClass: "uv_toi52u47" }, "self-end": { conditions: { xxsmall: "uv_toi52u4d", xsmall: "uv_toi52u4e", small: "uv_toi52u4f", medium: "uv_toi52u4g", large: "uv_toi52u4h", xlarge: "uv_toi52u4i" }, defaultClass: "uv_toi52u4d" }, baseline: { conditions: { xxsmall: "uv_toi52u4j", xsmall: "uv_toi52u4k", small: "uv_toi52u4l", medium: "uv_toi52u4m", large: "uv_toi52u4n", xlarge: "uv_toi52u4o" }, defaultClass: "uv_toi52u4j" }, "first baseline": { conditions: { xxsmall: "uv_toi52u4p", xsmall: "uv_toi52u4q", small: "uv_toi52u4r", medium: "uv_toi52u4s", large: "uv_toi52u4t", xlarge: "uv_toi52u4u" }, defaultClass: "uv_toi52u4p" }, "last baseline": { conditions: { xxsmall: "uv_toi52u4v", xsmall: "uv_toi52u4w", small: "uv_toi52u4x", medium: "uv_toi52u4y", large: "uv_toi52u4z", xlarge: "uv_toi52u50" }, defaultClass: "uv_toi52u4v" }, "safe center": { conditions: { xxsmall: "uv_toi52u51", xsmall: "uv_toi52u52", small: "uv_toi52u53", medium: "uv_toi52u54", large: "uv_toi52u55", xlarge: "uv_toi52u56" }, defaultClass: "uv_toi52u51" }, "unsafe center": { conditions: { xxsmall: "uv_toi52u57", xsmall: "uv_toi52u58", small: "uv_toi52u59", medium: "uv_toi52u5a", large: "uv_toi52u5b", xlarge: "uv_toi52u5c" }, defaultClass: "uv_toi52u57" } }, responsiveArray: void 0 }, justifyContent: { values: { normal: { conditions: { xxsmall: "uv_toi52u5d", xsmall: "uv_toi52u5e", small: "uv_toi52u5f", medium: "uv_toi52u5g", large: "uv_toi52u5h", xlarge: "uv_toi52u5i" }, defaultClass: "uv_toi52u5d" }, center: { conditions: { xxsmall: "uv_toi52u5j", xsmall: "uv_toi52u5k", small: "uv_toi52u5l", medium: "uv_toi52u5m", large: "uv_toi52u5n", xlarge: "uv_toi52u5o" }, defaultClass: "uv_toi52u5j" }, start: { conditions: { xxsmall: "uv_toi52u5p", xsmall: "uv_toi52u5q", small: "uv_toi52u5r", medium: "uv_toi52u5s", large: "uv_toi52u5t", xlarge: "uv_toi52u5u" }, defaultClass: "uv_toi52u5p" }, end: { conditions: { xxsmall: "uv_toi52u5v", xsmall: "uv_toi52u5w", small: "uv_toi52u5x", medium: "uv_toi52u5y", large: "uv_toi52u5z", xlarge: "uv_toi52u60" }, defaultClass: "uv_toi52u5v" }, "flex-start": { conditions: { xxsmall: "uv_toi52u61", xsmall: "uv_toi52u62", small: "uv_toi52u63", medium: "uv_toi52u64", large: "uv_toi52u65", xlarge: "uv_toi52u66" }, defaultClass: "uv_toi52u61" }, "flex-end": { conditions: { xxsmall: "uv_toi52u67", xsmall: "uv_toi52u68", small: "uv_toi52u69", medium: "uv_toi52u6a", large: "uv_toi52u6b", xlarge: "uv_toi52u6c" }, defaultClass: "uv_toi52u67" }, left: { conditions: { xxsmall: "uv_toi52u6d", xsmall: "uv_toi52u6e", small: "uv_toi52u6f", medium: "uv_toi52u6g", large: "uv_toi52u6h", xlarge: "uv_toi52u6i" }, defaultClass: "uv_toi52u6d" }, right: { conditions: { xxsmall: "uv_toi52u6j", xsmall: "uv_toi52u6k", small: "uv_toi52u6l", medium: "uv_toi52u6m", large: "uv_toi52u6n", xlarge: "uv_toi52u6o" }, defaultClass: "uv_toi52u6j" }, "space-between": { conditions: { xxsmall: "uv_toi52u6p", xsmall: "uv_toi52u6q", small: "uv_toi52u6r", medium: "uv_toi52u6s", large: "uv_toi52u6t", xlarge: "uv_toi52u6u" }, defaultClass: "uv_toi52u6p" }, "space-around": { conditions: { xxsmall: "uv_toi52u6v", xsmall: "uv_toi52u6w", small: "uv_toi52u6x", medium: "uv_toi52u6y", large: "uv_toi52u6z", xlarge: "uv_toi52u70" }, defaultClass: "uv_toi52u6v" }, "space-evenly": { conditions: { xxsmall: "uv_toi52u71", xsmall: "uv_toi52u72", small: "uv_toi52u73", medium: "uv_toi52u74", large: "uv_toi52u75", xlarge: "uv_toi52u76" }, defaultClass: "uv_toi52u71" }, stretch: { conditions: { xxsmall: "uv_toi52u77", xsmall: "uv_toi52u78", small: "uv_toi52u79", medium: "uv_toi52u7a", large: "uv_toi52u7b", xlarge: "uv_toi52u7c" }, defaultClass: "uv_toi52u77" } }, responsiveArray: void 0 }, flexWrap: { values: { nowrap: { conditions: { xxsmall: "uv_toi52u7d", xsmall: "uv_toi52u7e", small: "uv_toi52u7f", medium: "uv_toi52u7g", large: "uv_toi52u7h", xlarge: "uv_toi52u7i" }, defaultClass: "uv_toi52u7d" }, wrap: { conditions: { xxsmall: "uv_toi52u7j", xsmall: "uv_toi52u7k", small: "uv_toi52u7l", medium: "uv_toi52u7m", large: "uv_toi52u7n", xlarge: "uv_toi52u7o" }, defaultClass: "uv_toi52u7j" }, "wrap-reverse": { conditions: { xxsmall: "uv_toi52u7p", xsmall: "uv_toi52u7q", small: "uv_toi52u7r", medium: "uv_toi52u7s", large: "uv_toi52u7t", xlarge: "uv_toi52u7u" }, defaultClass: "uv_toi52u7p" } }, responsiveArray: void 0 } } };
+  x.styles.gap.responsiveArray = x.conditions.responsiveArray;
+  x.styles.flexDirection.responsiveArray = x.conditions.responsiveArray;
+  x.styles.alignItems.responsiveArray = x.conditions.responsiveArray;
+  x.styles.justifyContent.responsiveArray = x.conditions.responsiveArray;
+  x.styles.flexWrap.responsiveArray = x.conditions.responsiveArray;
+  return x;
+}();
+var sprinkles = createRuntimeSprinkles.createSprinkles(responsiveProperties);
+exports.responsiveProperties = responsiveProperties;
+exports.sprinkles = sprinkles;
+exports.stack = stack;