meticulous-ui 3.7.11 → 3.7.13

package/components/Modal/Modal.js

@@ -1,31 +1,26 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useId, useEffect, useCallback, isValidElement } from "react";
-import PropTypes from "prop-types";
-import { createPortal } from "react-dom";
-import styled, { css, keyframes } from "styled-components";
-import grey from "../../colors/grey.js";
-import white from "../../colors/white.js";
-const fadeIn = keyframes`
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { useState as I, useRef as b, useId as Y, useEffect as g, useCallback as B, isValidElement as D } from "react";
+import r from "prop-types";
+import { createPortal as F } from "react-dom";
+import l, { css as f, keyframes as d } from "styled-components";
+import i from "../../colors/grey.js";
+import K from "../../colors/white.js";
+const q = d`
   from { opacity: 0; }
   to { opacity: 1; }
-`;
-const scaleIn = keyframes`
+`, P = d`
   from { opacity: 0; transform: scale(0.95); }
   to { opacity: 1; transform: scale(1); }
-`;
-const scaleOut = keyframes`
+`, H = d`
   from { opacity: 1; transform: scale(1); }
   to { opacity: 0; transform: scale(0.95); }
-`;
-const growFromBottom = keyframes`
+`, U = d`
   from { transform: translateY(100%); }
   to { transform: translateY(0); }
-`;
-const shrinkToBottom = keyframes`
+`, V = d`
   from { transform: translateY(0); }
   to { transform: translateY(100%); }
-`;
-const Overlay = /*@__PURE__*/styled.div`
+`, W = l.div`
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -33,64 +28,51 @@ const Overlay = /*@__PURE__*/styled.div`
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  animation: ${fadeIn} 0.2s ease;
+  animation: ${q} 0.2s ease;
   padding: 1rem;
 
-  ${({
-  $fullOnMobile
-}) => $fullOnMobile && css`
+  ${({ $fullOnMobile: e }) => e && f`
       @media (max-width: 640px) {
         align-items: flex-end;
         padding: 0;
       }
     `}
-`;
-const ModalContainer = /*@__PURE__*/styled.div`
-  background-color: ${white};
+`, G = l.div`
+  background-color: ${K};
   border-radius: 1rem;
   box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  width: ${({
-  $width
-}) => $width || "32rem"};
+  width: ${({ $width: e }) => e || "32rem"};
   max-width: 100%;
-  animation: ${({
-  $isClosing
-}) => $isClosing ? scaleOut : scaleIn} 0.3s ease forwards;
+  animation: ${({ $isClosing: e }) => e ? H : P} 0.3s ease forwards;
 
