@epam/ai-dial-ui-kit 0.16.0-dev.15 → 0.16.0-dev.18

package/dist/JsonEditor-eAV7SaKu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("./editor-BH6_A1k2.cjs"),d=require("@monaco-editor/react");function f(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const m=f(d),b=({value:e,onChange:o,onValidateJSON:t,options:a,currentTheme:n,themesConfig:i=u.EDITOR_THEMES_CONFIG})=>{function s(r){r?.editor?.defineTheme(n,i[n]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=m;return c.jsx(l,{beforeMount:s,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:t,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...a??{}}})};exports.DialJsonEditor=b;

package/dist/{MarkdownEditor-BKtFs714.cjs → MarkdownEditor-Cp-KX6-T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-_W6FYhKg.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-DMVYJhUR.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-Bapd1ycU.cjs → MarkdownEditor-Dav_pp0T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-_W6FYhKg.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-DMVYJhUR.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;

package/dist/MarkdownEditorContainer-D8YTX8EM.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react");require("./editor-BH6_A1k2.cjs");const N=require("./lazy-DMVYJhUR.cjs");require("@monaco-editor/react");const m=require("./Switch-DAaAOaIu.cjs"),b=require("./MarkdownEditor-Dav_pp0T.cjs"),g=({value:o,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-eAV7SaKu.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),r=!!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||r)&&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,r&&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)})})]})]}),r&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:o,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:o,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,27 +1,29 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as J, useState as u, useEffect as S, useCallback as x } from "react";
-import { DialSwitch as b } from "../Switch/Switch.js";
-import { EditorThemes as v } from "../../types/editor.js";
+import "../../constants/editor.js";
+import { EditorThemes as b } from "../../types/editor.js";
+import "@monaco-editor/react";
+import { DialSwitch as v } from "../Switch/Switch.js";
 import { DialMarkdownEditor as y } from "./MarkdownEditor.js";
 import { DialLabel as j } from "../Label/Label.js";
-const B = ({
+const q = ({
   value: s,
   onChangeValue: l,
-  label: t,
+  label: i,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = v.dark,
+  theme: m = b.dark,
   onValidateJSON: f,
   preview: C = "edit",
   showDragbar: N = !0
 }) => {
-  const w = J(), [n, D] = u(!1), [p, E] = u(null);
+  const w = J(), [t, D] = u(!1), [p, E] = u(null);
   S(() => {
-    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    t && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       E(() => o.DialJsonEditor);
     });
-  }, [n]);
+  }, [t]);
   const h = x(
     (o) => {
       l?.(o);
@@ -32,16 +34,16 @@ const B = ({
       f?.(o);
     },
     [f]
-  ), i = !!a;
+  ), n = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (t || d || i) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      t && /* @__PURE__ */ e(j, { label: t }),
+    (i || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      i && /* @__PURE__ */ e(j, { label: i }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        i && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          b,
+        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          v,
           {
-            isOn: n,
+            isOn: t,
             label: a,
             switchId: w,
             onChange: (o) => D(o)
@@ -49,7 +51,7 @@ const B = ({
         ) })
       ] })
     ] }),
-    i && n ? /* @__PURE__ */ e(
+    n && t ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -78,5 +80,5 @@ const B = ({
   ] }) }) });
 };
 export {
-  B as DialMarkdownEditorContainer
+  q as DialMarkdownEditorContainer
 };

package/dist/components/New/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
 import { useId as u, useCallback as x } from "react";
 import { ElementSize as v } from "../../../types/size.js";
 import { mergeClasses as f } from "../../../utils/merge-classes.js";
