@epam/ai-dial-ui-kit 0.2.0-rc.31 → 0.2.0-rc.32

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("classnames"),C=require("@tabler/icons-react"),h=require("react"),j=require("@floating-ui/react"),le=require("react-dom");function oe(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const v=oe(h),B=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),z=({fieldTitle:e,htmlFor:t,optional:r,optionalText:n,cssClass:a})=>e?s.jsxs("label",{className:i("dial-tiny text-secondary",a,!a?.includes("mb")&&"mb-2"),htmlFor:t,children:[s.jsx("span",{className:"min-h-4",children:e}),r&&s.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null,k=({icon:e,className:t})=>e?s.jsx("span",{className:i("flex-shrink-0",t),children:e}):null;var N=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(N||{});const ie={[N.Primary]:"dial-primary-button",[N.Secondary]:"dial-secondary-button",[N.Tertiary]:"dial-tertiary-button",[N.Danger]:"dial-danger-button"},T=({title:e,variant:t,cssClass:r,textCssClass:n,ref:a,onClick:l,disable:o,iconAfter:u,iconBefore:d,hideTitleOnMobile:c,ariaLabel:x})=>{const p=i("dial-small-semi",u?"mr-2":"",d?"ml-2":"",c?"hidden sm:inline":"inline",n),f=i(t&&ie[t],r,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:a,type:"button",className:f,onClick:m=>l?.(m),disabled:o,"aria-label":e||x,children:[s.jsx(k,{icon:d}),e&&s.jsx("span",{className:p,children:e}),s.jsx(k,{icon:u})]})};var L=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(L||{});const ce={info:s.jsx(C.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(C.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(C.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(C.IconCircleCheck,{size:24,stroke:2})},de={[L.Info]:"bg-info border-info text-info",[L.Success]:"bg-success border-success text-success",[L.Warning]:"bg-warning border-warning text-warning",[L.Error]:"bg-error border-error text-error"},ue="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",xe=({variant:e=L.Info,message:t,cssClass:r,closable:n=!1,onClose:a})=>s.jsxs("div",{role:"alert",className:i(ue,de[e],r),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(k,{icon:ce[e]}),s.jsx("div",{className:"text-primary",children:t})]}),n&&s.jsx(T,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(C.IconX,{size:16}),onClick:l=>a?.(l)})]}),pe="flex items-center justify-center text-secondary",me="shrink-0 grow-0 basis-auto animate-spin-steps",fe=e=>v.createElement("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},v.createElement("path",{d:"M24 39V46.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),v.createElement("path",{opacity:.4,d:"M9 24H1.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),v.createElement("path",{opacity:.5,d:"M8.0918 8.0918L13.3994 13.3994",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),v.createElement("path",{opacity:.6,d:"M24 1.5V9",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),v.createElement("path",{opacity:.7,d:"M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),v.createElement("path",{opacity:.8,d:"M46.5 24H39",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),v.createElement("path",{opacity:.9,d:"M34.6055 34.6055L39.9082 39.9082",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),v.createElement("path",{opacity:.3,d:"M13.3936 34.6055L8.08594 39.9131",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"})),$=({size:e=18,cssClass:t,iconClass:r,fullWidth:n=!0,ariaLabel:a="Loading"})=>s.jsx("div",{role:"status","aria-label":a,name:"loader",className:i({[pe]:!0,"w-full h-full":n,[t||""]:!!t}),children:s.jsx(k,{icon:s.jsx(fe,{width:e,height:e,className:i(me,r),role:"img"})})}),he=7,ge=2,K=h.createContext(null),U=()=>{const e=h.useContext(K);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},je=({initialOpen:e=!1,placement:t="bottom",isTriggerClickable:r=!1,open:n,onOpenChange:a}={})=>{const[l,o]=h.useState(e),u=h.useRef(null),d=n??l,c=a??o,x=j.useFloating({placement:t,open:d,onOpenChange:c,whileElementsMounted:j.autoUpdate,middleware:[j.offset(he+ge),j.flip({crossAxis:t.includes("-"),fallbackAxisSideDirection:"start",padding:5}),j.shift({padding:5}),j.arrow({element:u})]}),p=j.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:r,delay:{open:500,close:0}}),f=j.useFocus(x.context,{enabled:n==null}),m=j.useDismiss(x.context),b=j.useRole(x.context,{role:"tooltip"}),g=j.useInteractions([p,f,m,b]);return h.useMemo(()=>({open:d,setOpen:c,arrowRef:u,...g,...x}),[d,c,g,x])},be=({children:e,...t})=>{const r=je(t);return s.jsx(K.Provider,{value:r,children:e})},Ce=h.forwardRef(function({style:t,...r},n){const a=U(),l=j.useMergeRefs([a.refs.setFloating,n]);return a.open?s.jsx(j.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...a.floatingStyles,...t},...a.getFloatingProps(r),className:i("z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",a.getFloatingProps(r).className),children:[r.children,s.jsx(j.FloatingArrow,{ref:a.arrowRef,context:a.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),ye=h.forwardRef(function({children:t,asChild:r=!1,...n},a){const l=U(),u=t&&typeof t=="object"&&"ref"in t&&t.ref!==void 0?t.ref:void 0,d=j.useMergeRefs([l.refs.setReference,a,u]);return r&&h.isValidElement(t)?h.cloneElement(t,l.getReferenceProps({ref:d,...n,...t.props})):s.jsx("span",{ref:d,...l.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:t})}),S=({hideTooltip:e,tooltip:t,children:r,triggerClassName:n,contentClassName:a,...l})=>s.jsxs(be,{...l,children:[s.jsx(ye,{className:i(n,"truncate"),children:r}),s.jsx(Ce,{className:i("text-primary",a,"max-w-[300px]",(e||!t)&&"hidden"),children:t})]}),F=18,P={size:F,stroke:2},we=({label:e,id:t,checked:r,indeterminate:n,disabled:a,ariaLabel:l,onChange:o})=>{const u=h.useCallback(x=>{x.stopPropagation(),o?.(x.target.checked,t)},[o,t]),d=i("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${r?"":'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=i("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:t,children:[r&&(n?s.jsx(C.IconMinus,{className:c,...P}):s.jsx(C.IconCheck,{className:c,...P})),e&&s.jsx(S,{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:t,checked:r,"aria-checked":n?"mixed":r,"aria-disabled":a||void 0,"aria-label":e?void 0:l,className:"invisible w-0 h-0"})]})};var w=(e=>(e.VALID="valid",e.ERROR="error",e))(w||{});const ve=(e,t)=>{if(t===e.id)switch(e.status){case w.VALID:return"border-accent-secondary text-primary";case w.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case w.VALID:return"border-primary text-white";case w.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},Ne=(e,t)=>{if(t===e.id)switch(e.status){case w.VALID:return"bg-accent-secondary";case w.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case w.VALID:return"bg-accent-secondary";case w.ERROR:return"bg-red-400";default:return"bg-layer-4"}},ke=({step:e,index:t,currentStep:r,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=()=>r===e.id&&e.status===w.ERROR?s.jsx(C.IconExclamationCircle,{stroke:2,size:16}):r!==e.id&&e.status===w.VALID?s.jsx(C.IconCheck,{stroke:2,size:16}):t+1;return s.jsxs("button",{className:i(a,ve(e,r)),onClick:()=>n(e.id),children:[s.jsx("span",{className:i(l,Ne(e,r)),children:o()}),s.jsx("span",{children:e.name})]})},De=({steps:e,currentStep:t,onChangeStep:r})=>{const n=a=>{const l=e.findIndex(u=>u.id===t),o=e.findIndex(u=>u.id===a);(a!==t&&e[l].status===w.VALID||o<l)&&r(a)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((a,l)=>s.jsx(ke,{currentStep:t,onChangeStep:n,step:a,index:l},a.id))})},X=({name:e,value:t,title:r,description:n,checked:a=!1,inputId:l,cssClass:o,labelCssClass:u,disabled:d,onChange:c,descriptionCssClass:x})=>{const p=`${l}-desc`,f=i("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=i("cursor-pointer dial-input-radio",r&&"mr-2",o),b=i("flex flex-col",!!n&&"mb-2"),g=i("dial-tiny mt-2 ml-[26px] text-secondary",x),D=I=>{d||I.target.checked&&c?.(t)};return s.jsxs("div",{className:b,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:l,name:e,value:t,checked:a,disabled:d,"aria-describedby":a&&n?p:void 0,className:m,onChange:D}),r?s.jsx("label",{className:f,htmlFor:l,children:r}):null]}),a&&n&&s.jsx("div",{id:p,className:g,children:n})]})};var _=(e=>(e.Row="Row",e.Column="Column",e))(_||{});const Ie="flex flex-col gap-2",Se="flex",Re="pb-1 mt-2",Le={[_.Column]:"flex-col gap-y-3",[_.Row]:"flex-row gap-x-6"},Ee=({fieldTitle:e,radioCssClass:t,labelCssClass:r,disabled:n,elementId:a,radioButtons:l,activeRadioButton:o,orientation:u,onChange:d})=>s.jsxs("div",{className:Ie,children:[e&&s.jsx(z,{fieldTitle:e,htmlFor:a}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":n||void 0,className:i(Se,Le[u]),children:l.map(c=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(X,{name:a,value:c.id,inputId:c.id,disabled:n,cssClass:t,labelCssClass:r,title:c.name,checked:c.id===o,onChange:()=>d(c.id)}),c.id===o&&c.content?s.jsx("div",{className:Re,children:c.content}):null]},c.id))})]}),Fe=({icon:e,title:t,description:r})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(C.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:t}),r&&s.jsx("span",{className:"mt-1 text-primary",children:r})]}),Te=60,Pe=({containerCssClass:e,children:t,width:r,title:n,iconSize:a=F,titleCssClass:l,additionalButtons:o})=>{const[u,d]=h.useState(r),[c,x]=h.useState(!0),p=i(["transform rotate-180 [writing-mode:tb-rl]",c&&"hidden",l]),f=i(["flex flex-row gap-2 cursor-pointer text-secondary",c?"justify-end":"justify-center"]),m=()=>{d(c?Te:r),x(!c)};return s.jsxs("div",{className:i(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:i(["flex-1 min-h-0 overflow-auto",!c&&"hidden"]),children:t}),s.jsx("div",{className:p,children:n}),s.jsxs("div",{className:f,children:[c&&o,s.jsx(T,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:c?s.jsx(C.IconChevronsLeft,{size:a,stroke:P.stroke}):s.jsx(C.IconChevronsRight,{size:a,stroke:P.stroke})})]})]})},Me=({label:e,text:t,children:r,postfix:n})=>s.jsxs("div",{className:i("flex flex-col text-secondary",r?"":"max-w-[200px]"),children:[s.jsx("label",{className:"dial-tiny mb-2",children:e}),r||s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx(S,{triggerClassName:"text-primary",tooltip:t,children:t}),n||null]})]}),Q=({ariaLabel:e,cssClass:t,size:r=24,onClose:n})=>s.jsx(T,{ariaLabel:e,cssClass:i("text-secondary hover:text-accent-primary",t),onClick:n,iconBefore:s.jsx(C.IconX,{size:r})}),Y=({value:e,textareaId:t,placeholder:r,cssClass:n="",disabled:a,invalid:l,readonly:o,onChange:u})=>s.jsx(S,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:t,placeholder:r,value:e||"",disabled:a,className:i("dial-textarea dial-input px-3 py-2",l?"dial-input-error":"",a&&"dial-input-disable",o&&"dial-input-readonly",n),onChange:d=>!o&&u?.(d.currentTarget.value)})}),Ae=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Oe=(e,t,r,n)=>{if((t==="number"||r!==void 0||n!==void 0)&&!Ae.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(r===void 0||r<0))&&!(e.key==="."&&t==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(r!==void 0||n!==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(r!==void 0&&d<r){e.preventDefault();return}if(n!==void 0&&d>n){e.preventDefault();return}}}}},A=({iconBefore:e,iconAfter:t,hideBorder:r,value:n,elementId:a,placeholder:l="",cssClass:o="",containerCssClass:u,tooltipTriggerClassName:d,type:c="text",disabled:x,readonly:p,invalid:f,onChange:m,min:b,max:g,prefix:D,suffix:I,textBeforeInput:y,textAfterInput:W})=>{const te=R=>R.target.blur(),re=c==="number"||b!==void 0||g!==void 0,ne=R=>{Oe(R,c,b,g)},ae=R=>{const M=R.currentTarget.value;if(re&&M!==""){const H=parseFloat(M);if(isNaN(H)&&M!=="-"&&M!=="."||!isNaN(H)&&(b!==void 0&&H<b||g!==void 0&&H>g))return}m?.(M)};return s.jsxs("div",{className:i("dial-input-field flex flex-row items-center justify-between py-2",r?"dial-input-no-border":"dial-input",f&&"dial-input-error",x&&"dial-input-disable",p&&"dial-input-readonly",!y&&"pl-3",!W&&"pr-3",u),children:[y&&s.jsx("div",{children:s.jsx(A,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"overflow-hidden overflow-ellipsis dial-small",value:y,disabled:!0,elementId:y+"textBefore"})}),D&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",D]}),s.jsx(k,{icon:e}),s.jsx(S,{tooltip:n,triggerClassName:i(d,"flex-1"),children:s.jsx("input",{type:c,autoComplete:"off",id:a,placeholder:l,value:n??"",disabled:x,className:i("border-0 bg-transparent",o),onChange:R=>!p&&ae?.(R),onKeyDown:ne,onWheel:te,min:b,max:g})}),s.jsx(k,{icon:t}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),W&&s.jsx("div",{children:s.jsx(A,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",value:W,disabled:!0,elementId:W+"textAfter"})})]})},Ve=/^0+\.(\d+)?$/,Be=/^0+/,J=({fieldTitle:e,errorText:t,optional:r,elementCssClass:n,elementContainerCssClass:a,elementId:l,containerCssClass:o,readonly:u,defaultEmptyText:d,min:c,max:x,...p})=>s.jsxs("div",{className:i("flex flex-col",o),children:[s.jsx(z,{fieldTitle:e,optional:r,htmlFor:l}),u?s.jsx("span",{children:p.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(A,{elementId:l,cssClass:n,containerCssClass:a,invalid:t!=null,min:c,max:x,...p}),s.jsx(B,{errorText:t})]})]}),ze=({onChange:e,value:t,min:r,max:n,...a})=>{const l=o=>String(o)?.match(Ve)?String(o)?.replace(Be,"0"):Number(o);return s.jsx(J,{type:"number",onChange:o=>e?.(l(o)),value:t,min:r,max:n,...a})},We=({onChange:e,...t})=>s.jsx(J,{type:"text",onChange:r=>e?.(r),...t}),He=({fieldTitle:e,optional:t,elementId:r,elementCssClass:n,errorText:a,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(z,{fieldTitle:e,optional:t,htmlFor:r}),s.jsx(Y,{textareaId:r,cssClass:n,...l}),s.jsx(B,{errorText:a})]}),_e=({title:e,switchId:t,isOn:r=!1,disabled:n,onChange:a})=>{const l=i("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",r?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?r?"bg-controls-disable":"bg-layer-4":r?"bg-accent-primary":"bg-layer-4"),o=h.useCallback(u=>{u.stopPropagation(),a?.(!r)},[a,r]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:t,disabled:n,className:"invisible w-0 h-0",checked:r}),s.jsx("label",{htmlFor:t,className:l,children:s.jsx("span",{className:i("size-3 rounded-full",n?r?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var E=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(E||{});const qe="z-[52] flex items-center justify-center bg-blackout md:p-4",Ge="relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto",Ze="divide-tertiary divide-y",$e="flex flex-row justify-between py-4 px-6 items-center",Ke={[E.Sm]:"max-w-full md:max-w-[400px]",[E.Md]:"max-w-full md:max-w-[800px]",[E.Lg]:"max-w-full md:max-w-[1200px]"},ee=({open:e=!1,title:t,portalId:r,cssClass:n,overlayClass:a,headingClass:l,dividers:o=!0,children:u,footer:d,onClose:c,size:x=E.Md})=>{const{refs:p,context:f}=j.useFloating({open:e,onOpenChange:y=>{y||c?.(null)}}),m=j.useRole(f,{role:"dialog"}),b=j.useDismiss(f,{outsidePress:!0}),{getFloatingProps:g}=j.useInteractions([m,b]);if(!e)return null;const D=typeof t=="string"?"dial-popup-heading":void 0,I=y=>y?typeof y=="string"?s.jsx("h3",{id:D,className:i("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",l),children:s.jsx(S,{tooltip:y,children:y})}):y:s.jsx("span",{});return s.jsx(j.FloatingPortal,{id:r,children:s.jsx(j.FloatingOverlay,{className:i(qe,a),children:s.jsx(j.FloatingFocusManager,{context:f,children:s.jsxs("div",{ref:p.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":D,className:i(Ge,Ke[x],o&&Ze,n),children:[s.jsxs("div",{className:$e,children:[I(t),s.jsx(Q,{ariaLabel:"Close dialog",onClose:y=>c?.(y)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var O=(e=>(e.Info="info",e.Danger="danger",e))(O||{});const Ue="flex justify-end gap-2 px-6 py-4",Xe="text-secondary dial-small-150 px-6 py-4",Qe="Cancel",G={[O.Info]:{confirmVariant:N.Primary,cancelVariant:N.Secondary},[O.Danger]:{container:"border-t-4 border-error",confirmVariant:N.Danger,cancelVariant:N.Secondary}},Ye=({title:e,description:t,descriptionCssClass:r,open:n=!1,confirmLabel:a,cancelLabel:l=Qe,isLoading:o=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:c,onClose:x,onConfirm:p,onCancel:f,children:m,dividers:b=!1,variant:g=O.Info,size:D=E.Sm})=>{const I=o?null:s.jsxs("div",{className:Ue,children:[s.jsx(T,{variant:N.Secondary,title:l,onClick:()=>f?f():x?.()}),s.jsx(T,{variant:G[g].confirmVariant,cssClass:c,title:a,disable:u,onClick:()=>p()})]}),y=h.useCallback(()=>o?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx($,{size:50})}):m??(t?s.jsx("div",{className:i(Xe,r),children:t}):null),[m,t,o,r]);return s.jsx(ee,{open:n,title:e,cssClass:i(G[g].container,d),dividers:b,onClose:()=>x?.(),footer:I,size:D,children:y()})},Je=({onClick:e})=>s.jsx(C.IconEyeOff,{...P,className:"text-primary",onClick:e}),es=({onClick:e})=>s.jsx(C.IconEye,{...P,className:"text-primary",onClick:e}),se=({...e})=>{const[t,r]=h.useState(!1),n=h.useCallback(a=>{r(a)},[]);return s.jsx(A,{type:t?"text":"password",...e,iconAfter:t?s.jsx(Je,{onClick:()=>n(!1)}):s.jsx(es,{onClick:()=>n(!0)})})},ss=({fieldTitle:e,optional:t,elementCssClass:r,elementId:n,errorText:a,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(z,{fieldTitle:e,optional:t,htmlFor:n}),s.jsx(se,{cssClass:r,elementId:n,invalid:!!a,...l}),s.jsx(B,{errorText:a})]});var V=(e=>(e.Small="small",e.Base="base",e))(V||{});const ts={[V.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[V.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},rs=({elementId:e,value:t,placeholder:r,disabled:n,readonly:a,invalid:l,cssClass:o,containerCssClass:u,onChange:d,size:c=V.Base})=>{const[x,p]=h.useState(t||"");h.useEffect(()=>{p(t||"")},[t]);const f=h.useCallback(g=>{p(g),d?.(g)},[d]),m=ts[c],b=h.useCallback(()=>{f("")},[f]);return s.jsxs("div",{className:i("dial-input flex flex-row items-center justify-between",l&&"dial-input-error",n&&"dial-input-disable",a&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(k,{className:i(n?"text-secondary":"text-primary"),icon:s.jsx(C.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:r,value:x??"",disabled:n,readOnly:a,className:i("border-0 bg-transparent w-full",o,m.textClass),onChange:g=>!a&&f(g.currentTarget.value)}),x&&!a&&!n&&s.jsx(k,{className:"text-primary cursor-pointer",icon:s.jsx(C.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:b,"aria-label":"Clear search",role:"button"})})]})},q=({selectedItems:e,listCssClass:t,listElementCssClass:r})=>!!e?.length&&s.jsx("ul",{className:i("flex-row items-center truncate flex-wrap","flex gap-x-2 gap-y-1",t),children:e?.map(n=>s.jsx("li",{className:i(["tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",r]),children:s.jsx(S,{tooltip:n,children:s.jsx("button",{"aria-label":"autocomplete-action",type:"button",className:"truncate w-full",children:n})})},n))}),Z=e=>v.createElement("svg",{width:18,height:18,viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},v.createElement("path",{d:"M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z",fill:"currentColor"})),ns=({children:e,open:t,readonly:r,selectedValue:n,valueCssClasses:a,inputCssClasses:l,onOpen:o,elementId:u,errorText:d,emptyValueText:c})=>{const x=Array.isArray(n)&&n.length>0,p=typeof n=="string"&&!!n.trim(),f=x||p?n:c,m=r?void 0:o,b=()=>s.jsxs(s.Fragment,{children:[s.jsx("button",{type:"button",className:"w-full",onClick:m,"aria-label":"open-popup",id:u,children:s.jsxs("div",{className:i("dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",l,r&&"dial-input-disable",d&&"dial-input-error"),children:[s.jsx(S,{tooltip:String(f),children:s.jsx("span",{className:a,children:f})}),!r&&s.jsx("div",{className:"flex-shrink-0",children:s.jsx(k,{icon:s.jsx(Z,{role:"img",width:F,height:F})})})]})}),d&&s.jsx(B,{errorText:d})]}),g=()=>s.jsx("div",{className:"w-full",onClick:m,children:s.jsxs("div",{className:i("dial-input px-3 py-2 flex flex-row items-center w-full justify-between",r&&"dial-input-disable"),children:[s.jsx(q,{selectedItems:f}),!r&&s.jsx("div",{className:"ml-1",children:s.jsx(k,{icon:s.jsx(Z,{role:"img",width:F,height:F})})})]})});return s.jsxs(s.Fragment,{children:[x?g():b(),t&&le.createPortal(e,document.body)]})},as=({placeholder:e="",selectedItems:t=[],updateSelected:r,listCssClass:n,listElementCssClass:a,containerCssClass:l,inputCssClass:o})=>{const[u,d]=h.useState(""),c=h.useCallback(p=>{p.key==="Enter"&&(r([...t,p.currentTarget.value]),d("")),(p.key==="Backspace"||p.key==="Delete")&&t.length&&!u&&r(t.slice(0,-1))},[t,r,u]),x=h.useCallback(p=>{d(p.target.value)},[d]);return s.jsxs("div",{className:i(["dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",l]),children:[s.jsx(q,{selectedItems:t,listCssClass:n,listElementCssClass:a}),s.jsx("input",{type:"text",value:u,className:i(["border-0 bg-transparent p-0",o]),placeholder:t?.length?"":e,onKeyDown:c,onChange:x})]})};exports.AlertVariant=L;exports.ButtonVariant=N;exports.ConfirmationPopupVariant=O;exports.DialAlert=xe;exports.DialAutocompleteInput=as;exports.DialAutocompleteInputValue=q;exports.DialButton=T;exports.DialCheckbox=we;exports.DialCloseButton=Q;exports.DialCollapsibleSidebar=Pe;exports.DialConfirmationPopup=Ye;exports.DialErrorText=B;exports.DialFieldLabel=z;exports.DialIcon=k;exports.DialInput=A;exports.DialInputModal=ns;exports.DialLabelledText=Me;exports.DialLoader=$;exports.DialNoDataContent=Fe;exports.DialNumberInputField=ze;exports.DialPasswordInput=se;exports.DialPasswordInputField=ss;exports.DialPopup=ee;exports.DialRadioButton=X;exports.DialRadioGroup=Ee;exports.DialSearch=rs;exports.DialSteps=De;exports.DialSwitch=_e;exports.DialTextAreaField=He;exports.DialTextInputField=We;exports.DialTextarea=Y;exports.DialTooltip=S;exports.PopupSize=E;exports.RadioGroupOrientation=_;exports.SearchSize=V;exports.StepStatus=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("classnames"),C=require("@tabler/icons-react"),h=require("react"),j=require("@floating-ui/react"),oe=require("react-dom");function le(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const w=le(h),B=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),z=({fieldTitle:e,htmlFor:t,optional:r,optionalText:n,cssClass:a})=>e?s.jsxs("label",{className:i("dial-tiny text-secondary",a,!a?.includes("mb")&&"mb-2"),htmlFor:t,children:[s.jsx("span",{className:"min-h-4",children:e}),r&&s.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null,k=({icon:e,className:t})=>e?s.jsx("span",{className:i("flex-shrink-0",t),children:e}):null;var N=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(N||{});const ie={[N.Primary]:"dial-primary-button",[N.Secondary]:"dial-secondary-button",[N.Tertiary]:"dial-tertiary-button",[N.Danger]:"dial-danger-button"},T=({title:e,variant:t,cssClass:r,textCssClass:n,ref:a,onClick:o,disable:l,iconAfter:u,iconBefore:d,hideTitleOnMobile:c,ariaLabel:x})=>{const p=i("dial-small-semi",u?"mr-2":"",d?"ml-2":"",c?"hidden sm:inline":"inline",n),f=i(t&&ie[t],r,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:a,type:"button",className:f,onClick:m=>o?.(m),disabled:l,"aria-label":e||x,children:[s.jsx(k,{icon:d}),e&&s.jsx("span",{className:p,children:e}),s.jsx(k,{icon:u})]})};var L=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(L||{});const ce={info:s.jsx(C.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(C.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(C.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(C.IconCircleCheck,{size:24,stroke:2})},de={[L.Info]:"bg-info border-info text-info",[L.Success]:"bg-success border-success text-success",[L.Warning]:"bg-warning border-warning text-warning",[L.Error]:"bg-error border-error text-error"},ue="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",xe=({variant:e=L.Info,message:t,cssClass:r,closable:n=!1,onClose:a})=>s.jsxs("div",{role:"alert",className:i(ue,de[e],r),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(k,{icon:ce[e]}),s.jsx("div",{className:"text-primary",children:t})]}),n&&s.jsx(T,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(C.IconX,{size:16}),onClick:o=>a?.(o)})]}),pe="flex items-center justify-center text-secondary",me="shrink-0 grow-0 basis-auto animate-spin-steps",fe=e=>w.createElement("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},w.createElement("path",{d:"M24 39V46.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.4,d:"M9 24H1.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.5,d:"M8.0918 8.0918L13.3994 13.3994",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.6,d:"M24 1.5V9",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.7,d:"M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.8,d:"M46.5 24H39",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.9,d:"M34.6055 34.6055L39.9082 39.9082",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.3,d:"M13.3936 34.6055L8.08594 39.9131",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"})),$=({size:e=18,cssClass:t,iconClass:r,fullWidth:n=!0,ariaLabel:a="Loading"})=>s.jsx("div",{role:"status","aria-label":a,name:"loader",className:i({[pe]:!0,"w-full h-full":n,[t||""]:!!t}),children:s.jsx(k,{icon:s.jsx(fe,{width:e,height:e,className:i(me,r),role:"img"})})}),he=7,ge=2,K=h.createContext(null),U=()=>{const e=h.useContext(K);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},je=({initialOpen:e=!1,placement:t="bottom",isTriggerClickable:r=!1,open:n,onOpenChange:a}={})=>{const[o,l]=h.useState(e),u=h.useRef(null),d=n??o,c=a??l,x=j.useFloating({placement:t,open:d,onOpenChange:c,whileElementsMounted:j.autoUpdate,middleware:[j.offset(he+ge),j.flip({crossAxis:t.includes("-"),fallbackAxisSideDirection:"start",padding:5}),j.shift({padding:5}),j.arrow({element:u})]}),p=j.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:r,delay:{open:500,close:0}}),f=j.useFocus(x.context,{enabled:n==null}),m=j.useDismiss(x.context),b=j.useRole(x.context,{role:"tooltip"}),g=j.useInteractions([p,f,m,b]);return h.useMemo(()=>({open:d,setOpen:c,arrowRef:u,...g,...x}),[d,c,g,x])},be=({children:e,...t})=>{const r=je(t);return s.jsx(K.Provider,{value:r,children:e})},Ce=h.forwardRef(function({style:t,...r},n){const a=U(),o=j.useMergeRefs([a.refs.setFloating,n]);return a.open?s.jsx(j.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:o,style:{...a.floatingStyles,...t},...a.getFloatingProps(r),className:i("z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",a.getFloatingProps(r).className),children:[r.children,s.jsx(j.FloatingArrow,{ref:a.arrowRef,context:a.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),ye=h.forwardRef(function({children:t,asChild:r=!1,...n},a){const o=U(),u=t&&typeof t=="object"&&"ref"in t&&t.ref!==void 0?t.ref:void 0,d=j.useMergeRefs([o.refs.setReference,a,u]);return r&&h.isValidElement(t)?h.cloneElement(t,o.getReferenceProps({ref:d,...n,...t.props})):s.jsx("span",{ref:d,...o.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:t})}),S=({hideTooltip:e,tooltip:t,children:r,triggerClassName:n,contentClassName:a,...o})=>s.jsxs(be,{...o,children:[s.jsx(ye,{className:i(n,"truncate"),children:r}),s.jsx(Ce,{className:i("text-primary",a,"max-w-[300px]",(e||!t)&&"hidden"),children:t})]}),F=18,P={size:F,stroke:2},ve=({label:e,id:t,checked:r,indeterminate:n,disabled:a,ariaLabel:o,onChange:l})=>{const u=h.useCallback(x=>{x.stopPropagation(),l?.(x.target.checked,t)},[l,t]),d=i("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${r?"":'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=i("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:t,children:[r&&(n?s.jsx(C.IconMinus,{className:c,...P}):s.jsx(C.IconCheck,{className:c,...P})),e&&s.jsx(S,{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:t,checked:r,"aria-checked":n?"mixed":r,"aria-disabled":a||void 0,"aria-label":e?void 0:o,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const we=(e,t)=>{if(t===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"}},Ne=(e,t)=>{if(t===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"}},ke=({step:e,index:t,currentStep:r,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=()=>r===e.id&&e.status===v.ERROR?s.jsx(C.IconExclamationCircle,{stroke:2,size:16}):r!==e.id&&e.status===v.VALID?s.jsx(C.IconCheck,{stroke:2,size:16}):t+1;return s.jsxs("button",{className:i(a,we(e,r)),onClick:()=>n(e.id),children:[s.jsx("span",{className:i(o,Ne(e,r)),children:l()}),s.jsx("span",{children:e.name})]})},De=({steps:e,currentStep:t,onChangeStep:r})=>{const n=a=>{const o=e.findIndex(u=>u.id===t),l=e.findIndex(u=>u.id===a);(a!==t&&e[o].status===v.VALID||l<o)&&r(a)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((a,o)=>s.jsx(ke,{currentStep:t,onChangeStep:n,step:a,index:o},a.id))})},X=({name:e,value:t,title:r,description:n,checked:a=!1,inputId:o,cssClass:l,labelCssClass:u,disabled:d,onChange:c,descriptionCssClass:x})=>{const p=`${o}-desc`,f=i("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=i("cursor-pointer dial-input-radio",r&&"mr-2",l),b=i("flex flex-col",!!n&&"mb-2"),g=i("dial-tiny mt-2 ml-[26px] text-secondary",x),D=I=>{d||I.target.checked&&c?.(t)};return s.jsxs("div",{className:b,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:o,name:e,value:t,checked:a,disabled:d,"aria-describedby":a&&n?p:void 0,className:m,onChange:D}),r?s.jsx("label",{className:f,htmlFor:o,children:r}):null]}),a&&n&&s.jsx("div",{id:p,className:g,children:n})]})};var _=(e=>(e.Row="Row",e.Column="Column",e))(_||{});const Ie="flex flex-col gap-2",Se="flex",Re="pb-1 mt-2",Le={[_.Column]:"flex-col gap-y-3",[_.Row]:"flex-row gap-x-6"},Ee=({fieldTitle:e,radioCssClass:t,labelCssClass:r,disabled:n,elementId:a,radioButtons:o,activeRadioButton:l,orientation:u,onChange:d})=>s.jsxs("div",{className:Ie,children:[e&&s.jsx(z,{fieldTitle:e,htmlFor:a}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":n||void 0,className:i(Se,Le[u]),children:o.map(c=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(X,{name:a,value:c.id,inputId:c.id,disabled:n,cssClass:t,labelCssClass:r,title:c.name,checked:c.id===l,onChange:()=>d(c.id)}),c.id===l&&c.content?s.jsx("div",{className:Re,children:c.content}):null]},c.id))})]}),Fe=({icon:e,title:t,description:r})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(C.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:t}),r&&s.jsx("span",{className:"mt-1 text-primary",children:r})]}),Te=60,Pe=({containerCssClass:e,children:t,width:r,title:n,iconSize:a=F,titleCssClass:o,additionalButtons:l})=>{const[u,d]=h.useState(r),[c,x]=h.useState(!0),p=i(["transform rotate-180 [writing-mode:tb-rl]",c&&"hidden",o]),f=i(["flex flex-row gap-2 cursor-pointer text-secondary",c?"justify-end":"justify-center"]),m=()=>{d(c?Te:r),x(!c)};return s.jsxs("div",{className:i(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:i(["flex-1 min-h-0 overflow-auto",!c&&"hidden"]),children:t}),s.jsx("div",{className:p,children:n}),s.jsxs("div",{className:f,children:[c&&l,s.jsx(T,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:c?s.jsx(C.IconChevronsLeft,{size:a,stroke:P.stroke}):s.jsx(C.IconChevronsRight,{size:a,stroke:P.stroke})})]})]})},Me=({label:e,text:t,children:r,postfix:n})=>s.jsxs("div",{className:i("flex flex-col text-secondary",r?"":"max-w-[200px]"),children:[s.jsx("label",{className:"dial-tiny mb-2",children:e}),r||s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx(S,{triggerClassName:"text-primary",tooltip:t,children:t}),n||null]})]}),Q=({ariaLabel:e,cssClass:t,size:r=24,onClose:n})=>s.jsx(T,{ariaLabel:e,cssClass:i("text-secondary hover:text-accent-primary",t),onClick:n,iconBefore:s.jsx(C.IconX,{size:r})}),Y=({value:e,textareaId:t,placeholder:r,cssClass:n="",disabled:a,invalid:o,readonly:l,onChange:u})=>s.jsx(S,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:t,placeholder:r,value:e||"",disabled:a,className:i("dial-textarea dial-input px-3 py-2",o?"dial-input-error":"",a&&"dial-input-disable",l&&"dial-input-readonly",n),onChange:d=>!l&&u?.(d.currentTarget.value)})}),Ae=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Oe=(e,t,r,n)=>{if((t==="number"||r!==void 0||n!==void 0)&&!Ae.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(r===void 0||r<0))&&!(e.key==="."&&t==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(r!==void 0||n!==void 0){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(r!==void 0&&d<r){e.preventDefault();return}if(n!==void 0&&d>n){e.preventDefault();return}}}}},A=({iconBefore:e,iconAfter:t,hideBorder:r,value:n,elementId:a,placeholder:o="",cssClass:l="",containerCssClass:u,tooltipTriggerClassName:d,type:c="text",disabled:x,readonly:p,invalid:f,onChange:m,min:b,max:g,prefix:D,suffix:I,textBeforeInput:y,textAfterInput:W})=>{const te=R=>R.target.blur(),re=c==="number"||b!==void 0||g!==void 0,ne=R=>{Oe(R,c,b,g)},ae=R=>{const M=R.currentTarget.value;if(re&&M!==""){const H=parseFloat(M);if(isNaN(H)&&M!=="-"&&M!=="."||!isNaN(H)&&(b!==void 0&&H<b||g!==void 0&&H>g))return}m?.(M)};return s.jsxs("div",{className:i("dial-input-field flex flex-row items-center justify-between py-2",r?"dial-input-no-border":"dial-input",f&&"dial-input-error",x&&"dial-input-disable",p&&"dial-input-readonly",!y&&"pl-3",!W&&"pr-3",u),children:[y&&s.jsx("div",{children:s.jsx(A,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"overflow-hidden overflow-ellipsis dial-small",value:y,disabled:!0,elementId:y+"textBefore"})}),D&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",D]}),s.jsx(k,{icon:e}),s.jsx(S,{tooltip:n,triggerClassName:i(d,"flex-1"),children:s.jsx("input",{type:c,autoComplete:"off",id:a,placeholder:o,value:n??"",disabled:x,className:i("border-0 bg-transparent",l),onChange:R=>!p&&ae?.(R),onKeyDown:ne,onWheel:te,min:b,max:g})}),s.jsx(k,{icon:t}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),W&&s.jsx("div",{children:s.jsx(A,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",value:W,disabled:!0,elementId:W+"textAfter"})})]})},Ve=/^0+\.(\d+)?$/,Be=/^0+/,J=({fieldTitle:e,errorText:t,optional:r,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:l,readonly:u,defaultEmptyText:d,min:c,max:x,...p})=>s.jsxs("div",{className:i("flex flex-col",l),children:[s.jsx(z,{fieldTitle:e,optional:r,htmlFor:o}),u?s.jsx("span",{children:p.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(A,{elementId:o,cssClass:n,containerCssClass:a,invalid:t!=null,min:c,max:x,...p}),s.jsx(B,{errorText:t})]})]}),ze=({onChange:e,value:t,min:r,max:n,...a})=>{const o=l=>String(l)?.match(Ve)?String(l)?.replace(Be,"0"):Number(l);return s.jsx(J,{type:"number",onChange:l=>e?.(o(l)),value:t,min:r,max:n,...a})},We=({onChange:e,...t})=>s.jsx(J,{type:"text",onChange:r=>e?.(r),...t}),He=({fieldTitle:e,optional:t,elementId:r,elementCssClass:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(z,{fieldTitle:e,optional:t,htmlFor:r}),s.jsx(Y,{textareaId:r,cssClass:n,...o}),s.jsx(B,{errorText:a})]}),_e=({title:e,switchId:t,isOn:r=!1,disabled:n,onChange:a})=>{const o=i("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",r?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?r?"bg-controls-disable":"bg-layer-4":r?"bg-accent-primary":"bg-layer-4"),l=h.useCallback(u=>{u.stopPropagation(),a?.(!r)},[a,r]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:l,id:t,disabled:n,className:"invisible w-0 h-0",checked:r}),s.jsx("label",{htmlFor:t,className:o,children:s.jsx("span",{className:i("size-3 rounded-full",n?r?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var E=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(E||{});const qe="z-[52] flex items-center justify-center bg-blackout md:p-4",Ge="divide-tertiary divide-y",Ze="flex flex-row justify-between py-4 px-6 items-center",$e={[E.Sm]:"dial-sm-popup",[E.Md]:"dial-md-popup",[E.Lg]:"dial-lg-popup"},ee=({open:e=!1,title:t,portalId:r,cssClass:n,overlayClass:a,headingClass:o,dividers:l=!0,children:u,footer:d,onClose:c,size:x=E.Md})=>{const{refs:p,context:f}=j.useFloating({open:e,onOpenChange:y=>{y||c?.(null)}}),m=j.useRole(f,{role:"dialog"}),b=j.useDismiss(f,{outsidePress:!0}),{getFloatingProps:g}=j.useInteractions([m,b]);if(!e)return null;const D=typeof t=="string"?"dial-popup-heading":void 0,I=y=>y?typeof y=="string"?s.jsx("h3",{id:D,className:i("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",o),children:s.jsx(S,{tooltip:y,children:y})}):y:s.jsx("span",{});return s.jsx(j.FloatingPortal,{id:r,children:s.jsx(j.FloatingOverlay,{className:i(qe,a),children:s.jsx(j.FloatingFocusManager,{context:f,children:s.jsxs("div",{ref:p.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":D,className:i("dial-popup",$e[x],l&&Ge,n),children:[s.jsxs("div",{className:Ze,children:[I(t),s.jsx(Q,{ariaLabel:"Close dialog",onClose:y=>c?.(y)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var O=(e=>(e.Info="info",e.Danger="danger",e))(O||{});const Ke="flex justify-end gap-2 px-6 py-4",Ue="text-secondary dial-small-150 px-6 py-4",Xe="Cancel",G={[O.Info]:{confirmVariant:N.Primary,cancelVariant:N.Secondary},[O.Danger]:{container:"border-t-4 border-error",confirmVariant:N.Danger,cancelVariant:N.Secondary}},Qe=({title:e,description:t,descriptionCssClass:r,open:n=!1,confirmLabel:a,cancelLabel:o=Xe,isLoading:l=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:c,onClose:x,onConfirm:p,onCancel:f,children:m,dividers:b=!1,variant:g=O.Info,size:D=E.Sm})=>{const I=l?null:s.jsxs("div",{className:Ke,children:[s.jsx(T,{variant:N.Secondary,title:o,onClick:()=>f?f():x?.()}),s.jsx(T,{variant:G[g].confirmVariant,cssClass:c,title:a,disable:u,onClick:()=>p()})]}),y=h.useCallback(()=>l?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx($,{size:50})}):m??(t?s.jsx("div",{className:i(Ue,r),children:t}):null),[m,t,l,r]);return s.jsx(ee,{open:n,title:e,cssClass:i(G[g].container,d),dividers:b,onClose:()=>x?.(),footer:I,size:D,children:y()})},Ye=({onClick:e})=>s.jsx(C.IconEyeOff,{...P,className:"text-primary",onClick:e}),Je=({onClick:e})=>s.jsx(C.IconEye,{...P,className:"text-primary",onClick:e}),se=({...e})=>{const[t,r]=h.useState(!1),n=h.useCallback(a=>{r(a)},[]);return s.jsx(A,{type:t?"text":"password",...e,iconAfter:t?s.jsx(Ye,{onClick:()=>n(!1)}):s.jsx(Je,{onClick:()=>n(!0)})})},es=({fieldTitle:e,optional:t,elementCssClass:r,elementId:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(z,{fieldTitle:e,optional:t,htmlFor:n}),s.jsx(se,{cssClass:r,elementId:n,invalid:!!a,...o}),s.jsx(B,{errorText:a})]});var V=(e=>(e.Small="small",e.Base="base",e))(V||{});const ss={[V.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[V.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},ts=({elementId:e,value:t,placeholder:r,disabled:n,readonly:a,invalid:o,cssClass:l,containerCssClass:u,onChange:d,size:c=V.Base})=>{const[x,p]=h.useState(t||"");h.useEffect(()=>{p(t||"")},[t]);const f=h.useCallback(g=>{p(g),d?.(g)},[d]),m=ss[c],b=h.useCallback(()=>{f("")},[f]);return s.jsxs("div",{className:i("dial-input flex flex-row items-center justify-between",o&&"dial-input-error",n&&"dial-input-disable",a&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(k,{className:i(n?"text-secondary":"text-primary"),icon:s.jsx(C.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:r,value:x??"",disabled:n,readOnly:a,className:i("border-0 bg-transparent w-full",l,m.textClass),onChange:g=>!a&&f(g.currentTarget.value)}),x&&!a&&!n&&s.jsx(k,{className:"text-primary cursor-pointer",icon:s.jsx(C.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:b,"aria-label":"Clear search",role:"button"})})]})},q=({selectedItems:e,listCssClass:t,listElementCssClass:r})=>!!e?.length&&s.jsx("ul",{className:i("flex-row items-center truncate flex-wrap","flex gap-x-2 gap-y-1",t),children:e?.map(n=>s.jsx("li",{className:i(["tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",r]),children:s.jsx(S,{tooltip:n,children:s.jsx("button",{"aria-label":"autocomplete-action",type:"button",className:"truncate w-full",children:n})})},n))}),Z=e=>w.createElement("svg",{width:18,height:18,viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},w.createElement("path",{d:"M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z",fill:"currentColor"})),rs=({children:e,open:t,readonly:r,selectedValue:n,valueCssClasses:a,inputCssClasses:o,onOpen:l,elementId:u,errorText:d,emptyValueText:c})=>{const x=Array.isArray(n)&&n.length>0,p=typeof n=="string"&&!!n.trim(),f=x||p?n:c,m=r?void 0:l,b=()=>s.jsxs(s.Fragment,{children:[s.jsx("button",{type:"button",className:"w-full",onClick:m,"aria-label":"open-popup",id:u,children:s.jsxs("div",{className:i("dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",o,r&&"dial-input-disable",d&&"dial-input-error"),children:[s.jsx(S,{tooltip:String(f),children:s.jsx("span",{className:a,children:f})}),!r&&s.jsx("div",{className:"flex-shrink-0",children:s.jsx(k,{icon:s.jsx(Z,{role:"img",width:F,height:F})})})]})}),d&&s.jsx(B,{errorText:d})]}),g=()=>s.jsx("div",{className:"w-full",onClick:m,children:s.jsxs("div",{className:i("dial-input px-3 py-2 flex flex-row items-center w-full justify-between",r&&"dial-input-disable"),children:[s.jsx(q,{selectedItems:f}),!r&&s.jsx("div",{className:"ml-1",children:s.jsx(k,{icon:s.jsx(Z,{role:"img",width:F,height:F})})})]})});return s.jsxs(s.Fragment,{children:[x?g():b(),t&&oe.createPortal(e,document.body)]})},ns=({placeholder:e="",selectedItems:t=[],updateSelected:r,listCssClass:n,listElementCssClass:a,containerCssClass:o,inputCssClass:l})=>{const[u,d]=h.useState(""),c=h.useCallback(p=>{p.key==="Enter"&&(r([...t,p.currentTarget.value]),d("")),(p.key==="Backspace"||p.key==="Delete")&&t.length&&!u&&r(t.slice(0,-1))},[t,r,u]),x=h.useCallback(p=>{d(p.target.value)},[d]);return s.jsxs("div",{className:i(["dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",o]),children:[s.jsx(q,{selectedItems:t,listCssClass:n,listElementCssClass:a}),s.jsx("input",{type:"text",value:u,className:i(["border-0 bg-transparent p-0",l]),placeholder:t?.length?"":e,onKeyDown:c,onChange:x})]})};exports.AlertVariant=L;exports.ButtonVariant=N;exports.ConfirmationPopupVariant=O;exports.DialAlert=xe;exports.DialAutocompleteInput=ns;exports.DialAutocompleteInputValue=q;exports.DialButton=T;exports.DialCheckbox=ve;exports.DialCloseButton=Q;exports.DialCollapsibleSidebar=Pe;exports.DialConfirmationPopup=Qe;exports.DialErrorText=B;exports.DialFieldLabel=z;exports.DialIcon=k;exports.DialInput=A;exports.DialInputModal=rs;exports.DialLabelledText=Me;exports.DialLoader=$;exports.DialNoDataContent=Fe;exports.DialNumberInputField=ze;exports.DialPasswordInput=se;exports.DialPasswordInputField=es;exports.DialPopup=ee;exports.DialRadioButton=X;exports.DialRadioGroup=Ee;exports.DialSearch=ts;exports.DialSteps=De;exports.DialSwitch=_e;exports.DialTextAreaField=He;exports.DialTextInputField=We;exports.DialTextarea=Y;exports.DialTooltip=S;exports.PopupSize=E;exports.RadioGroupOrientation=_;exports.SearchSize=V;exports.StepStatus=v;

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

@@ -1,10 +1,10 @@
 import { jsx as r, jsxs as p, Fragment as _ } from "react/jsx-runtime";
 import i from "classnames";
-import { IconCircleCheck as de, IconAlertTriangle as ue, IconAlertCircle as pe, IconInfoCircle as me, IconX as $, IconMinus as fe, IconCheck as G, IconExclamationCircle as he, IconClipboardX as xe, IconChevronsLeft as ge, IconChevronsRight as Ce, IconEyeOff as ye, IconEye as be, IconSearch as we } from "@tabler/icons-react";
-import * as w from "react";
-import { createContext as ve, useState as T, useRef as Ne, useMemo as ke, useContext as De, forwardRef as X, isValidElement as Ie, cloneElement as Le, useCallback as I, useEffect as Se } from "react";
-import { useFloating as q, offset as Ee, flip as Re, shift as Fe, arrow as Te, autoUpdate as Me, useHover as je, useFocus as Ve, useDismiss as Q, useRole as Y, useInteractions as J, useMergeRefs as ee, FloatingPortal as re, FloatingArrow as Pe, FloatingOverlay as Ae, FloatingFocusManager as Be } from "@floating-ui/react";
-import { createPortal as Oe } from "react-dom";
+import { IconCircleCheck as de, IconAlertTriangle as ue, IconAlertCircle as pe, IconInfoCircle as me, IconX as $, IconMinus as fe, IconCheck as G, IconExclamationCircle as he, IconClipboardX as xe, IconChevronsLeft as ge, IconChevronsRight as Ce, IconEyeOff as ye, IconEye as be, IconSearch as ve } from "@tabler/icons-react";
+import * as v from "react";
+import { createContext as we, useState as T, useRef as Ne, useMemo as ke, useContext as De, forwardRef as X, isValidElement as Ie, cloneElement as Le, useCallback as I, useEffect as Se } from "react";
+import { useFloating as q, offset as Ee, flip as Re, shift as Fe, arrow as Te, autoUpdate as Me, useHover as je, useFocus as Ve, useDismiss as Q, useRole as Y, useInteractions as J, useMergeRefs as ee, FloatingPortal as re, FloatingArrow as Pe, FloatingOverlay as Ae, FloatingFocusManager as Oe } from "@floating-ui/react";
+import { createPortal as We } from "react-dom";
 const z = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "text-error dial-tiny mt-1", children: e }), H = ({
   fieldTitle: e,
   htmlFor: t,
@@ -26,12 +26,12 @@ const z = ({ errorText: e }) => e && /* @__PURE__ */ r("span", { className: "tex
     ]
   }
 ) : null, N = ({ icon: e, className: t }) => e ? /* @__PURE__ */ r("span", { className: i("flex-shrink-0", t), children: e }) : null;
-var v = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(v || {});
-const We = {
-  [v.Primary]: "dial-primary-button",
-  [v.Secondary]: "dial-secondary-button",
-  [v.Tertiary]: "dial-tertiary-button",
-  [v.Danger]: "dial-danger-button"
+var w = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Danger = "danger", e))(w || {});
+const Be = {
+  [w.Primary]: "dial-primary-button",
+  [w.Secondary]: "dial-secondary-button",
+  [w.Tertiary]: "dial-tertiary-button",
+  [w.Danger]: "dial-danger-button"
 }, V = ({
   title: e,
   variant: t,
@@ -52,7 +52,7 @@ const We = {
     c ? "hidden sm:inline" : "inline",
     a
   ), x = i(
-    t && We[t],
+    t && Be[t],
     n,
     "focus-visible:outline outline-offset-0"
   );
@@ -84,7 +84,7 @@ const ze = {
   [E.Success]: "bg-success border-success text-success",
   [E.Warning]: "bg-warning border-warning text-warning",
   [E.Error]: "bg-error border-error text-error"
-}, _e = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", jr = ({
+}, _e = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", Mr = ({
   variant: e = E.Info,
   message: t,
   cssClass: n,
@@ -115,7 +115,7 @@ const ze = {
       )
     ]
   }
-), Ze = "flex items-center justify-center text-secondary", $e = "shrink-0 grow-0 basis-auto animate-spin-steps", Ke = (e) => /* @__PURE__ */ w.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ w.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.7, d: "M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ w.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), Ue = ({
+), Ze = "flex items-center justify-center text-secondary", $e = "shrink-0 grow-0 basis-auto animate-spin-steps", Ke = (e) => /* @__PURE__ */ v.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ v.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.7, d: "M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ v.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), Ue = ({
   size: e = 18,
   cssClass: t,
   iconClass: n,
@@ -147,7 +147,7 @@ const ze = {
       }
     )
   }
-), Ge = 7, Xe = 2, te = ve(null), ne = () => {
+), Ge = 7, Xe = 2, te = we(null), ne = () => {
   const e = De(te);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
@@ -272,7 +272,7 @@ const ze = {
 ] }), R = 18, M = {
   size: R,
   stroke: 2
-}, Vr = ({
+}, jr = ({
   label: e,
   id: t,
   checked: n,
@@ -373,7 +373,7 @@ const er = (e, t) => {
       ]
     }
   );
-}, Pr = ({
+}, Vr = ({
   steps: e,
   currentStep: t,
   onChangeStep: n
@@ -444,7 +444,7 @@ var Z = /* @__PURE__ */ ((e) => (e.Row = "Row", e.Column = "Column", e))(Z || {}
 const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
   [Z.Column]: "flex-col gap-y-3",
   [Z.Row]: "flex-row gap-x-6"
-}, Ar = ({
+}, Pr = ({
   fieldTitle: e,
   radioCssClass: t,
   labelCssClass: n,
@@ -485,7 +485,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       ] }, c.id))
     }
   )
