@epam/ai-dial-ui-kit 0.2.0-rc.5 → 0.2.0-rc.7

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("classnames"),D=require("@tabler/icons-react"),u=require("@floating-ui/react"),m=require("react"),y=({icon:e,className:r})=>e?s.jsx("span",{className:d("flex-shrink-0",r),children:e}):null;var T=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e))(T||{});const O={[T.Primary]:"dial-primary-button",[T.Secondary]:"dial-secondary-button",[T.Tertiary]:"dial-tertiary-button"},z=({title:e,variant:r,cssClass:t,ref:n,onClick:l,disable:a,iconAfter:o,iconBefore:c,hideTitleOnMobile:i,ariaLabel:p})=>{const x=d("dial-small-semi",o?"mr-2":"",c?"ml-2":"",i?"hidden sm:inline":"inline"),f=d(r&&O[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:f,onClick:N=>l?.(N),disabled:a,"aria-label":e||p,children:[s.jsx(y,{icon:c}),e&&s.jsx("span",{className:x,children:e}),s.jsx(y,{icon:o})]})},S=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),P=({fieldTitle:e,htmlFor:r,optional:t,optionalText:n,cssClass:l})=>e?s.jsxs("label",{className:d("dial-tiny text-secondary",l,!l?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null;var j=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(j||{});const V={info:s.jsx(D.IconInfoCircle,{size:24}),error:s.jsx(D.IconAlertCircle,{size:24}),warning:s.jsx(D.IconAlertTriangle,{size:24}),success:s.jsx(D.IconCircleCheck,{size:24})},$={[j.Info]:"bg-info border-info text-info",[j.Success]:"bg-success border-success text-success",[j.Warning]:"bg-warning border-warning text-warning",[j.Error]:"bg-error border-error text-error"},B="inline-flex items-center justify-between gap-2 px-3 py-2 border border-solid shadow text-sm w-auto rounded",G=({variant:e=j.Info,message:r,cssClass:t,closable:n=!0,onClose:l})=>s.jsxs("div",{role:"alert",className:d(B,$[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(y,{icon:V[e]}),s.jsx("div",{className:"text-primary",children:r})]}),n&&s.jsx(z,{cssClass:"ml-2 text-secondary hover:text-primary ml-2 text-secondary hover:text-primary ",ariaLabel:"Close alert",iconBefore:s.jsx(D.IconX,{size:16}),onClick:a=>l?.(a)})]}),X=7,Y=2,M=m.createContext(null),W=()=>{const e=m.useContext(M);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},Z=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:n,onOpenChange:l}={})=>{const[a,o]=m.useState(e),c=m.useRef(null),i=n??a,p=l??o,x=u.useFloating({placement:r,open:i,onOpenChange:p,whileElementsMounted:u.autoUpdate,middleware:[u.offset(X+Y),u.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),u.shift({padding:5}),u.arrow({element:c})]}),f=u.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),N=u.useFocus(x.context,{enabled:n==null}),k=u.useDismiss(x.context),b=u.useRole(x.context,{role:"tooltip"}),g=u.useInteractions([f,N,k,b]);return m.useMemo(()=>({open:i,setOpen:p,arrowRef:c,...g,...x}),[i,p,g,x])},J=({children:e,...r})=>{const t=Z(r);return s.jsx(M.Provider,{value:t,children:e})},Q=m.forwardRef(function({style:r,...t},n){const l=W(),a=u.useMergeRefs([l.refs.setFloating,n]);return l.open?s.jsx(u.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:a,style:{...l.floatingStyles,...r},...l.getFloatingProps(t),className:d("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",l.getFloatingProps(t).className),children:[t.children,s.jsx(u.FloatingArrow,{ref:l.arrowRef,context:l.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),ee=m.forwardRef(function({children:r,asChild:t=!1,...n},l){const a=W(),c=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,i=u.useMergeRefs([a.refs.setReference,l,c]);return t&&m.isValidElement(r)?m.cloneElement(r,a.getReferenceProps({ref:i,...n,...r.props})):s.jsx("span",{ref:i,...a.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:r})}),F=({hideTooltip:e,tooltip:r,children:t,triggerClassName:n,contentClassName:l,...a})=>e||!r?s.jsx("span",{className:n,children:t}):s.jsxs(J,{...a,children:[s.jsx(ee,{className:d(n,"truncate"),children:t}),s.jsx(Q,{className:d("text-primary",l,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),L=({value:e,textareaId:r,placeholder:t,cssClass:n="",disabled:l,invalid:a,readonly:o,onChange:c})=>s.jsx(F,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:l,className:d("dial-textarea dial-input",a?"dial-input-error":"",l&&"dial-input-disable",o&&"dial-input-readonly",n),onChange:i=>!o&&c?.(i.currentTarget.value)})}),se=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],re=(e,r,t,n)=>{if((r==="number"||t!==void 0||n!==void 0)&&!se.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(t===void 0||t<0))&&!(e.key==="."&&r==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(t!==void 0||n!==void 0){const a=e.currentTarget.value,o=e.currentTarget.selectionStart||0,c=a.slice(0,o)+e.key+a.slice(o),i=parseFloat(c);if(!isNaN(i)){if(t!==void 0&&i<t){e.preventDefault();return}if(n!==void 0&&i>n){e.preventDefault();return}}}}},R=({iconBeforeInput:e,iconAfterInput:r,hideBorder:t,value:n,elementId:l,placeholder:a="",cssClass:o="",containerCssClass:c,tooltipTriggerClassName:i,type:p="text",disabled:x,readonly:f,invalid:N,onChange:k,min:b,max:g,prefix:E,suffix:A,textBeforeInput:v,textAfterInput:w})=>{const H=h=>h.target.blur(),U=p==="number"||b!==void 0||g!==void 0,_=h=>{re(h,p,b,g)},K=h=>{const C=h.currentTarget.value;if(U&&C!==""){const I=parseFloat(C);if(isNaN(I)&&C!=="-"&&C!=="."||!isNaN(I)&&(b!==void 0&&I<b||g!==void 0&&I>g))return}k?.(C)};return s.jsxs("div",{className:d("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",N&&"dial-input-error",x&&"dial-input-disable",f&&"dial-input-readonly",!v&&"pl-1",!w&&"pr-1",c),children:[v&&s.jsx(F,{tooltip:v,children:s.jsx(R,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:v,disabled:!0,elementId:v+"textBefore"})}),E&&s.jsxs("p",{className:"text-secondary dial-small pl-2",children:[" ",E]}),s.jsx(y,{icon:e,className:"pl-2"}),s.jsx(F,{tooltip:n,triggerClassName:i,children:s.jsx("input",{type:p,autoComplete:"off",id:l,placeholder:a,value:n??"",title:n?String(n):"",disabled:x,className:d("border-0 bg-transparent px-2",o),onChange:h=>!f&&K?.(h),onKeyDown:_,onWheel:H,min:b,max:g})}),s.jsx(y,{icon:r,className:"pr-2"}),A&&s.jsxs("p",{className:"text-secondary dial-small pr-2",children:[" ",A]}),w&&s.jsx(F,{tooltip:w,children:s.jsx(R,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:w,disabled:!0,elementId:w+"textAfter"})})]})},te=/^0+\.(\d+)?$/,ne=/^0+/,q=({fieldTitle:e,errorText:r,optional:t,elementCssClass:n,elementContainerCssClass:l,elementId:a,containerCssClass:o,readonly:c,defaultEmptyText:i,min:p,max:x,...f})=>s.jsxs("div",{className:d("flex flex-col",o),children:[s.jsx(P,{fieldTitle:e,optional:t,htmlFor:a}),c?s.jsx("span",{children:f.value||(i??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(R,{elementId:a,cssClass:n,containerCssClass:l,invalid:r!=null,min:p,max:x,...f}),s.jsx(S,{errorText:r})]})]}),le=({onChange:e,value:r,min:t,max:n,...l})=>{const a=o=>String(o)?.match(te)?String(o)?.replace(ne,"0"):Number(o);return s.jsx(q,{type:"number",onChange:o=>e?.(a(o)),value:r,min:t,max:n,...l})},ae=({onChange:e,...r})=>s.jsx(q,{type:"text",onChange:t=>e?.(t),...r}),oe=({fieldTitle:e,optional:r,elementId:t,elementCssClass:n,errorText:l,...a})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(P,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(L,{textareaId:t,cssClass:n,...a}),s.jsx(S,{errorText:l})]}),ie=({title:e,switchId:r,isOn:t=!1,disabled:n,onChange:l})=>{const a=d("flex w-[36px] h-[18px]  cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",t?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=m.useCallback(c=>{c.stopPropagation(),l?.(!t)},[l,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:n,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:a,children:s.jsx("span",{className:d("size-3 rounded-full",n?t?"bg-controls-disable":"bg-layer-4":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"h-[14px] pl-2 small text-primary",children:e})]})};exports.AlertVariant=j;exports.ButtonVariant=T;exports.DialAlert=G;exports.DialButton=z;exports.DialErrorText=S;exports.DialFieldLabel=P;exports.DialIcon=y;exports.DialInput=R;exports.DialNumberInputField=le;exports.DialSwitch=ie;exports.DialTextAreaField=oe;exports.DialTextInputField=ae;exports.DialTextarea=L;exports.DialTooltip=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("classnames"),y=require("@tabler/icons-react"),d=require("@floating-ui/react"),f=require("react"),N=({icon:e,className:r})=>e?s.jsx("span",{className:u("flex-shrink-0",r),children:e}):null;var T=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e))(T||{});const K={[T.Primary]:"dial-primary-button",[T.Secondary]:"dial-secondary-button",[T.Tertiary]:"dial-tertiary-button"},L=({title:e,variant:r,cssClass:t,ref:n,onClick:a,disable:l,iconAfter:o,iconBefore:c,hideTitleOnMobile:i,ariaLabel:p})=>{const x=u("dial-small-semi",o?"mr-2":"",c?"ml-2":"",i?"hidden sm:inline":"inline"),m=u(r&&K[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:m,onClick:v=>a?.(v),disabled:l,"aria-label":e||p,children:[s.jsx(N,{icon:c}),e&&s.jsx("span",{className:x,children:e}),s.jsx(N,{icon:o})]})},S=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),P=({fieldTitle:e,htmlFor:r,optional:t,optionalText:n,cssClass:a})=>e?s.jsxs("label",{className:u("dial-tiny text-secondary",a,!a?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null;var j=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(j||{});const O={info:s.jsx(y.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(y.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(y.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(y.IconCircleCheck,{size:24,stroke:2})},V={[j.Info]:"bg-info border-info text-info",[j.Success]:"bg-success border-success text-success",[j.Warning]:"bg-warning border-warning text-warning",[j.Error]:"bg-error border-error text-error"},$="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",G=({variant:e=j.Info,message:r,cssClass:t,closable:n=!1,onClose:a})=>s.jsxs("div",{role:"alert",className:u($,V[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(N,{icon:O[e]}),s.jsx("div",{className:"text-primary",children:r})]}),n&&s.jsx(L,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(y.IconX,{size:16}),onClick:l=>a?.(l)})]}),X="flex items-center justify-center text-secondary",Y="shrink-0 grow-0 basis-auto animate-spin-steps",Z=({size:e=18,cssClass:r,iconClass:t,fullWidth:n=!0,ariaLabel:a="Loading"})=>s.jsx("div",{role:"status","aria-label":a,className:u({[X]:!0,"w-full h-full":n,[r||""]:!!r}),children:s.jsx(N,{icon:s.jsx(y.IconLoader,{width:e,height:e,className:u(Y,t)})})}),J=7,Q=2,M=f.createContext(null),W=()=>{const e=f.useContext(M);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},ee=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:n,onOpenChange:a}={})=>{const[l,o]=f.useState(e),c=f.useRef(null),i=n??l,p=a??o,x=d.useFloating({placement:r,open:i,onOpenChange:p,whileElementsMounted:d.autoUpdate,middleware:[d.offset(J+Q),d.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),d.shift({padding:5}),d.arrow({element:c})]}),m=d.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),v=d.useFocus(x.context,{enabled:n==null}),R=d.useDismiss(x.context),b=d.useRole(x.context,{role:"tooltip"}),g=d.useInteractions([m,v,R,b]);return f.useMemo(()=>({open:i,setOpen:p,arrowRef:c,...g,...x}),[i,p,g,x])},se=({children:e,...r})=>{const t=ee(r);return s.jsx(M.Provider,{value:t,children:e})},re=f.forwardRef(function({style:r,...t},n){const a=W(),l=d.useMergeRefs([a.refs.setFloating,n]);return a.open?s.jsx(d.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...a.floatingStyles,...r},...a.getFloatingProps(t),className:u("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",a.getFloatingProps(t).className),children:[t.children,s.jsx(d.FloatingArrow,{ref:a.arrowRef,context:a.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),te=f.forwardRef(function({children:r,asChild:t=!1,...n},a){const l=W(),c=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,i=d.useMergeRefs([l.refs.setReference,a,c]);return t&&f.isValidElement(r)?f.cloneElement(r,l.getReferenceProps({ref:i,...n,...r.props})):s.jsx("span",{ref:i,...l.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:r})}),k=({hideTooltip:e,tooltip:r,children:t,triggerClassName:n,contentClassName:a,...l})=>e||!r?s.jsx("span",{className:n,children:t}):s.jsxs(se,{...l,children:[s.jsx(te,{className:u(n,"truncate"),children:t}),s.jsx(re,{className:u("text-primary",a,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),z=({value:e,textareaId:r,placeholder:t,cssClass:n="",disabled:a,invalid:l,readonly:o,onChange:c})=>s.jsx(k,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:a,className:u("dial-textarea dial-input",l?"dial-input-error":"",a&&"dial-input-disable",o&&"dial-input-readonly",n),onChange:i=>!o&&c?.(i.currentTarget.value)})}),ne=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],ae=(e,r,t,n)=>{if((r==="number"||t!==void 0||n!==void 0)&&!ne.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(t===void 0||t<0))&&!(e.key==="."&&r==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(t!==void 0||n!==void 0){const l=e.currentTarget.value,o=e.currentTarget.selectionStart||0,c=l.slice(0,o)+e.key+l.slice(o),i=parseFloat(c);if(!isNaN(i)){if(t!==void 0&&i<t){e.preventDefault();return}if(n!==void 0&&i>n){e.preventDefault();return}}}}},I=({iconBeforeInput:e,iconAfterInput:r,hideBorder:t,value:n,elementId:a,placeholder:l="",cssClass:o="",containerCssClass:c,tooltipTriggerClassName:i,type:p="text",disabled:x,readonly:m,invalid:v,onChange:R,min:b,max:g,prefix:E,suffix:A,textBeforeInput:w,textAfterInput:C})=>{const B=h=>h.target.blur(),H=p==="number"||b!==void 0||g!==void 0,U=h=>{ae(h,p,b,g)},_=h=>{const D=h.currentTarget.value;if(H&&D!==""){const F=parseFloat(D);if(isNaN(F)&&D!=="-"&&D!=="."||!isNaN(F)&&(b!==void 0&&F<b||g!==void 0&&F>g))return}R?.(D)};return s.jsxs("div",{className:u("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",v&&"dial-input-error",x&&"dial-input-disable",m&&"dial-input-readonly",!w&&"pl-1",!C&&"pr-1",c),children:[w&&s.jsx(k,{tooltip:w,children:s.jsx(I,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:w,disabled:!0,elementId:w+"textBefore"})}),E&&s.jsxs("p",{className:"text-secondary dial-small pl-2",children:[" ",E]}),s.jsx(N,{icon:e,className:"pl-2"}),s.jsx(k,{tooltip:n,triggerClassName:i,children:s.jsx("input",{type:p,autoComplete:"off",id:a,placeholder:l,value:n??"",title:n?String(n):"",disabled:x,className:u("border-0 bg-transparent px-2",o),onChange:h=>!m&&_?.(h),onKeyDown:U,onWheel:B,min:b,max:g})}),s.jsx(N,{icon:r,className:"pr-2"}),A&&s.jsxs("p",{className:"text-secondary dial-small pr-2",children:[" ",A]}),C&&s.jsx(k,{tooltip:C,children:s.jsx(I,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:C,disabled:!0,elementId:C+"textAfter"})})]})},le=/^0+\.(\d+)?$/,oe=/^0+/,q=({fieldTitle:e,errorText:r,optional:t,elementCssClass:n,elementContainerCssClass:a,elementId:l,containerCssClass:o,readonly:c,defaultEmptyText:i,min:p,max:x,...m})=>s.jsxs("div",{className:u("flex flex-col",o),children:[s.jsx(P,{fieldTitle:e,optional:t,htmlFor:l}),c?s.jsx("span",{children:m.value||(i??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(I,{elementId:l,cssClass:n,containerCssClass:a,invalid:r!=null,min:p,max:x,...m}),s.jsx(S,{errorText:r})]})]}),ie=({onChange:e,value:r,min:t,max:n,...a})=>{const l=o=>String(o)?.match(le)?String(o)?.replace(oe,"0"):Number(o);return s.jsx(q,{type:"number",onChange:o=>e?.(l(o)),value:r,min:t,max:n,...a})},ce=({onChange:e,...r})=>s.jsx(q,{type:"text",onChange:t=>e?.(t),...r}),ue=({fieldTitle:e,optional:r,elementId:t,elementCssClass:n,errorText:a,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(P,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(z,{textareaId:t,cssClass:n,...l}),s.jsx(S,{errorText:a})]}),de=({title:e,switchId:r,isOn:t=!1,disabled:n,onChange:a})=>{const l=u("flex w-[36px] h-[18px]  cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",t?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=f.useCallback(c=>{c.stopPropagation(),a?.(!t)},[a,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:n,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:l,children:s.jsx("span",{className:u("size-3 rounded-full",n?t?"bg-controls-disable":"bg-layer-4":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"h-[14px] pl-2 small text-primary",children:e})]})};exports.AlertVariant=j;exports.ButtonVariant=T;exports.DialAlert=G;exports.DialButton=L;exports.DialErrorText=S;exports.DialFieldLabel=P;exports.DialIcon=N;exports.DialInput=I;exports.DialLoader=Z;exports.DialNumberInputField=ie;exports.DialSwitch=de;exports.DialTextAreaField=ue;exports.DialTextInputField=ce;exports.DialTextarea=z;exports.DialTooltip=k;

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

@@ -1,33 +1,33 @@
 import { jsx as n, jsxs as p, Fragment as K } from "react/jsx-runtime";
 import d from "classnames";
-import { IconCircleCheck as G, IconAlertTriangle as O, IconAlertCircle as $, IconInfoCircle as V, IconX as X } from "@tabler/icons-react";
-import { useFloating as Y, offset as Z, flip as q, shift as B, arrow as J, autoUpdate as Q, useHover as ee, useFocus as re, useDismiss as te, useRole as ne, useInteractions as se, useMergeRefs as S, FloatingPortal as oe, FloatingArrow as le } from "@floating-ui/react";
-import { createContext as ae, useState as ie, useRef as ce, useMemo as de, useContext as ue, forwardRef as E, isValidElement as pe, cloneElement as me, useCallback as fe } from "react";
-const w = ({ icon: e, className: r }) => e ? /* @__PURE__ */ n("span", { className: d("flex-shrink-0", r), children: e }) : null;
-var D = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(D || {});
-const ge = {
-  [D.Primary]: "dial-primary-button",
-  [D.Secondary]: "dial-secondary-button",
-  [D.Tertiary]: "dial-tertiary-button"
+import { IconCircleCheck as B, IconAlertTriangle as G, IconAlertCircle as O, IconInfoCircle as $, IconX as V, IconLoader as X } from "@tabler/icons-react";
+import { useFloating as Y, offset as Z, flip as q, shift as J, arrow as Q, autoUpdate as ee, useHover as re, useFocus as te, useDismiss as ne, useRole as se, useInteractions as oe, useMergeRefs as S, FloatingPortal as ae, FloatingArrow as le } from "@floating-ui/react";
+import { createContext as ie, useState as ce, useRef as de, useMemo as ue, useContext as pe, forwardRef as E, isValidElement as me, cloneElement as fe, useCallback as ge } from "react";
+const N = ({ icon: e, className: r }) => e ? /* @__PURE__ */ n("span", { className: d("flex-shrink-0", r), children: e }) : null;
+var T = /* @__PURE__ */ ((e) => (e.Primary = "primary", e.Secondary = "secondary", e.Tertiary = "tertiary", e))(T || {});
+const he = {
+  [T.Primary]: "dial-primary-button",
+  [T.Secondary]: "dial-secondary-button",
+  [T.Tertiary]: "dial-tertiary-button"
 }, be = ({
   title: e,
   variant: r,
   cssClass: t,
   ref: s,
   onClick: o,
-  disable: l,
-  iconAfter: a,
+  disable: a,
+  iconAfter: l,
   iconBefore: c,
   hideTitleOnMobile: i,
   ariaLabel: m
 }) => {
   const u = d(
     "dial-small-semi",
-    a ? "mr-2" : "",
+    l ? "mr-2" : "",
     c ? "ml-2" : "",
     i ? "hidden sm:inline" : "inline"
   ), f = d(
-    r && ge[r],
+    r && he[r],
     t,
     "focus-visible:outline outline-offset-0"
   );
@@ -38,16 +38,16 @@ const ge = {
       type: "button",
       className: f,
       onClick: (y) => o?.(y),
-      disabled: l,
+      disabled: a,
       "aria-label": e || m,
       children: [
-        /* @__PURE__ */ n(w, { icon: c }),
+        /* @__PURE__ */ n(N, { icon: c }),
         e && /* @__PURE__ */ n("span", { className: u, children: e }),
-        /* @__PURE__ */ n(w, { icon: a })
+        /* @__PURE__ */ n(N, { icon: l })
       ]
     }
   );
-}, z = ({ errorText: e }) => e && /* @__PURE__ */ n("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
+}, L = ({ errorText: e }) => e && /* @__PURE__ */ n("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
   fieldTitle: e,
   htmlFor: r,
   optional: t,
@@ -69,21 +69,21 @@ const ge = {
   }
 ) : null;
 var x = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(x || {});
-const he = {
-  info: /* @__PURE__ */ n(V, { size: 24 }),
-  error: /* @__PURE__ */ n($, { size: 24 }),
-  warning: /* @__PURE__ */ n(O, { size: 24 }),
-  success: /* @__PURE__ */ n(G, { size: 24 })
-}, xe = {
+const xe = {
+  info: /* @__PURE__ */ n($, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ n(O, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ n(G, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ n(B, { size: 24, stroke: 2 })
+}, Ne = {
   [x.Info]: "bg-info border-info text-info",
   [x.Success]: "bg-success border-success text-success",
   [x.Warning]: "bg-warning border-warning text-warning",
   [x.Error]: "bg-error border-error text-error"
-}, ye = "inline-flex items-center justify-between gap-2 px-3 py-2 border border-solid shadow text-sm w-auto rounded", je = ({
+}, ye = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", He = ({
   variant: e = x.Info,
   message: r,
   cssClass: t,
-  closable: s = !0,
+  closable: s = !1,
   onClose: o
 }) => /* @__PURE__ */ p(
   "div",
@@ -91,63 +91,93 @@ const he = {
     role: "alert",
     className: d(
       ye,
-      xe[e],
+      Ne[e],
       t
     ),
     children: [
       /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ n(w, { icon: he[e] }),
+        /* @__PURE__ */ n(N, { icon: xe[e] }),
         /* @__PURE__ */ n("div", { className: "text-primary", children: r })
       ] }),
       s && /* @__PURE__ */ n(
         be,
         {
-          cssClass: "ml-2 text-secondary hover:text-primary ml-2 text-secondary hover:text-primary ",
+          cssClass: "ml-2 text-secondary hover:text-primary",
           ariaLabel: "Close alert",
-          iconBefore: /* @__PURE__ */ n(X, { size: 16 }),
-          onClick: (l) => o?.(l)
+          iconBefore: /* @__PURE__ */ n(V, { size: 16 }),
+          onClick: (a) => o?.(a)
         }
       )
     ]
   }
-), Ne = 7, ve = 2, W = ae(null), j = () => {
-  const e = ue(W);
+), ve = "flex items-center justify-center text-secondary", Ce = "shrink-0 grow-0 basis-auto animate-spin-steps", Ue = ({
+  size: e = 18,
+  cssClass: r,
+  iconClass: t,
+  fullWidth: s = !0,
+  ariaLabel: o = "Loading"
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    role: "status",
+    "aria-label": o,
+    className: d({
+      [ve]: !0,
+      "w-full h-full": s,
+      [r || ""]: !!r
+    }),
+    children: /* @__PURE__ */ n(
+      N,
+      {
+        icon: /* @__PURE__ */ n(
+          X,
+          {
+            width: e,
+            height: e,
+            className: d(Ce, t)
+          }
+        )
+      }
+    )
+  }
+), we = 7, De = 2, W = ie(null), j = () => {
+  const e = pe(W);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, Ce = ({
+}, Te = ({
   initialOpen: e = !1,
   placement: r = "bottom",
   isTriggerClickable: t = !1,
   open: s,
   onOpenChange: o
 } = {}) => {
-  const [l, a] = ie(e), c = ce(null), i = s ?? l, m = o ?? a, u = Y({
+  const [a, l] = ce(e), c = de(null), i = s ?? a, m = o ?? l, u = Y({
     placement: r,
     open: i,
     onOpenChange: m,
-    whileElementsMounted: Q,
+    whileElementsMounted: ee,
     middleware: [
-      Z(Ne + ve),
+      Z(we + De),
       q({
         crossAxis: r.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      B({ padding: 5 }),
-      J({
+      J({ padding: 5 }),
+      Q({
         element: c
       })
     ]
-  }), f = ee(u.context, {
+  }), f = re(u.context, {
     move: !1,
     enabled: s == null,
     mouseOnly: t,
     delay: { open: 500, close: 0 }
-  }), y = re(u.context, {
+  }), y = te(u.context, {
     enabled: s == null
-  }), F = te(u.context), b = ne(u.context, { role: "tooltip" }), g = se([f, y, F, b]);
-  return de(
+  }), F = ne(u.context), h = se(u.context, { role: "tooltip" }), g = oe([f, y, F, h]);
+  return ue(
     () => ({
       open: i,
       setOpen: m,
@@ -157,18 +187,18 @@ const he = {
     }),
     [i, m, g, u]
   );
-}, we = ({
+}, ke = ({
   children: e,
   ...r
 }) => {
-  const t = Ce(r);
+  const t = Te(r);
   return /* @__PURE__ */ n(W.Provider, { value: t, children: e });
-}, Te = E(function({ style: r, ...t }, s) {
-  const o = j(), l = S([o.refs.setFloating, s]);
-  return o.open ? /* @__PURE__ */ n(oe, { id: "tooltip-portal", children: /* @__PURE__ */ p(
+}, Fe = E(function({ style: r, ...t }, s) {
+  const o = j(), a = S([o.refs.setFloating, s]);
+  return o.open ? /* @__PURE__ */ n(ae, { id: "tooltip-portal", children: /* @__PURE__ */ p(
     "div",
     {
-      ref: l,
+      ref: a,
       style: {
         ...o.floatingStyles,
         ...r
@@ -193,11 +223,11 @@ const he = {
       ]
     }
   ) }) : null;
-}), De = E(function({ children: r, asChild: t = !1, ...s }, o) {
-  const l = j(), c = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, i = S([l.refs.setReference, o, c]);
-  return t && pe(r) ? me(
+}), Ie = E(function({ children: r, asChild: t = !1, ...s }, o) {
+  const a = j(), c = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, i = S([a.refs.setReference, o, c]);
+  return t && me(r) ? fe(
     r,
-    l.getReferenceProps({
+    a.getReferenceProps({
       ref: i,
       ...s,
       ...r.props
@@ -206,7 +236,7 @@ const he = {
     "span",
     {
       ref: i,
-      ...l.getReferenceProps(s),
+      ...a.getReferenceProps(s),
       className: s.className ?? "dial-tooltip-trigger text-left",
       children: r
     }
@@ -217,11 +247,11 @@ const he = {
   children: t,
   triggerClassName: s,
   contentClassName: o,
-  ...l
-}) => e || !r ? /* @__PURE__ */ n("span", { className: s, children: t }) : /* @__PURE__ */ p(we, { ...l, children: [
-  /* @__PURE__ */ n(De, { className: d(s, "truncate"), children: t }),
+  ...a
+}) => e || !r ? /* @__PURE__ */ n("span", { className: s, children: t }) : /* @__PURE__ */ p(ke, { ...a, children: [
+  /* @__PURE__ */ n(Ie, { className: d(s, "truncate"), children: t }),
   /* @__PURE__ */ n(
-    Te,
+    Fe,
     {
       className: d(
         "text-primary",
@@ -232,14 +262,14 @@ const he = {
       children: r
     }
   )
-] }), ke = ({
+] }), Re = ({
   value: e,
   textareaId: r,
   placeholder: t,
   cssClass: s = "",
   disabled: o,
-  invalid: l,
-  readonly: a,
+  invalid: a,
+  readonly: l,
   onChange: c
 }) => /* @__PURE__ */ n(k, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ n(
   "textarea",
@@ -250,14 +280,14 @@ const he = {
     disabled: o,
     className: d(
       "dial-textarea dial-input",
-      l ? "dial-input-error" : "",
+      a ? "dial-input-error" : "",
       o && "dial-input-disable",
-      a && "dial-input-readonly",
+      l && "dial-input-readonly",
       s
     ),
-    onChange: (i) => !a && c?.(i.currentTarget.value)
+    onChange: (i) => !l && c?.(i.currentTarget.value)
   }
-) }), Fe = [
+) }), Pe = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -269,14 +299,14 @@ const he = {
   "Escape",
   "Home",
   "End"
-], Ie = (e, r, t, s) => {
-  if ((r === "number" || t !== void 0 || s !== void 0) && !Fe.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && r === "number" && !e.currentTarget.value.includes("."))) {
+], Se = (e, r, t, s) => {
+  if ((r === "number" || t !== void 0 || s !== void 0) && !Pe.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (t === void 0 || t < 0)) && !(e.key === "." && r === "number" && !e.currentTarget.value.includes("."))) {
     if (!/^[0-9]$/.test(e.key)) {
       e.preventDefault();
       return;
     }
     if (t !== void 0 || s !== void 0) {
-      const l = e.currentTarget.value, a = e.currentTarget.selectionStart || 0, c = l.slice(0, a) + e.key + l.slice(a), i = parseFloat(c);
+      const a = e.currentTarget.value, l = e.currentTarget.selectionStart || 0, c = a.slice(0, l) + e.key + a.slice(l), i = parseFloat(c);
       if (!isNaN(i)) {
         if (t !== void 0 && i < t) {
           e.preventDefault();
@@ -295,8 +325,8 @@ const he = {
   hideBorder: t,
   value: s,
   elementId: o,
-  placeholder: l = "",
-  cssClass: a = "",
+  placeholder: a = "",
+  cssClass: l = "",
   containerCssClass: c,
   tooltipTriggerClassName: i,
   type: m = "text",
@@ -304,23 +334,23 @@ const he = {
   readonly: f,
   invalid: y,
   onChange: F,
-  min: b,
+  min: h,
   max: g,
   prefix: R,
   suffix: P,
-  textBeforeInput: N,
-  textAfterInput: v
+  textBeforeInput: v,
+  textAfterInput: C
 }) => {
-  const M = (h) => h.target.blur(), H = m === "number" || b !== void 0 || g !== void 0, U = (h) => {
-    Ie(h, m, b, g);
-  }, _ = (h) => {
-    const C = h.currentTarget.value;
-    if (H && C !== "") {
-      const T = parseFloat(C);
-      if (isNaN(T) && C !== "-" && C !== "." || !isNaN(T) && (b !== void 0 && T < b || g !== void 0 && T > g))
+  const M = (b) => b.target.blur(), H = m === "number" || h !== void 0 || g !== void 0, U = (b) => {
+    Se(b, m, h, g);
+  }, _ = (b) => {
+    const w = b.currentTarget.value;
+    if (H && w !== "") {
+      const D = parseFloat(w);
+      if (isNaN(D) && w !== "-" && w !== "." || !isNaN(D) && (h !== void 0 && D < h || g !== void 0 && D > g))
         return;
     }
-    F?.(C);
+    F?.(w);
   };
   return /* @__PURE__ */ p(
     "div",
@@ -331,91 +361,91 @@ const he = {
         y && "dial-input-error",
         u && "dial-input-disable",
         f && "dial-input-readonly",
-        !N && "pl-1",
-        !v && "pr-1",
+        !v && "pl-1",
+        !C && "pr-1",
         c
       ),
       children: [
-        N && /* @__PURE__ */ n(k, { tooltip: N, children: /* @__PURE__ */ n(
+        v && /* @__PURE__ */ n(k, { tooltip: v, children: /* @__PURE__ */ n(
           I,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
             cssClass: "px-2 overflow-hidden overflow-ellipsis dial-small",
-            value: N,
+            value: v,
             disabled: !0,
-            elementId: N + "textBefore"
+            elementId: v + "textBefore"
           }
         ) }),
         R && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
           R
         ] }),
-        /* @__PURE__ */ n(w, { icon: e, className: "pl-2" }),
+        /* @__PURE__ */ n(N, { icon: e, className: "pl-2" }),
         /* @__PURE__ */ n(k, { tooltip: s, triggerClassName: i, children: /* @__PURE__ */ n(
           "input",
           {
             type: m,
             autoComplete: "off",
             id: o,
-            placeholder: l,
+            placeholder: a,
             value: s ?? "",
             title: s ? String(s) : "",
             disabled: u,
-            className: d("border-0 bg-transparent px-2", a),
-            onChange: (h) => !f && _?.(h),
+            className: d("border-0 bg-transparent px-2", l),
+            onChange: (b) => !f && _?.(b),
             onKeyDown: U,
             onWheel: M,
-            min: b,
+            min: h,
             max: g
           }
         ) }),
-        /* @__PURE__ */ n(w, { icon: r, className: "pr-2" }),
+        /* @__PURE__ */ n(N, { icon: r, className: "pr-2" }),
         P && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
           P
         ] }),
-        v && /* @__PURE__ */ n(k, { tooltip: v, children: /* @__PURE__ */ n(
+        C && /* @__PURE__ */ n(k, { tooltip: C, children: /* @__PURE__ */ n(
           I,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
             cssClass: "px-2",
-            value: v,
+            value: C,
             disabled: !0,
-            elementId: v + "textAfter"
+            elementId: C + "textAfter"
           }
         ) })
       ]
     }
   );
-}, Re = /^0+\.(\d+)?$/, Pe = /^0+/, L = ({
+}, Ee = /^0+\.(\d+)?$/, Le = /^0+/, z = ({
   fieldTitle: e,
   errorText: r,
   optional: t,
   elementCssClass: s,
   elementContainerCssClass: o,
-  elementId: l,
-  containerCssClass: a,
+  elementId: a,
+  containerCssClass: l,
   readonly: c,
   defaultEmptyText: i,
   min: m,
   max: u,
   ...f
-}) => /* @__PURE__ */ p("div", { className: d("flex flex-col", a), children: [
+}) => /* @__PURE__ */ p("div", { className: d("flex flex-col", l), children: [
   /* @__PURE__ */ n(
     A,
     {
       fieldTitle: e,
       optional: t,
-      htmlFor: l
+      htmlFor: a
     }
   ),
   c ? /* @__PURE__ */ n("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ p(K, { children: [
     /* @__PURE__ */ n(
       I,
       {
-        elementId: l,
+        elementId: a,
         cssClass: s,
         containerCssClass: o,
         invalid: r != null,
@@ -424,44 +454,44 @@ const he = {
         ...f
       }
     ),
-    /* @__PURE__ */ n(z, { errorText: r })
+    /* @__PURE__ */ n(L, { errorText: r })
   ] })
-] }), Le = ({
+] }), _e = ({
   onChange: e,
   value: r,
   min: t,
   max: s,
   ...o
 }) => {
-  const l = (a) => String(a)?.match(Re) ? String(a)?.replace(Pe, "0") : Number(a);
+  const a = (l) => String(l)?.match(Ee) ? String(l)?.replace(Le, "0") : Number(l);
   return /* @__PURE__ */ n(
-    L,
+    z,
     {
       type: "number",
-      onChange: (a) => e?.(l(a)),
+      onChange: (l) => e?.(a(l)),
       value: r,
       min: t,
       max: s,
       ...o
     }
   );
-}, Me = ({
+}, Ke = ({
   onChange: e,
   ...r
 }) => /* @__PURE__ */ n(
-  L,
+  z,
   {
     type: "text",
     onChange: (t) => e?.(t),
     ...r
   }
-), He = ({
+), Be = ({
   fieldTitle: e,
   optional: r,
   elementId: t,
   elementCssClass: s,
   errorText: o,
-  ...l
+  ...a
 }) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
   /* @__PURE__ */ n(
     A,
@@ -472,27 +502,27 @@ const he = {
     }
   ),
   /* @__PURE__ */ n(
-    ke,
+    Re,
     {
       textareaId: t,
       cssClass: s,
-      ...l
+      ...a
     }
   ),
-  /* @__PURE__ */ n(z, { errorText: o })
-] }), Ue = ({
+  /* @__PURE__ */ n(L, { errorText: o })
+] }), Ge = ({
   title: e,
   switchId: r,
   isOn: t = !1,
   disabled: s,
   onChange: o
 }) => {
-  const l = d(
+  const a = d(
     "flex w-[36px] h-[18px]  cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
     t ? "flex-row-reverse" : "flex-row",
     s ? "pointer-events-none" : "",
     s ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
-  ), a = fe(
+  ), l = ge(
     (c) => {
       c.stopPropagation(), o?.(!t);
     },
@@ -503,14 +533,14 @@ const he = {
       "input",
       {
         type: "checkbox",
-        onChange: a,
+        onChange: l,
         id: r,
         disabled: s,
         className: "invisible w-0 h-0",
         checked: t
       }
     ),
-    /* @__PURE__ */ n("label", { htmlFor: r, className: l, children: /* @__PURE__ */ n(
+    /* @__PURE__ */ n("label", { htmlFor: r, className: a, children: /* @__PURE__ */ n(
       "span",
       {
         className: d(
@@ -524,17 +554,18 @@ const he = {
 };
 export {
   x as AlertVariant,
-  D as ButtonVariant,
-  je as DialAlert,
+  T as ButtonVariant,
+  He as DialAlert,
   be as DialButton,
-  z as DialErrorText,
+  L as DialErrorText,
   A as DialFieldLabel,
-  w as DialIcon,
+  N as DialIcon,
   I as DialInput,
-  Le as DialNumberInputField,
-  Ue as DialSwitch,
-  He as DialTextAreaField,
-  Me as DialTextInputField,
-  ke as DialTextarea,
+  Ue as DialLoader,
+  _e as DialNumberInputField,
+  Ge as DialSwitch,
+  Be as DialTextAreaField,
+  Ke as DialTextInputField,
+  Re as DialTextarea,
   k as DialTooltip
 };

package/dist/index.css

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

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

@@ -23,20 +23,20 @@ export interface DialAlertProps {
  * <DialAlert
  *   variant={AlertVariant.Success}
  *   message="Changes saved successfully."
- *   onClose={(e) => console.log('closed', e)}
  * />
  *
  * <DialAlert
  *   variant={AlertVariant.Error}
- *   closable={false}
+ *   closable
  *   message="Something went wrong."
+ *   onClose={(e) => console.log('closed', e)}
  * />
  * ```
  *
  * @param [variant=AlertVariant.Info] - Defines the visual style and icon of the alert
  * @param message - Message text to display inside the alert
  * @param [cssClass] - Additional CSS classes applied to the alert container
- * @param [closable=true] - Whether the alert has a close button
+ * @param [closable=false] - Whether the alert has a close button
  * @param [onClose] - Callback fired when the close button is clicked
  */
 export declare const DialAlert: FC<DialAlertProps>;

package/dist/src/components/Alert/constants.d.ts

@@ -2,4 +2,4 @@ import { AlertVariant } from '../../types/alert';
 import { ReactNode } from 'react';
 export declare const variantIcons: Record<AlertVariant, ReactNode>;
 export declare const alertVariantClassMap: Record<AlertVariant, string>;
-export declare const alertBaseClasses = "inline-flex items-center justify-between gap-2 px-3 py-2 border border-solid shadow text-sm w-auto rounded";
+export declare const alertBaseClasses = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex";

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

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+export interface DialLoaderProps {
+    size?: number;
+    cssClass?: string;
+    iconClass?: string;
+    fullWidth?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * A simple loading spinner component.
+ *
+ * Renders a spinning SVG with optional full-width container.
+ *
+ * @example
+ * ```tsx
+ * // Full width (default)
+ * <DialLoader />
+ *
+ * // Inline (content width)
+ * <DialLoader fullWidth={false} />
+ *
+ * // Custom size and classes
+ * <DialLoader size={24} iconClass="text-accent-primary" />
+ * ```
+ *
+ * @param [size=18] - Icon size in px
+ * @param [cssClass] - Additional classes for the container
+ * @param [iconClass] - Additional classes for the SVG icon
+ * @param [fullWidth=true] - Stretch to full width/height of container
+ * @param [ariaLabel='Loading'] - Accessible label for screen readers
+ */
+export declare const DialLoader: FC<DialLoaderProps>;

package/dist/src/components/Loader/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const loaderBaseClasses = "flex items-center justify-center text-secondary";
+export declare const loaderIconBaseClasses = "shrink-0 grow-0 basis-auto animate-spin-steps";

package/dist/src/index.d.ts

@@ -3,6 +3,7 @@ export { DialErrorText } from './components/ErrorText/ErrorText';
 export { DialFieldLabel } from './components/Field/Field';
 export { DialIcon } from './components/Icon/Icon';
 export { DialAlert } from './components/Alert/Alert';
+export { DialLoader } from './components/Loader/Loader';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTextAreaField } from './components/TextAreaField/TextAreaField';
 export { DialTooltip } from './components/Tooltip/Tooltip';

package/package.json

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