@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/Snippet/index.js

@@ -1,163 +1,127 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useReducer, Children } from "react";
-import { useTheme } from "../../theme/ThemeProvider.js";
-import { CopyButton } from "../CopyButton/index.js";
-import { Expandable } from "../Expandable/index.js";
-import { Label } from "../Label/index.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
-import { stackStyle, buttonContainer, showMoreContainer, showMoreButton, centeredText, animatedArrowIcon, snippetContainer, pretext, line, prefix, rowsVar } from "./styles.css.js";
+import { Label } from "../Label/index.js";
+import { CopyButton } from "../CopyButton/index.js";
+import { Expandable } from "../Expandable/index.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { animatedArrowIcon, buttonContainer, centeredText, line, prefix, pretext, rowsVar, showMoreButton, showMoreContainer, snippetContainer, stackStyle } from "./styles.css.js";
+import { cn } from "@ultraviolet/utils";
+import { Children, useReducer } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+
+//#region src/components/Snippet/index.tsx
 const LINES_BREAK_REGEX = /\r\n|\r|\n/;
-const CodeContent = ({
-  children,
-  prefix: prefix$1,
-  multiline,
-  showMore,
-  hasShowMoreButton,
-  lines,
-  noExpandable,
-  rows
-}) => /* @__PURE__ */ jsx(
-  Text,
-  {
-    as: "pre",
-    className: pretext({
-      noExpandable,
-      showMore: hasShowMoreButton && !showMore
-    }),
-    style: assignInlineVars({
-      [rowsVar]: rows.toString()
-    }),
-    variant: "code",
-    whiteSpace: multiline ? void 0 : "nowrap",
-    children: multiline ? Children.map(lines, (child) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          line({ multiline: true }),
-          prefix$1 ? prefix[prefix$1] : ""
-        ),
-        children: child
-      },
-      child
-    )) : /* @__PURE__ */ jsx("span", { className: cn(line(), prefix$1 ? prefix[prefix$1] : ""), children })
-  }
-);
-const Snippet = ({
-  children,
-  copyText,
-  copiedText,
-  showText = "Show",
-  hideText = "Hide",
-  prefix: prefix2,
-  className,
-  "data-testid": dataTestId,
-  initiallyExpanded,
-  rows = 4,
-  noExpandable = false,
-  onCopy,
-  style,
-  helper,
-  label,
-  labelDescription
-}) => {
-  const theme = useTheme();
-  const [showMore, setShowMore] = useReducer(
-    (value) => !value,
-    initiallyExpanded ?? false
-  );
-  const lines = children.split(LINES_BREAK_REGEX);
-  const numberOfLines = lines.length;
-  const multiline = numberOfLines > 1;
-  const hasShowMoreButton = numberOfLines > rows && multiline && !noExpandable;
-  const minHeight = rows * Number.parseFloat(theme.typography.code.lineHeight) * 16 + Number.parseFloat(theme.space[4]) * 16;
-  return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, width: "100%", children: [
-    label ? /* @__PURE__ */ jsx(Label, { labelDescription, children: label }) : null,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          className,
-          snippetContainer[multiline ? "multiline" : "oneLine"]
-        ),
-        "data-testid": dataTestId,
-        style,
-        children: /* @__PURE__ */ jsxs(Stack, { className: stackStyle, children: [
-          hasShowMoreButton ? /* @__PURE__ */ jsx(Expandable, { minHeight, opened: showMore, children: /* @__PURE__ */ jsx(
-            CodeContent,
-            {
-              lines,
-              multiline,
-              noExpandable,
-              prefix: prefix2,
-              rows,
-              children
-            }
-          ) }) : /* @__PURE__ */ jsx(
-            CodeContent,
-            {
-              lines,
-              multiline,
-              noExpandable,
-              prefix: prefix2,
-              rows,
-              children
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: buttonContainer[multiline && numberOfLines > 1 ? "multiline" : "oneLine"],
-              children: /* @__PURE__ */ jsx(
-                CopyButton,
-                {
-                  copiedText,
-                  copyText,
-                  onCopy,
-                  sentiment: "neutral",
-                  value: children
-                }
-              )
-            }
-          ),
-          hasShowMoreButton ? /* @__PURE__ */ jsx("div", { className: showMoreContainer[showMore ? "true" : "false"], children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              "aria-expanded": showMore,
-              className: showMoreButton,
-              onClick: setShowMore,
-              type: "button",
-              children: /* @__PURE__ */ jsxs(
-                Text,
-                {
-                  as: "span",
-                  className: centeredText,
-                  sentiment: "neutral",
-                  variant: "bodySmallStrong",
-                  children: [
-                    showMore ? hideText : showText,
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      ArrowDownIcon,
-                      {
-                        className: animatedArrowIcon[showMore ? "true" : "false"]
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ) }) : null
-        ] })
-      }
-    ),
-    helper ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null
-  ] });
-};
-export {
-  Snippet
+const CodeContent = ({ children, prefix: prefix$1, multiline, showMore, hasShowMoreButton, lines, noExpandable, rows }) => /* @__PURE__ */ jsx(Text, {
+	as: "pre",
+	className: pretext({
+		noExpandable,
+		showMore: hasShowMoreButton && !showMore
+	}),
+	style: assignInlineVars({ [rowsVar]: rows.toString() }),
+	variant: "code",
+	whiteSpace: multiline ? void 0 : "nowrap",
+	children: multiline ? Children.map(lines, (child) => /* @__PURE__ */ jsx("span", {
+		className: cn(line({ multiline: true }), prefix$1 ? prefix[prefix$1] : ""),
+		children: child
+	}, child)) : /* @__PURE__ */ jsx("span", {
+		className: cn(line(), prefix$1 ? prefix[prefix$1] : ""),
+		children
+	})
+});
+/**
+* Snippet component is used to display code snippets with the ability to copy the code.
+* It also has the ability to show/hide the code snippet if it has more than 4 lines.
+*/
+const Snippet = ({ children, copyText, copiedText, showText = "Show", hideText = "Hide", prefix, className, "data-testid": dataTestId, initiallyExpanded, rows = 4, noExpandable = false, onCopy, style, helper, label, labelDescription }) => {
+	const theme = useTheme();
+	const [showMore, setShowMore] = useReducer((value) => !value, initiallyExpanded !== null && initiallyExpanded !== void 0 ? initiallyExpanded : false);
+	const lines = children.split(LINES_BREAK_REGEX);
+	const numberOfLines = lines.length;
+	const multiline = numberOfLines > 1;
+	const hasShowMoreButton = numberOfLines > rows && multiline && !noExpandable;
+	const minHeight = rows * Number.parseFloat(theme.typography.code.lineHeight) * 16 + Number.parseFloat(theme.space[4]) * 16;
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "column",
+		gap: 1,
+		width: "100%",
+		children: [
+			label ? /* @__PURE__ */ jsx(Label, {
+				labelDescription,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: cn(className, snippetContainer[multiline ? "multiline" : "oneLine"]),
+				"data-testid": dataTestId,
+				style,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					className: stackStyle,
+					children: [
+						hasShowMoreButton ? /* @__PURE__ */ jsx(Expandable, {
+							minHeight,
+							opened: showMore,
+							children: /* @__PURE__ */ jsx(CodeContent, {
+								lines,
+								multiline,
+								noExpandable,
+								prefix,
+								rows,
+								children
+							})
+						}) : /* @__PURE__ */ jsx(CodeContent, {
+							lines,
+							multiline,
+							noExpandable,
+							prefix,
+							rows,
+							children
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: buttonContainer[multiline && numberOfLines > 1 ? "multiline" : "oneLine"],
+							children: /* @__PURE__ */ jsx(CopyButton, {
+								copiedText,
+								copyText,
+								onCopy,
+								sentiment: "neutral",
+								value: children
+							})
+						}),
+						hasShowMoreButton ? /* @__PURE__ */ jsx("div", {
+							className: showMoreContainer[showMore ? "true" : "false"],
+							children: /* @__PURE__ */ jsx("button", {
+								"aria-expanded": showMore,
+								className: showMoreButton,
+								onClick: setShowMore,
+								type: "button",
+								children: /* @__PURE__ */ jsxs(Text, {
+									as: "span",
+									className: centeredText,
+									sentiment: "neutral",
+									variant: "bodySmallStrong",
+									children: [
+										showMore ? hideText : showText,
+										"\xA0",
+										/* @__PURE__ */ jsx(ArrowDownIcon, { className: animatedArrowIcon[showMore ? "true" : "false"] })
+									]
+								})
+							})
+						}) : null
+					]
+				})
+			}),
+			helper ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				prominence: "weak",
+				sentiment: "neutral",
+				variant: "caption",
+				children: helper
+			}) : null
+		]
+	});
 };