-] }), Br = ({
+] }), Ar = ({
   icon: e,
   title: t,
   description: n
@@ -648,7 +648,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       }
     }
   }
-}, B = ({
+}, O = ({
   iconBefore: e,
   iconAfter: t,
   hideBorder: n,
@@ -696,7 +696,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       ),
       children: [
         y && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          B,
+          O,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
@@ -741,7 +741,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
           D
         ] }),
         P && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-          B,
+          O,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
@@ -777,7 +777,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
   ),
   u ? /* @__PURE__ */ r("span", { children: f.value || (d ?? "None") }) : /* @__PURE__ */ p(_, { children: [
     /* @__PURE__ */ r(
-      B,
+      O,
       {
         elementId: o,
         cssClass: a,
@@ -790,7 +790,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
     ),
     /* @__PURE__ */ r(z, { errorText: t })
   ] })
-] }), zr = ({
+] }), Br = ({
   onChange: e,
   value: t,
   min: n,
@@ -809,7 +809,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
       ...s
     }
   );
-}, Hr = ({
+}, zr = ({
   onChange: e,
   ...t
 }) => /* @__PURE__ */ r(
@@ -819,7 +819,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
     onChange: (n) => e?.(n),
     ...t
   }
-), _r = ({
+), Hr = ({
   fieldTitle: e,
   optional: t,
   elementId: n,
@@ -844,7 +844,7 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
     }
   ),
   /* @__PURE__ */ r(z, { errorText: s })
-] }), Zr = ({
+] }), _r = ({
   title: e,
   switchId: t,
   isOn: n = !1,
@@ -887,11 +887,11 @@ const ar = "flex flex-col gap-2", sr = "flex", or = "pb-1 mt-2", lr = {
   ] });
 };
 var F = /* @__PURE__ */ ((e) => (e.Sm = "sm", e.Md = "md", e.Lg = "lg", e))(F || {});
