@ultraviolet/ui 3.4.0 → 3.5.1

package/dist/components/Slider/styles.css.js

@@ -8,13 +8,13 @@ var sliderContainer = "uv_a5ifr14";
 var sliderTooltip = "uv_a5ifr15";
 var sliderDatalist = createRuntimeFn({ defaultClassName: "uv_a5ifr16", variantClassNames: { "double": { true: "uv_a5ifr17" } }, defaultVariants: {}, compoundVariants: [] });
 var sliderOption = createRuntimeFn({ defaultClassName: "uv_a5ifr18", variantClassNames: { left: { true: "uv_a5ifr19" }, right: { true: "uv_a5ifr1a" } }, defaultVariants: {}, compoundVariants: [] });
-var sliderThumbStyle = createRuntimeFn({ defaultClassName: "uv_a5ifr1b", variantClassNames: { disabled: { true: "uv_a5ifr1c", false: "uv_a5ifr1d" }, isDouble: { true: "uv_a5ifr1e", false: "uv_a5ifr1f" }, hasTooltipDouble: { false: "uv_a5ifr1g" } }, defaultVariants: { disabled: false, isDouble: false, hasTooltipDouble: true }, compoundVariants: [] });
-var sliderDoubleText = createRuntimeFn({ defaultClassName: "uv_a5ifr1h", variantClassNames: { isPadded: { true: "uv_a5ifr1i" }, isDouble: { true: "uv_a5ifr1j", false: "uv_a5ifr1k" } }, defaultVariants: {}, compoundVariants: [] });
-var sliderDouble = createRuntimeFn({ defaultClassName: "uv_a5ifr1l", variantClassNames: { disabled: { true: "uv_a5ifr1m", false: "uv_a5ifr1n" }, hasTooltip: { true: "uv_a5ifr1o" } }, defaultVariants: { disabled: false, hasTooltip: false }, compoundVariants: [] });
-var sliderSingle = createRuntimeFn({ defaultClassName: "uv_a5ifr1p", variantClassNames: { disabled: { false: "uv_a5ifr1q", true: "uv_a5ifr1r" }, error: { true: "uv_a5ifr1s" }, direction: { column: "uv_a5ifr1t", row: "uv_a5ifr1u" } }, defaultVariants: {}, compoundVariants: [] });
+var sliderThumbStyle = createRuntimeFn({ defaultClassName: "uv_a5ifr1b", variantClassNames: { disabled: { false: "uv_a5ifr1c", true: "uv_a5ifr1d" }, hasTooltipDouble: { false: "uv_a5ifr1e" }, isDouble: { false: "uv_a5ifr1f", true: "uv_a5ifr1g" } }, defaultVariants: { disabled: false, hasTooltipDouble: true, isDouble: false }, compoundVariants: [] });
+var sliderDoubleText = createRuntimeFn({ defaultClassName: "uv_a5ifr1h", variantClassNames: { isDouble: { false: "uv_a5ifr1i", true: "uv_a5ifr1j" }, isPadded: { true: "uv_a5ifr1k" } }, defaultVariants: {}, compoundVariants: [] });
+var sliderDouble = createRuntimeFn({ defaultClassName: "uv_a5ifr1l", variantClassNames: { disabled: { false: "uv_a5ifr1m", true: "uv_a5ifr1n" }, hasTooltip: { true: "uv_a5ifr1o" } }, defaultVariants: { disabled: false, hasTooltip: false }, compoundVariants: [] });
+var sliderSingle = createRuntimeFn({ defaultClassName: "uv_a5ifr1p", variantClassNames: { direction: { column: "uv_a5ifr1q", row: "uv_a5ifr1r" }, disabled: { false: "uv_a5ifr1s", true: "uv_a5ifr1t" }, error: { true: "uv_a5ifr1u" } }, defaultVariants: {}, compoundVariants: [] });
 var sliderDoubleWrapper = "uv_a5ifr1v";
 var sliderCustomRail = "uv_a5ifr1w";
