@epam/ai-dial-ui-kit 0.2.0-rc.0 → 0.2.0-rc.2

package/README.md

@@ -5,7 +5,8 @@
      src="https://avatars.githubusercontent.com/u/1589802?s=200&v=4" 
       />](#)
 
-A comprehensive React-based UI components library specifically designed for building AI-driven applications with modern standards and enterprise-grade quality.
+
+The AI DIAL UI Kit is an production-ready React component library designed to streamline your development process. It features a collection of base components, such as Buttons, Inputs, Dropdowns, and more — allowing you to effortlessly reuse elements, quick and easy.
 
 [![npm version](https://badge.fury.io/js/@epam%2Fai-dial-ui-kit.svg)](https://badge.fury.io/js/@epam%2Fai-dial-ui-kit)
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
@@ -14,7 +15,7 @@ A comprehensive React-based UI components library specifically designed for buil
 
 ## Table of Contents
 
-- [✨ Features](#-features)
+- [✨ Highlights](#-highlights)
 - [📖 Documentation](#-documentation)
 - [🚀 Quick Start](#-quick-start)
   - [Prerequisites](#prerequisites)
@@ -30,22 +31,21 @@ A comprehensive React-based UI components library specifically designed for buil
   - [Production Build](#production-build)
 - [🚀 Usage in Projects](#-usage-in-projects)
   - [Next.js Integration](#nextjs-integration)
-  - [Vite Integration](#vite-integration)
   - [Tree Shaking](#tree-shaking)
 - [🤝 Contributing](#-contributing)
 - [🔒 Security](#-security)
 - [📄 License](#-license)
 - [🌟 Related Projects](#-related-projects)
 
-## ✨ Features
+## ✨ Highlights
 
-- 🎨 **Unified User Experience**: Consistent design language for all AI DIAL applications
+- 🎨 **Unified User Experience**: Ui Kit usage helps with design consistency across AI DIAL applications
 - ⚡ **Modern Stack**: Built with latest React, TypeScript, Vite, and Tailwind CSS
 - 🎨 **Highly Customizable**: Deep theming capabilities with CSS custom properties
 - 🧪 **Well-Tested**: Comprehensive test coverage (70%+) with Vitest and React Testing Library
-- 📚 **Storybook Ready**: Interactive component documentation and development playground
-- 🛠️ **Developer Experience**: ESLint, Prettier, Husky for maintainable code quality
-- 📦 **Distribution Ready**: NPM package ready for easy integration
+- 📚 **Storybook Ready**: Includes interactive component documentation and development playground
+- 🛠️ **Developer Experience**: Leverage ESLint, Prettier, Husky for maintainable code quality
+- 📦 **Distribution Ready**: Deployed as NPM package ready for easy integration
 
 ## 📖 Documentation
 
@@ -92,9 +92,9 @@ function App() {
 
 ### Development Setup
 
-1. **Fork and Clone**
+1. **Clone the repo**
    ```bash
-   git clone https://github.com/your-username/ai-dial-ui-kit.git
+   git clone https://github.com/epam/ai-dial-ui-kit.git
    cd ai-dial-ui-kit
    ```
 
@@ -163,7 +163,7 @@ Full list of variables is available [here](tailwind.config.js)
 
 ## 📖 Storybook
 
-Storybook is a frontend workshop for building UI components and pages in isolation.
+Storybook is a handy library for documenting and developing of UI components.
 
 ### Stories
 To run fully interactive storybook:
@@ -248,6 +248,7 @@ export default function Home() {
     </div>
   );
 }
+```
 </details>
 
 
@@ -272,7 +273,6 @@ We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
 - Testing requirements
 - Pull request process
 
-
 ## 🔒 Security
 
 If you discover a security vulnerability, please refer to our [Security Policy](./SECURITY.md).

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

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

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

@@ -1,138 +1,182 @@
-import { jsx as l, jsxs as m, Fragment as _ } from "react/jsx-runtime";
-import d from "classnames";
-import { useFloating as K, offset as M, flip as z, shift as G, arrow as O, autoUpdate as $, useHover as Y, useFocus as Z, useDismiss as q, useRole as B, useInteractions as J, useMergeRefs as P, FloatingPortal as Q, FloatingArrow as X } from "@floating-ui/react";
-import { createContext as ee, useState as te, useRef as ne, useMemo as re, useContext as le, forwardRef as E, isValidElement as se, cloneElement as oe, useCallback as ae } from "react";
-const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { className: d("flex-shrink-0", t), children: e }) : null, ye = ({
+import { jsx as t, jsxs as p, Fragment as _ } from "react/jsx-runtime";
+import u from "classnames";
+import { IconCircleCheck as K, IconAlertTriangle as V, IconAlertCircle as B, IconInfoCircle as G, IconX as O } from "@tabler/icons-react";
+import { useFloating as $, offset as X, flip as Y, shift as Z, arrow as q, autoUpdate as J, useHover as Q, useFocus as ee, useDismiss as re, useRole as ne, useInteractions as te, useMergeRefs as E, FloatingPortal as se, FloatingArrow as oe } from "@floating-ui/react";
+import { createContext as le, useState as ae, useRef as ie, useMemo as ce, useContext as ue, forwardRef as P, isValidElement as de, cloneElement as pe, useCallback as me } from "react";
+const C = ({ icon: e, className: r }) => e ? /* @__PURE__ */ t("span", { className: u("flex-shrink-0", r), children: e }) : null, fe = ({
   title: e,
-  cssClass: t,
+  cssClass: r,
   ref: n,
-  onClick: r,
-  disable: s,
-  iconAfter: o,
+  onClick: s,
+  disable: o,
+  iconAfter: l,
   iconBefore: a,
   hideTitleOnMobile: c,
   ariaLabel: i
 }) => {
-  const p = d(
+  const m = u(
     "dial-small-semi",
-    o ? "mr-2" : "",
+    l ? "mr-2" : "",
     a ? "ml-2" : "",
     c ? "hidden sm:inline" : "inline"
-  ), u = d(
-    t,
+  ), d = u(
+    r,
     "focus-visible:outline outline-offset-0"
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "button",
     {
       ref: n,
       type: "button",
-      className: u,
-      onClick: (f) => r?.(f),
-      disabled: s,
+      className: d,
+      onClick: (f) => s?.(f),
+      disabled: o,
       "aria-label": e || i,
       children: [
-        /* @__PURE__ */ l(y, { icon: a }),
-        e && /* @__PURE__ */ l("span", { className: p, children: e }),
-        /* @__PURE__ */ l(y, { icon: o })
+        /* @__PURE__ */ t(C, { icon: a }),
+        e && /* @__PURE__ */ t("span", { className: m, children: e }),
+        /* @__PURE__ */ t(C, { icon: l })
       ]
     }
   );
-}, S = ({ errorText: e }) => e && /* @__PURE__ */ l("span", { className: "text-error dial-tiny mt-1", children: e }), A = ({
+}, S = ({ errorText: e }) => e && /* @__PURE__ */ t("span", { className: "text-error dial-tiny mt-1", children: e }), z = ({
   fieldTitle: e,
-  htmlFor: t,
+  htmlFor: r,
   optional: n,
-  optionalText: r,
-  cssClass: s
-}) => e ? /* @__PURE__ */ m(
+  optionalText: s,
+  cssClass: o
+}) => e ? /* @__PURE__ */ p(
   "label",
   {
-    className: d(
+    className: u(
       "dial-tiny text-secondary",
-      s,
-      !s?.includes("mb") && "mb-2"
+      o,
+      !o?.includes("mb") && "mb-2"
     ),
-    htmlFor: t,
+    htmlFor: r,
     children: [
-      /* @__PURE__ */ l("span", { className: "min-h-4", children: e }),
-      n && /* @__PURE__ */ l("span", { className: "ml-1", children: r ?? "(Optional)" })
+      /* @__PURE__ */ t("span", { className: "min-h-4", children: e }),
+      n && /* @__PURE__ */ t("span", { className: "ml-1", children: s ?? "(Optional)" })
     ]
   }
-) : null, ie = 7, ce = 2, I = ee(null), V = () => {
-  const e = le(I);
+) : null;
+var x = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e))(x || {});
+const ge = {
+  info: /* @__PURE__ */ t(G, { size: 24 }),
+  error: /* @__PURE__ */ t(B, { size: 24 }),
+  warning: /* @__PURE__ */ t(V, { size: 24 }),
+  success: /* @__PURE__ */ t(K, { size: 24 })
+}, he = {
+  [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"
+}, be = "inline-flex items-center justify-between gap-2 px-3 py-2 border border-solid shadow text-sm w-auto rounded", Ae = ({
+  variant: e = x.Info,
+  message: r,
+  cssClass: n,
+  closable: s = !0,
+  onClose: o
+}) => /* @__PURE__ */ p(
+  "div",
+  {
+    role: "alert",
+    className: u(
+      be,
+      he[e],
+      n
+    ),
+    children: [
+      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ t(C, { icon: ge[e] }),
+        /* @__PURE__ */ t("div", { className: "text-primary", children: r })
+      ] }),
+      s && /* @__PURE__ */ t(
+        fe,
+        {
+          cssClass: "ml-2 text-secondary hover:text-primary ml-2 text-secondary hover:text-primary ",
+          ariaLabel: "Close alert",
+          iconBefore: /* @__PURE__ */ t(O, { size: 16 }),
+          onClick: (l) => o?.(l)
+        }
+      )
+    ]
+  }
+), xe = 7, Ne = 2, A = le(null), W = () => {
+  const e = ue(A);
   if (e == null)
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   return e;
-}, ue = ({
+}, ve = ({
   initialOpen: e = !1,
-  placement: t = "bottom",
+  placement: r = "bottom",
   isTriggerClickable: n = !1,
-  open: r,
-  onOpenChange: s
+  open: s,
+  onOpenChange: o
 } = {}) => {
-  const [o, a] = te(e), c = ne(null), i = r ?? o, p = s ?? a, u = K({
-    placement: t,
+  const [l, a] = ae(e), c = ie(null), i = s ?? l, m = o ?? a, d = $({
+    placement: r,
     open: i,
-    onOpenChange: p,
-    whileElementsMounted: $,
+    onOpenChange: m,
+    whileElementsMounted: J,
     middleware: [
-      M(ie + ce),
-      z({
-        crossAxis: t.includes("-"),
+      X(xe + Ne),
+      Y({
+        crossAxis: r.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: 5
       }),
-      G({ padding: 5 }),
-      O({
+      Z({ padding: 5 }),
+      q({
         element: c
       })
     ]
-  }), f = Y(u.context, {
+  }), f = Q(d.context, {
     move: !1,
-    enabled: r == null,
+    enabled: s == null,
     mouseOnly: n,
     delay: { open: 500, close: 0 }
-  }), D = Z(u.context, {
-    enabled: r == null
-  }), T = q(u.context), g = B(u.context, { role: "tooltip" }), h = J([f, D, T, g]);
-  return re(
+  }), T = ee(d.context, {
+    enabled: s == null
+  }), k = re(d.context), h = ne(d.context, { role: "tooltip" }), g = te([f, T, k, h]);
+  return ce(
     () => ({
       open: i,
-      setOpen: p,
+      setOpen: m,
       arrowRef: c,
-      ...h,
-      ...u
+      ...g,
+      ...d
     }),
-    [i, p, h, u]
+    [i, m, g, d]
   );
-}, de = ({
+}, we = ({
   children: e,
-  ...t
+  ...r
 }) => {
-  const n = ue(t);
-  return /* @__PURE__ */ l(I.Provider, { value: n, children: e });
-}, pe = E(function({ style: t, ...n }, r) {
-  const s = V(), o = P([s.refs.setFloating, r]);
-  return s.open ? /* @__PURE__ */ l(Q, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const n = ve(r);
+  return /* @__PURE__ */ t(A.Provider, { value: n, children: e });
+}, Ce = P(function({ style: r, ...n }, s) {
+  const o = W(), l = E([o.refs.setFloating, s]);
+  return o.open ? /* @__PURE__ */ t(se, { id: "tooltip-portal", children: /* @__PURE__ */ p(
     "div",
     {
-      ref: o,
+      ref: l,
       style: {
-        ...s.floatingStyles,
-        ...t
+        ...o.floatingStyles,
+        ...r
       },
-      ...s.getFloatingProps(n),
-      className: d(
+      ...o.getFloatingProps(n),
+      className: u(
         "z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
-        s.getFloatingProps(n).className
+        o.getFloatingProps(n).className
       ),
       children: [
         n.children,
-        /* @__PURE__ */ l(
-          X,
+        /* @__PURE__ */ t(
+          oe,
           {
-            ref: s.arrowRef,
-            context: s.context,
+            ref: o.arrowRef,
+            context: o.context,
             fill: "currentColor",
             strokeWidth: 1,
             className: "stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"
@@ -141,71 +185,71 @@ const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { classNa
       ]
     }
   ) }) : null;
-}), me = E(function({ children: t, asChild: n = !1, ...r }, s) {
-  const o = V(), c = t && typeof t == "object" && "ref" in t && t.ref !== void 0 ? t.ref : void 0, i = P([o.refs.setReference, s, c]);
-  return n && se(t) ? oe(
-    t,
-    o.getReferenceProps({
+}), ye = P(function({ children: r, asChild: n = !1, ...s }, o) {
+  const l = W(), c = r && typeof r == "object" && "ref" in r && r.ref !== void 0 ? r.ref : void 0, i = E([l.refs.setReference, o, c]);
+  return n && de(r) ? pe(
+    r,
+    l.getReferenceProps({
       ref: i,
-      ...r,
-      ...t.props
+      ...s,
+      ...r.props
     })
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ t(
     "span",
     {
       ref: i,
-      ...o.getReferenceProps(r),
-      className: r.className ?? "dial-tooltip-trigger text-left",
-      children: t
+      ...l.getReferenceProps(s),
+      className: s.className ?? "dial-tooltip-trigger text-left",
+      children: r
     }
   );
-}), C = ({
+}), D = ({
   hideTooltip: e,
-  tooltip: t,
+  tooltip: r,
   children: n,
-  triggerClassName: r,
-  contentClassName: s,
-  ...o
-}) => e || !t ? /* @__PURE__ */ l("span", { className: r, children: n }) : /* @__PURE__ */ m(de, { ...o, children: [
-  /* @__PURE__ */ l(me, { className: d(r, "truncate"), children: n }),
-  /* @__PURE__ */ l(
-    pe,
+  triggerClassName: s,
+  contentClassName: o,
+  ...l
+}) => e || !r ? /* @__PURE__ */ t("span", { className: s, children: n }) : /* @__PURE__ */ p(we, { ...l, children: [
+  /* @__PURE__ */ t(ye, { className: u(s, "truncate"), children: n }),
+  /* @__PURE__ */ t(
+    Ce,
     {
-      className: d(
+      className: u(
         "text-primary",
-        s,
+        o,
         "max-w-[300px]",
-        (e || !t) && "hidden"
+        (e || !r) && "hidden"
       ),
-      children: t
+      children: r
     }
   )
-] }), fe = ({
+] }), De = ({
   value: e,
-  textareaId: t,
+  textareaId: r,
   placeholder: n,
-  cssClass: r = "",
-  disabled: s,
-  invalid: o,
+  cssClass: s = "",
+  disabled: o,
+  invalid: l,
   readonly: a,
   onChange: c
-}) => /* @__PURE__ */ l(C, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ l(
+}) => /* @__PURE__ */ t(D, { tooltip: e, triggerClassName: "flex", children: /* @__PURE__ */ t(
   "textarea",
   {
-    id: t,
+    id: r,
     placeholder: n,
     value: e || "",
-    disabled: s,
-    className: d(
+    disabled: o,
+    className: u(
       "dial-textarea dial-input",
-      o ? "dial-input-error" : "",
-      s && "dial-input-disable",
+      l ? "dial-input-error" : "",
+      o && "dial-input-disable",
       a && "dial-input-readonly",
-      r
+      s
     ),
     onChange: (i) => !a && c?.(i.currentTarget.value)
   }
-) }), he = [
+) }), Te = [
   "ArrowLeft",
   "ArrowRight",
   "ArrowUp",
@@ -217,20 +261,20 @@ const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { classNa
   "Escape",
   "Home",
   "End"
-], ge = (e, t, n, r) => {
-  if ((t === "number" || n !== void 0 || r !== void 0) && !he.includes(e.key) && !(e.key === "-" && e.currentTarget.selectionStart === 0 && (n === void 0 || n < 0)) && !(e.key === "." && t === "number" && !e.currentTarget.value.includes("."))) {
+], ke = (e, r, n, s) => {
+  if ((r === "number" || n !== void 0 || s !== void 0) && !Te.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 (n !== void 0 || r !== void 0) {
-      const o = e.currentTarget.value, a = e.currentTarget.selectionStart || 0, c = o.slice(0, a) + e.key + o.slice(a), i = parseFloat(c);
+    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 (n !== void 0 && i < n) {
           e.preventDefault();
           return;
         }
-        if (r !== void 0 && i > r) {
+        if (s !== void 0 && i > s) {
           e.preventDefault();
           return;
         }
@@ -239,52 +283,52 @@ const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { classNa
   }
 }, F = ({
   iconBeforeInput: e,
-  iconAfterInput: t,
+  iconAfterInput: r,
   hideBorder: n,
-  value: r,
-  elementId: s,
-  placeholder: o = "",
+  value: s,
+  elementId: o,
+  placeholder: l = "",
   cssClass: a = "",
   containerCssClass: c,
   tooltipTriggerClassName: i,
-  type: p = "text",
-  disabled: u,
+  type: m = "text",
+  disabled: d,
   readonly: f,
-  invalid: D,
-  onChange: T,
-  min: g,
-  max: h,
-  prefix: k,
+  invalid: T,
+  onChange: k,
+  min: h,
+  max: g,
+  prefix: I,
   suffix: R,
   textBeforeInput: N,
-  textAfterInput: x
+  textAfterInput: v
 }) => {
-  const j = (b) => b.target.blur(), H = p === "number" || g !== void 0 || h !== void 0, L = (b) => {
-    ge(b, p, g, h);
+  const L = (b) => b.target.blur(), H = m === "number" || h !== void 0 || g !== void 0, M = (b) => {
+    ke(b, m, h, g);
   }, U = (b) => {
-    const v = b.currentTarget.value;
-    if (H && v !== "") {
-      const w = parseFloat(v);
-      if (isNaN(w) && v !== "-" && v !== "." || !isNaN(w) && (g !== void 0 && w < g || h !== void 0 && w > h))
+    const w = b.currentTarget.value;
+    if (H && w !== "") {
+      const y = parseFloat(w);
+      if (isNaN(y) && w !== "-" && w !== "." || !isNaN(y) && (h !== void 0 && y < h || g !== void 0 && y > g))
         return;
     }
-    T?.(v);
+    k?.(w);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: d(
+      className: u(
         "dial-input-field flex flex-row items-center justify-between",
         n ? "dial-input-no-border" : "dial-input",
-        D && "dial-input-error",
-        u && "dial-input-disable",
+        T && "dial-input-error",
+        d && "dial-input-disable",
         f && "dial-input-readonly",
         !N && "pl-1",
-        !x && "pr-1",
+        !v && "pr-1",
         c
       ),
       children: [
-        N && /* @__PURE__ */ l(C, { tooltip: N, children: /* @__PURE__ */ l(
+        N && /* @__PURE__ */ t(D, { tooltip: N, children: /* @__PURE__ */ t(
           F,
           {
             hideBorder: !0,
@@ -295,191 +339,193 @@ const y = ({ icon: e, className: t }) => e ? /* @__PURE__ */ l("span", { classNa
             elementId: N + "textBefore"
           }
         ) }),
-        k && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pl-2", children: [
+        I && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pl-2", children: [
           " ",
-          k
+          I
         ] }),
-        /* @__PURE__ */ l(y, { icon: e, className: "pl-2" }),
-        /* @__PURE__ */ l(C, { tooltip: r, triggerClassName: i, children: /* @__PURE__ */ l(
+        /* @__PURE__ */ t(C, { icon: e, className: "pl-2" }),
+        /* @__PURE__ */ t(D, { tooltip: s, triggerClassName: i, children: /* @__PURE__ */ t(
           "input",
           {
-            type: p,
+            type: m,
             autoComplete: "off",
-            id: s,
-            placeholder: o,
-            value: r ?? "",
-            title: r ? String(r) : "",
-            disabled: u,
-            className: d("border-0 bg-transparent px-2", a),
+            id: o,
+            placeholder: l,
+            value: s ?? "",
+            title: s ? String(s) : "",
+            disabled: d,
+            className: u("border-0 bg-transparent px-2", a),
             onChange: (b) => !f && U?.(b),
-            onKeyDown: L,
-            onWheel: j,
-            min: g,
-            max: h
+            onKeyDown: M,
+            onWheel: L,
+            min: h,
+            max: g
           }
         ) }),
-        /* @__PURE__ */ l(y, { icon: t, className: "pr-2" }),
-        R && /* @__PURE__ */ m("p", { className: "text-secondary dial-small pr-2", children: [
+        /* @__PURE__ */ t(C, { icon: r, className: "pr-2" }),
+        R && /* @__PURE__ */ p("p", { className: "text-secondary dial-small pr-2", children: [
           " ",
           R
         ] }),
-        x && /* @__PURE__ */ l(C, { tooltip: x, children: /* @__PURE__ */ l(
+        v && /* @__PURE__ */ t(D, { tooltip: v, children: /* @__PURE__ */ t(
           F,
           {
             hideBorder: !0,
             containerCssClass: "rounded-l-none border-l-0",
             cssClass: "px-2",
-            value: x,
+            value: v,
             disabled: !0,
-            elementId: x + "textAfter"
+            elementId: v + "textAfter"
           }
         ) })
       ]
     }
   );
-}, be = /^0+\.(\d+)?$/, Ne = /^0+/, W = ({
+}, Fe = /^0+\.(\d+)?$/, Ie = /^0+/, j = ({
   fieldTitle: e,
-  errorText: t,
+  errorText: r,
   optional: n,
-  elementCssClass: r,
-  elementContainerCssClass: s,
-  elementId: o,
+  elementCssClass: s,
+  elementContainerCssClass: o,
+  elementId: l,
   containerCssClass: a,
   readonly: c,
   defaultEmptyText: i,
-  min: p,
-  max: u,
+  min: m,
+  max: d,
   ...f
-}) => /* @__PURE__ */ m("div", { className: d("flex flex-col", a), children: [
-  /* @__PURE__ */ l(
-    A,
+}) => /* @__PURE__ */ p("div", { className: u("flex flex-col", a), children: [
+  /* @__PURE__ */ t(
+    z,
     {
       fieldTitle: e,
       optional: n,
-      htmlFor: o
+      htmlFor: l
     }
   ),
-  c ? /* @__PURE__ */ l("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ m(_, { children: [
-    /* @__PURE__ */ l(
+  c ? /* @__PURE__ */ t("span", { children: f.value || (i ?? "None") }) : /* @__PURE__ */ p(_, { children: [
+    /* @__PURE__ */ t(
       F,
       {
-        elementId: o,
-        cssClass: r,
-        containerCssClass: s,
-        invalid: t != null,
-        min: p,
-        max: u,
+        elementId: l,
+        cssClass: s,
+        containerCssClass: o,
+        invalid: r != null,
+        min: m,
+        max: d,
         ...f
       }
     ),
-    /* @__PURE__ */ l(S, { errorText: t })
+    /* @__PURE__ */ t(S, { errorText: r })
   ] })
-] }), De = ({
+] }), We = ({
   onChange: e,
-  value: t,
+  value: r,
   min: n,
-  max: r,
-  ...s
+  max: s,
+  ...o
 }) => {
-  const o = (a) => String(a)?.match(be) ? String(a)?.replace(Ne, "0") : Number(a);
-  return /* @__PURE__ */ l(
-    W,
+  const l = (a) => String(a)?.match(Fe) ? String(a)?.replace(Ie, "0") : Number(a);
+  return /* @__PURE__ */ t(
+    j,
     {
       type: "number",
-      onChange: (a) => e?.(o(a)),
-      value: t,
+      onChange: (a) => e?.(l(a)),
+      value: r,
       min: n,
-      max: r,
-      ...s
+      max: s,
+      ...o
     }
   );
-}, Te = ({
+}, je = ({
   onChange: e,
-  ...t
-}) => /* @__PURE__ */ l(
-  W,
+  ...r
+}) => /* @__PURE__ */ t(
+  j,
   {
     type: "text",
     onChange: (n) => e?.(n),
-    ...t
+    ...r
   }
-), Fe = ({
+), Le = ({
   fieldTitle: e,
-  optional: t,
+  optional: r,
   elementId: n,
-  elementCssClass: r,
-  errorText: s,
-  ...o
-}) => /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
-  /* @__PURE__ */ l(
-    A,
+  elementCssClass: s,
+  errorText: o,
+  ...l
+}) => /* @__PURE__ */ p("div", { className: "flex flex-col", children: [
+  /* @__PURE__ */ t(
+    z,
     {
       fieldTitle: e,
-      optional: t,
+      optional: r,
       htmlFor: n
     }
   ),
-  /* @__PURE__ */ l(
-    fe,
+  /* @__PURE__ */ t(
+    De,
     {
       textareaId: n,
-      cssClass: r,
-      ...o
+      cssClass: s,
+      ...l
     }
   ),
-  /* @__PURE__ */ l(S, { errorText: s })
-] }), ke = ({
+  /* @__PURE__ */ t(S, { errorText: o })
+] }), He = ({
   title: e,
-  switchId: t,
+  switchId: r,
   isOn: n = !1,
-  disabled: r,
-  onChange: s
+  disabled: s,
+  onChange: o
 }) => {
-  const o = d(
+  const l = u(
     "flex w-[36px] h-[18px]  cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
     n ? "flex-row-reverse" : "flex-row",
-    r ? "pointer-events-none" : "",
-    r ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
-  ), a = ae(
+    s ? "pointer-events-none" : "",
+    s ? n ? "bg-controls-disable" : "bg-layer-4" : n ? "bg-accent-primary" : "bg-layer-4"
+  ), a = me(
     (c) => {
-      c.stopPropagation(), s?.(!n);
+      c.stopPropagation(), o?.(!n);
     },
-    [s, n]
+    [o, n]
   );
-  return /* @__PURE__ */ m("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ p("div", { className: "flex flex-row items-center", children: [
+    /* @__PURE__ */ t(
       "input",
       {
         type: "checkbox",
         onChange: a,
-        id: t,
-        disabled: r,
+        id: r,
+        disabled: s,
         className: "invisible w-0 h-0",
         checked: n
       }
     ),
-    /* @__PURE__ */ l("label", { htmlFor: t, className: o, children: /* @__PURE__ */ l(
+    /* @__PURE__ */ t("label", { htmlFor: r, className: l, children: /* @__PURE__ */ t(
       "span",
       {
-        className: d(
+        className: u(
           "size-3 rounded-full",
-          r ? n ? "bg-controls-disable" : "bg-layer-4" : "bg-controls-enable-primary"
+          s ? n ? "bg-controls-disable" : "bg-layer-4" : "bg-controls-enable-primary"
         )
       }
     ) }),
-    e && /* @__PURE__ */ l("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 {
-  ye as DialButton,
+  x as AlertVariant,
+  Ae as DialAlert,
+  fe as DialButton,
   S as DialErrorText,
-  A as DialFieldLabel,
-  y as DialIcon,
+  z as DialFieldLabel,
+  C as DialIcon,
   F as DialInput,
-  De as DialNumberInputField,
-  ke as DialSwitch,
-  Fe as DialTextAreaField,
-  Te as DialTextInputField,
-  fe as DialTextarea,
-  C as DialTooltip
+  We as DialNumberInputField,
+  He as DialSwitch,
+  Le as DialTextAreaField,
+  je as DialTextInputField,
+  De as DialTextarea,
+  D 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;font-size:14px;line-height:16px}.dial-small-semi{font-weight:400;font-size:14px;line-height:16px}.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}.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-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-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-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-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-transparent{background-color:transparent}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-4{padding:1rem}.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-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.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}}.focus-visible\:outline:focus-visible{outline-style:solid}@media (min-width:640px){.sm\:inline{display:inline}}
+.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}}

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

@@ -0,0 +1,42 @@
+import { FC, ReactNode, MouseEvent } from 'react';
+import { AlertVariant } from '../../types/alert';
+export interface DialAlertProps {
+    variant?: AlertVariant;
+    message: string | ReactNode;
+    cssClass?: string;
+    closable?: boolean;
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * A contextual feedback component for displaying important messages.
+ *
+ * Renders a colored container with an icon, message text, and an optional
+ * close button.
+ *
+ * @example
+ * ```tsx
+ * <DialAlert
+ *   variant="info"
+ *   message="This is an info alert."
+ * />
+ *
+ * <DialAlert
+ *   variant="success"
+ *   message="Changes saved successfully."
+ *   onClose={(e) => console.log('closed', e)}
+ * />
+ *
+ * <DialAlert
+ *   variant="error"
+ *   closable={false}
+ *   message="Something went wrong."
+ * />
+ * ```
+ *
+ * @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 [onClose] - Callback fired when the close button is clicked
+ */
+export declare const DialAlert: FC<DialAlertProps>;

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

@@ -0,0 +1,5 @@
+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";

package/dist/src/components/Tooltip/TooltipContext.d.ts

@@ -28,10 +28,10 @@ export declare const useTooltipContext: () => {
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        placement: Placement;
-        strategy: import('@floating-ui/utils').Strategy;
         x: number;
         y: number;
+        placement: Placement;
+        strategy: import('@floating-ui/utils').Strategy;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;
@@ -75,10 +75,10 @@ export declare const useTooltip: ({ initialOpen, placement, isTriggerClickable,
         floating: HTMLElement | null;
     } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     context: {
-        placement: Placement;
-        strategy: import('@floating-ui/utils').Strategy;
         x: number;
         y: number;
+        placement: Placement;
+        strategy: import('@floating-ui/utils').Strategy;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         isPositioned: boolean;
         update: () => void;

package/dist/src/index.d.ts

@@ -2,6 +2,7 @@ export { DialButton } from './components/Button/Button';
 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 { DialTextarea } from './components/Textarea/Textarea';
 export { DialTextAreaField } from './components/TextAreaField/TextAreaField';
 export { DialTooltip } from './components/Tooltip/Tooltip';
@@ -9,3 +10,4 @@ export { DialSwitch } from './components/Switch/Switch';
 export { DialInput } from './components/Input/Input';
 export { DialNumberInputField } from './components/InputField/InputField';
 export { DialTextInputField } from './components/InputField/InputField';
+export { AlertVariant } from './types/alert';

package/dist/src/types/alert.d.ts

@@ -0,0 +1,6 @@
+export declare enum AlertVariant {
+    Info = "info",
+    Success = "success",
+    Warning = "warning",
+    Error = "error"
+}

package/package.json

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