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

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"),d=require("classnames"),D=require("@tabler/icons-react"),u=require("@floating-ui/react"),f=require("react"),N=({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"),m=d(r&&O[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:m,onClick:y=>l?.(y),disabled:a,"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: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,stroke:2}),error:s.jsx(D.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(D.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(D.IconCircleCheck,{size:24,stroke:2})},$={[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="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:l})=>s.jsxs("div",{role:"alert",className:d(B,$[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(N,{icon:V[e]}),s.jsx("div",{className:"text-primary",children:r})]}),n&&s.jsx(z,{cssClass:"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=f.createContext(null),W=()=>{const e=f.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]=f.useState(e),c=f.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})]}),m=u.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),y=u.useFocus(x.context,{enabled:n==null}),R=u.useDismiss(x.context),b=u.useRole(x.context,{role:"tooltip"}),g=u.useInteractions([m,y,R,b]);return f.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=f.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=f.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&&f.isValidElement(r)?f.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})}),k=({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(k,{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}}}}},I=({iconBeforeInput:e,iconAfterInput:r,hideBorder:t,value:n,elementId:l,placeholder:a="",cssClass:o="",containerCssClass:c,tooltipTriggerClassName:i,type:p="text",disabled:x,readonly:m,invalid:y,onChange:R,min:b,max:g,prefix:E,suffix:A,textBeforeInput:v,textAfterInput:C})=>{const H=h=>h.target.blur(),U=p==="number"||b!==void 0||g!==void 0,_=h=>{re(h,p,b,g)},K=h=>{const w=h.currentTarget.value;if(U&&w!==""){const F=parseFloat(w);if(isNaN(F)&&w!=="-"&&w!=="."||!isNaN(F)&&(b!==void 0&&F<b||g!==void 0&&F>g))return}R?.(w)};return s.jsxs("div",{className:d("dial-input-field flex flex-row items-center justify-between",t?"dial-input-no-border":"dial-input",y&&"dial-input-error",x&&"dial-input-disable",m&&"dial-input-readonly",!v&&"pl-1",!C&&"pr-1",c),children:[v&&s.jsx(k,{tooltip:v,children:s.jsx(I,{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(N,{icon:e,className:"pl-2"}),s.jsx(k,{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=>!m&&K?.(h),onKeyDown:_,onWheel:H,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"})})]})},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,...m})=>s.jsxs("div",{className:d("flex flex-col",o),children:[s.jsx(P,{fieldTitle:e,optional:t,htmlFor:a}),c?s.jsx("span",{children:m.value||(i??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(I,{elementId:a,cssClass:n,containerCssClass:l,invalid:r!=null,min:p,max:x,...m}),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=f.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=N;exports.DialInput=I;exports.DialNumberInputField=le;exports.DialSwitch=ie;exports.DialTextAreaField=oe;exports.DialTextInputField=ae;exports.DialTextarea=L;exports.DialTooltip=k;

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

@@ -1,9 +1,9 @@
-import { jsx as n, jsxs as p, Fragment as K } from "react/jsx-runtime";
+import { jsx as t, 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 { 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 ne, useRole as te, 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;
+const w = ({ icon: e, className: r }) => e ? /* @__PURE__ */ t("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",
@@ -12,7 +12,7 @@ const ge = {
 }, be = ({
   title: e,
   variant: r,
-  cssClass: t,
+  cssClass: n,
   ref: s,
   onClick: o,
   disable: l,
@@ -28,7 +28,7 @@ const ge = {
     i ? "hidden sm:inline" : "inline"
   ), f = d(
     r && ge[r],
-    t,
+    n,
     "focus-visible:outline outline-offset-0"
   );
   return /* @__PURE__ */ p(
@@ -37,20 +37,20 @@ const ge = {
       ref: s,
       type: "button",
       className: f,
-      onClick: (y) => o?.(y),
+      onClick: (N) => o?.(N),
       disabled: l,
       "aria-label": e || m,
       children: [
-        /* @__PURE__ */ n(w, { icon: c }),
-        e && /* @__PURE__ */ n("span", { className: u, children: e }),
-        /* @__PURE__ */ n(w, { icon: a })
+        /* @__PURE__ */ t(w, { icon: c }),
+        e && /* @__PURE__ */ t("span", { className: u, children: e }),
+        /* @__PURE__ */ t(w, { icon: a })
       ]
     }
   );
-}, z = ({ errorText: e }) => e && /* @__PURE__ */ n("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
+}, z = ({ errorText: e }) => e && /* @__PURE__ */ t("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
   fieldTitle: e,
   htmlFor: r,
-  optional: t,
+  optional: n,
   optionalText: s,
   cssClass: o
 }) => e ? /* @__PURE__ */ p(
@@ -63,54 +63,54 @@ const ge = {
     ),
     htmlFor: r,
     children: [
-      /* @__PURE__ */ n("span", { className: "min-h-4", children: e }),
-      t && /* @__PURE__ */ n("span", { className: "ml-1", children: s ?? "(Optional)" })
+      /* @__PURE__ */ t("span", { className: "min-h-4", children: e }),
+      n && /* @__PURE__ */ t("span", { className: "ml-1", children: s ?? "(Optional)" })
     ]
   }
 ) : 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 })
+  info: /* @__PURE__ */ t(V, { size: 24, stroke: 2 }),
+  error: /* @__PURE__ */ t($, { size: 24, stroke: 2 }),
+  warning: /* @__PURE__ */ t(O, { size: 24, stroke: 2 }),
+  success: /* @__PURE__ */ t(G, { size: 24, stroke: 2 })
 }, xe = {
   [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 = ({
+}, Ne = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", je = ({
   variant: e = x.Info,
   message: r,
-  cssClass: t,
-  closable: s = !0,
+  cssClass: n,
+  closable: s = !1,
   onClose: o
 }) => /* @__PURE__ */ p(
   "div",
   {
     role: "alert",
     className: d(
-      ye,
+      Ne,
       xe[e],
-      t
+      n
     ),
     children: [
       /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ n(w, { icon: he[e] }),
-        /* @__PURE__ */ n("div", { className: "text-primary", children: r })
+        /* @__PURE__ */ t(w, { icon: he[e] }),
+        /* @__PURE__ */ t("div", { className: "text-primary", children: r })
       ] }),
-      s && /* @__PURE__ */ n(
+      s && /* @__PURE__ */ t(
         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 }),
+          iconBefore: /* @__PURE__ */ t(X, { size: 16 }),
           onClick: (l) => o?.(l)
         }
       )
     ]
   }
-), Ne = 7, ve = 2, W = ae(null), j = () => {
+), ye = 7, ve = 2, W = ae(null), j = () => {
   const e = ue(W);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
@@ -118,7 +118,7 @@ const he = {
 }, Ce = ({
   initialOpen: e = !1,
   placement: r = "bottom",
-  isTriggerClickable: t = !1,
+  isTriggerClickable: n = !1,
   open: s,
   onOpenChange: o
 } = {}) => {
@@ -128,7 +128,7 @@ const he = {
     onOpenChange: m,
     whileElementsMounted: Q,
     middleware: [
-      Z(Ne + ve),
+      Z(ye + ve),
       q({
         crossAxis: r.includes("-"),
         fallbackAxisSideDirection: "start",
@@ -142,11 +142,11 @@ const he = {
   }), f = ee(u.context, {
     move: !1,
     enabled: s == null,
-    mouseOnly: t,
+    mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), y = re(u.context, {
+  }), N = re(u.context, {
     enabled: s == null
-  }), F = te(u.context), b = ne(u.context, { role: "tooltip" }), g = se([f, y, F, b]);
+  }), F = ne(u.context), b = te(u.context, { role: "tooltip" }), g = se([f, N, F, b]);
   return de(
     () => ({
       open: i,
@@ -161,11 +161,11 @@ const he = {
   children: e,
   ...r
 }) => {
-  const t = Ce(r);
-  return /* @__PURE__ */ n(W.Provider, { value: t, children: e });
-}, Te = E(function({ style: r, ...t }, s) {
+  const n = Ce(r);
+  return /* @__PURE__ */ t(W.Provider, { value: n, children: e });
+}, Te = E(function({ style: r, ...n }, s) {
   const o = j(), l = S([o.refs.setFloating, s]);
-  return o.open ? /* @__PURE__ */ n(oe, { id: "tooltip-portal", children: /* @__PURE__ */ p(
+  return o.open ? /* @__PURE__ */ t(oe, { id: "tooltip-portal", children: /* @__PURE__ */ p(
     "div",
     {
       ref: l,
@@ -173,14 +173,14 @@ const he = {
         ...o.floatingStyles,
         ...r
       },
-      ...o.getFloatingProps(t),
+      ...o.getFloatingProps(n),
       className: d(
         "z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
-        o.getFloatingProps(t).className
+        o.getFloatingProps(n).className
       ),
       children: [
-        t.children,
-        /* @__PURE__ */ n(
+        n.children,
+        /* @__PURE__ */ t(
           le,
           {
             ref: o.arrowRef,
@@ -193,16 +193,16 @@ const he = {
       ]
     }
   ) }) : null;
-}), De = E(function({ children: r, asChild: t = !1, ...s }, o) {
+}), De = E(function({ children: r, asChild: n = !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(
+  return n && pe(r) ? me(
     r,
     l.getReferenceProps({
       ref: i,
       ...s,
       ...r.props
     })
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ t(
     "span",
     {
       ref: i,
@@ -214,13 +214,13 @@ const he = {
 }), k = ({
   hideTooltip: e,
   tooltip: r,
-  children: t,
+  children: n,
   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 }),
-  /* @__PURE__ */ n(
+}) => e || !r ? /* @__PURE__ */ t("span", { className: s, children: n }) : /* @__PURE__ */ p(we, { ...l, children: [
+  /* @__PURE__ */ t(De, { className: d(s, "truncate"), children: n }),
+  /* @__PURE__ */ t(
     Te,
     {
       className: d(
@@ -235,17 +235,17 @@ const he = {
 ] }), ke = ({
   value: e,
   textareaId: r,
-  placeholder: t,
+  placeholder: n,
   cssClass: s = "",
   disabled: o,
   invalid: l,
   readonly: a,
   onChange: c
-}) => /* @__PURE__ */ n(k, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ n(
+}) => /* @__PURE__ */ t(k, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ t(
   "textarea",
   {
     id: r,
-    placeholder: t,
+    placeholder: n,
     value: e || "",
     disabled: o,
     className: d(
@@ -269,16 +269,16 @@ 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("."))) {
+], Ie = (e, r, n, s) => {
+  if ((r === "number" || n !== void 0 || s !== void 0) && !Fe.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 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) {
+    if (n !== 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);
       if (!isNaN(i)) {
-        if (t !== void 0 && i < t) {
+        if (n !== void 0 && i < n) {
           e.preventDefault();
           return;
         }
@@ -292,7 +292,7 @@ const he = {
 }, I = ({
   iconBeforeInput: e,
   iconAfterInput: r,
-  hideBorder: t,
+  hideBorder: n,
   value: s,
   elementId: o,
   placeholder: l = "",
@@ -302,13 +302,13 @@ const he = {
   type: m = "text",
   disabled: u,
   readonly: f,
-  invalid: y,
+  invalid: N,
   onChange: F,
   min: b,
   max: g,
   prefix: R,
   suffix: P,
-  textBeforeInput: N,
+  textBeforeInput: y,
   textAfterInput: v
 }) => {
   const M = (h) => h.target.blur(), H = m === "number" || b !== void 0 || g !== void 0, U = (h) => {
@@ -327,32 +327,32 @@ const he = {
     {
       className: d(
         "dial-input-field flex flex-row items-center justify-between",
-        t ? "dial-input-no-border" : "dial-input",
-        y && "dial-input-error",
+        n ? "dial-input-no-border" : "dial-input",
+        N && "dial-input-error",
         u && "dial-input-disable",
         f && "dial-input-readonly",
-        !N && "pl-1",
+        !y && "pl-1",
         !v && "pr-1",
         c
       ),
       children: [
-        N && /* @__PURE__ */ n(k, { tooltip: N, children: /* @__PURE__ */ n(
+        y && /* @__PURE__ */ t(k, { tooltip: y, children: /* @__PURE__ */ t(
           I,
           {
             hideBorder: !0,
             containerCssClass: "rounded-r-none border-r-0",
             cssClass: "px-2 overflow-hidden overflow-ellipsis dial-small",
-            value: N,
+            value: y,
             disabled: !0,
-            elementId: N + "textBefore"
+            elementId: y + "textBefore"
           }
         ) }),
         R && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
           R
         ] }),
-        /* @__PURE__ */ n(w, { icon: e, className: "pl-2" }),
-        /* @__PURE__ */ n(k, { tooltip: s, triggerClassName: i, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ t(w, { icon: e, className: "pl-2" }),
+        /* @__PURE__ */ t(k, { tooltip: s, triggerClassName: i, children: /* @__PURE__ */ t(
           "input",
           {
             type: m,
@@ -370,12 +370,12 @@ const he = {
             max: g
           }
         ) }),
-        /* @__PURE__ */ n(w, { icon: r, className: "pr-2" }),
+        /* @__PURE__ */ t(w, { 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(
+        v && /* @__PURE__ */ t(k, { tooltip: v, children: /* @__PURE__ */ t(
           I,
           {
             hideBorder: !0,
@@ -392,7 +392,7 @@ const he = {
 }, Re = /^0+\.(\d+)?$/, Pe = /^0+/, L = ({
   fieldTitle: e,
   errorText: r,
-  optional: t,
+  optional: n,
   elementCssClass: s,
   elementContainerCssClass: o,
   elementId: l,
@@ -403,16 +403,16 @@ const he = {
   max: u,
   ...f
 }) => /* @__PURE__ */ p("div", { className: d("flex flex-col", a), children: [
-  /* @__PURE__ */ n(
+  /* @__PURE__ */ t(
     A,
     {
       fieldTitle: e,
-      optional: t,
+      optional: n,
       htmlFor: l
     }
   ),
-  c ? /* @__PURE__ */ n("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ p(K, { children: [
-    /* @__PURE__ */ n(
+  c ? /* @__PURE__ */ t("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ p(K, { children: [
+    /* @__PURE__ */ t(
       I,
       {
         elementId: l,
@@ -424,23 +424,23 @@ const he = {
         ...f
       }
     ),
-    /* @__PURE__ */ n(z, { errorText: r })
+    /* @__PURE__ */ t(z, { errorText: r })
   ] })
 ] }), Le = ({
   onChange: e,
   value: r,
-  min: t,
+  min: n,
   max: s,
   ...o
 }) => {
   const l = (a) => String(a)?.match(Re) ? String(a)?.replace(Pe, "0") : Number(a);
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     L,
     {
       type: "number",
       onChange: (a) => e?.(l(a)),
       value: r,
-      min: t,
+      min: n,
       max: s,
       ...o
     }
@@ -448,58 +448,58 @@ const he = {
 }, Me = ({
   onChange: e,
   ...r
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ t(
   L,
   {
     type: "text",
-    onChange: (t) => e?.(t),
+    onChange: (n) => e?.(n),
     ...r
   }
 ), He = ({
   fieldTitle: e,
   optional: r,
-  elementId: t,
+  elementId: n,
   elementCssClass: s,
   errorText: o,
   ...l
 }) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
-  /* @__PURE__ */ n(
+  /* @__PURE__ */ t(
     A,
     {
       fieldTitle: e,
       optional: r,
-      htmlFor: t
+      htmlFor: n
     }
   ),
-  /* @__PURE__ */ n(
+  /* @__PURE__ */ t(
     ke,
     {
-      textareaId: t,
+      textareaId: n,
       cssClass: s,
       ...l
     }
   ),
-  /* @__PURE__ */ n(z, { errorText: o })
+  /* @__PURE__ */ t(z, { errorText: o })
 ] }), Ue = ({
   title: e,
   switchId: r,
-  isOn: t = !1,
+  isOn: n = !1,
   disabled: s,
   onChange: o
 }) => {
   const l = 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 ? "flex-row-reverse" : "flex-row",
     s ? "pointer-events-none" : "",
-    s ? t ? "bg-controls-disable" : "bg-layer-4" : t ? "bg-accent-primary" : "bg-layer-4"
+    s ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
   ), a = fe(
     (c) => {
-      c.stopPropagation(), o?.(!t);
+      c.stopPropagation(), o?.(!n);
     },
-    [o, t]
+    [o, n]
   );
   return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "input",
       {
         type: "checkbox",
@@ -507,19 +507,19 @@ const he = {
         id: r,
         disabled: s,
         className: "invisible w-0 h-0",
-        checked: t
+        checked: n
       }
     ),
-    /* @__PURE__ */ n("label", { htmlFor: r, className: l, children: /* @__PURE__ */ n(
+    /* @__PURE__ */ t("label", { htmlFor: r, className: l, children: /* @__PURE__ */ t(
       "span",
       {
         className: d(
           "size-3 rounded-full",
-          s ? t ? "bg-controls-disable" : "bg-layer-4" : "bg-controls-enable-primary"
+          s ? n ? "bg-controls-disable" : "bg-layer-4" : "bg-controls-enable-primary"
         )
       }
     ) }),
-    e && /* @__PURE__ */ n("span", { className: "h-[14px] pl-2 small text-primary", children: e })
+    e && /* @__PURE__ */ t("span", { className: "h-[14px] pl-2 small text-primary", children: e })
   ] });
 };
 export {

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}.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{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-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/package.json

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