@epam/ai-dial-ui-kit 0.14.0-dev.34 → 0.14.0-dev.36

package/dist/components/New/Grid/Grid.js

@@ -1,37 +1,36 @@
 import { jsx as o } from "react/jsx-runtime";
-import { themeBalham as ge, colorSchemeLight as _e, setupAgTestIds as Ne, ModuleRegistry as Ie, AllCommunityModule as Te } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
-import { AgGridReact as Ae } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
-import { IconZoomCancel as be } from "@tabler/icons-react";
-import { useState as De, useRef as D, useId as Ge, useCallback as s, useMemo as m, useEffect as g } from "react";
-import { useIsMobileScreen as Le } from "../../../hooks/use-is-mobile-screen.js";
-import { useIsTabletScreen as we } from "../../../hooks/use-is-tablet-screen.js";
-import { GridSelectionMode as K } from "../../../models/selection-mode.js";
-import { DropdownTrigger as Oe } from "../../../types/dropdown.js";
-import { debounceFn as ye } from "../../../utils/debounce.js";
-import { baseColumnComparator as ve, omitUndefined as xe } from "../../../utils/grid-comparators.js";
+import { themeBalham as ge, colorSchemeLight as _e } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
+import { AgGridReact as Ne } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
+import { IconZoomCancel as Ie } from "@tabler/icons-react";
+import { useState as Te, useRef as D, useId as Ae, useCallback as s, useMemo as m, useEffect as g } from "react";
+import { useIsMobileScreen as Ge } from "../../../hooks/use-is-mobile-screen.js";
+import { useIsTabletScreen as De } from "../../../hooks/use-is-tablet-screen.js";
+import { GridSelectionMode as Q } from "../../../models/selection-mode.js";
+import { DropdownTrigger as be } from "../../../types/dropdown.js";
+import { debounceFn as Le } from "../../../utils/debounce.js";
+import { baseColumnComparator as Oe, omitUndefined as we } from "../../../utils/grid-comparators.js";
+import { registerAgGridModulesOnce as ye } from "../../../utils/grid-registration.js";
 import { mergeClasses as X } from "../../../utils/merge-classes.js";
