hans-ui-design-lib 0.0.73 → 0.0.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +34 -32
- package/dist/index.css +1 -1
- package/dist/index.d.ts +23 -0
- package/dist/index.es.js +297 -243
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");var M={exports:{}},I={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -6,52 +6,54 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var W;function me(){if(W)return I;W=1;var n=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function u(d,t,i){var c=null;if(i!==void 0&&(c=""+i),t.key!==void 0&&(c=""+t.key),"key"in t){i={};for(var l in t)l!=="key"&&(i[l]=t[l])}else i=t;return t=i.ref,{$$typeof:n,type:d,key:c,ref:t!==void 0?t:null,props:i}}return I.Fragment=o,I.jsx=u,I.jsxs=u,I}var X;function pe(){return X||(X=1,M.exports=me()),M.exports}var s=pe();const Z=r.memo(n=>{const{label:o="",buttonId:u="hans-button",buttonSize:d="medium",buttonColor:t="primary",buttonVariant:i="default",buttonType:c="button",customClasses:l="",disabled:b=!1,children:h,...f}=n;return s.jsx("button",{id:u,type:c,disabled:b,className:`
|
|
10
10
|
hans-button
|
|
11
|
-
hans-button-${
|
|
12
|
-
hans-button-${
|
|
11
|
+
hans-button-${d}
|
|
12
|
+
hans-button-${t}
|
|
13
13
|
hans-button-${i}
|
|
14
|
-
${
|
|
15
|
-
`,...
|
|
14
|
+
${l}
|
|
15
|
+
`,...f,children:s.jsx("slot",{children:h??(o&&s.jsx("span",{children:o}))})})});Z.displayName="HansButton";const V=r.memo(n=>{const{label:o="",labelColor:u="base",placeholder:d="",value:t,inputId:i="hans-input",inputColor:c="base",inputSize:l="medium",inputType:b="text",message:h="",messageColor:f="base",customClasses:v="",disabled:z=!1,leftIcon:m,rightIcon:p,children:$,...L}=n,q=typeof t>"u"?{}:{value:t};return s.jsxs("div",{className:"hans-input-div",children:[$,o?s.jsx("label",{htmlFor:i,className:`
|
|
16
16
|
hans-input-label
|
|
17
|
-
hans-input-label-${
|
|
18
|
-
`,children:o}):null,
|
|
17
|
+
hans-input-label-${u}
|
|
18
|
+
`,children:o}):null,s.jsxs("div",{className:"hans-input-field",children:[m?s.jsx("span",{className:`
|
|
19
19
|
hans-input-icon
|
|
20
20
|
hans-input-icon-left
|
|
21
|
-
hans-input-icon-${
|
|
22
|
-
`,children:
|
|
21
|
+
hans-input-icon-${c}
|
|
22
|
+
`,children:m}):null,s.jsx("input",{id:i,type:b,disabled:z,placeholder:d,className:`
|
|
23
23
|
hans-input
|
|
24
|
-
hans-input-${c}
|
|
25
24
|
hans-input-${l}
|
|
26
|
-
|
|
25
|
+
hans-input-${c}
|
|
26
|
+
${m?"hans-input-has-left-icon":""}
|
|
27
27
|
${p?"hans-input-has-right-icon":""}
|
|
28
28
|
${v}
|
|
29
|
-
`,...L
|
|
29
|
+
`,...q,...L}),p?s.jsx("span",{className:`
|
|
30
30
|
hans-input-icon
|
|
31
31
|
hans-input-icon-right
|
|
32
|
-
hans-input-icon-${
|
|
33
|
-
`,children:p}):null]}),
|
|
32
|
+
hans-input-icon-${c}
|
|
33
|
+
`,children:p}):null]}),h?s.jsx("p",{className:`
|
|
34
34
|
hans-input-message
|
|
35
|
-
hans-input-message-${
|
|
36
|
-
`,children:
|
|
35
|
+
hans-input-message-${f}
|
|
36
|
+
`,children:h}):null]})});V.displayName="HansInput";function N(n){return Object.keys(n)}const he={name:"string",iconSize:{type:"custom",ref:{}},customClasses:"string"},fe=N(he),K={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"))},w=r.memo(n=>{const{name:o,iconSize:u="medium",customClasses:d="",...t}=n,[i,c]=r.useState(null);return r.useEffect(()=>{let l=!0;if(!o)return;const b=o.slice(0,2),h=K[b];if(h)return(async()=>{try{const f=await h();if(!l)return;c(()=>f[o]||null)}catch(f){console.warn(`[HansUI] Error loading icon ${o}:`,f),l&&c(()=>null)}})(),()=>{l=!1}},[o]),i?s.jsx(i,{className:`
|
|
37
37
|
hans-icon
|
|
38
|
-
hans-icon-${
|
|
39
|
-
${
|
|
40
|
-
`,...
|
|
38
|
+
hans-icon-${u}
|
|
39
|
+
${d}
|
|
40
|
+
`,...t}):s.jsx("span",{className:"hans-icon-loading"})});w.displayName="HansIcon";const _=r.memo(n=>{const{src:o="",alt:u="Avatar",avatarSize:d="medium",customClasses:t="",fallbackIconName:i="MdOutlineAccountCircle",...c}=n,[l,b]=r.useState(!1);r.useEffect(()=>{b(!1)},[o]);const h=!o||l;return s.jsx("div",{className:`
|
|
41
41
|
hans-avatar
|
|
42
|
-
hans-avatar-${
|
|
43
|
-
${
|
|
44
|
-
`,"aria-label":
|
|
42
|
+
hans-avatar-${d}
|
|
43
|
+
${t}
|
|
44
|
+
`,"aria-label":u,children:h?s.jsx("span",{className:"hans-avatar-fallback",role:"img","aria-hidden":"true",children:s.jsx(w,{name:i,iconSize:d,customClasses:"hans-avatar-icon"})}):s.jsx("img",{src:o,alt:u,className:"hans-avatar-img",onError:()=>b(!0),...c})})});_.displayName="HansAvatar";const J=r.memo(n=>{const{label:o="",tagSize:u="small",tagColor:d="base",actionIcon:t="",customClasses:i="",disabled:c=!1,onAction:l,...b}=n,h=!!(l&&t);return s.jsxs("span",{className:`
|
|
45
|
+
hans-tag
|
|
46
|
+
hans-tag-${u}
|
|
47
|
+
hans-tag-${d}
|
|
48
|
+
${i}
|
|
49
|
+
`,...b,children:[s.jsx("span",{className:"hans-tag-label",children:o}),h?s.jsx("button",{type:"button",className:"hans-tag-action","aria-label":`Action ${o}`,onClick:l,disabled:c,children:s.jsx(w,{name:t,iconSize:"medium"})}):null]})});J.displayName="HansTag";const ge=n=>Array.isArray(n)?n:typeof n=="string"&&n.length>0?[n]:[],H=n=>n.id??n.value,ee=r.memo(n=>{const{label:o="",labelColor:u="base",placeholder:d="Select an option",inputId:t="hans-dropdown",inputColor:i="base",inputSize:c="medium",message:l="",messageColor:b="base",customClasses:h="",disabled:f=!1,options:v=[],selectionType:z="single",enableAutocomplete:m=!0,value:p,defaultValue:$,noOptionsText:L="No options",dropdownBackgroundColor:q="var(--white)",dropdownHoverColor:se="var(--gray-100)",onSearch:U,onChange:C,onInputChange:Y,...ne}=n,x=z==="multi",[j,P]=r.useState(!1),[te,G]=r.useState("down"),[A,R]=r.useState(""),[ae,T]=r.useState(()=>typeof p<"u"?p:typeof $<"u"?$:x?[]:""),S=r.useRef(null),k=r.useRef(null),D=r.useRef(!1);r.useEffect(()=>{typeof p<"u"&&T(p)},[p]);const y=ge(typeof p<"u"?p:ae),E=r.useMemo(()=>v.filter(e=>y.includes(H(e))),[v,y]),O=x?E.map(e=>e.label).join(", "):E[0]?.label??"";r.useEffect(()=>{!m||x||R(O)},[m,x,O]),r.useEffect(()=>{const e=a=>{const g=a.target;!S.current||!g||S.current.contains(g)||P(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const B=r.useMemo(()=>{if(!m||A.trim().length===0)return v;const e=A.toLowerCase();return v.filter(a=>a.label.toLowerCase().includes(e))},[m,v,A]);r.useEffect(()=>{if(!j)return;const e=requestAnimationFrame(()=>{if(!S.current||!k.current)return;const a=S.current.getBoundingClientRect(),g=k.current.getBoundingClientRect(),F=window.innerHeight-a.bottom,de=a.top;F<g.height&&de>g.height?G("up"):G("down")});return()=>cancelAnimationFrame(e)},[j,B.length]);const oe=e=>{if(!m)return;const a=e.target.value;R(a),j||P(!0),U&&U(a),Y&&Y(e)},re=e=>{if(e.disabled||f)return;const a=H(e);if(x){const g=y.includes(a)?y.filter(F=>F!==a):[...y,a];typeof p>"u"&&T(g),C&&C(g),m&&R("");return}typeof p>"u"&&T(a),C&&C(a),m&&R(e.label),P(!1)},ie=e=>{const a=y.filter(g=>g!==e);typeof p>"u"&&T(a),C&&C(a)},Q=(e,a)=>{if(!f){if(a==="focus"&&D.current){D.current=!1;return}a==="toggle"&&!e&&(D.current=!0),P(e)}},le=()=>{Q(!0,"focus")},ce=()=>{Q(!j,"toggle")},ue=m?A:O;return s.jsxs("div",{className:"hans-dropdown",ref:S,children:[o?s.jsx("label",{htmlFor:t,className:`
|
|
45
50
|
hans-input-label
|
|
46
|
-
hans-input-label-${
|
|
47
|
-
`,children:o}):null,
|
|
51
|
+
hans-input-label-${u}
|
|
52
|
+
`,children:o}):null,s.jsxs("div",{className:"hans-dropdown-field",children:[s.jsx(V,{label:"",message:"",inputId:t,inputColor:i,inputSize:c,placeholder:d,customClasses:`hans-dropdown-input ${h}`,disabled:f,value:ue,onChange:oe,onFocus:le,onMouseDown:ce,readOnly:!m,leftIcon:m?s.jsx(w,{name:"FaSearch",iconSize:"small"}):void 0,rightIcon:s.jsx(w,{name:j?"MdArrowDropUp":"MdArrowDropDown",iconSize:"small"}),...ne}),j&&!f?s.jsx("ul",{ref:k,className:"hans-dropdown-list",role:"listbox","aria-multiselectable":x,"data-direction":te,style:{"--hans-dropdown-bg":q,"--hans-dropdown-hover":se},children:B.length===0?s.jsx("li",{className:"hans-dropdown-empty",children:L}):B.map(e=>{const a=H(e),g=y.includes(a);return s.jsxs("li",{role:"option","aria-selected":g,className:`
|
|
48
53
|
hans-dropdown-option
|
|
49
|
-
${
|
|
54
|
+
${g?"hans-dropdown-option-selected":""}
|
|
50
55
|
${e.disabled?"hans-dropdown-option-disabled":""}
|
|
51
|
-
`,onClick:()=>
|
|
52
|
-
hans-dropdown-chip
|
|
53
|
-
hans-dropdown-chip-${i}
|
|
54
|
-
`,children:e.label},A(e)))}):null,c?n.jsx("p",{className:`
|
|
56
|
+
`,onClick:()=>re(e),children:[e.imageSrc?s.jsx(_,{src:e.imageSrc,alt:e.imageAlt??e.label,avatarSize:"small"}):null,s.jsx("span",{className:"hans-dropdown-option-label",children:e.label})]},a)})}):null]}),x&&E.length>0?s.jsx("div",{className:"hans-dropdown-selected",children:E.map(e=>s.jsx(J,{label:e.label,tagSize:"small",tagColor:"base",actionIcon:"IoIosCloseCircle",onAction:()=>ie(H(e)),disabled:f},H(e)))}):null,l?s.jsx("p",{className:`
|
|
55
57
|
hans-input-message
|
|
56
|
-
hans-input-message-${
|
|
57
|
-
`,children:
|
|
58
|
+
hans-input-message-${b}
|
|
59
|
+
`,children:l}):null]})});ee.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"},ve=N(be),xe={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"},ye=N(xe),Ce={src:"string",alt:"string",avatarSize:{type:"custom",ref:{}},customClasses:"string",fallbackIconName:"string"},je=N(Ce),we={label:"string",tagSize:{type:"custom",ref:{}},tagColor:{type:"custom",ref:{}},actionIcon:"string",customClasses:"string",disabled:"boolean"},Se=N(we);exports.DynamicIconImports=K;exports.HansAvatar=_;exports.HansAvatarPropsList=je;exports.HansButton=Z;exports.HansButtonPropsList=ve;exports.HansDropdown=ee;exports.HansDropdownPropsList=ye;exports.HansIcon=w;exports.HansIconPropsList=fe;exports.HansInput=V;exports.HansTag=J;exports.HansTagPropsList=Se;
|
package/dist/index.css
CHANGED
|
@@ -1 +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-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-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-small{width:22px;height:22px}.hans-avatar-medium{width:40px;height:40px}.hans-avatar-large{width:100px;height:100px}.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}}
|
|
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-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-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-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-small{width:22px;height:22px}.hans-avatar-medium{width:40px;height:40px}.hans-avatar-large{width:100px;height:100px}.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-tag{align-items:center;gap:calc(var(--spacing)*1);border-radius:3.40282e38px;display:inline-flex}.hans-tag-label{--tw-leading:1;line-height:1}.hans-tag-action{cursor:pointer;--tw-border-style:none;padding:calc(var(--spacing)*0);background-color:#0000;border-style:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex}.hans-tag-action:disabled{cursor:not-allowed;opacity:.5}.hans-tag-small{padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*2);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.hans-tag-medium{padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hans-tag-large{padding-inline:calc(var(--spacing)*5);padding-block:calc(var(--spacing)*4);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.hans-tag-base{background-color:var(--gray-100);color:var(--text-color)}.hans-tag-primary{background-color:var(--primary-neutral-color);color:var(--primary-strong-color)}.hans-tag-secondary{background-color:var(--secondary-neutral-color);color:var(--secondary-strong-color)}.hans-tag-success{background-color:var(--success-neutral-color);color:var(--success-strong-color)}.hans-tag-danger{background-color:var(--danger-neutral-color);color:var(--danger-strong-color)}.hans-tag-warning{background-color:var(--warning-neutral-color);color:var(--warning-strong-color)}.hans-tag-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-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
CHANGED
|
@@ -172,6 +172,29 @@ declare const HansInputSchema: {
|
|
|
172
172
|
readonly rightIcon: "node";
|
|
173
173
|
};
|
|
174
174
|
|
|
175
|
+
export declare const HansTag: default_2.MemoExoticComponent<(props: HansTagProps) => JSX.Element>;
|
|
176
|
+
|
|
177
|
+
export declare type HansTagProps = InferPropsFromSchema<typeof HansTagSchema> & Omit<default_2.HTMLAttributes<HTMLSpanElement>, 'color'> & {
|
|
178
|
+
onAction?: () => void;
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
export declare const HansTagPropsList: ("label" | "customClasses" | "disabled" | "tagSize" | "tagColor" | "actionIcon")[];
|
|
182
|
+
|
|
183
|
+
declare const HansTagSchema: {
|
|
184
|
+
readonly label: "string";
|
|
185
|
+
readonly tagSize: {
|
|
186
|
+
readonly type: "custom";
|
|
187
|
+
readonly ref: Size;
|
|
188
|
+
};
|
|
189
|
+
readonly tagColor: {
|
|
190
|
+
readonly type: "custom";
|
|
191
|
+
readonly ref: Color;
|
|
192
|
+
};
|
|
193
|
+
readonly actionIcon: "string";
|
|
194
|
+
readonly customClasses: "string";
|
|
195
|
+
readonly disabled: "boolean";
|
|
196
|
+
};
|
|
197
|
+
|
|
175
198
|
export declare type IconLibrary = Record<string, default_2.ComponentType<default_2.SVGProps<SVGSVGElement>>>;
|
|
176
199
|
|
|
177
200
|
declare type InferPropsFromSchema<T extends Record<string, SchemaType>> = Partial<{
|
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
var
|
|
1
|
+
import r from "react";
|
|
2
|
+
var M = { exports: {} }, S = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -10,125 +10,125 @@ var V = { exports: {} }, j = {};
|
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
12
|
var Y;
|
|
13
|
-
function
|
|
14
|
-
if (Y) return
|
|
13
|
+
function ce() {
|
|
14
|
+
if (Y) return S;
|
|
15
15
|
Y = 1;
|
|
16
|
-
var s = Symbol.for("react.transitional.element"),
|
|
17
|
-
function d
|
|
18
|
-
var
|
|
19
|
-
if (
|
|
20
|
-
|
|
21
|
-
for (var
|
|
22
|
-
|
|
23
|
-
} else
|
|
24
|
-
return
|
|
16
|
+
var s = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
|
|
17
|
+
function u(d, t, l) {
|
|
18
|
+
var c = null;
|
|
19
|
+
if (l !== void 0 && (c = "" + l), t.key !== void 0 && (c = "" + t.key), "key" in t) {
|
|
20
|
+
l = {};
|
|
21
|
+
for (var i in t)
|
|
22
|
+
i !== "key" && (l[i] = t[i]);
|
|
23
|
+
} else l = t;
|
|
24
|
+
return t = l.ref, {
|
|
25
25
|
$$typeof: s,
|
|
26
|
-
type:
|
|
27
|
-
key:
|
|
28
|
-
ref:
|
|
29
|
-
props:
|
|
26
|
+
type: d,
|
|
27
|
+
key: c,
|
|
28
|
+
ref: t !== void 0 ? t : null,
|
|
29
|
+
props: l
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return S.Fragment = o, S.jsx = u, S.jsxs = u, S;
|
|
33
33
|
}
|
|
34
34
|
var G;
|
|
35
|
-
function
|
|
36
|
-
return G || (G = 1,
|
|
35
|
+
function ue() {
|
|
36
|
+
return G || (G = 1, M.exports = ce()), M.exports;
|
|
37
37
|
}
|
|
38
|
-
var n =
|
|
39
|
-
const
|
|
38
|
+
var n = ue();
|
|
39
|
+
const de = r.memo((s) => {
|
|
40
40
|
const {
|
|
41
|
-
label:
|
|
42
|
-
buttonId:
|
|
43
|
-
buttonSize:
|
|
44
|
-
buttonColor:
|
|
45
|
-
buttonVariant:
|
|
46
|
-
buttonType:
|
|
47
|
-
customClasses:
|
|
48
|
-
disabled:
|
|
49
|
-
children:
|
|
50
|
-
...
|
|
41
|
+
label: o = "",
|
|
42
|
+
buttonId: u = "hans-button",
|
|
43
|
+
buttonSize: d = "medium",
|
|
44
|
+
buttonColor: t = "primary",
|
|
45
|
+
buttonVariant: l = "default",
|
|
46
|
+
buttonType: c = "button",
|
|
47
|
+
customClasses: i = "",
|
|
48
|
+
disabled: b = !1,
|
|
49
|
+
children: h,
|
|
50
|
+
...f
|
|
51
51
|
} = s;
|
|
52
52
|
return /* @__PURE__ */ n.jsx(
|
|
53
53
|
"button",
|
|
54
54
|
{
|
|
55
|
-
id:
|
|
56
|
-
type:
|
|
57
|
-
disabled:
|
|
55
|
+
id: u,
|
|
56
|
+
type: c,
|
|
57
|
+
disabled: b,
|
|
58
58
|
className: `
|
|
59
59
|
hans-button
|
|
60
|
-
hans-button-${
|
|
61
|
-
hans-button-${
|
|
62
|
-
hans-button-${
|
|
63
|
-
${
|
|
60
|
+
hans-button-${d}
|
|
61
|
+
hans-button-${t}
|
|
62
|
+
hans-button-${l}
|
|
63
|
+
${i}
|
|
64
64
|
`,
|
|
65
|
-
...
|
|
66
|
-
children: /* @__PURE__ */ n.jsx("slot", { children:
|
|
65
|
+
...f,
|
|
66
|
+
children: /* @__PURE__ */ n.jsx("slot", { children: h ?? (o && /* @__PURE__ */ n.jsx("span", { children: o })) })
|
|
67
67
|
}
|
|
68
68
|
);
|
|
69
69
|
});
|
|
70
|
-
|
|
71
|
-
const Q =
|
|
70
|
+
de.displayName = "HansButton";
|
|
71
|
+
const Q = r.memo((s) => {
|
|
72
72
|
const {
|
|
73
|
-
label:
|
|
74
|
-
labelColor:
|
|
75
|
-
placeholder:
|
|
76
|
-
value:
|
|
77
|
-
inputId:
|
|
78
|
-
inputColor:
|
|
79
|
-
inputSize:
|
|
80
|
-
inputType:
|
|
81
|
-
message:
|
|
82
|
-
messageColor:
|
|
73
|
+
label: o = "",
|
|
74
|
+
labelColor: u = "base",
|
|
75
|
+
placeholder: d = "",
|
|
76
|
+
value: t,
|
|
77
|
+
inputId: l = "hans-input",
|
|
78
|
+
inputColor: c = "base",
|
|
79
|
+
inputSize: i = "medium",
|
|
80
|
+
inputType: b = "text",
|
|
81
|
+
message: h = "",
|
|
82
|
+
messageColor: f = "base",
|
|
83
83
|
customClasses: x = "",
|
|
84
84
|
disabled: k = !1,
|
|
85
|
-
leftIcon:
|
|
85
|
+
leftIcon: m,
|
|
86
86
|
rightIcon: p,
|
|
87
|
-
children:
|
|
88
|
-
...
|
|
89
|
-
} = s,
|
|
87
|
+
children: H,
|
|
88
|
+
...O
|
|
89
|
+
} = s, L = typeof t > "u" ? {} : { value: t };
|
|
90
90
|
return /* @__PURE__ */ n.jsxs("div", { className: "hans-input-div", children: [
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
H,
|
|
92
|
+
o ? /* @__PURE__ */ n.jsx(
|
|
93
93
|
"label",
|
|
94
94
|
{
|
|
95
|
-
htmlFor:
|
|
95
|
+
htmlFor: l,
|
|
96
96
|
className: `
|
|
97
97
|
hans-input-label
|
|
98
|
-
hans-input-label-${
|
|
98
|
+
hans-input-label-${u}
|
|
99
99
|
`,
|
|
100
|
-
children:
|
|
100
|
+
children: o
|
|
101
101
|
}
|
|
102
102
|
) : null,
|
|
103
103
|
/* @__PURE__ */ n.jsxs("div", { className: "hans-input-field", children: [
|
|
104
|
-
|
|
104
|
+
m ? /* @__PURE__ */ n.jsx(
|
|
105
105
|
"span",
|
|
106
106
|
{
|
|
107
107
|
className: `
|
|
108
108
|
hans-input-icon
|
|
109
109
|
hans-input-icon-left
|
|
110
|
-
hans-input-icon-${
|
|
110
|
+
hans-input-icon-${c}
|
|
111
111
|
`,
|
|
112
|
-
children:
|
|
112
|
+
children: m
|
|
113
113
|
}
|
|
114
114
|
) : null,
|
|
115
115
|
/* @__PURE__ */ n.jsx(
|
|
116
116
|
"input",
|
|
117
117
|
{
|
|
118
|
-
id:
|
|
119
|
-
type:
|
|
118
|
+
id: l,
|
|
119
|
+
type: b,
|
|
120
120
|
disabled: k,
|
|
121
|
-
placeholder:
|
|
121
|
+
placeholder: d,
|
|
122
122
|
className: `
|
|
123
123
|
hans-input
|
|
124
|
+
hans-input-${i}
|
|
124
125
|
hans-input-${c}
|
|
125
|
-
hans-input
|
|
126
|
-
${u ? "hans-input-has-left-icon" : ""}
|
|
126
|
+
${m ? "hans-input-has-left-icon" : ""}
|
|
127
127
|
${p ? "hans-input-has-right-icon" : ""}
|
|
128
128
|
${x}
|
|
129
129
|
`,
|
|
130
|
-
...
|
|
131
|
-
...
|
|
130
|
+
...L,
|
|
131
|
+
...O
|
|
132
132
|
}
|
|
133
133
|
),
|
|
134
134
|
p ? /* @__PURE__ */ n.jsx(
|
|
@@ -137,33 +137,33 @@ const Q = t.memo((s) => {
|
|
|
137
137
|
className: `
|
|
138
138
|
hans-input-icon
|
|
139
139
|
hans-input-icon-right
|
|
140
|
-
hans-input-icon-${
|
|
140
|
+
hans-input-icon-${c}
|
|
141
141
|
`,
|
|
142
142
|
children: p
|
|
143
143
|
}
|
|
144
144
|
) : null
|
|
145
145
|
] }),
|
|
146
|
-
|
|
146
|
+
h ? /* @__PURE__ */ n.jsx(
|
|
147
147
|
"p",
|
|
148
148
|
{
|
|
149
149
|
className: `
|
|
150
150
|
hans-input-message
|
|
151
|
-
hans-input-message-${
|
|
151
|
+
hans-input-message-${f}
|
|
152
152
|
`,
|
|
153
|
-
children:
|
|
153
|
+
children: h
|
|
154
154
|
}
|
|
155
155
|
) : null
|
|
156
156
|
] });
|
|
157
157
|
});
|
|
158
158
|
Q.displayName = "HansInput";
|
|
159
|
-
function
|
|
159
|
+
function $(s) {
|
|
160
160
|
return Object.keys(s);
|
|
161
161
|
}
|
|
162
|
-
const
|
|
162
|
+
const me = {
|
|
163
163
|
name: "string",
|
|
164
164
|
iconSize: { type: "custom", ref: {} },
|
|
165
165
|
customClasses: "string"
|
|
166
|
-
},
|
|
166
|
+
}, ve = $(me), pe = {
|
|
167
167
|
Fa: () => import("./index-CuLnU-aI.js"),
|
|
168
168
|
Md: () => import("./index-D5QBazti.js"),
|
|
169
169
|
Bi: () => import("./index-Cru_aeJC.js"),
|
|
@@ -175,183 +175,227 @@ const ue = {
|
|
|
175
175
|
Pi: () => import("./index-CraOMhSg.js"),
|
|
176
176
|
Tb: () => import("./index-C_w14lJB.js"),
|
|
177
177
|
Lu: () => import("./index-HCQwBvMc.js")
|
|
178
|
-
},
|
|
178
|
+
}, N = r.memo(
|
|
179
179
|
(s) => {
|
|
180
|
-
const { name:
|
|
181
|
-
return
|
|
182
|
-
let
|
|
183
|
-
if (!
|
|
184
|
-
const
|
|
185
|
-
if (
|
|
180
|
+
const { name: o, iconSize: u = "medium", customClasses: d = "", ...t } = s, [l, c] = r.useState(null);
|
|
181
|
+
return r.useEffect(() => {
|
|
182
|
+
let i = !0;
|
|
183
|
+
if (!o) return;
|
|
184
|
+
const b = o.slice(0, 2), h = pe[b];
|
|
185
|
+
if (h)
|
|
186
186
|
return (async () => {
|
|
187
187
|
try {
|
|
188
|
-
const
|
|
189
|
-
if (!
|
|
190
|
-
|
|
191
|
-
} catch (
|
|
192
|
-
console.warn(`[HansUI] Error loading icon ${
|
|
188
|
+
const f = await h();
|
|
189
|
+
if (!i) return;
|
|
190
|
+
c(() => f[o] || null);
|
|
191
|
+
} catch (f) {
|
|
192
|
+
console.warn(`[HansUI] Error loading icon ${o}:`, f), i && c(() => null);
|
|
193
193
|
}
|
|
194
194
|
})(), () => {
|
|
195
|
-
|
|
195
|
+
i = !1;
|
|
196
196
|
};
|
|
197
|
-
}, [
|
|
198
|
-
|
|
197
|
+
}, [o]), l ? /* @__PURE__ */ n.jsx(
|
|
198
|
+
l,
|
|
199
199
|
{
|
|
200
200
|
className: `
|
|
201
201
|
hans-icon
|
|
202
|
-
hans-icon-${
|
|
203
|
-
${
|
|
202
|
+
hans-icon-${u}
|
|
203
|
+
${d}
|
|
204
204
|
`,
|
|
205
|
-
...
|
|
205
|
+
...t
|
|
206
206
|
}
|
|
207
207
|
) : /* @__PURE__ */ n.jsx("span", { className: "hans-icon-loading" });
|
|
208
208
|
}
|
|
209
209
|
);
|
|
210
|
-
|
|
211
|
-
const W =
|
|
210
|
+
N.displayName = "HansIcon";
|
|
211
|
+
const W = r.memo((s) => {
|
|
212
212
|
const {
|
|
213
|
-
src:
|
|
214
|
-
alt:
|
|
215
|
-
avatarSize:
|
|
216
|
-
customClasses:
|
|
217
|
-
fallbackIconName:
|
|
218
|
-
...
|
|
219
|
-
} = s, [
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
}, [
|
|
223
|
-
const
|
|
213
|
+
src: o = "",
|
|
214
|
+
alt: u = "Avatar",
|
|
215
|
+
avatarSize: d = "medium",
|
|
216
|
+
customClasses: t = "",
|
|
217
|
+
fallbackIconName: l = "MdOutlineAccountCircle",
|
|
218
|
+
...c
|
|
219
|
+
} = s, [i, b] = r.useState(!1);
|
|
220
|
+
r.useEffect(() => {
|
|
221
|
+
b(!1);
|
|
222
|
+
}, [o]);
|
|
223
|
+
const h = !o || i;
|
|
224
224
|
return /* @__PURE__ */ n.jsx(
|
|
225
225
|
"div",
|
|
226
226
|
{
|
|
227
227
|
className: `
|
|
228
228
|
hans-avatar
|
|
229
|
-
hans-avatar-${
|
|
230
|
-
${
|
|
229
|
+
hans-avatar-${d}
|
|
230
|
+
${t}
|
|
231
231
|
`,
|
|
232
|
-
"aria-label":
|
|
233
|
-
children:
|
|
234
|
-
|
|
232
|
+
"aria-label": u,
|
|
233
|
+
children: h ? /* @__PURE__ */ n.jsx("span", { className: "hans-avatar-fallback", role: "img", "aria-hidden": "true", children: /* @__PURE__ */ n.jsx(
|
|
234
|
+
N,
|
|
235
235
|
{
|
|
236
|
-
name:
|
|
237
|
-
iconSize:
|
|
236
|
+
name: l,
|
|
237
|
+
iconSize: d,
|
|
238
238
|
customClasses: "hans-avatar-icon"
|
|
239
239
|
}
|
|
240
240
|
) }) : /* @__PURE__ */ n.jsx(
|
|
241
241
|
"img",
|
|
242
242
|
{
|
|
243
|
-
src:
|
|
244
|
-
alt:
|
|
243
|
+
src: o,
|
|
244
|
+
alt: u,
|
|
245
245
|
className: "hans-avatar-img",
|
|
246
|
-
onError: () =>
|
|
247
|
-
...
|
|
246
|
+
onError: () => b(!0),
|
|
247
|
+
...c
|
|
248
248
|
}
|
|
249
249
|
)
|
|
250
250
|
}
|
|
251
251
|
);
|
|
252
252
|
});
|
|
253
253
|
W.displayName = "HansAvatar";
|
|
254
|
-
const
|
|
254
|
+
const X = r.memo((s) => {
|
|
255
255
|
const {
|
|
256
|
-
label:
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
256
|
+
label: o = "",
|
|
257
|
+
tagSize: u = "small",
|
|
258
|
+
tagColor: d = "base",
|
|
259
|
+
actionIcon: t = "",
|
|
260
|
+
customClasses: l = "",
|
|
261
|
+
disabled: c = !1,
|
|
262
|
+
onAction: i,
|
|
263
|
+
...b
|
|
264
|
+
} = s, h = !!(i && t);
|
|
265
|
+
return /* @__PURE__ */ n.jsxs(
|
|
266
|
+
"span",
|
|
267
|
+
{
|
|
268
|
+
className: `
|
|
269
|
+
hans-tag
|
|
270
|
+
hans-tag-${u}
|
|
271
|
+
hans-tag-${d}
|
|
272
|
+
${l}
|
|
273
|
+
`,
|
|
274
|
+
...b,
|
|
275
|
+
children: [
|
|
276
|
+
/* @__PURE__ */ n.jsx("span", { className: "hans-tag-label", children: o }),
|
|
277
|
+
h ? /* @__PURE__ */ n.jsx(
|
|
278
|
+
"button",
|
|
279
|
+
{
|
|
280
|
+
type: "button",
|
|
281
|
+
className: "hans-tag-action",
|
|
282
|
+
"aria-label": `Action ${o}`,
|
|
283
|
+
onClick: i,
|
|
284
|
+
disabled: c,
|
|
285
|
+
children: /* @__PURE__ */ n.jsx(N, { name: t, iconSize: "medium" })
|
|
286
|
+
}
|
|
287
|
+
) : null
|
|
288
|
+
]
|
|
289
|
+
}
|
|
290
|
+
);
|
|
291
|
+
});
|
|
292
|
+
X.displayName = "HansTag";
|
|
293
|
+
const he = (s) => Array.isArray(s) ? s : typeof s == "string" && s.length > 0 ? [s] : [], I = (s) => s.id ?? s.value, fe = r.memo((s) => {
|
|
294
|
+
const {
|
|
295
|
+
label: o = "",
|
|
296
|
+
labelColor: u = "base",
|
|
297
|
+
placeholder: d = "Select an option",
|
|
298
|
+
inputId: t = "hans-dropdown",
|
|
299
|
+
inputColor: l = "base",
|
|
300
|
+
inputSize: c = "medium",
|
|
301
|
+
message: i = "",
|
|
302
|
+
messageColor: b = "base",
|
|
303
|
+
customClasses: h = "",
|
|
304
|
+
disabled: f = !1,
|
|
266
305
|
options: x = [],
|
|
267
306
|
selectionType: k = "single",
|
|
268
|
-
enableAutocomplete:
|
|
307
|
+
enableAutocomplete: m = !0,
|
|
269
308
|
value: p,
|
|
270
|
-
defaultValue:
|
|
271
|
-
noOptionsText:
|
|
272
|
-
dropdownBackgroundColor:
|
|
273
|
-
dropdownHoverColor:
|
|
309
|
+
defaultValue: H,
|
|
310
|
+
noOptionsText: O = "No options",
|
|
311
|
+
dropdownBackgroundColor: L = "var(--white)",
|
|
312
|
+
dropdownHoverColor: Z = "var(--gray-100)",
|
|
274
313
|
onSearch: _,
|
|
275
|
-
onChange:
|
|
314
|
+
onChange: v,
|
|
276
315
|
onInputChange: q,
|
|
277
|
-
...
|
|
278
|
-
} = s, y = k === "multi", [
|
|
316
|
+
...K
|
|
317
|
+
} = s, y = k === "multi", [j, R] = r.useState(!1), [ee, J] = r.useState(
|
|
279
318
|
"down"
|
|
280
|
-
), [
|
|
281
|
-
() => typeof p < "u" ? p : typeof
|
|
282
|
-
),
|
|
283
|
-
|
|
284
|
-
typeof p < "u" &&
|
|
319
|
+
), [A, T] = r.useState(""), [ne, E] = r.useState(
|
|
320
|
+
() => typeof p < "u" ? p : typeof H < "u" ? H : y ? [] : ""
|
|
321
|
+
), w = r.useRef(null), B = r.useRef(null), D = r.useRef(!1);
|
|
322
|
+
r.useEffect(() => {
|
|
323
|
+
typeof p < "u" && E(p);
|
|
285
324
|
}, [p]);
|
|
286
|
-
const
|
|
287
|
-
typeof p < "u" ? p :
|
|
288
|
-
),
|
|
289
|
-
() => x.filter((e) =>
|
|
290
|
-
[x,
|
|
291
|
-
), F = y ?
|
|
292
|
-
|
|
293
|
-
!
|
|
294
|
-
}, [
|
|
295
|
-
const e = (
|
|
296
|
-
const
|
|
297
|
-
!
|
|
325
|
+
const C = he(
|
|
326
|
+
typeof p < "u" ? p : ne
|
|
327
|
+
), z = r.useMemo(
|
|
328
|
+
() => x.filter((e) => C.includes(I(e))),
|
|
329
|
+
[x, C]
|
|
330
|
+
), F = y ? z.map((e) => e.label).join(", ") : z[0]?.label ?? "";
|
|
331
|
+
r.useEffect(() => {
|
|
332
|
+
!m || y || T(F);
|
|
333
|
+
}, [m, y, F]), r.useEffect(() => {
|
|
334
|
+
const e = (a) => {
|
|
335
|
+
const g = a.target;
|
|
336
|
+
!w.current || !g || w.current.contains(g) || R(!1);
|
|
298
337
|
};
|
|
299
338
|
return document.addEventListener("mousedown", e), () => {
|
|
300
339
|
document.removeEventListener("mousedown", e);
|
|
301
340
|
};
|
|
302
341
|
}, []);
|
|
303
|
-
const
|
|
304
|
-
if (!
|
|
305
|
-
const e =
|
|
342
|
+
const P = r.useMemo(() => {
|
|
343
|
+
if (!m || A.trim().length === 0) return x;
|
|
344
|
+
const e = A.toLowerCase();
|
|
306
345
|
return x.filter(
|
|
307
|
-
(
|
|
346
|
+
(a) => a.label.toLowerCase().includes(e)
|
|
308
347
|
);
|
|
309
|
-
}, [
|
|
310
|
-
|
|
311
|
-
if (!
|
|
348
|
+
}, [m, x, A]);
|
|
349
|
+
r.useEffect(() => {
|
|
350
|
+
if (!j) return;
|
|
312
351
|
const e = requestAnimationFrame(() => {
|
|
313
|
-
if (!
|
|
314
|
-
const
|
|
315
|
-
|
|
352
|
+
if (!w.current || !B.current) return;
|
|
353
|
+
const a = w.current.getBoundingClientRect(), g = B.current.getBoundingClientRect(), V = window.innerHeight - a.bottom, ie = a.top;
|
|
354
|
+
V < g.height && ie > g.height ? J("up") : J("down");
|
|
316
355
|
});
|
|
317
356
|
return () => cancelAnimationFrame(e);
|
|
318
|
-
}, [
|
|
319
|
-
const
|
|
320
|
-
if (!
|
|
321
|
-
const
|
|
322
|
-
|
|
323
|
-
},
|
|
324
|
-
if (e.disabled ||
|
|
325
|
-
const
|
|
357
|
+
}, [j, P.length]);
|
|
358
|
+
const se = (e) => {
|
|
359
|
+
if (!m) return;
|
|
360
|
+
const a = e.target.value;
|
|
361
|
+
T(a), j || R(!0), _ && _(a), q && q(e);
|
|
362
|
+
}, te = (e) => {
|
|
363
|
+
if (e.disabled || f) return;
|
|
364
|
+
const a = I(e);
|
|
326
365
|
if (y) {
|
|
327
|
-
const
|
|
328
|
-
typeof p > "u" &&
|
|
366
|
+
const g = C.includes(a) ? C.filter((V) => V !== a) : [...C, a];
|
|
367
|
+
typeof p > "u" && E(g), v && v(g), m && T("");
|
|
329
368
|
return;
|
|
330
369
|
}
|
|
331
|
-
typeof p > "u" &&
|
|
332
|
-
},
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
370
|
+
typeof p > "u" && E(a), v && v(a), m && T(e.label), R(!1);
|
|
371
|
+
}, ae = (e) => {
|
|
372
|
+
const a = C.filter(
|
|
373
|
+
(g) => g !== e
|
|
374
|
+
);
|
|
375
|
+
typeof p > "u" && E(a), v && v(a);
|
|
376
|
+
}, U = (e, a) => {
|
|
377
|
+
if (!f) {
|
|
378
|
+
if (a === "focus" && D.current) {
|
|
379
|
+
D.current = !1;
|
|
336
380
|
return;
|
|
337
381
|
}
|
|
338
|
-
|
|
382
|
+
a === "toggle" && !e && (D.current = !0), R(e);
|
|
339
383
|
}
|
|
340
|
-
},
|
|
384
|
+
}, oe = () => {
|
|
341
385
|
U(!0, "focus");
|
|
342
|
-
},
|
|
343
|
-
U(!
|
|
344
|
-
},
|
|
345
|
-
return /* @__PURE__ */ n.jsxs("div", { className: "hans-dropdown", ref:
|
|
346
|
-
|
|
386
|
+
}, re = () => {
|
|
387
|
+
U(!j, "toggle");
|
|
388
|
+
}, le = m ? A : F;
|
|
389
|
+
return /* @__PURE__ */ n.jsxs("div", { className: "hans-dropdown", ref: w, children: [
|
|
390
|
+
o ? /* @__PURE__ */ n.jsx(
|
|
347
391
|
"label",
|
|
348
392
|
{
|
|
349
|
-
htmlFor:
|
|
393
|
+
htmlFor: t,
|
|
350
394
|
className: `
|
|
351
395
|
hans-input-label
|
|
352
|
-
hans-input-label-${
|
|
396
|
+
hans-input-label-${u}
|
|
353
397
|
`,
|
|
354
|
-
children:
|
|
398
|
+
children: o
|
|
355
399
|
}
|
|
356
400
|
) : null,
|
|
357
401
|
/* @__PURE__ */ n.jsxs("div", { className: "hans-dropdown-field", children: [
|
|
@@ -360,53 +404,53 @@ const pe = (s) => Array.isArray(s) ? s : typeof s == "string" && s.length > 0 ?
|
|
|
360
404
|
{
|
|
361
405
|
label: "",
|
|
362
406
|
message: "",
|
|
363
|
-
inputId:
|
|
364
|
-
inputColor:
|
|
365
|
-
inputSize:
|
|
366
|
-
placeholder:
|
|
367
|
-
customClasses: `hans-dropdown-input ${
|
|
368
|
-
disabled:
|
|
369
|
-
value:
|
|
370
|
-
onChange:
|
|
371
|
-
onFocus:
|
|
372
|
-
onMouseDown:
|
|
373
|
-
readOnly: !
|
|
374
|
-
leftIcon:
|
|
407
|
+
inputId: t,
|
|
408
|
+
inputColor: l,
|
|
409
|
+
inputSize: c,
|
|
410
|
+
placeholder: d,
|
|
411
|
+
customClasses: `hans-dropdown-input ${h}`,
|
|
412
|
+
disabled: f,
|
|
413
|
+
value: le,
|
|
414
|
+
onChange: se,
|
|
415
|
+
onFocus: oe,
|
|
416
|
+
onMouseDown: re,
|
|
417
|
+
readOnly: !m,
|
|
418
|
+
leftIcon: m ? /* @__PURE__ */ n.jsx(N, { name: "FaSearch", iconSize: "small" }) : void 0,
|
|
375
419
|
rightIcon: /* @__PURE__ */ n.jsx(
|
|
376
|
-
|
|
420
|
+
N,
|
|
377
421
|
{
|
|
378
|
-
name:
|
|
422
|
+
name: j ? "MdArrowDropUp" : "MdArrowDropDown",
|
|
379
423
|
iconSize: "small"
|
|
380
424
|
}
|
|
381
425
|
),
|
|
382
|
-
...
|
|
426
|
+
...K
|
|
383
427
|
}
|
|
384
428
|
),
|
|
385
|
-
|
|
429
|
+
j && !f ? /* @__PURE__ */ n.jsx(
|
|
386
430
|
"ul",
|
|
387
431
|
{
|
|
388
|
-
ref:
|
|
432
|
+
ref: B,
|
|
389
433
|
className: "hans-dropdown-list",
|
|
390
434
|
role: "listbox",
|
|
391
435
|
"aria-multiselectable": y,
|
|
392
|
-
"data-direction":
|
|
436
|
+
"data-direction": ee,
|
|
393
437
|
style: {
|
|
394
|
-
"--hans-dropdown-bg":
|
|
395
|
-
"--hans-dropdown-hover":
|
|
438
|
+
"--hans-dropdown-bg": L,
|
|
439
|
+
"--hans-dropdown-hover": Z
|
|
396
440
|
},
|
|
397
|
-
children:
|
|
398
|
-
const
|
|
441
|
+
children: P.length === 0 ? /* @__PURE__ */ n.jsx("li", { className: "hans-dropdown-empty", children: O }) : P.map((e) => {
|
|
442
|
+
const a = I(e), g = C.includes(a);
|
|
399
443
|
return /* @__PURE__ */ n.jsxs(
|
|
400
444
|
"li",
|
|
401
445
|
{
|
|
402
446
|
role: "option",
|
|
403
|
-
"aria-selected":
|
|
447
|
+
"aria-selected": g,
|
|
404
448
|
className: `
|
|
405
449
|
hans-dropdown-option
|
|
406
|
-
${
|
|
450
|
+
${g ? "hans-dropdown-option-selected" : ""}
|
|
407
451
|
${e.disabled ? "hans-dropdown-option-disabled" : ""}
|
|
408
452
|
`,
|
|
409
|
-
onClick: () =>
|
|
453
|
+
onClick: () => te(e),
|
|
410
454
|
children: [
|
|
411
455
|
e.imageSrc ? /* @__PURE__ */ n.jsx(
|
|
412
456
|
W,
|
|
@@ -419,37 +463,38 @@ const pe = (s) => Array.isArray(s) ? s : typeof s == "string" && s.length > 0 ?
|
|
|
419
463
|
/* @__PURE__ */ n.jsx("span", { className: "hans-dropdown-option-label", children: e.label })
|
|
420
464
|
]
|
|
421
465
|
},
|
|
422
|
-
|
|
466
|
+
a
|
|
423
467
|
);
|
|
424
468
|
})
|
|
425
469
|
}
|
|
426
470
|
) : null
|
|
427
471
|
] }),
|
|
428
|
-
y &&
|
|
429
|
-
|
|
472
|
+
y && z.length > 0 ? /* @__PURE__ */ n.jsx("div", { className: "hans-dropdown-selected", children: z.map((e) => /* @__PURE__ */ n.jsx(
|
|
473
|
+
X,
|
|
430
474
|
{
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
475
|
+
label: e.label,
|
|
476
|
+
tagSize: "small",
|
|
477
|
+
tagColor: "base",
|
|
478
|
+
actionIcon: "IoIosCloseCircle",
|
|
479
|
+
onAction: () => ae(I(e)),
|
|
480
|
+
disabled: f
|
|
436
481
|
},
|
|
437
|
-
|
|
482
|
+
I(e)
|
|
438
483
|
)) }) : null,
|
|
439
|
-
|
|
484
|
+
i ? /* @__PURE__ */ n.jsx(
|
|
440
485
|
"p",
|
|
441
486
|
{
|
|
442
487
|
className: `
|
|
443
488
|
hans-input-message
|
|
444
|
-
hans-input-message-${
|
|
489
|
+
hans-input-message-${b}
|
|
445
490
|
`,
|
|
446
|
-
children:
|
|
491
|
+
children: i
|
|
447
492
|
}
|
|
448
493
|
) : null
|
|
449
494
|
] });
|
|
450
495
|
});
|
|
451
|
-
|
|
452
|
-
const
|
|
496
|
+
fe.displayName = "HansDropdown";
|
|
497
|
+
const ge = {
|
|
453
498
|
label: "string",
|
|
454
499
|
buttonId: "string",
|
|
455
500
|
buttonSize: { type: "custom", ref: {} },
|
|
@@ -458,7 +503,7 @@ const he = {
|
|
|
458
503
|
buttonType: { type: "custom", ref: {} },
|
|
459
504
|
customClasses: "string",
|
|
460
505
|
disabled: "boolean"
|
|
461
|
-
},
|
|
506
|
+
}, je = $(ge), be = {
|
|
462
507
|
label: "string",
|
|
463
508
|
labelColor: { type: "custom", ref: {} },
|
|
464
509
|
placeholder: "string",
|
|
@@ -477,22 +522,31 @@ const he = {
|
|
|
477
522
|
noOptionsText: "string",
|
|
478
523
|
dropdownBackgroundColor: "string",
|
|
479
524
|
dropdownHoverColor: "string"
|
|
480
|
-
},
|
|
525
|
+
}, we = $(be), xe = {
|
|
481
526
|
src: "string",
|
|
482
527
|
alt: "string",
|
|
483
528
|
avatarSize: { type: "custom", ref: {} },
|
|
484
529
|
customClasses: "string",
|
|
485
530
|
fallbackIconName: "string"
|
|
486
|
-
},
|
|
531
|
+
}, Se = $(xe), ye = {
|
|
532
|
+
label: "string",
|
|
533
|
+
tagSize: { type: "custom", ref: {} },
|
|
534
|
+
tagColor: { type: "custom", ref: {} },
|
|
535
|
+
actionIcon: "string",
|
|
536
|
+
customClasses: "string",
|
|
537
|
+
disabled: "boolean"
|
|
538
|
+
}, Ie = $(ye);
|
|
487
539
|
export {
|
|
488
|
-
|
|
540
|
+
pe as DynamicIconImports,
|
|
489
541
|
W as HansAvatar,
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
Q as HansInput
|
|
542
|
+
Se as HansAvatarPropsList,
|
|
543
|
+
de as HansButton,
|
|
544
|
+
je as HansButtonPropsList,
|
|
545
|
+
fe as HansDropdown,
|
|
546
|
+
we as HansDropdownPropsList,
|
|
547
|
+
N as HansIcon,
|
|
548
|
+
ve as HansIconPropsList,
|
|
549
|
+
Q as HansInput,
|
|
550
|
+
X as HansTag,
|
|
551
|
+
Ie as HansTagPropsList
|
|
498
552
|
};
|