@epam/ai-dial-ui-kit 0.2.0-rc.17 → 0.2.0-rc.18

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

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

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

@@ -1,15 +1,35 @@
 import { jsx as r, jsxs as m, Fragment as ne } from "react/jsx-runtime";
-import u from "classnames";
-import { IconCircleCheck as te, IconAlertTriangle as se, IconAlertCircle as ae, IconInfoCircle as oe, IconX as z, IconLoader as le, IconMinus as ie, IconCheck as j, IconExclamationCircle as ce, IconEyeOff as de, IconEye as ue } from "@tabler/icons-react";
-import { createContext as me, useState as B, useRef as pe, useMemo as fe, useContext as he, forwardRef as W, isValidElement as xe, cloneElement as ge, useCallback as M } from "react";
-import { useFloating as _, offset as be, flip as ye, shift as Ce, arrow as we, autoUpdate as Ne, useHover as ve, useFocus as De, useDismiss as H, useRole as U, useInteractions as $, useMergeRefs as K, FloatingPortal as G, FloatingArrow as Ie, FloatingOverlay as Re, FloatingFocusManager as ke } from "@floating-ui/react";
-const R = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: u("flex-shrink-0", n), children: e }) : null;
+import d from "classnames";
+import { IconCircleCheck as te, IconAlertTriangle as se, IconAlertCircle as ae, IconInfoCircle as oe, IconX as M, IconLoader as le, IconMinus as ie, IconCheck as j, IconExclamationCircle as ce, IconEyeOff as de, IconEye as ue } from "@tabler/icons-react";
+import { createContext as me, useState as W, useRef as pe, useMemo as fe, useContext as he, forwardRef as _, isValidElement as xe, cloneElement as ge, useCallback as B } from "react";
+import { useFloating as H, offset as be, flip as ye, shift as Ce, arrow as we, autoUpdate as ve, useHover as Ne, useFocus as De, useDismiss as U, useRole as $, useInteractions as K, useMergeRefs as G, FloatingPortal as Z, FloatingArrow as Ie, FloatingOverlay as Re, FloatingFocusManager as ke } from "@floating-ui/react";
+const V = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
+  fieldTitle: e,
+  htmlFor: n,
+  optional: t,
+  optionalText: s,
+  cssClass: a
+}) => e ? /* @__PURE__ */ m(
+  "label",
+  {
+    className: d(
+      "dial-tiny text-secondary",
+      a,
+      !a?.includes("mb") && "mb-2"
+    ),
+    htmlFor: n,
+    children: [
+      /* @__PURE__ */ r("span", { className: "min-h-4", children: e }),
+      t && /* @__PURE__ */ r("span", { className: "ml-1", children: s ?? "(Optional)" })
+    ]
+  }
+) : null, R = ({ icon: e, className: n }) => e ? /* @__PURE__ */ r("span", { className: d("flex-shrink-0", n), children: e }) : null;
 var S = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(S || {});
 const Fe = {
   [S.Primary]: "dial-primary-button",
   [S.Secondary]: "dial-secondary-button",
   [S.Tertiary]: "dial-tertiary-button"
-}, Z = ({
+}, z = ({
   title: e,
   variant: n,
   cssClass: t,
@@ -18,15 +38,15 @@ const Fe = {
   disable: o,
   iconAfter: l,
   iconBefore: i,
-  hideTitleOnMobile: d,
+  hideTitleOnMobile: u,
   ariaLabel: c
 }) => {
-  const p = u(
+  const p = d(
     "dial-small-semi",
     l ? "mr-2" : "",
     i ? "ml-2" : "",
-    d ? "hidden sm:inline" : "inline"
-  ), h = u(
+    u ? "hidden sm:inline" : "inline"
+  ), h = d(
     n && Fe[n],
     t,
     "focus-visible:outline outline-offset-0"
@@ -47,27 +67,7 @@ const Fe = {
       ]
     }
   );
-}, V = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
-  fieldTitle: e,
-  htmlFor: n,
-  optional: t,
-  optionalText: s,
-  cssClass: a
-}) => e ? /* @__PURE__ */ m(
-  "label",
-  {
-    className: u(
-      "dial-tiny text-secondary",
-      a,
-      !a?.includes("mb") && "mb-2"
-    ),
-    htmlFor: n,
-    children: [
-      /* @__PURE__ */ r("span", { className: "min-h-4", children: e }),
-      t && /* @__PURE__ */ r("span", { className: "ml-1", children: s ?? "(Optional)" })
-    ]
-  }
-) : null;
+};
 var D = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(D || {});
 const Te = {
   info: /* @__PURE__ */ r(oe, { size: 24, stroke: 2 }),
@@ -89,7 +89,7 @@ const Te = {
   "div",
   {
     role: "alert",
-    className: u(
+    className: d(
       Se,
       Ee[e],
       t
@@ -100,11 +100,11 @@ const Te = {
         /* @__PURE__ */ r("div", { className: "text-primary", children: n })
       ] }),
       s && /* @__PURE__ */ r(
-        Z,
+        z,
         {
           cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ r(z, { size: 16 }),
+          iconBefore: /* @__PURE__ */ r(M, { size: 16 }),
           onClick: (o) => a?.(o)
         }
       )
@@ -121,7 +121,7 @@ const Te = {
   {
     role: "status",
     "aria-label": a,
-    className: u({
+    className: d({
       [Pe]: !0,
       "w-full h-full": s,
       [n || ""]: !!n
@@ -134,7 +134,7 @@ const Te = {
           {
             width: e,
             height: e,
-            className: u(Le, t)
+            className: d(Le, t)
           }
         )
       }
@@ -152,11 +152,11 @@ const Te = {
   open: s,
   onOpenChange: a
 } = {}) => {
-  const [o, l] = B(e), i = pe(null), d = s ?? o, c = a ?? l, p = _({
+  const [o, l] = W(e), i = pe(null), u = s ?? o, c = a ?? l, p = H({
     placement: n,
-    open: d,
+    open: u,
     onOpenChange: c,
-    whileElementsMounted: Ne,
+    whileElementsMounted: ve,
     middleware: [
       be(Ae + Oe),
       ye({
@@ -169,33 +169,33 @@ const Te = {
         element: i
       })
     ]
-  }), h = ve(p.context, {
+  }), h = Ne(p.context, {
     move: !1,
     enabled: s == null,
     mouseOnly: t,
     delay: { open: 500, close: 0 }
   }), b = De(p.context, {
     enabled: s == null
-  }), C = H(p.context), y = U(p.context, { role: "tooltip" }), x = $([h, b, C, y]);
+  }), C = U(p.context), y = $(p.context, { role: "tooltip" }), x = K([h, b, C, y]);
   return fe(
     () => ({
-      open: d,
+      open: u,
       setOpen: c,
       arrowRef: i,
       ...x,
       ...p
     }),
-    [d, c, x, p]
+    [u, c, x, p]
   );
-}, Ve = ({
+}, Be = ({
   children: e,
   ...n
 }) => {
   const t = Me(n);
   return /* @__PURE__ */ r(X.Provider, { value: t, children: e });
-}, ze = W(function({ style: n, ...t }, s) {
-  const a = Y(), o = K([a.refs.setFloating, s]);
-  return a.open ? /* @__PURE__ */ r(G, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+}, Ve = _(function({ style: n, ...t }, s) {
+  const a = Y(), o = G([a.refs.setFloating, s]);
+  return a.open ? /* @__PURE__ */ r(Z, { id: "tooltip-portal", children: /* @__PURE__ */ m(
     "div",
     {
       ref: o,
@@ -204,7 +204,7 @@ const Te = {
         ...n
       },
       ...a.getFloatingProps(t),
-      className: u(
+      className: d(
         "z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
         a.getFloatingProps(t).className
       ),
@@ -223,19 +223,19 @@ const Te = {
       ]
     }
   ) }) : null;
-}), je = W(function({ children: n, asChild: t = !1, ...s }, a) {
-  const o = Y(), i = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, d = K([o.refs.setReference, a, i]);
+}), ze = _(function({ children: n, asChild: t = !1, ...s }, a) {
+  const o = Y(), i = n && typeof n == "object" && "ref" in n && n.ref !== void 0 ? n.ref : void 0, u = G([o.refs.setReference, a, i]);
   return t && xe(n) ? ge(
     n,
     o.getReferenceProps({
-      ref: d,
+      ref: u,
       ...s,
       ...n.props
     })
   ) : /* @__PURE__ */ r(
     "span",
     {
-      ref: d,
+      ref: u,
       ...o.getReferenceProps(s),
       className: s.className ?? "dial-tooltip-trigger text-left",
       children: n
@@ -248,12 +248,12 @@ const Te = {
   triggerClassName: s,
   contentClassName: a,
   ...o
-}) => /* @__PURE__ */ m(Ve, { ...o, children: [
-  /* @__PURE__ */ r(je, { className: u(s, "truncate"), children: t }),
+}) => /* @__PURE__ */ m(Be, { ...o, children: [
+  /* @__PURE__ */ r(ze, { className: d(s, "truncate"), children: t }),
   /* @__PURE__ */ r(
-    ze,
+    Ve,
     {
-      className: u(
+      className: d(
         "text-primary",
         a,
         "max-w-[300px]",
@@ -262,8 +262,8 @@ const Te = {
       children: n
     }
   )
-] }), Be = 18, P = {
-  size: Be,
+] }), je = 18, P = {
+  size: je,
   stroke: 2
 }, hr = ({
   label: e,
@@ -274,20 +274,20 @@ const Te = {
   ariaLabel: o,
   onChange: l
 }) => {
-  const i = M(
+  const i = B(
     (p) => {
       p.stopPropagation(), l?.(p.target.checked, n);
     },
     [l, n]
-  ), d = u(
+  ), u = d(
     "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'}`,
     a ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : ""
-  ), c = u(
+  ), c = d(
     "mr-2 border rounded",
     a ? "bg-layer-4 border-icon-secondary" : ""
   );
-  return /* @__PURE__ */ m("label", { className: d, htmlFor: n, children: [
+  return /* @__PURE__ */ m("label", { className: u, htmlFor: n, children: [
     t && (s ? /* @__PURE__ */ r(ie, { className: c, ...P }) : /* @__PURE__ */ r(j, { className: c, ...P })),
     e && /* @__PURE__ */ r(I, { tooltip: e, triggerClassName: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: "text-primary w-full truncate", children: e }) }),
     /* @__PURE__ */ r(
@@ -352,13 +352,13 @@ const We = (e, n) => {
   return /* @__PURE__ */ m(
     "button",
     {
-      className: u(a, We(e, t)),
+      className: d(a, We(e, t)),
       onClick: () => s(e.id),
       children: [
         /* @__PURE__ */ r(
           "span",
           {
-            className: u(o, _e(e, t)),
+            className: d(o, _e(e, t)),
             children: l()
           }
         ),
@@ -394,19 +394,19 @@ const We = (e, n) => {
   inputId: o,
   cssClass: l,
   labelCssClass: i,
-  disabled: d,
+  disabled: u,
   onChange: c,
   descriptionCssClass: p
 }) => {
-  const h = `${o}-desc`, b = u(
+  const h = `${o}-desc`, b = d(
     "dial-small cursor-pointer",
-    d ? "text-secondary" : "text-primary",
+    u ? "text-secondary" : "text-primary",
     i
-  ), C = u(
+  ), C = d(
     "cursor-pointer dial-input-radio",
     t && "mr-2",
     l
-  ), y = u("flex flex-col", !!s && "mb-2"), x = u(
+  ), y = d("flex flex-col", !!s && "mb-2"), x = d(
     "dial-tiny mt-2 ml-[26px] text-secondary",
     p
   );
@@ -420,11 +420,11 @@ const We = (e, n) => {
           name: e,
           value: n,
           checked: a,
-          disabled: d,
+          disabled: u,
           "aria-describedby": a && s ? h : void 0,
           className: C,
-          onChange: (v) => {
-            d || v.target.checked && c?.(n);
+          onChange: (N) => {
+            u || N.target.checked && c?.(n);
           }
         }
       ),
@@ -446,7 +446,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
   radioButtons: o,
   activeRadioButton: l,
   orientation: i,
-  onChange: d
+  onChange: u
 }) => /* @__PURE__ */ m("div", { className: $e, children: [
   e && /* @__PURE__ */ r(A, { fieldTitle: e, htmlFor: a }),
   /* @__PURE__ */ r(
@@ -455,7 +455,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
       role: "radiogroup",
       "aria-label": e,
       "aria-disabled": s || void 0,
-      className: u(
+      className: d(
         Ke,
         Ze[i]
       ),
@@ -471,14 +471,27 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
             labelCssClass: t,
             title: c.name,
             checked: c.id === l,
-            onChange: () => d(c.id)
+            onChange: () => u(c.id)
           }
         ),
         c.id === l && c.content ? /* @__PURE__ */ r("div", { className: Ge, children: c.content }) : null
       ] }, c.id))
     }
   )
-] }), Xe = ({
+] }), br = ({
+  ariaLabel: e,
+  cssClass: n,
+  size: t = 24,
+  onClose: s
+}) => /* @__PURE__ */ r(
+  z,
+  {
+    ariaLabel: e,
+    cssClass: d("text-secondary hover:text-accent-primary", n),
+    onClick: s,
+    iconBefore: /* @__PURE__ */ r(M, { size: t })
+  }
+), Xe = ({
   value: e,
   textareaId: n,
   placeholder: t,
@@ -494,14 +507,14 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
     placeholder: t,
     value: e || "",
     disabled: a,
-    className: u(
+    className: d(
       "dial-textarea dial-input",
       o ? "dial-input-error" : "",
       a && "dial-input-disable",
       l && "dial-input-readonly",
       s
     ),
-    onChange: (d) => !l && i?.(d.currentTarget.value)
+    onChange: (u) => !l && i?.(u.currentTarget.value)
   }
 ) }), Ye = [
   "ArrowLeft",
@@ -522,13 +535,13 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
       return;
     }
     if (t !== void 0 || s !== void 0) {
-      const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, i = o.slice(0, l) + e.key + o.slice(l), d = parseFloat(i);
-      if (!isNaN(d)) {
-        if (t !== void 0 && d < t) {
+      const o = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, i = o.slice(0, l) + e.key + o.slice(l), u = parseFloat(i);
+      if (!isNaN(u)) {
+        if (t !== void 0 && u < t) {
           e.preventDefault();
           return;
         }
-        if (s !== void 0 && d > s) {
+        if (s !== void 0 && u > s) {
           e.preventDefault();
           return;
         }
@@ -544,7 +557,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
   placeholder: o = "",
   cssClass: l = "",
   containerCssClass: i,
-  tooltipTriggerClassName: d,
+  tooltipTriggerClassName: u,
   type: c = "text",
   disabled: p,
   readonly: h,
@@ -552,8 +565,8 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
   onChange: C,
   min: y,
   max: x,
-  prefix: N,
-  suffix: v,
+  prefix: v,
+  suffix: N,
   textBeforeInput: f,
   textAfterInput: k
 }) => {
@@ -571,7 +584,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
   return /* @__PURE__ */ m(
     "div",
     {
-      className: u(
+      className: d(
         "dial-input-field flex flex-row items-center justify-between",
         t ? "dial-input-no-border" : "dial-input",
         b && "dial-input-error",
@@ -593,12 +606,12 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
             elementId: f + "textBefore"
           }
         ) }),
-        N && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
+        v && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
-          N
+          v
         ] }),
         /* @__PURE__ */ r(R, { icon: e }),
-        /* @__PURE__ */ r(I, { tooltip: s, triggerClassName: d, children: /* @__PURE__ */ r(
+        /* @__PURE__ */ r(I, { tooltip: s, triggerClassName: u, children: /* @__PURE__ */ r(
           "input",
           {
             type: c,
@@ -608,7 +621,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
             value: s ?? "",
             title: s ? String(s) : "",
             disabled: p,
-            className: u("border-0 bg-transparent px-2", l),
+            className: d("border-0 bg-transparent px-2", l),
             onChange: (w) => !h && re?.(w),
             onKeyDown: ee,
             onWheel: J,
@@ -617,9 +630,9 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
           }
         ) }),
         /* @__PURE__ */ r(R, { icon: n }),
-        v && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
+        N && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
-          v
+          N
         ] }),
         k && /* @__PURE__ */ r(I, { tooltip: k, children: /* @__PURE__ */ r(
           L,
@@ -644,11 +657,11 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
   elementId: o,
   containerCssClass: l,
   readonly: i,
-  defaultEmptyText: d,
+  defaultEmptyText: u,
   min: c,
   max: p,
   ...h
-}) => /* @__PURE__ */ m("div", { className: u("flex flex-col", l), children: [
+}) => /* @__PURE__ */ m("div", { className: d("flex flex-col", l), children: [
   /* @__PURE__ */ r(
     A,
     {
@@ -657,7 +670,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
       htmlFor: o
     }
   ),
-  i ? /* @__PURE__ */ r("span", { children: h.value || (d ?? "None") }) : /* @__PURE__ */ m(ne, { children: [
+  i ? /* @__PURE__ */ r("span", { children: h.value || (u ?? "None") }) : /* @__PURE__ */ m(ne, { children: [
     /* @__PURE__ */ r(
       L,
       {
@@ -672,7 +685,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
     ),
     /* @__PURE__ */ r(V, { errorText: n })
   ] })
-] }), br = ({
+] }), yr = ({
   onChange: e,
   value: n,
   min: t,
@@ -691,7 +704,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
       ...a
     }
   );
-}, yr = ({
+}, Cr = ({
   onChange: e,
   ...n
 }) => /* @__PURE__ */ r(
@@ -701,7 +714,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
     onChange: (t) => e?.(t),
     ...n
   }
-), Cr = ({
+), wr = ({
   fieldTitle: e,
   optional: n,
   elementId: t,
@@ -726,19 +739,19 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
     }
   ),
   /* @__PURE__ */ r(V, { errorText: a })
-] }), wr = ({
+] }), vr = ({
   title: e,
   switchId: n,
   isOn: t = !1,
   disabled: s,
   onChange: a
 }) => {
-  const o = u(
+  const o = d(
     "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",
     s ? "pointer-events-none" : "",
     s ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
-  ), l = M(
+  ), l = B(
     (i) => {
       i.stopPropagation(), a?.(!t);
     },
@@ -759,7 +772,7 @@ const $e = "flex flex-col gap-2", Ke = "flex", Ge = "pb-1 mt-2", Ze = {
     /* @__PURE__ */ r("label", { htmlFor: n, className: o, children: /* @__PURE__ */ r(
       "span",
       {
-        className: u(
+        className: d(
           "size-3 rounded-full",
           s ? t ? "bg-layer-4" : "bg-controls-disable" : "bg-controls-enable-primary"
         )
@@ -782,37 +795,37 @@ const er = "z-[52] flex items-center justify-center bg-blackout md:p-4", rr = "r
   headingClass: o,
   dividers: l = !0,
   children: i,
-  footer: d,
+  footer: u,
   onClose: c,
   size: p = T.Md
 }) => {
-  const { refs: h, context: b } = _({
+  const { refs: h, context: b } = H({
     open: e,
     onOpenChange: (f) => {
       f || c?.(null);
     }
-  }), C = U(b, { role: "dialog" }), y = H(b, { outsidePress: !0 }), { getFloatingProps: x } = $([C, y]);
+  }), C = $(b, { role: "dialog" }), y = U(b, { outsidePress: !0 }), { getFloatingProps: x } = K([C, y]);
   if (!e) return null;
-  const N = typeof n == "string" ? "dial-popup-heading" : void 0, v = (f) => f ? typeof f == "string" ? /* @__PURE__ */ r(
+  const v = typeof n == "string" ? "dial-popup-heading" : void 0, N = (f) => f ? typeof f == "string" ? /* @__PURE__ */ r(
     "h3",
     {
-      id: N,
-      className: u(
+      id: v,
+      className: d(
         "flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",
         o
       ),
       children: /* @__PURE__ */ r(I, { tooltip: f, children: f })
     }
   ) : f : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(G, { id: t, children: /* @__PURE__ */ r(Re, { className: u(er, a), children: /* @__PURE__ */ r(ke, { context: b, children: /* @__PURE__ */ m(
+  return /* @__PURE__ */ r(Z, { id: t, children: /* @__PURE__ */ r(Re, { className: d(er, a), children: /* @__PURE__ */ r(ke, { context: b, children: /* @__PURE__ */ m(
     "div",
     {
       ref: h.setFloating,
       ...x(),
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": N,
-      className: u(
+      "aria-labelledby": v,
+      className: d(
         rr,
         sr[p],
         l && nr,
@@ -820,19 +833,19 @@ const er = "z-[52] flex items-center justify-center bg-blackout md:p-4", rr = "r
       ),
       children: [
         /* @__PURE__ */ m("div", { className: tr, children: [
-          v(n),
+          N(n),
           /* @__PURE__ */ r(
-            Z,
+            z,
             {
               cssClass: "text-secondary hover:text-accent-primary",
               ariaLabel: "Close dialog",
-              iconBefore: /* @__PURE__ */ r(z, { size: 18 }),
+              iconBefore: /* @__PURE__ */ r(M, { size: 18 }),
               onClick: (f) => c?.(f)
             }
           )
         ] }),
         /* @__PURE__ */ r("div", { className: "flex-grow overflow-auto", children: i }),
-        d
+        u
       ]
     }
   ) }) }) });
@@ -844,7 +857,7 @@ const er = "z-[52] flex items-center justify-center bg-blackout md:p-4", rr = "r
     onClick: e
   }
 ), or = ({ onClick: e }) => /* @__PURE__ */ r(ue, { ...P, className: "text-primary", onClick: e }), lr = ({ ...e }) => {
-  const [n, t] = B(!1), s = M((a) => {
+  const [n, t] = W(!1), s = B((a) => {
     t(a);
   }, []);
   return /* @__PURE__ */ r(
@@ -855,7 +868,7 @@ const er = "z-[52] flex items-center justify-center bg-blackout md:p-4", rr = "r
       iconAfterInput: n ? /* @__PURE__ */ r(ar, { onClick: () => s(!1) }) : /* @__PURE__ */ r(or, { onClick: () => s(!0) })
     }
   );
-}, vr = ({
+}, Dr = ({
   fieldTitle: e,
   optional: n,
   elementCssClass: t,
@@ -886,23 +899,24 @@ export {
   D as AlertVariant,
   S as ButtonVariant,
   pr as DialAlert,
-  Z as DialButton,
+  z as DialButton,
   hr as DialCheckbox,
+  br as DialCloseButton,
   V as DialErrorText,
   A as DialFieldLabel,
   R as DialIcon,
   L as DialInput,
   fr as DialLoader,
-  br as DialNumberInputField,
+  yr as DialNumberInputField,
   lr as DialPasswordInput,
-  vr as DialPasswordInputField,
+  Dr as DialPasswordInputField,
   Nr as DialPopup,
   Ue as DialRadioButton,
   gr as DialRadioGroup,
   xr as DialSteps,
-  wr as DialSwitch,
-  Cr as DialTextAreaField,
-  yr as DialTextInputField,
+  vr as DialSwitch,
+  wr as DialTextAreaField,
+  Cr as DialTextInputField,
   Xe as DialTextarea,
   I as DialTooltip,
   T as PopupSize,

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-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%;padding:.5rem .75rem;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}.relative{position:relative}.z-\[52\]{z-index:52}.z-\[55\]{z-index:55}.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-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[72px\]{min-height:72px}.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-full{width:100%}.min-w-0{min-width:0}.min-w-\[180px\]{min-width:180px}.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}@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}.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,.truncate{overflow:hidden}.truncate{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-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-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}.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-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.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))}.font-medium{font-weight:500}.font-semibold{font-weight:600}.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)}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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}}.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-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}.relative{position:relative}.z-\[52\]{z-index:52}.z-\[55\]{z-index:55}.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-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[72px\]{min-height:72px}.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-full{width:100%}.min-w-0{min-width:0}.min-w-\[180px\]{min-width:180px}.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}@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}.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,.truncate{overflow:hidden}.truncate{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-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-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}.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-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.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))}.font-medium{font-weight:500}.font-semibold{font-weight:600}.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)}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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}}.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-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

@@ -1,6 +1,6 @@
 import { FC, MouseEvent, ReactNode, Ref } from 'react';
 import { ButtonVariant } from '../../types/button';
-export interface DialButton {
+export interface DialButtonProps {
     variant?: ButtonVariant;
     cssClass?: string;
     disable?: boolean;
@@ -36,4 +36,4 @@ export interface DialButton {
  * @param [ariaLabel] - Accessible label for screen readers when no title is provided
  * @param [ref] - Ref to access the button DOM element
  */
-export declare const DialButton: FC<DialButton>;
+export declare const DialButton: FC<DialButtonProps>;

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

@@ -0,0 +1,26 @@
+import { FC, MouseEvent } from 'react';
+export interface DialCloseButtonProps {
+    ariaLabel?: string;
+    cssClass?: string;
+    size?: number;
+    onClose: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * A Close button component with a customizable icon and accessible label.
+ *
+ * @example
+ * ```tsx
+ * <DialCloseButton
+ *   ariaLabel="Close dialog"
+ *   onClose={handleClose}
+ *   cssClass="custom-close"
+ *   size={32}
+ * />
+ * ```
+ *
+ * @param [ariaLabel] - Accessible label for screen readers
+ * @param [cssClass] - Additional CSS classes to apply to the button
+ * @param [size=24] - Size of the close icon
+ * @param onClose - Click event handler for the close button
+ */
+export declare const DialCloseButton: FC<DialCloseButtonProps>;

package/dist/src/index.d.ts

@@ -1,4 +1,3 @@
-export { DialButton } from './components/Button/Button';
 export { DialErrorText } from './components/ErrorText/ErrorText';
 export { DialFieldLabel } from './components/Field/Field';
 export { DialIcon } from './components/Icon/Icon';
@@ -8,6 +7,8 @@ export { DialCheckbox } from './components/Checkbox/Checkbox';
 export { DialSteps } from './components/Steps/Steps';
 export { DialRadioButton } from './components/RadioButton/RadioButton';
 export { DialRadioGroup } from './components/RadioGroup/RadioGroup';
+export { DialButton } from './components/Button/Button';
+export { DialCloseButton } from './components/CloseButton/CloseButton';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTextAreaField } from './components/TextAreaField/TextAreaField';
 export { DialTooltip } from './components/Tooltip/Tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.2.0-rc.17",
+  "version": "0.2.0-rc.18",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",