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

package/dist/components/Toggle/index.js

@@ -1,50 +1,111 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { Row } from "../Row/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { label, toggle, checkbox } from "./styles.css.js";
-const Toggle = forwardRef(({
-  checked,
-  disabled = false,
-  id,
-  name,
-  onChange,
-  size = "large",
-  tooltip,
-  labelPosition = "right",
-  label: label$1,
-  helper,
-  required,
-  className,
-  "data-testid": dataTestId,
-  value,
-  error,
-  "aria-label": ariaLabel,
-  style
-}, ref) => {
-  const uniqueId = useId();
-  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("label", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${label({
-    disabled,
-    labelPosition
-  })}`, "data-testid": dataTestId, children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "baseline", gap: 0.25, children: [
-      label$1 ? /* @__PURE__ */ jsxs(Row, { alignItems: "center", gap: 1, templateColumns: "auto 1fr", children: [
-        typeof label$1 === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "default", sentiment: "neutral", variant: size === "large" ? "body" : "bodySmall", children: label$1 }) : label$1,
-        required ? /* @__PURE__ */ jsx(Text, { as: "sup", sentiment: "danger", variant: "body", children: "*" }) : null
-      ] }) : null,
-      typeof error === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: "default", sentiment: "danger", variant: "bodySmall", children: error }) : null,
-      helper && !error ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: toggle({
-      disabled,
-      error: !!error,
-      size
-    }), children: /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, style, type: "checkbox", value }) })
-  ] }) });
-});
+const Toggle = forwardRef(
+  ({
+    checked,
+    disabled = false,
+    id,
+    name,
+    onChange,
+    size = "large",
+    tooltip,
+    labelPosition = "right",
+    label: label$1,
+    helper,
+    required,
+    className,
+    "data-testid": dataTestId,
+    value,
+    error,
+    "aria-label": ariaLabel,
+    style
+  }, ref) => {
+    const uniqueId = useId();
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+      "label",
+      {
+        "aria-disabled": disabled,
+        className: `${className ? `${className} ` : ""}${label({
+          disabled,
+          labelPosition
+        })}`,
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ jsxs(Stack, { alignItems: "baseline", gap: 0.25, children: [
+            label$1 ? /* @__PURE__ */ jsxs(Row, { alignItems: "center", gap: 1, templateColumns: "auto 1fr", children: [
+              typeof label$1 === "string" ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "span",
+                  prominence: "default",
+                  sentiment: "neutral",
+                  variant: size === "large" ? "body" : "bodySmall",
+                  children: label$1
+                }
+              ) : label$1,
+              required ? /* @__PURE__ */ jsx(Text, { as: "sup", sentiment: "danger", variant: "body", children: "*" }) : null
+            ] }) : null,
+            typeof error === "string" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "p",
+                disabled,
+                prominence: "default",
+                sentiment: "danger",
+                variant: "bodySmall",
+                children: error
+              }
+            ) : null,
+            helper && !error ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "p",
+                prominence: "weak",
+                sentiment: "neutral",
+                variant: "caption",
+                children: helper
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: toggle({
+                disabled,
+                error: !!error,
+                size
+              }),
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "aria-invalid": !!error,
+                  "aria-label": ariaLabel,
+                  checked,
+                  className: checkbox,
+                  disabled,
+                  id: id ?? uniqueId,
+                  name,
+                  onChange,
+                  ref,
+                  required,
+                  style,
+                  type: "checkbox",
+                  value
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
 export {
   Toggle
 };

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

@@ -6,7 +6,7 @@ type ToggleGroupToggleProps = Omit<ComponentProps<typeof Toggle>, 'onChange' | '
 /**
  * ToggleGroup is a component that allows you to group a set of Toggle components together under the same legend.
  */
-export declare const ToggleGroupToggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleGroupToggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("react/jsx-runtime").JSX.Element;
 type ToggleGroupProps = {
     legend?: string;
     legendDescription?: ReactNode;
@@ -20,7 +20,7 @@ type ToggleGroupProps = {
     description?: ReactNode;
 } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required' | 'style'>;
 export declare const ToggleGroup: {
-    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/ToggleGroup/index.js

@@ -1,12 +1,14 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, createContext, useContext } from "react";
 import { Label } from "../Label/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Toggle } from "../Toggle/index.js";
 import { fieldset } from "./styles.css.js";
-const ToggleGroupContext = createContext(void 0);
+const ToggleGroupContext = createContext(
+  void 0
+);
 const ToggleGroupToggle = ({
   disabled,
   name,
@@ -22,15 +24,25 @@ const ToggleGroupToggle = ({
   if (!context) {
     throw new Error("ToggleGroup.Toggle can only be used inside a ToggleGroup");
   }
-  const {
-    groupName,
-    onChange,
-    groupValues,
-    error: contextError
-  } = context;
+  const { groupName, onChange, groupValues, error: contextError } = context;
   const ToggleName = `${groupName}.${name}`;
   const ToggleValue = `${value}`;
-  return /* @__PURE__ */ jsx(Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, style, value: ToggleValue });
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      checked: groupValues?.includes(ToggleValue),
+      className,
+      "data-testid": dataTestId,
+      disabled,
+      error: error || contextError,
+      helper,
+      label,
+      name: ToggleName,
+      onChange,
+      style,
+      value: ToggleValue
+    }
+  );
 };
 const ToggleGroup = ({
   legend,
@@ -47,20 +59,47 @@ const ToggleGroup = ({
   required = false,
   style
 }) => {
-  const contextValue = useMemo(() => ({
-    error: !!error,
-    groupName: name,
-    groupValues: value ?? [],
-    onChange
-  }), [name, value, onChange, error]);
+  const contextValue = useMemo(
+    () => ({
+      error: !!error,
+      groupName: name,
+      groupValues: value ?? [],
+      onChange
+    }),
+    [name, value, onChange, error]
+  );
   return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, style, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
-      legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
-        legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-        description ? /* @__PURE__ */ jsx(Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null
-      ] }) : null,
-      /* @__PURE__ */ jsx(Stack, { direction, gap: 2, children })
-    ] }) }),
+    /* @__PURE__ */ jsx(
+      "fieldset",
+      {
+        className: `${className ? `${className} ` : ""}${fieldset}`,
+        style,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+            legend ? /* @__PURE__ */ jsx(
+              Label,
+              {
+                as: "legend",
+                labelDescription: legendDescription,
+                required,
+                children: legend
+              }
+            ) : null,
+            description ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: typeof description === "string" ? "p" : "div",
+                prominence: "weak",
+                sentiment: "neutral",
+                variant: "bodySmall",
+                children: description
+              }
+            ) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx(Stack, { direction, gap: 2, children })
+        ] })
+      }
+    ),
     helper ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
     error ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: "danger", variant: "bodySmall", children: error }) : null
   ] }) });

package/dist/components/Tooltip/index.js

@@ -1,26 +1,49 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Popup } from "../Popup/index.js";
 import { tooltip } from "./styles.css.js";
-const Tooltip = forwardRef(({
-  children,
-  text = "",
-  placement = "auto",
-  id,
-  className,
-  containerFullWidth,
-  containerFullHeight,
-  maxWidth = 232,
-  visible,
-  innerRef,
-  role = "tooltip",
-  "data-testid": dataTestId,
-  portalTarget,
-  debounceDelay,
-  tabIndex,
-  style
-}, tooltipRef) => /* @__PURE__ */ jsx(Popup, { className: `${className ? `${className} ` : ""}${tooltip}`, containerFullHeight, containerFullWidth, "data-testid": dataTestId, debounceDelay, id, innerRef, maxWidth, placement, portalTarget, ref: tooltipRef, role, style, tabIndex, text, visible, children }));
+const Tooltip = forwardRef(
+  ({
+    children,
+    text = "",
+    placement = "auto",
+    id,
+    className,
+    containerFullWidth,
+    containerFullHeight,
+    maxWidth = 232,
+    visible,
+    innerRef,
+    role = "tooltip",
+    "data-testid": dataTestId,
+    portalTarget,
+    debounceDelay,
+    tabIndex,
+    style
+  }, tooltipRef) => /* @__PURE__ */ jsx(
+    Popup,
+    {
+      className: `${className ? `${className} ` : ""}${tooltip}`,
+      containerFullHeight,
+      containerFullWidth,
+      "data-testid": dataTestId,
+      debounceDelay,
+      id,
+      innerRef,
+      maxWidth,
+      placement,
+      portalTarget,
+      ref: tooltipRef,
+      role,
+      style,
+      tabIndex,
+      text,
+      visible,
+      children
+    }
+  )
+);
 export {
   Tooltip
 };

package/dist/components/TreeMapChart/Tooltip.d.ts

@@ -2,5 +2,5 @@ import type { DataType } from './types';
 type TooltipProps = Pick<DataType, 'content' | 'value'> & {
     'data-testid'?: string;
 };
-export declare const Tooltip: ({ value, content, "data-testid": dataTestId, }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ value, content, "data-testid": dataTestId, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TreeMapChart/Tooltip.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Text } from "../Text/index.js";
 import { treeMapTooltipContainer } from "./styles.css.js";
 const Tooltip = ({

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

@@ -14,5 +14,5 @@ type TreeMapChartProps = {
  * TreeMapChart component is used to display data in a TreeMap chart format. It uses the Nivo library under the hood.
  * See https://nivo.rocks/treemap/ for more information.
  */
-export declare const TreeMapChart: ({ height, data, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: TreeMapChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TreeMapChart: ({ height, data, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: TreeMapChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TreeMapChart/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ResponsiveTreeMapHtml } from "@nivo/treemap";
 import { useTheme } from "@ultraviolet/themes";
 import { useMemo, useCallback } from "react";
@@ -19,32 +19,38 @@ const TreeMapChart = ({
   const theme = useTheme();
   const DEFAULT_COLOR = theme.colors.primary.text;
   const colors = useMemo(() => getDataColors(data, theme), [data, theme]);
-  const tooltip = useCallback((props) => {
-    const {
-      value,
-      content
-    } = tooltipFunction ? tooltipFunction(props.node.data) : {
-      content: props.node.data.content,
-      value: props.node.data.value
-    };
-    return /* @__PURE__ */ jsx(Tooltip, { content, value });
-  }, [tooltipFunction]);
-  const nodeComponent = useCallback(({
-    node
-  }) => {
-    const backgroundColor = colors[node.data.id] || DEFAULT_COLOR;
-    const spacing = 4;
-    return /* @__PURE__ */ jsx("div", { className: treeMapContentWrapper, onMouseEnter: node.onMouseEnter, onMouseLeave: node.onMouseLeave, onMouseMove: node.onMouseMove, style: {
-      backgroundColor,
-      height: node.height - spacing,
-      left: node.x + spacing / 2,
-      top: node.y + spacing / 2,
-      width: node.width - spacing
-    }, children: /* @__PURE__ */ jsx(Text, { as: "div", oneLine: true, variant: "captionStrong", children: node.data.content }) });
-  }, [colors, DEFAULT_COLOR]);
-  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
-    height
-  }, children: /* @__PURE__ */ jsx(
+  const tooltip = useCallback(
+    (props) => {
+      const { value, content } = tooltipFunction ? tooltipFunction(props.node.data) : { content: props.node.data.content, value: props.node.data.value };
+      return /* @__PURE__ */ jsx(Tooltip, { content, value });
+    },
+    [tooltipFunction]
+  );
+  const nodeComponent = useCallback(
+    ({ node }) => {
+      const backgroundColor = colors[node.data.id] || DEFAULT_COLOR;
+      const spacing = 4;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: treeMapContentWrapper,
+          onMouseEnter: node.onMouseEnter,
+          onMouseLeave: node.onMouseLeave,
+          onMouseMove: node.onMouseMove,
+          style: {
+            backgroundColor,
+            height: node.height - spacing,
+            left: node.x + spacing / 2,
+            top: node.y + spacing / 2,
+            width: node.width - spacing
+          },
+          children: /* @__PURE__ */ jsx(Text, { as: "div", oneLine: true, variant: "captionStrong", children: node.data.content })
+        }
+      );
+    },
+    [colors, DEFAULT_COLOR]
+  );
+  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: { height }, children: /* @__PURE__ */ jsx(
     ResponsiveTreeMapHtml,
     {
       animate: false,

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

@@ -31,5 +31,5 @@ type UnitInputProps = {
     dropdownAlign?: ComponentProps<typeof SelectInput>['dropdownAlign'];
     templateColumns?: ComponentProps<typeof Row>['templateColumns'];
 } & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown' | 'style'>;
-export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, }: UnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UnitInput/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { AlertCircleIcon, CheckCircleIcon } from "@ultraviolet/icons";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useState, useId, useMemo, useEffect } from "react";
@@ -76,35 +76,116 @@ const UnitInput = ({
       setVal(value);
     }
   }, [value]);
-  return /* @__PURE__ */ jsxs(Stack, { gap: 0.5, maxWidth, onBlur, onFocus, onKeyDown, width, children: [
-    label || labelInformation ? /* @__PURE__ */ jsx(Label, { htmlFor: id ?? localId, labelDescription: labelInformation, required, size, children: label }) : null,
-    /* @__PURE__ */ jsxs(Row, { className: `${unitInputSize[size]} ${unitInputState[computedState]}`, "data-disabled": !!disabled, "data-testid": dataTestId, templateColumns: templateColumns ?? "1fr auto", children: [
-      /* @__PURE__ */ jsxs("div", { className: unitInputNumberWrapper, id: "input-field", children: [
-        /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, autoFocus, className: `${className ? `${className} ` : ""}${unitInputNumber[size]}`, "data-testid": "unit-input", disabled, id: id ?? localId, max, min, name: `${name}-value`, onChange: (event) => {
-          const numericValue = Number.parseInt(event.target.value, 10);
-          if (numericValue > max) {
-            setVal(max);
-            onChange?.(max);
-          } else if (numericValue < min) {
-            setVal(min);
-            onChange?.(min);
-          } else {
-            setVal(numericValue);
-            onChange?.(numericValue);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: 0.5,
+      maxWidth,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      width,
+      children: [
+        label || labelInformation ? /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: id ?? localId,
+            labelDescription: labelInformation,
+            required,
+            size,
+            children: label
           }
-        }, placeholder, readOnly, required, step, style, type: "number", value: val }),
-        error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
-        success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null
-      ] }),
-      /* @__PURE__ */ jsx(SelectInput, { className: `${unitInputUnit} ${unitInputUnitWidth}`, clearable: false, "data-disabled": disabled, disabled, dropdownAlign, error: unitError, id: "unit", multiselect: false, name: `${name}-unit`, onChange: (newValue) => {
-        onChangeUnitValue?.(newValue);
-      }, options, placeholder: placeholderUnit, readOnly, searchable: false, size, style: assignInlineVars({
-        [widthSelectInput]: selectInputWidth.toString()
-      }), value: unitValue })
-    ] }),
-    error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: sentiment === "neutral" ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,
-    !error && !success && typeof helper !== "string" && helper ? helper : null
-  ] });
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          Row,
+          {
+            className: `${unitInputSize[size]} ${unitInputState[computedState]}`,
+            "data-disabled": !!disabled,
+            "data-testid": dataTestId,
+            templateColumns: templateColumns ?? "1fr auto",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: unitInputNumberWrapper, id: "input-field", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    "aria-invalid": !!error,
+                    autoFocus,
+                    className: `${className ? `${className} ` : ""}${unitInputNumber[size]}`,
+                    "data-testid": "unit-input",
+                    disabled,
+                    id: id ?? localId,
+                    max,
+                    min,
+                    name: `${name}-value`,
+                    onChange: (event) => {
+                      const numericValue = Number.parseInt(event.target.value, 10);
+                      if (numericValue > max) {
+                        setVal(max);
+                        onChange?.(max);
+                      } else if (numericValue < min) {
+                        setVal(min);
+                        onChange?.(min);
+                      } else {
+                        setVal(numericValue);
+                        onChange?.(numericValue);
+                      }
+                    },
+                    placeholder,
+                    readOnly,
+                    required,
+                    step,
+                    style,
+                    type: "number",
+                    value: val
+                  }
+                ),
+                error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
+                success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null
+              ] }),
+              /* @__PURE__ */ jsx(
+                SelectInput,
+                {
+                  className: `${unitInputUnit} ${unitInputUnitWidth}`,
+                  clearable: false,
+                  "data-disabled": disabled,
+                  disabled,
+                  dropdownAlign,
+                  error: unitError,
+                  id: "unit",
+                  multiselect: false,
+                  name: `${name}-unit`,
+                  onChange: (newValue) => {
+                    onChangeUnitValue?.(newValue);
+                  },
+                  options,
+                  placeholder: placeholderUnit,
+                  readOnly,
+                  searchable: false,
+                  size,
+                  style: assignInlineVars({
+                    [widthSelectInput]: selectInputWidth.toString()
+                  }),
+                  value: unitValue
+                }
+              )
+            ]
+          }
+        ),
+        error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "p",
+            disabled,
+            prominence: sentiment === "neutral" ? "weak" : "default",
+            sentiment,
+            variant: "caption",
+            children: error || success || helper
+          }
+        ) : null,
+        !error && !success && typeof helper !== "string" && helper ? helper : null
+      ]
+    }
+  );
 };
 export {
   UnitInput

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

@@ -36,5 +36,5 @@ type VerificationCodeProps = {
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, helper, success, style, }: VerificationCodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, helper, success, style, }: VerificationCodeProps) => import("react/jsx-runtime").JSX.Element;
 export {};