meticulous-ui 3.11.3 → 3.11.5

package/cjs/components/Button/Button.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),M=require("react"),D=require("../Spinner/Spinner.cjs"),P=require("../../colors/colorMap.cjs"),w=require("../../colors/blue.cjs"),R=require("../Ripple/Ripple.cjs"),S=require("../../colors/white.cjs"),v=require("../../colors/grey.cjs"),y=require("./constants.cjs"),z=require("prop-types"),l=require("styled-components"),x=e=>e&&e.__esModule?e:{default:e},o=x(z),d=x(l),B=d.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),R=require("react"),D=require("../Spinner/Spinner.cjs"),P=require("../../colors/colorMap.cjs"),y=require("../../colors/blue.cjs"),S=require("../Ripple/Ripple.cjs"),z=require("../../colors/white.cjs"),v=require("../../colors/grey.cjs"),w=require("./constants.cjs"),B=require("prop-types"),l=require("styled-components"),x=e=>e&&e.__esModule?e:{default:e},o=x(B),d=x(l),E=d.default.button`
   height: ${({$height:e})=>e}rem;
   width: ${({$width:e})=>e}rem;
   border-radius: 0.96rem;
@@ -15,18 +15,18 @@
 
   ${({disabled:e,$isLoading:t})=>!(e||t)&&l.css`
       &:hover {
-        background-color: ${({$hoverColor:n})=>n};
+        background-color: ${({$hoverColor:r})=>r};
       }
 
       &:active {
-        background-color: ${({$activeColor:n})=>n};
+        background-color: ${({$activeColor:r})=>r};
       }
     `};
 
   &:focus-visible {
     outline: none;
   }
-`,E=d.default.div`
+`,K=d.default.div`
   font-size: ${({$font:e})=>e}rem;
   font-weight: 500;
   max-width: 100%;
@@ -34,7 +34,7 @@
   color: ${({$textColor:e})=>e};
   opacity: ${({$isLoading:e})=>e?0:1};
   transition: opacity 0.3s ease;
-`,K=d.default.div`
+`,O=d.default.div`
   height: ${({$height:e})=>e}rem;
   width: ${({$width:e})=>e}rem;
   display: inline-block;
@@ -53,7 +53,7 @@
         transform: translateY(-2px);
       }
     `};
-`,O=d.default.div`
+`,W=d.default.div`
   position: absolute;
   inset: 0;
   display: flex;
@@ -62,4 +62,4 @@
   opacity: ${({$isLoading:e})=>e?1:0};
   transition: opacity 0.3s ease;
   pointer-events: none;
-`,W=({theme:e,children:t})=>r.jsx(R.default,{rippleColor:e.m100,children:t}),C=e=>{var g;const{children:t,theme:n=w.blue,size:q=y.MEDIUM,width:c,leftIcon:U,rightIcon:Y,isLoading:i,textColor:u,onKeyDown:a,...j}=e||{},f=M.useRef(0),_=s=>{if(s.key==="Enter"||s.key===" "){const $=Date.now();if($-f.current<500){s.preventDefault(),s.stopPropagation();return}f.current=$}a==null||a(s)},{m400:T,m500:k,m600:I}=(g=P.default[n])!=null?g:w.blue,{height:h,width:p,font:L}=y.SIZE[q]||{},m=["white","yellow"].includes(n)?v.default.m600:S.default,b=r.jsxs(B,{type:"button",...j,onKeyDown:_,$hoverColor:k,$activeColor:I,$selectedColor:T,$height:h,$width:c||p,disabled:e.disabled,$isLoading:i,children:[r.jsx(O,{$isLoading:i,children:r.jsx(D.default,{size:"small",color:u||m})}),r.jsx(E,{$isLoading:i,$textColor:u||m,$font:L,children:t})]});return r.jsx(K,{$height:h,$width:c||p,disabled:e.disabled,$isLoading:i,children:i?b:r.jsx(W,{theme:n,children:b})})};C.propTypes={children:o.default.node,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),leftIcon:o.default.elementType,rightIcon:o.default.elementType,isLoading:o.default.bool,textColor:o.default.string,disabled:o.default.bool};exports.default=C;
+`,U=({theme:e,children:t})=>n.jsx(S.default,{rippleColor:e.m100,borderRadius:"0.96rem",children:t}),C=e=>{var g;const{children:t,theme:r=y.blue,size:q=w.MEDIUM,width:u,leftIcon:Y,rightIcon:Z,isLoading:i,textColor:c,onKeyDown:a,style:j,..._}=e||{},f=R.useRef(0),T=s=>{if(s.key==="Enter"||s.key===" "){const $=Date.now();if($-f.current<500){s.preventDefault(),s.stopPropagation();return}f.current=$}a==null||a(s)},{m400:k,m500:I,m600:L}=(g=P.default[r])!=null?g:y.blue,{height:h,width:p,font:M}=w.SIZE[q]||{},m=["white","yellow"].includes(r)?v.default.m600:z.default,b=n.jsxs(E,{type:"button",..._,onKeyDown:T,$hoverColor:I,$activeColor:L,$selectedColor:k,$height:h,$width:u||p,disabled:e.disabled,$isLoading:i,children:[n.jsx(W,{$isLoading:i,children:n.jsx(D.default,{size:"small",color:c||m})}),n.jsx(K,{$isLoading:i,$textColor:c||m,$font:M,children:t})]});return n.jsx(O,{style:j,$height:h,$width:u||p,disabled:e.disabled,$isLoading:i,children:i?b:n.jsx(U,{theme:r,children:b})})};C.propTypes={children:o.default.node,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),leftIcon:o.default.elementType,rightIcon:o.default.elementType,isLoading:o.default.bool,textColor:o.default.string,disabled:o.default.bool};exports.default=C;

package/cjs/components/Input/FileUploader/FileUploader.cjs

