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

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/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 {};

package/dist/components/Stepper/StepperProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, createContext, useContext } from "react";
 const StepperContext = createContext({
   animated: false,
@@ -23,15 +23,18 @@ const StepperProvider = ({
 }) => {
   const currentSelected = useMemo(() => selected, [selected]);
   const [step, setStep] = useState(currentSelected);
-  const value = useMemo(() => ({
-    animated,
-    interactive,
-    labelPosition,
-    separator,
-    setStep,
-    size,
-    step
-  }), [step, interactive, size, animated, labelPosition, separator]);
+  const value = useMemo(
+    () => ({
+      animated,
+      interactive,
+      labelPosition,
+      separator,
+      setStep,
+      size,
+      step
+    }),
+    [step, interactive, size, animated, labelPosition, separator]
+  );
   useEffect(() => setStep(selected), [selected]);
   return /* @__PURE__ */ jsx(StepperContext.Provider, { value, children });
 };

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

@@ -18,7 +18,7 @@ type StepperProps = {
     style?: CSSProperties;
 };
 export declare const Stepper: {
-    ({ children, interactive, selected, animated, className, labelPosition, size, "data-testid": dataTestId, separator, style, }: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, interactive, selected, animated, className, labelPosition, size, "data-testid": dataTestId, separator, style, }: StepperProps): import("react/jsx-runtime").JSX.Element;
     Step: ({ index, onClick, disabled, title, children, className, style, "data-testid": dataTestId, }: {
         onClick?: (index: number) => void;
         index?: number;
@@ -28,6 +28,6 @@ export declare const Stepper: {
         className?: string;
         'data-testid'?: string;
         style?: CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};