-const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto", gr = "divide-tertiary divide-y", Cr = "flex flex-row justify-between py-4 px-6 items-center", yr = {
-  [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]"
-}, br = ({
+const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "divide-tertiary divide-y", gr = "flex flex-row justify-between py-4 px-6 items-center", Cr = {
+  [F.Sm]: "dial-sm-popup",
+  [F.Md]: "dial-md-popup",
+  [F.Lg]: "dial-lg-popup"
+}, yr = ({
   open: e = !1,
   title: t,
   portalId: n,
@@ -922,7 +922,7 @@ const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "r
       children: /* @__PURE__ */ r(S, { tooltip: y, children: y })
     }
   ) : y : /* @__PURE__ */ r("span", {});
-  return /* @__PURE__ */ r(re, { id: n, children: /* @__PURE__ */ r(Ae, { className: i(hr, s), children: /* @__PURE__ */ r(Be, { context: x, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ r(re, { id: n, children: /* @__PURE__ */ r(Ae, { className: i(hr, s), children: /* @__PURE__ */ r(Oe, { context: x, children: /* @__PURE__ */ p(
     "div",
     {
       ref: f.setFloating,
@@ -931,13 +931,13 @@ const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "r
       "aria-modal": "true",
       "aria-labelledby": k,
       className: i(
-        xr,
-        yr[m],
-        l && gr,
+        "dial-popup",
+        Cr[m],
+        l && xr,
         a
       ),
       children: [
-        /* @__PURE__ */ p("div", { className: Cr, children: [
+        /* @__PURE__ */ p("div", { className: gr, children: [
           D(t),
           /* @__PURE__ */ r(
             cr,
@@ -953,24 +953,24 @@ const hr = "z-[52] flex items-center justify-center bg-blackout md:p-4", xr = "r
     }
   ) }) }) });
 };
-var O = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(O || {});
-const wr = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-150 px-6 py-4", Nr = "Cancel", K = {
-  [O.Info]: {
-    confirmVariant: v.Primary,
-    cancelVariant: v.Secondary
+var W = /* @__PURE__ */ ((e) => (e.Info = "info", e.Danger = "danger", e))(W || {});
+const br = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-150 px-6 py-4", wr = "Cancel", K = {
+  [W.Info]: {
+    confirmVariant: w.Primary,
+    cancelVariant: w.Secondary
   },
-  [O.Danger]: {
+  [W.Danger]: {
     container: "border-t-4 border-error",
-    confirmVariant: v.Danger,
-    cancelVariant: v.Secondary
+    confirmVariant: w.Danger,
+    cancelVariant: w.Secondary
   }
-}, $r = ({
+}, Zr = ({
   title: e,
   description: t,
   descriptionCssClass: n,
   open: a = !1,
   confirmLabel: s,
-  cancelLabel: o = Nr,
+  cancelLabel: o = wr,
   isLoading: l = !1,
   disableConfirmButton: u = !1,
   cssClass: d,
@@ -980,14 +980,14 @@ const wr = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
   onCancel: x,
   children: h,
   dividers: C = !1,
-  variant: g = O.Info,
+  variant: g = W.Info,
   size: k = F.Sm
 }) => {
-  const D = l ? null : /* @__PURE__ */ p("div", { className: wr, children: [
+  const D = l ? null : /* @__PURE__ */ p("div", { className: br, children: [
     /* @__PURE__ */ r(
       V,
       {
-        variant: v.Secondary,
+        variant: w.Secondary,
         title: o,
         onClick: () => x ? x() : m?.()
       }
@@ -1010,7 +1010,7 @@ const wr = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
     }
   ) : null), [h, t, l, n]);
   return /* @__PURE__ */ r(
-    br,
+    yr,
     {
       open: a,
       title: e,
@@ -1022,26 +1022,26 @@ const wr = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
       children: y()
     }
   );
-}, kr = ({ onClick: e }) => /* @__PURE__ */ r(
+}, Nr = ({ onClick: e }) => /* @__PURE__ */ r(
   ye,
   {
     ...M,
     className: "text-primary",
     onClick: e
   }
-), Dr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...M, className: "text-primary", onClick: e }), Ir = ({ ...e }) => {
+), kr = ({ onClick: e }) => /* @__PURE__ */ r(be, { ...M, className: "text-primary", onClick: e }), Dr = ({ ...e }) => {
   const [t, n] = T(!1), a = I((s) => {
     n(s);
   }, []);
   return /* @__PURE__ */ r(
-    B,
+    O,
     {
       type: t ? "text" : "password",
       ...e,
-      iconAfter: t ? /* @__PURE__ */ r(kr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(Dr, { onClick: () => a(!0) })
+      iconAfter: t ? /* @__PURE__ */ r(Nr, { onClick: () => a(!1) }) : /* @__PURE__ */ r(kr, { onClick: () => a(!0) })
     }
   );
-}, Kr = ({
+}, $r = ({
   fieldTitle: e,
   optional: t,
   elementCssClass: n,
@@ -1058,7 +1058,7 @@ const wr = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
     }
   ),
   /* @__PURE__ */ r(
-    Ir,
+    Dr,
     {
       cssClass: n,
       elementId: a,
@@ -1068,21 +1068,21 @@ const wr = "flex justify-end gap-2 px-6 py-4", vr = "text-secondary dial-small-1
   ),
   /* @__PURE__ */ r(z, { errorText: s })
 ] });
-var W = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(W || {});
-const Lr = {
-  [W.Small]: {
+var B = /* @__PURE__ */ ((e) => (e.Small = "small", e.Base = "base", e))(B || {});
+const Ir = {
+  [B.Small]: {
     textClass: "text-xs px-1",
     containerClass: "px-[6px] py-1 h-[22px]",
     iconSize: 10,
     iconStroke: 1
   },
-  [W.Base]: {
+  [B.Base]: {
     textClass: "text-sm px-2",
     containerClass: "px-3 py-2 h-[38px]",
     iconSize: 18,
     iconStroke: 1.5
   }
-}, Ur = ({
+}, Kr = ({
   elementId: e,
   value: t,
   placeholder: n,
@@ -1092,7 +1092,7 @@ const Lr = {
   cssClass: l,
   containerCssClass: u,
   onChange: d,
-  size: c = W.Base
+  size: c = B.Base
 }) => {
   const [m, f] = T(t || "");
   Se(() => {
@@ -1103,7 +1103,7 @@ const Lr = {
       f(g), d?.(g);
     },
     [d]
-  ), h = Lr[c], C = I(() => {
+  ), h = Ir[c], C = I(() => {
     x("");
   }, [x]);
   return /* @__PURE__ */ p(
@@ -1123,7 +1123,7 @@ const Lr = {
           {
             className: i(a ? "text-secondary" : "text-primary"),
             icon: /* @__PURE__ */ r(
-              we,
+              ve,
               {
                 size: h.iconSize,
                 stroke: h.iconStroke
@@ -1196,7 +1196,7 @@ const Lr = {
       a
     ))
   }
-), U = (e) => /* @__PURE__ */ w.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ w.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), Gr = ({
+), U = (e) => /* @__PURE__ */ v.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ v.createElement("path", { d: "M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z", fill: "currentColor" })), Ur = ({
   children: e,
   open: t,
   readonly: n,
@@ -1274,9 +1274,9 @@ const Lr = {
       ),
       d && /* @__PURE__ */ r(z, { errorText: d })
     ] }),
-    t && Oe(e, document.body)
+    t && We(e, document.body)
   ] });
-}, Xr = ({
+}, Gr = ({
   placeholder: e = "",
   selectedItems: t = [],
   updateSelected: n,
@@ -1329,39 +1329,39 @@ const Lr = {
 };
 export {
   E as AlertVariant,
-  v as ButtonVariant,
-  O as ConfirmationPopupVariant,
-  jr as DialAlert,
-  Xr as DialAutocompleteInput,
+  w as ButtonVariant,
+  W as ConfirmationPopupVariant,
+  Mr as DialAlert,
+  Gr as DialAutocompleteInput,
   se as DialAutocompleteInputValue,
   V as DialButton,
-  Vr as DialCheckbox,
+  jr as DialCheckbox,
   cr as DialCloseButton,
   Or as DialCollapsibleSidebar,
-  $r as DialConfirmationPopup,
+  Zr as DialConfirmationPopup,
   z as DialErrorText,
   H as DialFieldLabel,
   N as DialIcon,
-  B as DialInput,
-  Gr as DialInputModal,
+  O as DialInput,
+  Ur as DialInputModal,
   Wr as DialLabelledText,
   Ue as DialLoader,
-  Br as DialNoDataContent,
-  zr as DialNumberInputField,
-  Ir as DialPasswordInput,
-  Kr as DialPasswordInputField,
-  br as DialPopup,
+  Ar as DialNoDataContent,
+  Br as DialNumberInputField,
+  Dr as DialPasswordInput,
+  $r as DialPasswordInputField,
+  yr as DialPopup,
   nr as DialRadioButton,
-  Ar as DialRadioGroup,
-  Ur as DialSearch,
-  Pr as DialSteps,
-  Zr as DialSwitch,
-  _r as DialTextAreaField,
-  Hr as DialTextInputField,
+  Pr as DialRadioGroup,
+  Kr as DialSearch,
+  Vr as DialSteps,
+  _r as DialSwitch,
+  Hr as DialTextAreaField,
+  zr as DialTextInputField,
   dr as DialTextarea,
   S as DialTooltip,
   F as PopupSize,
   Z as RadioGroupOrientation,
-  W as SearchSize,
+  B as SearchSize,
   b as StepStatus
 };

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}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom: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-\[4px\]{height:4px}.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-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[400px\]{width:400px}.w-\[4px\]{width:4px}.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-\[400px\]{min-width:400px}.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-\[200px\]{max-width:200px}.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(8) 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}.flex-wrap{flex-wrap:wrap}.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-1{row-gap:.25rem}.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)}.self-end{align-self:flex-end}.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}.break-words{overflow-wrap:break-word}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.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-2{padding:.5rem}.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}}
+.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)}}}}div .dial-sm-popup{max-width:100%}@media (min-width:768px){div .dial-sm-popup{max-width:400px}}div .dial-md-popup{max-width:100%}@media (min-width:768px){div .dial-md-popup{max-width:800px}}div .dial-lg-popup{max-width:100%}@media (min-width:768px){div .dial-lg-popup{max-width:1200px}}div .dial-popup{position:relative;display:flex;height:100%;max-height:100%;width:100%;flex-direction:column;border-radius:3px;background-color:var(--bg-layer-3,#222932);--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)}@media (min-width:768px){div .dial-popup{height:auto}}@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}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom: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-\[4px\]{height:4px}.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-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[400px\]{width:400px}.w-\[4px\]{width:4px}.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-\[400px\]{min-width:400px}.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-\[200px\]{max-width:200px}.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(8) 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}.flex-wrap{flex-wrap:wrap}.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-1{row-gap:.25rem}.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)}.self-end{align-self:flex-end}.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}.break-words{overflow-wrap:break-word}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.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-2{padding:.5rem}.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\: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/Popup/constants.d.ts

@@ -1,6 +1,5 @@
 import { PopupSize } from '../../types/popup';
 export declare const overlayBaseClasses = "z-[52] flex items-center justify-center bg-blackout md:p-4";
-export declare const popupBaseClasses = "relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto";
 export declare const popupDividerClasses = "divide-tertiary divide-y";
 export declare const popupHeaderClasses = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;

package/package.json

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