@@ -82,4 +82,4 @@
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
-`,V=({theme:e,children:t})=>r.jsx(L.default,{rippleColor:e.m100,children:t}),_=({label:e,labelColor:t,theme:n=v.blue,size:k=j.MEDIUM,width:z,isLoading:i,disabled:s,prefixIcon:p=F.default,suffixIcon:f,type:I="file",accept:M,isMultiple:R,onChange:T,...D})=>{var g;const h=b.useRef(null),{m400:P,m500:S,m600:W}=(g=H.default[n])!=null?g:v.blue,{height:$,width:E,font:a}=j.SIZE[k]||{},c=t||["white","yellow"].includes(n)?q.default.m600:B.default,m=b.useRef(0),K=u=>{var w;if(u.key==="Enter"||u.key===" "){u.preventDefault();const y=Date.now();if(y-m.current<500){u.stopPropagation();return}m.current=y,!s&&!i&&((w=h.current)==null||w.click())}},x=r.jsxs(A,{$selectedColor:P,$hoverColor:S,$height:$,$width:z||E,$activeColor:W,disabled:s,$isLoading:i,tabIndex:0,"aria-disabled":s,onKeyDown:K,children:[r.jsx(Q,{ref:h,type:I,accept:M,multiple:R,disabled:s,onChange:T,tabIndex:-1}),r.jsx(J,{$isLoading:i,children:r.jsx(O.default,{size:"small",color:c})}),r.jsxs(N,{$isLoading:i,children:[p&&r.jsx(p,{color:c,size:a+19}),r.jsx(G,{color:c,size:`${a}rem`,$prefixIcon:!!p,$suffixIcon:!!f,$iconSize:a+19,title:e,children:e}),f&&r.jsx(f,{color:c,size:a+19})]})]});return r.jsx(Z,{$height:$,disabled:s,$isLoading:i,...D,children:i||s?x:r.jsx(V,{theme:n,children:x})})};_.propTypes={label:o.default.string,labelColor:o.default.string,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),isLoading:o.default.bool,disabled:o.default.bool,prefixIcon:o.default.elementType,suffixIcon:o.default.elementType,type:o.default.string,accept:o.default.string,isMultiple:o.default.bool,onChange:o.default.func};exports.default=_;
+`,V=({theme:e,children:t})=>r.jsx(L.default,{rippleColor:e.m100,borderRadius:"0.96rem",children:t}),_=({label:e,labelColor:t,theme:n=v.blue,size:k=j.MEDIUM,width:R,isLoading:i,disabled:s,prefixIcon:p=F.default,suffixIcon:f,type:z="file",accept:I,isMultiple:M,onChange:T,...D})=>{var g;const h=b.useRef(null),{m400:P,m500:S,m600:W}=(g=H.default[n])!=null?g:v.blue,{height:m,width:E,font:a}=j.SIZE[k]||{},c=t||["white","yellow"].includes(n)?q.default.m600:B.default,$=b.useRef(0),K=u=>{var w;if(u.key==="Enter"||u.key===" "){u.preventDefault();const y=Date.now();if(y-$.current<500){u.stopPropagation();return}$.current=y,!s&&!i&&((w=h.current)==null||w.click())}},x=r.jsxs(A,{$selectedColor:P,$hoverColor:S,$height:m,$width:R||E,$activeColor:W,disabled:s,$isLoading:i,tabIndex:0,"aria-disabled":s,onKeyDown:K,children:[r.jsx(Q,{ref:h,type:z,accept:I,multiple:M,disabled:s,onChange:T,tabIndex:-1}),r.jsx(J,{$isLoading:i,children:r.jsx(O.default,{size:"small",color:c})}),r.jsxs(N,{$isLoading:i,children:[p&&r.jsx(p,{color:c,size:a+19}),r.jsx(G,{color:c,size:`${a}rem`,$prefixIcon:!!p,$suffixIcon:!!f,$iconSize:a+19,title:e,children:e}),f&&r.jsx(f,{color:c,size:a+19})]})]});return r.jsx(Z,{$height:m,disabled:s,$isLoading:i,...D,children:i||s?x:r.jsx(V,{theme:n,children:x})})};_.propTypes={label:o.default.string,labelColor:o.default.string,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),isLoading:o.default.bool,disabled:o.default.bool,prefixIcon:o.default.elementType,suffixIcon:o.default.elementType,type:o.default.string,accept:o.default.string,isMultiple:o.default.bool,onChange:o.default.func};exports.default=_;

package/cjs/components/Pagination/Pagination.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),D=require("react"),y=require("styled-components"),L=require("../Icons/ChevronLeft.cjs"),b=require("../Icons/ChevronRight.cjs"),I=require("../Ripple/Ripple.cjs"),B=require("../../colors/colorMap.cjs"),P=require("../../colors/teal.cjs"),M=require("../../colors/grey.cjs"),q=require("../../colors/white.cjs"),O=require("../../colors/black.cjs"),o=require("./constants.cjs"),F=e=>e&&e.__esModule?e:{default:e},a=F(y),j=e=>({$shades:i})=>{if(["#FFFFFF"].includes(i))return O.black.m900;if(e===o.SELECTED_BG)return i.m600;if(e===o.NOT_SELECTED_BG)return i.m50;if(e===o.ACTIVE_NOT_SELECTED_BG)return i.m100},p=a.default.nav`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),D=require("react"),y=require("styled-components"),G=require("../Icons/ChevronLeft.cjs"),L=require("../Icons/ChevronRight.cjs"),I=require("../Ripple/Ripple.cjs"),B=require("../../colors/colorMap.cjs"),P=require("../../colors/teal.cjs"),M=require("../../colors/grey.cjs"),q=require("../../colors/white.cjs"),O=require("../../colors/black.cjs"),o=require("./constants.cjs"),F=e=>e&&e.__esModule?e:{default:e},a=F(y),j=e=>({$shades:i})=>{if(["#FFFFFF"].includes(i))return O.black.m900;if(e===o.SELECTED_BG)return i.m600;if(e===o.NOT_SELECTED_BG)return i.m50;if(e===o.ACTIVE_NOT_SELECTED_BG)return i.m100},p=a.default.nav`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -55,7 +55,7 @@
   color: ${M.default.m700};
   font-size: 1.4rem;
   user-select: none;
-`,G=a.default.button`
+`,b=a.default.button`
   border: none;
   background: none;
   padding: 0;
@@ -69,13 +69,13 @@
   &:focus-visible {
     outline: 1px solid ${({$shades:e})=>e==null?void 0:e.m600};
   }
-`,z=a.default(L.default)`
+`,z=a.default(G.default)`
   cursor: pointer;
-`,g=a.default(b.default)`
+`,g=a.default(L.default)`
   cursor: pointer;
 `,w=a.default.div`
   min-width: ${({size:e})=>e};
   display: flex;
   align-items: center;
   justify-content: space-between;
