mada-design-system 0.5.3 → 0.5.4

package/index.es129.js

@@ -1,381 +1,13 @@
-import v from "./index.es196.js";
-import fe from "./index.es197.js";
-import * as i from "react";
-import { clsx as de } from "./index.es103.js";
-import e from "./index.es198.js";
-import { useUtils as be, useLocaleText as ge, useNow as Ce } from "./index.es200.js";
-import { createIsAfterIgnoreDatePart as ve } from "./index.es225.js";
-import { getDigitalClockUtilityClass as De } from "./index.es226.js";
-import { useViews as ye } from "./index.es203.js";
-import { DIGITAL_CLOCK_VIEW_HEIGHT as he } from "./index.es209.js";
-import { useControlledValueWithTimezone as Te } from "./index.es207.js";
-import { singleItemValueManager as Ve } from "./index.es208.js";
-import { useClockReferenceDate as ke } from "./index.es227.js";
-import { jsx as D } from "react/jsx-runtime";
-import y from "./index.es210.js";
-import { PickerViewRoot as we } from "./index.es211.js";
-import Ie from "./index.es228.js";
-import Pe from "./index.es229.js";
-import Oe from "./index.es230.js";
-import xe from "./index.es219.js";
-import Re from "./index.es214.js";
-import $ from "./index.es215.js";
-import Me from "./index.es218.js";
-import { alpha as A } from "./index.es231.js";
-const Se = ["ampm", "timeStep", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"], Fe = (o) => {
-  const {
-    classes: a
-  } = o;
-  return Me({
-    root: ["root"],
-    list: ["list"],
-    item: ["item"]
-  }, De, a);
-}, _e = y(we, {
-  name: "MuiDigitalClock",
-  slot: "Root",
-  overridesResolver: (o, a) => a.root
-})(({
-  ownerState: o
-}) => ({
-  overflowY: "auto",
-  width: "100%",
-  "@media (prefers-reduced-motion: no-preference)": {
-    scrollBehavior: o.alreadyRendered ? "smooth" : "auto"
-  },
-  maxHeight: he
-})), Ne = y(Ie, {
-  name: "MuiDigitalClock",
-  slot: "List",
-  overridesResolver: (o, a) => a.list
-})({
-  padding: 0
-}), je = y(Pe, {
-  name: "MuiDigitalClock",
-  slot: "Item",
-  overridesResolver: (o, a) => a.item
-})(({
-  theme: o
-}) => ({
-  padding: "8px 16px",
-  margin: "2px 4px",
-  "&:first-of-type": {
-    marginTop: 4
-  },
-  "&:hover": {
-    backgroundColor: o.vars ? `rgba(${o.vars.palette.primary.mainChannel} / ${o.vars.palette.action.hoverOpacity})` : A(o.palette.primary.main, o.palette.action.hoverOpacity)
-  },
-  "&.Mui-selected": {
-    backgroundColor: (o.vars || o).palette.primary.main,
-    color: (o.vars || o).palette.primary.contrastText,
-    "&:focus-visible, &:hover": {
-      backgroundColor: (o.vars || o).palette.primary.dark
+import t from "./index.es186.js";
+const o = t("ChevronRight", [
+  [
+    "path",
+    {
+      d: "M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z",
+      key: "xcu7tv"
     }
-  },
-  "&.Mui-focusVisible": {
-    backgroundColor: o.vars ? `rgba(${o.vars.palette.primary.mainChannel} / ${o.vars.palette.action.focusOpacity})` : A(o.palette.primary.main, o.palette.action.focusOpacity)
-  }
-})), Le = /* @__PURE__ */ i.forwardRef(function(a, h) {
-  var T, V, k;
-  const r = be(), l = i.useRef(null), H = Oe(h, l), n = xe({
-    props: a,
-    name: "MuiDigitalClock"
-  }), {
-    ampm: G = r.is12HourCycleInCurrentLocale(),
-    timeStep: c = 30,
-    autoFocus: U,
-    components: w,
-    componentsProps: I,
-    slots: P,
-    slotProps: O,
-    value: W,
-    defaultValue: q,
-    referenceDate: B,
-    disableIgnoringDatePartForTimeValidation: x = !1,
-    maxTime: u,
-    minTime: m,
-    disableFuture: R,
-    disablePast: M,
-    minutesStep: S = 1,
-    shouldDisableClock: p,
-    shouldDisableTime: f,
-    onChange: J,
-    view: K,
-    openTo: Y,
-    onViewChange: Q,
-    focusedView: F,
-    onFocusedViewChange: X,
-    className: Z,
-    disabled: ee,
-    readOnly: d,
-    views: oe = ["hours"],
-    skipDisabled: te = !1,
-    timezone: re
-  } = n, se = fe(n, Se), {
-    value: _,
-    handleValueChange: ae,
-    timezone: N
-  } = Te({
-    name: "DigitalClock",
-    timezone: re,
-    value: W,
-    defaultValue: q,
-    onChange: J,
-    valueManager: Ve
-  }), ie = ge(), b = Ce(N), j = i.useMemo(() => v({}, n, {
-    alreadyRendered: !!l.current
-  }), [n]), g = Fe(j), L = (T = (V = P == null ? void 0 : P.digitalClockItem) != null ? V : w == null ? void 0 : w.DigitalClockItem) != null ? T : je, le = Re({
-    elementType: L,
-    externalSlotProps: (k = O == null ? void 0 : O.digitalClockItem) != null ? k : I == null ? void 0 : I.digitalClockItem,
-    ownerState: {},
-    className: g.item
-  }), z = ke({
-    value: _,
-    referenceDate: B,
-    utils: r,
-    props: n,
-    timezone: N
-  }), ne = $((t) => ae(t, "finish", "hours")), {
-    setValueAndGoToNextView: ce
-  } = ye({
-    view: K,
-    views: oe,
-    openTo: Y,
-    onViewChange: Q,
-    onChange: ne,
-    focusedView: F,
-    onFocusedViewChange: X
-  }), ue = $((t) => {
-    ce(t, "finish");
-  });
-  i.useEffect(() => {
-    if (l.current === null)
-      return;
-    const t = l.current.querySelector('[role="listbox"] [role="option"][aria-selected="true"]');
-    if (!t)
-      return;
-    const s = t.offsetTop;
-    l.current.scrollTop = s - 4;
-  });
-  const E = i.useCallback((t) => {
-    const s = ve(x, r), C = () => !(m && s(m, t) || u && s(t, u) || R && s(t, b) || M && s(b, t)), pe = () => r.getMinutes(t) % S !== 0 || p != null && p(r.toJsDate(t).getTime(), "hours") ? !1 : f ? !f(t, "hours") : !0;
-    return !C() || !pe();
-  }, [x, r, m, u, R, b, M, S, p, f]), me = i.useMemo(() => {
-    const t = r.startOfDay(z);
-    return [t, ...Array.from({
-      length: Math.ceil(24 * 60 / c) - 1
-    }, (s, C) => r.addMinutes(t, c * (C + 1)))];
-  }, [z, c, r]);
-  return /* @__PURE__ */ D(_e, v({
-    ref: H,
-    className: de(g.root, Z),
-    ownerState: j
-  }, se, {
-    children: /* @__PURE__ */ D(Ne, {
-      autoFocusItem: U || !!F,
-      role: "listbox",
-      "aria-label": ie.timePickerToolbarTitle,
-      className: g.list,
-      children: me.map((t) => {
-        if (te && E(t))
-          return null;
-        const s = r.isEqual(t, _);
-        return /* @__PURE__ */ D(L, v({
-          onClick: () => !d && ue(t),
-          selected: s,
-          disabled: ee || E(t),
-          disableRipple: d,
-          role: "option",
-          "aria-disabled": d,
-          "aria-selected": s
-        }, le, {
-          children: r.format(t, G ? "fullTime12h" : "fullTime24h")
-        }), r.toISO(t));
-      })
-    })
-  }));
-});
-process.env.NODE_ENV !== "production" && (Le.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * 12h/24h view for hour selection clock.
-   * @default `utils.is12HourCycleInCurrentLocale()`
-   */
-  ampm: e.bool,
-  /**
-   * If `true`, the main element is focused during the first mount.
-   * This main element is:
-   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
-   * - the `input` element if there is a field rendered.
-   */
-  autoFocus: e.bool,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: e.object,
-  className: e.string,
-  /**
-   * Overrideable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: e.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: e.object,
-  /**
-   * The default selected value.
-   * Used when the component is not controlled.
-   */
-  defaultValue: e.any,
-  /**
-   * If `true`, the picker views and text field are disabled.
-   * @default false
-   */
-  disabled: e.bool,
-  /**
-   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
-   * @default false
-   */
-  disableFuture: e.bool,
-  /**
-   * Do not ignore date part when validating min/max time.
-   * @default false
-   */
-  disableIgnoringDatePartForTimeValidation: e.bool,
-  /**
-   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
-   * @default false
-   */
-  disablePast: e.bool,
-  /**
-   * Controlled focused view.
-   */
-  focusedView: e.oneOf(["hours"]),
-  /**
-   * Maximal selectable time.
-   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
-   */
-  maxTime: e.any,
-  /**
-   * Minimal selectable time.
-   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
-   */
-  minTime: e.any,
-  /**
-   * Step over minutes.
-   * @default 1
-   */
-  minutesStep: e.number,
-  /**
-   * Callback fired when the value changes.
-   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
-   * @template TView The view type. Will be one of date or time views.
-   * @param {TValue} value The new value.
-   * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
-   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
-   */
-  onChange: e.func,
-  /**
-   * Callback fired on focused view change.
-   * @template TView
-   * @param {TView} view The new view to focus or not.
-   * @param {boolean} hasFocus `true` if the view should be focused.
-   */
-  onFocusedViewChange: e.func,
-  /**
-   * Callback fired on view change.
-   * @template TView
-   * @param {TView} view The new view.
-   */
-  onViewChange: e.func,
-  /**
-   * The default visible view.
-   * Used when the component view is not controlled.
-   * Must be a valid option from `views` list.
-   */
-  openTo: e.oneOf(["hours"]),
-  /**
-   * If `true`, the picker views and text field are read-only.
-   * @default false
-   */
-  readOnly: e.bool,
-  /**
-   * The date used to generate the new value when both `value` and `defaultValue` are empty.
-   * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
-   */
-  referenceDate: e.any,
-  /**
-   * Disable specific clock time.
-   * @param {number} clockValue The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   * @deprecated Consider using `shouldDisableTime`.
-   */
-  shouldDisableClock: e.func,
-  /**
-   * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
-   * @param {TimeView} view The clock type of the timeValue.
-   * @returns {boolean} If `true` the time will be disabled.
-   */
-  shouldDisableTime: e.func,
-  /**
-   * If `true`, disabled digital clock items will not be rendered.
-   * @default false
-   */
-  skipDisabled: e.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: e.object,
-  /**
-   * Overrideable component slots.
-   * @default {}
-   */
-  slots: e.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
-  /**
-   * The time steps between two time options.
-   * For example, if `timeStep = 45`, then the available time options will be `[00:00, 00:45, 01:30, 02:15, 03:00, etc.]`.
-   * @default 30
-   */
-  timeStep: e.number,
-  /**
-   * Choose which timezone to use for the value.
-   * Example: "default", "system", "UTC", "America/New_York".
-   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
-   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
-   */
-  timezone: e.string,
-  /**
-   * The selected value.
-   * Used when the component is controlled.
-   */
-  value: e.any,
-  /**
-   * The visible view.
-   * Used when the component view is controlled.
-   * Must be a valid option from `views` list.
-   */
-  view: e.oneOf(["hours"]),
-  /**
-   * Available views.
-   */
-  views: e.arrayOf(e.oneOf(["hours"]))
-});
+  ]
+]);
 export {
-  Le as DigitalClock
+  o as default
 };

