@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/Slider/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -35,13 +35,7 @@ const Slider = ({
   style,
   "aria-label": ariaLabel
 }) => {
-  const correctedBounds = options ? {
-    max: Array.isArray(options) ? options.length - 1 : max,
-    min: 0
-  } : {
-    max,
-    min
-  };
+  const correctedBounds = options ? { max: Array.isArray(options) ? options.length - 1 : max, min: 0 } : { max, min };
   const gap = useMemo(() => {
     if (options) {
       return 3;
@@ -51,10 +45,86 @@ const Slider = ({
     }
     return 1;
   }, [options, input, double, helper]);
-  return /* @__PURE__ */ jsxs(Stack, { "aria-label": ariaLabel, className: double && !!options ? sliderContainer : "", "data-double": double, "data-options": !!options, gap, style, children: [
-    double ? /* @__PURE__ */ jsx(DoubleSlider, { "aria-label": ariaLabel, className, "data-testid": dataTestId, direction, disabled, error, id, input, label, max: correctedBounds.max, min: correctedBounds.min, name, onBlur, onChange, onFocus, options, prefix, required, step, suffix, tooltip, tooltipPosition, unit, value }) : /* @__PURE__ */ jsx(SingleSlider, { "aria-label": ariaLabel, className, "data-testid": dataTestId, direction, disabled, error, id, input, label, max: correctedBounds.max, min: correctedBounds.min, name, onBlur, onChange, onFocus, options, prefix, required, step, suffix, tooltip, tooltipPosition, unit, value }),
-    error || helper ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: error ? "danger" : "neutral", variant: "caption", children: typeof error === "string" ? error : helper }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      "aria-label": ariaLabel,
+      className: double && !!options ? sliderContainer : "",
+      "data-double": double,
+      "data-options": !!options,
+      gap,
+      style,
+      children: [
+        double ? /* @__PURE__ */ jsx(
+          DoubleSlider,
+          {
+            "aria-label": ariaLabel,
+            className,
+            "data-testid": dataTestId,
+            direction,
+            disabled,
+            error,
+            id,
+            input,
+            label,
+            max: correctedBounds.max,
+            min: correctedBounds.min,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            options,
+            prefix,
+            required,
+            step,
+            suffix,
+            tooltip,
+            tooltipPosition,
+            unit,
+            value
+          }
+        ) : /* @__PURE__ */ jsx(
+          SingleSlider,
+          {
+            "aria-label": ariaLabel,
+            className,
+            "data-testid": dataTestId,
+            direction,
+            disabled,
+            error,
+            id,
+            input,
+            label,
+            max: correctedBounds.max,
+            min: correctedBounds.min,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            options,
+            prefix,
+            required,
+            step,
+            suffix,
+            tooltip,
+            tooltipPosition,
+            unit,
+            value
+          }
+        ),
+        error || helper ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "p",
+            prominence: "weak",
+            sentiment: error ? "danger" : "neutral",
+            variant: "caption",
+            children: typeof error === "string" ? error : helper
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   Slider

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

@@ -23,5 +23,5 @@ type SnippetProps = {
  * 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.
  */
-export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, style, }: SnippetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, style, }: SnippetProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Snippet/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDownIcon } from "@ultraviolet/icons";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useReducer, Children } from "react";
@@ -19,14 +19,29 @@ const CodeContent = ({
   lines,
   noExpandable,
   rows
-}) => /* @__PURE__ */ jsx(Text, { as: "pre", className: pretext({
-  noExpandable,
-  showMore: hasShowMoreButton && !showMore
-}), style: assignInlineVars({
-  [rowsVar]: rows.toString()
-}), variant: "code", whiteSpace: !multiline ? "nowrap" : void 0, children: multiline ? Children.map(lines, (child) => /* @__PURE__ */ jsx("span", { className: `${line({
-  multiline: true
-})}  ${prefix$1 ? prefix[prefix$1] : ""}`, children: child }, child)) : /* @__PURE__ */ jsx("span", { className: `${line()}  ${prefix$1 ? prefix[prefix$1] : ""}`, children }) });
+}) => /* @__PURE__ */ jsx(
+  Text,
+  {
+    as: "pre",
+    className: pretext({
+      noExpandable,
+      showMore: hasShowMoreButton && !showMore
+    }),
+    style: assignInlineVars({
+      [rowsVar]: rows.toString()
+    }),
+    variant: "code",
+    whiteSpace: !multiline ? "nowrap" : void 0,
+    children: multiline ? Children.map(lines, (child) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${line({ multiline: true })}  ${prefix$1 ? prefix[prefix$1] : ""}`,
+        children: child
+      },
+      child
+    )) : /* @__PURE__ */ jsx("span", { className: `${line()}  ${prefix$1 ? prefix[prefix$1] : ""}`, children })
+  }
+);
 const Snippet = ({
   children,
   copyText,
@@ -43,21 +58,90 @@ const Snippet = ({
   style
 }) => {
   const theme = useTheme();
-  const [showMore, setShowMore] = useReducer((value) => !value, initiallyExpanded ?? false);
+  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__ */ jsx("div", { className: `${className ? `${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
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${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
+      ] })
+    }
+  );
 };
 export {
   Snippet

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

@@ -20,5 +20,5 @@ type OwnStackProps = {
     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("@emotion/react/jsx-runtime").JSX.Element;
+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 { 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",
@@ -33,30 +36,23 @@ 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
-    }
+    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(

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/Status/index.d.ts

@@ -16,5 +16,5 @@ type StatusProps = {
 /**
  * Status component used to display a colored circle with a tooltip for additional information.
  */
-export declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, notification, style, }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, notification, style, }: StatusProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Status/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "../Tooltip/index.js";
 import { status, animatedCircleStatus, circleStatus } from "./styles.css.js";
 const Status = ({
@@ -10,16 +10,18 @@ const Status = ({
   "data-testid": dataTestId,
   notification,
   style
-}) => /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("span", { className: `${className ? `${className} ` : ""}${status({
-  notification
-})}`, "data-testid": dataTestId, style, children: [
-  animated ? /* @__PURE__ */ jsx("span", { className: animatedCircleStatus({
-    sentiment
-  }) }) : null,
-  /* @__PURE__ */ jsx("span", { className: circleStatus({
-    sentiment
-  }) })
-] }) });
+}) => /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+  "span",
+  {
+    className: `${className ? `${className} ` : ""}${status({ notification })}`,
+    "data-testid": dataTestId,
+    style,
+    children: [
+      animated ? /* @__PURE__ */ jsx("span", { className: animatedCircleStatus({ sentiment }) }) : null,
+      /* @__PURE__ */ jsx("span", { className: circleStatus({ sentiment }) })
+    ]
+  }
+) });
 export {
   Status
 };

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

@@ -23,7 +23,7 @@ type StepListProps = {
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 export declare const StepList: {
-    ({ children, className, style, "data-testid": dataTestId, }: StepListProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Item: ({ bulletContent, sentiment, prominence, children, onClick, onKeyDown, size, disabled, className, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, className, style, "data-testid": dataTestId, }: StepListProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ bulletContent, sentiment, prominence, children, onClick, onKeyDown, size, disabled, className, }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/StepList/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Bullet } from "../Bullet/index.js";
 import { steps, step, stepDiv } from "./styles.css.js";
 const Item = ({
@@ -12,20 +12,41 @@ const Item = ({
   size = "medium",
   disabled = false,
   className
-}) => /* @__PURE__ */ jsxs("li", { className: `${className ? `${className} ` : ""}${step({
-  disabled
-})}`, onClick, onKeyDown, children: [
-  bulletContent ? /* @__PURE__ */ jsx(Bullet, { disabled, prominence, sentiment, size, children: bulletContent }) : null,
-  /* @__PURE__ */ jsx("div", { className: stepDiv({
-    size
-  }), children })
-] });
+}) => /* @__PURE__ */ jsxs(
+  "li",
+  {
+    className: `${className ? `${className} ` : ""}${step({ disabled })}`,
+    onClick,
+    onKeyDown,
+    children: [
+      bulletContent ? /* @__PURE__ */ jsx(
+        Bullet,
+        {
+          disabled,
+          prominence,
+          sentiment,
+          size,
+          children: bulletContent
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: stepDiv({ size }), children })
+    ]
+  }
+);
 const StepList = ({
   children,
   className,
   style,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsx("ul", { className: `${className ? `${className} ` : ""}${steps}`, "data-testid": dataTestId, style, children });
+}) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    className: `${className ? `${className} ` : ""}${steps}`,
+    "data-testid": dataTestId,
+    style,
+    children
+  }
+);
 StepList.Item = Item;
 export {
   StepList

package/dist/components/Stepper/Step.d.ts

@@ -22,5 +22,5 @@ type StepProps = {
     'data-testid'?: string;
     style?: CSSProperties;
 };
-export declare const Step: ({ index, onClick, disabled, title, children, className, style, "data-testid": dataTestId, }: StepProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Step: ({ index, onClick, disabled, title, children, className, style, "data-testid": dataTestId, }: StepProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Stepper/Step.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CheckIcon } from "@ultraviolet/icons";
 import { useMemo } from "react";
 import { Bullet } from "../Bullet/index.js";
@@ -36,36 +36,71 @@ const Step = ({
     }
     return isActive ? "bodySmallStrong" : "bodySmall";
   }, [size, isActive]);
-  return /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: `${className ? `${className} ` : "step "}${stepContainer} ${separatorBottom ? stepperContainerRecipe({
-    animated,
-    disabled,
-    done: isDone,
-    labelPosition,
-    separator,
-    size
-  }) : ""} ${isActive && separator && animated ? animationStepperContainer[size] : ""} ${interactiveDone && !disabled ? stepperInteractive[isActive ? "active" : "inactive"] : ""}`, "data-testid": dataTestId ?? `stepper-step-${index}`, direction: labelPosition === "right" ? "row" : "column", gap: labelPosition === "right" ? 1 : 0, justifyContent: "flex-start", onClick: () => {
-    if (interactive && !disabled) {
-      if (index < step) {
-        setStep(index);
-      }
-      onClick?.(index);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      alignItems: "center",
+      className: `${className ? `${className} ` : "step "}${stepContainer} ${separatorBottom ? stepperContainerRecipe({ animated, disabled, done: isDone, labelPosition, separator, size }) : ""} ${isActive && separator && animated ? animationStepperContainer[size] : ""} ${interactiveDone && !disabled ? stepperInteractive[isActive ? "active" : "inactive"] : ""}`,
+      "data-testid": dataTestId ?? `stepper-step-${index}`,
+      direction: labelPosition === "right" ? "row" : "column",
+      gap: labelPosition === "right" ? 1 : 0,
+      justifyContent: "flex-start",
+      onClick: () => {
+        if (interactive && !disabled) {
+          if (index < step) {
+            setStep(index);
+          }
+          onClick?.(index);
+        }
+      },
+      style,
+      children: [
+        isDone && !disabled ? /* @__PURE__ */ jsx(
+          Bullet,
+          {
+            className: stepBullet({
+              disabled,
+              isActive,
+              size
+            }),
+            prominence: "strong",
+            sentiment: "primary",
+            size,
+            children: /* @__PURE__ */ jsx(CheckIcon, {})
+          }
+        ) : /* @__PURE__ */ jsx(
+          Bullet,
+          {
+            className: stepBullet({
+              disabled,
+              isActive,
+              size
+            }),
+            prominence: "strong",
+            sentiment: isDone || isActive ? "primary" : "neutral",
+            size,
+            children: (index + 1).toString()
+          }
+        ),
+        title ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            className: stepText({
+              addMarginTop: separator && labelPosition !== "right",
+              disabled
+            }),
+            prominence: isDone || isActive ? "default" : "weak",
+            sentiment: isActive ? "primary" : "neutral",
+            variant: textVariant,
+            whiteSpace: "normal",
+            children: title
+          }
+        ) : null,
+        children ?? null
+      ]
     }
-  }, style, children: [
-    isDone && !disabled ? /* @__PURE__ */ jsx(Bullet, { className: stepBullet({
-      disabled,
-      isActive,
-      size
-    }), prominence: "strong", sentiment: "primary", size, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) : /* @__PURE__ */ jsx(Bullet, { className: stepBullet({
-      disabled,
-      isActive,
-      size
-    }), prominence: "strong", sentiment: isDone || isActive ? "primary" : "neutral", size, children: (index + 1).toString() }),
-    title ? /* @__PURE__ */ jsx(Text, { as: "span", className: stepText({
-      addMarginTop: separator && labelPosition !== "right",
-      disabled
-    }), prominence: isDone || isActive ? "default" : "weak", sentiment: isActive ? "primary" : "neutral", variant: textVariant, whiteSpace: "normal", children: title }) : null,
-    children ?? null
-  ] });
+  );
 };
 export {
   Step

package/dist/components/Stepper/StepperProvider.d.ts

@@ -21,5 +21,5 @@ export declare const useStepper: () => ContextType;
 /**
  * Stepper component to show the progress of a process in a linear way.
  */
-export declare const StepperProvider: ({ children, interactive, selected, animated, labelPosition, size, separator, }: StepperProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const StepperProvider: ({ children, interactive, selected, animated, labelPosition, size, separator, }: StepperProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};