-`,h=({size:e,selected:i,shades:n,changePage:C})=>t=>{const _=o.SIZE_REM_MAPPING[e],$=o.FONT_SIZE_MAPPING[e],f=n,s=i===t,l=()=>{C(t)},x=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),l())};return r.jsx(K,{"data-testid":s?"current-page":`test-${t}`,$isSelected:s,onClick:l,onKeyDown:x,tabIndex:s?0:-1,"aria-label":`Page ${t}`,"aria-current":s?"page":void 0,$shades:f,$individualRemSize:_,$fontRemSize:$,children:t},`page_${t}`)},T=()=>r.jsx(Z,{"aria-hidden":"true",children:"…"}),A=({iconSize:e,shades:i,setPrevPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Previous page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(z,{size:e,"aria-hidden":"true"})})}),k=({iconSize:e,shades:i,setNextPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Next page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(g,{size:e,"aria-hidden":"true"})})}),U=({pageNumber:e,setPageNumber:i,totalPages:n,theme:C="lime",size:t=o.MEDIUM,isDisabled:_=!1,...$})=>{var R;const f=D.useRef(null),s=D.useRef(!1);D.useEffect(()=>{var d,v;s.current&&(s.current=!1,(v=(d=f.current)==null?void 0:d.querySelector('[aria-current="page"]'))==null||v.focus())},[e]);const l=d=>{d!==e&&i(d)},x=()=>{e>1&&l(e-1)},u=()=>{e<n&&l(e+1)},S=d=>{["ArrowLeft","ArrowUp"].includes(d.code)&&(s.current=!0,x()),["ArrowRight","ArrowDown"].includes(d.code)&&(s.current=!0,u())},c=(R=B.default[C])!=null?R:P.default,m=o.SIZE_REM_MAPPING[t],E=o.ICON_SIZE_MAPPING[t];return n<=7?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsx(w,{size:`${n*m}rem`,children:Array.from({length:n},(d,v)=>v+1).map(h({size:t,selected:e,shades:c,changePage:l}))}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):n<10||e<4||e>n-3&&e<=n?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2,3,4].map(h({size:t,selected:e,shades:c,changePage:l})),T(),[n-3,n-2,n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2].map(h({size:t,selected:e,shades:c,changePage:l})),e>4&&T(),[e-1,e,e+1].map(h({size:t,selected:e,shades:c,changePage:l})),e<n-3&&T(),[n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]})};exports.default=U;
+`,h=({size:e,selected:i,shades:n,changePage:C})=>t=>{const _=o.SIZE_REM_MAPPING[e],$=o.FONT_SIZE_MAPPING[e],f=n,l=i===t,s=()=>{C(t)},x=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),s())};return r.jsx(K,{"data-testid":l?"current-page":`test-${t}`,$isSelected:l,onClick:s,onKeyDown:x,tabIndex:l?0:-1,"aria-label":`Page ${t}`,"aria-current":l?"page":void 0,$shades:f,$individualRemSize:_,$fontRemSize:$,children:t},`page_${t}`)},T=()=>r.jsx(Z,{"aria-hidden":"true",children:"…"}),A=({iconSize:e,shades:i,setPrevPage:n})=>r.jsx(b,{onClick:n,"aria-label":"Previous page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,borderRadius:"50%",children:r.jsx(z,{size:e,"aria-hidden":"true"})})}),R=({iconSize:e,shades:i,setNextPage:n})=>r.jsx(b,{onClick:n,"aria-label":"Next page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,borderRadius:"50%",children:r.jsx(g,{size:e,"aria-hidden":"true"})})}),U=({pageNumber:e,setPageNumber:i,totalPages:n,theme:C="lime",size:t=o.MEDIUM,isDisabled:_=!1,...$})=>{var k;const f=D.useRef(null),l=D.useRef(!1);D.useEffect(()=>{var d,v;l.current&&(l.current=!1,(v=(d=f.current)==null?void 0:d.querySelector('[aria-current="page"]'))==null||v.focus())},[e]);const s=d=>{d!==e&&i(d)},x=()=>{e>1&&s(e-1)},u=()=>{e<n&&s(e+1)},S=d=>{["ArrowLeft","ArrowUp"].includes(d.code)&&(l.current=!0,x()),["ArrowRight","ArrowDown"].includes(d.code)&&(l.current=!0,u())},c=(k=B.default[C])!=null?k:P.default,m=o.SIZE_REM_MAPPING[t],E=o.ICON_SIZE_MAPPING[t];return n<=7?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsx(w,{size:`${n*m}rem`,children:Array.from({length:n},(d,v)=>v+1).map(h({size:t,selected:e,shades:c,changePage:s}))}),r.jsx(R,{iconSize:E,shades:c,setNextPage:u})]}):n<10||e<4||e>n-3&&e<=n?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2,3,4].map(h({size:t,selected:e,shades:c,changePage:s})),T(),[n-3,n-2,n-1,n].map(h({size:t,selected:e,shades:c,changePage:s}))]}),r.jsx(R,{iconSize:E,shades:c,setNextPage:u})]}):r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2].map(h({size:t,selected:e,shades:c,changePage:s})),e>4&&T(),[e-1,e,e+1].map(h({size:t,selected:e,shades:c,changePage:s})),e<n-3&&T(),[n-1,n].map(h({size:t,selected:e,shades:c,changePage:s}))]}),r.jsx(R,{iconSize:E,shades:c,setNextPage:u})]})};exports.default=U;

