meticulous-ui 3.7.0 → 3.7.2

package/cjs/components/Glass/Glass.cjs

@@ -1 +1,69 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("./styles.cjs"),u=({border:e="none",borderRadius:s=0,...r})=>t.jsx(o.GlassWrapper,{$border:e,$borderRadius:s,...r});exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),o=require("styled-components"),i=r=>r&&r.__esModule?r:{default:r},n=i(o),s=n.default.div`
+  width: 100%;
+  height: 100%;
+  border-radius: ${({$borderRadius:r})=>r};
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  background:
+    radial-gradient(
+      60rem 22rem at 50% 45%,
+      rgba(20, 40, 20, 0.06),
+      rgba(10, 25, 10, 0.02) 50%,
+      transparent 70%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.18) 0%,
+      rgba(255, 255, 255, 0.06) 40%,
+      rgba(255, 255, 255, 0.03) 100%
+    );
+
+  box-shadow:
+    0 3rem 6rem rgba(7, 22, 10, 0.3),
+    0 2px 0 rgba(255, 255, 255, 0.03) inset;
+
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: rgba(8, 34, 16, 0.95);
+
+  ::before {
+    content: '';
+    position: absolute;
+    left: -12%;
+    top: -24%;
+    width: 62%;
+    height: 62%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.24),
+      rgba(255, 255, 255, 0.06) 40%,
+      transparent 60%
+    );
+    filter: blur(4.6rem);
+    opacity: 0.85;
+    pointer-events: none;
+    transform: translateZ(0);
+  }
+
+  ::after {
+    content: '';
+    position: absolute;
+    right: -6%;
+    bottom: -18%;
+    width: 68%;
+    height: 68%;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle at 30% 40%,
+      rgba(255, 255, 255, 0.08),
+      rgba(255, 255, 255, 0.01) 40%,
+      transparent 70%
+    );
+    filter: blur(5.4rem);
+    opacity: 0.45;
+    pointer-events: none;
+    transform: translateZ(0);
+  }
+`,d=({border:r="none",borderRadius:e=0,...t})=>a.jsx(s,{$border:r,$borderRadius:e,...t});exports.default=d;

package/cjs/components/Image/Image.cjs

@@ -1 +1,37 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),a=require("react"),p=require("../Shimmer/Shimmer.cjs"),s=require("./styles.cjs"),t=e=>{if(e!=null)return typeof e=="number"?`${e}rem`:e},q=({src:e,alt:u="",width:m="100%",height:h="100%",borderRadius:o="0.4rem",loadLow:i=!1,lowSrc:c,...$})=>{const[l,f]=a.useState(!1),[d,L]=a.useState(!1),[n,g]=a.useState(!1),j=()=>f(!0),S=()=>L(!0),x=()=>g(!0),y=i?l:d;return r.jsxs(s.ImageWrapper,{$width:t(m),$height:t(h),$borderRadius:t(o),children:[!n&&r.jsx(s.ShimmerOverlay,{$loaded:y,children:r.jsx(p.default,{borderRadius:o})}),i&&c&&!n&&r.jsx(s.LowResImage,{src:c,alt:"","aria-hidden":"true",$lowLoaded:l,$loaded:d,$borderRadius:t(o),onLoad:j}),!n&&r.jsx(s.StyledImage,{src:e,alt:u,"aria-hidden":u===""?"true":void 0,$loaded:d,$borderRadius:t(o),onLoad:S,onError:x,...$})]})};exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react"),L=require("../Shimmer/Shimmer.cjs"),v=require("styled-components"),w=e=>e&&e.__esModule?e:{default:e},r=w(v),S=r.default.span`
+  position: relative;
+  display: inline-block;
+  width: ${({$width:e})=>e};
+  height: ${({$height:e})=>e};
+  border-radius: ${({$borderRadius:e})=>e};
+  overflow: hidden;
+`,_=r.default.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: ${({$borderRadius:e})=>e};
+  opacity: ${({$loaded:e})=>e?1:0};
+  transition: opacity 0.5s ease-in-out;
+`,q=r.default.div`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  opacity: ${({$loaded:e})=>e?0:1};
+  transition: opacity 0.35s ease-out;
+  pointer-events: none;
+`,I=r.default.img`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.05);
+  filter: ${({$loaded:e})=>e?"blur(0px)":"blur(12px)"};
+  opacity: ${({$lowLoaded:e,$loaded:i})=>e&&!i?1:0};
+  transition:
+    opacity 0.5s ease-in-out,
+    filter 0.5s ease-in-out;
+`,o=e=>{if(e!=null)return typeof e=="number"?`${e}rem`:e},k=({src:e,alt:i="",width:f="100%",height:p="100%",borderRadius:s="0.4rem",loadLow:u=!1,lowSrc:l,...h})=>{const[c,m]=d.useState(!1),[n,$]=d.useState(!1),[a,y]=d.useState(!1),b=()=>m(!0),g=()=>$(!0),x=()=>y(!0),j=u?c:n;return t.jsxs(S,{$width:o(f),$height:o(p),$borderRadius:o(s),children:[!a&&t.jsx(q,{$loaded:j,children:t.jsx(L.default,{borderRadius:s})}),u&&l&&!a&&t.jsx(I,{src:l,alt:"","aria-hidden":"true",$lowLoaded:c,$loaded:n,$borderRadius:o(s),onLoad:b}),!a&&t.jsx(_,{src:e,alt:i,"aria-hidden":i===""?"true":void 0,$loaded:n,$borderRadius:o(s),onLoad:g,onError:x,...h})]})};exports.default=k;

package/cjs/components/Input/Checkbox/Checkbox.cjs

