meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/Modal/Modal.cjs

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

package/cjs/components/Modal/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Modal = require("./Modal.cjs");
-exports.default = Modal.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Modal.cjs");exports.default=e.default;

package/cjs/components/OtpInput/OtpInput.cjs

@@ -1,14 +1,4 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const PropTypes = require("prop-types");
-const styled = require("styled-components");
-const grey = require("../../colors/grey.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const OTPWrapper = styled__default.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react/jsx-runtime"),d=require("react"),q=require("prop-types"),v=require("styled-components"),R=require("../../colors/grey.cjs"),_=r=>r&&r.__esModule?r:{default:r},g=_(q),b=_(v),I=b.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -16,151 +6,12 @@ const OTPWrapper = styled__default.default.div`
   @media screen and (max-width: 768px) {\
     gap: 0.32rem;
   }
-`;
-const OtpInputBox = styled__default.default.input`
+`,M=b.default.input`
   height: 3.2rem;
   width: 3.2rem;
   font-size: 1.92rem;
   text-align: center;
-  color: ${grey.default.m600};
-  border: 1px solid ${grey.default.m800};
+  color: ${R.default.m600};
+  border: 1px solid ${R.default.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Num, { ...{
-  inputsRef,
-  handleChange,
-  handleKeyDown,
-  handleFocus,
-  digit,
-  index,
-  length
-} }, `otp-num-${index}`);
-const OtpInput = ({
-  length = 6,
-  value = "",
-  onChange,
-  onComplete,
-  ...rest
-}) => {
-  const [otp, setOtp] = react.useState(Array(length).fill(""));
-  const inputsRef = react.useRef([]);
-  const otpRef = react.useRef(otp);
-  const programmaticFocusRef = react.useRef(false);
-  const focusCell = (index) => {
-    var _a;
-    programmaticFocusRef.current = true;
-    (_a = inputsRef.current[index]) == null ? void 0 : _a.focus();
-  };
-  react.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);
-    }
-  };
-  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);
-      }
-    }
-  };
-  const handleFocus = (index) => {
-    if (programmaticFocusRef.current) {
-      programmaticFocusRef.current = false;
-      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);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(OTPWrapper, { onPaste: handlePaste, ...rest, children: otp.map(renderNums({
-    inputsRef,
-    handleChange,
-    handleKeyDown,
-    handleFocus,
-    length
-  })) });
-};
-OtpInput.propTypes = {
-  /** Number of OTP input boxes. Defaults to 6 */
-  length: PropTypes__default.default.number,
-  /** Controlled OTP value (digits only) */
-  value: PropTypes__default.default.string,
-  /** Called with the current OTP string on each keystroke */
-  onChange: PropTypes__default.default.func,
-  /** Called with the completed OTP string when all boxes are filled */
-  onComplete: PropTypes__default.default.func
-};
-exports.default = OtpInput;
+`,A=(r,c)=>a=>{r(a.target.value,c)},E=(r,c)=>a=>r(a,c),S=({inputsRef:r,handleChange:c,handleKeyDown:a,handleFocus:u,digit:p,index:s,length:o})=>{const y=m=>r.current[s]=m;return h.jsx(M,{ref:y,maxLength:1,inputMode:"numeric",autoComplete:"one-time-code","aria-label":`Digit ${s+1} of ${o}`,value:p,onChange:A(c,s),onKeyDown:E(a,s),onFocus:()=>u(s)},`key-${s}`)},F=({inputsRef:r,handleChange:c,handleKeyDown:a,handleFocus:u,length:p})=>(s,o)=>h.jsx(S,{inputsRef:r,handleChange:c,handleKeyDown:a,handleFocus:u,digit:s,index:o,length:p},`otp-num-${o}`),O=({length:r=6,value:c="",onChange:a,onComplete:u,...p})=>{const[s,o]=d.useState(Array(r).fill("")),y=d.useRef([]),m=d.useRef(s),D=d.useRef(!1),f=e=>{var t;D.current=!0,(t=y.current[e])==null||t.focus()};d.useEffect(()=>{if(!c)return;const e=String(c).replace(/\D/g,"").slice(0,r),t=e.split("");for(;t.length<r;)t.push("");o(t),e.length===r&&(u==null||u(e))},[c,r,u]);const w=e=>{m.current=e,o(e);const t=e.join("");a==null||a(t),t.length===r&&(u==null||u(t))},j=(e,t)=>{e=e.replace(/\D/g,"").slice(-1);const n=[...s];n[t]=e,w(n),e&&t<r-1&&f(t+1)},k=(e,t)=>{const n=s.findIndex(l=>l===""),i=n===-1?r-1:n;if(e.key==="Backspace"){if(e.preventDefault(),s[t]){const l=[...s];l[t]="",w(l)}t>0&&f(t-1)}else e.key==="ArrowLeft"&&t>0?(e.preventDefault(),f(t-1)):e.key==="ArrowRight"?(e.preventDefault(),t+1<=i&&f(t+1)):e.key==="Tab"&&(e.preventDefault(),e.shiftKey?t>0&&f(t-1):f(i))},P=e=>{if(D.current){D.current=!1;return}const t=m.current.findIndex(i=>i===""),n=t===-1?r-1:t;e!==n&&f(n)},T=e=>{const t=e.clipboardData.getData("text").replace(/\D/g,"");if(!t)return;const n=Array(r).fill("");t.slice(0,r).split("").forEach((l,$)=>n[$]=l),w(n);const i=Math.min(t.length-1,r-1);f(i)};return h.jsx(I,{onPaste:T,...p,children:s.map(F({inputsRef:y,handleChange:j,handleKeyDown:k,handleFocus:P,length:r}))})};O.propTypes={length:g.default.number,value:g.default.string,onChange:g.default.func,onComplete:g.default.func};exports.default=O;