package/cjs/components/Ripple/Ripple.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react/jsx-runtime"),c=require("react"),g=".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}",h=({children:a,rippleColor:p="rgba(255, 255, 255, 0.3)",className:u="",...d})=>{const i=c.useRef(null);c.useEffect(()=>{if(!document.getElementById("meticulous-ripple-styles")){const e=document.createElement("style");e.id="meticulous-ripple-styles",e.textContent=g,document.head.appendChild(e)}},[]);const l=(e,n)=>{const r=i.current;if(!r)return;const t=document.createElement("span"),s=r.getBoundingClientRect(),o=Math.max(s.width,s.height);t.style.width=t.style.height=`${o}px`,t.style.left=`${e-o/2}px`,t.style.top=`${n-o/2}px`,t.style.backgroundColor=p,t.classList.add("ripple-effect"),r.appendChild(t),t.addEventListener("animationend",()=>t.remove())},m=e=>{if(e.detail===0)return;const n=i.current.getBoundingClientRect();l(e.clientX-n.left,e.clientY-n.top)},f=e=>{if(e.key!=="Enter"&&e.key!==" ")return;const n=i.current.getBoundingClientRect();l(n.width/2,n.height/2)};return y.jsx("div",{ref:i,className:`ripple-container ${u}`,onClick:m,onKeyDown:f,...d,children:a})};exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),a=require("react"),h=".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}",R=({children:p,rippleColor:u="rgba(255, 255, 255, 0.3)",borderRadius:d,className:m="",...l})=>{const i=a.useRef(null);a.useEffect(()=>{if(!document.getElementById("meticulous-ripple-styles")){const e=document.createElement("style");e.id="meticulous-ripple-styles",e.textContent=h,document.head.appendChild(e)}},[]);const s=(e,n)=>{const r=i.current;if(!r)return;const t=document.createElement("span"),c=r.getBoundingClientRect(),o=Math.max(c.width,c.height);t.style.width=t.style.height=`${o}px`,t.style.left=`${e-o/2}px`,t.style.top=`${n-o/2}px`,t.style.backgroundColor=u,t.classList.add("ripple-effect"),r.appendChild(t),t.addEventListener("animationend",()=>t.remove())},f=e=>{if(e.detail===0)return;const n=i.current.getBoundingClientRect();s(e.clientX-n.left,e.clientY-n.top)},y=e=>{if(e.key!=="Enter"&&e.key!==" ")return;const n=i.current.getBoundingClientRect();s(n.width/2,n.height/2)};return g.jsx("div",{ref:i,className:`ripple-container ${m}`,onClick:f,onKeyDown:y,...l,style:{borderRadius:d,...l.style},children:p})};exports.default=R;

package/cjs/components/Toast/Toast.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("react"),G=require("react-dom"),A=require("prop-types"),l=require("styled-components"),S=require("../Icons/Close.cjs"),F=require("../Icons/Check.cjs"),X=require("../Icons/Info.cjs"),D=require("../Icons/WarningTriangleFilled.cjs"),z=require("../../colors/white.cjs"),$=require("../../colors/grey.cjs"),s=require("./constants.cjs"),E=e=>e&&e.__esModule?e:{default:e},a=E(A),i=E(l),q=()=>{},U=l.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("react"),G=require("react-dom"),A=require("prop-types"),l=require("styled-components"),S=require("../Icons/Close.cjs"),F=require("../Icons/Check.cjs"),X=require("../Icons/Info.cjs"),D=require("../Icons/WarningTriangleFilled.cjs"),z=require("../../colors/white.cjs"),$=require("../../colors/grey.cjs"),i=require("./constants.cjs"),E=e=>e&&e.__esModule?e:{default:e},a=E(A),n=E(l),q=()=>{},U=l.keyframes`
   from { transform: scale(0); }
   to   { transform: scale(1); }
 `,B=l.keyframes`
@@ -22,7 +22,7 @@
     opacity: 0;
     transform: translateX(100%); /* Move off-screen to the right */
   }
-`,K=i.default.div`
+`,K=n.default.div`
   position: fixed;
   top: 1.6rem;
   right: 1.6rem;
@@ -31,7 +31,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-`,Q=i.default.div`
+`,Q=n.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -73,7 +73,7 @@
     border-radius: 0.8rem;
     padding: 0.4rem 1rem;
   }
-`,V=i.default.div`
+`,V=n.default.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -97,7 +97,7 @@
     width: 1.76rem;
     height: 1.76rem;
   }
-`,Y=i.default.div`
+`,Y=n.default.div`
   position: relative;
   width: 6.4rem;
   height: 6.4rem;
@@ -119,7 +119,7 @@
     width: 3.9rem;
     height: 3.9rem;
   }
-`,Z=i.default.div`
+`,Z=n.default.div`
   position: absolute;
   top: ${({$isWarning:e})=>e?"49%":"50%"};
   left: 50%;
@@ -139,7 +139,7 @@
     );
     scale: 0.75;
   }
-`,ee=i.default.div`
+`,ee=n.default.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -167,7 +167,7 @@
 `,R=75.4,te=l.keyframes`
   from { stroke-dashoffset: ${R}; }
   to   { stroke-dashoffset: 0; }
-`,re=i.default.div`
+`,re=n.default.div`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -175,7 +175,8 @@
   flex-shrink: 0;
   width: 2.8rem;
   height: 2.8rem;
-`,ae=i.default.svg`
+  cursor: pointer;
+`,ae=n.default.svg`
   position: absolute;
   inset: 0;
   transform: ${({$hasClockwiseRotation:e})=>e?"rotate(-90deg)":"rotate(90deg) scaleX(-1)"};
@@ -199,9 +200,7 @@
     animation: ${te} ${({$duration:e})=>e-.5}s linear forwards;
     animation-play-state: ${({$paused:e})=>e?"paused":"running"};
   }
-`,se=i.default(S.default)`
-  cursor: pointer;
-`,ie=i.default.div`
+`,ie=n.default.div`
   font-weight: 600;
   font-size: 1.92rem;
   color: ${$.default.m800};
@@ -213,7 +212,7 @@
   @media screen and (max-width: 380px) {
     font-size: 1.56rem;
   }
-`,ne=i.default.div`
+`,se=n.default.div`
   display: flex;
   flex-direction: column;
   gap: 0.32rem;
@@ -231,7 +230,7 @@
     max-width: 18rem;
     width: auto;
   }
-`,oe=i.default.div`
+`,ne=n.default.div`
   font-weight: 400;
   font-size: 1.6rem;
   color: ${$.default.m700};
@@ -243,4 +242,4 @@
   @media screen and (max-width: 380px) {
     font-size: 1.32rem;
   }