@@ -11,31 +11,33 @@ const D = ({
   labelProps: e,
   isSelected: t = !1,
   isIndeterminate: r = !1,
-  invalid: i = !1,
+  invalid: m = !1,
   disabled: s,
   onChange: l,
-  caption: m,
+  caption: i,
   className: y,
   boxClassName: b,
   ...n
 }) => {
-  const k = u(), a = h ?? k, d = m ? `${a}-caption` : void 0, g = x(
-    (o) => {
-      l?.(o.target.checked);
+  const g = u(), o = h ?? g, p = i ? `${o}-caption` : void 0, k = x(
+    (a) => {
+      l?.(a.target.checked);
     },
     [l]
   ), N = x(
-    (o) => {
-      o && (o.indeterminate = r);
+    (a) => {
+      a && (a.indeterminate = r);
     },
     [r]
   );
-  return /* @__PURE__ */ p("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ p(
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ d(
       "div",
       {
         className: f(
-          "flex items-center gap-2",
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
           y,
           L.checkbox
         ),
@@ -46,26 +48,26 @@ const D = ({
               ...n,
               ref: N,
               type: "checkbox",
-              id: a,
+              id: o,
               checked: t,
               disabled: s,
-              onChange: g,
+              onChange: k,
               "aria-checked": r ? "mixed" : t,
-              "aria-invalid": i || void 0,
+              "aria-invalid": m || void 0,
               "aria-label": C(
                 typeof e?.label != "string" ? n["aria-label"] : void 0
               ),
-              "aria-describedby": d,
+              "aria-describedby": p,
               className: "peer sr-only"
             }
           ),
           /* @__PURE__ */ c(
             A,
             {
-              htmlFor: a,
+              htmlFor: o,
               isSelected: t,
               isIndeterminate: r,
-              invalid: i,
+              invalid: m,
               disabled: s,
               className: b
             }
@@ -75,7 +77,7 @@ const D = ({
             {
               size: v.Standard,
               ...e,
-              htmlFor: a,
+              htmlFor: o,
               className: f(
                 // `Label` defaults to the secondary colour; a checkbox's own label
                 // is primary while the control is usable.
@@ -88,12 +90,12 @@ const D = ({
         ]
       }
     ),
-    m && /* @__PURE__ */ c(
+    i && /* @__PURE__ */ c(
       "span",
       {
-        id: d,
+        id: p,
         className: "dial-tiny-text text-secondary ml-[28px]",
-        children: m
+        children: i
       }
     )
   ] });

package/dist/components/New/Checkbox/CheckboxBox.js

@@ -1,17 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
-import { IconMinus as u, IconCheck as d } from "@tabler/icons-react";
-import { mergeClasses as b } from "../../../utils/merge-classes.js";
-import { CHECKBOX_ICON_PROPS as p } from "./constants.js";
-import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
-const v = ({
-  isSelected: n = !1,
-  isIndeterminate: c = !1,
+import { IconMinus as m, IconCheck as u } from "@tabler/icons-react";
+import { mergeClasses as h } from "../../../utils/merge-classes.js";
+import { CHECKBOX_ICON_PROPS as i } from "./constants.js";
+import { DIAL_KIT_CLASS as g } from "../../../constants/public-class-names.js";
+const k = ({
+  isSelected: c = !1,
+  isIndeterminate: n = !1,
   invalid: r = !1,
   disabled: a = !1,
-  htmlFor: s,
-  className: m
+  htmlFor: l,
+  className: p
 }) => {
-  const o = c || n, e = !!s, l = b(
+  const o = n || c, e = !!l, s = h(
     "grid size-[20px] shrink-0 place-items-center rounded border transition-colors duration-200",
     // 20px is below the 24x24 minimum target, so grow the pointer target
     // without touching the rendered size. The 44px enhanced target would
@@ -19,18 +19,25 @@ const v = ({
     // box is not a target at all — the row around it is.
     e && "dial-kit-minimum-target",
     e && "peer-focus-visible:outline peer-focus-visible:outline-focus",
-    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : b(
+    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : h(
       r && o && "border-transparent bg-control-error text-control-permanent",
       r && !o && "border-error bg-control-neutral",
-      !r && o && "border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",
-      !r && !o && "border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"
+      !r && o && "border-transparent bg-control-accent text-control-permanent",
+      !r && !o && "border-default bg-control-neutral",
+      /*
+       * A control box reacts while either label of its `Checkbox` is hovered
+       * (the `group/choice` root); a decorative box only to its own hover,
+       * since the row around it owns the interaction.
+       */
+      !r && o && (e ? "group-has-[label:hover]/choice:bg-control-accent-hover" : "hover:bg-control-accent-hover"),
+      !r && !o && (e ? "group-has-[label:hover]/choice:border-accent group-has-[label:hover]/choice:bg-control-accent-alpha-hover" : "hover:border-accent hover:bg-control-accent-alpha-hover")
     ),
     a ? "cursor-not-allowed" : e && "cursor-pointer",
-    m,
-    f.checkboxBox
-  ), i = c ? /* @__PURE__ */ t(u, { ...p }) : n && /* @__PURE__ */ t(d, { ...p });
-  return e ? /* @__PURE__ */ t("label", { htmlFor: s, className: l, children: i }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: l, children: i });
+    p,
+    g.checkboxBox
+  ), b = n ? /* @__PURE__ */ t(m, { ...i }) : c && /* @__PURE__ */ t(u, { ...i });
+  return e ? /* @__PURE__ */ t("label", { htmlFor: l, className: s, children: b }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: s, children: b });
 };
 export {
-  v as CheckboxBox
+  k as CheckboxBox
 };

package/dist/components/New/FolderPath/FolderPath.js

@@ -1,111 +1,170 @@
-import { jsx as r, jsxs as l, Fragment as C } from "react/jsx-runtime";
-import { IconFolder as S, IconDots as _, IconChevronRight as L } from "@tabler/icons-react";
-import { DialBreadcrumbItem as x } from "../../Breadcrumb/BreadcrumbItem.js";
-import { breadcrumbListClassName as D, breadcrumbSeparatorClassName as y, breadcrumbItemBaseClassName as A, breadcrumbBaseClassName as B } from "../../Breadcrumb/constants.js";
-import { DialIcon as m } from "../../Icon/Icon.js";
-import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
-import { Tooltip as E } from "../Tooltip/Tooltip.js";
-import { DIAL_ICON_SIZE as n } from "../../../constants/icon.js";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { DIAL_KIT_CLASS as F } from "../../../constants/public-class-names.js";
-const T = 3, G = ({
-  segments: e,
-  labelClassName: d = "dial-small-text",
-  leafClassName: h = "dial-small-semi-text",
-  className: p,
-  ariaLabel: N = "Folder path"
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import { IconFolder as O, IconDots as G, IconChevronRight as V } from "@tabler/icons-react";
+import { useRef as f, useState as X, useCallback as v, useEffect as N } from "react";
+import { breadcrumbListClassName as Z, breadcrumbBaseClassName as $, breadcrumbCurrentClassName as q, breadcrumbLinkBaseClassName as H, breadcrumbItemBaseClassName as x, breadcrumbSeparatorClassName as J } from "../../Breadcrumb/constants.js";
+import { DialIcon as E } from "../../Icon/Icon.js";
+import { DIAL_KIT_ICON_STROKE as b } from "../constants/icon.js";
+import { Tooltip as Q } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as U } from "../../../constants/public-class-names.js";
+import { observeElementSize as Y, scheduleMeasure as y } from "../../../utils/element-size-observer.js";
+const ee = 3, fe = ({
+  segments: t,
+  labelClassName: R = "dial-small-text",
+  leafClassName: W = "dial-small-semi-text",
+  className: F,
+  ariaLabel: M = "Folder path"
 }) => {
-  const I = /* @__PURE__ */ r(
-    m,
+  const p = f(null), L = f(null), I = f(null), [i, P] = X(!1), C = f(!1), S = f(0), c = v((e) => {
+    C.current = e, P(e);
+  }, []), n = v(() => {
+    const e = p.current;
+    if (!e) return;
+    if (C.current) {
+      e.clientWidth >= S.current && c(!1);
+      return;
+    }
+    const r = L.current, a = I.current;
+    if (!r || !a) return;
+    const d = r.scrollWidth - r.clientWidth, B = parseFloat(getComputedStyle(a).minWidth) || 0, K = a.clientWidth <= B + 1;
+    d > 0 && K && (S.current = e.clientWidth + d, c(!0));
+  }, [c]);
+  N(() => {
+    const e = p.current;
+    if (e)
+      return Y(e, n);
+  }, [n]);
+  const A = t.join("\0");
+  N(() => {
+    c(!1), y(n);
+  }, [A, n, c]), N(() => {
+    i || y(n);
+  }, [i, n]);
+  const D = /* @__PURE__ */ s(
+    E,
     {
-      icon: /* @__PURE__ */ r(
-        S,
+      icon: /* @__PURE__ */ s(
+        O,
         {
-          size: n.SM,
-          stroke: t,
+          size: k.SM,
+          stroke: b,
           "aria-hidden": "true"
         }
       ),
       className: "text-secondary"
     }
-  ), c = /* @__PURE__ */ r(
-    m,
+  ), _ = /* @__PURE__ */ s("span", { className: J, children: /* @__PURE__ */ s(
+    E,
     {
-      icon: /* @__PURE__ */ r(
-        L,
+      icon: /* @__PURE__ */ s(
+        V,
         {
           size: 14,
-          stroke: t,
+          stroke: b,
           "aria-hidden": "true",
           className: "rtl:scale-x-[-1]"
         }
       ),
       className: "text-secondary"
     }
-  ), f = i(
-    d,
-    "text-secondary",
-    "!cursor-default"
-  ), o = (a) => {
-    const s = a === e.length - 1;
-    return /* @__PURE__ */ r(
-      x,
+  ) }), j = o(
+    R,
+    "text-secondary cursor-default"
+  ), l = t.length - 1, T = t.length >= 3 ? l - 1 : -1, g = t.length > ee || i, w = t.slice(
+    1,
+    i ? l : l - 1
+  ), u = (e) => {
+    const r = e === l, a = e === T;
+    let d = t[e];
+    return r && (d = /* @__PURE__ */ s("span", { className: W, children: t[e] })), /* @__PURE__ */ h(
+      "li",
       {
-        label: s ? /* @__PURE__ */ r("span", { className: h, children: e[a] }) : e[a],
-        disabled: !0,
-        iconBefore: a === 0 ? I : void 0,
-        isFirst: a === 0 && e.length > 1,
-        isLast: s,
-        separator: c,
-        labelClassName: f
+        className: o(
+          x,
+          r && "min-w-0",
+          // Gives up its width long before the leaf does.
+          a && "shrink-[1000]",
+          !r && !a && "shrink-0"
+        ),
+        children: [
+          /* @__PURE__ */ h(
+            "span",
+            {
+              className: o(
+                H,
+                q,
+                "pointer-events-none opacity-75",
+                // Lets the label's own minimum width hold the folder at one character.
+                a && "min-w-auto"
+              ),
+              "aria-current": r ? "page" : void 0,
+              "aria-disabled": "true",
+              children: [
+                e === 0 && D,
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    ref: r && L || a && I || void 0,
+                    className: o(
+                      "truncate",
+                      r && "min-w-0 flex-1",
+                      a && "min-w-[2ch]",
+                      j
+                    ),
+                    children: d
+                  }
+                )
+              ]
+            }
+          ),
+          !r && _
+        ]
       },
-      `item-${a}`
+      `item-${e}`
     );
-  }, u = e.length > T, b = e.slice(1, -2);
-  return /* @__PURE__ */ r(
-    "nav",
+  }, z = () => /* @__PURE__ */ h(
+    "li",
     {
-      "aria-label": N,
-      className: i(
-        B,
-        p,
-        F.folderPath
-      ),
-      children: /* @__PURE__ */ r("ol", { className: D, children: u ? /* @__PURE__ */ l(C, { children: [
-        o(0),
-        /* @__PURE__ */ l(
-          "li",
+      className: o(x, "shrink-0"),
+      children: [
+        /* @__PURE__ */ h(
+          Q,
           {
-            className: i(A, "shrink-0"),
+            tooltip: t.join(" > "),
+            triggerClassName: "inline-flex cursor-default items-center text-secondary",
             children: [
-              /* @__PURE__ */ l(
-                E,
+              /* @__PURE__ */ s(
+                G,
                 {
-                  tooltip: e.join(" > "),
-                  triggerClassName: "inline-flex cursor-default items-center text-secondary",
-                  children: [
-                    /* @__PURE__ */ r(
-                      _,
-                      {
-                        size: n.SM,
-                        stroke: t,
-                        "aria-hidden": "true"
-                      }
-                    ),
-                    /* @__PURE__ */ r("span", { className: "sr-only", children: b.join(", ") })
-                  ]
+                  size: k.SM,
+                  stroke: b,
+                  "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ r("span", { className: y, children: c })
+              /* @__PURE__ */ s("span", { className: "sr-only", children: w.join(", ") })
             ]
           }
         ),
-        o(e.length - 2),
-        o(e.length - 1)
-      ] }) : e.map((a, s) => o(s)) })
+        _
+      ]
+    },
+    "ellipsis"
+  ), m = [];
+  return g ? (m.push(u(0), z()), i || m.push(u(l - 1)), m.push(u(l))) : t.forEach((e, r) => m.push(u(r))), /* @__PURE__ */ s(
+    "nav",
+    {
+      ref: p,
+      "aria-label": M,
+      className: o(
+        $,
+        F,
+        U.folderPath
+      ),
+      children: /* @__PURE__ */ s("ol", { className: Z, children: m })
     }
   );
 };
 export {
-  G as FolderPath
+  fe as FolderPath
 };

package/dist/components/New/Popup/constants.js

@@ -1,5 +1,5 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h3-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"

package/dist/components/New/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { useId as h, useCallback as y } from "react";
+import { useId as x, useCallback as y } from "react";
 import { ElementSize as N } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
@@ -11,15 +11,15 @@ const F = ({
   value: i,
   labelProps: o,
   isSelected: l = !1,
-  disabled: t,
+  disabled: a,
   onChange: s,
   caption: c,
-  className: f,
+  className: b,
   ...n
 }) => {
-  const b = h(), a = p ?? b, d = c ? `${a}-caption` : void 0, g = y(
-    (x) => {
-      x.target.checked && s?.(i);
+  const f = x(), t = p ?? f, d = c ? `${t}-caption` : void 0, g = y(
+    (h) => {
+      h.target.checked && s?.(i);
     },
     [s, i]
   );
@@ -28,8 +28,10 @@ const F = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2 ",
-          f,
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
+          b,
           k.radio
         ),
         children: [
@@ -38,11 +40,11 @@ const F = ({
             {
               ...n,
               type: "radio",
-              id: a,
+              id: t,
               name: u,
               value: i,
               checked: l,
-              disabled: t,
+              disabled: a,
               onChange: g,
               "aria-label": v(
                 typeof o?.label != "string" ? n["aria-label"] : void 0
@@ -54,16 +56,16 @@ const F = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: a,
+              htmlFor: t,
               className: r(
-                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
+                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200",
                 // 20px is below the 24x24 minimum target, so grow the pointer target
                 // without touching the rendered size. The 44px enhanced target would
                 // overhang by 12px per side and swallow the adjacent label.
                 "dial-kit-minimum-target",
                 "peer-focus-visible:outline peer-focus-visible:outline-focus",
-                t ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
-                  "cursor-pointer",
+                a ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
+                  "cursor-pointer group-has-[label:hover]/choice:bg-control-accent-alpha-hover",
                   l ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
                 )
               ),
@@ -72,7 +74,7 @@ const F = ({
                 {
                   className: r(
                     "size-3 rounded-full",
-                    t ? "bg-control-disable-secondary" : "bg-control-accent"
+                    a ? "bg-control-disable-secondary" : "bg-control-accent"
                   )
                 }
               )
@@ -83,12 +85,12 @@ const F = ({
             {
               size: N.Standard,
               ...o,
-              htmlFor: a,
+              htmlFor: t,
               className: r(
                 // `Label` defaults to the secondary colour; a radio's own label is
                 // primary while the control is usable.
                 "py-[1px]",
-                t ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                a ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }