hans-ui-design-lib 0.0.70 → 0.0.72

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");var M={exports:{}},j={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react");var M={exports:{}},j={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,48 +6,52 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */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:`
+ */var Q;function ue(){if(Q)return j;Q=1;var s=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function d(m,r,i){var l=null;if(i!==void 0&&(l=""+i),r.key!==void 0&&(l=""+r.key),"key"in r){i={};for(var c in r)c!=="key"&&(i[c]=r[c])}else i=r;return r=i.ref,{$$typeof:s,type:m,key:l,ref:r!==void 0?r:null,props:i}}return j.Fragment=o,j.jsx=d,j.jsxs=d,j}var W;function de(){return W||(W=1,M.exports=ue()),M.exports}var n=de();const X=t.memo(s=>{const{label:o="",buttonId:d="hans-button",buttonSize:m="medium",buttonColor:r="primary",buttonVariant:i="default",buttonType:l="button",customClasses:c="",disabled:g=!1,children:f,...h}=s;return n.jsx("button",{id:d,type:l,disabled:g,className:`
         hans-button
-        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-button-${m}
+        hans-button-${r}
+        hans-button-${i}
+        ${c}
+      `,...h,children:n.jsx("slot",{children:f??(o&&n.jsx("span",{children:o}))})})});X.displayName="HansButton";const V=t.memo(s=>{const{label:o="",labelColor:d="base",placeholder:m="",value:r,inputId:i="hans-input",inputColor:l="base",inputSize:c="medium",inputType:g="text",message:f="",messageColor:h="base",customClasses:v="",disabled:T=!1,leftIcon:u,rightIcon:p,children:I,...q}=s,z=typeof r>"u"?{}:{value:r};return n.jsxs("div",{className:"hans-input-div",children:[I,o?n.jsx("label",{htmlFor:i,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-label-${d}
+          `,children:o}):null,n.jsxs("div",{className:"hans-input-field",children:[u?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:`
+            `,children:u}):null,n.jsx("input",{id:i,type:g,disabled:T,placeholder:m,className:`
             hans-input
-            hans-input-${u}
+            hans-input-${c}
             hans-input-${l}
-            ${c?"hans-input-has-left-icon":""}
-            ${d?"hans-input-has-right-icon":""}
-            ${x}
-          `,...A,...E}),d?n.jsx("span",{className:`
+            ${u?"hans-input-has-left-icon":""}
+            ${p?"hans-input-has-right-icon":""}
+            ${v}
+          `,...z,...q}),p?n.jsx("span",{className:`
               hans-input-icon
               hans-input-icon-right
               hans-input-icon-${l}
-            `,children:d}):null]}),b?n.jsx("p",{className:`
+            `,children:p}):null]}),f?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-input-message-${h}
+          `,children:f}):null]})});V.displayName="HansInput";function E(s){return Object.keys(s)}const pe={name:"string",iconSize:{type:"custom",ref:{}},customClasses:"string"},me=E(pe),Z={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"))},S=t.memo(s=>{const{name:o,iconSize:d="medium",customClasses:m="",...r}=s,[i,l]=t.useState(null);return t.useEffect(()=>{let c=!0;if(!o)return;const g=o.slice(0,2),f=Z[g];if(f)return(async()=>{try{const h=await f();if(!c)return;l(()=>h[o]||null)}catch(h){console.warn(`[HansUI] Error loading icon ${o}:`,h),c&&l(()=>null)}})(),()=>{c=!1}},[o]),i?n.jsx(i,{className:`
           hans-icon
