@spark-ui/components 13.1.4 → 13.2.0

package/dist/input-otp/index.mjs

@@ -1,33 +1,17 @@
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/input-otp/InputOTP.tsx
-import { cx } from "class-variance-authority";
-import {
-  Children,
-  cloneElement,
-  isValidElement,
-  useMemo as useMemo2
-} from "react";
-
-// src/input-otp/InputOTPContext.tsx
-import { createContext, useContext } from "react";
-var InputOTPContext = createContext(null);
-var useInputOTPContext = () => {
-  const context = useContext(InputOTPContext);
-  if (!context) {
+import { jsxs as te, jsx as b } from "react/jsx-runtime";
+import { cva as ne, cx as fe } from "class-variance-authority";
+import { createContext as me, useContext as be, useId as ve, useRef as Z, useState as L, useEffect as $, useMemo as H, Children as re, isValidElement as se, cloneElement as ee } from "react";
+import { useFormFieldControl as xe } from "@spark-ui/components/form-field";
+import { I as Ie } from "../Icon-Ck-dhfLd.mjs";
+import { Minus as he } from "@spark-ui/icons/Minus";
+const ae = me(null), ge = () => {
+  const e = be(ae);
+  if (!e)
     throw new Error("InputOTP components must be used within InputOTP");
-  }
-  return context;
+  return e;
 };
-
-// src/input-otp/InputOTP.styles.ts
-import { cva } from "class-variance-authority";
-var inputOTPContainerStyles = cva(["relative", "inline-flex", "items-center", "gap-sm"]);
-var inputOTPSlotStyles = cva(
+ne(["relative", "inline-flex", "items-center", "gap-sm"]);
+const ie = ne(
   [
     // Base slot styles
     "relative",
@@ -68,492 +52,341 @@ var inputOTPSlotStyles = cva(
       intent: "neutral"
     }
   }
-);
-var inputOTPStyles = inputOTPSlotStyles;
-
-// src/input-otp/InputOTPSlot.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var InputOTPSlot = ({ index: indexProp, className, ...props }) => {
-  const context = useInputOTPContext();
-  const index = indexProp ?? 0;
-  const slot = context.slots[index];
-  if (!slot) {
+), Ke = ie, E = ({ index: e, className: a, ...t }) => {
+  const o = ge(), r = e ?? 0, l = o.slots[r];
+  if (!l)
     return null;
-  }
-  const { char, isActive, hasFakeCaret } = slot;
-  const isEmpty = !char;
-  const isPlaceholder = isEmpty && !hasFakeCaret && context.placeholder;
-  return /* @__PURE__ */ jsxs(
+  const { char: p, isActive: v, hasFakeCaret: h } = l, x = !p && !h && o.placeholder;
+  return /* @__PURE__ */ te(
     "div",
     {
-      className: inputOTPSlotStyles({
-        intent: context.intent,
-        className
+      className: ie({
+        intent: o.intent,
+        className: a
       }),
-      "data-active": isActive,
-      "data-disabled": context.disabled,
-      "data-valid": context.intent !== "error",
-      ...props,
+      "data-active": v,
+      "data-disabled": o.disabled,
+      "data-valid": o.intent !== "error",
+      ...t,
       children: [
-        /* @__PURE__ */ jsx("span", { className: isPlaceholder ? "text-on-surface/dim-3" : "", children: context.type === "password" && char ? "\u2022" : char || (!hasFakeCaret && context.placeholder ? context.placeholder : "") }),
-        hasFakeCaret && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ b("span", { className: x ? "text-on-surface/dim-3" : "", children: o.type === "password" && p ? "•" : p || (!h && o.placeholder ? o.placeholder : "") }),
+        h && /* @__PURE__ */ b(
           "span",
           {
             className: "pointer-events-none absolute inset-0 flex items-center justify-center",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-px" })
+            children: /* @__PURE__ */ b("span", { className: "bg-on-surface animate-standalone-caret-blink h-sz-24 w-px" })
           }
         )
       ]
     }
   );
 };
-InputOTPSlot.displayName = "InputOTP.Slot";
-
-// src/input-otp/useInputOTP.ts
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import {
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-var BACKSPACE_KEY = "Backspace";
-var LEFT_ARROW_KEY = "ArrowLeft";
-var UP_ARROW_KEY = "ArrowUp";
-var RIGHT_ARROW_KEY = "ArrowRight";
-var DOWN_ARROW_KEY = "ArrowDown";
-var E_KEY = "e";
-var useInputOTP = ({
-  maxLength,
-  type,
-  value: controlledValue,
-  defaultValue,
-  onValueChange,
-  isValid,
-  disabledProp,
-  autoFocus,
-  forceUppercase,
-  filterKeys,
-  pattern,
-  placeholder,
-  nameProp
+E.displayName = "InputOTP.Slot";
+const ye = "Backspace", Pe = "ArrowLeft", Te = "ArrowUp", Oe = "ArrowRight", we = "ArrowDown", Ne = "e", Re = ({
+  maxLength: e,
+  type: a,
+  value: t,
+  defaultValue: o,
+  onValueChange: r,
+  isValid: l,
+  disabledProp: p,
+  autoFocus: v,
+  forceUppercase: h,
+  filterKeys: P,
+  pattern: x,
+  placeholder: C,
+  nameProp: G
 }) => {
-  const uuid = useId();
-  const inputRef = useRef(null);
-  const containerRef = useRef(null);
-  const field = useFormFieldControl();
-  const id = field.id ?? uuid;
-  const name = nameProp ?? field.name;
-  const disabled = field.disabled ?? disabledProp;
-  const isInvalid = field.isInvalid ?? !isValid;
-  const isRequired = field.isRequired ?? false;
-  const labelId = field.labelId;
-  const description = field.description;
-  const fieldState = field.state;
-  const getIntent = () => {
-    if (["success", "alert", "error"].includes(fieldState ?? "")) {
-      return fieldState;
-    }
-    if (isInvalid) {
-      return "error";
-    }
-    return "neutral";
-  };
-  const intent = getIntent();
-  const initialValue = controlledValue !== void 0 ? controlledValue : defaultValue;
-  const processedValue = forceUppercase ? initialValue.toUpperCase() : initialValue;
-  const [internalValue, setInternalValue] = useState(processedValue);
-  const [isFocused, setIsFocused] = useState(false);
-  const currentValue = controlledValue !== void 0 ? controlledValue : internalValue;
-  const activeIndex = Math.min(currentValue.length, maxLength - 1);
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.setSelectionRange(activeIndex, activeIndex);
-    }
-  }, [activeIndex, currentValue.length, maxLength]);
-  const slots = useMemo(
-    () => Array.from({ length: maxLength }, (_, i) => ({
-      char: currentValue[i] || "",
-      isActive: i === activeIndex && isFocused,
-      hasFakeCaret: i === activeIndex && !currentValue[i] && !disabled && isFocused
+  const z = ve(), s = Z(null), B = Z(null), c = xe(), T = c.id ?? z, D = G ?? c.name, I = c.disabled ?? p, _ = c.isInvalid ?? !l, V = c.isRequired ?? !1, W = c.labelId, k = c.description, O = c.state, w = ["success", "alert", "error"].includes(O ?? "") ? O : _ ? "error" : "neutral", g = t !== void 0 ? t : o, F = h ? g.toUpperCase() : g, [q, N] = L(F), [R, K] = L(!1), u = t !== void 0 ? t : q, f = Math.min(u.length, e - 1);
+  $(() => {
+    s.current && s.current.setSelectionRange(f, f);
+  }, [f, u.length, e]);
+  const M = H(
+    () => Array.from({ length: e }, (i, n) => ({
+      char: u[n] || "",
+      isActive: n === f && R,
+      hasFakeCaret: n === f && !u[n] && !I && R
     })),
-    [maxLength, currentValue, activeIndex, isFocused, disabled]
+    [e, u, f, R, I]
   );
-  useEffect(() => {
-    if (inputRef.current && controlledValue !== void 0) {
-      inputRef.current.value = controlledValue;
-    }
-  }, [controlledValue]);
-  useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [autoFocus]);
-  const processInputValue = (inputValue) => {
-    let processed = inputValue;
-    if (forceUppercase) {
-      processed = processed.toUpperCase();
-    }
-    if (type === "number") {
-      processed = processed.replace(/[^\d]/g, "");
-    }
-    if (pattern) {
+  $(() => {
+    s.current && t !== void 0 && (s.current.value = t);
+  }, [t]), $(() => {
+    v && s.current && s.current.focus();
+  }, [v]);
+  const S = (i) => {
+    let n = i;
+    if (h && (n = n.toUpperCase()), a === "number" && (n = n.replace(/[^\d]/g, "")), x)
       try {
-        let regexPattern = pattern;
-        if (!pattern.startsWith("^")) {
-          regexPattern = `^${pattern}$`;
-        }
-        const regex = new RegExp(regexPattern);
-        processed = processed.split("").filter((currChar) => {
-          return regex.test(currChar);
-        }).join("");
-      } catch (error) {
-        console.error("Invalid pattern provided to InputOTP:", pattern, error);
+        let m = x;
+        x.startsWith("^") || (m = `^${x}$`);
+        const d = new RegExp(m);
+        n = n.split("").filter((y) => d.test(y)).join("");
+      } catch (m) {
+        console.error("Invalid pattern provided to InputOTP:", x, m);
       }
-    }
-    return processed;
-  };
-  const handleChange = (e) => {
-    if (disabled) return;
-    const inputValue = e.target.value;
-    const processedValue2 = processInputValue(inputValue);
-    const newValue = processedValue2.slice(0, maxLength);
-    if (onValueChange) {
-      onValueChange(newValue);
-    }
-    if (controlledValue === void 0) {
-      setInternalValue(newValue);
-    }
-    const newActiveIndex = Math.min(newValue.length, maxLength - 1);
-    if (inputRef.current) {
-      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex);
-    }
+    return n;
   };
-  const handleKeyDown = (e) => {
-    if (disabled) return;
-    if (filterKeys.length > 0 && filterKeys.includes(e.key)) {
-      e.preventDefault();
-      return;
-    }
-    switch (e.key) {
-      case BACKSPACE_KEY:
-        e.preventDefault();
-        const currentLength = currentValue.length;
-        if (currentLength > 0) {
-          const newValue = currentValue.slice(0, currentLength - 1);
-          if (onValueChange) {
-            onValueChange(newValue);
-          }
-          if (controlledValue === void 0) {
-            setInternalValue(newValue);
-          }
-          const newActiveIndex = Math.max(0, newValue.length);
-          if (inputRef.current) {
-            inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex);
-          }
+  return {
+    uuid: T,
+    inputRef: s,
+    containerRef: B,
+    name: D,
+    disabled: I,
+    isInvalid: _,
+    isRequired: V,
+    description: k,
+    maxLength: e,
+    intent: w,
+    currentValue: u,
+    activeIndex: f,
+    slots: M,
+    contextValue: {
+      value: u,
+      maxLength: e,
+      slots: M,
+      activeIndex: f,
+      intent: w,
+      disabled: I,
+      placeholder: C,
+      type: a
+    },
+    handleChange: (i) => {
+      if (I) return;
+      const n = i.target.value, d = S(n).slice(0, e);
+      r && r(d), t === void 0 && N(d);
+      const y = Math.min(d.length, e - 1);
+      s.current && s.current.setSelectionRange(y, y);
+    },
+    handleKeyDown: (i) => {
+      if (!I) {
+        if (P.length > 0 && P.includes(i.key)) {
+          i.preventDefault();
+          return;
         }
-        break;
-      case LEFT_ARROW_KEY:
-      case RIGHT_ARROW_KEY:
-        e.preventDefault();
-        break;
-      case UP_ARROW_KEY:
-      case DOWN_ARROW_KEY:
-        e.preventDefault();
-        break;
-      case E_KEY:
-      case "E":
-        if (type === "number") {
-          e.preventDefault();
+        switch (i.key) {
+          case ye:
+            i.preventDefault();
+            const n = u.length;
+            if (n > 0) {
+              const m = u.slice(0, n - 1);
+              r && r(m), t === void 0 && N(m);
+              const d = Math.max(0, m.length);
+              s.current && s.current.setSelectionRange(d, d);
+            }
+            break;
+          case Pe:
+          case Oe:
+            i.preventDefault();
+            break;
+          case Te:
+          case we:
+            i.preventDefault();
+            break;
+          case Ne:
+          case "E":
+            a === "number" && i.preventDefault();
+            break;
         }
-        break;
-      default:
-        break;
-    }
-  };
-  const handlePaste = (e) => {
-    if (disabled) return;
-    e.preventDefault();
-    const pastedText = e.clipboardData.getData("text");
-    if (!pastedText) return;
-    const processedText = processInputValue(pastedText);
-    const newValue = processedText.slice(0, maxLength);
-    if (onValueChange) {
-      onValueChange(newValue);
-    }
-    if (controlledValue === void 0) {
-      setInternalValue(newValue);
-    }
-    const newActiveIndex = Math.min(newValue.length, maxLength - 1);
-    if (inputRef.current) {
-      inputRef.current.setSelectionRange(newActiveIndex, newActiveIndex);
-    }
-  };
-  const handleFocus = () => {
-    setIsFocused(true);
-    if (inputRef.current) {
-      const cursorPosition = Math.min(currentValue.length, maxLength - 1);
-      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
-    }
-  };
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-  const handleClick = () => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-  const contextValue = {
-    value: currentValue,
-    maxLength,
-    slots,
-    activeIndex,
-    intent,
-    disabled,
-    placeholder,
-    type
-  };
-  const returnValue = {
-    uuid: id,
-    inputRef,
-    containerRef,
-    name,
-    disabled,
-    isInvalid,
-    isRequired,
-    description,
-    maxLength,
-    intent,
-    currentValue,
-    activeIndex,
-    slots,
-    contextValue,
-    handleChange,
-    handleKeyDown,
-    handlePaste,
-    handleFocus,
-    handleBlur,
-    handleClick,
-    labelId
-  };
-  return returnValue;
-};
-
-// src/input-otp/InputOTP.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var countSlots = (children) => {
-  let count = 0;
-  Children.forEach(children, (child) => {
-    if (isValidElement(child)) {
-      const props = child.props;
-      if (child.type === InputOTPSlot || child.type?.displayName === "InputOTP.Slot") {
-        count++;
-      } else if (props.children) {
-        count += countSlots(props.children);
       }
+    },
+    handlePaste: (i) => {
+      if (I) return;
+      i.preventDefault();
+      const n = i.clipboardData.getData("text");
+      if (!n) return;
+      const d = S(n).slice(0, e);
+      r && r(d), t === void 0 && N(d);
+      const y = Math.min(d.length, e - 1);
+      s.current && s.current.setSelectionRange(y, y);
+    },
+    handleFocus: () => {
+      if (K(!0), s.current) {
+        const i = Math.min(u.length, e - 1);
+        s.current.setSelectionRange(i, i);
+      }
+    },
+    handleBlur: () => {
+      K(!1);
+    },
+    handleClick: () => {
+      s.current && s.current.focus();
+    },
+    labelId: W
+  };
+}, oe = (e) => {
+  let a = 0;
+  return re.forEach(e, (t) => {
+    if (se(t)) {
+      const o = t.props;
+      t.type === E || t.type?.displayName === "InputOTP.Slot" ? a++ : o.children && (a += oe(o.children));
     }
-  });
-  return count;
-};
-var assignSlotIndexes = (children, startIndex = 0) => {
-  let currentIndex = startIndex;
-  const processed = Children.map(children, (child) => {
-    if (isValidElement(child)) {
-      const props = child.props;
-      if (child.type === InputOTPSlot || child.type?.displayName === "InputOTP.Slot") {
-        const slotIndex = typeof props.index === "number" ? props.index : currentIndex++;
-        return cloneElement(child, {
-          ...props,
-          index: slotIndex
+  }), a;
+}, ce = (e, a = 0) => {
+  let t = a;
+  return [re.map(e, (r) => {
+    if (se(r)) {
+      const l = r.props;
+      if (r.type === E || r.type?.displayName === "InputOTP.Slot") {
+        const p = typeof l.index == "number" ? l.index : t++;
+        return ee(r, {
+          ...l,
+          index: p
         });
-      } else if (props.children) {
-        const [processedChildren, nextIndex] = assignSlotIndexes(props.children, currentIndex);
-        currentIndex = nextIndex;
-        return cloneElement(child, {
-          ...child.props,
-          children: processedChildren
+      } else if (l.children) {
+        const [p, v] = ce(l.children, t);
+        return t = v, ee(r, {
+          ...r.props,
+          children: p
         });
       }
     }
-    return child;
-  });
-  return [processed, currentIndex];
-};
-var InputOTP = ({
-  maxLength: maxLengthProp,
-  type = "text",
-  value: controlledValue,
-  defaultValue = "",
-  onValueChange,
-  isValid = true,
-  disabled: disabledProp = false,
-  autoFocus = false,
-  autoComplete = "off",
-  forceUppercase = false,
-  filterKeys = ["-", "."],
-  pattern,
-  inputMode,
-  placeholder = "",
-  name: nameProp,
-  className,
-  children,
-  ...others
+    return r;
+  }), t];
+}, le = ({
+  maxLength: e,
+  type: a = "text",
+  value: t,
+  defaultValue: o = "",
+  onValueChange: r,
+  isValid: l = !0,
+  disabled: p = !1,
+  autoFocus: v = !1,
+  autoComplete: h = "off",
+  forceUppercase: P = !1,
+  filterKeys: x = ["-", "."],
+  pattern: C,
+  inputMode: G,
+  placeholder: z = "",
+  name: s,
+  className: B,
+  children: c,
+  ...T
 }) => {
-  const maxLength = useMemo2(() => {
-    if (maxLengthProp !== void 0) {
-      return maxLengthProp;
-    }
-    const detectedLength = countSlots(children);
-    const DEFAULT_MAX_LENGTH = 4;
-    return detectedLength > 0 ? detectedLength : DEFAULT_MAX_LENGTH;
-  }, [maxLengthProp, children]);
-  const processedChildren = useMemo2(() => {
-    const [processed] = assignSlotIndexes(children);
-    return processed;
-  }, [children]);
-  const {
-    uuid,
-    inputRef,
-    containerRef,
-    name,
-    disabled,
-    isInvalid,
-    isRequired,
-    description,
-    currentValue,
-    contextValue,
-    handleChange,
-    handleKeyDown,
-    handlePaste,
-    handleFocus,
-    handleBlur,
-    handleClick,
-    labelId
-  } = useInputOTP({
-    maxLength,
-    type,
-    value: controlledValue,
-    defaultValue,
-    onValueChange,
-    isValid,
-    disabledProp,
-    autoFocus,
-    forceUppercase,
-    filterKeys,
-    pattern,
-    placeholder,
-    nameProp
-  });
-  const ariaLabel = "aria-label" in others ? others["aria-label"] : void 0;
-  const { "aria-label": _, ...restOthers } = others;
-  const getAccessibleNameProps = () => {
-    if (labelId) {
-      return { "aria-labelledby": labelId };
-    }
-    if (ariaLabel) {
-      return { "aria-label": ariaLabel };
-    }
-    return {};
-  };
-  const accessibleNameProps = getAccessibleNameProps();
-  return /* @__PURE__ */ jsx2(InputOTPContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs2(
+  const D = H(() => {
+    if (e !== void 0)
+      return e;
+    const A = oe(c);
+    return A > 0 ? A : 4;
+  }, [e, c]), I = H(() => {
+    const [A] = ce(c);
+    return A;
+  }, [c]), {
+    uuid: _,
+    inputRef: V,
+    containerRef: W,
+    name: k,
+    disabled: O,
+    isInvalid: Y,
+    isRequired: w,
+    description: g,
+    currentValue: F,
+    contextValue: q,
+    handleChange: N,
+    handleKeyDown: R,
+    handlePaste: K,
+    handleFocus: u,
+    handleBlur: f,
+    handleClick: M,
+    labelId: S
+  } = Re({
+    maxLength: D,
+    type: a,
+    value: t,
+    defaultValue: o,
+    onValueChange: r,
+    isValid: l,
+    disabledProp: p,
+    autoFocus: v,
+    forceUppercase: P,
+    filterKeys: x,
+    pattern: C,
+    placeholder: z,
+    nameProp: s
+  }), U = "aria-label" in T ? T["aria-label"] : void 0, { "aria-label": ue, ...Q } = T, j = S ? { "aria-labelledby": S } : U ? { "aria-label": U } : {};
+  return /* @__PURE__ */ b(ae.Provider, { value: q, children: /* @__PURE__ */ te(
     "div",
     {
-      ref: containerRef,
+      ref: W,
       "data-spark-component": "input-otp",
       role: "group",
-      ...accessibleNameProps,
-      ...description ? { "aria-describedby": description } : {},
-      className: cx(
+      ...j,
+      ...g ? { "aria-describedby": g } : {},
+      className: fe(
         "gap-md relative inline-flex items-center",
-        disabled ? "cursor-not-allowed" : "cursor-text",
-        className
+        O ? "cursor-not-allowed" : "cursor-text",
+        B
       ),
-      onClick: handleClick,
-      ...restOthers,
+      onClick: M,
+      ...Q,
       children: [
-        name && /* @__PURE__ */ jsx2(
+        k && /* @__PURE__ */ b(
           "input",
           {
             type: "hidden",
-            name,
-            value: currentValue,
-            required: isRequired,
-            "aria-required": isRequired,
-            "aria-invalid": isInvalid,
-            ...accessibleNameProps
+            name: k,
+            value: F,
+            required: w,
+            "aria-required": w,
+            "aria-invalid": Y,
+            ...j
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ b(
           "input",
           {
-            ref: inputRef,
-            id: uuid,
-            type: type === "password" ? "password" : "text",
-            value: currentValue,
-            maxLength,
-            autoFocus,
-            autoComplete,
-            disabled,
-            pattern,
-            inputMode,
-            ...accessibleNameProps,
-            ...description ? { "aria-describedby": description } : {},
-            "aria-invalid": isInvalid,
-            onChange: handleChange,
-            onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
+            ref: V,
+            id: _,
+            type: a === "password" ? "password" : "text",
+            value: F,
+            maxLength: D,
+            autoFocus: v,
+            autoComplete: h,
+            disabled: O,
+            pattern: C,
+            inputMode: G,
+            ...j,
+            ...g ? { "aria-describedby": g } : {},
+            "aria-invalid": Y,
+            onChange: N,
+            onKeyDown: R,
+            onPaste: K,
+            onFocus: u,
+            onBlur: f,
             className: "bg-success z-raised absolute inset-0 m-0 p-0 opacity-0 disabled:cursor-not-allowed",
             tabIndex: 0
           }
         ),
-        processedChildren
+        I
       ]
     }
   ) });
 };
-InputOTP.displayName = "InputOTP";
-
-// src/input-otp/InputOTPGroup.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var InputOTPGroup = ({ children, className, ...props }) => {
-  return /* @__PURE__ */ jsx3("div", { className: `inline-flex [&>*:not(:first-child)]:-ml-px ${className || ""}`, ...props, children });
-};
-InputOTPGroup.displayName = "InputOTP.Group";
-
-// src/input-otp/InputOTPSeparator.tsx
-import { Minus } from "@spark-ui/icons/Minus";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var InputOTPSeparator = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      className: `text-on-surface flex items-center justify-center ${className || ""}`,
-      ...props,
-      children: /* @__PURE__ */ jsx4(Icon, { size: "md", children: /* @__PURE__ */ jsx4(Minus, {}) })
-    }
-  );
-};
-InputOTPSeparator.displayName = "InputOTP.Separator";
-
-// src/input-otp/index.ts
-var InputOTP2 = Object.assign(InputOTP, {
-  Group: InputOTPGroup,
-  Slot: InputOTPSlot,
-  Separator: InputOTPSeparator
+le.displayName = "InputOTP";
+const X = ({ children: e, className: a, ...t }) => /* @__PURE__ */ b("div", { className: `inline-flex [&>*:not(:first-child)]:-ml-px ${a || ""}`, ...t, children: e });
+X.displayName = "InputOTP.Group";
+const J = ({ className: e, ...a }) => /* @__PURE__ */ b(
+  "div",
+  {
+    className: `text-on-surface flex items-center justify-center ${e || ""}`,
+    ...a,
+    children: /* @__PURE__ */ b(Ie, { size: "md", children: /* @__PURE__ */ b(he, {}) })
+  }
+);
+J.displayName = "InputOTP.Separator";
+const Se = Object.assign(le, {
+  Group: X,
+  Slot: E,
+  Separator: J
 });
-InputOTP2.displayName = "InputOTP";
-InputOTPGroup.displayName = "InputOTP.Group";
-InputOTPSlot.displayName = "InputOTP.Slot";
-InputOTPSeparator.displayName = "InputOTP.Separator";
+Se.displayName = "InputOTP";
+X.displayName = "InputOTP.Group";
+E.displayName = "InputOTP.Slot";
+J.displayName = "InputOTP.Separator";
 export {
-  InputOTP2 as InputOTP,
-  inputOTPSlotStyles,
-  inputOTPStyles
+  Se as InputOTP,
+  ie as inputOTPSlotStyles,
+  Ke as inputOTPStyles
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map