@epam/ai-dial-ui-kit 0.2.0-rc.25 → 0.2.0-rc.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/dial-ui-kit.cjs.js +1 -1
  2. package/dist/dial-ui-kit.es.js +1 -1
  3. package/dist/index.css +1 -1
  4. package/package.json +1 -1
package/dist/dial-ui-kit.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("classnames"),b=require("@tabler/icons-react"),j=require("react"),p=require("@floating-ui/react"),W=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),B=({fieldTitle:e,htmlFor:r,optional:t,optionalText:a,cssClass:n})=>e?s.jsxs("label",{className:c("dial-tiny text-secondary",n,!n?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:a??"(Optional)"})]}):null,D=({icon:e,className:r})=>e?s.jsx("span",{className:c("flex-shrink-0",r),children:e}):null;var N=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(N||{});const te={[N.Primary]:"dial-primary-button",[N.Secondary]:"dial-secondary-button",[N.Tertiary]:"dial-tertiary-button",[N.Danger]:"dial-danger-button"},F=({title:e,variant:r,cssClass:t,textCssClass:a,ref:n,onClick:l,disable:o,iconAfter:u,iconBefore:d,hideTitleOnMobile:i,ariaLabel:x})=>{const f=c("dial-small-semi",u?"mr-2":"",d?"ml-2":"",i?"hidden sm:inline":"inline",a),h=c(r&&te[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:m=>l?.(m),disabled:o,"aria-label":e||x,children:[s.jsx(D,{icon:d}),e&&s.jsx("span",{className:f,children:e}),s.jsx(D,{icon:u})]})};var S=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(S||{});const ne={info:s.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(b.IconCircleCheck,{size:24,stroke:2})},ae={[S.Info]:"bg-info border-info text-info",[S.Success]:"bg-success border-success text-success",[S.Warning]:"bg-warning border-warning text-warning",[S.Error]:"bg-error border-error text-error"},le="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",oe=({variant:e=S.Info,message:r,cssClass:t,closable:a=!1,onClose:n})=>s.jsxs("div",{role:"alert",className:c(le,ae[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(D,{icon:ne[e]}),s.jsx("div",{className:"text-primary",children:r})]}),a&&s.jsx(F,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(b.IconX,{size:16}),onClick:l=>n?.(l)})]}),ie="flex items-center justify-center text-secondary",ce="shrink-0 grow-0 basis-auto animate-spin-steps",H=({size:e=18,cssClass:r,iconClass:t,fullWidth:a=!0,ariaLabel:n="Loading"})=>s.jsx("div",{role:"status","aria-label":n,className:c({[ie]:!0,"w-full h-full":a,[r||""]:!!r}),children:s.jsx(D,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:c(ce,t)})})}),de=7,ue=2,q=j.createContext(null),$=()=>{const e=j.useContext(q);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},xe=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:a,onOpenChange:n}={})=>{const[l,o]=j.useState(e),u=j.useRef(null),d=a??l,i=n??o,x=p.useFloating({placement:r,open:d,onOpenChange:i,whileElementsMounted:p.autoUpdate,middleware:[p.offset(de+ue),p.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:u})]}),f=p.useHover(x.context,{move:!1,enabled:a==null,mouseOnly:t,delay:{open:500,close:0}}),h=p.useFocus(x.context,{enabled:a==null}),m=p.useDismiss(x.context),y=p.useRole(x.context,{role:"tooltip"}),g=p.useInteractions([f,h,m,y]);return j.useMemo(()=>({open:d,setOpen:i,arrowRef:u,...g,...x}),[d,i,g,x])},me=({children:e,...r})=>{const t=xe(r);return s.jsx(q.Provider,{value:t,children:e})},pe=j.forwardRef(function({style:r,...t},a){const n=$(),l=p.useMergeRefs([n.refs.setFloating,a]);return n.open?s.jsx(p.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...n.floatingStyles,...r},...n.getFloatingProps(t),className:c("z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",n.getFloatingProps(t).className),children:[t.children,s.jsx(p.FloatingArrow,{ref:n.arrowRef,context:n.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),fe=j.forwardRef(function({children:r,asChild:t=!1,...a},n){const l=$(),u=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,d=p.useMergeRefs([l.refs.setReference,n,u]);return t&&j.isValidElement(r)?j.cloneElement(r,l.getReferenceProps({ref:d,...a,...r.props})):s.jsx("span",{ref:d,...l.getReferenceProps(a),className:a.className??"dial-tooltip-trigger text-left",children:r})}),O=({hideTooltip:e,tooltip:r,children:t,triggerClassName:a,contentClassName:n,...l})=>s.jsxs(me,{...l,children:[s.jsx(fe,{className:c(a,"truncate"),children:t}),s.jsx(pe,{className:c("text-primary",n,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),G=18,T={size:G,stroke:2},he=({label:e,id:r,checked:t,indeterminate:a,disabled:n,ariaLabel:l,onChange:o})=>{const u=j.useCallback(x=>{x.stopPropagation(),o?.(x.target.checked,r)},[o,r]),d=c("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,n?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),i=c("mr-2 border rounded",n?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:r,children:[t&&(a?s.jsx(b.IconMinus,{className:i,...T}):s.jsx(b.IconCheck,{className:i,...T})),e&&s.jsx(O,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:s.jsx("p",{className:"text-primary w-full truncate",children:e})}),s.jsx("input",{type:"checkbox",onChange:u,id:r,checked:t,"aria-checked":a?"mixed":t,"aria-disabled":n||void 0,"aria-label":e?void 0:l,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const ge=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"border-accent-secondary text-primary";case v.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case v.VALID:return"border-primary text-white";case v.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},je=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-layer-4"}},be=({step:e,index:r,currentStep:t,onChangeStep:a})=>{const n="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",l="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",o=()=>t===e.id&&e.status===v.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===v.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:c(n,ge(e,t)),onClick:()=>a(e.id),children:[s.jsx("span",{className:c(l,je(e,t)),children:o()}),s.jsx("span",{children:e.name})]})},Ce=({steps:e,currentStep:r,onChangeStep:t})=>{const a=n=>{const l=e.findIndex(u=>u.id===r),o=e.findIndex(u=>u.id===n);(n!==r&&e[l].status===v.VALID||o<l)&&t(n)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((n,l)=>s.jsx(be,{currentStep:r,onChangeStep:a,step:n,index:l},n.id))})},U=({name:e,value:r,title:t,description:a,checked:n=!1,inputId:l,cssClass:o,labelCssClass:u,disabled:d,onChange:i,descriptionCssClass:x})=>{const f=`${l}-desc`,h=c("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=c("cursor-pointer dial-input-radio",t&&"mr-2",o),y=c("flex flex-col",!!a&&"mb-2"),g=c("dial-tiny mt-2 ml-[26px] text-secondary",x),w=I=>{d||I.target.checked&&i?.(r)};return s.jsxs("div",{className:y,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:l,name:e,value:r,checked:n,disabled:d,"aria-describedby":n&&a?f:void 0,className:m,onChange:w}),t?s.jsx("label",{className:h,htmlFor:l,children:t}):null]}),n&&a&&s.jsx("div",{id:f,className:g,children:a})]})};var M=(e=>(e.Row="Row",e.Column="Column",e))(M||{});const ye="flex flex-col gap-2",ve="flex",Ne="pb-1 mt-2",we={[M.Column]:"flex-col gap-y-3",[M.Row]:"flex-row gap-x-6"},De=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:a,elementId:n,radioButtons:l,activeRadioButton:o,orientation:u,onChange:d})=>s.jsxs("div",{className:ye,children:[e&&s.jsx(B,{fieldTitle:e,htmlFor:n}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":a||void 0,className:c(ve,we[u]),children:l.map(i=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(U,{name:n,value:i.id,inputId:i.id,disabled:a,cssClass:r,labelCssClass:t,title:i.name,checked:i.id===o,onChange:()=>d(i.id)}),i.id===o&&i.content?s.jsx("div",{className:Ne,children:i.content}):null]},i.id))})]}),Ie=({icon:e,title:r,description:t})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(b.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:r}),t&&s.jsx("span",{className:"mt-1 text-primary",children:t})]}),ke=60,Se=({containerCssClass:e,children:r,width:t,title:a,iconSize:n=G,titleCssClass:l,additionalButtons:o})=>{const[u,d]=j.useState(t),[i,x]=j.useState(!0),f=c(["transform rotate-180 [writing-mode:tb-rl]",i&&"hidden",l]),h=c(["flex flex-row gap-2 cursor-pointer text-secondary",i?"justify-end":"justify-center"]),m=()=>{d(i?ke:t),x(!i)};return s.jsxs("div",{className:c(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:c(["flex-1 min-h-0 overflow-auto",!i&&"hidden"]),children:r}),s.jsx("div",{className:f,children:a}),s.jsxs("div",{className:h,children:[i&&o,s.jsx(F,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:i?s.jsx(b.IconChevronsLeft,{size:n,stroke:T.stroke}):s.jsx(b.IconChevronsRight,{size:n,stroke:T.stroke})})]})]})},X=({ariaLabel:e,cssClass:r,size:t=24,onClose:a})=>s.jsx(F,{ariaLabel:e,cssClass:c("text-secondary hover:text-accent-primary",r),onClick:a,iconBefore:s.jsx(b.IconX,{size:t})}),K=({value:e,textareaId:r,placeholder:t,cssClass:a="",disabled:n,invalid:l,readonly:o,onChange:u})=>s.jsx(O,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:n,className:c("dial-textarea dial-input px-3 py-2",l?"dial-input-error":"",n&&"dial-input-disable",o&&"dial-input-readonly",a),onChange:d=>!o&&u?.(d.currentTarget.value)})}),Re=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Fe=(e,r,t,a)=>{if((r==="number"||t!==void 0||a!==void 0)&&!Re.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||a!==void 0){const l=e.currentTarget.value,o=e.currentTarget.selectionStart||0,u=l.slice(0,o)+e.key+l.slice(o),d=parseFloat(u);if(!isNaN(d)){if(t!==void 0&&d<t){e.preventDefault();return}if(a!==void 0&&d>a){e.preventDefault();return}}}}},P=({iconBefore:e,iconAfter:r,hideBorder:t,value:a,elementId:n,placeholder:l="",cssClass:o="",containerCssClass:u,tooltipTriggerClassName:d,type:i="text",disabled:x,readonly:f,invalid:h,onChange:m,min:y,max:g,prefix:w,suffix:I,textBeforeInput:C,textAfterInput:z})=>{const J=k=>k.target.blur(),ee=i==="number"||y!==void 0||g!==void 0,se=k=>{Fe(k,i,y,g)},re=k=>{const E=k.currentTarget.value;if(ee&&E!==""){const V=parseFloat(E);if(isNaN(V)&&E!=="-"&&E!=="."||!isNaN(V)&&(y!==void 0&&V<y||g!==void 0&&V>g))return}m?.(E)};return s.jsxs("div",{className:c("dial-input-field flex flex-row items-center justify-between py-2",t?"dial-input-no-border":"dial-input",h&&"dial-input-error",x&&"dial-input-disable",f&&"dial-input-readonly",!C&&"pl-3",!z&&"pr-3",u),children:[C&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:C,disabled:!0,elementId:C+"textBefore"})}),w&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",w]}),s.jsx(D,{icon:e}),s.jsx(O,{tooltip:a,triggerClassName:c(d,"flex-1"),children:s.jsx("input",{type:i,autoComplete:"off",id:n,placeholder:l,value:a??"",disabled:x,className:c("border-0 bg-transparent px-2",o),onChange:k=>!f&&re?.(k),onKeyDown:se,onWheel:J,min:y,max:g})}),s.jsx(D,{icon:r}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),z&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:z,disabled:!0,elementId:z+"textAfter"})})]})},Te=/^0+\.(\d+)?$/,Ee=/^0+/,Z=({fieldTitle:e,errorText:r,optional:t,elementCssClass:a,elementContainerCssClass:n,elementId:l,containerCssClass:o,readonly:u,defaultEmptyText:d,min:i,max:x,...f})=>s.jsxs("div",{className:c("flex flex-col",o),children:[s.jsx(B,{fieldTitle:e,optional:t,htmlFor:l}),u?s.jsx("span",{children:f.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(P,{elementId:l,cssClass:a,containerCssClass:n,invalid:r!=null,min:i,max:x,...f}),s.jsx(W,{errorText:r})]})]}),Pe=({onChange:e,value:r,min:t,max:a,...n})=>{const l=o=>String(o)?.match(Te)?String(o)?.replace(Ee,"0"):Number(o);return s.jsx(Z,{type:"number",onChange:o=>e?.(l(o)),value:r,min:t,max:a,...n})},Ae=({onChange:e,...r})=>s.jsx(Z,{type:"text",onChange:t=>e?.(t),...r}),Le=({fieldTitle:e,optional:r,elementId:t,elementCssClass:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(K,{textareaId:t,cssClass:a,...l}),s.jsx(W,{errorText:n})]}),Be=({title:e,switchId:r,isOn:t=!1,disabled:a,onChange:n})=>{const l=c("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",a?"pointer-events-none":"",a?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=j.useCallback(u=>{u.stopPropagation(),n?.(!t)},[n,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:a,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:l,children:s.jsx("span",{className:c("size-3 rounded-full",a?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var R=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(R||{});const Oe="z-[52] flex items-center justify-center bg-blackout md:p-4",ze="relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto",Ve="divide-tertiary divide-y",Me="flex flex-row justify-between py-4 px-6 items-center",We={[R.Sm]:"max-w-full md:max-w-[400px]",[R.Md]:"max-w-full md:max-w-[800px]",[R.Lg]:"max-w-full md:max-w-[1200px]"},Q=({open:e=!1,title:r,portalId:t,cssClass:a,overlayClass:n,headingClass:l,dividers:o=!0,children:u,footer:d,onClose:i,size:x=R.Md})=>{const{refs:f,context:h}=p.useFloating({open:e,onOpenChange:C=>{C||i?.(null)}}),m=p.useRole(h,{role:"dialog"}),y=p.useDismiss(h,{outsidePress:!0}),{getFloatingProps:g}=p.useInteractions([m,y]);if(!e)return null;const w=typeof r=="string"?"dial-popup-heading":void 0,I=C=>C?typeof C=="string"?s.jsx("h3",{id:w,className:c("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",l),children:s.jsx(O,{tooltip:C,children:C})}):C:s.jsx("span",{});return s.jsx(p.FloatingPortal,{id:t,children:s.jsx(p.FloatingOverlay,{className:c(Oe,n),children:s.jsx(p.FloatingFocusManager,{context:h,children:s.jsxs("div",{ref:f.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":w,className:c(ze,We[x],o&&Ve,a),children:[s.jsxs("div",{className:Me,children:[I(r),s.jsx(X,{ariaLabel:"Close dialog",onClose:C=>i?.(C)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var A=(e=>(e.Info="info",e.Danger="danger",e))(A||{});const _e="flex justify-end gap-2 px-6 py-4",He="text-secondary dial-small-150 px-6 py-4",qe="Cancel",_={[A.Info]:{confirmVariant:N.Primary,cancelVariant:N.Secondary},[A.Danger]:{container:"border-t-4 border-error",confirmVariant:N.Danger,cancelVariant:N.Secondary}},$e=({title:e,description:r,descriptionCssClass:t,open:a=!1,confirmLabel:n,cancelLabel:l=qe,isLoading:o=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:i,onClose:x,onConfirm:f,onCancel:h,children:m,dividers:y=!1,variant:g=A.Info,size:w=R.Sm})=>{const I=o?null:s.jsxs("div",{className:_e,children:[s.jsx(F,{variant:N.Secondary,title:l,onClick:()=>h?h():x?.()}),s.jsx(F,{variant:_[g].confirmVariant,cssClass:i,title:n,disable:u,onClick:()=>f()})]}),C=j.useCallback(()=>o?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx(H,{size:50})}):m??(r?s.jsx("div",{className:c(He,t),children:r}):null),[m,r,o,t]);return s.jsx(Q,{open:a,title:e,cssClass:c(_[g].container,d),dividers:y,onClose:()=>x?.(),footer:I,size:w,children:C()})},Ge=({onClick:e})=>s.jsx(b.IconEyeOff,{...T,className:"text-primary",onClick:e}),Ue=({onClick:e})=>s.jsx(b.IconEye,{...T,className:"text-primary",onClick:e}),Y=({...e})=>{const[r,t]=j.useState(!1),a=j.useCallback(n=>{t(n)},[]);return s.jsx(P,{type:r?"text":"password",...e,iconAfter:r?s.jsx(Ge,{onClick:()=>a(!1)}):s.jsx(Ue,{onClick:()=>a(!0)})})},Xe=({fieldTitle:e,optional:r,elementCssClass:t,elementId:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:a}),s.jsx(Y,{cssClass:t,elementId:a,invalid:!!n,...l}),s.jsx(W,{errorText:n})]});var L=(e=>(e.Small="small",e.Base="base",e))(L||{});const Ke={[L.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[L.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},Ze=({elementId:e,value:r,placeholder:t,disabled:a,readonly:n,invalid:l,cssClass:o,containerCssClass:u,onChange:d,size:i=L.Base})=>{const[x,f]=j.useState(r||"");j.useEffect(()=>{f(r||"")},[r]);const h=j.useCallback(g=>{f(g),d?.(g)},[d]),m=Ke[i],y=j.useCallback(()=>{h("")},[h]);return s.jsxs("div",{className:c("dial-input flex flex-row items-center justify-between",l&&"dial-input-error",a&&"dial-input-disable",n&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(D,{className:c(a?"text-secondary":"text-primary"),icon:s.jsx(b.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:t,value:x??"",disabled:a,readOnly:n,className:c("border-0 bg-transparent w-full",o,m.textClass),onChange:g=>!n&&h(g.currentTarget.value)}),x&&!n&&!a&&s.jsx(D,{className:"text-primary cursor-pointer",icon:s.jsx(b.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:y,"aria-label":"Clear search",role:"button"})})]})};exports.AlertVariant=S;exports.ButtonVariant=N;exports.ConfirmationPopupVariant=A;exports.DialAlert=oe;exports.DialButton=F;exports.DialCheckbox=he;exports.DialCloseButton=X;exports.DialCollapsibleSidebar=Se;exports.DialConfirmationPopup=$e;exports.DialErrorText=W;exports.DialFieldLabel=B;exports.DialIcon=D;exports.DialInput=P;exports.DialLoader=H;exports.DialNoDataContent=Ie;exports.DialNumberInputField=Pe;exports.DialPasswordInput=Y;exports.DialPasswordInputField=Xe;exports.DialPopup=Q;exports.DialRadioButton=U;exports.DialRadioGroup=De;exports.DialSearch=Ze;exports.DialSteps=Ce;exports.DialSwitch=Be;exports.DialTextAreaField=Le;exports.DialTextInputField=Ae;exports.DialTextarea=K;exports.DialTooltip=O;exports.PopupSize=R;exports.RadioGroupOrientation=M;exports.SearchSize=L;exports.StepStatus=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("classnames"),b=require("@tabler/icons-react"),j=require("react"),p=require("@floating-ui/react"),W=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),B=({fieldTitle:e,htmlFor:r,optional:t,optionalText:a,cssClass:n})=>e?s.jsxs("label",{className:c("dial-tiny text-secondary",n,!n?.includes("mb")&&"mb-2"),htmlFor:r,children:[s.jsx("span",{className:"min-h-4",children:e}),t&&s.jsx("span",{className:"ml-1",children:a??"(Optional)"})]}):null,D=({icon:e,className:r})=>e?s.jsx("span",{className:c("flex-shrink-0",r),children:e}):null;var w=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(w||{});const te={[w.Primary]:"dial-primary-button",[w.Secondary]:"dial-secondary-button",[w.Tertiary]:"dial-tertiary-button",[w.Danger]:"dial-danger-button"},F=({title:e,variant:r,cssClass:t,textCssClass:a,ref:n,onClick:l,disable:o,iconAfter:u,iconBefore:d,hideTitleOnMobile:i,ariaLabel:x})=>{const f=c("dial-small-semi",u?"mr-2":"",d?"ml-2":"",i?"hidden sm:inline":"inline",a),h=c(r&&te[r],t,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:n,type:"button",className:h,onClick:m=>l?.(m),disabled:o,"aria-label":e||x,children:[s.jsx(D,{icon:d}),e&&s.jsx("span",{className:f,children:e}),s.jsx(D,{icon:u})]})};var S=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(S||{});const ne={info:s.jsx(b.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(b.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(b.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(b.IconCircleCheck,{size:24,stroke:2})},ae={[S.Info]:"bg-info border-info text-info",[S.Success]:"bg-success border-success text-success",[S.Warning]:"bg-warning border-warning text-warning",[S.Error]:"bg-error border-error text-error"},le="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",oe=({variant:e=S.Info,message:r,cssClass:t,closable:a=!1,onClose:n})=>s.jsxs("div",{role:"alert",className:c(le,ae[e],t),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(D,{icon:ne[e]}),s.jsx("div",{className:"text-primary",children:r})]}),a&&s.jsx(F,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(b.IconX,{size:16}),onClick:l=>n?.(l)})]}),ie="flex items-center justify-center text-secondary",ce="shrink-0 grow-0 basis-auto animate-spin-steps",H=({size:e=18,cssClass:r,iconClass:t,fullWidth:a=!0,ariaLabel:n="Loading"})=>s.jsx("div",{role:"status","aria-label":n,className:c({[ie]:!0,"w-full h-full":a,[r||""]:!!r}),children:s.jsx(D,{icon:s.jsx(b.IconLoader,{width:e,height:e,className:c(ce,t)})})}),de=7,ue=2,q=j.createContext(null),$=()=>{const e=j.useContext(q);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},xe=({initialOpen:e=!1,placement:r="bottom",isTriggerClickable:t=!1,open:a,onOpenChange:n}={})=>{const[l,o]=j.useState(e),u=j.useRef(null),d=a??l,i=n??o,x=p.useFloating({placement:r,open:d,onOpenChange:i,whileElementsMounted:p.autoUpdate,middleware:[p.offset(de+ue),p.flip({crossAxis:r.includes("-"),fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:u})]}),f=p.useHover(x.context,{move:!1,enabled:a==null,mouseOnly:t,delay:{open:500,close:0}}),h=p.useFocus(x.context,{enabled:a==null}),m=p.useDismiss(x.context),y=p.useRole(x.context,{role:"tooltip"}),g=p.useInteractions([f,h,m,y]);return j.useMemo(()=>({open:d,setOpen:i,arrowRef:u,...g,...x}),[d,i,g,x])},me=({children:e,...r})=>{const t=xe(r);return s.jsx(q.Provider,{value:t,children:e})},pe=j.forwardRef(function({style:r,...t},a){const n=$(),l=p.useMergeRefs([n.refs.setFloating,a]);return n.open?s.jsx(p.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:l,style:{...n.floatingStyles,...r},...n.getFloatingProps(t),className:c("z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",n.getFloatingProps(t).className),children:[t.children,s.jsx(p.FloatingArrow,{ref:n.arrowRef,context:n.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),fe=j.forwardRef(function({children:r,asChild:t=!1,...a},n){const l=$(),u=r&&typeof r=="object"&&"ref"in r&&r.ref!==void 0?r.ref:void 0,d=p.useMergeRefs([l.refs.setReference,n,u]);return t&&j.isValidElement(r)?j.cloneElement(r,l.getReferenceProps({ref:d,...a,...r.props})):s.jsx("span",{ref:d,...l.getReferenceProps(a),className:a.className??"dial-tooltip-trigger text-left",children:r})}),O=({hideTooltip:e,tooltip:r,children:t,triggerClassName:a,contentClassName:n,...l})=>s.jsxs(me,{...l,children:[s.jsx(fe,{className:c(a,"truncate"),children:t}),s.jsx(pe,{className:c("text-primary",n,"max-w-[300px]",(e||!r)&&"hidden"),children:r})]}),G=18,T={size:G,stroke:2},he=({label:e,id:r,checked:t,indeterminate:a,disabled:n,ariaLabel:l,onChange:o})=>{const u=j.useCallback(x=>{x.stopPropagation(),o?.(x.target.checked,r)},[o,r]),d=c("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${t?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,n?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),i=c("mr-2 border rounded",n?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:r,children:[t&&(a?s.jsx(b.IconMinus,{className:i,...T}):s.jsx(b.IconCheck,{className:i,...T})),e&&s.jsx(O,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:s.jsx("p",{className:"text-primary w-full truncate",children:e})}),s.jsx("input",{type:"checkbox",onChange:u,id:r,checked:t,"aria-checked":a?"mixed":t,"aria-disabled":n||void 0,"aria-label":e?void 0:l,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const ge=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"border-accent-secondary text-primary";case v.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case v.VALID:return"border-primary text-white";case v.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},je=(e,r)=>{if(r===e.id)switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-layer-4"}},be=({step:e,index:r,currentStep:t,onChangeStep:a})=>{const n="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",l="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",o=()=>t===e.id&&e.status===v.ERROR?s.jsx(b.IconExclamationCircle,{stroke:2,size:16}):t!==e.id&&e.status===v.VALID?s.jsx(b.IconCheck,{stroke:2,size:16}):r+1;return s.jsxs("button",{className:c(n,ge(e,t)),onClick:()=>a(e.id),children:[s.jsx("span",{className:c(l,je(e,t)),children:o()}),s.jsx("span",{children:e.name})]})},Ce=({steps:e,currentStep:r,onChangeStep:t})=>{const a=n=>{const l=e.findIndex(u=>u.id===r),o=e.findIndex(u=>u.id===n);(n!==r&&e[l].status===v.VALID||o<l)&&t(n)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((n,l)=>s.jsx(be,{currentStep:r,onChangeStep:a,step:n,index:l},n.id))})},U=({name:e,value:r,title:t,description:a,checked:n=!1,inputId:l,cssClass:o,labelCssClass:u,disabled:d,onChange:i,descriptionCssClass:x})=>{const f=`${l}-desc`,h=c("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=c("cursor-pointer dial-input-radio",t&&"mr-2",o),y=c("flex flex-col",!!a&&"mb-2"),g=c("dial-tiny mt-2 ml-[26px] text-secondary",x),N=I=>{d||I.target.checked&&i?.(r)};return s.jsxs("div",{className:y,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:l,name:e,value:r,checked:n,disabled:d,"aria-describedby":n&&a?f:void 0,className:m,onChange:N}),t?s.jsx("label",{className:h,htmlFor:l,children:t}):null]}),n&&a&&s.jsx("div",{id:f,className:g,children:a})]})};var M=(e=>(e.Row="Row",e.Column="Column",e))(M||{});const ye="flex flex-col gap-2",ve="flex",we="pb-1 mt-2",Ne={[M.Column]:"flex-col gap-y-3",[M.Row]:"flex-row gap-x-6"},De=({fieldTitle:e,radioCssClass:r,labelCssClass:t,disabled:a,elementId:n,radioButtons:l,activeRadioButton:o,orientation:u,onChange:d})=>s.jsxs("div",{className:ye,children:[e&&s.jsx(B,{fieldTitle:e,htmlFor:n}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":a||void 0,className:c(ve,Ne[u]),children:l.map(i=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(U,{name:n,value:i.id,inputId:i.id,disabled:a,cssClass:r,labelCssClass:t,title:i.name,checked:i.id===o,onChange:()=>d(i.id)}),i.id===o&&i.content?s.jsx("div",{className:we,children:i.content}):null]},i.id))})]}),Ie=({icon:e,title:r,description:t})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(b.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:r}),t&&s.jsx("span",{className:"mt-1 text-primary",children:t})]}),ke=60,Se=({containerCssClass:e,children:r,width:t,title:a,iconSize:n=G,titleCssClass:l,additionalButtons:o})=>{const[u,d]=j.useState(t),[i,x]=j.useState(!0),f=c(["transform rotate-180 [writing-mode:tb-rl]",i&&"hidden",l]),h=c(["flex flex-row gap-2 cursor-pointer text-secondary",i?"justify-end":"justify-center"]),m=()=>{d(i?ke:t),x(!i)};return s.jsxs("div",{className:c(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:c(["flex-1 min-h-0 overflow-auto",!i&&"hidden"]),children:r}),s.jsx("div",{className:f,children:a}),s.jsxs("div",{className:h,children:[i&&o,s.jsx(F,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:i?s.jsx(b.IconChevronsLeft,{size:n,stroke:T.stroke}):s.jsx(b.IconChevronsRight,{size:n,stroke:T.stroke})})]})]})},X=({ariaLabel:e,cssClass:r,size:t=24,onClose:a})=>s.jsx(F,{ariaLabel:e,cssClass:c("text-secondary hover:text-accent-primary",r),onClick:a,iconBefore:s.jsx(b.IconX,{size:t})}),K=({value:e,textareaId:r,placeholder:t,cssClass:a="",disabled:n,invalid:l,readonly:o,onChange:u})=>s.jsx(O,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:r,placeholder:t,value:e||"",disabled:n,className:c("dial-textarea dial-input px-3 py-2",l?"dial-input-error":"",n&&"dial-input-disable",o&&"dial-input-readonly",a),onChange:d=>!o&&u?.(d.currentTarget.value)})}),Re=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Fe=(e,r,t,a)=>{if((r==="number"||t!==void 0||a!==void 0)&&!Re.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||a!==void 0){const l=e.currentTarget.value,o=e.currentTarget.selectionStart||0,u=l.slice(0,o)+e.key+l.slice(o),d=parseFloat(u);if(!isNaN(d)){if(t!==void 0&&d<t){e.preventDefault();return}if(a!==void 0&&d>a){e.preventDefault();return}}}}},P=({iconBefore:e,iconAfter:r,hideBorder:t,value:a,elementId:n,placeholder:l="",cssClass:o="",containerCssClass:u,tooltipTriggerClassName:d,type:i="text",disabled:x,readonly:f,invalid:h,onChange:m,min:y,max:g,prefix:N,suffix:I,textBeforeInput:C,textAfterInput:z})=>{const J=k=>k.target.blur(),ee=i==="number"||y!==void 0||g!==void 0,se=k=>{Fe(k,i,y,g)},re=k=>{const E=k.currentTarget.value;if(ee&&E!==""){const V=parseFloat(E);if(isNaN(V)&&E!=="-"&&E!=="."||!isNaN(V)&&(y!==void 0&&V<y||g!==void 0&&V>g))return}m?.(E)};return s.jsxs("div",{className:c("dial-input-field flex flex-row items-center justify-between py-2",t?"dial-input-no-border":"dial-input",h&&"dial-input-error",x&&"dial-input-disable",f&&"dial-input-readonly",!C&&"pl-3",!z&&"pr-3",u),children:[C&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"px-2 overflow-hidden overflow-ellipsis dial-small",value:C,disabled:!0,elementId:C+"textBefore"})}),N&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",N]}),s.jsx(D,{icon:e}),s.jsx(O,{tooltip:a,triggerClassName:c(d,"flex-1"),children:s.jsx("input",{type:i,autoComplete:"off",id:n,placeholder:l,value:a??"",disabled:x,className:c("border-0 bg-transparent px-2",o),onChange:k=>!f&&re?.(k),onKeyDown:se,onWheel:J,min:y,max:g})}),s.jsx(D,{icon:r}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),z&&s.jsx("div",{children:s.jsx(P,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",cssClass:"px-2",value:z,disabled:!0,elementId:z+"textAfter"})})]})},Te=/^0+\.(\d+)?$/,Ee=/^0+/,Z=({fieldTitle:e,errorText:r,optional:t,elementCssClass:a,elementContainerCssClass:n,elementId:l,containerCssClass:o,readonly:u,defaultEmptyText:d,min:i,max:x,...f})=>s.jsxs("div",{className:c("flex flex-col",o),children:[s.jsx(B,{fieldTitle:e,optional:t,htmlFor:l}),u?s.jsx("span",{children:f.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(P,{elementId:l,cssClass:a,containerCssClass:n,invalid:r!=null,min:i,max:x,...f}),s.jsx(W,{errorText:r})]})]}),Pe=({onChange:e,value:r,min:t,max:a,...n})=>{const l=o=>String(o)?.match(Te)?String(o)?.replace(Ee,"0"):Number(o);return s.jsx(Z,{type:"number",onChange:o=>e?.(l(o)),value:r,min:t,max:a,...n})},Ae=({onChange:e,...r})=>s.jsx(Z,{type:"text",onChange:t=>e?.(t),...r}),Le=({fieldTitle:e,optional:r,elementId:t,elementCssClass:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:t}),s.jsx(K,{textareaId:t,cssClass:a,...l}),s.jsx(W,{errorText:n})]}),Be=({title:e,switchId:r,isOn:t=!1,disabled:a,onChange:n})=>{const l=c("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",a?"pointer-events-none":"",a?t?"bg-controls-disable":"bg-layer-4":t?"bg-accent-primary":"bg-layer-4"),o=j.useCallback(u=>{u.stopPropagation(),n?.(!t)},[n,t]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:o,id:r,disabled:a,className:"invisible w-0 h-0",checked:t}),s.jsx("label",{htmlFor:r,className:l,children:s.jsx("span",{className:c("size-3 rounded-full",a?t?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var R=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(R||{});const Oe="z-[52] flex items-center justify-center bg-blackout md:p-4",ze="relative max-h-full rounded bg-layer-3 flex flex-col shadow w-full h-full md:h-auto",Ve="divide-tertiary divide-y",Me="flex flex-row justify-between py-4 px-6 items-center",We={[R.Sm]:"max-w-full md:max-w-[400px]",[R.Md]:"max-w-full md:max-w-[800px]",[R.Lg]:"max-w-full md:max-w-[1200px]"},Q=({open:e=!1,title:r,portalId:t,cssClass:a,overlayClass:n,headingClass:l,dividers:o=!0,children:u,footer:d,onClose:i,size:x=R.Md})=>{const{refs:f,context:h}=p.useFloating({open:e,onOpenChange:C=>{C||i?.(null)}}),m=p.useRole(h,{role:"dialog"}),y=p.useDismiss(h,{outsidePress:!0}),{getFloatingProps:g}=p.useInteractions([m,y]);if(!e)return null;const N=typeof r=="string"?"dial-popup-heading":void 0,I=C=>C?typeof C=="string"?s.jsx("h3",{id:N,className:c("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",l),children:s.jsx(O,{tooltip:C,children:C})}):C:s.jsx("span",{});return s.jsx(p.FloatingPortal,{id:t,children:s.jsx(p.FloatingOverlay,{className:c(Oe,n),children:s.jsx(p.FloatingFocusManager,{context:h,children:s.jsxs("div",{ref:f.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":N,className:c(ze,We[x],o&&Ve,a),children:[s.jsxs("div",{className:Me,children:[I(r),s.jsx(X,{ariaLabel:"Close dialog",onClose:C=>i?.(C)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var A=(e=>(e.Info="info",e.Danger="danger",e))(A||{});const _e="flex justify-end gap-2 px-6 py-4",He="text-secondary dial-small-150 px-6 py-4",qe="Cancel",_={[A.Info]:{confirmVariant:w.Primary,cancelVariant:w.Secondary},[A.Danger]:{container:"border-t-4 border-error",confirmVariant:w.Danger,cancelVariant:w.Secondary}},$e=({title:e,description:r,descriptionCssClass:t,open:a=!1,confirmLabel:n,cancelLabel:l=qe,isLoading:o=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:i,onClose:x,onConfirm:f,onCancel:h,children:m,dividers:y=!1,variant:g=A.Info,size:N=R.Sm})=>{const I=o?null:s.jsxs("div",{className:_e,children:[s.jsx(F,{variant:w.Secondary,title:l,onClick:()=>h?h():x?.()}),s.jsx(F,{variant:_[g].confirmVariant,cssClass:i,title:n,disable:u,onClick:()=>f()})]}),C=j.useCallback(()=>o?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx(H,{size:50})}):m??(r?s.jsx("div",{className:c(He,t),children:r}):null),[m,r,o,t]);return s.jsx(Q,{open:a,title:e,cssClass:c(_[g].container,d),dividers:y,onClose:()=>x?.(),footer:I,size:N,children:C()})},Ge=({onClick:e})=>s.jsx(b.IconEyeOff,{...T,className:"text-primary",onClick:e}),Ue=({onClick:e})=>s.jsx(b.IconEye,{...T,className:"text-primary",onClick:e}),Y=({...e})=>{const[r,t]=j.useState(!1),a=j.useCallback(n=>{t(n)},[]);return s.jsx(P,{type:r?"text":"password",...e,iconAfter:r?s.jsx(Ge,{onClick:()=>a(!1)}):s.jsx(Ue,{onClick:()=>a(!0)})})},Xe=({fieldTitle:e,optional:r,elementCssClass:t,elementId:a,errorText:n,...l})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(B,{fieldTitle:e,optional:r,htmlFor:a}),s.jsx(Y,{cssClass:t,elementId:a,invalid:!!n,...l}),s.jsx(W,{errorText:n})]});var L=(e=>(e.Small="small",e.Base="base",e))(L||{});const Ke={[L.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[L.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},Ze=({elementId:e,value:r,placeholder:t,disabled:a,readonly:n,invalid:l,cssClass:o,containerCssClass:u,onChange:d,size:i=L.Base})=>{const[x,f]=j.useState(r||"");j.useEffect(()=>{f(r||"")},[r]);const h=j.useCallback(g=>{f(g),d?.(g)},[d]),m=Ke[i],y=j.useCallback(()=>{h("")},[h]);return s.jsxs("div",{className:c("dial-input flex flex-row items-center justify-between",l&&"dial-input-error",a&&"dial-input-disable",n&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(D,{className:c(a?"text-secondary":"text-primary"),icon:s.jsx(b.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:t,value:x??"",disabled:a,readOnly:n,className:c("border-0 bg-transparent w-full",o,m.textClass),onChange:g=>!n&&h(g.currentTarget.value)}),x&&!n&&!a&&s.jsx(D,{className:"text-primary cursor-pointer",icon:s.jsx(b.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:y,"aria-label":"Clear search",role:"button"})})]})};exports.AlertVariant=S;exports.ButtonVariant=w;exports.ConfirmationPopupVariant=A;exports.DialAlert=oe;exports.DialButton=F;exports.DialCheckbox=he;exports.DialCloseButton=X;exports.DialCollapsibleSidebar=Se;exports.DialConfirmationPopup=$e;exports.DialErrorText=W;exports.DialFieldLabel=B;exports.DialIcon=D;exports.DialInput=P;exports.DialLoader=H;exports.DialNoDataContent=Ie;exports.DialNumberInputField=Pe;exports.DialPasswordInput=Y;exports.DialPasswordInputField=Xe;exports.DialPopup=Q;exports.DialRadioButton=U;exports.DialRadioGroup=De;exports.DialSearch=Ze;exports.DialSteps=Ce;exports.DialSwitch=Be;exports.DialTextAreaField=Le;exports.DialTextInputField=Ae;exports.DialTextarea=K;exports.DialTooltip=O;exports.PopupSize=R;exports.RadioGroupOrientation=M;exports.SearchSize=L;exports.StepStatus=v;
package/dist/dial-ui-kit.es.js CHANGED
@@ -208,7 +208,7 @@ const je = {
208
208
  },
209
209
  ...s.getFloatingProps(t),
210
210
  className: c(
211
- "z-[55] whitespace-pre-wrap rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
211
+ "z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",
212
212
  s.getFloatingProps(t).className
213
213
  ),
214
214
  children: [
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
1
  .dial-h1{font-weight:600}.dial-h1,.dial-h2{font-size:20px;line-height:24px}.dial-h2{font-weight:400}.dial-h3{font-weight:600;line-height:18px}.dial-body,.dial-h3{font-size:16px}.dial-body{font-weight:400;line-height:28px}.dial-small{font-weight:400}.dial-small,.dial-small-semi{font-size:14px;line-height:16px}.dial-small-semi{font-weight:600}.dial-small-medium{font-weight:400;font-size:14px;line-height:16px}.dial-small-150{font-weight:400;font-size:14px;line-height:21px}.dial-tiny{line-height:14px}.dial-tiny,.dial-tiny-150{font-weight:400;font-size:12px}.dial-tiny-150{line-height:18px}.dial-caption{font-weight:400;font-size:10px;line-height:12px}h1{font-weight:600}h1,h2{font-size:20px;line-height:24px}h2{font-weight:400}h3{font-weight:600;font-size:16px;line-height:18px}.dial-base-button{display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px}.dial-base-button-disable{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}.dial-primary-button{background-color:var(--controls-bg-accent,#5c8dea);color:var(--controls-primary,#fcfcfc);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-hover,#4878d2)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-secondary-button{background-color:transparent;color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;border-color:var(--stroke-primary,#333942);&:focus,&:hover{background-color:var(--bg-layer-4,#333942)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-tertiary-button{background-color:transparent;color:var(--text-accent-primary,#5c8dea);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-alpha,#5c8dea2b)}&:active,&:focus{border-color:var(--stroke-accent-primary,#5c8dea)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-danger-button{background-color:var(--bg-red-400,#f76464);color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--bg-red-800,#ae2f2f)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-input{border-radius:3px;border-width:1px;border-style:solid;border-color:var(--stroke-primary,#333942);&:hover{border-color:var(--stroke-hover,#f3f4f6)}&:focus,&:focus-within{border-color:var(--stroke-accent-primary,#5c8dea)}}.dial-input,.dial-input-no-border{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;font-weight:400;font-size:14px;line-height:16px;width:100%;outline-width:0;&:not(:-moz-placeholder){color:var(--text-primary,#f3f4f6)}&:not(:placeholder-shown){color:var(--text-primary,#f3f4f6)}&:disabled{background-color:var(--bg-layer-3,#222932)}&:disabled:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}&:disabled,&:disabled:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}}.dial-input-disable,.dial-input-readonly{background-color:var(--bg-layer-3,#222932)}.dial-input-disable:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}.dial-input-disable,.dial-input-disable:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}.dial-input-error{border-color:var(--stroke-error,#f76464)}.dial-input-field{height:38px}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:focus{outline:none}}.dial-textarea{min-height:72px;resize:both;overflow:auto;white-space:normal}.dial-input-radio{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding:0;height:18px;width:18px;border-color:var(--stroke-hover,#f3f4f6);background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:currentColor;font:inherit;&:checked{border-color:var(--stroke-accent-primary,#5c8dea)}&:checked{&:after{height:10px;width:10px;background-color:var(--bg-accent-primary,#5c8dea);content:"";border-radius:18px}}&:focus,&:hover{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);background-color:transparent}&:disabled{pointer-events:none}&:disabled{&:checked{border-color:var(--stroke-primary,#333942)}&:checked{&:after{background-color:var(--controls-bg-disable,#7f8792)}}}}@layer ui{*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
2
- /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.relative{position:relative}.z-\[52\]{z-index:52}.z-\[55\]{z-index:55}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.h-0{height:0}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-\[4px\]{height:4px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-2{width:.5rem}.w-80{width:20rem}.w-\[10px\]{width:10px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[180px\]{min-width:180px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[300px\]{max-width:300px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(6) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-t-2{border-top-width:2px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font{font-family:var(--theme-font,var(--font-inter))}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.tracking-wider{letter-spacing:.05em}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-0{--tw-ring-offset-width:0px}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-icon-accent-primary:hover{color:var(--icon-accent-primary,#5c8dea)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus-visible\:outline:focus-visible{outline-style:solid}@media (min-width:640px){.sm\:inline{display:inline}}@media (min-width:768px){.md\:h-auto{height:auto}.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:p-4{padding:1rem}}
2
+ /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.relative{position:relative}.z-\[52\]{z-index:52}.z-\[55\]{z-index:55}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.h-0{height:0}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[18px\]{height:18px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[38px\]{height:38px}.h-\[4px\]{height:4px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-2{width:.5rem}.w-80{width:20rem}.w-\[10px\]{width:10px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[180px\]{min-width:180px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[300px\]{max-width:300px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(6) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-t-2{border-top-width:2px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font{font-family:var(--theme-font,var(--font-inter))}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.tracking-wider{letter-spacing:.05em}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-0{--tw-ring-offset-width:0px}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-icon-accent-primary:hover{color:var(--icon-accent-primary,#5c8dea)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus-visible\:outline:focus-visible{outline-style:solid}@media (min-width:640px){.sm\:inline{display:inline}}@media (min-width:768px){.md\:h-auto{height:auto}.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:p-4{padding:1rem}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-ui-kit",
3
- "version": "0.2.0-rc.25",
3
+ "version": "0.2.0-rc.26",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "description": "A modern UI kit for building AI DIAL interfaces with React",