@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -1,9 +1,10 @@
-import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { CSSProperties, ElementType, ReactNode } from 'react';
 import type { UltravioletUITheme } from '../../theme';
 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;
-export type StackProps = {
+type OwnStackProps = {
     gap?: ResponsiveProp<keyof UltravioletUITheme['space'] | ToNumber<keyof UltravioletUITheme['space']>>;
     direction?: ResponsiveProp<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
     alignItems?: ResponsiveProp<AlignItemsType>;
@@ -17,7 +18,7 @@ export type StackProps = {
     children: ReactNode;
     'data-testid'?: string;
     id?: string;
-    ref?: Ref<HTMLDivElement>;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
-export declare const Stack: ({ gap, direction, alignItems, justifyContent, wrap, className, children, id, "data-testid": dataTestId, width, maxWidth, minWidth, flex, ref, ...props }: StackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+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 {};

package/dist/components/Stack/index.js

@@ -1,14 +1,17 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { consoleLightTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useMemo } from "react";
-import { stack, sprinkles } from "./styles.css.js";
+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 mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce(
+  (acc, key) => ({
+    ...acc,
+    [key]: consoleLightTheme.space[object[key]]
+  }),
+  {}
+) : {};
 const Stack = ({
   gap,
   direction = "column",
@@ -23,7 +26,9 @@ const Stack = ({
   maxWidth,
   minWidth,
   flex,
+  as,
   ref,
+  style,
   ...props
 }) => {
   const wrapValue = useMemo(() => {
@@ -31,42 +36,41 @@ const Stack = ({
       return wrap ? "wrap" : "nowrap";
     }
     if (typeof wrap === "object") {
-      return Object.keys(wrap).reduce((acc, key) => ({
-        ...acc,
-        [key]: wrap[key] ? "wrap" : "nowrap"
-      }), {});
+      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(
-    "div",
+    Component,
     {
-      className: `${className ? `${className} ` : ""}${stack} ${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
-        }
-      })}`,
+      className: combinedClassName,
       "data-testid": dataTestId,
       id,
       ref,
-      style: assignInlineVars({
-        [widthVar]: width?.toString(),
-        [maxWidthVar]: maxWidth?.toString(),
-        [minWidthVar]: minWidth?.toString(),
-        [flexVar]: flex?.toString()
-      }),
+      style: {
+        ...assignInlineVars({
+          [widthVar]: width?.toString(),
+          [maxWidthVar]: maxWidth?.toString(),
+          [minWidthVar]: minWidth?.toString(),
+          [flexVar]: flex?.toString()
+        }),
+        ...style
+      },
       ...props,
       children
     }

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

@@ -6,23 +6,23 @@ export type JustifyContentType = (typeof justifyContentValues)[number];
 export declare const responsiveProperties: {
     conditions: {
         defaultCondition: "xxsmall";
-        conditionNames: ("small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall")[];
-        responsiveArray: ("small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall")[] & {
+        conditionNames: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[];
+        responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
             length: 5;
         };
     };
     styles: {
         gap: {
-            responsiveArray: ("small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall")[] & {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
                 length: 5;
             };
             values: {
                 [x: string]: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -31,16 +31,16 @@ export declare const responsiveProperties: {
             };
         };
         flexDirection: {
-            responsiveArray: ("small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall")[] & {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
                 length: 5;
             };
             values: {
                 column: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -49,9 +49,9 @@ export declare const responsiveProperties: {
                 "column-reverse": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -60,9 +60,9 @@ export declare const responsiveProperties: {
                 row: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -71,9 +71,9 @@ export declare const responsiveProperties: {
                 "row-reverse": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -82,16 +82,16 @@ export declare const responsiveProperties: {
             };
         };
         alignItems: {
-            responsiveArray: ("small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall")[] & {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
                 length: 5;
             };
             values: {
                 normal: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -100,9 +100,9 @@ export declare const responsiveProperties: {
                 stretch: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -111,9 +111,9 @@ export declare const responsiveProperties: {
                 center: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -122,9 +122,9 @@ export declare const responsiveProperties: {
                 end: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -133,9 +133,9 @@ export declare const responsiveProperties: {
                 "flex-end": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -144,9 +144,9 @@ export declare const responsiveProperties: {
                 "flex-start": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -155,9 +155,9 @@ export declare const responsiveProperties: {
                 start: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -166,9 +166,9 @@ export declare const responsiveProperties: {
                 baseline: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -177,9 +177,9 @@ export declare const responsiveProperties: {
                 "self-end": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -188,9 +188,9 @@ export declare const responsiveProperties: {
                 "self-start": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -199,9 +199,9 @@ export declare const responsiveProperties: {
                 "first baseline": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -210,9 +210,9 @@ export declare const responsiveProperties: {
                 "last baseline": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -221,9 +221,9 @@ export declare const responsiveProperties: {
                 "safe center": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -232,9 +232,9 @@ export declare const responsiveProperties: {
                 "unsafe center": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -243,16 +243,16 @@ export declare const responsiveProperties: {
             };
         };
         justifyContent: {
-            responsiveArray: ("small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall")[] & {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
                 length: 5;
             };
             values: {
                 normal: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -261,9 +261,9 @@ export declare const responsiveProperties: {
                 left: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -272,9 +272,9 @@ export declare const responsiveProperties: {
                 right: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -283,9 +283,9 @@ export declare const responsiveProperties: {
                 "space-around": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -294,9 +294,9 @@ export declare const responsiveProperties: {
                 "space-between": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -305,9 +305,9 @@ export declare const responsiveProperties: {
                 "space-evenly": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -316,9 +316,9 @@ export declare const responsiveProperties: {
                 stretch: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -327,9 +327,9 @@ export declare const responsiveProperties: {
                 center: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -338,9 +338,9 @@ export declare const responsiveProperties: {
                 end: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -349,9 +349,9 @@ export declare const responsiveProperties: {
                 "flex-end": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -360,9 +360,9 @@ export declare const responsiveProperties: {
                 "flex-start": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -371,9 +371,9 @@ export declare const responsiveProperties: {
                 start: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -382,16 +382,16 @@ export declare const responsiveProperties: {
             };
         };
         flexWrap: {
-            responsiveArray: ("small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall")[] & {
+            responsiveArray: ("large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall")[] & {
                 length: 5;
             };
             values: {
                 nowrap: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -400,9 +400,9 @@ export declare const responsiveProperties: {
                 wrap: {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -411,9 +411,9 @@ export declare const responsiveProperties: {
                 "wrap-reverse": {
                     defaultClass: string;
                     conditions: {
-                        small: string;
                         large: string;
                         medium: string;
+                        small: string;
                         xlarge: string;
                         xsmall: string;
                         xxsmall: string;
@@ -425,45 +425,45 @@ export declare const responsiveProperties: {
 };
 export declare const sprinkles: ((props: {
     gap?: (string | {
-        small?: string | undefined;
         large?: string | undefined;
         medium?: string | undefined;
+        small?: string | undefined;
         xlarge?: string | undefined;
         xsmall?: string | undefined;
         xxsmall?: string | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 1 | 3 | 4 | 5, string | null>;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, string | null>;
     flexDirection?: ("column" | "column-reverse" | "row" | "row-reverse" | {
-        small?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
         large?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
         medium?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        small?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
         xlarge?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
         xsmall?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
         xxsmall?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 1 | 3 | 4 | 5, "column" | "column-reverse" | "row" | "row-reverse" | null>;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, "column" | "column-reverse" | "row" | "row-reverse" | null>;
     alignItems?: ("normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | {
-        small?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | undefined;
         large?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | undefined;
         medium?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | undefined;
+        small?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | undefined;
         xlarge?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | undefined;
         xsmall?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | undefined;
         xxsmall?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 1 | 3 | 4 | 5, "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | null>;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | null>;
     justifyContent?: ("normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | {
-        small?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined;
         large?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined;
         medium?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined;
+        small?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined;
         xlarge?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined;
         xsmall?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined;
         xxsmall?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 1 | 3 | 4 | 5, "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | null>;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | null>;
     flexWrap?: ("nowrap" | "wrap" | "wrap-reverse" | {
-        small?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
         large?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
         medium?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
+        small?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
         xlarge?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
         xsmall?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
         xxsmall?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 1 | 3 | 4 | 5, "nowrap" | "wrap" | "wrap-reverse" | null>;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4 | 5, "nowrap" | "wrap" | "wrap-reverse" | null>;
 }) => string) & {
     properties: Set<"alignItems" | "flexDirection" | "flexWrap" | "justifyContent" | "gap">;
 };

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

@@ -2,7 +2,7 @@
 /* empty css                          */
 import { createSprinkles } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
 var stack = "uv_toi52u0";
-var responsiveProperties = function() {
+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;
@@ -10,7 +10,7 @@ var responsiveProperties = function() {
   x.styles.justifyContent.responsiveArray = x.conditions.responsiveArray;
   x.styles.flexWrap.responsiveArray = x.conditions.responsiveArray;
   return x;
-}();
+})();
 var sprinkles = createSprinkles(responsiveProperties);
 export {
   responsiveProperties,

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

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+type MainProps<E extends ElementType> = {
+    as?: E;
+    ref?: ComponentPropsWithRef<E>['ref'];
+};
+type PropsToOmit<E extends ElementType, P> = keyof (MainProps<E> & P);
+export type PolymorphicComponentProps<E extends ElementType, P> = P & MainProps<E> & Omit<ComponentPropsWithoutRef<E>, PropsToOmit<E, P>>;
+export {};