package/cjs/components/OtpInput/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const OtpInput = require("./OtpInput.cjs");
-exports.default = OtpInput.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./OtpInput.cjs");exports.default=e.default;

package/cjs/components/PageLoader/PageLoader.cjs

@@ -1,58 +1,10 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const blue = require("../../colors/blue.cjs");
-const green = require("../../colors/green.cjs");
-const red = require("../../colors/red.cjs");
-const yellow = require("../../colors/yellow.cjs");
-const orange = require("../../colors/orange.cjs");
-const black = require("../../colors/black.cjs");
-const grey = require("../../colors/grey.cjs");
-const violet = require("../../colors/violet.cjs");
-const teal = require("../../colors/teal.cjs");
-const purple = require("../../colors/purple.cjs");
-const pink = require("../../colors/pink.cjs");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const COLOR_SHADE_MAP = {
-  blue: blue.blue,
-  green: green.default,
-  red: red.default,
-  yellow: yellow.default,
-  orange: orange.default,
-  black: black.black,
-  grey: grey.default,
-  violet: violet.default,
-  teal: teal.default,
-  purple: purple.default,
-  pink: pink.default
-};
-const getColor = (clr) => {
-  var _a;
-  return (_a = COLOR_SHADE_MAP[clr]) != null ? _a : blue.blue.m500;
-};
-const horizontalGrow = /*@__PURE__*/styled.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("../../colors/blue.cjs"),i=require("../../colors/green.cjs"),c=require("../../colors/red.cjs"),d=require("../../colors/yellow.cjs"),f=require("../../colors/orange.cjs"),b=require("../../colors/black.cjs"),g=require("../../colors/grey.cjs"),q=require("../../colors/violet.cjs"),m=require("../../colors/teal.cjs"),p=require("../../colors/purple.cjs"),_=require("../../colors/pink.cjs"),a=require("styled-components"),y=e=>e&&e.__esModule?e:{default:e},k=y(a),v={blue:o.blue,green:i.default,red:c.default,yellow:d.default,orange:f.default,black:b.black,grey:g.default,violet:q.default,teal:m.default,purple:p.default,pink:_.default},w=e=>{var r;return(r=v[e])!=null?r:o.blue.m500},x=a.keyframes`
   0%   { transform: scaleX(0); }
   100% { transform: scaleX(1); }
-`;
-const PageLdr = styled__default.default.div`
+`,L=k.default.div`
   width: 90%;
   height: 3px;
-  background-color: ${({
-  $color
-}) => $color};
+  background-color: ${({$color:e})=>e};
   transform-origin: left;
-  animation: ${horizontalGrow} 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-`;
-const PageLoader = ({
-  theme = "blue",
-  color,
-  ...props
-}) => {
-  var _a;
-  const shade = getColor(theme);
-  const clr = color || ((_a = shade == null ? void 0 : shade.m500) != null ? _a : blue.blue.m500);
-  return /* @__PURE__ */ jsxRuntime.jsx(PageLdr, { ...props, $color: clr, role: "progressbar", "aria-label": "Loading", "aria-valuemin": 0, "aria-valuemax": 100 });
-};
-exports.default = PageLoader;
+  animation: ${x} 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+`,M=({theme:e="blue",color:r,...u})=>{var l;const t=w(e),n=r||((l=t==null?void 0:t.m500)!=null?l:o.blue.m500);return s.jsx(L,{...u,$color:n,role:"progressbar","aria-label":"Loading","aria-valuemin":0,"aria-valuemax":100})};exports.default=M;

package/cjs/components/PageLoader/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const PageLoader = require("./PageLoader.cjs");
-exports.default = PageLoader.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./PageLoader.cjs");exports.default=e.default;