@epam/ai-dial-ui-kit 0.2.0-rc.23 → 0.2.0-rc.24

package/dist/dial-ui-kit.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("classnames"),b=require("@tabler/icons-react"),j=require("react"),m=require("@floating-ui/react"),W=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),B=({fieldTitle:e,htmlFor:r,optional:t,optionalText:a,cssClass:n})=>e?s.jsxs("label",{className:c("dial-tiny text-secondary",n,!n?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:a??"(Optional)"})]}):null,D=({icon:e,className:r})=>e?s.jsx("span",{className:c("flex-shrink-0",r),children:e}):null;var N=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(N||{});const te={[N.Primary]:"dial-primary-button",[N.Secondary]:"dial-secondary-button",[N.Tertiary]:"dial-tertiary-button",[N.Danger]:"dial-danger-button"},F=({title:e,variant:r,cssClass:t,ref:a,onClick:n,disable:l,iconAfter:o,iconBefore:d,hideTitleOnMobile:u,ariaLabel:i})=>{const x=c("dial-small-semi",o?"mr-2":"",d?"ml-2":"",u?"hidden sm:inline":"inline"),p=c(r&&te[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:a,type:"button",className:p,onClick:f=>n?.(f),disabled:l,"aria-label":e||i,children:[s.jsx(D,{icon:d}),e&&s.jsx("span",{className:x,children:e}),s.jsx(D,{icon:o})]})};var S=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(S||{});const ne={info:s.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(b.IconCircleCheck,{size:24,stroke:2})},ae={[S.Info]:"bg-info border-info text-info",[S.Success]:"bg-success border-success text-success",[S.Warning]:"bg-warning border-warning text-warning",[S.Error]:"bg-error border-error text-error"},le="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",oe=({variant:e=S.Info,message:r,cssClass:t,closable:a=!1,onClose:n})=>s.jsxs("div",{role:"alert",className:c(le,ae[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(D,{icon:ne[e]}),s.jsx("div",{className:"text-primary",children:r})]}),a&&s.jsx(F,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(b.IconX,{size:16}),onClick:l=>n?.(l)})]}),ie="flex items-center justify-center text-secondary",ce="shrink-0 grow-0 basis-auto animate-spin-steps",H=({size:e=18,cssClass:r,iconClass:t,fullWidth:a=!0,ariaLabel:n="Loading"})=>s.jsx("div",{role:"status","aria-label":n,className:c({[ie]:!0,"w-full h-full":a,[r||""]:!!r}),children:s.jsx(D,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:c(ce,t)})})}),de=7,ue=2,q=j.createContext(null),$=()=>{const e=j.useContext(q);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},xe=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:a,onOpenChange:n}={})=>{const[l,o]=j.useState(e),d=j.useRef(null),u=a??l,i=n??o,x=m.useFloating({placement:r,open:u,onOpenChange:i,whileElementsMounted:m.autoUpdate,middleware:[m.offset(de+ue),m.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),m.shift({padding:5}),m.arrow({element:d})]}),p=m.useHover(x.context,{move:!1,enabled:a==null,mouseOnly:t,delay:{open:500,close:0}}),f=m.useFocus(x.context,{enabled:a==null}),h=m.useDismiss(x.context),y=m.useRole(x.context,{role:"tooltip"}),g=m.useInteractions([p,f,h,y]);return j.useMemo(()=>({open:u,setOpen:i,arrowRef:d,...g,...x}),[u,i,g,x])},me=({children:e,...r})=>{const t=xe(r);return s.jsx(q.Provider,{value:t,children:e})},pe=j.forwardRef(function({style:r,...t},a){const n=$(),l=m.useMergeRefs([n.refs.setFloating,a]);return n.open?s.jsx(m.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...n.floatingStyles,...r},...n.getFloatingProps(t),className:c("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",n.getFloatingProps(t).className),children:[t.children,s.jsx(m.FloatingArrow,{ref:n.arrowRef,context:n.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),fe=j.forwardRef(function({children:r,asChild:t=!1,...a},n){const l=$(),d=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,u=m.useMergeRefs([l.refs.setReference,n,d]);return t&&j.isValidElement(r)?j.cloneElement(r,l.getReferenceProps({ref:u,...a,...r.props})):s.jsx("span",{ref:u,...l.getReferenceProps(a),className:a.className??"dial-tooltip-trigger text-left",children:r})}),O=({hideTooltip:e,tooltip:r,children:t,triggerClassName:a,contentClassName:n,...l})=>s.jsxs(me,{...l,children:[s.jsx(fe,{className:c(a,"truncate"),children:t}),s.jsx(pe,{className:c("text-primary",n,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),G=18,T={size:G,stroke:2},he=({label:e,id:r,checked:t,indeterminate:a,disabled:n,ariaLabel:l,onChange:o})=>{const d=j.useCallback(x=>{x.stopPropagation(),o?.(x.target.checked,r)},[o,r]),u=c("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,n?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),i=c("mr-2 border rounded",n?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:u,htmlFor:r,children:[t&&(a?s.jsx(b.IconMinus,{className:i,...T}):s.jsx(b.IconCheck,{className:i,...T})),e&&s.jsx(O,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:s.jsx("p",{className:"text-primary w-full truncate",children:e})}),s.jsx("input",{type:"checkbox",onChange:d,id:r,checked:t,"aria-checked":a?"mixed":t,"aria-disabled":n||void 0,"aria-label":e?void 0:l,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const ge=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"border-accent-secondary text-primary";case v.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case v.VALID:return"border-primary text-white";case v.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},je=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-layer-4"}},be=({step:e,index:r,currentStep:t,onChangeStep:a})=>{const n="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",l="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",o=()=>t===e.id&&e.status===v.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===v.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:c(n,ge(e,t)),onClick:()=>a(e.id),children:[s.jsx("span",{className:c(l,je(e,t)),children:o()}),s.jsx("span",{children:e.name})]})},Ce=({steps:e,currentStep:r,onChangeStep:t})=>{const a=n=>{const l=e.findIndex(d=>d.id===r),o=e.findIndex(d=>d.id===n);(n!==r&&e[l].status===v.VALID||o<l)&&t(n)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((n,l)=>s.jsx(be,{currentStep:r,onChangeStep:a,step:n,index:l},n.id))})},U=({name:e,value:r,title:t,description:a,checked:n=!1,inputId:l,cssClass:o,labelCssClass:d,disabled:u,onChange:i,descriptionCssClass:x})=>{const p=`${l}-desc`,f=c("dial-small cursor-pointer",u?"text-secondary":"text-primary",d),h=c("cursor-pointer dial-input-radio",t&&"mr-2",o),y=c("flex flex-col",!!a&&"mb-2"),g=c("dial-tiny mt-2 ml-[26px] text-secondary",x),w=I=>{u||I.target.checked&&i?.(r)};return s.jsxs("div",{className:y,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:l,name:e,value:r,checked:n,disabled:u,"aria-describedby":n&&a?p:void 0,className:h,onChange:w}),t?s.jsx("label",{className:f,htmlFor:l,children:t}):null]}),n&&a&&s.jsx("div",{id:p,className:g,children:a})]})};var M=(e=>(e.Row="Row",e.Column="Column",e))(M||{});const ye="flex flex-col gap-2",ve="flex",Ne="pb-1 mt-2",we={[M.Column]:"flex-col gap-y-3",[M.Row]:"flex-row gap-x-6"},De=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:a,elementId:n,radioButtons:l,activeRadioButton:o,orientation:d,onChange:u})=>s.jsxs("div",{className:ye,children:[e&&s.jsx(B,{fieldTitle:e,htmlFor:n}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":a||void 0,className:c(ve,we[d]),children:l.map(i=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(U,{name:n,value:i.id,inputId:i.id,disabled:a,cssClass:r,labelCssClass:t,title:i.name,checked:i.id===o,onChange:()=>u(i.id)}),i.id===o&&i.content?s.jsx("div",{className:Ne,children:i.content}):null]},i.id))})]}),Ie=({icon:e,title:r,description:t})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(b.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:r}),t&&s.jsx("span",{className:"mt-1 text-primary",children:t})]}),ke=60,Se=({containerCssClass:e,children:r,width:t,title:a,iconSize:n=G,titleCssClass:l,additionalButtons:o})=>{const[d,u]=j.useState(t),[i,x]=j.useState(!0),p=c(["transform rotate-180 [writing-mode:tb-rl]",i&&"hidden",l]),f=c(["flex flex-row gap-2 cursor-pointer text-secondary",i?"justify-end":"justify-center"]),h=()=>{u(i?ke:t),x(!i)};return s.jsxs("div",{className:c(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${d}px`},children:[s.jsx("div",{className:c(["flex-1 min-h-0 overflow-auto",!i&&"hidden"]),children:r}),s.jsx("div",{className:p,children:a}),s.jsxs("div",{className:f,children:[i&&o,s.jsx(F,{cssClass:"hover:text-icon-accent-primary",onClick:h,iconBefore:i?s.jsx(b.IconChevronsLeft,{size:n,stroke:T.stroke}):s.jsx(b.IconChevronsRight,{size:n,stroke:T.stroke})})]})]})},X=({ariaLabel:e,cssClass:r,size:t=24,onClose:a})=>s.jsx(F,{ariaLabel:e,cssClass:c("text-secondary hover:text-accent-primary",r),onClick:a,iconBefore:s.jsx(b.IconX,{size:t})}),K=({value:e,textareaId:r,placeholder:t,cssClass:a="",disabled:n,invalid:l,readonly:o,onChange:d})=>s.jsx(O,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:n,className:c("dial-textarea dial-input px-3 py-2",l?"dial-input-error":"",n&&"dial-input-disable",o&&"dial-input-readonly",a),onChange:u=>!o&&d?.(u.currentTarget.value)})}),Re=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Fe=(e,r,t,a)=>{if((r==="number"||t!==void 0||a!==void 0)&&!Re.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(t===void 0||t<0))&&!(e.key==="."&&r==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(t!==void 0||a!==void 0){const l=e.currentTarget.value,o=e.currentTarget.selectionStart||0,d=l.slice(0,o)+e.key+l.slice(o),u=parseFloat(d);if(!isNaN(u)){if(t!==void 0&&u<t){e.preventDefault();return}if(a!==void 0&&u>a){e.preventDefault();return}}}}},P=({iconBefore:e,iconAfter:r,hideBorder:t,value:a,elementId:n,placeholder:l="",cssClass:o="",containerCssClass:d,tooltipTriggerClassName:u,type:i="text",disabled:x,readonly:p,invalid:f,onChange:h,min:y,max:g,prefix:w,suffix:I,textBeforeInput:C,textAfterInput:z})=>{const J=k=>k.target.blur(),ee=i==="number"||y!==void 0||g!==void 0,se=k=>{Fe(k,i,y,g)},re=k=>{const E=k.currentTarget.value;if(ee&&E!==""){const V=parseFloat(E);if(isNaN(V)&&E!=="-"&&E!=="."||!isNaN(V)&&(y!==void 0&&V<y||g!==void 0&&V>g))return}h?.(E)};return s.jsxs("div",{className:c("dial-input-field flex flex-row items-center justify-between py-2",t?"dial-input-no-border":"dial-input",f&&"dial-input-error",x&&"dial-input-disable",p&&"dial-input-readonly",!C&&"pl-3",!z&&"pr-3",d),children:[C&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:C,disabled:!0,elementId:C+"textBefore"})}),w&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",w]}),s.jsx(D,{icon:e}),s.jsx(O,{tooltip:a,triggerClassName:c(u,"flex-1"),children:s.jsx("input",{type:i,autoComplete:"off",id:n,placeholder:l,value:a??"",disabled:x,className:c("border-0 bg-transparent px-2",o),onChange:k=>!p&&re?.(k),onKeyDown:se,onWheel:J,min:y,max:g})}),s.jsx(D,{icon:r}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),z&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:z,disabled:!0,elementId:z+"textAfter"})})]})},Te=/^0+\.(\d+)?$/,Ee=/^0+/,Z=({fieldTitle:e,errorText:r,optional:t,elementCssClass:a,elementContainerCssClass:n,elementId:l,containerCssClass:o,readonly:d,defaultEmptyText:u,min:i,max:x,...p})=>s.jsxs("div",{className:c("flex flex-col",o),children:[s.jsx(B,{fieldTitle:e,optional:t,htmlFor:l}),d?s.jsx("span",{children:p.value||(u??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(P,{elementId:l,cssClass:a,containerCssClass:n,invalid:r!=null,min:i,max:x,...p}),s.jsx(W,{errorText:r})]})]}),Pe=({onChange:e,value:r,min:t,max:a,...n})=>{const l=o=>String(o)?.match(Te)?String(o)?.replace(Ee,"0"):Number(o);return s.jsx(Z,{type:"number",onChange:o=>e?.(l(o)),value:r,min:t,max:a,...n})},Ae=({onChange:e,...r})=>s.jsx(Z,{type:"text",onChange:t=>e?.(t),...r}),Le=({fieldTitle:e,optional:r,elementId:t,elementCssClass:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(K,{textareaId:t,cssClass:a,...l}),s.jsx(W,{errorText:n})]}),Be=({title:e,switchId:r,isOn:t=!1,disabled:a,onChange:n})=>{const l=c("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",t?"flex-row-reverse":"flex-row",a?"pointer-events-none":"",a?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=j.useCallback(d=>{d.stopPropagation(),n?.(!t)},[n,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:a,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:l,children:s.jsx("span",{className:c("size-3 rounded-full",a?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var R=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(R||{});const Oe="z-[52] flex items-center justify-center bg-blackout md:p-4",ze="relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto",Ve="divide-tertiary divide-y",Me="flex flex-row justify-between py-4 px-6 items-center",We={[R.Sm]:"max-w-full md:max-w-[400px]",[R.Md]:"max-w-full md:max-w-[800px]",[R.Lg]:"max-w-full md:max-w-[1200px]"},Q=({open:e=!1,title:r,portalId:t,cssClass:a,overlayClass:n,headingClass:l,dividers:o=!0,children:d,footer:u,onClose:i,size:x=R.Md})=>{const{refs:p,context:f}=m.useFloating({open:e,onOpenChange:C=>{C||i?.(null)}}),h=m.useRole(f,{role:"dialog"}),y=m.useDismiss(f,{outsidePress:!0}),{getFloatingProps:g}=m.useInteractions([h,y]);if(!e)return null;const w=typeof r=="string"?"dial-popup-heading":void 0,I=C=>C?typeof C=="string"?s.jsx("h3",{id:w,className:c("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",l),children:s.jsx(O,{tooltip:C,children:C})}):C:s.jsx("span",{});return s.jsx(m.FloatingPortal,{id:t,children:s.jsx(m.FloatingOverlay,{className:c(Oe,n),children:s.jsx(m.FloatingFocusManager,{context:f,children:s.jsxs("div",{ref:p.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":w,className:c(ze,We[x],o&&Ve,a),children:[s.jsxs("div",{className:Me,children:[I(r),s.jsx(X,{ariaLabel:"Close dialog",onClose:C=>i?.(C)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:d}),u]})})})})};var A=(e=>(e.Info="info",e.Danger="danger",e))(A||{});const _e="flex justify-end gap-2 px-6 py-4",He="text-secondary dial-small-150 px-6 py-4",qe="Cancel",_={[A.Info]:{confirmVariant:N.Primary,cancelVariant:N.Secondary},[A.Danger]:{container:"border-t-4 border-error",confirmVariant:N.Danger,cancelVariant:N.Secondary}},$e=({title:e,description:r,descriptionCssClass:t,open:a=!1,confirmLabel:n,cancelLabel:l=qe,isLoading:o=!1,disableConfirmButton:d=!1,cssClass:u,confirmClassName:i,onClose:x,onConfirm:p,onCancel:f,children:h,dividers:y=!1,variant:g=A.Info,size:w=R.Sm})=>{const I=o?null:s.jsxs("div",{className:_e,children:[s.jsx(F,{variant:N.Secondary,title:l,onClick:()=>f?f():x?.()}),s.jsx(F,{variant:_[g].confirmVariant,cssClass:i,title:n,disable:d,onClick:()=>p()})]}),C=j.useCallback(()=>o?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx(H,{size:50})}):h??(r?s.jsx("div",{className:c(He,t),children:r}):null),[h,r,o,t]);return s.jsx(Q,{open:a,title:e,cssClass:c(_[g].container,u),dividers:y,onClose:()=>x?.(),footer:I,size:w,children:C()})},Ge=({onClick:e})=>s.jsx(b.IconEyeOff,{...T,className:"text-primary",onClick:e}),Ue=({onClick:e})=>s.jsx(b.IconEye,{...T,className:"text-primary",onClick:e}),Y=({...e})=>{const[r,t]=j.useState(!1),a=j.useCallback(n=>{t(n)},[]);return s.jsx(P,{type:r?"text":"password",...e,iconAfter:r?s.jsx(Ge,{onClick:()=>a(!1)}):s.jsx(Ue,{onClick:()=>a(!0)})})},Xe=({fieldTitle:e,optional:r,elementCssClass:t,elementId:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:a}),s.jsx(Y,{cssClass:t,elementId:a,invalid:!!n,...l}),s.jsx(W,{errorText:n})]});var L=(e=>(e.Small="small",e.Base="base",e))(L||{});const Ke={[L.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[L.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},Ze=({elementId:e,value:r,placeholder:t,disabled:a,readonly:n,invalid:l,cssClass:o,containerCssClass:d,onChange:u,size:i=L.Base})=>{const[x,p]=j.useState(r||"");j.useEffect(()=>{p(r||"")},[r]);const f=j.useCallback(g=>{p(g),u?.(g)},[u]),h=Ke[i],y=j.useCallback(()=>{f("")},[f]);return s.jsxs("div",{className:c("dial-input flex flex-row items-center justify-between",l&&"dial-input-error",a&&"dial-input-disable",n&&"dial-input-readonly",h.containerClass,d),children:[s.jsx(D,{className:c(a?"text-secondary":"text-primary"),icon:s.jsx(b.IconSearch,{size:h.iconSize,stroke:h.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:t,value:x??"",disabled:a,readOnly:n,className:c("border-0 bg-transparent w-full",o,h.textClass),onChange:g=>!n&&f(g.currentTarget.value)}),x&&!n&&!a&&s.jsx(D,{className:"text-primary cursor-pointer",icon:s.jsx(b.IconX,{size:h.iconSize,stroke:h.iconStroke,onClick:y,"aria-label":"Clear search",role:"button"})})]})};exports.AlertVariant=S;exports.ButtonVariant=N;exports.ConfirmationPopupVariant=A;exports.DialAlert=oe;exports.DialButton=F;exports.DialCheckbox=he;exports.DialCloseButton=X;exports.DialCollapsibleSidebar=Se;exports.DialConfirmationPopup=$e;exports.DialErrorText=W;exports.DialFieldLabel=B;exports.DialIcon=D;exports.DialInput=P;exports.DialLoader=H;exports.DialNoDataContent=Ie;exports.DialNumberInputField=Pe;exports.DialPasswordInput=Y;exports.DialPasswordInputField=Xe;exports.DialPopup=Q;exports.DialRadioButton=U;exports.DialRadioGroup=De;exports.DialSearch=Ze;exports.DialSteps=Ce;exports.DialSwitch=Be;exports.DialTextAreaField=Le;exports.DialTextInputField=Ae;exports.DialTextarea=K;exports.DialTooltip=O;exports.PopupSize=R;exports.RadioGroupOrientation=M;exports.SearchSize=L;exports.StepStatus=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("classnames"),b=require("@tabler/icons-react"),j=require("react"),p=require("@floating-ui/react"),W=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),B=({fieldTitle:e,htmlFor:r,optional:t,optionalText:a,cssClass:n})=>e?s.jsxs("label",{className:c("dial-tiny text-secondary",n,!n?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:a??"(Optional)"})]}):null,D=({icon:e,className:r})=>e?s.jsx("span",{className:c("flex-shrink-0",r),children:e}):null;var N=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(N||{});const te={[N.Primary]:"dial-primary-button",[N.Secondary]:"dial-secondary-button",[N.Tertiary]:"dial-tertiary-button",[N.Danger]:"dial-danger-button"},F=({title:e,variant:r,cssClass:t,textCssClass:a,ref:n,onClick:l,disable:o,iconAfter:u,iconBefore:d,hideTitleOnMobile:i,ariaLabel:x})=>{const f=c("dial-small-semi",u?"mr-2":"",d?"ml-2":"",i?"hidden sm:inline":"inline",a),h=c(r&&te[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:m=>l?.(m),disabled:o,"aria-label":e||x,children:[s.jsx(D,{icon:d}),e&&s.jsx("span",{className:f,children:e}),s.jsx(D,{icon:u})]})};var S=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(S||{});const ne={info:s.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(b.IconCircleCheck,{size:24,stroke:2})},ae={[S.Info]:"bg-info border-info text-info",[S.Success]:"bg-success border-success text-success",[S.Warning]:"bg-warning border-warning text-warning",[S.Error]:"bg-error border-error text-error"},le="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",oe=({variant:e=S.Info,message:r,cssClass:t,closable:a=!1,onClose:n})=>s.jsxs("div",{role:"alert",className:c(le,ae[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(D,{icon:ne[e]}),s.jsx("div",{className:"text-primary",children:r})]}),a&&s.jsx(F,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(b.IconX,{size:16}),onClick:l=>n?.(l)})]}),ie="flex items-center justify-center text-secondary",ce="shrink-0 grow-0 basis-auto animate-spin-steps",H=({size:e=18,cssClass:r,iconClass:t,fullWidth:a=!0,ariaLabel:n="Loading"})=>s.jsx("div",{role:"status","aria-label":n,className:c({[ie]:!0,"w-full h-full":a,[r||""]:!!r}),children:s.jsx(D,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:c(ce,t)})})}),de=7,ue=2,q=j.createContext(null),$=()=>{const e=j.useContext(q);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},xe=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:a,onOpenChange:n}={})=>{const[l,o]=j.useState(e),u=j.useRef(null),d=a??l,i=n??o,x=p.useFloating({placement:r,open:d,onOpenChange:i,whileElementsMounted:p.autoUpdate,middleware:[p.offset(de+ue),p.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:u})]}),f=p.useHover(x.context,{move:!1,enabled:a==null,mouseOnly:t,delay:{open:500,close:0}}),h=p.useFocus(x.context,{enabled:a==null}),m=p.useDismiss(x.context),y=p.useRole(x.context,{role:"tooltip"}),g=p.useInteractions([f,h,m,y]);return j.useMemo(()=>({open:d,setOpen:i,arrowRef:u,...g,...x}),[d,i,g,x])},me=({children:e,...r})=>{const t=xe(r);return s.jsx(q.Provider,{value:t,children:e})},pe=j.forwardRef(function({style:r,...t},a){const n=$(),l=p.useMergeRefs([n.refs.setFloating,a]);return n.open?s.jsx(p.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...n.floatingStyles,...r},...n.getFloatingProps(t),className:c("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",n.getFloatingProps(t).className),children:[t.children,s.jsx(p.FloatingArrow,{ref:n.arrowRef,context:n.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),fe=j.forwardRef(function({children:r,asChild:t=!1,...a},n){const l=$(),u=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,d=p.useMergeRefs([l.refs.setReference,n,u]);return t&&j.isValidElement(r)?j.cloneElement(r,l.getReferenceProps({ref:d,...a,...r.props})):s.jsx("span",{ref:d,...l.getReferenceProps(a),className:a.className??"dial-tooltip-trigger text-left",children:r})}),O=({hideTooltip:e,tooltip:r,children:t,triggerClassName:a,contentClassName:n,...l})=>s.jsxs(me,{...l,children:[s.jsx(fe,{className:c(a,"truncate"),children:t}),s.jsx(pe,{className:c("text-primary",n,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),G=18,T={size:G,stroke:2},he=({label:e,id:r,checked:t,indeterminate:a,disabled:n,ariaLabel:l,onChange:o})=>{const u=j.useCallback(x=>{x.stopPropagation(),o?.(x.target.checked,r)},[o,r]),d=c("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,n?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),i=c("mr-2 border rounded",n?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:r,children:[t&&(a?s.jsx(b.IconMinus,{className:i,...T}):s.jsx(b.IconCheck,{className:i,...T})),e&&s.jsx(O,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:s.jsx("p",{className:"text-primary w-full truncate",children:e})}),s.jsx("input",{type:"checkbox",onChange:u,id:r,checked:t,"aria-checked":a?"mixed":t,"aria-disabled":n||void 0,"aria-label":e?void 0:l,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const ge=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"border-accent-secondary text-primary";case v.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case v.VALID:return"border-primary text-white";case v.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},je=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-layer-4"}},be=({step:e,index:r,currentStep:t,onChangeStep:a})=>{const n="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",l="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",o=()=>t===e.id&&e.status===v.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===v.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:c(n,ge(e,t)),onClick:()=>a(e.id),children:[s.jsx("span",{className:c(l,je(e,t)),children:o()}),s.jsx("span",{children:e.name})]})},Ce=({steps:e,currentStep:r,onChangeStep:t})=>{const a=n=>{const l=e.findIndex(u=>u.id===r),o=e.findIndex(u=>u.id===n);(n!==r&&e[l].status===v.VALID||o<l)&&t(n)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((n,l)=>s.jsx(be,{currentStep:r,onChangeStep:a,step:n,index:l},n.id))})},U=({name:e,value:r,title:t,description:a,checked:n=!1,inputId:l,cssClass:o,labelCssClass:u,disabled:d,onChange:i,descriptionCssClass:x})=>{const f=`${l}-desc`,h=c("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=c("cursor-pointer dial-input-radio",t&&"mr-2",o),y=c("flex flex-col",!!a&&"mb-2"),g=c("dial-tiny mt-2 ml-[26px] text-secondary",x),w=I=>{d||I.target.checked&&i?.(r)};return s.jsxs("div",{className:y,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:l,name:e,value:r,checked:n,disabled:d,"aria-describedby":n&&a?f:void 0,className:m,onChange:w}),t?s.jsx("label",{className:h,htmlFor:l,children:t}):null]}),n&&a&&s.jsx("div",{id:f,className:g,children:a})]})};var M=(e=>(e.Row="Row",e.Column="Column",e))(M||{});const ye="flex flex-col gap-2",ve="flex",Ne="pb-1 mt-2",we={[M.Column]:"flex-col gap-y-3",[M.Row]:"flex-row gap-x-6"},De=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:a,elementId:n,radioButtons:l,activeRadioButton:o,orientation:u,onChange:d})=>s.jsxs("div",{className:ye,children:[e&&s.jsx(B,{fieldTitle:e,htmlFor:n}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":a||void 0,className:c(ve,we[u]),children:l.map(i=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(U,{name:n,value:i.id,inputId:i.id,disabled:a,cssClass:r,labelCssClass:t,title:i.name,checked:i.id===o,onChange:()=>d(i.id)}),i.id===o&&i.content?s.jsx("div",{className:Ne,children:i.content}):null]},i.id))})]}),Ie=({icon:e,title:r,description:t})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(b.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:r}),t&&s.jsx("span",{className:"mt-1 text-primary",children:t})]}),ke=60,Se=({containerCssClass:e,children:r,width:t,title:a,iconSize:n=G,titleCssClass:l,additionalButtons:o})=>{const[u,d]=j.useState(t),[i,x]=j.useState(!0),f=c(["transform rotate-180 [writing-mode:tb-rl]",i&&"hidden",l]),h=c(["flex flex-row gap-2 cursor-pointer text-secondary",i?"justify-end":"justify-center"]),m=()=>{d(i?ke:t),x(!i)};return s.jsxs("div",{className:c(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:c(["flex-1 min-h-0 overflow-auto",!i&&"hidden"]),children:r}),s.jsx("div",{className:f,children:a}),s.jsxs("div",{className:h,children:[i&&o,s.jsx(F,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:i?s.jsx(b.IconChevronsLeft,{size:n,stroke:T.stroke}):s.jsx(b.IconChevronsRight,{size:n,stroke:T.stroke})})]})]})},X=({ariaLabel:e,cssClass:r,size:t=24,onClose:a})=>s.jsx(F,{ariaLabel:e,cssClass:c("text-secondary hover:text-accent-primary",r),onClick:a,iconBefore:s.jsx(b.IconX,{size:t})}),K=({value:e,textareaId:r,placeholder:t,cssClass:a="",disabled:n,invalid:l,readonly:o,onChange:u})=>s.jsx(O,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:n,className:c("dial-textarea dial-input px-3 py-2",l?"dial-input-error":"",n&&"dial-input-disable",o&&"dial-input-readonly",a),onChange:d=>!o&&u?.(d.currentTarget.value)})}),Re=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Fe=(e,r,t,a)=>{if((r==="number"||t!==void 0||a!==void 0)&&!Re.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(t===void 0||t<0))&&!(e.key==="."&&r==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(t!==void 0||a!==void 0){const l=e.currentTarget.value,o=e.currentTarget.selectionStart||0,u=l.slice(0,o)+e.key+l.slice(o),d=parseFloat(u);if(!isNaN(d)){if(t!==void 0&&d<t){e.preventDefault();return}if(a!==void 0&&d>a){e.preventDefault();return}}}}},P=({iconBefore:e,iconAfter:r,hideBorder:t,value:a,elementId:n,placeholder:l="",cssClass:o="",containerCssClass:u,tooltipTriggerClassName:d,type:i="text",disabled:x,readonly:f,invalid:h,onChange:m,min:y,max:g,prefix:w,suffix:I,textBeforeInput:C,textAfterInput:z})=>{const J=k=>k.target.blur(),ee=i==="number"||y!==void 0||g!==void 0,se=k=>{Fe(k,i,y,g)},re=k=>{const E=k.currentTarget.value;if(ee&&E!==""){const V=parseFloat(E);if(isNaN(V)&&E!=="-"&&E!=="."||!isNaN(V)&&(y!==void 0&&V<y||g!==void 0&&V>g))return}m?.(E)};return s.jsxs("div",{className:c("dial-input-field flex flex-row items-center justify-between py-2",t?"dial-input-no-border":"dial-input",h&&"dial-input-error",x&&"dial-input-disable",f&&"dial-input-readonly",!C&&"pl-3",!z&&"pr-3",u),children:[C&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:C,disabled:!0,elementId:C+"textBefore"})}),w&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",w]}),s.jsx(D,{icon:e}),s.jsx(O,{tooltip:a,triggerClassName:c(d,"flex-1"),children:s.jsx("input",{type:i,autoComplete:"off",id:n,placeholder:l,value:a??"",disabled:x,className:c("border-0 bg-transparent px-2",o),onChange:k=>!f&&re?.(k),onKeyDown:se,onWheel:J,min:y,max:g})}),s.jsx(D,{icon:r}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),z&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:z,disabled:!0,elementId:z+"textAfter"})})]})},Te=/^0+\.(\d+)?$/,Ee=/^0+/,Z=({fieldTitle:e,errorText:r,optional:t,elementCssClass:a,elementContainerCssClass:n,elementId:l,containerCssClass:o,readonly:u,defaultEmptyText:d,min:i,max:x,...f})=>s.jsxs("div",{className:c("flex flex-col",o),children:[s.jsx(B,{fieldTitle:e,optional:t,htmlFor:l}),u?s.jsx("span",{children:f.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(P,{elementId:l,cssClass:a,containerCssClass:n,invalid:r!=null,min:i,max:x,...f}),s.jsx(W,{errorText:r})]})]}),Pe=({onChange:e,value:r,min:t,max:a,...n})=>{const l=o=>String(o)?.match(Te)?String(o)?.replace(Ee,"0"):Number(o);return s.jsx(Z,{type:"number",onChange:o=>e?.(l(o)),value:r,min:t,max:a,...n})},Ae=({onChange:e,...r})=>s.jsx(Z,{type:"text",onChange:t=>e?.(t),...r}),Le=({fieldTitle:e,optional:r,elementId:t,elementCssClass:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(K,{textareaId:t,cssClass:a,...l}),s.jsx(W,{errorText:n})]}),Be=({title:e,switchId:r,isOn:t=!1,disabled:a,onChange:n})=>{const l=c("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",t?"flex-row-reverse":"flex-row",a?"pointer-events-none":"",a?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=j.useCallback(u=>{u.stopPropagation(),n?.(!t)},[n,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:a,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:l,children:s.jsx("span",{className:c("size-3 rounded-full",a?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var R=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(R||{});const Oe="z-[52] flex items-center justify-center bg-blackout md:p-4",ze="relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto",Ve="divide-tertiary divide-y",Me="flex flex-row justify-between py-4 px-6 items-center",We={[R.Sm]:"max-w-full md:max-w-[400px]",[R.Md]:"max-w-full md:max-w-[800px]",[R.Lg]:"max-w-full md:max-w-[1200px]"},Q=({open:e=!1,title:r,portalId:t,cssClass:a,overlayClass:n,headingClass:l,dividers:o=!0,children:u,footer:d,onClose:i,size:x=R.Md})=>{const{refs:f,context:h}=p.useFloating({open:e,onOpenChange:C=>{C||i?.(null)}}),m=p.useRole(h,{role:"dialog"}),y=p.useDismiss(h,{outsidePress:!0}),{getFloatingProps:g}=p.useInteractions([m,y]);if(!e)return null;const w=typeof r=="string"?"dial-popup-heading":void 0,I=C=>C?typeof C=="string"?s.jsx("h3",{id:w,className:c("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",l),children:s.jsx(O,{tooltip:C,children:C})}):C:s.jsx("span",{});return s.jsx(p.FloatingPortal,{id:t,children:s.jsx(p.FloatingOverlay,{className:c(Oe,n),children:s.jsx(p.FloatingFocusManager,{context:h,children:s.jsxs("div",{ref:f.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":w,className:c(ze,We[x],o&&Ve,a),children:[s.jsxs("div",{className:Me,children:[I(r),s.jsx(X,{ariaLabel:"Close dialog",onClose:C=>i?.(C)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var A=(e=>(e.Info="info",e.Danger="danger",e))(A||{});const _e="flex justify-end gap-2 px-6 py-4",He="text-secondary dial-small-150 px-6 py-4",qe="Cancel",_={[A.Info]:{confirmVariant:N.Primary,cancelVariant:N.Secondary},[A.Danger]:{container:"border-t-4 border-error",confirmVariant:N.Danger,cancelVariant:N.Secondary}},$e=({title:e,description:r,descriptionCssClass:t,open:a=!1,confirmLabel:n,cancelLabel:l=qe,isLoading:o=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:i,onClose:x,onConfirm:f,onCancel:h,children:m,dividers:y=!1,variant:g=A.Info,size:w=R.Sm})=>{const I=o?null:s.jsxs("div",{className:_e,children:[s.jsx(F,{variant:N.Secondary,title:l,onClick:()=>h?h():x?.()}),s.jsx(F,{variant:_[g].confirmVariant,cssClass:i,title:n,disable:u,onClick:()=>f()})]}),C=j.useCallback(()=>o?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx(H,{size:50})}):m??(r?s.jsx("div",{className:c(He,t),children:r}):null),[m,r,o,t]);return s.jsx(Q,{open:a,title:e,cssClass:c(_[g].container,d),dividers:y,onClose:()=>x?.(),footer:I,size:w,children:C()})},Ge=({onClick:e})=>s.jsx(b.IconEyeOff,{...T,className:"text-primary",onClick:e}),Ue=({onClick:e})=>s.jsx(b.IconEye,{...T,className:"text-primary",onClick:e}),Y=({...e})=>{const[r,t]=j.useState(!1),a=j.useCallback(n=>{t(n)},[]);return s.jsx(P,{type:r?"text":"password",...e,iconAfter:r?s.jsx(Ge,{onClick:()=>a(!1)}):s.jsx(Ue,{onClick:()=>a(!0)})})},Xe=({fieldTitle:e,optional:r,elementCssClass:t,elementId:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:a}),s.jsx(Y,{cssClass:t,elementId:a,invalid:!!n,...l}),s.jsx(W,{errorText:n})]});var L=(e=>(e.Small="small",e.Base="base",e))(L||{});const Ke={[L.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[L.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},Ze=({elementId:e,value:r,placeholder:t,disabled:a,readonly:n,invalid:l,cssClass:o,containerCssClass:u,onChange:d,size:i=L.Base})=>{const[x,f]=j.useState(r||"");j.useEffect(()=>{f(r||"")},[r]);const h=j.useCallback(g=>{f(g),d?.(g)},[d]),m=Ke[i],y=j.useCallback(()=>{h("")},[h]);return s.jsxs("div",{className:c("dial-input flex flex-row items-center justify-between",l&&"dial-input-error",a&&"dial-input-disable",n&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(D,{className:c(a?"text-secondary":"text-primary"),icon:s.jsx(b.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:t,value:x??"",disabled:a,readOnly:n,className:c("border-0 bg-transparent w-full",o,m.textClass),onChange:g=>!n&&h(g.currentTarget.value)}),x&&!n&&!a&&s.jsx(D,{className:"text-primary cursor-pointer",icon:s.jsx(b.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:y,"aria-label":"Clear search",role:"button"})})]})};exports.AlertVariant=S;exports.ButtonVariant=N;exports.ConfirmationPopupVariant=A;exports.DialAlert=oe;exports.DialButton=F;exports.DialCheckbox=he;exports.DialCloseButton=X;exports.DialCollapsibleSidebar=Se;exports.DialConfirmationPopup=$e;exports.DialErrorText=W;exports.DialFieldLabel=B;exports.DialIcon=D;exports.DialInput=P;exports.DialLoader=H;exports.DialNoDataContent=Ie;exports.DialNumberInputField=Pe;exports.DialPasswordInput=Y;exports.DialPasswordInputField=Xe;exports.DialPopup=Q;exports.DialRadioButton=U;exports.DialRadioGroup=De;exports.DialSearch=Ze;exports.DialSteps=Ce;exports.DialSwitch=Be;exports.DialTextAreaField=Le;exports.DialTextInputField=Ae;exports.DialTextarea=K;exports.DialTooltip=O;exports.PopupSize=R;exports.RadioGroupOrientation=M;exports.SearchSize=L;exports.StepStatus=v;

package/dist/dial-ui-kit.es.js

@@ -34,20 +34,22 @@ const Be = {
   title: e,
   variant: n,
   cssClass: t,
-  ref: a,
-  onClick: s,
-  disable: o,
-  iconAfter: l,
+  textCssClass: a,
+  ref: s,
+  onClick: o,
+  disable: l,
+  iconAfter: u,
   iconBefore: d,
-  hideTitleOnMobile: u,
-  ariaLabel: i
+  hideTitleOnMobile: i,
+  ariaLabel: m
 }) => {
-  const m = c(
+  const x = c(
     "dial-small-semi",
-    l ? "mr-2" : "",
+    u ? "mr-2" : "",
     d ? "ml-2" : "",
-    u ? "hidden sm:inline" : "inline"
-  ), p = c(
+    i ? "hidden sm:inline" : "inline",
+    a
+  ), h = c(
     n && Be[n],
     t,
     "focus-visible:outline outline-offset-0"
@@ -55,16 +57,16 @@ const Be = {
   return /* @__PURE__ */ f(
     "button",
     {
-      ref: a,
+      ref: s,
       type: "button",
-      className: p,
-      onClick: (x) => s?.(x),
-      disabled: o,
-      "aria-label": e || i,
+      className: h,
+      onClick: (p) => o?.(p),
+      disabled: l,
+      "aria-label": e || m,
       children: [
         /* @__PURE__ */ r(D, { icon: d }),
-        e && /* @__PURE__ */ r("span", { className: m, children: e }),
-        /* @__PURE__ */ r(D, { icon: l })
+        e && /* @__PURE__ */ r("span", { className: x, children: e }),
+        /* @__PURE__ */ r(D, { icon: u })
       ]
     }
   );
@@ -153,9 +155,9 @@ const je = {
   open: a,
   onOpenChange: s
 } = {}) => {
-  const [o, l] = T(e), d = ve(null), u = a ?? o, i = s ?? l, m = G({
+  const [o, l] = T(e), u = ve(null), d = a ?? o, i = s ?? l, m = G({
     placement: n,
-    open: u,
+    open: d,
     onOpenChange: i,
     whileElementsMounted: Te,
     middleware: [
@@ -167,26 +169,26 @@ const je = {
       }),
       Fe({ padding: 5 }),
       Ee({
-        element: d
+        element: u
       })
     ]
-  }), p = Pe(m.context, {
+  }), x = Pe(m.context, {
     move: !1,
     enabled: a == null,
     mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), x = Le(m.context, {
+  }), h = Le(m.context, {
     enabled: a == null
-  }), h = K(m.context), y = Z(m.context, { role: "tooltip" }), g = X([p, x, h, y]);
+  }), p = K(m.context), y = Z(m.context, { role: "tooltip" }), g = X([x, h, p, y]);
   return Ne(
     () => ({
-      open: u,
+      open: d,
       setOpen: i,
-      arrowRef: d,
+      arrowRef: u,
       ...g,
       ...m
     }),
-    [u, i, g, m]
+    [d, i, g, m]
   );
 }, Ke = ({
   children: e,
@@ -225,18 +227,18 @@ const je = {
     }
   ) }) : null;
 }), Xe = U(function({ children: n, asChild: t = !1, ...a }, s) {
-  const o = J(), d = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, u = q([o.refs.setReference, s, d]);
+  const o = J(), u = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, d = q([o.refs.setReference, s, u]);
   return t && De(n) ? Ie(
     n,
     o.getReferenceProps({
-      ref: u,
+      ref: d,
       ...a,
       ...n.props
     })
   ) : /* @__PURE__ */ r(
     "span",
     {
-      ref: u,
+      ref: d,
       ...o.getReferenceProps(a),
       className: a.className ?? "dial-tooltip-trigger text-left",
       children: n
@@ -275,12 +277,12 @@ const je = {
   ariaLabel: o,
   onChange: l
 }) => {
-  const d = S(
+  const u = S(
     (m) => {
       m.stopPropagation(), l?.(m.target.checked, n);
     },
     [l, n]
-  ), u = c(
+  ), d = c(
     "flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",
     `${t ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,
     s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
@@ -288,14 +290,14 @@ const je = {
     "mr-2 border rounded",
     s ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ f("label", { className: u, htmlFor: n, children: [
+  return /* @__PURE__ */ f("label", { className: d, htmlFor: n, children: [
     t && (a ? /* @__PURE__ */ r(me, { className: i, ...F }) : /* @__PURE__ */ r($, { className: i, ...F })),
     e && /* @__PURE__ */ r(V, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        onChange: d,
+        onChange: u,
         id: n,
         checked: t,
         "aria-checked": a ? "mixed" : t,
@@ -373,7 +375,7 @@ const qe = (e, n) => {
   onChangeStep: t
 }) => {
   const a = (s) => {
-    const o = e.findIndex((d) => d.id === n), l = e.findIndex((d) => d.id === s);
+    const o = e.findIndex((u) => u.id === n), l = e.findIndex((u) => u.id === s);
     (s !== n && e[o].status === C.VALID || l < o) && t(s);
   };
   return /* @__PURE__ */ r("div", { id: "steps", className: "flex gap-x-3", children: e.map((s, o) => /* @__PURE__ */ r(
@@ -394,16 +396,16 @@ const qe = (e, n) => {
   checked: s = !1,
   inputId: o,
   cssClass: l,
-  labelCssClass: d,
-  disabled: u,
+  labelCssClass: u,
+  disabled: d,
   onChange: i,
   descriptionCssClass: m
 }) => {
-  const p = `${o}-desc`, x = c(
+  const x = `${o}-desc`, h = c(
     "dial-small cursor-pointer",
-    u ? "text-secondary" : "text-primary",
-    d
-  ), h = c(
+    d ? "text-secondary" : "text-primary",
+    u
+  ), p = c(
     "cursor-pointer dial-input-radio",
     t && "mr-2",
     l
@@ -421,17 +423,17 @@ const qe = (e, n) => {
           name: e,
           value: n,
           checked: s,
-          disabled: u,
-          "aria-describedby": s && a ? p : void 0,
-          className: h,
+          disabled: d,
+          "aria-describedby": s && a ? x : void 0,
+          className: p,
           onChange: (w) => {
-            u || w.target.checked && i?.(n);
+            d || w.target.checked && i?.(n);
           }
         }
       ),
-      t ? /* @__PURE__ */ r("label", { className: x, htmlFor: o, children: t }) : null
+      t ? /* @__PURE__ */ r("label", { className: h, htmlFor: o, children: t }) : null
     ] }),
-    s && a && /* @__PURE__ */ r("div", { id: p, className: g, children: a })
+    s && a && /* @__PURE__ */ r("div", { id: x, className: g, children: a })
   ] });
 };
 var M = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(M || {});
@@ -446,8 +448,8 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
   elementId: s,
   radioButtons: o,
   activeRadioButton: l,
-  orientation: d,
-  onChange: u
+  orientation: u,
+  onChange: d
 }) => /* @__PURE__ */ f("div", { className: er, children: [
   e && /* @__PURE__ */ r(j, { fieldTitle: e, htmlFor: s }),
   /* @__PURE__ */ r(
@@ -458,7 +460,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       "aria-disabled": a || void 0,
       className: c(
         rr,
-        tr[d]
+        tr[u]
       ),
       children: o.map((i) => /* @__PURE__ */ f("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ r(
@@ -472,7 +474,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
             labelCssClass: t,
             title: i.name,
             checked: i.id === l,
-            onChange: () => u(i.id)
+            onChange: () => d(i.id)
           }
         ),
         i.id === l && i.content ? /* @__PURE__ */ r("div", { className: nr, children: i.content }) : null
@@ -496,15 +498,15 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
   titleCssClass: o,
   additionalButtons: l
 }) => {
-  const [d, u] = T(t), [i, m] = T(!0), p = c([
+  const [u, d] = T(t), [i, m] = T(!0), x = c([
     "transform rotate-180 [writing-mode:tb-rl]",
     i && "hidden",
     o
-  ]), x = c([
+  ]), h = c([
     "flex flex-row gap-2 cursor-pointer text-secondary",
     i ? "justify-end" : "justify-center"
-  ]), h = () => {
-    u(i ? sr : t), m(!i);
+  ]), p = () => {
+    d(i ? sr : t), m(!i);
   };
   return /* @__PURE__ */ f(
     "div",
@@ -513,7 +515,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
         "rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",
         e
       ]),
-      style: { width: `${d}px` },
+      style: { width: `${u}px` },
       children: [
         /* @__PURE__ */ r(
           "div",
@@ -525,14 +527,14 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
             children: n
           }
         ),
-        /* @__PURE__ */ r("div", { className: p, children: a }),
-        /* @__PURE__ */ f("div", { className: x, children: [
+        /* @__PURE__ */ r("div", { className: x, children: a }),
+        /* @__PURE__ */ f("div", { className: h, children: [
           i && l,
           /* @__PURE__ */ r(
             P,
             {
               cssClass: "hover:text-icon-accent-primary",
-              onClick: h,
+              onClick: p,
               iconBefore: i ? /* @__PURE__ */ r(
                 xe,
                 {
@@ -573,7 +575,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
   disabled: s,
   invalid: o,
   readonly: l,
-  onChange: d
+  onChange: u
 }) => /* @__PURE__ */ r(V, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ r(
   "textarea",
   {
@@ -588,7 +590,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       l && "dial-input-readonly",
       a
     ),
-    onChange: (u) => !l && d?.(u.currentTarget.value)
+    onChange: (d) => !l && u?.(d.currentTarget.value)
   }
 ) }), lr = [
   "ArrowLeft",
@@ -609,13 +611,13 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       return;
     }
     if (t !== void 0 || a !== void 0) {
-      const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, d = o.slice(0, l) + e.key + o.slice(l), u = parseFloat(d);
-      if (!isNaN(u)) {
-        if (t !== void 0 && u < t) {
+      const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, u = o.slice(0, l) + e.key + o.slice(l), d = parseFloat(u);
+      if (!isNaN(d)) {
+        if (t !== void 0 && d < t) {
           e.preventDefault();
           return;
         }
-        if (a !== void 0 && u > a) {
+        if (a !== void 0 && d > a) {
           e.preventDefault();
           return;
         }
@@ -630,13 +632,13 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
   elementId: s,
   placeholder: o = "",
   cssClass: l = "",
-  containerCssClass: d,
-  tooltipTriggerClassName: u,
+  containerCssClass: u,
+  tooltipTriggerClassName: d,
   type: i = "text",
   disabled: m,
-  readonly: p,
-  invalid: x,
-  onChange: h,
+  readonly: x,
+  invalid: h,
+  onChange: p,
   min: y,
   max: g,
   prefix: N,
@@ -653,7 +655,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       if (isNaN(A) && E !== "-" && E !== "." || !isNaN(A) && (y !== void 0 && A < y || g !== void 0 && A > g))
         return;
     }
-    h?.(E);
+    p?.(E);
   };
   return /* @__PURE__ */ f(
     "div",
@@ -661,12 +663,12 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       className: c(
         "dial-input-field flex flex-row items-center justify-between py-2",
         t ? "dial-input-no-border" : "dial-input",
-        x && "dial-input-error",
+        h && "dial-input-error",
         m && "dial-input-disable",
-        p && "dial-input-readonly",
+        x && "dial-input-readonly",
         !b && "pl-3",
         !L && "pr-3",
-        d
+        u
       ),
       children: [
         b && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
@@ -689,7 +691,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
           V,
           {
             tooltip: a,
-            triggerClassName: c(u, "flex-1"),
+            triggerClassName: c(d, "flex-1"),
             children: /* @__PURE__ */ r(
               "input",
               {
@@ -700,7 +702,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
                 value: a ?? "",
                 disabled: m,
                 className: c("border-0 bg-transparent px-2", l),
-                onChange: (I) => !p && ae?.(I),
+                onChange: (I) => !x && ae?.(I),
                 onKeyDown: se,
                 onWheel: ne,
                 min: y,
@@ -736,11 +738,11 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
   elementContainerCssClass: s,
   elementId: o,
   containerCssClass: l,
-  readonly: d,
-  defaultEmptyText: u,
+  readonly: u,
+  defaultEmptyText: d,
   min: i,
   max: m,
-  ...p
+  ...x
 }) => /* @__PURE__ */ f("div", { className: c("flex flex-col", l), children: [
   /* @__PURE__ */ r(
     j,
@@ -750,7 +752,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
       htmlFor: o
     }
   ),
-  d ? /* @__PURE__ */ r("span", { children: p.value || (u ?? "None") }) : /* @__PURE__ */ f(oe, { children: [
+  u ? /* @__PURE__ */ r("span", { children: x.value || (d ?? "None") }) : /* @__PURE__ */ f(oe, { children: [
     /* @__PURE__ */ r(
       O,
       {
@@ -760,7 +762,7 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
         invalid: n != null,
         min: i,
         max: m,
-        ...p
+        ...x
       }
     ),
     /* @__PURE__ */ r(_, { errorText: n })
@@ -832,8 +834,8 @@ const er = "flex flex-col gap-2", rr = "flex", nr = "pb-1 mt-2", tr = {
     a ? "pointer-events-none" : "",
     a ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
   ), l = S(
-    (d) => {
-      d.stopPropagation(), s?.(!t);
+    (u) => {
+      u.stopPropagation(), s?.(!t);
     },
     [s, t]
   );
@@ -874,17 +876,17 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
   overlayClass: s,
   headingClass: o,
   dividers: l = !0,
-  children: d,
-  footer: u,
+  children: u,
+  footer: d,
   onClose: i,
   size: m = R.Md
 }) => {
-  const { refs: p, context: x } = G({
+  const { refs: x, context: h } = G({
     open: e,
     onOpenChange: (b) => {
       b || i?.(null);
     }
-  }), h = Z(x, { role: "dialog" }), y = K(x, { outsidePress: !0 }), { getFloatingProps: g } = X([h, y]);
+  }), p = Z(h, { role: "dialog" }), y = K(h, { outsidePress: !0 }), { getFloatingProps: g } = X([p, y]);
   if (!e) return null;
   const N = typeof n == "string" ? "dial-popup-heading" : void 0, w = (b) => b ? typeof b == "string" ? /* @__PURE__ */ r(
     "h3",
@@ -897,10 +899,10 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
       children: /* @__PURE__ */ r(V, { tooltip: b, children: b })
     }
   ) : b : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Oe, { className: c(ur, s), children: /* @__PURE__ */ r(ze, { context: x, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ r(Q, { id: t, children: /* @__PURE__ */ r(Oe, { className: c(ur, s), children: /* @__PURE__ */ r(ze, { context: h, children: /* @__PURE__ */ f(
     "div",
     {
-      ref: p.setFloating,
+      ref: x.setFloating,
       ...g(),
       role: "dialog",
       "aria-modal": "true",
@@ -922,8 +924,8 @@ const ur = "z-[52] flex items-center justify-center bg-blackout md:p-4", mr = "r
             }
           )
         ] }),
-        /* @__PURE__ */ r("div", { className: "flex-grow overflow-auto", children: d }),
-        u
+        /* @__PURE__ */ r("div", { className: "flex-grow overflow-auto", children: u }),
+        d
       ]
     }
   ) }) }) });
@@ -947,13 +949,13 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
   confirmLabel: s,
   cancelLabel: o = yr,
   isLoading: l = !1,
-  disableConfirmButton: d = !1,
-  cssClass: u,
+  disableConfirmButton: u = !1,
+  cssClass: d,
   confirmClassName: i,
   onClose: m,
-  onConfirm: p,
-  onCancel: x,
-  children: h,
+  onConfirm: x,
+  onCancel: h,
+  children: p,
   dividers: y = !1,
   variant: g = z.Info,
   size: N = R.Sm
@@ -964,7 +966,7 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
       {
         variant: v.Secondary,
         title: o,
-        onClick: () => x ? x() : m?.()
+        onClick: () => h ? h() : m?.()
       }
     ),
     /* @__PURE__ */ r(
@@ -973,23 +975,23 @@ const gr = "flex justify-end gap-2 px-6 py-4", br = "text-secondary dial-small-1
         variant: H[g].confirmVariant,
         cssClass: i,
         title: s,
-        disable: d,
-        onClick: () => p()
+        disable: u,
+        onClick: () => x()
       }
     )
-  ] }), b = S(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : h ?? (n ? /* @__PURE__ */ r(
+  ] }), b = S(() => l ? /* @__PURE__ */ r("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ r(He, { size: 50 }) }) : p ?? (n ? /* @__PURE__ */ r(
     "div",
     {
       className: c(br, t),
       children: n
     }
-  ) : null), [h, n, l, t]);
+  ) : null), [p, n, l, t]);
   return /* @__PURE__ */ r(
     hr,
     {
       open: a,
       title: e,
-      cssClass: c(H[g].container, u),
+      cssClass: c(H[g].container, d),
       dividers: y,
       onClose: () => m?.(),
       footer: w,
@@ -1065,22 +1067,22 @@ const wr = {
   readonly: s,
   invalid: o,
   cssClass: l,
-  containerCssClass: d,
-  onChange: u,
+  containerCssClass: u,
+  onChange: d,
   size: i = B.Base
 }) => {
-  const [m, p] = T(n || "");
+  const [m, x] = T(n || "");
   ke(() => {
-    p(n || "");
+    x(n || "");
   }, [n]);
-  const x = S(
+  const h = S(
     (g) => {
-      p(g), u?.(g);
+      x(g), d?.(g);
     },
-    [u]
-  ), h = wr[i], y = S(() => {
-    x("");
-  }, [x]);
+    [d]
+  ), p = wr[i], y = S(() => {
+    h("");
+  }, [h]);
   return /* @__PURE__ */ f(
     "div",
     {
@@ -1089,8 +1091,8 @@ const wr = {
         o && "dial-input-error",
         a && "dial-input-disable",
         s && "dial-input-readonly",
-        h.containerClass,
-        d
+        p.containerClass,
+        u
       ),
       children: [
         /* @__PURE__ */ r(
@@ -1100,8 +1102,8 @@ const wr = {
             icon: /* @__PURE__ */ r(
               ye,
               {
-                size: h.iconSize,
-                stroke: h.iconStroke
+                size: p.iconSize,
+                stroke: p.iconStroke
               }
             )
           }
@@ -1119,9 +1121,9 @@ const wr = {
             className: c(
               "border-0 bg-transparent w-full",
               l,
-              h.textClass
+              p.textClass
             ),
-            onChange: (g) => !s && x(g.currentTarget.value)
+            onChange: (g) => !s && h(g.currentTarget.value)
           }
         ),
         m && !s && !a && /* @__PURE__ */ r(
@@ -1131,8 +1133,8 @@ const wr = {
             icon: /* @__PURE__ */ r(
               W,
               {
-                size: h.iconSize,
-                stroke: h.iconStroke,
+                size: p.iconSize,
+                stroke: p.iconStroke,
                 onClick: y,
                 "aria-label": "Clear search",
                 role: "button"

package/dist/index.css

@@ -1,2 +1,2 @@
 .dial-h1{font-weight:600}.dial-h1,.dial-h2{font-size:20px;line-height:24px}.dial-h2{font-weight:400}.dial-h3{font-weight:600;line-height:18px}.dial-body,.dial-h3{font-size:16px}.dial-body{font-weight:400;line-height:28px}.dial-small{font-weight:400}.dial-small,.dial-small-semi{font-size:14px;line-height:16px}.dial-small-semi{font-weight:600}.dial-small-medium{font-weight:400;font-size:14px;line-height:16px}.dial-small-150{font-weight:400;font-size:14px;line-height:21px}.dial-tiny{line-height:14px}.dial-tiny,.dial-tiny-150{font-weight:400;font-size:12px}.dial-tiny-150{line-height:18px}.dial-caption{font-weight:400;font-size:10px;line-height:12px}h1{font-weight:600}h1,h2{font-size:20px;line-height:24px}h2{font-weight:400}h3{font-weight:600;font-size:16px;line-height:18px}.dial-base-button{display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px}.dial-base-button-disable{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}.dial-primary-button{background-color:var(--controls-bg-accent,#5c8dea);color:var(--controls-primary,#fcfcfc);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-hover,#4878d2)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-secondary-button{background-color:transparent;color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;border-color:var(--stroke-primary,#333942);&:focus,&:hover{background-color:var(--bg-layer-4,#333942)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-tertiary-button{background-color:transparent;color:var(--text-accent-primary,#5c8dea);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-alpha,#5c8dea2b)}&:active,&:focus{border-color:var(--stroke-accent-primary,#5c8dea)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-danger-button{background-color:var(--bg-red-400,#f76464);color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--bg-red-800,#ae2f2f)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-input{border-radius:3px;border-width:1px;border-style:solid;border-color:var(--stroke-primary,#333942);&:hover{border-color:var(--stroke-hover,#f3f4f6)}&:focus,&:focus-within{border-color:var(--stroke-accent-primary,#5c8dea)}}.dial-input,.dial-input-no-border{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;font-weight:400;font-size:14px;line-height:16px;width:100%;outline-width:0;&:not(:-moz-placeholder){color:var(--text-primary,#f3f4f6)}&:not(:placeholder-shown){color:var(--text-primary,#f3f4f6)}&:disabled{background-color:var(--bg-layer-3,#222932)}&:disabled:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}&:disabled,&:disabled:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}}.dial-input-disable,.dial-input-readonly{background-color:var(--bg-layer-3,#222932)}.dial-input-disable:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}.dial-input-disable,.dial-input-disable:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}.dial-input-error{border-color:var(--stroke-error,#f76464)}.dial-input-field{height:38px}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:focus{outline:none}}.dial-textarea{min-height:72px;resize:both;overflow:auto;white-space:normal}.dial-input-radio{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding:0;height:18px;width:18px;border-color:var(--stroke-hover,#f3f4f6);background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:currentColor;font:inherit;&:checked{border-color:var(--stroke-accent-primary,#5c8dea)}&:checked{&:after{height:10px;width:10px;background-color:var(--bg-accent-primary,#5c8dea);content:"";border-radius:18px}}&:focus,&:hover{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);background-color:transparent}&:disabled{pointer-events:none}&:disabled{&:checked{border-color:var(--stroke-primary,#333942)}&:checked{&:after{background-color:var(--controls-bg-disable,#7f8792)}}}}@layer ui{*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-  /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.relative{position:relative}.z-\[52\]{z-index:52}.z-\[55\]{z-index:55}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.h-0{height:0}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-2{width:.5rem}.w-80{width:20rem}.w-\[10px\]{width:10px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[500px\]{width:500px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[180px\]{min-width:180px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[300px\]{max-width:300px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(6) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-t-2{border-top-width:2px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font{font-family:var(--theme-font,var(--font-inter))}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-0{--tw-ring-offset-width:0px}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px);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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-icon-accent-primary:hover{color:var(--icon-accent-primary,#5c8dea)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus-visible\:outline:focus-visible{outline-style:solid}@media (min-width:640px){.sm\:inline{display:inline}}@media (min-width:768px){.md\:h-auto{height:auto}.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:p-4{padding:1rem}}
+  /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.relative{position:relative}.z-\[52\]{z-index:52}.z-\[55\]{z-index:55}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.h-0{height:0}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-2{width:.5rem}.w-80{width:20rem}.w-\[10px\]{width:10px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[500px\]{width:500px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[180px\]{min-width:180px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[300px\]{max-width:300px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(6) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-t-2{border-top-width:2px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font{font-family:var(--theme-font,var(--font-inter))}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.tracking-wider{letter-spacing:.05em}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-0{--tw-ring-offset-width:0px}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px);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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-icon-accent-primary:hover{color:var(--icon-accent-primary,#5c8dea)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus-visible\:outline:focus-visible{outline-style:solid}@media (min-width:640px){.sm\:inline{display:inline}}@media (min-width:768px){.md\:h-auto{height:auto}.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:p-4{padding:1rem}}

package/dist/src/components/Button/Button.d.ts

@@ -3,6 +3,7 @@ import { ButtonVariant } from '../../types/button';
 export interface DialButtonProps {
     variant?: ButtonVariant;
     cssClass?: string;
+    textCssClass?: string;
     disable?: boolean;
     title?: string;
     iconBefore?: ReactNode;
@@ -28,6 +29,7 @@ export interface DialButtonProps {
  * @param [title] - The text content of the button
  * @param [variant=ButtonVariant.Primary] - Defines the visual style of the button
  * @param [cssClass] - Additional CSS classes to apply to the button
+ * @param [textCssClass] - Additional CSS classes to apply specifically to the button text
  * @param [onClick] - Click event handler for the button
  * @param [disable=false] - Whether the button should be disabled
  * @param [iconAfter] - Icon or element to display after the button text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.2.0-rc.23",
+  "version": "0.2.0-rc.24",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -66,14 +66,14 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.0",
+    "@chromatic-com/storybook": "^4.1.1",
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.31.0",
-    "@storybook/addon-a11y": "^9.1.1",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-vitest": "^9.1.1",
-    "@storybook/react-vite": "^9.1.1",
+    "@storybook/addon-a11y": "^9.1.10",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-vitest": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^21.1.7",
@@ -92,7 +92,7 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.1.1",
+    "eslint-plugin-storybook": "^9.1.10",
     "eslint-plugin-tailwindcss": "^3.18.2",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
@@ -103,8 +103,8 @@
     "prettier": "3.6.2",
     "sass": "^1.89.2",
     "sass-embedded": "^1.89.2",
-    "storybook": "^9.1.1",
-    "storybook-addon-pseudo-states": "^9.1.1",
+    "storybook": "^9.1.10",
+    "storybook-addon-pseudo-states": "^9.1.10",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",