-`,de=(e,r)=>e===s.ERROR?t.jsx(S.default,{size:16,color:r}):e===s.SUCCESS?t.jsx(F.default,{size:18,color:r}):e===s.WARNING?t.jsx(D.default,{size:28,color:z.default}):t.jsx(X.default,{size:22,color:r}),ce=e=>e===s.ERROR?1.6:e===s.SUCCESS?1.76:e===s.WARNING?2.8:2.08,le=({type:e,$main:r,$side:o})=>{const d=de(e,r),c=e===s.WARNING;return t.jsxs(Y,{"aria-hidden":"true",$side:o,children:[t.jsx(ee,{$main:r}),!c&&t.jsx(V,{$main:r,type:e}),t.jsx(Z,{size:ce(e),$isWarning:c,children:d})]})},I=({toasts:e,...r})=>{const[o,d]=n.useState(e);n.useEffect(()=>{d(e)},[e]);const c=({type:f,id:u,title:h,subtitle:x,duration:m,onExpire:p=q},g)=>n.createElement(y,{type:f,title:h,subtitle:x,duration:m,key:u,onExpire:p});return G.createPortal(t.jsx(K,{...r,children:[...o].reverse().map(c)}),document.body)};I.propTypes={toasts:a.default.arrayOf(a.default.shape({id:a.default.any,type:a.default.string,title:a.default.string,subtitle:a.default.string,duration:a.default.number,onExpire:a.default.func}))};const O=(e,r,o)=>()=>{e(!0),setTimeout(()=>{r(!1),o()},500)},y=({type:e=s.INFO,visible:r=!0,duration:o=5,onExpire:d=q,hasClockwiseRotation:c=!1,title:f,subtitle:u,...h})=>{var T;const[x,m]=n.useState(r),[p,g]=n.useState(!1),[M,j]=n.useState(!1),w=n.useRef(null),b=n.useRef((o-.5)*1e3),v=n.useRef(null),C=W=>{v.current=Date.now(),w.current=setTimeout(O(g,m,d),W)};n.useEffect(()=>{m(r)},[r]),n.useEffect(()=>(C(b.current),()=>clearTimeout(w.current)),[]);const _=()=>{clearTimeout(w.current),b.current-=Date.now()-v.current,j(!0)},N=()=>{j(!1),C(b.current)},{main:k,side:L,bg:P}=(T=s.COLOR_MAP[e])!=null?T:s.INFO_COLORS;if(x)return t.jsxs(Q,{$bg:P,role:e===s.ERROR?"alert":"status","aria-live":e===s.ERROR?"assertive":"polite","aria-atomic":"true",className:`${p?"fade-out":"fade-in"}`,onMouseEnter:_,onMouseLeave:N,...h,children:[t.jsx(le,{type:e,$main:k,$side:L}),t.jsxs(ne,{children:[t.jsx(ie,{children:f}),u&&t.jsx(oe,{children:u})]}),t.jsxs(re,{children:[t.jsxs(ae,{"aria-hidden":"true",viewBox:"0 0 28 28",$duration:o,$color:k,$paused:M,$hasClockwiseRotation:c,children:[t.jsx("circle",{cx:"14",cy:"14",r:"12"}),t.jsx("circle",{cx:"14",cy:"14",r:"12"})]}),t.jsx(se,{"aria-label":"Close notification",size:13,color:$.default.m600,onClick:O(g,m,d)})]})]})};y.propTypes={type:a.default.string,visible:a.default.bool,duration:a.default.number,onExpire:a.default.func,hasClockwiseRotation:a.default.bool,title:a.default.string,subtitle:a.default.string};exports.ToastContainer=I;exports.default=y;
+`,oe=(e,r)=>e===i.ERROR?t.jsx(S.default,{size:16,color:r}):e===i.SUCCESS?t.jsx(F.default,{size:18,color:r}):e===i.WARNING?t.jsx(D.default,{size:28,color:z.default}):t.jsx(X.default,{size:22,color:r}),de=e=>e===i.ERROR?1.6:e===i.SUCCESS?1.76:e===i.WARNING?2.8:2.08,ce=({type:e,$main:r,$side:o})=>{const d=oe(e,r),c=e===i.WARNING;return t.jsxs(Y,{"aria-hidden":"true",$side:o,children:[t.jsx(ee,{$main:r}),!c&&t.jsx(V,{$main:r,type:e}),t.jsx(Z,{size:de(e),$isWarning:c,children:d})]})},I=({toasts:e,...r})=>{const[o,d]=s.useState(e);s.useEffect(()=>{d(e)},[e]);const c=({type:f,id:u,title:h,subtitle:x,duration:m,onExpire:g=q},p)=>s.createElement(y,{type:f,title:h,subtitle:x,duration:m,key:u,onExpire:g});return G.createPortal(t.jsx(K,{...r,children:[...o].reverse().map(c)}),document.body)};I.propTypes={toasts:a.default.arrayOf(a.default.shape({id:a.default.any,type:a.default.string,title:a.default.string,subtitle:a.default.string,duration:a.default.number,onExpire:a.default.func}))};const O=(e,r,o)=>()=>{e(!0),setTimeout(()=>{r(!1),o()},500)},y=({type:e=i.INFO,visible:r=!0,duration:o=5,onExpire:d=q,hasClockwiseRotation:c=!1,title:f,subtitle:u,...h})=>{var T;const[x,m]=s.useState(r),[g,p]=s.useState(!1),[M,j]=s.useState(!1),w=s.useRef(null),b=s.useRef((o-.5)*1e3),v=s.useRef(null),k=W=>{v.current=Date.now(),w.current=setTimeout(O(p,m,d),W)};s.useEffect(()=>{m(r)},[r]),s.useEffect(()=>(k(b.current),()=>clearTimeout(w.current)),[]);const _=()=>{clearTimeout(w.current),b.current-=Date.now()-v.current,j(!0)},N=()=>{j(!1),k(b.current)},{main:C,side:L,bg:P}=(T=i.COLOR_MAP[e])!=null?T:i.INFO_COLORS;if(x)return t.jsxs(Q,{$bg:P,role:e===i.ERROR?"alert":"status","aria-live":e===i.ERROR?"assertive":"polite","aria-atomic":"true",className:`${g?"fade-out":"fade-in"}`,onMouseEnter:_,onMouseLeave:N,...h,children:[t.jsx(ce,{type:e,$main:C,$side:L}),t.jsxs(se,{children:[t.jsx(ie,{children:f}),u&&t.jsx(ne,{children:u})]}),t.jsxs(re,{onClick:O(p,m,d),children:[t.jsxs(ae,{"aria-hidden":"true",viewBox:"0 0 28 28",$duration:o,$color:C,$paused:M,$hasClockwiseRotation:c,children:[t.jsx("circle",{cx:"14",cy:"14",r:"12"}),t.jsx("circle",{cx:"14",cy:"14",r:"12"})]}),t.jsx(S.default,{"aria-label":"Close notification",size:13,color:$.default.m600})]})]})};y.propTypes={type:a.default.string,visible:a.default.bool,duration:a.default.number,onExpire:a.default.func,hasClockwiseRotation:a.default.bool,title:a.default.string,subtitle:a.default.string};exports.ToastContainer=I;exports.default=y;

