@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.7

package/dist/components/LoadFileArea/EmptyFileArea.js

@@ -1,8 +1,8 @@
-import { jsx as t, jsxs as y, Fragment as B } from "react/jsx-runtime";
+import { jsx as t, jsxs as y, Fragment as z } from "react/jsx-runtime";
 import { DialErrorText as x } from "../CaptionText/CaptionText.js";
 import { ButtonAppearance as Q } from "../../types/button.js";
 import U from "classnames";
-import { useRef as C, useState as k, useCallback as G, useMemo as L, useEffect as W } from "react";
+import { useRef as B, useState as k, useCallback as C, useMemo as G, useEffect as W } from "react";
 import { DialPrimaryButton as X } from "../Button/ButtonWrappers.js";
 import { useDrop as Y } from "../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
 import { FILE as Z } from "../../node_modules/react-dnd-html5-backend/dist/NativeTypes.js";
@@ -13,45 +13,45 @@ const nr = ({
   emptyButtonLabel: O,
   acceptTypes: A,
   maxFilesCount: m,
-  multiple: M,
+  multiple: L,
   fileFormatError: j,
-  fileCountError: w,
-  fileSizeError: R,
+  fileCountError: R,
+  fileSizeError: g,
   getIsFileFormatError: n,
   getIsFileSizeError: a
 }) => {
-  const g = C(null), h = C(null), [c, D] = k([]), [i, f] = k(!1), [u, d] = k(!1), P = G(
+  const w = B(null), h = B(null), [c, D] = k([]), [i, f] = k(!1), [d, u] = k(!1), M = C(
     (r) => {
       const e = r.target.files;
       if (e && e.length > 0) {
         const o = Array.from(e), p = n?.(o), v = a?.(o);
-        p ? f(!0) : v ? d(!0) : l(o);
+        p ? f(!0) : v ? u(!0) : l(o);
       }
     },
     [n, a, l]
-  ), s = G(
+  ), s = C(
     (r) => m && r?.length > m,
     [m]
-  ), F = L(() => i || u || s(c), [i, u, s, c]), b = () => {
-    D([]), f(!1), d(!1);
-  }, S = L(() => i ? /* @__PURE__ */ t(x, { text: j }) : u ? /* @__PURE__ */ t(x, { text: R }) : s(c) ? /* @__PURE__ */ t(x, { text: w }) : null, [
-    w,
-    j,
+  ), F = G(() => i || d || s(c), [i, d, s, c]), b = () => {
+    D([]), f(!1), u(!1);
+  }, P = G(() => i ? /* @__PURE__ */ t(x, { text: j }) : d ? /* @__PURE__ */ t(x, { text: g }) : s(c) ? /* @__PURE__ */ t(x, { text: R }) : null, [
     R,
+    j,
+    g,
     c,
     s,
     i,
-    u
+    d
   ]);
   W(() => {
     b();
   }, [A]);
-  const [{ isOver: T, canDrop: K }, V] = Y(
+  const [{ isOver: S, canDrop: K }, T] = Y(
     () => ({
       accept: [Z],
       drop(r) {
         const e = r.files, o = n?.(e) ?? !1, p = a?.(e) ?? !1, v = s?.(e) ?? !1;
-        if (f(o), d(p), o || p || v) {
+        if (f(o), u(p), o || p || v) {
           D(e);
           return;
         }
@@ -63,27 +63,27 @@ const nr = ({
       })
     }),
     [l, n, a, s]
-  ), q = (r) => {
+  ), V = (r) => {
     (r.key === "Enter" || r.key === "Space") && (r.preventDefault(), h.current?.click());
-  }, z = (r) => {
+  }, q = (r) => {
     r?.preventDefault();
     const e = Array.from(r.dataTransfer?.items ?? []);
-    f(!!n?.(e)), d(!!a?.(e)), D(e);
+    f(!!n?.(e)), u(!!a?.(e)), D(e);
   }, H = (r) => {
     r.target === r.currentTarget && b();
   }, J = U(
-    "border border-dashed rounded w-full cursor-pointer relative h-full hover:border-hover",
+    "border border-dashed rounded size-full cursor-pointer relative hover:border-hover",
     !K && !F && "border-primary",
-    K && (T ? "border-accent-primary" : "border-hover"),
+    K && (S ? "border-accent-primary" : "border-hover"),
     F && "border-error"
   );
-  return V(g), /* @__PURE__ */ y(B, { children: [
+  return T(w), /* @__PURE__ */ y(z, { children: [
     /* @__PURE__ */ y(
       "div",
       {
         className: J,
-        ref: g,
-        onDragOver: z,
+        ref: w,
+        onDragOver: q,
         onDragLeave: H,
         children: [
           /* @__PURE__ */ y(
@@ -91,7 +91,7 @@ const nr = ({
             {
               htmlFor: "file",
               tabIndex: 0,
-              onKeyDown: q,
+              onKeyDown: V,
               className: "flex flex-col items-center cursor-pointer size-full text-secondary dial-tiny-text justify-center",
               children: [
                 E && /* @__PURE__ */ t("p", { className: "mb-1", children: E }),
@@ -110,19 +110,19 @@ const nr = ({
           /* @__PURE__ */ t(
             "input",
             {
-              multiple: M,
+              multiple: L,
               id: "file",
               type: "file",
               ref: h,
               hidden: !0,
               accept: A,
-              onChange: P
+              onChange: M
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ t(B, { children: S })
+    /* @__PURE__ */ t(z, { children: P })
   ] });
 };
 export {

package/dist/components/Loader/Loader.js

@@ -3,19 +3,19 @@ import e from "classnames";
 import { DialIcon as s } from "../Icon/Icon.js";
 import { loaderIconBaseClassName as t, loaderBaseClassName as d } from "./constants.js";
 import c from "../../assets/icons/loader.svg.js";
-const g = ({
+const h = ({
   size: o = 18,
   className: a,
-  iconClassName: l,
-  fullWidth: m = !0,
-  ariaLabel: i = "Loading"
+  iconClassName: i,
+  fullWidth: l = !0,
+  ariaLabel: m = "Loading"
 }) => /* @__PURE__ */ r(
   "div",
   {
     role: "status",
     className: e({
       [d]: !0,
-      "w-full h-full": m,
+      "size-full": l,
       [a || ""]: !!a
     }),
     children: /* @__PURE__ */ r(
@@ -26,9 +26,9 @@ const g = ({
           {
             width: o,
             height: o,
-            className: e(t, l),
+            className: e(t, i),
             role: "img",
-            "aria-label": i
+            "aria-label": m
           }
         )
       }
@@ -36,5 +36,5 @@ const g = ({
   }
 );
 export {
-  g as DialLoader
+  h as DialLoader
 };

package/dist/components/New/BottomSheet/BottomSheet.js

@@ -56,7 +56,7 @@ const te = ({
           "aria-label": t ? void 0 : c,
           style: x,
           className: o(
-            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
+            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-hidden",
             "animate-slideUp motion-reduce:animate-none",
             h,
             M.bottomSheet

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

@@ -13,7 +13,7 @@ const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center g
   first: "shrink-0",
   middle: "min-w-0 max-w-[30%] shrink",
   last: "min-w-0 max-w-[51%] shrink"
-}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
+}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
   s,
   {
     size: i.SM,

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

@@ -10,11 +10,11 @@ const u = "en-GB", f = {
   [e.Weekday]: "Select day"
 }, x = (
   // TODO: check after design review for input
-  "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus"
+  "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-hidden transition-colors hover:border-accent-alpha focus-within:border-accent-focus"
 ), y = (
   // TODO: check after design review for input
   "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent"
-), b = "!border-error", C = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", h = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
+), b = "!border-error", h = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", C = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
   l,
   {
     size: t.MD,
@@ -42,7 +42,7 @@ const u = "en-GB", f = {
 };
 export {
   u as DEFAULT_CALENDAR_LOCALE,
-  h as calendarDayButtonBaseClassName,
+  C as calendarDayButtonBaseClassName,
   D as calendarDayOutsideClassName,
   N as calendarDaySelectedClassName,
   v as calendarDayTodayClassName,
@@ -53,5 +53,5 @@ export {
   I as calendarIcon,
   f as calendarModeDefaultPlaceholder,
   g as calendarNavIcons,
-  C as calendarPopoverClassName
+  h as calendarPopoverClassName
 };

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

@@ -8,7 +8,7 @@ const b = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
 ), f = o(
-  "z-floating focus-visible:outline-none",
+  "z-floating focus-visible:outline-hidden",
   m
 ), I = a, v = t, y = o(
   n,

package/dist/components/New/MenuItem/MenuItem.js

@@ -1,4 +1,4 @@
-import { jsxs as i, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, Fragment as g, jsx as t } from "react/jsx-runtime";
 import { DialIcon as k } from "../../Icon/Icon.js";
 import { CheckboxBox as S } from "../Checkbox/CheckboxBox.js";
 import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
@@ -13,19 +13,19 @@ const O = ({
   description: f,
   mark: s = o.None,
   selected: r = !1,
-  danger: u = !1,
-  trailing: h,
+  danger: h = !1,
+  trailing: u,
   rightControl: m,
   ellipsisLabel: I = !1,
   labelClassName: x,
-  children: v,
-  className: d,
+  children: d,
+  className: v,
   disabled: a = !1,
   type: C = "button",
   ...w
 }) => {
-  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), n = e(
-    u && "text-error",
+  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), i = e(
+    h && "text-error",
     a && "text-control-disable-primary"
   ), p = e(
     j,
@@ -35,33 +35,33 @@ const O = ({
     y && M,
     b && H,
     a && D,
-    u && "text-error",
-    d,
+    h && "text-error",
+    v,
     A.menuItem
-  ), N = /* @__PURE__ */ i(
+  ), N = /* @__PURE__ */ n(
     "button",
     {
       type: C,
       disabled: a,
       "data-menu-item-row": m ? "" : void 0,
-      className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none" : p,
+      className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-hidden" : p,
       ...w,
       children: [
-        v ?? /* @__PURE__ */ i(g, { children: [
+        d ?? /* @__PURE__ */ n(g, { children: [
           s === o.Checkbox && /* @__PURE__ */ t(S, { isSelected: r, disabled: a }),
-          c && /* @__PURE__ */ t(k, { icon: c, className: n }),
+          c && /* @__PURE__ */ t(k, { icon: c, className: i }),
           I ? /* @__PURE__ */ t(
             T,
             {
               text: l,
-              className: e(n, x)
+              className: e(i, x)
             }
           ) : /* @__PURE__ */ t(
             "span",
             {
               className: e(
                 "min-w-0 flex-1 truncate text-start",
-                n,
+                i,
                 x
               ),
               children: l
@@ -79,7 +79,7 @@ const O = ({
           ),
           r && s === o.Check && L
         ] }),
-        h && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: h })
+        u && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", i), children: u })
       ]
     }
   );
@@ -88,7 +88,7 @@ const O = ({
       `role="none"` so the wrapper does not come between a listbox and its
       options: the row inside it keeps the role, the state and the click.
     */
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ n(
       "div",
       {
         role: "none",

package/dist/components/New/SharedEntityIndicator/SharedEntityIndicator.js

@@ -15,7 +15,7 @@ const S = ({
     role: "img",
     "aria-label": o,
     className: n(
-      "flex shrink-0 rounded-sm bg-layer-raised text-accent",
+      "flex shrink-0 rounded-xs bg-layer-raised text-accent",
       i,
       s.sharedEntityIndicator
     ),

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -68,7 +68,7 @@ const ne = ({
               inert: !t,
               style: w,
               className: r(
-                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
+                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-hidden",
                 "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
                 "transition-transform duration-300 motion-reduce:transition-none",
                 t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",

package/dist/components/Search/Search.js

@@ -52,7 +52,7 @@ const v = ({
       className: e.className,
       wrapperClassName: h(
         e.wrapperClassName,
-        a ? "!border-0 ps-5 [&>div]:!border-0" : ""
+        a ? "!border-0 !ps-5 [&>div]:!border-0" : ""
       ),
       ...f
     }

package/dist/components/Select/Select.js

@@ -410,7 +410,7 @@ const vt = ({
                 onKeyDown: (e) => {
                   e.stopPropagation();
                 },
-                className: "bg-transparent outline-none w-full dial-small-text",
+                className: "bg-transparent outline-hidden w-full dial-small-text",
                 ref: P,
                 disabled: c,
                 "aria-disabled": c,

package/dist/components/Select/constants.js

@@ -1,15 +1,15 @@
 import { jsx as e } from "react/jsx-runtime";
 import { DIAL_ICON_SIZE as t } from "../../constants/icon.js";
 import { IconChevronDown as a } from "@tabler/icons-react";
-const c = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer", r = "w-full rounded flex flex-col", n = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none", i = "bg-accent-primary-alpha", p = "bg-accent-primary-alpha border-l border-accent-primary border-1", m = "opacity-75", u = 352, f = 4, d = /* @__PURE__ */ e(a, { size: t.SM });
+const o = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer", n = "w-full rounded flex flex-col", r = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden", i = "bg-accent-primary-alpha", p = "bg-accent-primary-alpha border-l border-accent-primary", m = "opacity-75", u = 352, d = 4, f = /* @__PURE__ */ e(a, { size: t.SM });
 export {
   u as dropdownMenuMaxHeight,
-  d as selectChevronIcon,
-  n as selectOptionBaseClassName,
+  f as selectChevronIcon,
+  r as selectOptionBaseClassName,
   m as selectOptionDisabledClassName,
   i as selectOptionSelectedClassName,
   p as selectOptionSingleSelectedClassName,
-  r as selectOverlayBaseClassName,
-  f as selectSubMenuGap,
-  c as selectTriggerBaseClassName
+  n as selectOverlayBaseClassName,
+  d as selectSubMenuGap,
+  o as selectTriggerBaseClassName
 };

package/dist/components/Slider/Slider.js

@@ -121,7 +121,7 @@ const m = (t) => (t.toString().split(".")[1] ?? "").length, q = ({
                   "aria-label": j,
                   "aria-labelledby": X,
                   className: u(
-                    "dial-small-text absolute -translate-x-1/2 flex size-[38px] cursor-grab select-none items-center justify-center rounded-full bg-layer-3 text-primary shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+                    "dial-small-text absolute -translate-x-1/2 flex size-[38px] cursor-grab select-none items-center justify-center rounded-full bg-layer-3 text-primary shadow focus:outline-hidden focus-visible:ring-2 focus-visible:ring-focus",
                     P
                   ),
                   style: { left: `${v}%` },

package/dist/components/Steps/Step.js

@@ -1,30 +1,30 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { IconExclamationCircle as x, IconCheck as d } from "@tabler/icons-react";
-import { StepStatus as i } from "../../models/step.js";
-import r from "classnames";
+import { StepStatus as e } from "../../models/step.js";
+import i from "classnames";
 import { getCircleClass as C, getStepClass as p } from "./utils.js";
 import { DIAL_ICON_SIZE as o } from "../../constants/icon.js";
 const g = ({
   step: t,
   index: n,
-  currentStep: e,
+  currentStep: s,
   onChangeStep: l
 }) => {
-  const a = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny-text cursor-pointer dial-step", m = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", c = () => e === t.id && t.status === i.ERROR ? /* @__PURE__ */ s(x, { stroke: 2, size: o.SM }) : e !== t.id && t.status === i.VALID ? /* @__PURE__ */ s(d, { stroke: 2, size: o.SM }) : n + 1;
+  const a = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny-text cursor-pointer dial-step", m = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full", c = () => s === t.id && t.status === e.ERROR ? /* @__PURE__ */ r(x, { stroke: 2, size: o.SM }) : s !== t.id && t.status === e.VALID ? /* @__PURE__ */ r(d, { stroke: 2, size: o.SM }) : n + 1;
   return /* @__PURE__ */ f(
     "button",
     {
-      className: r(a, p(t, e)),
+      className: i(a, p(t, s)),
       onClick: () => l(t.id),
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ r(
           "span",
           {
-            className: r(m, C(t, e)),
+            className: i(m, C(t, s)),
             children: c()
           }
         ),
-        /* @__PURE__ */ s("span", { children: t.name })
+        /* @__PURE__ */ r("span", { children: t.name })
       ]
     }
   );

package/dist/components/TagInput/TagInput.js

@@ -121,7 +121,7 @@ const k = 8, ne = 24, fe = ({
             onKeyDown: Q,
             onBlur: Y,
             className: v(
-              "dial-input outline-none !border-none w-full flex-1 !p-1 !h-auto",
+              "dial-input outline-hidden !border-none w-full flex-1 !p-1 !h-auto",
               i ? "min-w-0" : "min-w-[100px]"
             ),
             placeholder: X ?? "",

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.6",
-  "generatedAt": "2026-10-13T09:45:10.487Z",
+  "version": "0.16.0-dev.7",
+  "generatedAt": "2026-10-13T14:08:18.539Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -17,7 +17,7 @@
     "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
   "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
-  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see tailwind.config.js for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1D4ED8` |\n| `gradient-1-hover` | `var(--bg-gradient-1-hover)` | `#6785FB` |\n| `gradient-1-active` | `var(--bg-gradient-1-active)` | `#1D4ED8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885DF2` |\n| `gradient-2-hover` | `var(--bg-gradient-2-hover)` | `#885DF2` |\n| `gradient-2-active` | `var(--bg-gradient-2-active)` | `#7C3AED` |\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-hover-subtle` | `var(--bg-control-accent-alpha-hover-subtle)` | `#2764D90A` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent-alpha-active-subtle` | `var(--bg-control-accent-alpha-active-subtle)` | `#2764D914` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\n| `control-accent-muted` | `var(--bg-control-accent-muted)` | `#E1EAF9` |\n| `control-accent-hover` | `var(--bg-control-accent-hover)` | `#5976E9` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover-strong` | `var(--bg-control-neutral-hover-strong)` | `#848E9C` |\n| `control-neutral-hover-muted` | `var(--bg-control-neutral-hover-muted)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-neutral-default` | `var(--bg-control-neutral-default)` | `#ACB3C3` |\n| `control-inverted` | `var(--bg-control-inverted)` | `#57647A` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha` | `var(--bg-control-error-alpha)` | `#F764641A` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F7646426` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable-primary` | `var(--bg-control-disable-primary)` | `#DCE0E8` |\n| `control-disable-secondary` | `var(--bg-control-disable-secondary)` | `#ACB3C3` |\n| `green-1` | `var(--bg-visual-green-1)` | `#CDE8E5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#D1F0DC` |\n| `violet-1` | `var(--bg-visual-violet-1)` | `#DDE3F9` |\n| `violet-2` | `var(--bg-visual-violet-2)` | `#F1E9FF` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs-1` | `var(--shadow-xs-1)` | `#2764D933` |\n| `xs-2` | `var(--shadow-xs-2)` | `#161B2D08` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976E9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885DF2` |\n| `accent-focus` | `var(--stroke-accent-focus)` | `#6785FB` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n| `control-disable-primary` | `var(--stroke-control-disable-primary)` | `#848E9C` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0D6E72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065F46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#D36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#B45309` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7C3AED` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730B7` |\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-inverted` | `var(--text-control-inverted)` | `#FCFCFC` |\n| `control-disable-primary` | `var(--text-control-disable-primary)` | `#848E9C` |\n| `control-disable-secondary` | `var(--text-control-disable-secondary)` | `#DCE0E8` |\n| `control-accent-hover` | `var(--text-control-accent-hover)` | `#5976E9` |\n| `control-accent-active` | `var(--text-control-accent-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
+  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see src/styles/theme.scss for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-base` | `var(--bg-layer-base)` | `#f5f7fa` |\n| `error` | `var(--bg-error)` | `#f3d6d8` |\n| `warning` | `var(--bg-warning)` | `#faf0cf` |\n| `info` | `var(--bg-info)` | `#e1eaf9` |\n| `success` | `var(--bg-success)` | `#dbf1eb` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1d4ed8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885df2` |\n| `blue` | `var(--bg-visual-blue)` | `#d6edf9` |\n| `green-1` | `var(--bg-visual-green-1)` | `#cde8e5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#d1f0dc` |\n| `brown` | `var(--bg-visual-brown)` | `#fde8d8` |\n| `red` | `var(--bg-visual-red)` | `#fce7f3` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--stroke-primary)` | `#57647a` |\n| `secondary` | `var(--stroke-secondary)` | `#d1dbea` |\n| `tertiary` | `var(--stroke-tertiary)` | `#e0e6f0` |\n| `error` | `var(--stroke-error)` | `#ae2f2f` |\n| `warning` | `var(--stroke-warning)` | `#eec840` |\n| `info` | `var(--stroke-info)` | `#1d4ed8` |\n| `accent` | `var(--stroke-accent)` | `#1d4ed8` |\n| `success` | `var(--stroke-success)` | `#007274` |\n| `default` | `var(--stroke-default)` | `#b2c2dd` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976e9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885df2` |\n| `focus` | `var(--stroke-focus)` | `#161b2d` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n| `secondary` | `var(--text-secondary)` | `#57647a` |\n| `tertiary` | `var(--text-tertiary)` | `#848e9c` |\n| `accent` | `var(--text-accent)` | `#1d4ed8` |\n| `error` | `var(--text-error)` | `#ae2f2f` |\n| `warning` | `var(--text-warning)` | `#7f6300` |\n| `warning-icon` | `var(--text-warning-icon)` | `#eec840` |\n| `info` | `var(--text-info)` | `#1d4ed8` |\n| `success` | `var(--text-success)` | `#007274` |\n| `blue` | `var(--text-visual-blue)` | `#1189c8` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0d6e72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065f46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#d36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#b45309` |\n| `red` | `var(--text-visual-red)` | `#9d174d` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7c3aed` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730b7` |\n\n### placeholderColor\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#fcfcfc` |\n| `layer-1` | `var(--bg-layer-1)` | `#e0e6f0` |\n| `layer-2` | `var(--bg-layer-2)` | `#eef1f7` |\n| `layer-3` | `var(--bg-layer-3)` | `#fcfcfc` |\n| `layer-4` | `var(--bg-layer-4)` | `#d1dbea` |\n| `blackout` | `var(--bg-blackout)` | `#0c101d4d` |\n| `error` | `var(--bg-error)` | `#f3d6d8` |\n| `warning` | `var(--bg-warning)` | `#faf0cf` |\n| `info` | `var(--bg-info)` | `#d6e2f9` |\n| `success` | `var(--bg-success)` | `#d9f0f1` |\n| `neutral` | `var(--bg-neutral)` | `#fcfcfc` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5c8dea` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37babc` |\n| `red-400` | `var(--bg-red-400)` | `#f76464` |\n| `controls-error` | `var(--controls-bg-error)` | `#ae2f2f` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#d1dbea` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ace` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5c8dea` |\n| `hover` | `var(--stroke-hover)` | `#eef1f7` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7da4ff` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37babc` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#a972ff` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#fcfcfc` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161b2d` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `sm` | `var(--shadow-sm)` | `#2764d914` |\n| `md` | `var(--shadow-md)` | `#2764d90f` |\n| `lg` | `var(--shadow-lg)` | `#2764d914` |",
   "components": [
     {
       "name": "Spinner",