hans-ui-design-lib 0.0.69 → 0.0.70

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react");var h={exports:{}},p={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");var M={exports:{}},j={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,25 +6,48 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var b;function C(){if(b)return p;b=1;var o=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function a(u,e,s){var r=null;if(s!==void 0&&(r=""+s),e.key!==void 0&&(r=""+e.key),"key"in e){s={};for(var n in e)n!=="key"&&(s[n]=e[n])}else s=e;return e=s.ref,{$$typeof:o,type:u,key:r,ref:e!==void 0?e:null,props:s}}return p.Fragment=t,p.jsx=a,p.jsxs=a,p}var v;function $(){return v||(v=1,h.exports=C()),h.exports}var i=$();const x=d.memo(o=>{const{label:t="",buttonId:a="hans-button",buttonSize:u="medium",buttonColor:e="primary",buttonVariant:s="default",buttonType:r="button",customClasses:n="",disabled:m=!1,children:c,...l}=o;return i.jsx("button",{id:a,type:r,disabled:m,className:`
+ */var Y;function ae(){if(Y)return j;Y=1;var s=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function h(f,t,o){var l=null;if(o!==void 0&&(l=""+o),t.key!==void 0&&(l=""+t.key),"key"in t){o={};for(var u in t)u!=="key"&&(o[u]=t[u])}else o=t;return t=o.ref,{$$typeof:s,type:f,key:l,ref:t!==void 0?t:null,props:o}}return j.Fragment=i,j.jsx=h,j.jsxs=h,j}var G;function ie(){return G||(G=1,M.exports=ae()),M.exports}var n=ie();const Q=a.memo(s=>{const{label:i="",buttonId:h="hans-button",buttonSize:f="medium",buttonColor:t="primary",buttonVariant:o="default",buttonType:l="button",customClasses:u="",disabled:g=!1,children:b,...p}=s;return n.jsx("button",{id:h,type:l,disabled:g,className:`
         hans-button
-        hans-button-${u}
-        hans-button-${e}
-        hans-button-${s}
-        ${n}
-      `,...l,children:i.jsx("slot",{children:c??(t&&i.jsx("span",{children:t}))})})});x.displayName="HansButton";const f=d.memo(o=>{const{label:t="",labelColor:a="primary",placeholder:u="",value:e="",inputId:s="hans-input",inputColor:r="primary",inputSize:n="medium",inputType:m="text",message:c="",messageColor:l="success",customClasses:H="",disabled:j=!1,children:q,...R}=o;return i.jsxs("div",{className:"hans-input-div",children:[q,i.jsx("label",{htmlFor:s,className:`
-          hans-input-label
-          hans-input-label-${a}
-        `,children:t}),i.jsx("input",{id:s,type:m,disabled:j,value:e,placeholder:u,className:`
-          hans-input
-          hans-input-${n}
-          hans-input-${r}
-          ${H}
-        `,...R}),i.jsx("p",{className:`
-          hans-input-message
-          hans-input-message-${l}
-        `,children:c})]})});f.displayName="HansInput";function y(o){return Object.keys(o)}const S={name:"string",iconSize:{type:"custom",ref:{}},customClasses:"string"},E=y(S),P={Fa:()=>Promise.resolve().then(()=>require("./index-B8vGj59Y.cjs")),Md:()=>Promise.resolve().then(()=>require("./index-BniI3q7_.cjs")),Bi:()=>Promise.resolve().then(()=>require("./index-CzJEuaAC.cjs")),Ai:()=>Promise.resolve().then(()=>require("./index-DpGEmQKf.cjs")),Bs:()=>Promise.resolve().then(()=>require("./index-DOM24eP1.cjs")),Io:()=>Promise.resolve().then(()=>require("./index-DqJAPiPg.cjs")),Ri:()=>Promise.resolve().then(()=>require("./index-Cg9EwHiA.cjs")),Hi:()=>Promise.resolve().then(()=>require("./index-Cd4f2LU9.cjs")),Pi:()=>Promise.resolve().then(()=>require("./index-DgzbVFqs.cjs")),Tb:()=>Promise.resolve().then(()=>require("./index-BMJKTS9q.cjs")),Lu:()=>Promise.resolve().then(()=>require("./index-CsmLabva.cjs"))},I=d.memo(o=>{const{name:t,iconSize:a="medium",customClasses:u="",...e}=o,[s,r]=d.useState(null);return d.useEffect(()=>{let n=!0;if(!t)return;const m=t.slice(0,2),c=P[m];if(c)return(async()=>{try{const l=await c();if(!n)return;r(()=>l[t]||null)}catch(l){console.warn(`[HansUI] Error loading icon ${t}:`,l),n&&r(()=>null)}})(),()=>{n=!1}},[t]),s?i.jsx(s,{className:`
+        hans-button-${f}
+        hans-button-${t}
+        hans-button-${o}
+        ${u}
+      `,...p,children:n.jsx("slot",{children:b??(i&&n.jsx("span",{children:i}))})})});Q.displayName="HansButton";const V=a.memo(s=>{const{label:i="",labelColor:h="base",placeholder:f="",value:t,inputId:o="hans-input",inputColor:l="base",inputSize:u="medium",inputType:g="text",message:b="",messageColor:p="base",customClasses:x="",disabled:q=!1,leftIcon:c,rightIcon:d,children:I,...E}=s,A=typeof t>"u"?{}:{value:t};return n.jsxs("div",{className:"hans-input-div",children:[I,i?n.jsx("label",{htmlFor:o,className:`
+            hans-input-label
+            hans-input-label-${h}
+          `,children:i}):null,n.jsxs("div",{className:"hans-input-field",children:[c?n.jsx("span",{className:`
+              hans-input-icon
+              hans-input-icon-left
+              hans-input-icon-${l}
+            `,children:c}):null,n.jsx("input",{id:o,type:g,disabled:q,placeholder:f,className:`
+            hans-input
+            hans-input-${u}
+            hans-input-${l}
+            ${c?"hans-input-has-left-icon":""}
+            ${d?"hans-input-has-right-icon":""}
+            ${x}
+          `,...A,...E}),d?n.jsx("span",{className:`
+              hans-input-icon
+              hans-input-icon-right
+              hans-input-icon-${l}
+            `,children:d}):null]}),b?n.jsx("p",{className:`
+            hans-input-message
+            hans-input-message-${p}
+          `,children:b}):null]})});V.displayName="HansInput";function F(s){return Object.keys(s)}const le={name:"string",iconSize:{type:"custom",ref:{}},customClasses:"string"},ue=F(le),W={Fa:()=>Promise.resolve().then(()=>require("./index-B8vGj59Y.cjs")),Md:()=>Promise.resolve().then(()=>require("./index-BniI3q7_.cjs")),Bi:()=>Promise.resolve().then(()=>require("./index-CzJEuaAC.cjs")),Ai:()=>Promise.resolve().then(()=>require("./index-DpGEmQKf.cjs")),Bs:()=>Promise.resolve().then(()=>require("./index-DOM24eP1.cjs")),Io:()=>Promise.resolve().then(()=>require("./index-DqJAPiPg.cjs")),Ri:()=>Promise.resolve().then(()=>require("./index-Cg9EwHiA.cjs")),Hi:()=>Promise.resolve().then(()=>require("./index-Cd4f2LU9.cjs")),Pi:()=>Promise.resolve().then(()=>require("./index-DgzbVFqs.cjs")),Tb:()=>Promise.resolve().then(()=>require("./index-BMJKTS9q.cjs")),Lu:()=>Promise.resolve().then(()=>require("./index-CsmLabva.cjs"))},T=a.memo(s=>{const{name:i,iconSize:h="medium",customClasses:f="",...t}=s,[o,l]=a.useState(null);return a.useEffect(()=>{let u=!0;if(!i)return;const g=i.slice(0,2),b=W[g];if(b)return(async()=>{try{const p=await b();if(!u)return;l(()=>p[i]||null)}catch(p){console.warn(`[HansUI] Error loading icon ${i}:`,p),u&&l(()=>null)}})(),()=>{u=!1}},[i]),o?n.jsx(o,{className:`
           hans-icon
-          hans-icon-${a}
-          ${u}
-        `,...e}):i.jsx("span",{className:"hans-icon-loading"})});I.displayName="HansIcon";const T={label:"string",buttonId:"string",buttonSize:{type:"custom",ref:{}},buttonColor:{type:"custom",ref:{}},buttonVariant:{type:"custom",ref:{}},buttonType:{type:"custom",ref:{}},customClasses:"string",disabled:"boolean"},N=y(T);exports.DynamicIconImports=P;exports.HansButton=x;exports.HansButtonPropsList=N;exports.HansIcon=I;exports.HansIconPropsList=E;exports.HansInput=f;
+          hans-icon-${h}
+          ${f}
+        `,...t}):n.jsx("span",{className:"hans-icon-loading"})});T.displayName="HansIcon";const ce=s=>Array.isArray(s)?s:typeof s=="string"&&s.length>0?[s]:[],$=s=>s.id??s.value,X=a.memo(s=>{const{label:i="",labelColor:h="base",placeholder:f="Select an option",inputId:t="hans-dropdown",inputColor:o="base",inputSize:l="medium",message:u="",messageColor:g="base",customClasses:b="",disabled:p=!1,options:x=[],selectionType:q="single",enableAutocomplete:c=!0,value:d,defaultValue:I,noOptionsText:E="No options",dropdownBackgroundColor:A="var(--white)",dropdownHoverColor:Z="var(--gray-100)",onChange:S,onSearch:_,onInputChange:J,...K}=s,y=q==="multi",[v,H]=a.useState(!1),[ee,U]=a.useState("down"),[N,P]=a.useState(""),[ne,D]=a.useState(()=>typeof d<"u"?d:typeof I<"u"?I:y?[]:""),C=a.useRef(null),L=a.useRef(null);a.useEffect(()=>{typeof d<"u"&&D(d)},[d]);const w=ce(typeof d<"u"?d:ne),R=a.useMemo(()=>x.filter(e=>w.includes($(e))),[x,w]),O=y?R.map(e=>e.label).join(", "):R[0]?.label??"";a.useEffect(()=>{!c||y||P(O)},[c,y,O]),a.useEffect(()=>{const e=r=>{const m=r.target;!C.current||!m||C.current.contains(m)||H(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const B=a.useMemo(()=>{if(!c||N.trim().length===0)return x;const e=N.toLowerCase();return x.filter(r=>r.label.toLowerCase().includes(e))},[c,x,N]);a.useEffect(()=>{if(!v)return;const e=requestAnimationFrame(()=>{if(!C.current||!L.current)return;const r=C.current.getBoundingClientRect(),m=L.current.getBoundingClientRect(),z=window.innerHeight-r.bottom,re=r.top;z<m.height&&re>m.height?U("up"):U("down")});return()=>cancelAnimationFrame(e)},[v,B.length]);const se=e=>{if(!c)return;const r=e.target.value;P(r),v||H(!0),_&&_(r),J&&J(e)},te=e=>{if(e.disabled||p)return;const r=$(e);if(y){const m=w.includes(r)?w.filter(z=>z!==r):[...w,r];typeof d>"u"&&D(m),S&&S(m),c&&P("");return}typeof d>"u"&&D(r),S&&S(r),c&&P(e.label),H(!1)},k=()=>{p||H(!0)},oe=c?N:O;return n.jsxs("div",{className:"hans-dropdown",ref:C,children:[i?n.jsx("label",{htmlFor:t,className:`
+            hans-input-label
+            hans-input-label-${h}
+          `,children:i}):null,n.jsxs("div",{className:"hans-dropdown-field",onMouseDown:k,children:[n.jsx(V,{label:"",message:"",inputId:t,inputColor:o,inputSize:l,placeholder:f,customClasses:`hans-dropdown-input ${b}`,disabled:p,value:oe,onChange:se,onFocus:k,onClick:k,readOnly:!c,leftIcon:c?n.jsx(T,{name:"FaSearch",iconSize:"small"}):void 0,rightIcon:n.jsx(T,{name:v?"MdArrowDropUp":"MdArrowDropDown",iconSize:"small"}),...K}),v&&!p?n.jsx("ul",{ref:L,className:"hans-dropdown-list",role:"listbox","aria-multiselectable":y,"data-direction":ee,style:{"--hans-dropdown-bg":A,"--hans-dropdown-hover":Z},children:B.length===0?n.jsx("li",{className:"hans-dropdown-empty",children:E}):B.map(e=>{const r=$(e),m=w.includes(r);return n.jsxs("li",{role:"option","aria-selected":m,className:`
+                      hans-dropdown-option
+                      ${m?"hans-dropdown-option-selected":""}
+                      ${e.disabled?"hans-dropdown-option-disabled":""}
+                    `,onClick:()=>te(e),children:[e.imageSrc?n.jsx("img",{className:"hans-dropdown-option-image",src:e.imageSrc,alt:e.imageAlt??e.label}):null,n.jsx("span",{className:"hans-dropdown-option-label",children:e.label})]},r)})}):null]}),y&&R.length>0?n.jsx("div",{className:"hans-dropdown-selected",children:R.map(e=>n.jsx("span",{className:`
+                hans-dropdown-chip
+                hans-dropdown-chip-${o}
+              `,children:e.label},$(e)))}):null,u?n.jsx("p",{className:`
+            hans-input-message
+            hans-input-message-${g}
+          `,children:u}):null]})});X.displayName="HansDropdown";const de={label:"string",buttonId:"string",buttonSize:{type:"custom",ref:{}},buttonColor:{type:"custom",ref:{}},buttonVariant:{type:"custom",ref:{}},buttonType:{type:"custom",ref:{}},customClasses:"string",disabled:"boolean"},pe=F(de),me={label:"string",labelColor:{type:"custom",ref:{}},placeholder:"string",inputId:"string",inputColor:{type:"custom",ref:{}},inputSize:{type:"custom",ref:{}},message:"string",messageColor:{type:"custom",ref:{}},customClasses:"string",disabled:"boolean",options:{type:"custom",ref:{}},selectionType:{type:"custom",ref:{}},enableAutocomplete:"boolean",value:{type:"custom",ref:{}},defaultValue:{type:"custom",ref:{}},noOptionsText:"string",dropdownBackgroundColor:"string",dropdownHoverColor:"string"},he=F(me);exports.DynamicIconImports=W;exports.HansButton=Q;exports.HansButtonPropsList=pe;exports.HansDropdown=X;exports.HansDropdownPropsList=he;exports.HansIcon=T;exports.HansIconPropsList=ue;exports.HansInput=V;

package/dist/index.css

@@ -1 +1 @@
-/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}*,:before,:after{box-sizing:border-box;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}ol,ul{list-style:none}a{color:inherit;text-decoration:none}img,picture,video,canvas,svg{max-width:100%;display:block}button,input,select,textarea{font:inherit;color:inherit;background:0 0;border:none;outline:none}html,body,#root{height:100%}body{-webkit-font-smoothing:antialiased;line-height:1.5}.hans-button{cursor:pointer;align-items:center;gap:calc(var(--spacing)*1);border-radius:3.40282e38px;display:flex}.hans-button:disabled,.hans-button[disabled]{cursor:not-allowed;opacity:.5}.hans-button:disabled>*{pointer-events:none}.hans-button-small{padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*1)}.hans-button-medium{padding-inline:calc(var(--spacing)*5);padding-block:calc(var(--spacing)*2)}.hans-button-large{padding-inline:calc(var(--spacing)*6);padding-block:calc(var(--spacing)*3)}.hans-button-primary.hans-button-strong{background-color:var(--primary-strong-color);color:var(--primary-neutral-color)}.hans-button-primary.hans-button-default{background-color:var(--primary-default-color);color:var(--white)}.hans-button-primary.hans-button-neutral{background-color:var(--primary-neutral-color);color:var(--primary-strong-color)}.hans-button-primary.hans-button-outline{border-color:var(--primary-default-color);color:var(--primary-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-primary.hans-button-transparent{color:var(--primary-default-color);background-color:#0000}.hans-button-secondary.hans-button-strong{background-color:var(--secondary-strong-color);color:var(--secondary-neutral-color)}.hans-button-secondary.hans-button-default{background-color:var(--secondary-default-color);color:var(--white)}.hans-button-secondary.hans-button-neutral{background-color:var(--secondary-neutral-color);color:var(--secondary-strong-color)}.hans-button-secondary.hans-button-outline{border-color:var(--secondary-default-color);color:var(--secondary-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-secondary.hans-button-transparent{color:var(--secondary-default-color);background-color:#0000}.hans-button-success.hans-button-strong{background-color:var(--success-strong-color);color:var(--success-neutral-color)}.hans-button-success.hans-button-default{background-color:var(--success-default-color);color:var(--white)}.hans-button-success.hans-button-neutral{background-color:var(--success-neutral-color);color:var(--success-strong-color)}.hans-button-success.hans-button-outline{border-color:var(--success-default-color);color:var(--success-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-success.hans-button-transparent{color:var(--success-default-color);background-color:#0000}.hans-button-danger.hans-button-strong{background-color:var(--danger-strong-color);color:var(--danger-neutral-color)}.hans-button-danger.hans-button-default{background-color:var(--danger-default-color);color:var(--white)}.hans-button-danger.hans-button-neutral{background-color:var(--danger-neutral-color);color:var(--danger-strong-color)}.hans-button-danger.hans-button-outline{border-color:var(--danger-default-color);color:var(--danger-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-danger.hans-button-transparent{color:var(--danger-default-color);background-color:#0000}.hans-button-warning.hans-button-strong{background-color:var(--warning-strong-color);color:var(--warning-neutral-color)}.hans-button-warning.hans-button-default{background-color:var(--warning-default-color);color:var(--white)}.hans-button-warning.hans-button-neutral{background-color:var(--warning-neutral-color);color:var(--warning-strong-color)}.hans-button-warning.hans-button-outline{border-color:var(--warning-default-color);color:var(--warning-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-warning.hans-button-transparent{color:var(--warning-default-color);background-color:#0000}.hans-button-info.hans-button-strong{background-color:var(--info-strong-color);color:var(--info-neutral-color)}.hans-button-info.hans-button-default{background-color:var(--info-default-color);color:var(--white)}.hans-button-info.hans-button-neutral{background-color:var(--info-neutral-color);color:var(--info-strong-color)}.hans-button-info.hans-button-outline{border-color:var(--info-default-color);color:var(--info-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-info.hans-button-transparent{color:var(--info-default-color);background-color:#0000}.hans-input-div{flex-direction:column;display:flex}.hans-input-label{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.hans-input{border-radius:var(--radius-lg);border-color:var(--text-color);padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1);outline-style:var(--tw-outline-style);outline-width:1px}.hans-input-small{height:calc(var(--spacing)*6);width:calc(var(--spacing)*24)}.hans-input-medium{height:calc(var(--spacing)*8);width:calc(var(--spacing)*36)}.hans-input-large{height:calc(var(--spacing)*10);width:calc(var(--spacing)*50)}.hans-input-message{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hans-icon{justify-content:center;align-items:center;display:inline-flex}.hans-icon-small{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hans-icon-medium{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.hans-icon-large{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.hans-icon-loading{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4);animation:var(--animate-pulse);background-color:var(--gray-300);border-radius:3.40282e38px}:root{--purple-900:#2e1a73;--purple-500:#8257e5;--purple-300:#bba7ff;--blue-900:#1b3c8e;--blue-500:#3d8bff;--blue-300:#a8c9ff;--green-900:#027a43;--green-500:#04d361;--green-300:#a3f3c4;--red-900:#8b1e34;--red-500:#e83f5b;--red-300:#ffa3b1;--yellow-900:#ff8c42;--yellow-500:#f7b500;--yellow-300:#ffe9a3;--gray-900:#0e0e10;--gray-700:#2d2d33;--gray-500:#7a7a85;--gray-300:#c7c7d1;--gray-100:#f2f2f5;--black:#000;--white:#fff;--primary-strong-color:var(--purple-900);--primary-default-color:var(--purple-500);--primary-neutral-color:var(--purple-300);--secondary-strong-color:var(--blue-900);--secondary-default-color:var(--blue-500);--secondary-neutral-color:var(--blue-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--blue-900);--info-default-color:var(--blue-500);--info-neutral-color:var(--blue-300);--background-color:var(--gray-100);--text-color:var(--gray-900)}[data-theme=combination1]{--primary-strong-color:var(--purple-900);--primary-default-color:var(--purple-500);--primary-neutral-color:var(--purple-300);--secondary-strong-color:var(--blue-900);--secondary-default-color:var(--blue-500);--secondary-neutral-color:var(--blue-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--blue-900);--info-default-color:var(--blue-500);--info-neutral-color:var(--blue-300);--background-color:var(--gray-100);--text-color:var(--gray-900)}[data-theme=combination2]{--primary-strong-color:var(--green-900);--primary-default-color:var(--green-500);--primary-neutral-color:var(--green-300);--secondary-strong-color:var(--purple-900);--secondary-default-color:var(--purple-500);--secondary-neutral-color:var(--purple-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--green-900);--info-default-color:var(--green-500);--info-neutral-color:var(--green-300);--background-color:var(--gray-900);--text-color:var(--gray-100)}[data-theme=combination3]{--primary-strong-color:var(--yellow-900);--primary-default-color:var(--yellow-500);--primary-neutral-color:var(--yellow-300);--secondary-strong-color:var(--purple-900);--secondary-default-color:var(--purple-500);--secondary-neutral-color:var(--purple-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--yellow-900);--info-default-color:var(--yellow-500);--info-neutral-color:var(--yellow-300);--background-color:var(--gray-100);--text-color:var(--gray-900)}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-bold:700;--radius-lg:.5rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.\!mx-2{margin-inline:calc(var(--spacing)*2)!important}.\!mx-5{margin-inline:calc(var(--spacing)*5)!important}.\!my-1{margin-block:calc(var(--spacing)*1)!important}.\!my-2{margin-block:calc(var(--spacing)*2)!important}.\!my-3{margin-block:calc(var(--spacing)*3)!important}.\!my-4{margin-block:calc(var(--spacing)*4)!important}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.flex{display:flex}.hidden{display:none}.h-auto{height:auto}.w-6{width:calc(var(--spacing)*6)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.\!text-xl{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\!font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-\[var\(--primary-default-color\)\]{color:var(--primary-default-color)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-font-weight:initial;--tw-border-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}*,:before,:after{box-sizing:border-box;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}ol,ul{list-style:none}a{color:inherit;text-decoration:none}img,picture,video,canvas,svg{max-width:100%;display:block}button,input,select,textarea{font:inherit;color:inherit;background:0 0;border:none;outline:none}html,body,#root{height:100%}body{-webkit-font-smoothing:antialiased;line-height:1.5}.hans-button{cursor:pointer;align-items:center;gap:calc(var(--spacing)*1);border-radius:3.40282e38px;display:flex}.hans-button:disabled,.hans-button[disabled]{cursor:not-allowed;opacity:.5}.hans-button:disabled>*{pointer-events:none}.hans-button-small{padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*1)}.hans-button-medium{padding-inline:calc(var(--spacing)*5);padding-block:calc(var(--spacing)*2)}.hans-button-large{padding-inline:calc(var(--spacing)*6);padding-block:calc(var(--spacing)*3)}.hans-button-base.hans-button-strong{background-color:var(--text-color);color:var(--background-color)}.hans-button-base.hans-button-default{background-color:var(--text-color);color:var(--white)}.hans-button-base.hans-button-neutral{background-color:var(--background-color);color:var(--text-color)}.hans-button-base.hans-button-outline{border-color:var(--text-color);color:var(--text-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-base.hans-button-transparent{color:var(--text-color);background-color:#0000}.hans-button-primary.hans-button-strong{background-color:var(--primary-strong-color);color:var(--primary-neutral-color)}.hans-button-primary.hans-button-default{background-color:var(--primary-default-color);color:var(--white)}.hans-button-primary.hans-button-neutral{background-color:var(--primary-neutral-color);color:var(--primary-strong-color)}.hans-button-primary.hans-button-outline{border-color:var(--primary-default-color);color:var(--primary-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-primary.hans-button-transparent{color:var(--primary-default-color);background-color:#0000}.hans-button-secondary.hans-button-strong{background-color:var(--secondary-strong-color);color:var(--secondary-neutral-color)}.hans-button-secondary.hans-button-default{background-color:var(--secondary-default-color);color:var(--white)}.hans-button-secondary.hans-button-neutral{background-color:var(--secondary-neutral-color);color:var(--secondary-strong-color)}.hans-button-secondary.hans-button-outline{border-color:var(--secondary-default-color);color:var(--secondary-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-secondary.hans-button-transparent{color:var(--secondary-default-color);background-color:#0000}.hans-button-success.hans-button-strong{background-color:var(--success-strong-color);color:var(--success-neutral-color)}.hans-button-success.hans-button-default{background-color:var(--success-default-color);color:var(--white)}.hans-button-success.hans-button-neutral{background-color:var(--success-neutral-color);color:var(--success-strong-color)}.hans-button-success.hans-button-outline{border-color:var(--success-default-color);color:var(--success-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-success.hans-button-transparent{color:var(--success-default-color);background-color:#0000}.hans-button-danger.hans-button-strong{background-color:var(--danger-strong-color);color:var(--danger-neutral-color)}.hans-button-danger.hans-button-default{background-color:var(--danger-default-color);color:var(--white)}.hans-button-danger.hans-button-neutral{background-color:var(--danger-neutral-color);color:var(--danger-strong-color)}.hans-button-danger.hans-button-outline{border-color:var(--danger-default-color);color:var(--danger-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-danger.hans-button-transparent{color:var(--danger-default-color);background-color:#0000}.hans-button-warning.hans-button-strong{background-color:var(--warning-strong-color);color:var(--warning-neutral-color)}.hans-button-warning.hans-button-default{background-color:var(--warning-default-color);color:var(--white)}.hans-button-warning.hans-button-neutral{background-color:var(--warning-neutral-color);color:var(--warning-strong-color)}.hans-button-warning.hans-button-outline{border-color:var(--warning-default-color);color:var(--warning-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-warning.hans-button-transparent{color:var(--warning-default-color);background-color:#0000}.hans-button-info.hans-button-strong{background-color:var(--info-strong-color);color:var(--info-neutral-color)}.hans-button-info.hans-button-default{background-color:var(--info-default-color);color:var(--white)}.hans-button-info.hans-button-neutral{background-color:var(--info-neutral-color);color:var(--info-strong-color)}.hans-button-info.hans-button-outline{border-color:var(--info-default-color);color:var(--info-strong-color);outline-style:var(--tw-outline-style);background-color:#0000;outline-width:1px}.hans-button-info.hans-button-transparent{color:var(--info-default-color);background-color:#0000}.hans-input-div{flex-direction:column;display:flex}.hans-input-label{margin-bottom:calc(var(--spacing)*1);--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.hans-input{border-radius:var(--radius-lg);border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1);color:var(--text-color);--tw-outline-style:none;background-color:#0000;border-width:1px;outline-style:none}.hans-input:focus{--tw-outline-style:none;outline-style:none}.hans-input:disabled,.hans-input[disabled]{cursor:not-allowed;opacity:.5}.hans-input-field{align-items:center;width:100%;display:flex;position:relative}.hans-input-icon{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y);justify-content:center;align-items:center;display:flex;position:absolute;top:50%}.hans-input-icon-left{left:calc(var(--spacing)*2)}.hans-input-icon-right{right:calc(var(--spacing)*2)}.hans-input-has-left-icon{padding-left:calc(var(--spacing)*8)}.hans-input-has-right-icon{padding-right:calc(var(--spacing)*8)}.hans-input-icon-base{color:var(--text-color)}.hans-input-icon-primary{color:var(--primary-default-color)}.hans-input-icon-secondary{color:var(--secondary-default-color)}.hans-input-icon-success{color:var(--success-default-color)}.hans-input-icon-danger{color:var(--danger-default-color)}.hans-input-icon-warning{color:var(--warning-default-color)}.hans-input-icon-info{color:var(--info-default-color)}.hans-input-small{height:calc(var(--spacing)*6);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.hans-input-medium{height:calc(var(--spacing)*8);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hans-input-large{height:calc(var(--spacing)*10);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.hans-input-message{margin-top:calc(var(--spacing)*1);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hans-input-label-base{color:var(--text-color)}.hans-input-label-primary{color:var(--primary-default-color)}.hans-input-label-secondary{color:var(--secondary-default-color)}.hans-input-label-success{color:var(--success-default-color)}.hans-input-label-danger{color:var(--danger-default-color)}.hans-input-label-warning{color:var(--warning-default-color)}.hans-input-label-info{color:var(--info-default-color)}.hans-input-base{border-color:var(--gray-300)}.hans-input-base:focus{border-color:var(--text-color)}.hans-input-primary{border-color:var(--primary-neutral-color)}.hans-input-primary:focus{border-color:var(--primary-default-color)}.hans-input-secondary{border-color:var(--secondary-neutral-color)}.hans-input-secondary:focus{border-color:var(--secondary-default-color)}.hans-input-success{border-color:var(--success-neutral-color)}.hans-input-success:focus{border-color:var(--success-default-color)}.hans-input-danger{border-color:var(--danger-neutral-color)}.hans-input-danger:focus{border-color:var(--danger-default-color)}.hans-input-warning{border-color:var(--warning-neutral-color)}.hans-input-warning:focus{border-color:var(--warning-default-color)}.hans-input-info{border-color:var(--info-neutral-color)}.hans-input-info:focus{border-color:var(--info-default-color)}.hans-input-message-base{color:var(--text-color)}.hans-input-message-primary{color:var(--primary-default-color)}.hans-input-message-secondary{color:var(--secondary-default-color)}.hans-input-message-success{color:var(--success-default-color)}.hans-input-message-danger{color:var(--danger-default-color)}.hans-input-message-warning{color:var(--warning-default-color)}.hans-input-message-info{color:var(--info-default-color)}.hans-dropdown{flex-direction:column;width:100%;display:flex;overflow:visible}.hans-dropdown-field{width:100%;position:relative;overflow:visible}.hans-dropdown-input{width:100%}.hans-dropdown-list{z-index:9999;max-height:calc(var(--spacing)*60);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--gray-300);background-color:var(--background-color);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:var(--hans-dropdown-bg,var(--white));position:absolute;overflow:auto}.hans-dropdown-list[data-direction=down]{margin-top:calc(var(--spacing)*1);top:calc(100% + .25rem)}.hans-dropdown-list[data-direction=up]{margin-bottom:calc(var(--spacing)*1);bottom:calc(100% + .25rem)}.hans-dropdown-option{cursor:pointer;align-items:center;gap:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*2);display:flex}.hans-dropdown-option:hover{background-color:var(--hans-dropdown-hover,var(--gray-100))}.hans-dropdown-option-selected{background-color:var(--gray-100);--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.hans-dropdown-option-disabled{cursor:not-allowed;opacity:.5}.hans-dropdown-empty{padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--gray-500)}.hans-dropdown-option-image{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6);object-fit:cover;border-radius:3.40282e38px}.hans-dropdown-option-label{flex:1}.hans-dropdown-selected{margin-top:calc(var(--spacing)*2);gap:calc(var(--spacing)*2);flex-wrap:wrap;display:flex}.hans-dropdown-chip{background-color:var(--gray-100);padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--text-color);border-radius:3.40282e38px}.hans-dropdown-chip-base{background-color:var(--gray-100);color:var(--text-color)}.hans-dropdown-chip-primary{background-color:var(--primary-neutral-color);color:var(--primary-strong-color)}.hans-dropdown-chip-secondary{background-color:var(--secondary-neutral-color);color:var(--secondary-strong-color)}.hans-dropdown-chip-success{background-color:var(--success-neutral-color);color:var(--success-strong-color)}.hans-dropdown-chip-danger{background-color:var(--danger-neutral-color);color:var(--danger-strong-color)}.hans-dropdown-chip-warning{background-color:var(--warning-neutral-color);color:var(--warning-strong-color)}.hans-dropdown-chip-info{background-color:var(--info-neutral-color);color:var(--info-strong-color)}.hans-icon{justify-content:center;align-items:center;display:inline-flex}.hans-icon-small{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hans-icon-medium{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.hans-icon-large{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.hans-icon-loading{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4);animation:var(--animate-pulse);background-color:var(--gray-300);border-radius:3.40282e38px}:root{--purple-900:#2e1a73;--purple-500:#8257e5;--purple-300:#bba7ff;--blue-900:#1b3c8e;--blue-500:#3d8bff;--blue-300:#a8c9ff;--green-900:#027a43;--green-500:#04d361;--green-300:#a3f3c4;--red-900:#8b1e34;--red-500:#e83f5b;--red-300:#ffa3b1;--yellow-900:#ff8c42;--yellow-500:#f7b500;--yellow-300:#ffe9a3;--gray-900:#0e0e10;--gray-700:#2d2d33;--gray-500:#7a7a85;--gray-300:#c7c7d1;--gray-100:#f2f2f5;--black:#000;--white:#fff;--primary-strong-color:var(--purple-900);--primary-default-color:var(--purple-500);--primary-neutral-color:var(--purple-300);--secondary-strong-color:var(--blue-900);--secondary-default-color:var(--blue-500);--secondary-neutral-color:var(--blue-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--blue-900);--info-default-color:var(--blue-500);--info-neutral-color:var(--blue-300);--background-color:var(--gray-100);--text-color:var(--gray-900)}[data-theme=combination1]{--primary-strong-color:var(--purple-900);--primary-default-color:var(--purple-500);--primary-neutral-color:var(--purple-300);--secondary-strong-color:var(--blue-900);--secondary-default-color:var(--blue-500);--secondary-neutral-color:var(--blue-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--blue-900);--info-default-color:var(--blue-500);--info-neutral-color:var(--blue-300);--background-color:var(--gray-100);--text-color:var(--gray-900)}[data-theme=combination2]{--primary-strong-color:var(--green-900);--primary-default-color:var(--green-500);--primary-neutral-color:var(--green-300);--secondary-strong-color:var(--purple-900);--secondary-default-color:var(--purple-500);--secondary-neutral-color:var(--purple-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--green-900);--info-default-color:var(--green-500);--info-neutral-color:var(--green-300);--background-color:var(--gray-900);--text-color:var(--gray-100)}[data-theme=combination3]{--primary-strong-color:var(--yellow-900);--primary-default-color:var(--yellow-500);--primary-neutral-color:var(--yellow-300);--secondary-strong-color:var(--purple-900);--secondary-default-color:var(--purple-500);--secondary-neutral-color:var(--purple-300);--success-strong-color:var(--green-900);--success-default-color:var(--green-500);--success-neutral-color:var(--green-300);--danger-strong-color:var(--red-900);--danger-default-color:var(--red-500);--danger-neutral-color:var(--red-300);--warning-strong-color:var(--yellow-900);--warning-default-color:var(--yellow-500);--warning-neutral-color:var(--yellow-300);--info-strong-color:var(--yellow-900);--info-default-color:var(--yellow-500);--info-neutral-color:var(--yellow-300);--background-color:var(--gray-100);--text-color:var(--gray-900)}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-bold:700;--radius-lg:.5rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.\!mx-2{margin-inline:calc(var(--spacing)*2)!important}.\!mx-5{margin-inline:calc(var(--spacing)*5)!important}.\!my-1{margin-block:calc(var(--spacing)*1)!important}.\!my-2{margin-block:calc(var(--spacing)*2)!important}.\!my-3{margin-block:calc(var(--spacing)*3)!important}.\!my-4{margin-block:calc(var(--spacing)*4)!important}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.flex{display:flex}.hidden{display:none}.h-auto{height:auto}.w-6{width:calc(var(--spacing)*6)}.w-full{width:100%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.pb-24{padding-bottom:calc(var(--spacing)*24)}.\!text-xl{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\!font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-\[var\(--primary-default-color\)\]{color:var(--primary-default-color)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}

package/dist/index.d.ts

@@ -3,7 +3,20 @@ import { JSX } from 'react/jsx-runtime';
 
 export declare type ButtonType = 'button' | 'submit' | 'reset';
 
-declare type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+declare type Color = 'base' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+
+export declare type DropdownOption = {
+    id?: string;
+    label: string;
+    value: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    disabled?: boolean;
+};
+
+export declare type DropdownSelectionType = 'single' | 'multi';
+
+export declare type DropdownValue = string | string[];
 
 export declare const DynamicIconImports: Record<string, () => Promise<IconLibrary>>;
 
@@ -36,6 +49,61 @@ declare const HansButtonSchema: {
     readonly disabled: "boolean";
 };
 
+export declare const HansDropdown: default_2.MemoExoticComponent<(props: HansDropdownProps) => JSX.Element>;
+
+export declare type HansDropdownProps = InferPropsFromSchema<typeof HansDropdownSchema> & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'type'> & {
+    onChange?: (value: DropdownValue) => void;
+    onSearch?: (query: string) => void;
+    onInputChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+};
+
+export declare const HansDropdownPropsList: ("label" | "customClasses" | "disabled" | "value" | "defaultValue" | "labelColor" | "placeholder" | "inputId" | "inputColor" | "inputSize" | "message" | "messageColor" | "options" | "selectionType" | "enableAutocomplete" | "noOptionsText" | "dropdownBackgroundColor" | "dropdownHoverColor")[];
+
+declare const HansDropdownSchema: {
+    readonly label: "string";
+    readonly labelColor: {
+        readonly type: "custom";
+        readonly ref: Color;
+    };
+    readonly placeholder: "string";
+    readonly inputId: "string";
+    readonly inputColor: {
+        readonly type: "custom";
+        readonly ref: Color;
+    };
+    readonly inputSize: {
+        readonly type: "custom";
+        readonly ref: Size;
+    };
+    readonly message: "string";
+    readonly messageColor: {
+        readonly type: "custom";
+        readonly ref: Color;
+    };
+    readonly customClasses: "string";
+    readonly disabled: "boolean";
+    readonly options: {
+        readonly type: "custom";
+        readonly ref: DropdownOption[];
+    };
+    readonly selectionType: {
+        readonly type: "custom";
+        readonly ref: DropdownSelectionType;
+    };
+    readonly enableAutocomplete: "boolean";
+    readonly value: {
+        readonly type: "custom";
+        readonly ref: DropdownValue;
+    };
+    readonly defaultValue: {
+        readonly type: "custom";
+        readonly ref: DropdownValue;
+    };
+    readonly noOptionsText: "string";
+    readonly dropdownBackgroundColor: "string";
+    readonly dropdownHoverColor: "string";
+};
+
 export declare const HansIcon: default_2.FC<HansIconProps>;
 
 export declare type HansIconProps = InferPropsFromSchema<typeof HansIconSchema>;
@@ -57,7 +125,10 @@ declare type HansInputProps = InferPropsFromSchema<typeof HansInputSchema> & def
 
 declare const HansInputSchema: {
     readonly label: "string";
-    readonly labelColor: "string";
+    readonly labelColor: {
+        readonly type: "custom";
+        readonly ref: Color;
+    };
     readonly placeholder: "string";
     readonly value: "string";
     readonly inputId: "string";
@@ -74,9 +145,14 @@ declare const HansInputSchema: {
         readonly ref: InputType;
     };
     readonly message: "string";
-    readonly messageColor: "string";
+    readonly messageColor: {
+        readonly type: "custom";
+        readonly ref: Color;
+    };
     readonly customClasses: "string";
     readonly disabled: "boolean";
+    readonly leftIcon: "node";
+    readonly rightIcon: "node";
 };
 
 export declare type IconLibrary = Record<string, default_2.ComponentType<default_2.SVGProps<SVGSVGElement>>>;

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import d from "react";
-var h = { exports: {} }, p = {};
+import a from "react";
+var F = { exports: {} }, v = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,133 +9,161 @@ var h = { exports: {} }, p = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var b;
-function v() {
-  if (b) return p;
-  b = 1;
-  var o = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-  function i(u, t, s) {
-    var r = null;
-    if (s !== void 0 && (r = "" + s), t.key !== void 0 && (r = "" + t.key), "key" in t) {
-      s = {};
-      for (var e in t)
-        e !== "key" && (s[e] = t[e]);
-    } else s = t;
-    return t = s.ref, {
-      $$typeof: o,
-      type: u,
-      key: r,
-      ref: t !== void 0 ? t : null,
-      props: s
+var U;
+function se() {
+  if (U) return v;
+  U = 1;
+  var t = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
+  function h(f, s, o) {
+    var l = null;
+    if (o !== void 0 && (l = "" + o), s.key !== void 0 && (l = "" + s.key), "key" in s) {
+      o = {};
+      for (var u in s)
+        u !== "key" && (o[u] = s[u]);
+    } else o = s;
+    return s = o.ref, {
+      $$typeof: t,
+      type: f,
+      key: l,
+      ref: s !== void 0 ? s : null,
+      props: o
     };
   }
-  return p.Fragment = n, p.jsx = i, p.jsxs = i, p;
+  return v.Fragment = i, v.jsx = h, v.jsxs = h, v;
 }
-var x;
-function C() {
-  return x || (x = 1, h.exports = v()), h.exports;
+var Y;
+function oe() {
+  return Y || (Y = 1, F.exports = se()), F.exports;
 }
-var a = C();
-const $ = d.memo((o) => {
+var n = oe();
+const re = a.memo((t) => {
   const {
-    label: n = "",
-    buttonId: i = "hans-button",
-    buttonSize: u = "medium",
-    buttonColor: t = "primary",
-    buttonVariant: s = "default",
-    buttonType: r = "button",
-    customClasses: e = "",
-    disabled: m = !1,
-    children: c,
-    ...l
-  } = o;
-  return /* @__PURE__ */ a.jsx(
+    label: i = "",
+    buttonId: h = "hans-button",
+    buttonSize: f = "medium",
+    buttonColor: s = "primary",
+    buttonVariant: o = "default",
+    buttonType: l = "button",
+    customClasses: u = "",
+    disabled: g = !1,
+    children: b,
+    ...p
+  } = t;
+  return /* @__PURE__ */ n.jsx(
     "button",
     {
-      id: i,
-      type: r,
-      disabled: m,
+      id: h,
+      type: l,
+      disabled: g,
       className: `
         hans-button
-        hans-button-${u}
-        hans-button-${t}
+        hans-button-${f}
         hans-button-${s}
-        ${e}
+        hans-button-${o}
+        ${u}
       `,
-      ...l,
-      children: /* @__PURE__ */ a.jsx("slot", { children: c ?? (n && /* @__PURE__ */ a.jsx("span", { children: n })) })
+      ...p,
+      children: /* @__PURE__ */ n.jsx("slot", { children: b ?? (i && /* @__PURE__ */ n.jsx("span", { children: i })) })
     }
   );
 });
-$.displayName = "HansButton";
-const H = d.memo((o) => {
+re.displayName = "HansButton";
+const G = a.memo((t) => {
   const {
-    label: n = "",
-    labelColor: i = "primary",
-    placeholder: u = "",
-    value: t = "",
-    inputId: s = "hans-input",
-    inputColor: r = "primary",
-    inputSize: e = "medium",
-    inputType: m = "text",
-    message: c = "",
-    messageColor: l = "success",
-    customClasses: y = "",
-    disabled: R = !1,
-    children: j,
-    ...I
-  } = o;
-  return /* @__PURE__ */ a.jsxs("div", { className: "hans-input-div", children: [
-    j,
-    /* @__PURE__ */ a.jsx(
+    label: i = "",
+    labelColor: h = "base",
+    placeholder: f = "",
+    value: s,
+    inputId: o = "hans-input",
+    inputColor: l = "base",
+    inputSize: u = "medium",
+    inputType: g = "text",
+    message: b = "",
+    messageColor: p = "base",
+    customClasses: x = "",
+    disabled: T = !1,
+    leftIcon: c,
+    rightIcon: d,
+    children: I,
+    ...A
+  } = t, O = typeof s > "u" ? {} : { value: s };
+  return /* @__PURE__ */ n.jsxs("div", { className: "hans-input-div", children: [
+    I,
+    i ? /* @__PURE__ */ n.jsx(
       "label",
       {
-        htmlFor: s,
-        className: `
-          hans-input-label
-          hans-input-label-${i}
-        `,
-        children: n
-      }
-    ),
-    /* @__PURE__ */ a.jsx(
-      "input",
-      {
-        id: s,
-        type: m,
-        disabled: R,
-        value: t,
-        placeholder: u,
+        htmlFor: o,
         className: `
-          hans-input
-          hans-input-${e}
-          hans-input-${r}
-          ${y}
-        `,
-        ...I
+            hans-input-label
+            hans-input-label-${h}
+          `,
+        children: i
       }
-    ),
-    /* @__PURE__ */ a.jsx(
+    ) : null,
+    /* @__PURE__ */ n.jsxs("div", { className: "hans-input-field", children: [
+      c ? /* @__PURE__ */ n.jsx(
+        "span",
+        {
+          className: `
+              hans-input-icon
+              hans-input-icon-left
+              hans-input-icon-${l}
+            `,
+          children: c
+        }
+      ) : null,
+      /* @__PURE__ */ n.jsx(
+        "input",
+        {
+          id: o,
+          type: g,
+          disabled: T,
+          placeholder: f,
+          className: `
+            hans-input
+            hans-input-${u}
+            hans-input-${l}
+            ${c ? "hans-input-has-left-icon" : ""}
+            ${d ? "hans-input-has-right-icon" : ""}
+            ${x}
+          `,
+          ...O,
+          ...A
+        }
+      ),
+      d ? /* @__PURE__ */ n.jsx(
+        "span",
+        {
+          className: `
+              hans-input-icon
+              hans-input-icon-right
+              hans-input-icon-${l}
+            `,
+          children: d
+        }
+      ) : null
+    ] }),
+    b ? /* @__PURE__ */ n.jsx(
       "p",
       {
         className: `
-          hans-input-message
-          hans-input-message-${l}
-        `,
-        children: c
+            hans-input-message
+            hans-input-message-${p}
+          `,
+        children: b
       }
-    )
+    ) : null
   ] });
 });
-H.displayName = "HansInput";
-function f(o) {
-  return Object.keys(o);
+G.displayName = "HansInput";
+function P(t) {
+  return Object.keys(t);
 }
-const E = {
+const ae = {
   name: "string",
   iconSize: { type: "custom", ref: {} },
   customClasses: "string"
-}, P = f(E), N = {
+}, me = P(ae), ie = {
   Fa: () => import("./index-CuLnU-aI.js"),
   Md: () => import("./index-D5QBazti.js"),
   Bi: () => import("./index-Cru_aeJC.js"),
@@ -147,40 +175,228 @@ const E = {
   Pi: () => import("./index-CraOMhSg.js"),
   Tb: () => import("./index-C_w14lJB.js"),
   Lu: () => import("./index-HCQwBvMc.js")
-}, S = d.memo(
-  (o) => {
-    const { name: n, iconSize: i = "medium", customClasses: u = "", ...t } = o, [s, r] = d.useState(null);
-    return d.useEffect(() => {
-      let e = !0;
-      if (!n) return;
-      const m = n.slice(0, 2), c = N[m];
-      if (c)
+}, M = a.memo(
+  (t) => {
+    const { name: i, iconSize: h = "medium", customClasses: f = "", ...s } = t, [o, l] = a.useState(null);
+    return a.useEffect(() => {
+      let u = !0;
+      if (!i) return;
+      const g = i.slice(0, 2), b = ie[g];
+      if (b)
         return (async () => {
           try {
-            const l = await c();
-            if (!e) return;
-            r(() => l[n] || null);
-          } catch (l) {
-            console.warn(`[HansUI] Error loading icon ${n}:`, l), e && r(() => null);
+            const p = await b();
+            if (!u) return;
+            l(() => p[i] || null);
+          } catch (p) {
+            console.warn(`[HansUI] Error loading icon ${i}:`, p), u && l(() => null);
           }
         })(), () => {
-          e = !1;
+          u = !1;
         };
-    }, [n]), s ? /* @__PURE__ */ a.jsx(
-      s,
+    }, [i]), o ? /* @__PURE__ */ n.jsx(
+      o,
       {
         className: `
           hans-icon
-          hans-icon-${i}
-          ${u}
+          hans-icon-${h}
+          ${f}
         `,
-        ...t
+        ...s
       }
-    ) : /* @__PURE__ */ a.jsx("span", { className: "hans-icon-loading" });
+    ) : /* @__PURE__ */ n.jsx("span", { className: "hans-icon-loading" });
   }
 );
-S.displayName = "HansIcon";
-const T = {
+M.displayName = "HansIcon";
+const le = (t) => Array.isArray(t) ? t : typeof t == "string" && t.length > 0 ? [t] : [], E = (t) => t.id ?? t.value, ue = a.memo((t) => {
+  const {
+    label: i = "",
+    labelColor: h = "base",
+    placeholder: f = "Select an option",
+    inputId: s = "hans-dropdown",
+    inputColor: o = "base",
+    inputSize: l = "medium",
+    message: u = "",
+    messageColor: g = "base",
+    customClasses: b = "",
+    disabled: p = !1,
+    options: x = [],
+    selectionType: T = "single",
+    enableAutocomplete: c = !0,
+    value: d,
+    defaultValue: I,
+    noOptionsText: A = "No options",
+    dropdownBackgroundColor: O = "var(--white)",
+    dropdownHoverColor: Q = "var(--gray-100)",
+    onChange: S,
+    onSearch: _,
+    onInputChange: q,
+    ...W
+  } = t, y = T === "multi", [C, N] = a.useState(!1), [X, J] = a.useState(
+    "down"
+  ), [R, $] = a.useState(""), [Z, k] = a.useState(() => typeof d < "u" ? d : typeof I < "u" ? I : y ? [] : ""), j = a.useRef(null), B = a.useRef(null);
+  a.useEffect(() => {
+    typeof d < "u" && k(d);
+  }, [d]);
+  const w = le(
+    typeof d < "u" ? d : Z
+  ), H = a.useMemo(
+    () => x.filter(
+      (e) => w.includes(E(e))
+    ),
+    [x, w]
+  ), D = y ? H.map((e) => e.label).join(", ") : H[0]?.label ?? "";
+  a.useEffect(() => {
+    !c || y || $(D);
+  }, [c, y, D]), a.useEffect(() => {
+    const e = (r) => {
+      const m = r.target;
+      !j.current || !m || j.current.contains(m) || N(!1);
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []);
+  const L = a.useMemo(() => {
+    if (!c || R.trim().length === 0) return x;
+    const e = R.toLowerCase();
+    return x.filter(
+      (r) => r.label.toLowerCase().includes(e)
+    );
+  }, [c, x, R]);
+  a.useEffect(() => {
+    if (!C) return;
+    const e = requestAnimationFrame(() => {
+      if (!j.current || !B.current) return;
+      const r = j.current.getBoundingClientRect(), m = B.current.getBoundingClientRect(), V = window.innerHeight - r.bottom, te = r.top;
+      V < m.height && te > m.height ? J("up") : J("down");
+    });
+    return () => cancelAnimationFrame(e);
+  }, [C, L.length]);
+  const K = (e) => {
+    if (!c) return;
+    const r = e.target.value;
+    $(r), C || N(!0), _ && _(r), q && q(e);
+  }, ee = (e) => {
+    if (e.disabled || p) return;
+    const r = E(e);
+    if (y) {
+      const m = w.includes(r) ? w.filter((V) => V !== r) : [...w, r];
+      typeof d > "u" && k(m), S && S(m), c && $("");
+      return;
+    }
+    typeof d > "u" && k(r), S && S(r), c && $(e.label), N(!1);
+  }, z = () => {
+    p || N(!0);
+  }, ne = c ? R : D;
+  return /* @__PURE__ */ n.jsxs("div", { className: "hans-dropdown", ref: j, children: [
+    i ? /* @__PURE__ */ n.jsx(
+      "label",
+      {
+        htmlFor: s,
+        className: `
+            hans-input-label
+            hans-input-label-${h}
+          `,
+        children: i
+      }
+    ) : null,
+    /* @__PURE__ */ n.jsxs("div", { className: "hans-dropdown-field", onMouseDown: z, children: [
+      /* @__PURE__ */ n.jsx(
+        G,
+        {
+          label: "",
+          message: "",
+          inputId: s,
+          inputColor: o,
+          inputSize: l,
+          placeholder: f,
+          customClasses: `hans-dropdown-input ${b}`,
+          disabled: p,
+          value: ne,
+          onChange: K,
+          onFocus: z,
+          onClick: z,
+          readOnly: !c,
+          leftIcon: c ? /* @__PURE__ */ n.jsx(M, { name: "FaSearch", iconSize: "small" }) : void 0,
+          rightIcon: /* @__PURE__ */ n.jsx(
+            M,
+            {
+              name: C ? "MdArrowDropUp" : "MdArrowDropDown",
+              iconSize: "small"
+            }
+          ),
+          ...W
+        }
+      ),
+      C && !p ? /* @__PURE__ */ n.jsx(
+        "ul",
+        {
+          ref: B,
+          className: "hans-dropdown-list",
+          role: "listbox",
+          "aria-multiselectable": y,
+          "data-direction": X,
+          style: {
+            "--hans-dropdown-bg": O,
+            "--hans-dropdown-hover": Q
+          },
+          children: L.length === 0 ? /* @__PURE__ */ n.jsx("li", { className: "hans-dropdown-empty", children: A }) : L.map((e) => {
+            const r = E(e), m = w.includes(r);
+            return /* @__PURE__ */ n.jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": m,
+                className: `
+                      hans-dropdown-option
+                      ${m ? "hans-dropdown-option-selected" : ""}
+                      ${e.disabled ? "hans-dropdown-option-disabled" : ""}
+                    `,
+                onClick: () => ee(e),
+                children: [
+                  e.imageSrc ? /* @__PURE__ */ n.jsx(
+                    "img",
+                    {
+                      className: "hans-dropdown-option-image",
+                      src: e.imageSrc,
+                      alt: e.imageAlt ?? e.label
+                    }
+                  ) : null,
+                  /* @__PURE__ */ n.jsx("span", { className: "hans-dropdown-option-label", children: e.label })
+                ]
+              },
+              r
+            );
+          })
+        }
+      ) : null
+    ] }),
+    y && H.length > 0 ? /* @__PURE__ */ n.jsx("div", { className: "hans-dropdown-selected", children: H.map((e) => /* @__PURE__ */ n.jsx(
+      "span",
+      {
+        className: `
+                hans-dropdown-chip
+                hans-dropdown-chip-${o}
+              `,
+        children: e.label
+      },
+      E(e)
+    )) }) : null,
+    u ? /* @__PURE__ */ n.jsx(
+      "p",
+      {
+        className: `
+            hans-input-message
+            hans-input-message-${g}
+          `,
+        children: u
+      }
+    ) : null
+  ] });
+});
+ue.displayName = "HansDropdown";
+const ce = {
   label: "string",
   buttonId: "string",
   buttonSize: { type: "custom", ref: {} },
@@ -189,12 +405,33 @@ const T = {
   buttonType: { type: "custom", ref: {} },
   customClasses: "string",
   disabled: "boolean"
-}, _ = f(T);
+}, he = P(ce), de = {
+  label: "string",
+  labelColor: { type: "custom", ref: {} },
+  placeholder: "string",
+  inputId: "string",
+  inputColor: { type: "custom", ref: {} },
+  inputSize: { type: "custom", ref: {} },
+  message: "string",
+  messageColor: { type: "custom", ref: {} },
+  customClasses: "string",
+  disabled: "boolean",
+  options: { type: "custom", ref: {} },
+  selectionType: { type: "custom", ref: {} },
+  enableAutocomplete: "boolean",
+  value: { type: "custom", ref: {} },
+  defaultValue: { type: "custom", ref: {} },
+  noOptionsText: "string",
+  dropdownBackgroundColor: "string",
+  dropdownHoverColor: "string"
+}, fe = P(de);
 export {
-  N as DynamicIconImports,
-  $ as HansButton,
-  _ as HansButtonPropsList,
-  S as HansIcon,
-  P as HansIconPropsList,
-  H as HansInput
+  ie as DynamicIconImports,
+  re as HansButton,
+  he as HansButtonPropsList,
+  ue as HansDropdown,
+  fe as HansDropdownPropsList,
+  M as HansIcon,
+  me as HansIconPropsList,
+  G as HansInput
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "hans-ui-design-lib",
   "description": "UI Design System Base Lib",
   "author": "Victor Hanszman",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.cjs.js",