package/index.es13.js

@@ -1,10 +1,10 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import a from "react";
-import { useMediaQuery as l } from "./index.es104.js";
+import { useMediaQuery as l } from "./index.es103.js";
 import { cn as m } from "./index.es85.js";
 import { Button as n } from "./index.es22.js";
 import { Sheet as i, SheetTrigger as c, SheetContent as p, SheetHeader as f, SheetClose as h, SheetFooter as u } from "./index.es66.js";
-import S from "./index.es109.js";
+import S from "./index.es108.js";
 const T = i, b = a.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(c, { asChild: !0, children: /* @__PURE__ */ r(n, { ref: t, colors: "primary", className: m("flex items-center gap-space-02", e), ...o }) }));
 b.displayName = "SheetFormTrigger";
 const x = a.forwardRef(({ className: e, ...o }, t) => {

package/index.es130.js

@@ -1,13 +1,13 @@
-import t from "./index.es185.js";
-const o = t("ChevronRight", [
+import e from "./index.es186.js";
+const c = e("Check", [
   [
     "path",
     {
-      d: "M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z",
-      key: "xcu7tv"
+      d: "M8.79508 15.8749L4.62508 11.7049L3.20508 13.1149L8.79508 18.7049L20.7951 6.70492L19.3851 5.29492L8.79508 15.8749Z",
+      key: "5stcsf"
     }
   ]
 ]);
 export {
-  o as default
+  c as default
 };

package/index.es131.js

@@ -1,13 +1,13 @@
-import e from "./index.es185.js";
-const c = e("Check", [
+import e from "./index.es186.js";
+const t = e("Circle", [
   [
     "path",
     {
-      d: "M8.79508 15.8749L4.62508 11.7049L3.20508 13.1149L8.79508 18.7049L20.7951 6.70492L19.3851 5.29492L8.79508 15.8749Z",
-      key: "5stcsf"
+      d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2Z",
+      key: "arly8y"
     }
   ]
 ]);
 export {
-  c as default
+  t as default
 };

package/index.es132.js

@@ -1,13 +1,207 @@
-import e from "./index.es185.js";
-const t = e("Circle", [
-  [
-    "path",
-    {
-      d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2Z",
-      key: "arly8y"
-    }
-  ]
-]);
+import * as t from "react";
+var Me = Object.defineProperty, xe = Object.defineProperties, ke = Object.getOwnPropertyDescriptors, J = Object.getOwnPropertySymbols, me = Object.prototype.hasOwnProperty, fe = Object.prototype.propertyIsEnumerable, de = (r, a, l) => a in r ? Me(r, a, { enumerable: !0, configurable: !0, writable: !0, value: l }) : r[a] = l, Re = (r, a) => {
+  for (var l in a || (a = {}))
+    me.call(a, l) && de(r, l, a[l]);
+  if (J)
+    for (var l of J(a))
+      fe.call(a, l) && de(r, l, a[l]);
+  return r;
+}, Te = (r, a) => xe(r, ke(a)), De = (r, a) => {
+  var l = {};
+  for (var s in r)
+    me.call(r, s) && a.indexOf(s) < 0 && (l[s] = r[s]);
+  if (r != null && J)
+    for (var s of J(r))
+      a.indexOf(s) < 0 && fe.call(r, s) && (l[s] = r[s]);
+  return l;
+};
+function Oe(r) {
+  let a = setTimeout(r, 0), l = setTimeout(r, 10), s = setTimeout(r, 50);
+  return [a, l, s];
+}
+function We(r) {
+  let a = t.useRef();
+  return t.useEffect(() => {
+    a.current = r;
+  }), a.current;
+}
+var Ae = 18, ve = 40, Be = `${ve}px`, je = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function Ie({ containerRef: r, inputRef: a, pushPasswordManagerStrategy: l, isFocused: s }) {
+  let [M, p] = t.useState(!1), [_, x] = t.useState(!1), [W, F] = t.useState(!1), H = t.useMemo(() => l === "none" ? !1 : (l === "increase-width" || l === "experimental-no-flickering") && M && _, [M, _, l]), A = t.useCallback(() => {
+    let f = r.current, y = a.current;
+    if (!f || !y || W || l === "none")
+      return;
+    let g = f, E = g.getBoundingClientRect().left + g.offsetWidth, B = g.getBoundingClientRect().top + g.offsetHeight / 2, i = E - Ae, L = B;
+    document.querySelectorAll(je).length === 0 && document.elementFromPoint(i, L) === f || (p(!0), F(!0));
+  }, [r, a, W, l]);
+  return t.useEffect(() => {
+    let f = r.current;
+    if (!f || l === "none")
+      return;
+    function y() {
+      let E = window.innerWidth - f.getBoundingClientRect().right;
+      x(E >= ve);
+    }
+    y();
+    let g = setInterval(y, 1e3);
+    return () => {
+      clearInterval(g);
+    };
+  }, [r, l]), t.useEffect(() => {
+    let f = s || document.activeElement === a.current;
+    if (l === "none" || !f)
+      return;
+    let y = setTimeout(A, 0), g = setTimeout(A, 2e3), E = setTimeout(A, 5e3), B = setTimeout(() => {
+      F(!0);
+    }, 6e3);
+    return () => {
+      clearTimeout(y), clearTimeout(g), clearTimeout(E), clearTimeout(B);
+    };
+  }, [a, s, l, A]), { hasPWMBadge: M, willPushPWMBadge: H, PWM_BADGE_SPACE_WIDTH: Be };
+}
+var _e = t.createContext({}), Fe = t.forwardRef((r, a) => {
+  var l = r, { value: s, onChange: M, maxLength: p, textAlign: _ = "left", pattern: x, placeholder: W, inputMode: F = "numeric", onComplete: H, pushPasswordManagerStrategy: A = "increase-width", pasteTransformer: f, containerClassName: y, noScriptCSSFallback: g = He, render: E, children: B } = l, i = De(l, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), L, ee, te, ne, re;
+  let [he, ge] = t.useState(typeof i.defaultValue == "string" ? i.defaultValue : ""), u = s ?? he, k = We(u), $ = t.useCallback((e) => {
+    M == null || M(e), ge(e);
+  }, [M]), w = t.useMemo(() => x ? typeof x == "string" ? new RegExp(x) : x : null, [x]), c = t.useRef(null), K = t.useRef(null), Q = t.useRef({ value: u, onChange: $, isIOS: typeof window < "u" && ((ee = (L = window == null ? void 0 : window.CSS) == null ? void 0 : L.supports) == null ? void 0 : ee.call(L, "-webkit-touch-callout", "none")) }), q = t.useRef({ prev: [(te = c.current) == null ? void 0 : te.selectionStart, (ne = c.current) == null ? void 0 : ne.selectionEnd, (re = c.current) == null ? void 0 : re.selectionDirection] });
+  t.useImperativeHandle(a, () => c.current, []), t.useEffect(() => {
+    let e = c.current, n = K.current;
+    if (!e || !n)
+      return;
+    Q.current.value !== e.value && Q.current.onChange(e.value), q.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
+    function d() {
+      if (document.activeElement !== e) {
+        N(null), z(null);
+        return;
+      }
+      let o = e.selectionStart, m = e.selectionEnd, Z = e.selectionDirection, b = e.maxLength, T = e.value, S = q.current.prev, P = -1, C = -1, D;
+      if (T.length !== 0 && o !== null && m !== null) {
+        let ye = o === m, Pe = o === T.length && T.length < b;
+        if (ye && !Pe) {
+          let O = o;
+          if (O === 0)
+            P = 0, C = 1, D = "forward";
+          else if (O === b)
+            P = O - 1, C = O, D = "backward";
+          else if (b > 1 && T.length > 1) {
+            let Y = 0;
+            if (S[0] !== null && S[1] !== null) {
+              D = O < S[1] ? "backward" : "forward";
+              let Ce = S[0] === S[1] && S[0] < b;
+              D === "backward" && !Ce && (Y = -1);
+            }
+            P = Y + O, C = Y + O + 1;
+          }
+        }
+        P !== -1 && C !== -1 && P !== C && c.current.setSelectionRange(P, C, D);
+      }
+      let se = P !== -1 ? P : o, pe = C !== -1 ? C : m, Se = D ?? Z;
+      N(se), z(pe), q.current.prev = [se, pe, Se];
+    }
+    if (document.addEventListener("selectionchange", d, { capture: !0 }), d(), document.activeElement === e && U(!0), !document.getElementById("input-otp-style")) {
+      let o = document.createElement("style");
+      if (o.id = "input-otp-style", document.head.appendChild(o), o.sheet) {
+        let m = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+        V(o.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), V(o.sheet, `[data-input-otp]:autofill { ${m} }`), V(o.sheet, `[data-input-otp]:-webkit-autofill { ${m} }`), V(o.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), V(o.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+      }
+    }
+    let v = () => {
+      n && n.style.setProperty("--root-height", `${e.clientHeight}px`);
+    };
+    v();
+    let h = new ResizeObserver(v);
+    return h.observe(e), () => {
+      document.removeEventListener("selectionchange", d, { capture: !0 }), h.disconnect();
+    };
+  }, []);
+  let [le, ae] = t.useState(!1), [G, U] = t.useState(!1), [R, N] = t.useState(null), [j, z] = t.useState(null);
+  t.useEffect(() => {
+    Oe(() => {
+      var e, n, d, v;
+      (e = c.current) == null || e.dispatchEvent(new Event("input"));
+      let h = (n = c.current) == null ? void 0 : n.selectionStart, o = (d = c.current) == null ? void 0 : d.selectionEnd, m = (v = c.current) == null ? void 0 : v.selectionDirection;
+      h !== null && o !== null && (N(h), z(o), q.current.prev = [h, o, m]);
+    });
+  }, [u, G]), t.useEffect(() => {
+    k !== void 0 && u !== k && k.length < p && u.length === p && (H == null || H(u));
+  }, [p, H, k, u]);
+  let I = Ie({ containerRef: K, inputRef: c, pushPasswordManagerStrategy: A, isFocused: G }), oe = t.useCallback((e) => {
+    let n = e.currentTarget.value.slice(0, p);
+    if (n.length > 0 && w && !w.test(n)) {
+      e.preventDefault();
+      return;
+    }
+    typeof k == "string" && n.length < k.length && document.dispatchEvent(new Event("selectionchange")), $(n);
+  }, [p, $, k, w]), ie = t.useCallback(() => {
+    var e;
+    if (c.current) {
+      let n = Math.min(c.current.value.length, p - 1), d = c.current.value.length;
+      (e = c.current) == null || e.setSelectionRange(n, d), N(n), z(d);
+    }
+    U(!0);
+  }, [p]), ue = t.useCallback((e) => {
+    var n, d;
+    let v = c.current;
+    if (!f && (!Q.current.isIOS || !e.clipboardData || !v))
+      return;
+    let h = e.clipboardData.getData("text/plain"), o = f ? f(h) : h;
+    e.preventDefault();
+    let m = (n = c.current) == null ? void 0 : n.selectionStart, Z = (d = c.current) == null ? void 0 : d.selectionEnd, b = (m !== Z ? u.slice(0, m) + o + u.slice(Z) : u.slice(0, m) + o + u.slice(m)).slice(0, p);
+    if (b.length > 0 && w && !w.test(b))
+      return;
+    v.value = b, $(b);
+    let T = Math.min(b.length, p - 1), S = b.length;
+    v.setSelectionRange(T, S), N(T), z(S);
+  }, [p, $, w, u]), be = t.useMemo(() => ({ position: "relative", cursor: i.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [i.disabled]), ce = t.useMemo(() => ({ position: "absolute", inset: 0, width: I.willPushPWMBadge ? `calc(100% + ${I.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: I.willPushPWMBadge ? `inset(0 ${I.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: _, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [I.PWM_BADGE_SPACE_WIDTH, I.willPushPWMBadge, _]), we = t.useMemo(() => t.createElement("input", Te(Re({ autoComplete: i.autoComplete || "one-time-code" }, i), { "data-input-otp": !0, "data-input-otp-placeholder-shown": u.length === 0 || void 0, "data-input-otp-mss": R, "data-input-otp-mse": j, inputMode: F, pattern: w == null ? void 0 : w.source, "aria-placeholder": W, style: ce, maxLength: p, value: u, ref: c, onPaste: (e) => {
+    var n;
+    ue(e), (n = i.onPaste) == null || n.call(i, e);
+  }, onChange: oe, onMouseOver: (e) => {
+    var n;
+    ae(!0), (n = i.onMouseOver) == null || n.call(i, e);
+  }, onMouseLeave: (e) => {
+    var n;
+    ae(!1), (n = i.onMouseLeave) == null || n.call(i, e);
+  }, onFocus: (e) => {
+    var n;
+    ie(), (n = i.onFocus) == null || n.call(i, e);
+  }, onBlur: (e) => {
+    var n;
+    U(!1), (n = i.onBlur) == null || n.call(i, e);
+  } })), [oe, ie, ue, F, ce, p, j, R, i, w == null ? void 0 : w.source, u]), X = t.useMemo(() => ({ slots: Array.from({ length: p }).map((e, n) => {
+    var d;
+    let v = G && R !== null && j !== null && (R === j && n === R || n >= R && n < j), h = u[n] !== void 0 ? u[n] : null, o = u[0] !== void 0 ? null : (d = W == null ? void 0 : W[n]) != null ? d : null;
+    return { char: h, placeholderChar: o, isActive: v, hasFakeCaret: v && h === null };
+  }), isFocused: G, isHovering: !i.disabled && le }), [G, le, p, j, R, i.disabled, u]), Ee = t.useMemo(() => E ? E(X) : t.createElement(_e.Provider, { value: X }, B), [B, X, E]);
+  return t.createElement(t.Fragment, null, g !== null && t.createElement("noscript", null, t.createElement("style", null, g)), t.createElement("div", { ref: K, "data-input-otp-container": !0, style: be, className: y }, Ee, t.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, we)));
+});
+Fe.displayName = "Input";
+function V(r, a) {
+  try {
+    r.insertRule(a);
+  } catch {
+  }
+}
+var He = `
+[data-input-otp] {
+  --nojs-bg: white !important;
+  --nojs-fg: black !important;
+
+  background-color: var(--nojs-bg) !important;
+  color: var(--nojs-fg) !important;
+  caret-color: var(--nojs-fg) !important;
+  letter-spacing: .25em !important;
+  text-align: center !important;
+  border: 1px solid var(--nojs-fg) !important;
+  border-radius: 4px !important;
+  width: 100% !important;
+}
+@media (prefers-color-scheme: dark) {
+  [data-input-otp] {
+    --nojs-bg: black !important;
+    --nojs-fg: white !important;
+  }
+}`;
 export {
-  t as default
+  Fe as OTPInput,
+  _e as OTPInputContext
 };