-  ${({
-  $fullOnMobile,
-  $isClosing
-}) => $fullOnMobile && css`
+  ${({ $fullOnMobile: e, $isClosing: o }) => e && f`
       @media (max-width: 640px) {
         width: 100%;
         max-width: 100%;
         max-height: 95dvh;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        animation: ${$isClosing ? shrinkToBottom : growFromBottom} 0.22s
-          cubic-bezier(0.32, 0.72, 0, 1) ${$isClosing ? "forwards" : ""};
+        animation: ${o ? V : U} 0.22s
+          cubic-bezier(0.32, 0.72, 0, 1) ${o ? "forwards" : ""};
       }
     `}
-`;
-const ModalHeader = /*@__PURE__*/styled.div`
+`, J = l.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid ${grey.m200};
+  border-bottom: 1px solid ${i.m200};
   flex-shrink: 0;
-`;
-const ModalTitle = /*@__PURE__*/styled.h2`
+`, N = l.h2`
   margin: 0;
   font-size: 2.4rem;
   font-weight: 600;
-  color: ${grey.m900};
+  color: ${i.m900};
   line-height: 1.4;
-`;
-const CloseButton = /*@__PURE__*/styled.button`
+`, Q = l.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -98,7 +80,7 @@ const CloseButton = /*@__PURE__*/styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${grey.m500};
+  color: ${i.m500};
   border-radius: 0.5rem;
   transition:
     background-color 0.15s,
@@ -106,157 +88,145 @@ const CloseButton = /*@__PURE__*/styled.button`
   flex-shrink: 0;
 
   &:hover {
-    background-color: ${grey.m100};
-    color: ${grey.m800};
+    background-color: ${i.m100};
+    color: ${i.m800};
   }
 
   &:focus-visible {
-    outline: 2px solid ${grey.m400};
+    outline: 2px solid ${i.m400};
     outline-offset: 2px;
   }
-`;
-const ModalBody = /*@__PURE__*/styled.div`
+`, X = l.div`
   padding: 1.5rem;
   overflow-y: auto;
   flex: 1;
-  color: ${grey.m700};
+  color: ${i.m700};
   font-size: 0.95rem;
   line-height: 1.6;
-`;
-const ModalFooter = /*@__PURE__*/styled.div`
+`, Z = l.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.75rem;
   padding: 1rem 1.5rem;
-  border-top: 1px solid ${grey.m200};
+  border-top: 1px solid ${i.m200};
   flex-shrink: 0;
 
-  ${({
-  $align
-}) => $align === "left" && css`
+  ${({ $align: e }) => e === "left" && f`
       justify-content: flex-start;
     `}
 
-  ${({
-  $align
-}) => $align === "center" && css`
+  ${({ $align: e }) => e === "center" && f`
       justify-content: center;
     `}
-`;
-const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] });
-const Modal = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  footer,
-  footerAlign = "right",
-  width,
-  closeOnOverlayClick = true,
-  showCloseButton = true,
-  isFullOnMobile = false,
-  ...rest
+`, R = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', _ = () => /* @__PURE__ */ p(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ n("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ n("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+), ee = ({
+  isOpen: e,
+  onClose: o,
+  title: a,
+  children: L,
+  footer: x,
+  footerAlign: O = "right",
+  width: S,
+  closeOnOverlayClick: z = !0,
+  showCloseButton: v = !0,
+  isFullOnMobile: k = !1,
+  ...A
 }) => {
-  const [shouldRender, setShouldRender] = useState(isOpen);
-  const [isClosing, setIsClosing] = useState(false);
-  const closeTimerRef = useRef(null);
-  const containerRef = useRef(null);
-  const triggerRef = useRef(null);
-  const titleId = useId();
-  useEffect(() => {
-    if (isOpen) {
-      clearTimeout(closeTimerRef.current);
-      triggerRef.current = document.activeElement;
-      setShouldRender(true);
-      setIsClosing(false);
-    } else {
-      setIsClosing(true);
-      closeTimerRef.current = setTimeout(() => {
-        var _a;
-        setIsClosing(false);
-        setShouldRender(false);
-        (_a = triggerRef.current) == null ? void 0 : _a.focus();
-      }, 220);
-    }
-    return () => clearTimeout(closeTimerRef.current);
-  }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen || !containerRef.current) return;
-    const first = containerRef.current.querySelectorAll(FOCUSABLE)[0];
-    (first != null ? first : containerRef.current).focus();
-  }, [isOpen, shouldRender]);
-  const handleTabKey = useCallback((e) => {
-    if (e.key !== "Tab" || !containerRef.current) return;
-    const focusable = [...containerRef.current.querySelectorAll(FOCUSABLE)];
-    if (!focusable.length) return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (e.shiftKey) {
-      if (document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      }
-    } else {
-      if (document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    }
-  }, []);
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "Escape") onClose == null ? void 0 : onClose();
-    handleTabKey(e);
-  }, [onClose, handleTabKey]);
-  useEffect(() => {
-    if (!isOpen) return;
-    document.addEventListener("keydown", handleKeyDown);
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = prev;
+  const [w, $] = I(e), [C, m] = I(!1), u = b(null), s = b(null), T = b(null), h = Y();
+  g(() => (e ? (clearTimeout(u.current), T.current = document.activeElement, $(!0), m(!1)) : (m(!0), u.current = setTimeout(() => {
+    var t;
+    m(!1), $(!1), (t = T.current) == null || t.focus();
+  }, 220)), () => clearTimeout(u.current)), [e]), g(() => {
+    if (!e || !s.current) return;
+    const t = s.current.querySelectorAll(R)[0];
+    (t != null ? t : s.current).focus();
+  }, [e, w]);
+  const j = B((t) => {
+    if (t.key !== "Tab" || !s.current) return;
+    const c = [...s.current.querySelectorAll(R)];
+    if (!c.length) return;
+    const E = c[0], M = c[c.length - 1];
+    t.shiftKey ? document.activeElement === E && (t.preventDefault(), M.focus()) : document.activeElement === M && (t.preventDefault(), E.focus());
+  }, []), y = B(
+    (t) => {
+      t.key === "Escape" && (o == null || o()), j(t);
+    },
+    [o, j]
+  );
+  return g(() => {
+    if (!e) return;
+    document.addEventListener("keydown", y);
+    const t = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", y), document.body.style.overflow = t;
     };
-  }, [isOpen, handleKeyDown]);
-  if (!shouldRender) return null;
-  const handleOverlayClick = (e) => {
-    if (closeOnOverlayClick && e.target === e.currentTarget) onClose == null ? void 0 : onClose();
-  };
-  return createPortal(/* @__PURE__ */ jsx(Overlay, { onClick: handleOverlayClick, $fullOnMobile: isFullOnMobile, children: /* @__PURE__ */ jsxs(ModalContainer, { ref: containerRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : void 0, tabIndex: -1, $width: width, $fullOnMobile: isFullOnMobile, $isClosing: isClosing, ...rest, children: [
-    (title || showCloseButton) && /* @__PURE__ */ jsxs(ModalHeader, { children: [
-      title && (isValidElement(title) ? /* @__PURE__ */ jsx("div", { id: titleId, children: title }) : /* @__PURE__ */ jsx(ModalTitle, { id: titleId, children: title })),
-      showCloseButton && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close modal", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
-    ] }),
-    /* @__PURE__ */ jsx(ModalBody, { children }),
-    footer && /* @__PURE__ */ jsx(ModalFooter, { $align: footerAlign, children: footer })
-  ] }) }), document.body);
+  }, [e, y]), w ? F(
+    /* @__PURE__ */ n(W, { onClick: (t) => {
+      z && t.target === t.currentTarget && (o == null || o());
+    }, $fullOnMobile: k, children: /* @__PURE__ */ p(
+      G,
+      {
+        ref: s,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": a ? h : void 0,
+        tabIndex: -1,
+        $width: S,
+        $fullOnMobile: k,
+        $isClosing: C,
+        ...A,
+        children: [
+          (a || v) && /* @__PURE__ */ p(J, { children: [
+            a && (D(a) ? /* @__PURE__ */ n("div", { id: h, children: a }) : /* @__PURE__ */ n(N, { id: h, children: a })),
+            v && /* @__PURE__ */ n(Q, { onClick: o, "aria-label": "Close modal", children: /* @__PURE__ */ n(_, {}) })
+          ] }),
+          /* @__PURE__ */ n(X, { children: L }),
+          x && /* @__PURE__ */ n(Z, { $align: O, children: x })
+        ]
+      }
+    ) }),
+    document.body
+  ) : null;
 };
-Modal.propTypes = {
+ee.propTypes = {
   /** Controls whether the modal is visible */
-  isOpen: PropTypes.bool,
+  isOpen: r.bool,
   /** Called when the modal requests to close (Escape key, overlay click, or close button) */
-  onClose: PropTypes.func,
+  onClose: r.func,
   /** Modal header title — string or React element */
-  title: /* @__PURE__ */ PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  title: r.oneOfType([r.string, r.node]),
   /** Modal body content */
-  children: PropTypes.node,
+  children: r.node,
   /** Content rendered in the modal footer (e.g. action buttons) */
-  footer: PropTypes.node,
+  footer: r.node,
   /** Horizontal alignment of footer content: `'left'`, `'center'`, or `'right'`. Defaults to `'right'` */
-  footerAlign: PropTypes.string,
+  footerAlign: r.string,
   /** CSS width of the modal dialog */
-  width: PropTypes.string,
+  width: r.string,
   /** Closes the modal when the backdrop is clicked. Defaults to `true` */
-  closeOnOverlayClick: PropTypes.bool,
+  closeOnOverlayClick: r.bool,
   /** Shows the × close button in the header. Defaults to `true` */
-  showCloseButton: PropTypes.bool,
+  showCloseButton: r.bool,
   /** Expands the modal to full-screen on small viewports */
-  isFullOnMobile: PropTypes.bool
+  isFullOnMobile: r.bool
 };
 export {
-  Modal as default
+  ee as default
 };

package/components/Modal/index.js

@@ -1,4 +1,4 @@
-import Modal from "./Modal.js";
+import a from "./Modal.js";
 export {
-  Modal as default
+  a as default
 };

package/components/OtpInput/OtpInput.js

@@ -1,9 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import grey from "../../colors/grey.js";
-const OTPWrapper = /*@__PURE__*/styled.div`
+import { jsx as w } from "react/jsx-runtime";
+import { useState as P, useRef as h, useEffect as A } from "react";
+import y from "prop-types";
+import O from "styled-components";
+import k from "../../colors/grey.js";
+const E = O.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -11,153 +11,97 @@ const OTPWrapper = /*@__PURE__*/styled.div`
   @media screen and (max-width: 768px) {\
     gap: 0.32rem;
   }
-`;
-const OtpInputBox = /*@__PURE__*/styled.input`
+`, T = O.input`
   height: 3.2rem;
   width: 3.2rem;
   font-size: 1.92rem;
   text-align: center;
-  color: ${grey.m600};
-  border: 1px solid ${grey.m800};
+  color: ${k.m600};
+  border: 1px solid ${k.m800};
   border-radius: 0.32rem;
-`;
-const changeHandler = (handleChange, index) => (e) => {
-  handleChange(e.target.value, index);
-};
-const keyDownHandler = (handleKeyDown, index) => (e) => handleKeyDown(e, index);
-const Num = ({
-  inputsRef,
-  handleChange,
-  handleKeyDown,
-  handleFocus,
-  digit,
-  index,
-  length
-}) => {
-  const getRef = (el) => inputsRef.current[index] = el;
-  return /* @__PURE__ */ jsx(OtpInputBox, { ref: getRef, maxLength: 1, inputMode: "numeric", autoComplete: "one-time-code", "aria-label": `Digit ${index + 1} of ${length}`, value: digit, onChange: changeHandler(handleChange, index), onKeyDown: keyDownHandler(handleKeyDown, index), onFocus: () => handleFocus(index) }, `key-${index}`);
-};
-const renderNums = ({
-  inputsRef,
-  handleChange,
-  handleKeyDown,
-  handleFocus,
-  length
-}) => (digit, index) => /* @__PURE__ */ jsx(Num, { ...{
-  inputsRef,
-  handleChange,
-  handleKeyDown,
-  handleFocus,
-  digit,
-  index,
-  length
-} }, `otp-num-${index}`);
-const OtpInput = ({
-  length = 6,
-  value = "",
-  onChange,
-  onComplete,
-  ...rest
-}) => {
-  const [otp, setOtp] = useState(Array(length).fill(""));
-  const inputsRef = useRef([]);
-  const otpRef = useRef(otp);
-  const programmaticFocusRef = useRef(false);
-  const focusCell = (index) => {
-    var _a;
-    programmaticFocusRef.current = true;
-    (_a = inputsRef.current[index]) == null ? void 0 : _a.focus();
-  };
-  useEffect(() => {
-    if (!value) return;
-    const str = String(value).replace(/\D/g, "").slice(0, length);
-    const newOtp = str.split("");
-    while (newOtp.length < length) newOtp.push("");
-    setOtp(newOtp);
-    if (str.length === length) {
-      onComplete == null ? void 0 : onComplete(str);
-    }
-  }, [value, length, onComplete]);
-  const updateOtp = (newOtp) => {
-    otpRef.current = newOtp;
-    setOtp(newOtp);
-    const joined = newOtp.join("");
-    onChange == null ? void 0 : onChange(joined);
-    if (joined.length === length) {
-      onComplete == null ? void 0 : onComplete(joined);
-    }
+`, j = (e, c) => (a) => {
+  e(a.target.value, c);
+}, v = (e, c) => (a) => e(a, c), F = ({ inputsRef: e, handleChange: c, handleKeyDown: a, handleFocus: n, digit: l, index: s, length: i }) => /* @__PURE__ */ w(
+  T,
+  {
+    ref: (m) => e.current[s] = m,
+    maxLength: 1,
+    inputMode: "numeric",
+    autoComplete: "one-time-code",
+    "aria-label": `Digit ${s + 1} of ${i}`,
+    value: l,
+    onChange: j(c, s),
+    onKeyDown: v(a, s),
+    onFocus: () => n(s)
+  },
+  `key-${s}`
+), K = ({ inputsRef: e, handleChange: c, handleKeyDown: a, handleFocus: n, length: l }) => (s, i) => /* @__PURE__ */ w(
+  F,
+  {
+    inputsRef: e,
+    handleChange: c,
+    handleKeyDown: a,
+    handleFocus: n,
+    digit: s,
+    index: i,
+    length: l
+  },
+  `otp-num-${i}`
+), B = ({ length: e = 6, value: c = "", onChange: a, onComplete: n, ...l }) => {
+  const [s, i] = P(Array(e).fill("")), d = h([]), m = h(s), g = h(!1), f = (r) => {
+    var t;
+    g.current = !0, (t = d.current[r]) == null || t.focus();
   };
-  const handleChange = (val, index) => {
-    val = val.replace(/\D/g, "").slice(-1);
-    const newOtp = [...otp];
-    newOtp[index] = val;
-    updateOtp(newOtp);
-    if (val && index < length - 1) {
-      focusCell(index + 1);
-    }
-  };
-  const handleKeyDown = (e, index) => {
-    const firstEmpty = otp.findIndex((d) => d === "");
-    const lastValid = firstEmpty === -1 ? length - 1 : firstEmpty;
-    if (e.key === "Backspace") {
-      e.preventDefault();
-      if (otp[index]) {
-        const newOtp = [...otp];
-        newOtp[index] = "";
-        updateOtp(newOtp);
-      }
-      if (index > 0) focusCell(index - 1);
-    } else if (e.key === "ArrowLeft" && index > 0) {
-      e.preventDefault();
-      focusCell(index - 1);
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      if (index + 1 <= lastValid) focusCell(index + 1);
-    } else if (e.key === "Tab") {
-      e.preventDefault();
-      if (e.shiftKey) {
-        if (index > 0) focusCell(index - 1);
-      } else {
-        focusCell(lastValid);
+  A(() => {
+    if (!c) return;
+    const r = String(c).replace(/\D/g, "").slice(0, e), t = r.split("");
+    for (; t.length < e; ) t.push("");
+    i(t), r.length === e && (n == null || n(r));
+  }, [c, e, n]);
+  const D = (r) => {
+    m.current = r, i(r);
+    const t = r.join("");
+    a == null || a(t), t.length === e && (n == null || n(t));
+  }, R = (r, t) => {
+    r = r.replace(/\D/g, "").slice(-1);
+    const o = [...s];
+    o[t] = r, D(o), r && t < e - 1 && f(t + 1);
+  }, b = (r, t) => {
+    const o = s.findIndex((p) => p === ""), u = o === -1 ? e - 1 : o;
+    if (r.key === "Backspace") {
+      if (r.preventDefault(), s[t]) {
+        const p = [...s];
+        p[t] = "", D(p);
       }
-    }
-  };
-  const handleFocus = (index) => {
-    if (programmaticFocusRef.current) {
-      programmaticFocusRef.current = false;
+      t > 0 && f(t - 1);
+    } else r.key === "ArrowLeft" && t > 0 ? (r.preventDefault(), f(t - 1)) : r.key === "ArrowRight" ? (r.preventDefault(), t + 1 <= u && f(t + 1)) : r.key === "Tab" && (r.preventDefault(), r.shiftKey ? t > 0 && f(t - 1) : f(u));
+  }, $ = (r) => {
+    if (g.current) {
+      g.current = !1;
       return;
     }
-    const firstEmpty = otpRef.current.findIndex((d) => d === "");
-    const target = firstEmpty === -1 ? length - 1 : firstEmpty;
-    if (index !== target) focusCell(target);
-  };
-  const handlePaste = (e) => {
-    const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
-    if (!pasted) return;
-    const newOtp = Array(length).fill("");
-    pasted.slice(0, length).split("").forEach((char, i) => newOtp[i] = char);
-    updateOtp(newOtp);
-    const lastIndex = Math.min(pasted.length - 1, length - 1);
-    focusCell(lastIndex);
+    const t = m.current.findIndex((u) => u === ""), o = t === -1 ? e - 1 : t;
+    r !== o && f(o);
   };
-  return /* @__PURE__ */ jsx(OTPWrapper, { onPaste: handlePaste, ...rest, children: otp.map(renderNums({
-    inputsRef,
-    handleChange,
-    handleKeyDown,
-    handleFocus,
-    length
-  })) });
+  return /* @__PURE__ */ w(E, { onPaste: (r) => {
+    const t = r.clipboardData.getData("text").replace(/\D/g, "");
+    if (!t) return;
+    const o = Array(e).fill("");
+    t.slice(0, e).split("").forEach((p, I) => o[I] = p), D(o);
+    const u = Math.min(t.length - 1, e - 1);
+    f(u);
+  }, ...l, children: s.map(K({ inputsRef: d, handleChange: R, handleKeyDown: b, handleFocus: $, length: e })) });
 };
-OtpInput.propTypes = {
+B.propTypes = {
   /** Number of OTP input boxes. Defaults to 6 */
-  length: PropTypes.number,
+  length: y.number,
   /** Controlled OTP value (digits only) */
-  value: PropTypes.string,
+  value: y.string,
   /** Called with the current OTP string on each keystroke */
-  onChange: PropTypes.func,
+  onChange: y.func,
   /** Called with the completed OTP string when all boxes are filled */
-  onComplete: PropTypes.func
+  onComplete: y.func
 };
 export {
-  OtpInput as default
+  B as default
 };

package/components/OtpInput/index.js

@@ -1,4 +1,4 @@
-import OtpInput from "./OtpInput.js";
+import p from "./OtpInput.js";
 export {
-  OtpInput as default
+  p as default
 };