@epam/ai-dial-ui-kit 0.15.2 → 0.16.0-dev.10

package/dist/{IconButton-DHOFapLo.cjs → IconButton-B1Hx0Y3y.cjs}

@@ -1 +1 @@
-"use strict";const u=require("react/jsx-runtime"),n=require("@floating-ui/react"),c=require("react"),x=require("classnames"),F=require("./merge-classes-BEJXjzkx.cjs");var l=(e=>(e.Primary="primary",e.Neutral="neutral",e.Danger="danger",e.Static="static",e.Starter="starter",e.Success="success",e.Secondary="secondary",e.Tertiary="tertiary",e))(l||{}),r=(e=>(e.Solid="solid",e.Outlined="outlined",e.Ghost="ghost",e.Link="link",e))(r||{});const v={[l.Primary]:{[r.Solid]:"dial-primary-solid-button",[r.Ghost]:"dial-primary-ghost-button",[r.Link]:"dial-primary-link-button"},[l.Neutral]:{[r.Outlined]:"dial-neutral-outlined-button"},[l.Danger]:{[r.Solid]:"dial-danger-solid-button",[r.Ghost]:"dial-danger-ghost-button",[r.Outlined]:"dial-danger-outlined-button"},[l.Success]:{[r.Ghost]:"dial-success-ghost-button"},[l.Secondary]:{[r.Ghost]:"dial-secondary-ghost-button"},[l.Tertiary]:{[r.Ghost]:"dial-tertiary-ghost-button"},[l.Static]:{},[l.Starter]:{}},S=(e=l.Primary,o=r.Solid)=>{const t=v[e]?.[o];return t||(console.warn(`Could not find Button styles for variant: ${e} and appearance: ${o}. Using default primary solid button styles.`),v[l.Primary][r.Solid])};var h=(e=>(e.Small="small",e.Standard="standard",e.Large="large",e))(h||{});const I=7,A=2,C=c.createContext(null),N=()=>{const e=c.useContext(C);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},q=({initialOpen:e=!1,placement:o="bottom",isTriggerClickable:t=!1,open:s,onOpenChange:a}={})=>{const[i,p]=c.useState(e),g=c.useRef(null),m=s??i,d=a??p,f=n.useFloating({placement:o,open:m,onOpenChange:d,whileElementsMounted:n.autoUpdate,middleware:[n.offset(I+A),n.flip({crossAxis:o.includes("-"),fallbackAxisSideDirection:"start",padding:5}),n.shift({padding:5}),n.arrow({element:g})]}),M=n.useHover(f.context,{move:!1,enabled:s==null,mouseOnly:t,delay:{open:500,close:0}}),k=n.useFocus(f.context,{enabled:s==null}),P=n.useDismiss(f.context),G=n.useRole(f.context,{role:"tooltip"}),b=n.useInteractions([M,k,P,G]);return c.useEffect(()=>{if(!m)return;const y=f.refs.reference.current;if(!(y instanceof Element))return;const w=new IntersectionObserver(([L])=>{L.isIntersecting||d(!1)},{root:null,threshold:0});return w.observe(y),()=>w.disconnect()},[m,f.refs.reference,d]),c.useMemo(()=>({open:m,setOpen:d,arrowRef:g,...b,...f}),[m,d,b,f])},R=({children:e,...o})=>{const t=q(o);return u.jsx(C.Provider,{value:t,children:e})},T="(hover: none)",_=()=>typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(T).matches,D=()=>{const[e,o]=c.useState(()=>!_());return c.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;const t=window.matchMedia(T);if(o(!t.matches),typeof t.addEventListener!="function")return;const s=a=>o(!a.matches);return t.addEventListener("change",s),()=>t.removeEventListener("change",s)},[]),e},E=({style:e,...o})=>{const t=N(),s=D(),a=c.useRef(null),i=n.useMergeRefs([t.refs.setFloating,a]);return!t.open||!s?null:u.jsx(n.FloatingPortal,{id:"tooltip-portal",children:u.jsxs("div",{ref:i,style:{...t.floatingStyles,...e},...t.getFloatingProps(o),className:x("z-tooltip whitespace-pre-wrap break-words rounded border border-primary bg-layer-0 px-2 py-1 dial-tiny-text shadow max-w-[300px]",t.getFloatingProps(o).className),children:[o.children,u.jsx(n.FloatingArrow,{ref:t.arrowRef,context:t.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary text-[var(--bg-layer-0,_#000000)]"})]})})},H=({children:e,asChild:o=!1,...t})=>{const s=N(),a=o&&c.isValidElement(e),i=a?e.props?.ref:null,p=n.useMergeRefs([s.refs.setReference,...i?[i]:[]]);return a?c.cloneElement(e,s.getReferenceProps({...e.props,...t,ref:p})):u.jsx("span",{ref:p,...s.getReferenceProps(t),className:t.className??"dial-tooltip-trigger text-start",children:e})},j=({hideTooltip:e,tooltip:o,children:t,triggerClassName:s,contentClassName:a,...i})=>u.jsxs(R,{...i,children:[u.jsx(H,{className:x(s,"truncate"),children:t}),u.jsx(E,{className:x("text-primary",a,"max-w-[300px]",(e||!o)&&"hidden"),children:o})]}),O=(...e)=>e.find(o=>typeof o=="string"&&o.length>0),U=({variant:e,appearance:o=r.Solid,size:t=h.Standard,className:s,icon:a,tooltipProps:i,type:p="button",...g})=>{const m=F.mergeClasses(e&&S(e,o),t===h.Small?"h-[24px] w-[24px]":"h-[40px] w-[40px] dial-kit-enhanced-target","dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0 disabled:text-controls-secondary-disable",s),d=u.jsx("button",{...g,type:p,className:m,"aria-label":O(g["aria-label"],i?.tooltip),children:a});return i?u.jsx(j,{...i,children:d}):d};exports.ButtonAppearance=r;exports.ButtonVariant=l;exports.DialIconButton=U;exports.DialTooltip=j;exports.DialTooltipContainer=R;exports.DialTooltipContent=E;exports.DialTooltipTrigger=H;exports.ElementSize=h;exports.getButtonClassNames=S;exports.resolveAccessibleName=O;exports.useHasHover=D;
+"use strict";const u=require("react/jsx-runtime"),s=require("@floating-ui/react"),c=require("react"),x=require("classnames"),F=require("./merge-classes-BEJXjzkx.cjs");var l=(e=>(e.Primary="primary",e.Neutral="neutral",e.Danger="danger",e.Static="static",e.Starter="starter",e.Success="success",e.Secondary="secondary",e.Tertiary="tertiary",e))(l||{}),r=(e=>(e.Solid="solid",e.Outlined="outlined",e.Ghost="ghost",e.Link="link",e))(r||{});const v={[l.Primary]:{[r.Solid]:"dial-primary-solid-button",[r.Ghost]:"dial-primary-ghost-button",[r.Link]:"dial-primary-link-button"},[l.Neutral]:{[r.Outlined]:"dial-neutral-outlined-button"},[l.Danger]:{[r.Solid]:"dial-danger-solid-button",[r.Ghost]:"dial-danger-ghost-button",[r.Outlined]:"dial-danger-outlined-button"},[l.Success]:{[r.Ghost]:"dial-success-ghost-button"},[l.Secondary]:{[r.Ghost]:"dial-secondary-ghost-button"},[l.Tertiary]:{[r.Ghost]:"dial-tertiary-ghost-button"},[l.Static]:{},[l.Starter]:{}},S=(e=l.Primary,o=r.Solid)=>{const t=v[e]?.[o];return t||(console.warn(`Could not find Button styles for variant: ${e} and appearance: ${o}. Using default primary solid button styles.`),v[l.Primary][r.Solid])};var h=(e=>(e.Small="small",e.Standard="standard",e.Large="large",e))(h||{});const I=7,A=2,C=c.createContext(null),N=()=>{const e=c.useContext(C);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},q=({initialOpen:e=!1,placement:o="bottom",isTriggerClickable:t=!1,open:n,onOpenChange:a}={})=>{const[i,p]=c.useState(e),g=c.useRef(null),m=n??i,d=a??p,f=s.useFloating({placement:o,open:m,onOpenChange:d,whileElementsMounted:s.autoUpdate,middleware:[s.offset(I+A),s.flip({crossAxis:o.includes("-"),fallbackAxisSideDirection:"start",padding:5}),s.shift({padding:5}),s.arrow({element:g})]}),M=s.useHover(f.context,{move:!1,enabled:n==null,mouseOnly:t,delay:{open:500,close:0}}),k=s.useFocus(f.context,{enabled:n==null}),P=s.useDismiss(f.context),G=s.useRole(f.context,{role:"tooltip"}),y=s.useInteractions([M,k,P,G]);return c.useEffect(()=>{if(!m)return;const b=f.refs.reference.current;if(!(b instanceof Element))return;const w=new IntersectionObserver(([L])=>{L.isIntersecting||d(!1)},{root:null,threshold:0});return w.observe(b),()=>w.disconnect()},[m,f.refs.reference,d]),c.useMemo(()=>({open:m,setOpen:d,arrowRef:g,...y,...f}),[m,d,y,f])},R=({children:e,...o})=>{const t=q(o);return u.jsx(C.Provider,{value:t,children:e})},T="(hover: none)",_=()=>typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(T).matches,D=()=>{const[e,o]=c.useState(()=>!_());return c.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return;const t=window.matchMedia(T);if(o(!t.matches),typeof t.addEventListener!="function")return;const n=a=>o(!a.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)},[]),e},E=({style:e,...o})=>{const t=N(),n=D(),a=c.useRef(null),i=s.useMergeRefs([t.refs.setFloating,a]);return!t.open||!n?null:u.jsx(s.FloatingPortal,{id:"tooltip-portal",children:u.jsxs("div",{ref:i,style:{...t.floatingStyles,...e},...t.getFloatingProps(o),className:x("z-tooltip whitespace-pre-wrap break-words rounded border border-primary bg-layer-0 px-2 py-1 dial-tiny-text shadow max-w-[300px]",t.getFloatingProps(o).className),children:[o.children,u.jsx(s.FloatingArrow,{ref:t.arrowRef,context:t.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary text-[var(--bg-layer-0,_#000000)]"})]})})},H=({children:e,asChild:o=!1,...t})=>{const n=N(),a=o&&c.isValidElement(e),i=a?e.props?.ref:null,p=s.useMergeRefs([n.refs.setReference,...i?[i]:[]]);return a?c.cloneElement(e,n.getReferenceProps({...e.props,...t,ref:p})):u.jsx("span",{ref:p,...n.getReferenceProps(t),className:t.className??"dial-tooltip-trigger text-start",children:e})},j=({hideTooltip:e,tooltip:o,children:t,triggerClassName:n,contentClassName:a,...i})=>u.jsxs(R,{...i,children:[u.jsx(H,{className:x(n,"truncate"),children:t}),u.jsx(E,{className:x("text-primary",a,"max-w-[300px]",(e||!o)&&"hidden"),children:o})]}),O=(...e)=>e.find(o=>typeof o=="string"&&o.length>0),U=({variant:e,appearance:o=r.Solid,size:t=h.Standard,className:n,icon:a,tooltipProps:i,type:p="button",...g})=>{const m=F.mergeClasses(e&&S(e,o),t===h.Small?"h-[24px] w-[24px]":"h-[40px] w-[40px] dial-kit-enhanced-target","dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0",n),d=u.jsx("button",{...g,type:p,className:m,"aria-label":O(g["aria-label"],i?.tooltip),children:a});return i?u.jsx(j,{...i,children:d}):d};exports.ButtonAppearance=r;exports.ButtonVariant=l;exports.DialIconButton=U;exports.DialTooltip=j;exports.DialTooltipContainer=R;exports.DialTooltipContent=E;exports.DialTooltipTrigger=H;exports.ElementSize=h;exports.getButtonClassNames=S;exports.resolveAccessibleName=O;exports.useHasHover=D;

package/dist/{MarkdownEditorContainer-B5aHwoYF.cjs → MarkdownEditorContainer-DLPODjar.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-DE6MrcqJ.cjs"),N=require("./lazy-_W6FYhKg.cjs"),b=require("./MarkdownEditor-Bapd1ycU.cjs"),g=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=N.EditorThemes.dark,onValidateJSON:x,preview:j="edit",showDragbar:w=!0})=>{const C=n.useId(),[t,p]=n.useState(!1),[f,S]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-Bxui5wJH.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),o=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||o)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,o&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:C,onChange:s=>p(s)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-DAaAOaIu.cjs"),N=require("./lazy-_W6FYhKg.cjs"),b=require("./MarkdownEditor-Bapd1ycU.cjs"),g=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=N.EditorThemes.dark,onValidateJSON:x,preview:j="edit",showDragbar:w=!0})=>{const C=n.useId(),[t,p]=n.useState(!1),[f,S]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-Bxui5wJH.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),o=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||o)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,o&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:C,onChange:s=>p(s)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;

package/dist/{Switch-DE6MrcqJ.cjs → Switch-DAaAOaIu.cjs}

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),p=require("./merge-classes-BEJXjzkx.cjs"),d=require("@tabler/icons-react"),i=require("./IconButton-DHOFapLo.cjs"),f=require("./icon-CrGVkVpG.cjs"),l=require("classnames"),h=require("react"),y="w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active",o=({caption:t,onClick:a})=>{if(!t)return null;const s=e.jsx(i.DialIconButton,{"aria-label":t,className:y,icon:e.jsx(d.IconInfoCircle,{size:f.DIAL_ICON_SIZE.SM}),onClick:a});return t?e.jsx(i.DialTooltip,{tooltip:t,triggerClassName:"flex justify-center items-center",children:s}):s},j=({label:t,required:a,className:s,caption:r,...n})=>t?e.jsxs("label",{...n,className:p.mergeClasses("dial-tiny-text text-secondary flex items-center gap-1",s),children:[typeof t=="string"?e.jsx("span",{className:"min-h-4",children:t}):t,a&&e.jsx("span",{className:"text-accent-primary",children:"*"}),e.jsx(o,{caption:r})]}):null,N=({label:t,switchId:a,isOn:s=!1,disabled:r,onChange:n,caption:c})=>{const x=l("flex shrink-0 w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",s?"flex-row-reverse":"flex-row",r?"pointer-events-none":"",r?s?"bg-controls-disable":"bg-layer-4":s?"bg-accent-primary":"bg-layer-4"),m=h.useCallback(u=>{u.stopPropagation(),n?.(!s)},[n,s]);return e.jsxs("div",{className:"flex flex-row items-start",role:"switch",children:[e.jsx("input",{type:"checkbox",onChange:m,id:a,disabled:r,className:"invisible size-0",checked:s}),e.jsx("label",{htmlFor:a,className:x,"aria-describedby":c&&"caption",children:e.jsx("span",{className:l("size-3 rounded-full",r?"bg-controls-disable-accent":"bg-controls-enable-primary")})}),(t||c)&&e.jsxs("div",{className:"flex flex-col gap-1 ml-2",children:[t&&e.jsx("span",{className:l("dial-small-text py-[1px]",r?"text-secondary":"text-primary"),"aria-label":"switch-title",children:t}),c&&e.jsx("span",{id:"caption",className:"dial-tiny-text text-secondary",children:c})]})]})};exports.DialInfoButton=o;exports.DialLabel=j;exports.DialSwitch=N;
+"use strict";const e=require("react/jsx-runtime"),p=require("./merge-classes-BEJXjzkx.cjs"),d=require("@tabler/icons-react"),i=require("./IconButton-B1Hx0Y3y.cjs"),f=require("./icon-CrGVkVpG.cjs"),l=require("classnames"),h=require("react"),y="w-[24px] h-[24px] border border-solid rounded-[6px] border-transparent flex items-center justify-center text-secondary hover:text-controls-accent-primary-hover active:text-controls-accent-primary-active",o=({caption:t,onClick:a})=>{if(!t)return null;const s=e.jsx(i.DialIconButton,{"aria-label":t,className:y,icon:e.jsx(d.IconInfoCircle,{size:f.DIAL_ICON_SIZE.SM}),onClick:a});return t?e.jsx(i.DialTooltip,{tooltip:t,triggerClassName:"flex justify-center items-center",children:s}):s},j=({label:t,required:a,className:s,caption:r,...n})=>t?e.jsxs("label",{...n,className:p.mergeClasses("dial-tiny-text text-secondary flex items-center gap-1",s),children:[typeof t=="string"?e.jsx("span",{className:"min-h-4",children:t}):t,a&&e.jsx("span",{className:"text-accent-primary",children:"*"}),e.jsx(o,{caption:r})]}):null,N=({label:t,switchId:a,isOn:s=!1,disabled:r,onChange:n,caption:c})=>{const x=l("flex shrink-0 w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",s?"flex-row-reverse":"flex-row",r?"pointer-events-none":"",r?s?"bg-controls-disable":"bg-layer-4":s?"bg-accent-primary":"bg-layer-4"),m=h.useCallback(u=>{u.stopPropagation(),n?.(!s)},[n,s]);return e.jsxs("div",{className:"flex flex-row items-start",role:"switch",children:[e.jsx("input",{type:"checkbox",onChange:m,id:a,disabled:r,className:"invisible size-0",checked:s}),e.jsx("label",{htmlFor:a,className:x,"aria-describedby":c&&"caption",children:e.jsx("span",{className:l("size-3 rounded-full",r?"bg-controls-disable-accent":"bg-controls-enable-primary")})}),(t||c)&&e.jsxs("div",{className:"flex flex-col gap-1 ml-2",children:[t&&e.jsx("span",{className:l("dial-small-text py-[1px]",r?"text-secondary":"text-primary"),"aria-label":"switch-title",children:t}),c&&e.jsx("span",{id:"caption",className:"dial-tiny-text text-secondary",children:c})]})]})};exports.DialInfoButton=o;exports.DialLabel=j;exports.DialSwitch=N;

package/dist/components/Analytics/Bar/Bar.js

@@ -9,7 +9,7 @@ const L = ({
   error: e,
   isLoading: s,
   title: i,
-  valueLabel: x,
+  valueLabel: p,
   colorMap: u = _,
   className: m,
   titleClassName: w,
@@ -17,7 +17,7 @@ const L = ({
   inline: o,
   ariaLabel: v
 }) => {
-  const n = a == null, N = !!(e || s || !n), d = j(n ? 0 : a, c), b = T(d, u), g = x ?? (n ? "—" : a), A = v ?? (typeof i == "string" ? i : void 0), B = e || s, f = e ? /* @__PURE__ */ l(C, {}) : s ? /* @__PURE__ */ l(D, { fullWidth: !1 }) : /* @__PURE__ */ l(
+  const n = a == null, N = !!(e || s || !n), d = j(n ? 0 : a, c), b = T(d, u), g = p ?? (n ? "—" : a), A = v ?? (typeof i == "string" ? i : void 0), B = e || s, f = e ? /* @__PURE__ */ l(C, {}) : s ? /* @__PURE__ */ l(D, { fullWidth: !1 }) : /* @__PURE__ */ l(
     "span",
     {
       className: r(
@@ -36,19 +36,19 @@ const L = ({
       "aria-valuemax": c,
       "aria-label": A,
       className: r(
-        "w-full overflow-hidden rounded-sm",
+        "w-full overflow-hidden rounded-xs",
         o ? "h-1" : "h-2",
         e ? "bg-error" : "bg-layer-1"
       ),
       children: !B && /* @__PURE__ */ l(
         "div",
         {
-          className: "h-full rounded-sm transition-[width] duration-300",
+          className: "h-full rounded-xs transition-[width] duration-300",
           style: { width: `${d * 100}%`, backgroundColor: b }
         }
       )
     }
-  ) : null, p = /* @__PURE__ */ l(
+  ) : null, x = /* @__PURE__ */ l(
     "span",
     {
       className: r("dial-small-text text-primary", w),
@@ -60,7 +60,7 @@ const L = ({
     {
       className: r("flex flex-row items-center gap-2", m),
       children: [
-        /* @__PURE__ */ l("div", { className: "w-1/2 min-w-0", children: p }),
+        /* @__PURE__ */ l("div", { className: "w-1/2 min-w-0", children: x }),
         /* @__PURE__ */ t("div", { className: "flex w-1/2 flex-row items-center gap-2", children: [
           /* @__PURE__ */ l("div", { className: "min-w-0 flex-1", children: h }),
           f
@@ -69,7 +69,7 @@ const L = ({
     }
   ) : /* @__PURE__ */ t("div", { className: r("flex flex-col gap-1", m), children: [
     /* @__PURE__ */ t("div", { className: "flex flex-row items-center justify-between gap-2", children: [
-      p,
+      x,
       f
     ] }),
     h

package/dist/components/Analytics/BarGroup/BarGroup.js

@@ -3,17 +3,17 @@ import { Fragment as Q } from "react";
 import { DialAccordion as R } from "../../Accordion/Accordion.js";
 import { DialAnalyticsBar as b } from "../Bar/Bar.js";
 import { DialLoader as U } from "../../Loader/Loader.js";
-import { DialTooltip as g } from "../../Tooltip/Tooltip.js";
-import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { DialTooltip as x } from "../../Tooltip/Tooltip.js";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
 const k = ({
-  title: x,
+  title: g,
   titleTooltip: h,
   description: S,
-  data: i,
+  data: a,
   compareData: r,
   compareLabels: m,
   maxValue: p,
-  colorMap: u,
+  colorMap: d,
   defaultExpanded: E = !0,
   nonCollapsible: G,
   isLoading: K,
@@ -25,7 +25,7 @@ const k = ({
   barDescriptions: C,
   className: T
 }) => {
-  const W = Object.entries(i), q = c ? a("text-secondary", N) : N, j = m ? "dial-tiny-text text-secondary" : void 0, z = h ? /* @__PURE__ */ t(g, { tooltip: h, children: x }) : x, H = r ? [.../* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)])] : [], y = "cursor-pointer rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary", F = "group flex flex-col gap-1.5", I = a(
+  const W = Object.entries(a), q = c ? i("text-secondary", N) : N, j = m ? "dial-tiny-text text-secondary" : void 0, z = h ? /* @__PURE__ */ t(x, { tooltip: h, children: g }) : g, H = r ? [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(r)])] : [], y = "cursor-pointer rounded-xs text-left focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-primary", F = "group flex flex-col gap-1.5", I = i(
     "flex flex-col gap-1.5 pl-2",
     o && "group-hover:bg-accent-primary-alpha group-focus-visible:bg-accent-primary-alpha",
     v
@@ -41,18 +41,18 @@ const k = ({
       children: /* @__PURE__ */ t(
         "div",
         {
-          className: a(
+          className: i(
             "flex flex-col",
             r ? "gap-4" : c ? "gap-2" : "gap-3"
           ),
           children: K ? /* @__PURE__ */ t(U, { fullWidth: !1, className: "self-center" }) : r ? H.map((e) => {
-            const l = e in i ? i[e] : null, n = e in r ? r[e] : null, s = typeof l == "number" && typeof n == "number" ? parseFloat((n - l).toFixed(3)) : null, L = s != null && s !== 0, A = L && s > 0, D = L ? A ? `+${s}` : String(s) : null, O = C?.[e], $ = /* @__PURE__ */ t("span", { className: "dial-small-text text-secondary", children: e }), w = /* @__PURE__ */ f(J, { children: [
+            const l = e in a ? a[e] : null, n = e in r ? r[e] : null, s = typeof l == "number" && typeof n == "number" ? parseFloat((n - l).toFixed(3)) : null, L = s != null && s !== 0, A = L && s > 0, D = L ? A ? `+${s}` : String(s) : null, O = C?.[e], $ = /* @__PURE__ */ t("span", { className: "dial-small-text text-secondary", children: e }), w = /* @__PURE__ */ f(J, { children: [
               /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-                O ? /* @__PURE__ */ t(g, { tooltip: O, children: $ }) : $,
+                O ? /* @__PURE__ */ t(x, { tooltip: O, children: $ }) : $,
                 D != null && /* @__PURE__ */ t(
                   "span",
                   {
-                    className: a(
+                    className: i(
                       "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
                       A ? "bg-success text-success" : "bg-error text-error"
                     ),
@@ -67,7 +67,7 @@ const k = ({
                     title: m?.[0],
                     value: l,
                     maxValue: p,
-                    colorMap: u,
+                    colorMap: d,
                     inline: c,
                     titleClassName: j,
                     ariaLabel: e
@@ -79,7 +79,7 @@ const k = ({
                     title: m?.[1],
                     value: n,
                     maxValue: p,
-                    colorMap: u,
+                    colorMap: d,
                     inline: c,
                     titleClassName: j,
                     ariaLabel: `${e} compare`
@@ -92,7 +92,7 @@ const k = ({
               {
                 type: "button",
                 onClick: () => o(e, l),
-                className: a(
+                className: i(
                   F,
                   y
                 ),
@@ -107,13 +107,13 @@ const k = ({
                 title: e,
                 value: l,
                 maxValue: p,
-                colorMap: u,
+                colorMap: d,
                 inline: c,
                 titleClassName: q,
                 valueClassName: P,
                 className: v
               }
-            ), d = o ? /* @__PURE__ */ t(
+            ), u = o ? /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
@@ -123,14 +123,14 @@ const k = ({
               }
             ) : n, s = C?.[e];
             return s ? /* @__PURE__ */ t(
-              g,
+              x,
               {
                 tooltip: s,
                 triggerClassName: "flex flex-col",
-                children: d
+                children: u
               },
               e
-            ) : /* @__PURE__ */ t(Q, { children: d }, e);
+            ) : /* @__PURE__ */ t(Q, { children: u }, e);
           })
         }
       )

package/dist/components/Analytics/Histogram/Histogram.js

@@ -32,16 +32,16 @@ const u = 128, O = (s, i) => {
   const k = A(i, l), y = h ? A(h, l) : void 0, c = i.length, p = h?.length ?? 0, N = Math.max(c, p), b = B(N), m = S(N), v = (e) => e.map((r) => ({
     ...r,
     ratio: b > 0 ? r.count / b : 0
-  })), f = v(k), $ = y ? v(y) : void 0, C = (e, r, a, g) => {
+  })), f = v(k), $ = y ? v(y) : void 0, C = (e, r, a, x) => {
     if (e.count === 0)
       return /* @__PURE__ */ t("div", { className: "flex h-full flex-1 items-end", "aria-hidden": "true", children: /* @__PURE__ */ t(
         "div",
         {
-          className: "min-h-2 w-full rounded-sm",
+          className: "min-h-2 w-full rounded-xs",
           style: { height: `${e.ratio * 100}%` }
         }
       ) });
-    const x = g ? {
+    const g = x ? {
       backgroundImage: `repeating-linear-gradient(135deg, ${e.color} 0px, ${e.color} 1px, transparent 1px, transparent 4px)`,
       borderColor: e.color
     } : { backgroundColor: e.color };
@@ -56,8 +56,8 @@ const u = 128, O = (s, i) => {
           {
             role: "img",
             "aria-label": a,
-            className: "flex min-h-2 w-full items-center justify-center rounded-sm border border-transparent",
-            style: { height: `${e.ratio * 100}%`, ...x },
+            className: "flex min-h-2 w-full items-center justify-center rounded-xs border border-transparent",
+            style: { height: `${e.ratio * 100}%`, ...g },
             children: d && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
           }
         )
@@ -111,7 +111,7 @@ const u = 128, O = (s, i) => {
             className: "relative flex items-end gap-1",
             style: { height: u },
             children: $ ? f.map((e, r) => {
-              const a = $[r], g = `${e.count} out of ${c} ${o}`, x = `${a.count} out of ${p} ${o}`;
+              const a = $[r], x = `${e.count} out of ${c} ${o}`, g = `${a.count} out of ${p} ${o}`;
               return /* @__PURE__ */ n("div", { className: "flex h-full flex-1 items-end", children: [
                 C(
                   e,
@@ -122,7 +122,7 @@ const u = 128, O = (s, i) => {
                     o,
                     e
                   ),
-                  g,
+                  x,
                   !0
                 ),
                 C(
@@ -134,7 +134,7 @@ const u = 128, O = (s, i) => {
                     o,
                     a
                   ),
-                  x,
+                  g,
                   !1
                 )
               ] }, r);
@@ -148,7 +148,7 @@ const u = 128, O = (s, i) => {
                   children: /* @__PURE__ */ t(
                     "div",
                     {
-                      className: "min-h-2 w-full rounded-sm",
+                      className: "min-h-2 w-full rounded-xs",
                       style: { height: `${e.ratio * 100}%` }
                     }
                   )
@@ -166,7 +166,7 @@ const u = 128, O = (s, i) => {
                       role: "img",
                       "aria-label": a,
                       className: H(
-                        "flex min-h-2 w-full items-center justify-center rounded-sm border",
+                        "flex min-h-2 w-full items-center justify-center rounded-xs border",
                         "border-transparent"
                       ),
                       style: {

package/dist/components/Checkbox/Checkbox.js

@@ -1,15 +1,15 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
 import { IconMinus as y, IconCheck as N } from "@tabler/icons-react";
 import m from "classnames";
 import { useCallback as C } from "react";
 import { BASE_ICON_PROPS as l } from "../../constants/icon.js";
 import { DialEllipsisTooltip as k } from "../EllipsisTooltip/EllipsisTooltip.js";
 import { ariaDescription as g } from "./constants.js";
-const S = ({
+const O = ({
   label: r,
   id: e,
   checked: o,
-  indeterminate: i,
+  indeterminate: n,
   disabled: s,
   ariaLabel: f,
   onChange: t,
@@ -23,13 +23,13 @@ const S = ({
     [t, e]
   ), x = m(
     "flex flex-row items-center cursor-pointer text-accent-primary small-medium min-w-0",
-    `${o || i ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded'}`,
+    `${o || n ? "" : 'before:content-[""] before:inline-block before:size-[18px] before:border before:border-hover before:rounded'}`,
     s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : "",
     p
   ), c = m(
     "border rounded",
     s ? "bg-layer-4 border-icon-secondary" : ""
-  ), d = () => i ? /* @__PURE__ */ n(y, { className: c, ...l }) : o ? /* @__PURE__ */ n(N, { className: c, ...l }) : null;
+  ), d = () => n ? /* @__PURE__ */ i(y, { className: c, ...l }) : o ? /* @__PURE__ */ i(N, { className: c, ...l }) : null;
   return /* @__PURE__ */ h(
     "label",
     {
@@ -39,8 +39,8 @@ const S = ({
       "aria-description": a["aria-description"] || g,
       children: [
         d(),
-        r && (typeof r == "string" ? /* @__PURE__ */ n(k, { text: r, className: "ml-2 text-primary" }) : r),
-        /* @__PURE__ */ n(
+        r && (typeof r == "string" ? /* @__PURE__ */ i(k, { text: r, className: "ml-2 text-primary" }) : r),
+        /* @__PURE__ */ i(
           "input",
           {
             type: "checkbox",
@@ -49,7 +49,7 @@ const S = ({
             onChange: b,
             id: e,
             checked: o,
-            "aria-checked": i ? "mixed" : o,
+            "aria-checked": n ? "mixed" : o,
             "aria-disabled": s || void 0,
             "aria-label": r ? void 0 : f,
             className: "invisible size-0"
@@ -60,5 +60,5 @@ const S = ({
   );
 };
 export {
-  S as DialCheckbox
+  O as DialCheckbox
 };

package/dist/components/Dropdown/constants.js

@@ -6,10 +6,10 @@ const i = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
 ), m = o(
-  "z-floating overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none"
+  "z-floating overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-hidden"
 ), l = o(
   "flex w-full cursor-pointer items-center gap-3",
-  "focus-visible:border-none focus-visible:outline-none",
+  "focus-visible:border-none focus-visible:outline-hidden",
   "hover:bg-accent-primary-alpha px-3",
   "dial-small-text h-[34px] rounded text-primary",
   s.menuItem

package/dist/components/DropdownIcon/DropdownIcon.js

@@ -13,8 +13,8 @@ const F = ({
   size: n = r.Standard,
   disabled: a = !1,
   className: u,
-  buttonClassName: x,
-  iconClassName: h,
+  buttonClassName: h,
+  iconClassName: x,
   caretIcon: y = /* @__PURE__ */ e(O, { size: _.SM }),
   showCaret: t = !0,
   placement: g = "bottom-start",
@@ -51,10 +51,10 @@ const F = ({
           className: o(
             "group flex items-center justify-center rounded border border-transparent bg-layer-4 text-primary",
             "enabled:hover:bg-accent-primary-alpha enabled:active:bg-controls-accent-primary-alpha-active",
-            "focus-visible:border-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:text-controls-secondary-disable disabled:opacity-75",
+            "focus-visible:border-focus focus-visible:outline-hidden disabled:cursor-not-allowed disabled:text-controls-secondary-disable disabled:opacity-75",
             i ? "h-8 px-2" : "h-10 px-2",
             t ? void 0 : w,
-            x
+            h
           ),
           children: [
             /* @__PURE__ */ e(
@@ -65,7 +65,7 @@ const F = ({
                   "flex items-center justify-center text-inherit",
                   N[n],
                   t && "-mr-2",
-                  h,
+                  x,
                   p.dropdownIcon
                 )
               }

package/dist/components/Grid/Grid.js

@@ -8,12 +8,12 @@ import { DialEllipsisTooltip as De } from "../EllipsisTooltip/EllipsisTooltip.js
 import { RADIO_BUTTON_COL_DEF as Ae, CHECKBOX_COL_DEF as Te } from "./renderers/constants.js";
 import { DialNoDataContent as Ge } from "../NoDataContent/NoDataContent.js";
 import { DialRadioButton as ve } from "../RadioButton/RadioButton.js";
-import { GridSelectionMode as x } from "../../models/selection-mode.js";
+import { GridSelectionMode as z } from "../../models/selection-mode.js";
 import { DropdownTrigger as w } from "../../types/dropdown.js";
 import { IconZoomCancel as Oe } from "@tabler/icons-react";
-import { GRID_THEME_COLORS as z, SelectionEventSourceType as p, checkboxClass as I, ROW_HEIGHT as ee, gridBaseClassName as xe } from "./constants.js";
+import { GRID_THEME_COLORS as x, SelectionEventSourceType as p, checkboxClass as I, ROW_HEIGHT as ee, gridBaseClassName as ze } from "./constants.js";
 import { ariaDescription as re } from "../Checkbox/constants.js";
-import { useIsMobileScreen as ze } from "../../hooks/use-is-mobile-screen.js";
+import { useIsMobileScreen as xe } from "../../hooks/use-is-mobile-screen.js";
 import { useIsTabletScreen as _e } from "../../hooks/use-is-tablet-screen.js";
 import { debounceFn as ke } from "../../utils/debounce.js";
 import { registerAgGridModulesOnce as He } from "../../utils/grid-registration.js";
@@ -43,12 +43,12 @@ const or = ({
   selectionMode: d
 }) => {
   He();
-  const [t, se] = ye(), ae = Ee(), g = ze(), b = _e(), A = Y(/* @__PURE__ */ new Set()), U = Y(
+  const [t, se] = ye(), ae = Ee(), g = xe(), b = _e(), A = Y(/* @__PURE__ */ new Set()), U = Y(
     void 0
   ), le = h(
     () => ({
-      ...z,
-      oddRowBackgroundColor: H ? z.oddRowBackgroundColor : z.backgroundColor,
+      ...x,
+      oddRowBackgroundColor: H ? x.oddRowBackgroundColor : x.backgroundColor,
       wrapperBorder: $
     }),
     [H, $]
@@ -122,12 +122,12 @@ const or = ({
     const e = "dial-row-select", r = "dial-row-select-visible";
     return g || b || n && n.size > 0 ? `${e} ${r}` : !n || n.size === 0 ? e : `${e} ${r}`;
   }, [g, b, n]), K = l(() => g || b ? S() : !n || n.size === 0 ? "dial-row-not-select-header" : S(), [S, g, b, n]), fe = h(() => {
-    if (d === x.SINGLE)
+    if (d === z.SINGLE)
       return {
         ...Ae,
         cellRenderer: q
       };
-    if (d === x.MULTIPLE)
+    if (d === z.MULTIPLE)
       return {
         ...Te,
         headerClass: () => K(),
@@ -165,7 +165,7 @@ const or = ({
             anchorToMouse: !0,
             matchReferenceWidth: !0,
             className: Q(
-              "w-full h-full",
+              "size-full",
               Z && "!cursor-not-allowed opacity-75"
             ),
             disabled: Z && !N,
@@ -240,7 +240,7 @@ const or = ({
   ), Se = h(() => {
     if (d)
       return {
-        mode: d === x.SINGLE ? "singleRow" : "multiRow",
+        mode: d === z.SINGLE ? "singleRow" : "multiRow",
         isRowSelectable: (e) => {
           const r = e.data ? i(e.data) : null;
           return r ? !c?.has(r) : !0;
@@ -281,7 +281,7 @@ const or = ({
     "div",
     {
       className: Q(
-        xe,
+        ze,
         te,
         d && "with-selection-column",
         ie && "dial-without-header-borders"

package/dist/components/IconButton/IconButton.js

@@ -1,13 +1,13 @@
 import { jsx as i } from "react/jsx-runtime";
-import { ButtonAppearance as u } from "../../types/button.js";
+import { ButtonAppearance as f } from "../../types/button.js";
 import { getButtonClassNames as b } from "../Button/utils.js";
-import { DialTooltip as f } from "../Tooltip/Tooltip.js";
+import { DialTooltip as d } from "../Tooltip/Tooltip.js";
 import { mergeClasses as p } from "../../utils/merge-classes.js";
 import { resolveAccessibleName as x } from "../../utils/accessible-name.js";
 import { ElementSize as a } from "../../types/size.js";
 const v = ({
   variant: t,
-  appearance: n = u.Solid,
+  appearance: n = f.Solid,
   size: r = a.Standard,
   className: s,
   icon: m,
@@ -15,17 +15,17 @@ const v = ({
   type: c = "button",
   ...e
 }) => {
-  const d = p(
+  const u = p(
     t && b(t, n),
     r === a.Small ? "h-[24px] w-[24px]" : "h-[40px] w-[40px] dial-kit-enhanced-target",
-    "dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0 disabled:text-controls-secondary-disable",
+    "dial-icon-button disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0",
     s
   ), l = /* @__PURE__ */ i(
     "button",
     {
       ...e,
       type: c,
-      className: d,
+      className: u,
       "aria-label": x(
         e["aria-label"],
         o?.tooltip
@@ -33,7 +33,7 @@ const v = ({
       children: m
     }
   );
-  return o ? /* @__PURE__ */ i(f, { ...o, children: l }) : l;
+  return o ? /* @__PURE__ */ i(d, { ...o, children: l }) : l;
 };
 export {
   v as DialIconButton

package/dist/components/InputPopup/InputPopup.js

@@ -5,7 +5,7 @@ import { useCallback as M } from "react";
 import { DialTooltip as P } from "../Tooltip/Tooltip.js";
 import { DialErrorText as N } from "../CaptionText/CaptionText.js";
 import { DialAutocompleteInputValue as _ } from "../AutocompleteInput/AutocompleteInputValue.js";
-import u from "../../assets/icons/open-popup.svg.js";
+import d from "../../assets/icons/open-popup.svg.js";
 import { DialIcon as r } from "../Icon/Icon.js";
 import { BASE_ICON_SIZE as a } from "../../constants/icon.js";
 const U = ({
@@ -13,7 +13,7 @@ const U = ({
   open: k,
   disabled: l = !1,
   selectedValue: t,
-  valueClassName: d,
+  valueClassName: u,
   inputClassName: f,
   onOpen: h,
   elementId: x,
@@ -56,7 +56,7 @@ const U = ({
             r,
             {
               icon: /* @__PURE__ */ i(
-                u,
+                d,
                 {
                   role: "img",
                   width: a,
@@ -85,8 +85,8 @@ const U = ({
                 {
                   type: "text",
                   className: c(
-                    "flex-1 min-w-0 bg-transparent outline-none border-none p-0 dial-small-text text-primary placeholder:text-secondary",
-                    d
+                    "flex-1 min-w-0 bg-transparent outline-hidden border-none p-0 dial-small-text text-primary placeholder:text-secondary",
+                    u
                   ),
                   value: typeof t == "string" ? t : "",
                   placeholder: o || w,
@@ -108,7 +108,7 @@ const U = ({
                   r,
                   {
                     icon: /* @__PURE__ */ i(
-                      u,
+                      d,
                       {
                         role: "img",
                         width: a,
@@ -144,13 +144,13 @@ const U = ({
               children: [
                 /* @__PURE__ */ e("div", { className: "flex flex-row items-center gap-x-2 flex-1 min-w-0", children: [
                   n && /* @__PURE__ */ i(r, { icon: n }),
-                  /* @__PURE__ */ i(P, { tooltip: p == null ? void 0 : String(p), children: p || !o ? /* @__PURE__ */ i("span", { className: d, children: p }) : /* @__PURE__ */ i("span", { className: "text-secondary", children: o }) })
+                  /* @__PURE__ */ i(P, { tooltip: p == null ? void 0 : String(p), children: p || !o ? /* @__PURE__ */ i("span", { className: u, children: p }) : /* @__PURE__ */ i("span", { className: "text-secondary", children: o }) })
                 ] }),
                 !l && /* @__PURE__ */ i("div", { className: "shrink-0", children: /* @__PURE__ */ i(
                   r,
                   {
                     icon: /* @__PURE__ */ i(
-                      u,
+                      d,
                       {
                         role: "img",
                         width: a,