+
+//#endregion
+export { Snippet };

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

@@ -39,9 +39,9 @@ export declare const line: import("@vanilla-extract/recipes").RuntimeFn<{
     };
 }>;
 export declare const prefix: Record<"command" | "lines", string>;
-export declare const snippetContainer: Record<"oneLine" | "multiline", string>;
+export declare const snippetContainer: Record<"multiline" | "oneLine", string>;
 export declare const stackStyle: string;
-export declare const buttonContainer: Record<"oneLine" | "multiline", string>;
+export declare const buttonContainer: Record<"multiline" | "oneLine", string>;
 export declare const showMoreContainer: Record<"false" | "true", string>;
 export declare const showMoreButton: string;
 export declare const centeredText: string;

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

@@ -1,26 +1,58 @@
-/* empty css                          */
+/* empty css                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/Snippet/styles.css.ts
 var rowsVar = "var(--uv_67z97x0)";
-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 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 = { multiline: "uv_67z97xg uv_67z97xf", oneLine: "uv_67z97xh uv_67z97xf" };
-var showMoreContainer = { false: "uv_67z97xi", true: "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 = { false: "uv_67z97xm", true: "uv_67z97xn" };
-export {
-  animatedArrowIcon,
-  buttonContainer,
-  centeredText,
-  line,
-  prefix,
-  pretext,
-  rowsVar,
-  showMoreButton,
-  showMoreContainer,
-  snippetContainer,
-  stackStyle
+var animatedArrowIcon = {
+	false: "uv_67z97xm",
+	true: "uv_67z97xn"
 };
+
+//#endregion
+export { animatedArrowIcon, buttonContainer, centeredText, line, prefix, pretext, rowsVar, showMoreButton, showMoreContainer, snippetContainer, stackStyle };

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

@@ -19,6 +19,6 @@ type OwnStackProps = {
     id?: string;
 };
 export type StackProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T, OwnStackProps>;
-export declare const Stack: <T extends ElementType = "div">(props: StackProps<T>) => ReactElement;
+export declare const Stack: <T extends ElementType = "div">(props: StackProps<T>) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 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,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"}
+{"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,GAAc,CAAC,iIAEhB,CAAA"}

package/dist/components/Stack/index.js

@@ -1,83 +1,70 @@
-"use client";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectWithoutProperties.js";
+import { sprinkles, stack } from "./styles.css.js";
+import { flexVar, maxWidthVar, minWidthVar, widthVar } from "./variables.css.js";
+import { forwardRef, useMemo } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
 import { consoleLightTheme } from "@ultraviolet/themes";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-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(
-  (acc, key) => ({
-    ...acc,
-    [key]: consoleLightTheme.space[object[key]]
-  }),
-  {}
-) : {};
-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
-      }
-    );
-  }
-);
+
+//#region src/components/Stack/index.tsx
+const _excluded = [
+	"gap",
+	"direction",
+	"alignItems",
+	"justifyContent",
+	"wrap",
+	"className",
+	"children",
+	"id",
+	"data-testid",
+	"width",
+	"maxWidth",
+	"minWidth",
+	"flex",
+	"as",
+	"style"
+];
+const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce((acc, key) => _objectSpread2(_objectSpread2({}, acc), {}, { [key]: consoleLightTheme.space[object[key]] }), {}) : {};
+/**
+* We can't easily type a GenericComponent with forwardRef
+* https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+* will be remove when react will drop support of forwardRef into react 20.
+*/
+const IStack = forwardRef((_ref, ref) => {
+	let { gap, direction = "column", alignItems = "normal", justifyContent = "normal", wrap = "nowrap", className, children, id, "data-testid": dataTestId, width = "auto", maxWidth = "none", minWidth = "auto", flex, as, style } = _ref;
+	let props = _objectWithoutProperties(_ref, _excluded);
+	const wrapValue = useMemo(() => {
+		if (typeof wrap === "boolean") return wrap ? "wrap" : "nowrap";
+		if (typeof wrap === "object") return Object.keys(wrap).reduce((acc, key) => _objectSpread2(_objectSpread2({}, acc), {}, { [key]: wrap[key] ? "wrap" : "nowrap" }), {});
+		return wrap;
+	}, [wrap]);
+	return /* @__PURE__ */ jsx(as !== null && as !== void 0 ? as : "div", _objectSpread2(_objectSpread2({
+		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 }
+			})
+		].filter(Boolean).join(" "),
+		"data-testid": dataTestId,
+		id,
+		ref,
+		style: _objectSpread2(_objectSpread2({}, assignInlineVars({
+			[widthVar]: String(width),
+			[maxWidthVar]: String(maxWidth),
+			[minWidthVar]: String(minWidth),
+			[flexVar]: flex ? String(flex) : void 0
+		})), style)
+	}, props), {}, { children }));
+});
 const Stack = IStack;
-export {
-  Stack
-};
+
+//#endregion
+export { Stack };