package/components/Button/Button.js

@@ -1,15 +1,15 @@
 import { jsxs as z, jsx as i } from "react/jsx-runtime";
 import { useRef as D } from "react";
-import R from "../Spinner/Spinner.js";
-import j from "../../colors/colorMap.js";
+import j from "../Spinner/Spinner.js";
+import B from "../../colors/colorMap.js";
 import { blue as w } from "../../colors/blue.js";
-import B from "../Ripple/Ripple.js";
-import E from "../../colors/white.js";
+import E from "../Ripple/Ripple.js";
+import P from "../../colors/white.js";
 import y from "../../colors/grey.js";
-import { MEDIUM as P, SIZE as S } from "./constants.js";
+import { MEDIUM as S, SIZE as K } from "./constants.js";
 import t from "prop-types";
 import l, { css as a } from "styled-components";
-const K = l.button`
+const M = l.button`
   height: ${({ $height: o }) => o}rem;
   width: ${({ $width: o }) => o}rem;
   border-radius: 0.96rem;
@@ -37,7 +37,7 @@ const K = l.button`
   &:focus-visible {
     outline: none;
   }
-`, M = l.div`
+`, W = l.div`
   font-size: ${({ $font: o }) => o}rem;
   font-weight: 500;
   max-width: 100%;
@@ -45,7 +45,7 @@ const K = l.button`
   color: ${({ $textColor: o }) => o};
   opacity: ${({ $isLoading: o }) => o ? 0 : 1};
   transition: opacity 0.3s ease;
-`, W = l.div`
+`, O = l.div`
   height: ${({ $height: o }) => o}rem;
   width: ${({ $width: o }) => o}rem;
   display: inline-block;
@@ -64,7 +64,7 @@ const K = l.button`
         transform: translateY(-2px);
       }
     `};
-`, O = l.div`
+`, U = l.div`
   position: absolute;
   inset: 0;
   display: flex;
@@ -73,20 +73,21 @@ const K = l.button`
   opacity: ${({ $isLoading: o }) => o ? 1 : 0};
   transition: opacity 0.3s ease;
   pointer-events: none;
-`, U = ({ theme: o, children: e }) => /* @__PURE__ */ i(B, { rippleColor: o.m100, children: e }), Y = (o) => {
+`, Y = ({ theme: o, children: e }) => /* @__PURE__ */ i(E, { rippleColor: o.m100, borderRadius: "0.96rem", children: e }), Z = (o) => {
   var b;
   const {
     children: e,
     theme: r = w,
-    size: v = P,
+    size: v = S,
     width: c,
-    leftIcon: Z,
-    rightIcon: q,
+    leftIcon: q,
+    rightIcon: A,
     isLoading: n,
     textColor: m,
     onKeyDown: d,
-    ...C
-  } = o || {}, p = D(0), x = (s) => {
+    style: C,
+    ...x
+  } = o || {}, p = D(0), k = (s) => {
     if (s.key === "Enter" || s.key === " ") {
       const g = Date.now();
       if (g - p.current < 500) {
@@ -96,37 +97,38 @@ const K = l.button`
       p.current = g;
     }
     d == null || d(s);
-  }, { m400: k, m500: I, m600: L } = (b = j[r]) != null ? b : w, { height: h, width: f, font: T } = S[v] || {}, $ = ["white", "yellow"].includes(r) ? y.m600 : E, u = /* @__PURE__ */ z(
-    K,
+  }, { m400: I, m500: L, m600: R } = (b = B[r]) != null ? b : w, { height: h, width: f, font: T } = K[v] || {}, u = ["white", "yellow"].includes(r) ? y.m600 : P, $ = /* @__PURE__ */ z(
+    M,
     {
       type: "button",
-      ...C,
-      onKeyDown: x,
-      $hoverColor: I,
-      $activeColor: L,
-      $selectedColor: k,
+      ...x,
+      onKeyDown: k,
+      $hoverColor: L,
+      $activeColor: R,
+      $selectedColor: I,
       $height: h,
       $width: c || f,
       disabled: o.disabled,
       $isLoading: n,
       children: [
-        /* @__PURE__ */ i(O, { $isLoading: n, children: /* @__PURE__ */ i(R, { size: "small", color: m || $ }) }),
-        /* @__PURE__ */ i(M, { $isLoading: n, $textColor: m || $, $font: T, children: e })
+        /* @__PURE__ */ i(U, { $isLoading: n, children: /* @__PURE__ */ i(j, { size: "small", color: m || u }) }),
+        /* @__PURE__ */ i(W, { $isLoading: n, $textColor: m || u, $font: T, children: e })
       ]
     }
   );
   return /* @__PURE__ */ i(
-    W,
+    O,
     {
+      style: C,
       $height: h,
       $width: c || f,
       disabled: o.disabled,
       $isLoading: n,
-      children: n ? u : /* @__PURE__ */ i(U, { theme: r, children: u })
+      children: n ? $ : /* @__PURE__ */ i(Y, { theme: r, children: $ })
     }
   );
 };