-var sliderInnerRail = createRuntimeFn({ defaultClassName: "uv_a5ifr1x", variantClassNames: { error: { true: "uv_a5ifr1y" }, disabled: { true: "uv_a5ifr1z" } }, defaultVariants: { error: false, disabled: false }, compoundVariants: [] });
+var sliderInnerRail = createRuntimeFn({ defaultClassName: "uv_a5ifr1x", variantClassNames: { disabled: { true: "uv_a5ifr1y" }, error: { true: "uv_a5ifr1z" } }, defaultVariants: { disabled: false, error: false }, compoundVariants: [] });
 var sliderNumberInput = "uv_a5ifr110";
 export {
   leftOption,

package/dist/components/Slider/types.d.ts

@@ -48,6 +48,11 @@ type DefaultProps = {
      * Whether an error occured
      */
     error?: string | boolean;
+    /**
+     * Display this content instead of the slider value.
+     * For a single slider (`double="false"`), if a prefix or a suffix is defined, this prop overrides them
+     */
+    customValueDisplay?: ReactNode;
     /**
      * Options for a non-linear scale, overrides `min`, `max`. This is usefull if step is not enough to get the desired granularity.
      */

package/dist/components/Slider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAE7C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CACN,cAAc,CAAC,gBAAgB,CAAC,EAChC,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CACnE,CAAA;AAED,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,CAAA;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,YAAY,GACpC,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,WAAW,CAAA;AAE1D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,WAAW,CAAA;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAE7C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CACN,cAAc,CAAC,gBAAgB,CAAC,EAChC,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CACnE,CAAA;AAED,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,CAAA;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,YAAY,GACpC,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,WAAW,CAAA;AAE1D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,WAAW,CAAA;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA"}

package/dist/components/Snippet/index.js

@@ -33,7 +33,7 @@ const CodeContent = ({
       [rowsVar]: rows.toString()
     }),
     variant: "code",
-    whiteSpace: !multiline ? "nowrap" : void 0,
+    whiteSpace: multiline ? void 0 : "nowrap",
     children: multiline ? Children.map(lines, (child) => /* @__PURE__ */ jsx(
       "span",
       {

package/dist/components/Snippet/styles.css.d.ts

@@ -1,36 +1,36 @@
 export declare const rowsVar: `var(--${string})`;
 export declare const pretext: import("@vanilla-extract/recipes").RuntimeFn<{
-    showMore: {
-        true: {
-            overflowX: "hidden";
-        };
+    noExpandable: {
         false: {
-            overflowX: "auto";
+            overflowY: "hidden";
         };
-    };
-    noExpandable: {
         true: {
             maxHeight: `calc(var(--${string}) * var(--${string}) + var(--${string}))`;
             overflowY: "scroll";
         };
+    };
+    showMore: {
         false: {
-            overflowY: "hidden";
+            overflowX: "auto";
+        };
+        true: {
+            overflowX: "hidden";
         };
     };
 }>;
 export declare const line: import("@vanilla-extract/recipes").RuntimeFn<{
     multiline: {
-        true: {
+        false: {
             selectors: {
-                '&:nth-child(-n+2):after': {
+                '&:after': {
                     content: "";
                     paddingRight: `var(--${string})`;
                 };
             };
         };
-        false: {
+        true: {
             selectors: {
-                '&:after': {
+                '&:nth-child(-n+2):after': {
                     content: "";
                     paddingRight: `var(--${string})`;
                 };

package/dist/components/Snippet/styles.css.js

@@ -1,16 +1,16 @@
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var rowsVar = "var(--uv_67z97x0)";
-var pretext = createRuntimeFn({ defaultClassName: "uv_67z97x1", variantClassNames: { showMore: { true: "uv_67z97x2", false: "uv_67z97x3" }, noExpandable: { true: "uv_67z97x4", false: "uv_67z97x5" } }, defaultVariants: { noExpandable: false, showMore: false }, compoundVariants: [] });
-var line = createRuntimeFn({ defaultClassName: "uv_67z97x6", variantClassNames: { multiline: { true: "uv_67z97x7", false: "uv_67z97x8" } }, defaultVariants: { multiline: false }, compoundVariants: [] });
-var prefix = { lines: "uv_67z97x9", command: "uv_67z97xa" };
-var snippetContainer = { oneLine: "uv_67z97xc uv_67z97xb", multiline: "uv_67z97xd uv_67z97xb" };
+var pretext = createRuntimeFn({ defaultClassName: "uv_67z97x1", variantClassNames: { noExpandable: { false: "uv_67z97x2", true: "uv_67z97x3" }, showMore: { false: "uv_67z97x4", true: "uv_67z97x5" } }, defaultVariants: { noExpandable: false, showMore: false }, compoundVariants: [] });
+var line = createRuntimeFn({ defaultClassName: "uv_67z97x6", variantClassNames: { multiline: { false: "uv_67z97x7", true: "uv_67z97x8" } }, defaultVariants: { multiline: false }, compoundVariants: [] });
+var prefix = { command: "uv_67z97x9", lines: "uv_67z97xa" };
+var snippetContainer = { multiline: "uv_67z97xc uv_67z97xb", oneLine: "uv_67z97xd uv_67z97xb" };
 var stackStyle = "uv_67z97xe";
-var buttonContainer = { oneLine: "uv_67z97xg uv_67z97xf", multiline: "uv_67z97xh uv_67z97xf" };
-var showMoreContainer = { true: "uv_67z97xi", false: "uv_67z97xj" };
+var buttonContainer = { multiline: "uv_67z97xg uv_67z97xf", oneLine: "uv_67z97xh uv_67z97xf" };
+var showMoreContainer = { false: "uv_67z97xi", true: "uv_67z97xj" };
 var showMoreButton = "uv_67z97xk";
 var centeredText = "uv_67z97xl";
-var animatedArrowIcon = { true: "uv_67z97xm", false: "uv_67z97xn" };
+var animatedArrowIcon = { false: "uv_67z97xm", true: "uv_67z97xn" };
 export {
   animatedArrowIcon,
   buttonContainer,

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, ElementType, ReactNode } from 'react';
+import type { CSSProperties, ElementType, ReactElement } from 'react';
 import type { UltravioletUITheme } from '../../theme';
 import type { AlignItemsType, JustifyContentType } from './styles.css';
 import type { PolymorphicComponentProps } from './types';
@@ -15,11 +15,10 @@ type OwnStackProps = {
     minWidth?: CSSProperties['minWidth'];
     flex?: CSSProperties['flex'];
     className?: string;
-    children: ReactNode;
     'data-testid'?: string;
     id?: string;
 };
 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, style, ...props }: StackProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Stack: <T extends ElementType = "div">(props: StackProps<T>) => ReactElement;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAEtE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD,KAAK,cAAc,CAAC,CAAC,IACjB,CAAC,GACD,OAAO,CAAC,MAAM,CAAC,MAAM,kBAAkB,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAG/D,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE,GACnE,CAAC,GACD,KAAK,CAAA;AA4BT,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,cAAc,CAChB,MAAM,kBAAkB,CAAC,OAAO,CAAC,GACjC,QAAQ,CAAC,MAAM,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAC9C,CAAA;IACD,SAAS,CAAC,EAAE,cAAc,CACxB,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CACpD,CAAA;IACD,UAAU,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAA;IACnD,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,CAAA;IAC1D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAClD,yBAAyB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAA;AAE7C,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,qKAkBlD,UAAU,CAAC,CAAC,CAAC,4CA+Df,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAEX,YAAY,EACb,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAEtE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD,KAAK,cAAc,CAAC,CAAC,IACjB,CAAC,GACD,OAAO,CAAC,MAAM,CAAC,MAAM,kBAAkB,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAG/D,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE,GACnE,CAAC,GACD,KAAK,CAAA;AA4BT,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,cAAc,CAChB,MAAM,kBAAkB,CAAC,OAAO,CAAC,GACjC,QAAQ,CAAC,MAAM,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAC9C,CAAA;IACD,SAAS,CAAC,EAAE,cAAc,CACxB,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CACpD,CAAA;IACD,UAAU,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAA;IACnD,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,CAAA;IAC1D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAClD,yBAAyB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAA;AA+F7C,eAAO,MAAM,KAAK,EAAa,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC3D,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,YAAY,CAAA"}

package/dist/components/Stack/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { consoleLightTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useMemo } from "react";
+import { forwardRef, 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(
@@ -12,70 +12,72 @@ const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce(
   }),
   {}
 ) : {};
-const Stack = ({
-  gap,
-  direction = "column",
-  alignItems = "normal",
-  justifyContent = "normal",
-  wrap = "nowrap",
-  className,
-  children,
-  id,
-  "data-testid": dataTestId,
-  width,
-  maxWidth,
-  minWidth,
-  flex,
-  as,
-  ref,
-  style,
-  ...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()
-        }),
-        ...style
-      },
-      ...props,
-      children
-    }
-  );
-};
+const IStack = forwardRef(
+  ({
+    gap,
+    direction = "column",
+    alignItems = "normal",
+    justifyContent = "normal",
+    wrap = "nowrap",
+    className,
+    children,
+    id,
+    "data-testid": dataTestId,
+    width,
+    maxWidth,
+    minWidth,
+    flex,
+    as,
+    style,
+    ...props
+  }, ref) => {
+    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()
+          }),
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+const Stack = IStack;
 export {
   Stack
 };