-import { Dropdown as He } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as We } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { NoDataContent as ke } from "../NoDataContent/NoDataContent.js";
-import { SelectionCell as ze } from "./components/SelectionCell.js";
-import { SelectionHeader as Pe } from "./components/SelectionHeader.js";
-import { GRID_THEME_PARAMS as G, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as Me, GRID_HEADER_SELECT_CLASS as Fe, ROW_HEIGHT as Y, GRID_WITHOUT_HEADER_BORDERS_CLASS as Ue, GRID_SELECTION_VISIBLE_CLASS as Be, GRID_WITH_SELECTION_CLASS as Ve, GRID_ROOT_CLASS as je } from "./constants.js";
-import { SELECTION_COL_DEF as Je } from "./renderers/constants.js";
-Ne({ testIdAttribute: "dataQA" });
-Ie.registerModules([Te]);
-const Qe = "dial-kit-grid-selection", Ze = 150, $e = 100, pt = ({
+import { Dropdown as ve } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as xe } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { NoDataContent as He } from "../NoDataContent/NoDataContent.js";
+import { SelectionCell as We } from "./components/SelectionCell.js";
+import { SelectionHeader as ke } from "./components/SelectionHeader.js";
+import { GRID_THEME_PARAMS as b, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as ze, GRID_HEADER_SELECT_CLASS as Pe, ROW_HEIGHT as Y, GRID_WITHOUT_HEADER_BORDERS_CLASS as Fe, GRID_SELECTION_VISIBLE_CLASS as Ue, GRID_WITH_SELECTION_CLASS as Me, GRID_ROOT_CLASS as Be } from "./constants.js";
+import { SELECTION_COL_DEF as Ve } from "./renderers/constants.js";
+const je = "dial-kit-grid-selection", Je = 150, Ze = 100, Sr = ({
   columnDefs: _,
   rowData: c,
   additionalGridOptions: L,
   getContextMenuItems: N,
   className: ee,
-  ariaLabel: te = "Data grid",
+  ariaLabel: re = "Data grid",
   wrapCustomCellRenderers: I = !0,
   disabledRowIds: p,
-  selectedRowIds: a,
-  onSelectionChange: w,
-  onGridApiChange: re,
-  getRowId: O,
+  selectedRowIds: l,
+  onSelectionChange: O,
+  onGridApiChange: te,
+  getRowId: w,
   alternateOddRowColors: y = !1,
   filterPlaceholder: v = "Enter value",
   emptyStateIcon: x,
@@ -42,46 +41,47 @@ const Qe = "dial-kit-grid-selection", Ze = 150, $e = 100, pt = ({
   withoutHeaderBorders: oe = !1,
   allowDisabledContextMenu: P = !1,
   selectionMode: n,
-  selectRowLabel: M,
-  selectAllLabel: F = "Select all rows"
+  selectRowLabel: F,
+  selectAllLabel: U = "Select all rows"
 }) => {
-  const [r, ne] = De(), ie = Le(), se = we(), T = D(/* @__PURE__ */ new Set()), U = D(
+  ye();
+  const [t, ne] = Te(), ie = Ge(), se = De(), T = D(/* @__PURE__ */ new Set()), M = D(
     void 0
-  ), B = `dial-kit-grid-selection-${Ge()}`, u = D({
-    getRowId: O,
+  ), B = `dial-kit-grid-selection-${Ae()}`, d = D({
+    getRowId: w,
     getContextMenuItems: N,
-    onSelectionChange: w,
-    selectRowLabel: M,
+    onSelectionChange: O,
+    selectRowLabel: F,
     wrapCustomCellRenderers: I
   });
-  u.current = {
-    getRowId: O,
+  d.current = {
+    getRowId: w,
     getContextMenuItems: N,
-    onSelectionChange: w,
-    selectRowLabel: M,
+    onSelectionChange: O,
+    selectRowLabel: F,
     wrapCustomCellRenderers: I
   };
-  const l = s((e) => {
-    const t = u.current.getRowId;
-    return t ? t(e) : String(e.id ?? JSON.stringify(e));
-  }, []), V = !!N, j = !!I, le = m(
+  const a = s((e) => {
+    const r = d.current.getRowId;
+    return r ? r(e) : String(e.id ?? JSON.stringify(e));
+  }, []), V = !!N, j = !!I, ae = m(
     () => ge.withPart(_e).withParams({
-      ...G,
-      oddRowBackgroundColor: y ? G.oddRowBackgroundColor : G.backgroundColor,
+      ...b,
+      oddRowBackgroundColor: y ? b.oddRowBackgroundColor : b.backgroundColor,
       wrapperBorder: z
     }),
     [y, z]
-  ), ae = s((e) => {
+  ), le = s((e) => {
     e.api.sizeColumnsToFit();
-  }, []), ce = ie || se || (a?.size ?? 0) > 0, d = s(
-    (e) => !!e && !!p?.has(l(e)),
-    [p, l]
+  }, []), ce = ie || se || (l?.size ?? 0) > 0, u = s(
+    (e) => !!e && !!p?.has(a(e)),
+    [p, a]
   ), C = s(
-    (e, t, i) => V ? /* @__PURE__ */ o(
-      He,
+    (e, r, i) => V ? /* @__PURE__ */ o(
+      ve,
       {
-        trigger: [Oe.ContextMenu],
-        items: e.data ? u.current.getContextMenuItems?.(e.data) ?? [] : [],
+        trigger: [be.ContextMenu],
+        items: e.data ? d.current.getContextMenuItems?.(e.data) ?? [] : [],
         anchorToMouse: !0,
         matchReferenceWidth: !0,
         className: X(
@@ -89,93 +89,93 @@ const Qe = "dial-kit-grid-selection", Ze = 150, $e = 100, pt = ({
           i && "cursor-not-allowed opacity-75"
         ),
         disabled: i && !P,
-        children: /* @__PURE__ */ o("span", { className: "block min-w-0 max-w-full flex-1", children: t })
+        children: /* @__PURE__ */ o("span", { className: "block min-w-0 max-w-full flex-1", children: r })
       }
-    ) : t,
+    ) : r,
     [V, P]
   ), A = s(
     (e) => {
       if (!e.data) return null;
-      const t = d(e.data);
+      const r = u(e.data);
       return C(
         e,
         /* @__PURE__ */ o(
-          We,
+          xe,
           {
             text: e.value == null ? "" : String(e.value),
             className: "max-w-full dial-small-text text-primary",
-            hideTooltip: t
+            hideTooltip: r
           }
         ),
-        t
+        r
       );
     },
-    [d, C]
+    [u, C]
   ), R = s(
     (e) => e === S.API || e === S.ROW_DATA_CHANGED,
     []
-  ), ue = m(
-    () => ye((e) => {
-      const i = (e.selectedNodes ?? []).map(($) => $.data), f = new Set(i.map(l));
-      T.current = f, U.current = e.source, !R(e.source) && u.current.onSelectionChange?.(f, i);
-    }, $e),
-    [R, l]
-  ), b = m(() => {
+  ), de = m(
+    () => Le((e) => {
+      const i = (e.selectedNodes ?? []).map((q) => q.data), f = new Set(i.map(a));
+      T.current = f, M.current = e.source, !R(e.source) && d.current.onSelectionChange?.(f, i);
+    }, Ze),
+    [R, a]
+  ), G = m(() => {
     if (n)
       return {
-        ...Je,
-        colId: Qe,
+        ...Ve,
+        colId: je,
         headerName: "",
-        headerClass: Fe,
-        cellClass: Me,
-        headerComponent: n === K.MULTIPLE ? Pe : void 0,
-        headerComponentParams: { label: F },
+        headerClass: Pe,
+        cellClass: ze,
+        headerComponent: n === Q.MULTIPLE ? ke : void 0,
+        headerComponentParams: { label: U },
         cellRenderer: (e) => {
           if (!e.data) return null;
-          const t = l(e.data);
+          const r = a(e.data);
           return /* @__PURE__ */ o(
-            ze,
+            We,
             {
               params: e,
               mode: n,
-              rowId: t,
+              rowId: r,
               radioName: B,
-              label: u.current.selectRowLabel?.(e.data) ?? "Select row",
-              disabled: p?.has(t)
+              label: d.current.selectRowLabel?.(e.data) ?? "Select row",
+              disabled: p?.has(r)
             }
           );
         }
       };
   }, [
     n,
-    F,
-    l,
+    U,
+    a,
     p,
     B
   ]), J = s(
     (e) => {
       if (!e.cellRenderer)
         return { ...e, cellRenderer: A };
-      const t = u.current.wrapCustomCellRenderers;
-      if (!(typeof t == "function" ? t(e) : !!t))
+      const r = d.current.wrapCustomCellRenderers;
+      if (!(typeof r == "function" ? r(e) : !!r))
         return e;
       const f = e.cellRenderer;
       return { ...e, cellRenderer: (E) => {
-        const he = d(E.data), q = typeof f == "function" ? f : void 0, Ee = q ? /* @__PURE__ */ o(q, { ...E }) : A(E);
+        const he = u(E.data), K = typeof f == "function" ? f : void 0, Ee = K ? /* @__PURE__ */ o(K, { ...E }) : A(E);
         return C(E, Ee, he);
       } };
     },
-    [d, A, C]
-  ), de = m(() => {
+    [u, A, C]
+  ), ue = m(() => {
     const e = j ? (_ ?? []).map(J) : _ ?? [];
-    return b ? [b, ...e] : e;
-  }, [_, j, J, b]), {
-    defaultColDef: Q,
+    return G ? [G, ...e] : e;
+  }, [_, j, J, G]), {
+    defaultColDef: Z,
     rowSelection: h,
     ...me
   } = L ?? {}, fe = m(
     () => ({
-      minWidth: Ze,
+      minWidth: Je,
       resizable: !0,
       sortable: !0,
       floatingFilter: !0,
@@ -184,102 +184,102 @@ const Qe = "dial-kit-grid-selection", Ze = 150, $e = 100, pt = ({
         filterPlaceholder: v,
         buttons: ["reset"]
       },
-      comparator: ve,
-      ...xe(Q)
+      comparator: Oe,
+      ...we(Z)
     }),
-    [v, Q]
+    [v, Z]
   ), Se = (e) => {
-    e.api.sizeColumnsToFit(), ne(e.api), L?.onGridReady?.(e), re?.(e.api);
+    e.api.sizeColumnsToFit(), ne(e.api), L?.onGridReady?.(e), te?.(e.api);
   };
   g(() => {
-    r && c && r.setGridOption("rowData", c);
-  }, [r, c]);
+    t && c && t.setGridOption("rowData", c);
+  }, [t, c]);
   const pe = s(
     () => /* @__PURE__ */ o(
-      ke,
+      He,
       {
         live: !0,
         title: H,
         description: W,
-        icon: x ?? /* @__PURE__ */ o(be, { size: 100, stroke: 0.5, "aria-hidden": "true" })
+        icon: x ?? /* @__PURE__ */ o(Ie, { size: 100, stroke: 0.5, "aria-hidden": "true" })
       }
     ),
     [H, W, x]
-  ), Z = typeof h == "object" ? h : void 0, Ce = m(() => n ? {
-    isRowSelectable: (e) => !d(e.data),
+  ), $ = typeof h == "object" ? h : void 0, Ce = m(() => n ? {
+    isRowSelectable: (e) => !u(e.data),
     /*
       Merged, not replaced, the way `defaultColDef` is: a consumer reaching
       for `isRowSelectable` alone would otherwise hand ag-Grid a whole new
       object and lose the three settings below with it.
     */
-    ...Z,
+    ...$,
     /*
       `selectionMode` owns the mode, because it also decides whether the
       selection column draws checkboxes or radios.
     */
-    mode: n === K.SINGLE ? "singleRow" : "multiRow",
+    mode: n === Q.SINGLE ? "singleRow" : "multiRow",
     // The controls live in this component's own selection column, so
     // ag-Grid's inputs are switched off and only its behaviour is used.
     checkboxes: !1,
     headerCheckbox: !1
   } : h, [
     h,
-    Z,
-    d,
+    $,
+    u,
     n
   ]);
   g(() => {
-    r && c && T.current.size && T.current.forEach((e) => {
-      const t = r.getRowNode(e);
-      t && !t.isSelected() && t.setSelected(!0, !1, S.API);
+    t && c && T.current.size && T.current.forEach((e) => {
+      const r = t.getRowNode(e);
+      r && !r.isSelected() && r.setSelected(!0, !1, S.API);
     });
-  }, [r, c]), g(() => {
-    r && a && (r.deselectAll("all", S.API), a.forEach((e) => {
-      const t = r.getRowNode(e);
-      t && !t.isSelected() && t.setSelected(!0, !1, S.API);
+  }, [t, c]), g(() => {
+    t && l && (t.deselectAll("all", S.API), l.forEach((e) => {
+      const r = t.getRowNode(e);
+      r && !r.isSelected() && r.setSelected(!0, !1, S.API);
     }));
-  }, [r, a]);
+  }, [t, l]);
   const Re = s(
-    (e) => e.data ? l(e.data) : "",
-    [l]
+    (e) => e.data ? a(e.data) : "",
+    [a]
   );
   return g(() => {
     const e = R(
-      U.current
+      M.current
     );
-    if (r && a?.size && e) {
-      const t = Array.from(a)[0];
-      if (t) {
-        const i = r.getRowNode(t);
-        i && r.ensureNodeVisible(i);
+    if (t && l?.size && e) {
+      const r = Array.from(l)[0];
+      if (r) {
+        const i = t.getRowNode(r);
+        i && t.ensureNodeVisible(i);
       }
     }
-  }, [r, R, a]), /* @__PURE__ */ o(
+  }, [t, R, l]), /* @__PURE__ */ o(
     "div",
     {
       className: X(
-        je,
+        Be,
         "size-full",
-        n && Ve,
-        n && ce && Be,
-        oe && Ue,
+        n && Me,
+        n && ce && Ue,
+        oe && Fe,
         ee
       ),
       role: "region",
-      "aria-label": te,
+      "aria-label": re,
       "aria-busy": k,
       children: /* @__PURE__ */ o("div", { className: "h-full overflow-x-auto", children: /* @__PURE__ */ o(
-        Ae,
+        Ne,
         {
           rowModelType: "clientSide",
           headerHeight: Y,
           rowHeight: Y,
           cellSelection: !1,
-          theme: le,
+          theme: ae,
           autoSizeStrategy: { type: "fitGridWidth" },
-          columnDefs: de,
+          columnDefs: ue,
           defaultColDef: fe,
-          onGridSizeChanged: ae,
+          onGridSizeChanged: le,
           onGridReady: Se,
           loading: k,
           suppressCellFocus: !0,
@@ -287,7 +287,7 @@ const Qe = "dial-kit-grid-selection", Ze = 150, $e = 100, pt = ({
           noRowsOverlayComponent: pe,
           rowData: c,
           rowSelection: Ce,
-          onSelectionChanged: ue,
+          onSelectionChanged: de,
           getRowId: Re,
           ...me
         }
@@ -296,6 +296,6 @@ const Qe = "dial-kit-grid-selection", Ze = 150, $e = 100, pt = ({
   );
 };
 export {
-  Qe as GRID_SELECTION_COLUMN_ID,
-  pt as Grid
+  je as GRID_SELECTION_COLUMN_ID,
+  Sr as Grid
 };

package/dist/components/New/MarkdownEditor/lazy.js

@@ -0,0 +1,4 @@
+const o = () => import("./MarkdownEditor.js");
+export {
+  o as LazyMarkdownEditor
+};

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0-dev.34",
-  "generatedAt": "2026-09-07T18:35:40.153Z",
+  "version": "0.14.0-dev.36",
+  "generatedAt": "2026-09-08T13:07:17.129Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -20,7 +20,7 @@
     },
     "setupNotes": "## Next.js Integration\n1. Install the package and peer dependencies that are not currently in your project\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom  @tabler/icons-react classnames\nnpm install @floating-ui/react monaco-editor @monaco-editor/react\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\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\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",
+  "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## 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-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#1D4ED8` |\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-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-hover` | `var(--bg-control-error-alpha-hover)` | `#F764641A` |\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` |",
   "components": [
     {