-Y.propTypes = {
+Z.propTypes = {
   /** Button label or content */
   children: t.node,
   /** Color theme key from the meticulous-ui color map. Defaults to `'blue'` */
@@ -147,5 +149,5 @@ Y.propTypes = {
   disabled: t.bool
 };
 export {
-  Y as default
+  Z as default
 };

package/components/Input/FileUploader/FileUploader.js

@@ -98,7 +98,7 @@ const Z = l.div`
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
-`, Q = ({ theme: e, children: o }) => /* @__PURE__ */ t(H, { rippleColor: e.m100, children: o }), V = ({
+`, Q = ({ theme: e, children: o }) => /* @__PURE__ */ t(H, { rippleColor: e.m100, borderRadius: "0.96rem", children: o }), V = ({
   label: e,
   labelColor: o,
   theme: i = C,

package/components/Pagination/Pagination.js

@@ -9,13 +9,13 @@ import U from "../../colors/teal.js";
 import j from "../../colors/grey.js";
 import L from "../../colors/white.js";
 import { black as q } from "../../colors/black.js";
-import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as g, SIZE_REM_MAPPING as G, SELECTED_BG as I, NOT_SELECTED_BG as T, ACTIVE_NOT_SELECTED_BG as K } from "./constants.js";
+import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as g, SIZE_REM_MAPPING as G, SELECTED_BG as I, NOT_SELECTED_BG as b, ACTIVE_NOT_SELECTED_BG as K } from "./constants.js";
 const v = (e) => ({ $shades: i }) => {
   if (["#FFFFFF"].includes(i))
     return q.m900;
   if (e === I)
     return i.m600;
-  if (e === T)
+  if (e === b)
     return i.m50;
   if (e === K)
     return i.m100;
@@ -60,7 +60,7 @@ const v = (e) => ({ $shades: i }) => {
           background-color: transparent;
 
           &:hover {
-            background-color: ${v(T)};
+            background-color: ${v(b)};
           }
 
           &:active {
@@ -69,7 +69,7 @@ const v = (e) => ({ $shades: i }) => {
           }
 
           &:focus-visible {
-            outline: 1px solid ${v(T)};
+            outline: 1px solid ${v(b)};
           }
         `}
 `, Q = f.span`
@@ -122,7 +122,7 @@ const v = (e) => ({ $shades: i }) => {
     },
     `page_${n}`
   );
-}, D = () => /* @__PURE__ */ o(Q, { "aria-hidden": "true", children: "…" }), S = ({ iconSize: e, shades: i, setPrevPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Previous page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, children: /* @__PURE__ */ o(W, { size: e, "aria-hidden": "true" }) }) }), _ = ({ iconSize: e, shades: i, setNextPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Next page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, children: /* @__PURE__ */ o(X, { size: e, "aria-hidden": "true" }) }) }), fe = ({
+}, D = () => /* @__PURE__ */ o(Q, { "aria-hidden": "true", children: "…" }), S = ({ iconSize: e, shades: i, setPrevPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Previous page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, borderRadius: "50%", children: /* @__PURE__ */ o(W, { size: e, "aria-hidden": "true" }) }) }), _ = ({ iconSize: e, shades: i, setNextPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Next page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, borderRadius: "50%", children: /* @__PURE__ */ o(X, { size: e, "aria-hidden": "true" }) }) }), fe = ({
   pageNumber: e,
   setPageNumber: i,
   totalPages: r,
@@ -131,7 +131,7 @@ const v = (e) => ({ $shades: i }) => {
   isDisabled: p = !1,
   ...y
 }) => {
-  var b;
+  var T;
   const a = F(null), l = F(!1);
   B(() => {
     var s, w;
@@ -145,7 +145,7 @@ const v = (e) => ({ $shades: i }) => {
     e < r && c(e + 1);
   }, E = (s) => {
     ["ArrowLeft", "ArrowUp"].includes(s.code) && (l.current = !0, u()), ["ArrowRight", "ArrowDown"].includes(s.code) && (l.current = !0, d());
-  }, t = (b = Z[x]) != null ? b : U, C = G[n], m = H[n];
+  }, t = (T = Z[x]) != null ? T : U, C = G[n], m = H[n];
   return r <= 7 ? /* @__PURE__ */ $(
     k,
     {

package/components/Ripple/Ripple.js

@@ -1,44 +1,46 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as y, useEffect as h } from "react";
-const g = ".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}", x = ({
-  children: c,
+import { jsx as y } from "react/jsx-runtime";
+import { useRef as h, useEffect as g } from "react";
+const C = ".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}", E = ({
+  children: a,
   rippleColor: p = "rgba(255, 255, 255, 0.3)",
-  className: a = "",
-  ...d
+  borderRadius: d,
+  className: u = "",
+  ...l
 }) => {
-  const i = y(null);
-  h(() => {
+  const i = h(null);
+  g(() => {
     if (!document.getElementById("meticulous-ripple-styles")) {
       const e = document.createElement("style");
-      e.id = "meticulous-ripple-styles", e.textContent = g, document.head.appendChild(e);
+      e.id = "meticulous-ripple-styles", e.textContent = C, document.head.appendChild(e);
     }
   }, []);
-  const l = (e, n) => {
+  const s = (e, n) => {
     const o = i.current;
     if (!o) return;
-    const t = document.createElement("span"), s = o.getBoundingClientRect(), r = Math.max(s.width, s.height);
+    const t = document.createElement("span"), c = o.getBoundingClientRect(), r = Math.max(c.width, c.height);
     t.style.width = t.style.height = `${r}px`, t.style.left = `${e - r / 2}px`, t.style.top = `${n - r / 2}px`, t.style.backgroundColor = p, t.classList.add("ripple-effect"), o.appendChild(t), t.addEventListener("animationend", () => t.remove());
-  }, u = (e) => {
+  }, m = (e) => {
     if (e.detail === 0) return;
     const n = i.current.getBoundingClientRect();
-    l(e.clientX - n.left, e.clientY - n.top);
-  }, m = (e) => {
+    s(e.clientX - n.left, e.clientY - n.top);
+  }, f = (e) => {
     if (e.key !== "Enter" && e.key !== " ") return;
     const n = i.current.getBoundingClientRect();
-    l(n.width / 2, n.height / 2);
+    s(n.width / 2, n.height / 2);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: i,
-      className: `ripple-container ${a}`,
-      onClick: u,
-      onKeyDown: m,
-      ...d,
-      children: c
+      className: `ripple-container ${u}`,
+      onClick: m,
+      onKeyDown: f,
+      ...l,
+      style: { borderRadius: d, ...l.style },
+      children: a
     }
   );
 };
 export {
-  x as default
+  E as default
 };

package/components/Toast/Toast.js

@@ -188,6 +188,7 @@ const P = () => {
   flex-shrink: 0;
   width: 2.8rem;
   height: 2.8rem;
+  cursor: pointer;
 `, me = o.svg`
   position: absolute;
   inset: 0;
@@ -212,9 +213,7 @@ const P = () => {
     animation: ${se} ${({ $duration: e }) => e - 0.5}s linear forwards;
     animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
   }
-`, ce = o(S)`
-  cursor: pointer;
-`, le = o.div`
+`, ce = o.div`
   font-weight: 600;
   font-size: 1.92rem;
   color: ${k.m800};
@@ -226,7 +225,7 @@ const P = () => {
   @media screen and (max-width: 380px) {
     font-size: 1.56rem;
   }
-`, he = o.div`
+`, le = o.div`
   display: flex;
   flex-direction: column;
   gap: 0.32rem;
@@ -244,7 +243,7 @@ const P = () => {
     max-width: 18rem;
     width: auto;
   }
-`, fe = o.div`
+`, he = o.div`
   font-weight: 400;
   font-size: 1.6rem;
   color: ${k.m700};
@@ -256,25 +255,25 @@ const P = () => {
   @media screen and (max-width: 380px) {
     font-size: 1.32rem;
   }
-`, ue = (e, r) => e === f ? /* @__PURE__ */ i(S, { size: 16, color: r }) : e === N ? /* @__PURE__ */ i(U, { size: 18, color: r }) : e === R ? /* @__PURE__ */ i(H, { size: 28, color: L }) : /* @__PURE__ */ i(q, { size: 22, color: r }), pe = (e) => e === f ? 1.6 : e === N ? 1.76 : e === R ? 2.8 : 2.08, ge = ({ type: e, $main: r, $side: n }) => {
-  const a = ue(e, r), s = e === R;
+`, fe = (e, r) => e === f ? /* @__PURE__ */ i(S, { size: 16, color: r }) : e === N ? /* @__PURE__ */ i(U, { size: 18, color: r }) : e === R ? /* @__PURE__ */ i(H, { size: 28, color: L }) : /* @__PURE__ */ i(q, { size: 22, color: r }), ue = (e) => e === f ? 1.6 : e === N ? 1.76 : e === R ? 2.8 : 2.08, pe = ({ type: e, $main: r, $side: n }) => {
+  const a = fe(e, r), s = e === R;
   return /* @__PURE__ */ m(oe, { "aria-hidden": "true", $side: n, children: [
     /* @__PURE__ */ i(ae, { $main: r }),
     !s && /* @__PURE__ */ i(ie, { $main: r, type: e }),
-    /* @__PURE__ */ i(ne, { size: pe(e), $isWarning: s, children: a })
+    /* @__PURE__ */ i(ne, { size: ue(e), $isWarning: s, children: a })
   ] });
-}, we = ({ toasts: e, ...r }) => {
+}, ge = ({ toasts: e, ...r }) => {
   const [n, a] = h(e);
   y(() => {
     a(e);
   }, [e]);
-  const s = ({ type: u, id: l, title: p, subtitle: g, duration: d, onExpire: w = P }, x) => /* @__PURE__ */ B(W, { type: u, title: p, subtitle: g, duration: d, key: l, onExpire: w });
+  const s = ({ type: u, id: l, title: p, subtitle: g, duration: d, onExpire: w = P }, x) => /* @__PURE__ */ B(j, { type: u, title: p, subtitle: g, duration: d, key: l, onExpire: w });
   return D(
     /* @__PURE__ */ i(re, { ...r, children: [...n].reverse().map(s) }),
     document.body
   );
 };
-we.propTypes = {
+ge.propTypes = {
   /** Array of toast config objects, each with `{ id, type, title, subtitle, duration, onExpire }` */
   toasts: t.arrayOf(
     t.shape({
@@ -291,7 +290,7 @@ const M = (e, r, n) => () => {
   e(!0), setTimeout(() => {
     r(!1), n();
   }, 500);
-}, W = ({
+}, j = ({
   type: e = K,
   visible: r = !0,
   duration: n = 5,
@@ -302,13 +301,13 @@ const M = (e, r, n) => () => {
   ...p
 }) => {
   var I;
-  const [g, d] = h(r), [w, x] = h(!1), [j, T] = h(!1), b = v(null), $ = v((n - 0.5) * 1e3), z = v(null), O = (_) => {
+  const [g, d] = h(r), [w, x] = h(!1), [F, T] = h(!1), b = v(null), $ = v((n - 0.5) * 1e3), z = v(null), O = (_) => {
     z.current = Date.now(), b.current = setTimeout(M(x, d, a), _);
   };
   y(() => {
     d(r);
   }, [r]), y(() => (O($.current), () => clearTimeout(b.current)), []);
-  const F = () => {
+  const W = () => {
     clearTimeout(b.current), $.current -= Date.now() - z.current, T(!0);
   }, X = () => {
     T(!1), O($.current);
@@ -322,16 +321,16 @@ const M = (e, r, n) => () => {
         "aria-live": e === f ? "assertive" : "polite",
         "aria-atomic": "true",
         className: `${w ? "fade-out" : "fade-in"}`,
-        onMouseEnter: F,
+        onMouseEnter: W,
         onMouseLeave: X,
         ...p,
         children: [
-          /* @__PURE__ */ i(ge, { type: e, $main: E, $side: G }),
-          /* @__PURE__ */ m(he, { children: [
-            /* @__PURE__ */ i(le, { children: u }),
-            l && /* @__PURE__ */ i(fe, { children: l })
+          /* @__PURE__ */ i(pe, { type: e, $main: E, $side: G }),
+          /* @__PURE__ */ m(le, { children: [
+            /* @__PURE__ */ i(ce, { children: u }),
+            l && /* @__PURE__ */ i(he, { children: l })
           ] }),
-          /* @__PURE__ */ m(de, { children: [
+          /* @__PURE__ */ m(de, { onClick: M(x, d, a), children: [
             /* @__PURE__ */ m(
               me,
               {
@@ -339,7 +338,7 @@ const M = (e, r, n) => () => {
                 viewBox: "0 0 28 28",
                 $duration: n,
                 $color: E,
-                $paused: j,
+                $paused: F,
                 $hasClockwiseRotation: s,
                 children: [
                   /* @__PURE__ */ i("circle", { cx: "14", cy: "14", r: "12" }),
@@ -347,21 +346,13 @@ const M = (e, r, n) => () => {
                 ]
               }
             ),
-            /* @__PURE__ */ i(
-              ce,
-              {
-                "aria-label": "Close notification",
-                size: 13,
-                color: k.m600,
-                onClick: M(x, d, a)
-              }
-            )
+            /* @__PURE__ */ i(S, { "aria-label": "Close notification", size: 13, color: k.m600 })
           ] })
         ]
       }
     );
 };
-W.propTypes = {
+j.propTypes = {
   /** Notification variant: `'info'`, `'success'`, `'warning'`, or `'error'`. Defaults to `'info'` */
   type: t.string,
   /** Controls initial visibility. Defaults to `true` */
@@ -378,6 +369,6 @@ W.propTypes = {
   subtitle: t.string
 };
 export {
-  we as ToastContainer,
-  W as default
+  ge as ToastContainer,
+  j as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.11.3",
+  "version": "3.11.5",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",