@@ -1 +1,42 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),h=require("react"),w=require("prop-types"),$=require("../../../colors/grey.cjs"),C=require("../../Typography/P/P.cjs"),T=require("../../../colors/white.cjs"),p=require("../../../colors/blue.cjs"),a=require("./styles.cjs"),v=require("./helpers.cjs"),H=r=>r&&r.__esModule?r:{default:r},t=H(w),b=({label:r,value:o,color:y="blue",textColor:g=$.default.m700,disabled:l,onChange:s,tabIndex:S,innerShade:x,outerShade:k,...m})=>{const[q,u]=h.useState(!1),c=v.getColor(y),_=x??c?.m500??p.blue.m500,j=k??c?.m600??p.blue.m600,d=h.useRef(0),D=e=>s(e.target.checked),P=e=>{if(e.key==="Enter"||e.key===" "){const f=Date.now();if(f-d.current<500){e.preventDefault(),e.stopPropagation();return}if(d.current=f,e.key===" "){e.preventDefault(),s(!o);return}s(!o),u(!1)}e.key==="Escape"&&u(!1)},i=e=>()=>u(e);return n.jsxs(a.Wrapper,{as:"label",$disabled:l,...m,children:[n.jsx(a.CbInput,{type:"checkbox",checked:o,onChange:D,onKeyDown:P,onFocus:i(!0),onBlur:i(!1),disabled:l,tabIndex:S}),n.jsx(a.Box,{$value:o,$focused:q,size:6,color:T.default,$innerShade:_,$outerShade:j,"aria-hidden":"true"}),n.jsx(C.default,{color:g,size:"1.92rem",children:r})]})};b.propTypes={label:t.default.string,value:t.default.bool,color:t.default.string,textColor:t.default.string,disabled:t.default.bool,onChange:t.default.func,tabIndex:t.default.number,innerShade:t.default.string,outerShade:t.default.string};exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),h=require("react"),C=require("prop-types"),u=require("../../../colors/grey.cjs"),H=require("../../Typography/P/P.cjs"),M=require("../../../colors/white.cjs"),s=require("../../../colors/blue.cjs"),R=require("../../../colors/green.cjs"),T=require("../../../colors/red.cjs"),z=require("../../../colors/yellow.cjs"),E=require("../../../colors/orange.cjs"),O=require("../../../colors/black.cjs"),A=require("../../../colors/violet.cjs"),B=require("../../../colors/teal.cjs"),F=require("../../../colors/purple.cjs"),I=require("../../../colors/pink.cjs"),g=require("styled-components"),K=require("../../Icons/Check/Check.cjs"),m=e=>e&&e.__esModule?e:{default:e},o=m(C),i=m(g),L={blue:s.blue,green:R.default,red:T.default,yellow:z.default,orange:E.default,black:O.black,grey:u.default,violet:A.default,teal:B.default,purple:F.default,pink:I.default},W=e=>L[e]??s.blue.m500,G=i.default.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 1.28rem;
+  width: max-content;
+  position: relative;
+
+  ${({$disabled:e})=>e&&g.css`
+      pointer-events: none;
+      opacity: 0.4;
+    `}
+`,J=i.default(K.default)`
+  width: 1.92rem;
+  height: 1.92rem;
+  border: 1px solid ${({$value:e,$outerShade:r})=>e?r:u.default.m800};
+  border-radius: 0.32rem;
+  background-color: ${({$value:e,$innerShade:r})=>e?r:"transparent"};
+  transition:
+    background-color 0.5s ease,
+    border-color 0.5s ease,
+    box-shadow 0.5s ease;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px ${({$focused:e,$outerShade:r})=>e?r:"transparent"};
+
+  path {
+    stroke-width: 3;
+    transform-box: fill-box;
+    transform-origin: center;
+    transform: scale(${({$value:e})=>e?1:0});
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+`,N=i.default.input`
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  whitespace: nowrap;
+`,x=({label:e,value:r,color:y="blue",textColor:k=u.default.m700,disabled:c,onChange:a,tabIndex:q,innerShade:w,outerShade:S,..._})=>{const[$,l]=h.useState(!1),d=W(y),v=w??d?.m500??s.blue.m500,D=S??d?.m600??s.blue.m600,f=h.useRef(0),P=t=>a(t.target.checked),j=t=>{if(t.key==="Enter"||t.key===" "){const b=Date.now();if(b-f.current<500){t.preventDefault(),t.stopPropagation();return}if(f.current=b,t.key===" "){t.preventDefault(),a(!r);return}a(!r),l(!1)}t.key==="Escape"&&l(!1)},p=t=>()=>l(t);return n.jsxs(G,{as:"label",$disabled:c,..._,children:[n.jsx(N,{type:"checkbox",checked:r,onChange:P,onKeyDown:j,onFocus:p(!0),onBlur:p(!1),disabled:c,tabIndex:q}),n.jsx(J,{$value:r,$focused:$,size:6,color:M.default,$innerShade:v,$outerShade:D,"aria-hidden":"true"}),n.jsx(H.default,{color:k,size:"1.92rem",children:e})]})};x.propTypes={label:o.default.string,value:o.default.bool,color:o.default.string,textColor:o.default.string,disabled:o.default.bool,onChange:o.default.func,tabIndex:o.default.number,innerShade:o.default.string,outerShade:o.default.string};exports.default=x;

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

@@ -1 +1,85 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),g=require("react"),P=require("prop-types"),S=require("../../Spinner/Spinner.cjs"),l=require("./styles.cjs"),W=require("../../../colors/white.cjs"),j=require("../../../colors/blue.cjs"),E=require("../../../colors/grey.cjs"),K=require("../../../colors/colorMap.cjs"),U=require("../../Ripple/Ripple.cjs"),m=require("./constants.cjs"),O=require("../../Icons/Link/Link.cjs"),B=r=>r&&r.__esModule?r:{default:r},e=B(P),F=({theme:r,children:c})=>t.jsx(U.default,{rippleColor:r.m100,children:c}),q=({label:r,labelColor:c,theme:a=j.blue,size:w=m.MEDIUM,width:b,isLoading:n,disabled:o,prefixIcon:d=O.default,suffixIcon:f,type:C="file",accept:I,isMultiple:M,onChange:R,...T})=>{const p=g.useRef(null),{m400:_,m500:z,m600:D}=K.default[a]??j.blue,{height:h,width:v,font:s}=m.SIZE[w]||{},i=c||["white","yellow"].includes(a)?E.default.m600:W.default,x=g.useRef(0),k=u=>{if(u.key==="Enter"||u.key===" "){u.preventDefault();const $=Date.now();if($-x.current<500){u.stopPropagation();return}x.current=$,!o&&!n&&p.current?.click()}},y=t.jsxs(l.Wrapper,{$selectedColor:_,$hoverColor:z,$height:h,$width:b||v,$activeColor:D,disabled:o,$isLoading:n,tabIndex:0,"aria-disabled":o,onKeyDown:k,children:[t.jsx(l.HiddenInput,{ref:p,type:C,accept:I,multiple:M,disabled:o,onChange:R,tabIndex:-1}),t.jsx(l.SpinnerWrapper,{$isLoading:n,children:t.jsx(S.default,{size:"small",color:i})}),t.jsxs(l.ContentWrapper,{$isLoading:n,children:[d&&t.jsx(d,{color:i,size:s+19}),t.jsx(l.PWrapper,{color:i,size:`${s}rem`,$prefixIcon:!!d,$suffixIcon:!!f,$iconSize:s+19,title:r,children:r}),f&&t.jsx(f,{color:i,size:s+19})]})]});return t.jsx(l.UploadBtnContainer,{$height:h,disabled:o,$isLoading:n,...T,children:n||o?y:t.jsx(F,{theme:a,children:y})})};q.propTypes={label:e.default.string,labelColor:e.default.string,theme:e.default.string,size:e.default.string,width:e.default.oneOfType([e.default.string,e.default.number]),isLoading:e.default.bool,disabled:e.default.bool,prefixIcon:e.default.elementType,suffixIcon:e.default.elementType,type:e.default.string,accept:e.default.string,isMultiple:e.default.bool,onChange:e.default.func};exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),w=require("react"),E=require("prop-types"),K=require("../../Spinner/Spinner.cjs"),U=require("../../../colors/white.cjs"),y=require("../../../colors/blue.cjs"),v=require("../../../colors/grey.cjs"),O=require("../../../colors/colorMap.cjs"),B=require("../../Ripple/Ripple.cjs"),b=require("./constants.cjs"),d=require("styled-components"),F=require("../../Typography/P/P.cjs"),H=require("../../Icons/Link/Link.cjs"),j=e=>e&&e.__esModule?e:{default:e},o=j(E),l=j(d),L=l.default.div`
+  height: ${({$height:e})=>e}rem;
+  display: inline-block;
+  position: relative;
+  border-radius: 0.96rem;
+
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&d.css`
+      box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
+      transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+
+      &:hover,
+      &:focus-within {
+        box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
+        transform: translateY(-2px);
+      }
+    `};
+`,Y=l.default.label`
+  height: ${({$height:e})=>`${e}rem`};
+  width: ${({$width:e})=>`${e}rem`};
+  border-radius: 0.96rem;
+  border: none;
+  padding: 0 0.8rem;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  background-color: ${({$selectedColor:e,disabled:t})=>t?v.default.m500:e};
+  cursor: ${({disabled:e,$isLoading:t})=>e?"not-allowed":t?"auto":"pointer"};
+
+  ${({$isLoading:e})=>e&&d.css`
+      pointer-events: none;
+    `};
+
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&d.css`
+      &:hover {
+        background-color: ${({$hoverColor:n})=>n};
+      }
+
+      &:active {
+        background-color: ${({$activeColor:n})=>n};
+      }
+    `};
+`,Z=l.default(F.default)`
+  color: ${({color:e})=>e};
+  font-size: ${({size:e})=>e};
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(
+    100%
+      ${({$prefixIcon:e,$iconSize:t})=>e?` - ${t}px - 0.8rem`:""}${({$suffixIcon:e,$iconSize:t})=>e?` - ${t}px - 0.8rem`:""}
+  );
+`,A=l.default.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({$isLoading:e})=>e?1:0};
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+`,G=l.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  flex: 1;
+  min-width: 0;
+  opacity: ${({$isLoading:e})=>e?0:1};
+  transition: opacity 0.3s ease;
+`,J=l.default.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+`,N=({theme:e,children:t})=>r.jsx(B.default,{rippleColor:e.m100,children:t}),q=({label:e,labelColor:t,theme:n=y.blue,size:C=b.MEDIUM,width:_,isLoading:i,disabled:s,prefixIcon:p=H.default,suffixIcon:f,type:k="file",accept:z,isMultiple:I,onChange:M,...R})=>{const h=w.useRef(null),{m400:T,m500:D,m600:P}=O.default[n]??y.blue,{height:$,width:S,font:a}=b.SIZE[C]||{},c=t||["white","yellow"].includes(n)?v.default.m600:U.default,m=w.useRef(0),W=u=>{if(u.key==="Enter"||u.key===" "){u.preventDefault();const g=Date.now();if(g-m.current<500){u.stopPropagation();return}m.current=g,!s&&!i&&h.current?.click()}},x=r.jsxs(Y,{$selectedColor:T,$hoverColor:D,$height:$,$width:_||S,$activeColor:P,disabled:s,$isLoading:i,tabIndex:0,"aria-disabled":s,onKeyDown:W,children:[r.jsx(J,{ref:h,type:k,accept:z,multiple:I,disabled:s,onChange:M,tabIndex:-1}),r.jsx(A,{$isLoading:i,children:r.jsx(K.default,{size:"small",color:c})}),r.jsxs(G,{$isLoading:i,children:[p&&r.jsx(p,{color:c,size:a+19}),r.jsx(Z,{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(L,{$height:$,disabled:s,$isLoading:i,...R,children:i||s?x:r.jsx(N,{theme:n,children:x})})};q.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=q;

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

@@ -1 +1,76 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("react"),t=require("./styles.cjs"),I=require("./helpers.cjs"),z=require("../../../colors/white.cjs"),E=require("../../../colors/grey.cjs"),q=require("../Textarea/SvgIcon.cjs"),H=({label:r,onChange:y,value:n,type:b,hasError:v,name:f="input",color:F="blue",size:R="20",disableAutoComplete:S,helperText:c="",background:g="transparent",outerBackground:m=z.default,leftIcon:B,rightIcon:C,placeholder:i,...L})=>{const[o,p]=w.useState(!1),u=I.getColor(F),W=()=>p(!0),M=()=>p(!1),P=k=>{y(k)},j={color:E.default.m500,size:22},a=I.getIcon(B),d=I.getIcon(C),l=!!a,$=!!d,s=v,_=g,h=`input-${f}`,x=c?`${h}-helper`:void 0;return e.jsxs(t.Wrapper,{children:[e.jsx(t.InputBox,{type:b,name:f,$hasError:s,size:R,value:n,$isFocused:o,$shade:u,$background:_,$hasLeftIcon:l,$hasRightIcon:$,id:h,"aria-invalid":s?!0:void 0,"aria-describedby":x,onFocus:W,onBlur:M,onChange:P,autoComplete:S?"off":"on",...L}),a&&e.jsx(t.LeftIconWrapper,{"aria-hidden":"true",children:e.jsx(q.default,{svgIcon:a,iconStyles:j})}),d&&e.jsx(t.RightIconWrapper,{"aria-hidden":"true",children:e.jsx(q.default,{svgIcon:d,iconStyles:j})}),(r||i&&!n)&&e.jsx(t.Label,{as:"label",htmlFor:h,$hasError:s,$isFocused:o,$shade:u,value:n,$outerBackground:o||n?m:g,$hasLeftIcon:l,$hasRightIcon:$,$onlyPh:i&&!r,children:r||i}),c&&e.jsx(t.HelperText,{id:x,$hasError:s,$isFocused:o,$shade:u,$hasLeftIcon:l,children:c})]})};exports.default=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),E=require("react"),h=require("styled-components"),H=require("../../../colors/white.cjs"),s=require("../../../colors/grey.cjs"),S=require("../../../colors/black.cjs"),v=require("../../../colors/red.cjs"),G=require("../../../colors/blue.cjs"),J=require("../../../colors/green.cjs"),K=require("../../../colors/yellow.cjs"),N=require("../../../colors/orange.cjs"),Q=require("../../../colors/violet.cjs"),T=require("../../../colors/teal.cjs"),U=require("../../../colors/purple.cjs"),V=require("../../../colors/pink.cjs"),X=require("../../Icons/iconsMap.cjs"),j=require("../Textarea/SvgIcon.cjs"),Y=e=>e&&e.__esModule?e:{default:e},i=Y(h),Z={blue:G.blue.m500,red:v.default.m500,green:J.default.m500,yellow:K.default.m500,orange:N.default.m500,black:S.black.m500,grey:s.default.m500,violet:Q.default.m500,teal:T.default.m500,purple:U.default.m500,pink:V.default.m500},ee=e=>Z[e]??s.default.m500,_=e=>X.default[e]??null,$=({$hasError:e,$shade:t,$isFocused:r,value:o,$onlyPh:a})=>e?typeof o=="string"&&!o&&!r?s.default.m500:v.default.m400:r&&!a?t:s.default.m500,te=({$hasLeftIcon:e,$hasRightIcon:t})=>e&&t?"0 3.84rem":e?"0 0.96rem 0 3.84rem":t?"0 3.84rem 0 0.96rem":"0 0.96rem",re=i.default.input`
+  height: 4.8rem;
+  border-radius: 0.64rem;
+  font-size: 2.24rem;
+  border: 2px solid ${({$hasError:e})=>e?v.default.m400:S.black.m200};
+  padding: ${te};
+  font-weight: 400;
+  transition: border-color 0.3s ease;
+  background-color: ${({$background:e})=>e} !important;
+  overflow: hidden;
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
+    -webkit-text-fill-color: var(--input-text);
+    transition: background-color 9999s ease-in-out 0s;
+  }
+
+  &::placeholder {
+    color: ${s.default.m500};
+    font-weight: 300;
+    font-size: 2.24rem;
+    background-color: ${({$background:e})=>e};
+    pointer-events: none;
+  }
+
+  &:focus {
+    border: 2px solid
+      ${({$shade:e,$hasError:t})=>$({$shade:e,$hasError:t,$isFocused:!0})};
+    outline: none;
+  }
+`,oe=i.default.p`
+  margin-top: 0.64rem;
+  margin-left: 0.64rem;
+  font-size: 1.28rem;
+  color: ${$};
+`,ne=i.default.div`
+  position: relative;
+  width: fit-content;
+`,ie=i.default.div`
+  position: absolute;
+  top: 1.28rem;
+  left: 0.96rem;
+`,se=i.default.div`
+  position: absolute;
+  top: 1.28rem;
+  right: 0.96rem;
+`;i.default.div`
+  position: relative;
+  width: 100%;
+`;const ue=i.default.div`
+  position: absolute;
+  top: -0.64rem;
+  left: 0.8rem;
+  font-size: 1.28rem;
+  background-color: ${({$outerBackground:e})=>e};
+  border-radius: 0.64rem;
+  margin: 0 0.64rem;
+  transition: 0.25s;
+  font-weight: 400;
+  pointer-events: none;
+  color: ${$};
+
+  ${({$isFocused:e,value:t,$onlyPh:r})=>!r&&(e||t)?h.css`
+          top: -0.64rem;
+          left: ${({$hasLeftIcon:o})=>o?3.52:.8}rem;
+          padding: 0 0.64rem;
+          margin: 0;
+        `:h.css`
+          top: 1.28rem;
+          left: ${({$hasLeftIcon:o})=>o?3.52:.8}rem;
+          font-size: 2.24rem;
+        `}
+`,le=({label:e,onChange:t,value:r,type:o,hasError:a,name:k="input",color:z="blue",size:C="20",disableAutoComplete:F,helperText:c="",background:q="transparent",outerBackground:M=H.default,leftIcon:R,rightIcon:B,placeholder:d,...P})=>{const[u,w]=E.useState(!1),f=ee(z),L=()=>w(!0),O=()=>w(!1),W=D=>{t(D)},x={color:s.default.m500,size:22},m=_(R),p=_(B),g=!!m,I=!!p,l=a,A=q,b=`input-${k}`,y=c?`${b}-helper`:void 0;return n.jsxs(ne,{children:[n.jsx(re,{type:o,name:k,$hasError:l,size:C,value:r,$isFocused:u,$shade:f,$background:A,$hasLeftIcon:g,$hasRightIcon:I,id:b,"aria-invalid":l?!0:void 0,"aria-describedby":y,onFocus:L,onBlur:O,onChange:W,autoComplete:F?"off":"on",...P}),m&&n.jsx(ie,{"aria-hidden":"true",children:n.jsx(j.default,{svgIcon:m,iconStyles:x})}),p&&n.jsx(se,{"aria-hidden":"true",children:n.jsx(j.default,{svgIcon:p,iconStyles:x})}),(e||d&&!r)&&n.jsx(ue,{as:"label",htmlFor:b,$hasError:l,$isFocused:u,$shade:f,value:r,$outerBackground:u||r?M:q,$hasLeftIcon:g,$hasRightIcon:I,$onlyPh:d&&!e,children:e||d}),c&&n.jsx(oe,{id:y,$hasError:l,$isFocused:u,$shade:f,$hasLeftIcon:g,children:c})]})};exports.default=le;

package/cjs/components/Input/Radio/Radio.cjs

@@ -1 +1,47 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../Typography/P/P.cjs"),u=require("../../../colors/blue.cjs"),r=require("./styles.cjs"),y=({label:a,value:n,name:l,color:i,textColor:h,isSelected:t,disabled:s,onChange:o,...f})=>{const j=i?.m500??u.blue.m500,d=i?.m800??u.blue.m800,m=()=>o(n),p=c=>{c.key==="Enter"&&(c.preventDefault(),s||o(n))};return e.jsxs(r.Wrapper,{$disabled:s,$focusShade:d,...f,children:[e.jsx(r.HiddenInput,{type:"radio",name:l,value:n,checked:t,disabled:s,onChange:m,onKeyDown:p}),e.jsx(r.CircleBorder,{"aria-hidden":"true",$isSelected:t,$shade:d,children:e.jsx(r.Circle,{$isSelected:t,$shade:j})}),e.jsx(x.default,{color:h,size:"1.92rem",children:a})]})};exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),y=require("../../Typography/P/P.cjs"),u=require("../../../colors/blue.cjs"),i=require("styled-components"),h=require("../../../colors/grey.cjs"),$=e=>e&&e.__esModule?e:{default:e},o=$(i),j=o.default.div`
+  position: absolute;
+  width: 1.12rem;
+  height: 1.12rem;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${({$isSelected:e,$shade:t})=>e?t:"transparent"};
+  transition: background-color 0.35s ease;
+`,p=o.default.div`
+  width: 1.76rem;
+  height: 1.76rem;
+  border: 1px solid ${({$isSelected:e,$shade:t})=>e?t:h.default.m900};
+  border-radius: 50%;
+  position: relative;
+  transition:
+    border-color 0.5s ease,
+    box-shadow 0.5s ease;
+`,_=o.default.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  opacity: 0;
+  margin: 0;
+`,v=o.default.label`
+  display: flex;
+  align-items: center;
+  gap: 1.28rem;
+  width: max-content;
+
+  &:focus-within ${p} {
+    box-shadow: 0 0 0 1px ${({$focusShade:e})=>e||h.default.m900};
+  }
+
+  ${({$disabled:e})=>e?i.css`
+          pointer-events: none;
+          opacity: 0.4;
+          cursor: not-allowed;
+        `:i.css`
+          cursor: pointer;
+        `}
+`,q=({label:e,value:t,name:f,color:a,textColor:m,isSelected:n,disabled:s,onChange:d,...b})=>{const x=a?.m500??u.blue.m500,l=a?.m800??u.blue.m800,w=()=>d(t),g=c=>{c.key==="Enter"&&(c.preventDefault(),s||d(t))};return r.jsxs(v,{$disabled:s,$focusShade:l,...b,children:[r.jsx(_,{type:"radio",name:f,value:t,checked:n,disabled:s,onChange:w,onKeyDown:g}),r.jsx(p,{"aria-hidden":"true",$isSelected:n,$shade:l,children:r.jsx(j,{$isSelected:n,$shade:x})}),r.jsx(y.default,{color:m,size:"1.92rem",children:e})]})};exports.default=q;

package/cjs/components/Input/Radio/index.cjs

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./Radio.cjs');

package/cjs/components/Input/RadioGroup/RadioGroup.cjs

@@ -1 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),b=require("react"),h=require("prop-types"),_=require("../Checkbox/helpers.cjs"),q=require("../Radio/Radio.cjs"),m=require("./styles.cjs"),v=t=>t&&t.__esModule?t:{default:t},e=v(h),n=({options:t,color:s="blue",value:l,onChange:u,isHorizonatal:i,label:a,ariaLabel:d,name:c,...f})=>{const p=_.getColor(s),g=r=>{r!==l&&u(r)},y=r=>b.createElement(q.default,{...r,key:r?.value,name:c,color:p,isSelected:l===r?.value,onChange:g});return o.jsxs(m.Wrapper,{role:"radiogroup","aria-label":a?void 0:d,$isHorizonatal:i,...f,children:[a&&o.jsx("legend",{children:a}),t.map(y)]})};n.propTypes={options:e.default.arrayOf(e.default.shape({value:e.default.any,label:e.default.string,disabled:e.default.bool})),value:e.default.any,onChange:e.default.func,color:e.default.string,isHorizonatal:e.default.bool,label:e.default.string,ariaLabel:e.default.string,name:e.default.string};exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),m=require("react"),k=require("prop-types"),v=require("../Radio/Radio.cjs"),a=require("styled-components"),u=require("../../../colors/blue.cjs"),h=require("../../../colors/green.cjs"),w=require("../../../colors/red.cjs"),x=require("../../../colors/yellow.cjs"),j=require("../../../colors/orange.cjs"),O=require("../../../colors/black.cjs"),C=require("../../../colors/grey.cjs"),H=require("../../../colors/violet.cjs"),M=require("../../../colors/teal.cjs"),P=require("../../../colors/purple.cjs"),R=require("../../../colors/pink.cjs"),s=e=>e&&e.__esModule?e:{default:e},r=s(k),S=s(a),T={blue:u.blue,green:h.default,red:w.default,yellow:x.default,orange:j.default,black:O.black,grey:C.default,violet:H.default,teal:M.default,purple:P.default,pink:R.default},$=e=>T[e]??u.blue.m500,z=S.default.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: ${({$isHorizonatal:e})=>e?"row":"column"};
+
+  ${({$isHorizonatal:e})=>e?a.css`
+          flex-wrap: wrap;
+          justify-content: space-between;
+        `:a.css`
+          gap: 1.92rem;
+        `};
+`,i=({options:e,color:d="blue",value:o,onChange:c,isHorizonatal:f,label:l,ariaLabel:p,name:g,...b})=>{const q=$(d),y=t=>{t!==o&&c(t)},_=t=>m.createElement(v.default,{...t,key:t?.value,name:g,color:q,isSelected:o===t?.value,onChange:y});return n.jsxs(z,{role:"radiogroup","aria-label":l?void 0:p,$isHorizonatal:f,...b,children:[l&&n.jsx("legend",{children:l}),e.map(_)]})};i.propTypes={options:r.default.arrayOf(r.default.shape({value:r.default.any,label:r.default.string,disabled:r.default.bool})),value:r.default.any,onChange:r.default.func,color:r.default.string,isHorizonatal:r.default.bool,label:r.default.string,ariaLabel:r.default.string,name:r.default.string};exports.default=i;

package/cjs/components/Input/Textarea/Textarea.cjs

@@ -1 +1,89 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("react"),r=require("./styles.cjs"),F=require("../Input/styles.cjs"),x=require("./helpers.cjs"),J=require("../../../colors/white.cjs"),K=require("../../../colors/grey.cjs"),S=require("./SvgIcon.cjs"),Q=({label:c,onChange:w,value:s,type:C,hasError:m,name:$="textarea",color:B="blue",helperText:i="",background:I="transparent",outerBackground:H=J.default,isDynamic:p,isResizeNone:z,rows:L="2",cols:P="20",leftIcon:T,rightIcon:W,placeholder:a,...M})=>{const[o,j]=b.useState(!1),u=x.getColor(B),l=b.useRef(null),O=t=>{t.style.height="";const v=t.scrollHeight-t.clientHeight;if(v>0){const G=parseFloat(window.getComputedStyle(t).height);t.style.height=`${G+v}px`}},_=()=>j(!0),k=()=>j(!1),A=t=>{p&&l.current&&O(l.current),w(t)},y={color:K.default.m500,size:20},d=x.getIcon(T),h=x.getIcon(W),g=!!d,q=!!h,n=m,E=p,N=I,D={rows:L},f=`textarea-${$}`,R=i?`${f}-helper`:void 0;return e.jsxs(r.Wrapper,{children:[e.jsx(r.TextareaBox,{type:C,name:$,$hasError:n,value:s,$isFocused:o,$shade:u,$isDynamic:E,$background:N,cols:P,$hasLeftIcon:g,$hasRightIcon:q,$isResizeNone:z,...D,id:f,"aria-invalid":n?!0:void 0,"aria-describedby":R,ref:l,onFocus:_,onBlur:k,onChange:A,...M}),d&&e.jsx(F.LeftIconWrapper,{"aria-hidden":"true",style:{top:"1.2rem",transform:"none"},children:e.jsx(S.default,{svgIcon:d,iconStyles:y})}),h&&e.jsx(F.RightIconWrapper,{"aria-hidden":"true",style:{top:"1.2rem",transform:"none"},children:e.jsx(S.default,{svgIcon:h,iconStyles:y})}),e.jsxs(r.Parent,{children:[(c||a&&!s)&&e.jsx(r.Label,{as:"label",htmlFor:f,$hasError:n,$isFocused:o,$shade:u,$value:s,$outerBackground:o||s?H:I,$hasLeftIcon:g,$hasRightIcon:q,$onlyPh:a&&!c,children:c||a}),i&&e.jsx(r.HelperText,{id:R,$hasError:n,$isFocused:o,$shade:u,$hasLeftIcon:g,children:i})]})]})};exports.default=Q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("react"),V=require("../../../colors/white.cjs"),i=require("../../../colors/grey.cjs"),C=require("./SvgIcon.cjs"),a=require("styled-components"),M=require("../../../colors/black.cjs"),v=require("../../../colors/red.cjs"),X=require("../../../colors/blue.cjs"),Y=require("../../../colors/green.cjs"),Z=require("../../../colors/yellow.cjs"),ee=require("../../../colors/orange.cjs"),te=require("../../../colors/violet.cjs"),oe=require("../../../colors/teal.cjs"),re=require("../../../colors/purple.cjs"),ne=require("../../../colors/pink.cjs"),se=require("../../Icons/iconsMap.cjs"),ie=e=>e&&e.__esModule?e:{default:e},s=ie(a),ae={blue:X.blue.m500,red:v.default.m500,green:Y.default.m500,yellow:Z.default.m500,orange:ee.default.m500,black:M.black.m500,grey:i.default.m500,violet:te.default.m500,teal:oe.default.m500,purple:re.default.m500,pink:ne.default.m500},le=e=>ae[e]??i.default.m500,F=e=>se.default[e]??null,$=({$hasError:e,$shade:r,$isFocused:t,value:l,$onlyPh:d})=>e?typeof l=="string"&&!l&&!t?i.default.m500:v.default.m400:t&&!d?r:i.default.m500,ce=s.default.textarea`
+  border-radius: 0.64rem;
+  font-size: 2.24rem;
+  border: 2px solid ${({$hasError:e})=>e?v.default.m400:M.black.m200};
+  padding: 0.96rem;
+  font-weight: 400;
+  transition: border-color 0.3s ease;
+  background-color: ${({$background:e})=>e} !important;
+  min-height: 2.24rem;
+  min-width: 4.8rem;
+
+  ${({$isResizeNone:e})=>e&&a.css`
+      resize: none;
+    `}
+
+  ${({$isDynamic:e})=>e&&a.css`
+      resize: none;
+    `}
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
+    -webkit-text-fill-color: var(--input-text);
+    transition: background-color 9999s ease-in-out 0s;
+  }
+
+  &::placeholder {
+    color: ${i.default.m500};
+    font-weight: 300;
+    font-size: 2.24rem;
+    background-color: ${({$background:e})=>e};
+    pointer-events: none;
+  }
+
+  &:focus {
+    border: 2px solid
+      ${({$shade:e,$hasError:r})=>$({$shade:e,$hasError:r,$isFocused:!0})};
+    outline: none;
+  }
+`,ue=s.default.p`
+  margin-top: 0.64rem;
+  margin-left: 0.64rem;
+  font-size: 1.28rem;
+  color: ${$};
+`,de=s.default.div`
+  position: relative;
+  width: fit-content;
+`,fe=s.default.div`
+  position: absolute;
+  top: -0.64rem;
+  left: 0.8rem;
+  font-size: 1.28rem;
+  background-color: ${({$outerBackground:e})=>e};
+  border-radius: 0.64rem;
+  margin: 0 0.64rem;
+  transition: 0.25s;
+  font-weight: 400;
+  pointer-events: none;
+  color: ${$};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: -moz-available; /* Firefox */
+  max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
+  max-width: stretch; /* Modern Standard */
+
+  ${({$isFocused:e,$value:r,$onlyPh:t})=>!t&&(e||r)?a.css`
+          top: -0.64rem;
+          left: 0.8rem;
+          padding: 0 0.64rem;
+          margin: 0;
+        `:a.css`
+          top: 1.28rem;
+          left: 0.8rem;
+          font-size: 2.24rem;
+        `}
+`,me=s.default.div`
+  overflow: hidden;
+`,he=s.default.div`
+  position: absolute;
+  top: 1.28rem;
+  left: 0.96rem;
+`,pe=s.default.div`
+  position: absolute;
+  top: 1.28rem;
+  right: 0.96rem;
+`,ge=({label:e,onChange:r,value:t,type:l,hasError:d,name:k="textarea",color:H="blue",helperText:f="",background:q="transparent",outerBackground:B=V.default,isDynamic:y,isResizeNone:L,rows:O="2",cols:P="20",leftIcon:A,rightIcon:E,placeholder:m,...T})=>{const[c,I]=_.useState(!1),h=le(H),p=_.useRef(null),W=n=>{n.style.height="";const R=n.scrollHeight-n.clientHeight;if(R>0){const U=parseFloat(window.getComputedStyle(n).height);n.style.height=`${U+R}px`}},D=()=>I(!0),N=()=>I(!1),G=n=>{y&&p.current&&W(p.current),r(n)},j={color:i.default.m500,size:20},g=F(A),b=F(E),x=!!g,z=!!b,u=d,J=y,K=q,Q={rows:O},w=`textarea-${k}`,S=f?`${w}-helper`:void 0;return o.jsxs(de,{children:[o.jsx(ce,{type:l,name:k,$hasError:u,value:t,$isFocused:c,$shade:h,$isDynamic:J,$background:K,cols:P,$hasLeftIcon:x,$hasRightIcon:z,$isResizeNone:L,...Q,id:w,"aria-invalid":u?!0:void 0,"aria-describedby":S,ref:p,onFocus:D,onBlur:N,onChange:G,...T}),g&&o.jsx(he,{"aria-hidden":"true",style:{top:"1.2rem",transform:"none"},children:o.jsx(C.default,{svgIcon:g,iconStyles:j})}),b&&o.jsx(pe,{"aria-hidden":"true",style:{top:"1.2rem",transform:"none"},children:o.jsx(C.default,{svgIcon:b,iconStyles:j})}),o.jsxs(me,{children:[(e||m&&!t)&&o.jsx(fe,{as:"label",htmlFor:w,$hasError:u,$isFocused:c,$shade:h,$value:t,$outerBackground:c||t?B:q,$hasLeftIcon:x,$hasRightIcon:z,$onlyPh:m&&!e,children:e||m}),f&&o.jsx(ue,{id:S,$hasError:u,$isFocused:c,$shade:h,$hasLeftIcon:x,children:f})]})]})};exports.default=ge;

package/cjs/components/Loader/Loader.cjs

@@ -1 +1,52 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),a=require("./styles.cjs"),e=require("./constants.cjs"),g=require("./helpers.cjs"),h=require("prop-types"),m=s=>s&&s.__esModule?s:{default:s},t=m(h),d=({size:s=e.MEDIUM,theme:u=e.BLUE,isBounce:c,isMini:p,isMiniDark:E,...M})=>{const{dot:_,gap:f}=e.SIZE[s]||e.SIZE[e.MEDIUM],n=g.getTheme(u),i=e.ANIMATION_DELAYS,D=(E?e.THEME_SHADE.slice(2,6):p?e.THEME_SHADE.slice(0,3):e.THEME_SHADE).map(o=>n[o]??n.m500),T=i.map(()=>_);return l.jsxs(a.LoaderWrapper,{role:"status",$gap:f,...M,children:[l.jsx(a.VisuallyHidden,{children:"Loading"}),T.map((o,r)=>l.jsx(a.Dot,{"aria-hidden":"true",$size:o,$color:D[r],$delay:i[r],$isBounce:c},`dot-${r}`))]})};d.propTypes={size:t.default.string,theme:t.default.string,isBounce:t.default.bool,isMini:t.default.bool,isMiniDark:t.default.bool};exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),t=require("./constants.cjs"),M=require("prop-types"),s=require("styled-components"),d=require("../../colors/blue.cjs"),$=require("../../colors/green.cjs"),k=require("../../colors/red.cjs"),D=require("../../colors/yellow.cjs"),x=require("../../colors/orange.cjs"),S=require("../../colors/black.cjs"),T=require("../../colors/grey.cjs"),A=require("../../colors/violet.cjs"),H=require("../../colors/teal.cjs"),w=require("../../colors/purple.cjs"),v=require("../../colors/pink.cjs"),f=e=>e&&e.__esModule?e:{default:e},n=f(M),l=f(s),I={blue:d.blue,green:$.default,red:k.default,yellow:D.default,orange:x.default,black:S.black,grey:T.default,violet:A.default,teal:H.default,purple:w.default,pink:v.default},L=e=>I[e]??d.blue,j=s.keyframes`
+  0% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+  20% {
+    transform: scale(1.6);
+    animation-timing-function: ease-in;
+  }
+  40%, 100% {
+    transform: scale(1);
+  }
+`,P=s.keyframes`
+  0%, 100% {
+    transform: translateY(0) scale(1);
+    animation-timing-function: ease-in;
+  }
+  50% {
+    transform: translateY(-160%) scale(1.4);
+    animation-timing-function: ease-out;
+  }
+`,O=l.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({$gap:e})=>e};
+`,U=l.default.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`,Y=l.default.span`
+  display: inline-block;
+  width: ${({$size:e})=>e};
+  height: ${({$size:e})=>e};
+  border-radius: 50%;
+  background-color: ${({$color:e})=>e};
+  flex-shrink: 0;
+
+  ${({$delay:e,$isBounce:o})=>s.css`
+    animation: ${o?P:j} ${o?1.2:1.3}s ease-in-out infinite;
+    animation-delay: ${e}s;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  `}
+`,p=({size:e=t.MEDIUM,theme:o=t.BLUE,isBounce:m,isMini:g,isMiniDark:b,...y})=>{const{dot:h,gap:E}=t.SIZE[e]||t.SIZE[t.MEDIUM],u=L(o),c=t.ANIMATION_DELAYS,q=(b?t.THEME_SHADE.slice(2,6):g?t.THEME_SHADE.slice(0,3):t.THEME_SHADE).map(a=>u[a]??u.m500),_=c.map(()=>h);return r.jsxs(O,{role:"status",$gap:E,...y,children:[r.jsx(U,{children:"Loading"}),_.map((a,i)=>r.jsx(Y,{"aria-hidden":"true",$size:a,$color:q[i],$delay:c[i],$isBounce:m},`dot-${i}`))]})};p.propTypes={size:n.default.string,theme:n.default.string,isBounce:n.default.bool,isMini:n.default.bool,isMiniDark:n.default.bool};exports.default=p;

package/cjs/components/MenuItem/MenuItem.cjs

@@ -1 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),l=require("../../colors/grey.cjs"),u=require("../../colors/blue.cjs"),v=require("../../colors/white.cjs"),d=require("./styles.cjs"),b=({isSelected:r,isDisabled:t})=>r?l.default.m700:t?l.default.m300:l.default.m500,j=({id:r,value:t,label:i,width:n="32rem",isSelected:o,defaultColor:s=v.default,selectedColor:a=u.blue.m200,hoverColor:m=u.blue.m50,activeColor:f=u.blue.m100,isHighlighted:$,size:h="1.92rem",onSelect:C,isDisabled:e,onMouseEnter:g,...p})=>{const q=()=>{e||C(t)};return c.jsx(d.Wrapper,{$isSelected:o,$width:n,$defaultColor:s,$selectedColor:a,$hoverColor:m,$activeColor:f,$isDisabled:e,$isHighlighted:$,id:r,role:"option",...p,"aria-selected":o,"aria-disabled":e||void 0,onClick:q,onMouseEnter:g,title:i,children:c.jsx(d.PWrapper,{size:h,color:b({isSelected:o,isDisabled:e}),$width:n,children:i})})};exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),n=require("../../colors/grey.cjs"),i=require("../../colors/blue.cjs"),C=require("../../colors/white.cjs"),_=require("styled-components"),b=require("../Typography/P/P.cjs"),q=e=>e&&e.__esModule?e:{default:e},a=q(_),x=a.default.div`
+  width: ${({$width:e})=>e};
+  background-color: ${({$isSelected:e,$defaultColor:t,$isHighlighted:r,$hoverColor:l,$selectedColor:o})=>e?o:r?l:t};
+
+  cursor: ${({$isSelected:e,$isDisabled:t})=>e?"auto":t?"not-allowed":"pointer"};
+  padding: 0.96rem 0 1.28rem 1.6rem;
+  margin-top: 0.16rem;
+  pointer-events: ${({$isDisabled:e})=>e?"none":"auto"};
+
+  &:active {
+    background-color: ${({$isSelected:e,$activeColor:t,$selectedColor:r})=>e?r:t};
+  }
+`,j=a.default(b.default)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(${({$width:e})=>e} - 3.2rem);
+`,k=({isSelected:e,isDisabled:t})=>e?n.default.m700:t?n.default.m300:n.default.m500,y=({id:e,value:t,label:r,width:l="32rem",isSelected:o,defaultColor:c=C.default,selectedColor:s=i.blue.m200,hoverColor:f=i.blue.m50,activeColor:m=i.blue.m100,isHighlighted:$,size:p="1.92rem",onSelect:h,isDisabled:u,onMouseEnter:g,...v})=>{const w=()=>{u||h(t)};return d.jsx(x,{$isSelected:o,$width:l,$defaultColor:c,$selectedColor:s,$hoverColor:f,$activeColor:m,$isDisabled:u,$isHighlighted:$,id:e,role:"option",...v,"aria-selected":o,"aria-disabled":u||void 0,onClick:w,onMouseEnter:g,title:r,children:d.jsx(j,{size:p,color:k({isSelected:o,isDisabled:u}),$width:l,children:r})})};exports.default=y;

package/cjs/components/MenuItem/index.cjs

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./MenuItem.cjs');