-          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-icon-${d}
+          ${m}
+        `,...r}):n.jsx("span",{className:"hans-icon-loading"})});S.displayName="HansIcon";const he={small:"small",medium:"medium",large:"large"},_=t.memo(s=>{const{src:o="",alt:d="Avatar",avatarSize:m="medium",customClasses:r="",fallbackIconName:i="MdOutlineAccountCircle",...l}=s,[c,g]=t.useState(!1);t.useEffect(()=>{g(!1)},[o]);const f=!o||c;return n.jsx("div",{className:`
+        hans-avatar
+        hans-avatar-${m}
+        ${r}
+      `,"aria-label":d,children:f?n.jsx("span",{className:"hans-avatar-fallback",role:"img","aria-hidden":"true",children:n.jsx(S,{name:i,iconSize:he[m],customClasses:"hans-avatar-icon"})}):n.jsx("img",{src:o,alt:d,className:"hans-avatar-img",onError:()=>g(!0),...l})})});_.displayName="HansAvatar";const fe=s=>Array.isArray(s)?s:typeof s=="string"&&s.length>0?[s]:[],A=s=>s.id??s.value,K=t.memo(s=>{const{label:o="",labelColor:d="base",placeholder:m="Select an option",inputId:r="hans-dropdown",inputColor:i="base",inputSize:l="medium",message:c="",messageColor:g="base",customClasses:f="",disabled:h=!1,options:v=[],selectionType:T="single",enableAutocomplete:u=!0,value:p,defaultValue:I,noOptionsText:q="No options",dropdownBackgroundColor:z="var(--white)",dropdownHoverColor:ee="var(--gray-100)",onSearch:J,onChange:H,onInputChange:U,...ne}=s,x=T==="multi",[y,N]=t.useState(!1),[se,Y]=t.useState("down"),[P,R]=t.useState(""),[te,L]=t.useState(()=>typeof p<"u"?p:typeof I<"u"?I:x?[]:""),C=t.useRef(null),k=t.useRef(null),D=t.useRef(!1);t.useEffect(()=>{typeof p<"u"&&L(p)},[p]);const w=fe(typeof p<"u"?p:te),$=t.useMemo(()=>v.filter(e=>w.includes(A(e))),[v,w]),O=x?$.map(e=>e.label).join(", "):$[0]?.label??"";t.useEffect(()=>{!u||x||R(O)},[u,x,O]),t.useEffect(()=>{const e=a=>{const b=a.target;!C.current||!b||C.current.contains(b)||N(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const B=t.useMemo(()=>{if(!u||P.trim().length===0)return v;const e=P.toLowerCase();return v.filter(a=>a.label.toLowerCase().includes(e))},[u,v,P]);t.useEffect(()=>{if(!y)return;const e=requestAnimationFrame(()=>{if(!C.current||!k.current)return;const a=C.current.getBoundingClientRect(),b=k.current.getBoundingClientRect(),F=window.innerHeight-a.bottom,ce=a.top;F<b.height&&ce>b.height?Y("up"):Y("down")});return()=>cancelAnimationFrame(e)},[y,B.length]);const re=e=>{if(!u)return;const a=e.target.value;R(a),y||N(!0),J&&J(a),U&&U(e)},ae=e=>{if(e.disabled||h)return;const a=A(e);if(x){const b=w.includes(a)?w.filter(F=>F!==a):[...w,a];typeof p>"u"&&L(b),H&&H(b),u&&R("");return}typeof p>"u"&&L(a),H&&H(a),u&&R(e.label),N(!1)},G=(e,a)=>{if(!h){if(a==="focus"&&D.current){D.current=!1;return}a==="toggle"&&!e&&(D.current=!0),N(e)}},oe=()=>{G(!0,"focus")},ie=()=>{G(!y,"toggle")},le=u?P:O;return n.jsxs("div",{className:"hans-dropdown",ref:C,children:[o?n.jsx("label",{htmlFor:r,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-input-label-${d}
+          `,children:o}):null,n.jsxs("div",{className:"hans-dropdown-field",children:[n.jsx(V,{label:"",message:"",inputId:r,inputColor:i,inputSize:l,placeholder:m,customClasses:`hans-dropdown-input ${f}`,disabled:h,value:le,onChange:re,onFocus:oe,onMouseDown:ie,readOnly:!u,leftIcon:u?n.jsx(S,{name:"FaSearch",iconSize:"small"}):void 0,rightIcon:n.jsx(S,{name:y?"MdArrowDropUp":"MdArrowDropDown",iconSize:"small"}),...ne}),y&&!h?n.jsx("ul",{ref:k,className:"hans-dropdown-list",role:"listbox","aria-multiselectable":x,"data-direction":se,style:{"--hans-dropdown-bg":z,"--hans-dropdown-hover":ee},children:B.length===0?n.jsx("li",{className:"hans-dropdown-empty",children:q}):B.map(e=>{const a=A(e),b=w.includes(a);return n.jsxs("li",{role:"option","aria-selected":b,className:`
                       hans-dropdown-option
-                      ${m?"hans-dropdown-option-selected":""}
+                      ${b?"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:`
+                    `,onClick:()=>ae(e),children:[e.imageSrc?n.jsx(_,{src:e.imageSrc,alt:e.imageAlt??e.label,avatarSize:"small"}):null,n.jsx("span",{className:"hans-dropdown-option-label",children:e.label})]},a)})}):null]}),x&&$.length>0?n.jsx("div",{className:"hans-dropdown-selected",children:$.map(e=>n.jsx("span",{className:`
                 hans-dropdown-chip
-                hans-dropdown-chip-${o}
-              `,children:e.label},$(e)))}):null,u?n.jsx("p",{className:`
+                hans-dropdown-chip-${i}
+              `,children:e.label},A(e)))}):null,c?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;
+          `,children:c}):null]})});K.displayName="HansDropdown";const be={label:"string",buttonId:"string",buttonSize:{type:"custom",ref:{}},buttonColor:{type:"custom",ref:{}},buttonVariant:{type:"custom",ref:{}},buttonType:{type:"custom",ref:{}},customClasses:"string",disabled:"boolean"},ge=E(be),ve={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"},xe=E(ve),ye={src:"string",alt:"string",avatarSize:{type:"custom",ref:{}},customClasses:"string",fallbackIconName:"string"},we=E(ye);exports.DynamicIconImports=Z;exports.HansAvatar=_;exports.HansAvatarPropsList=we;exports.HansButton=X;exports.HansButtonPropsList=ge;exports.HansDropdown=K;exports.HansDropdownPropsList=xe;exports.HansIcon=S;exports.HansIconPropsList=me;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-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}}
+/*! 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-leading:initial;--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:-4px;top:calc(100% + .25rem)}.hans-dropdown-list[data-direction=up]{margin-bottom:-4px;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-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-avatar{border-style:var(--tw-border-style);border-width:1px;border-color:var(--gray-300);background-color:var(--gray-100);color:var(--gray-700);border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.hans-avatar-small{width:22px;height:22px}.hans-avatar-medium{width:40px;height:40px}.hans-avatar-large{width:100px;height:100px}.hans-avatar-img{object-fit:cover;width:100%;height:100%}.hans-avatar-fallback{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.hans-avatar-icon{--tw-leading:1;width:100%;height:100%;line-height:1}.hans-avatar-small .hans-avatar-icon{font-size:22px}.hans-avatar-medium .hans-avatar-icon{font-size:40px}.hans-avatar-large .hans-avatar-icon{font-size:100px}.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-leading{syntax:"*";inherits:false}@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

@@ -1,4 +1,6 @@
-import { default as default_2 } from 'react';
+import { default as default_2 } from '../../../../node_modules/react';
+import { default as default_3 } from '../../node_modules/react';
+import { default as default_4 } from '../../../node_modules/react';
 import { JSX } from 'react/jsx-runtime';
 
 export declare type ButtonType = 'button' | 'submit' | 'reset';
@@ -20,6 +22,23 @@ export declare type DropdownValue = string | string[];
 
 export declare const DynamicIconImports: Record<string, () => Promise<IconLibrary>>;
 
+export declare const HansAvatar: default_4.MemoExoticComponent<(props: HansAvatarProps) => JSX.Element>;
+
+export declare type HansAvatarProps = InferPropsFromSchema<typeof HansAvatarSchema> & Omit<default_4.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'size'>;
+
+export declare const HansAvatarPropsList: ("src" | "alt" | "customClasses" | "avatarSize" | "fallbackIconName")[];
+
+declare const HansAvatarSchema: {
+    readonly src: "string";
+    readonly alt: "string";
+    readonly avatarSize: {
+        readonly type: "custom";
+        readonly ref: Size;
+    };
+    readonly customClasses: "string";
+    readonly fallbackIconName: "string";
+};
+
 export declare const HansButton: default_2.MemoExoticComponent<(props: HansButtonProps) => JSX.Element>;
 
 export declare type HansButtonProps = InferPropsFromSchema<typeof HansButtonSchema> & default_2.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -52,8 +71,8 @@ declare const HansButtonSchema: {
 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;
+    onChange?: (value: DropdownValue) => void;
     onInputChange?: default_2.ChangeEventHandler<HTMLInputElement>;
 };
 
@@ -104,7 +123,7 @@ declare const HansDropdownSchema: {
     readonly dropdownHoverColor: "string";
 };
 
-export declare const HansIcon: default_2.FC<HansIconProps>;
+export declare const HansIcon: default_4.FC<HansIconProps>;
 
 export declare type HansIconProps = InferPropsFromSchema<typeof HansIconSchema>;
 
@@ -155,10 +174,10 @@ declare const HansInputSchema: {
     readonly rightIcon: "node";
 };
 
-export declare type IconLibrary = Record<string, default_2.ComponentType<default_2.SVGProps<SVGSVGElement>>>;
+export declare type IconLibrary = Record<string, default_4.ComponentType<default_4.SVGProps<SVGSVGElement>>>;
 
 declare type InferPropsFromSchema<T extends Record<string, SchemaType>> = Partial<{
-    [K in keyof T]: T[K] extends 'string' ? string : T[K] extends 'boolean' ? boolean : T[K] extends 'number' ? number : T[K] extends 'node' ? default_2.ReactNode : T[K] extends 'json' ? Record<string, unknown> : T[K] extends {
+    [K in keyof T]: T[K] extends 'string' ? string : T[K] extends 'boolean' ? boolean : T[K] extends 'number' ? number : T[K] extends 'node' ? default_3.ReactNode : T[K] extends 'json' ? Record<string, unknown> : T[K] extends {
         type: 'custom';
         ref: infer U;
     } ? U : never;

package/dist/index.es.js

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