@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.9

package/dist/components/SchemaRenderer/utils.js

@@ -1,63 +1,63 @@
-import { JsonSchemaType as d } from "./types.js";
-function b(r, n) {
+import { JsonSchemaType as f } from "./types.js";
+function $(r, n) {
   const i = { ...r, ...n };
   return (r.properties || n.properties) && (i.properties = { ...r.properties, ...n.properties }), (r.required || n.required) && (i.required = Array.from(
     /* @__PURE__ */ new Set([...r.required ?? [], ...n.required ?? []])
   )), i;
 }
-function u(r, n, i = 0) {
+function p(r, n, i = 0) {
   if (i > 10) return r;
   let t = r;
   if (t.$ref) {
     const e = t.$ref.replace(/^#\//, "").split("/");
     let o = n;
-    for (const l of e)
-      o = o?.[l];
+    for (const u of e)
+      o = o?.[u];
     if (!o || typeof o != "object") return r;
-    const { $ref: f, ...y } = t, p = o;
-    t = { ...p.$ref ? u(p, n, i + 1) : p, ...y };
+    const { $ref: s, ...y } = t, d = o;
+    t = { ...d.$ref ? p(d, n, i + 1) : d, ...y };
   }
   if (t.allOf && t.allOf.length > 0) {
     const { allOf: e, ...o } = t;
-    let f = {};
+    let s = {};
     for (const y of e)
-      f = b(f, u(y, n, i + 1));
-    t = b(f, o);
+      s = $(s, p(y, n, i + 1));
+    t = $(s, o);
   }
   return t;
 }
-function P(r) {
+function x(r) {
   return r.map((n, i) => ({ entry: n, index: i })).sort((n, i) => {
     const t = n.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0, e = i.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0;
     return t !== e ? t - e : n.index - i.index;
   }).map(({ entry: n }) => n);
 }
-function A(r) {
+function j(r) {
   return r == null || r === "";
 }
 function O(r) {
-  return r.type === d.Object || r.properties != null && r.oneOf == null && r.anyOf == null && r.type == null;
+  return r.type === f.Object || r.properties != null && r.oneOf == null && r.anyOf == null && r.type == null;
 }
-function I(r) {
+function N(r) {
   return r.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (n) => n.toUpperCase());
 }
-function q(r, n) {
-  return r.type === d.Null ? "null" : r.$ref ? u(r, n).title ?? r.$ref.split("/").pop() ?? "Option" : r.title ? r.title : r.type ? Array.isArray(r.type) ? r.type.join(" | ") : r.type : r.discriminator ? Object.keys(r.discriminator.mapping).join(" | ") : r.const != null ? String(r.const) : r.oneOf ? "One of options" : "Option";
+function T(r, n) {
+  return r.type === f.Null ? "null" : r.$ref ? p(r, n).title ?? r.$ref.split("/").pop() ?? "Option" : r.title ? r.title : r.type ? Array.isArray(r.type) ? r.type.join(" | ") : r.type : r.discriminator ? Object.keys(r.discriminator.mapping).join(" | ") : r.const != null ? String(r.const) : r.oneOf ? "One of options" : "Option";
 }
-function j(r, n, i = 0) {
+function A(r, n, i = 0) {
   if (i > 15) return;
-  const t = u(r, n);
+  const t = p(r, n);
   if ("default" in t)
     return t.default;
   if (t.discriminator && t.oneOf) {
     const e = Object.keys(t.discriminator.mapping)[0];
     if (e) {
-      const o = u(
+      const o = p(
         { $ref: t.discriminator.mapping[e] },
         n
       );
       return {
-        ...j(o, n, i + 1) ?? {},
+        ...A(o, n, i + 1) ?? {},
         [t.discriminator.propertyName]: e
       };
     }
@@ -66,9 +66,9 @@ function j(r, n, i = 0) {
     if (t.properties) {
       const e = {};
       let o = !1;
-      for (const [f, y] of Object.entries(t.properties)) {
-        const p = j(y, n, i + 1);
-        p !== void 0 && (e[f] = p, o = !0);
+      for (const [s, y] of Object.entries(t.properties)) {
+        const d = A(y, n, i + 1);
+        d !== void 0 && (e[s] = d, o = !0);
       }
       return o ? e : void 0;
     }
@@ -76,26 +76,26 @@ function j(r, n, i = 0) {
       return {};
   }
 }
-function $(r, n, i, t = "", e = 0) {
+function b(r, n, i, t = "", e = 0) {
   if (e > 15) return [];
-  const o = [], f = u(n, i);
-  if (f.anyOf) {
-    const s = f.anyOf.filter(
-      (l) => l.type !== d.Null
+  const o = [], s = p(n, i);
+  if (s.anyOf) {
+    const l = s.anyOf.filter(
+      (u) => u.type !== f.Null
     );
-    return r != null && s.length === 1 ? $(
+    return r != null && l.length === 1 ? b(
       r,
-      s[0],
+      l[0],
       i,
       t,
       e + 1
     ) : o;
   }
-  if (f.oneOf && f.discriminator) {
-    const s = f.discriminator.propertyName, l = r?.[s];
-    if (l && f.discriminator.mapping[l]) {
-      const a = { $ref: f.discriminator.mapping[l] }, c = u(a, i);
-      return $(
+  if (s.oneOf && s.discriminator) {
+    const l = s.discriminator.propertyName, u = r?.[l];
+    if (u && s.discriminator.mapping[u]) {
+      const a = { $ref: s.discriminator.mapping[u] }, c = p(a, i);
+      return b(
         r,
         c,
         i,
@@ -105,41 +105,41 @@ function $(r, n, i, t = "", e = 0) {
     }
     return o;
   }
-  if (f.type === d.Array || !f.type && Array.isArray(r)) {
-    if (Array.isArray(r) && f.items)
-      for (let s = 0; s < r.length; s++) {
-        const l = $(
-          r[s],
-          f.items,
+  if (s.type === f.Array || !s.type && Array.isArray(r)) {
+    if (Array.isArray(r) && s.items)
+      for (let l = 0; l < r.length; l++) {
+        const u = b(
+          r[l],
+          s.items,
           i,
-          `${t}[${s}]`,
+          `${t}[${l}]`,
           e + 1
         );
-        o.push(...l);
+        o.push(...u);
       }
     return o;
   }
-  if (!O(f)) return o;
-  const y = f.required ?? [], p = r;
-  for (const s of y) {
-    const l = f.properties?.[s];
-    if (l && u(l, i).isHidden)
+  if (!O(s)) return o;
+  const y = s.required ?? [], d = r;
+  for (const l of y) {
+    const u = s.properties?.[l];
+    if (u && p(u, i).isHidden)
       continue;
-    const a = t ? `${t}.${s}` : s, c = p?.[s];
-    if (A(c)) {
-      const g = l?.title ?? I(s);
+    const a = t ? `${t}.${l}` : l, c = d?.[l];
+    if (j(c)) {
+      const g = u?.title ?? N(l);
       o.push({ path: a, message: `${g} is required` });
     }
   }
-  if (p && f.properties)
-    for (const [s, l] of Object.entries(f.properties)) {
-      if (u(l, i).isHidden)
+  if (d && s.properties)
+    for (const [l, u] of Object.entries(s.properties)) {
+      if (p(u, i).isHidden)
         continue;
-      const a = t ? `${t}.${s}` : s, c = p[s];
+      const a = t ? `${t}.${l}` : l, c = d[l];
       if (c != null) {
-        const g = $(
+        const g = b(
           c,
-          l,
+          u,
           i,
           a,
           e + 1
@@ -147,12 +147,12 @@ function $(r, n, i, t = "", e = 0) {
         o.push(...g);
       }
     }
-  if (p && f.additionalProperties != null && f.additionalProperties !== !1 && typeof f.additionalProperties == "object") {
-    const s = f.additionalProperties;
-    for (const [l, a] of Object.entries(p)) {
-      const c = t ? `${t}.${l}` : l, g = $(
+  if (d && s.additionalProperties != null && s.additionalProperties !== !1 && typeof s.additionalProperties == "object") {
+    const l = s.additionalProperties;
+    for (const [u, a] of Object.entries(d)) {
+      const c = t ? `${t}.${u}` : u, g = b(
         a,
-        s,
+        l,
         i,
         c,
         e + 1
@@ -162,61 +162,61 @@ function $(r, n, i, t = "", e = 0) {
   }
   return o;
 }
-function v(r, n, i) {
-  const t = u(n, i);
+function E(r, n, i) {
+  const t = p(n, i);
   if (Array.isArray(r))
     return `${r.length} item${r.length !== 1 ? "s" : ""}`;
   if (O(t) && t.properties) {
     const e = Object.entries(t.properties).filter(
-      ([, p]) => !u(p, i).isHidden
-    ), o = e.length, f = r;
-    return `${e.filter(([p]) => {
-      const s = f?.[p];
-      return s != null && s !== "";
+      ([, d]) => !p(d, i).isHidden
+    ), o = e.length, s = r;
+    return `${e.filter(([d]) => {
+      const l = s?.[d];
+      return l != null && l !== "";
     }).length}/${o} fields`;
   }
   return "";
 }
-function N(r, n, i) {
+function q(r, n, i) {
   if (r == null) {
-    const t = n.findIndex((e) => e.type === d.Null);
+    const t = n.findIndex((e) => e.type === f.Null);
     return t >= 0 ? t : 0;
   }
   if (Array.isArray(r)) {
-    const t = n.findIndex((e) => u(e, i).type === d.Array);
+    const t = n.findIndex((e) => p(e, i).type === f.Array);
     return t >= 0 ? t : 0;
   }
   if (typeof r == "boolean") {
-    const t = n.findIndex((e) => u(e, i).type === d.Boolean);
+    const t = n.findIndex((e) => p(e, i).type === f.Boolean);
     return t >= 0 ? t : 0;
   }
   if (typeof r == "number") {
     const t = n.findIndex((e) => {
-      const o = u(e, i);
-      return o.type === d.Number || o.type === d.Integer;
+      const o = p(e, i);
+      return o.type === f.Number || o.type === f.Integer;
     });
     return t >= 0 ? t : 0;
   }
   if (typeof r == "string") {
-    const t = n.findIndex((e) => u(e, i).type === d.String);
+    const t = n.findIndex((e) => p(e, i).type === f.String);
     return t >= 0 ? t : 0;
   }
   if (typeof r == "object") {
     const t = r;
     for (let e = 0; e < n.length; e++) {
-      const o = u(n[e], i);
+      const o = p(n[e], i);
       if (o.discriminator && o.discriminator.propertyName in t)
         return e;
     }
     for (let e = 0; e < n.length; e++) {
-      const o = u(n[e], i);
+      const o = p(n[e], i);
       if (O(o) || o.oneOf) return e;
     }
     return 0;
   }
   return 0;
 }
-function V(r, n, i) {
+function R(r, n, i) {
   if (n && typeof r == "object" && r !== null) {
     const t = r[n];
     if (t) return `Item ${i + 1}: ${t}`;
@@ -227,32 +227,57 @@ function V(r, n, i) {
   }
   return `Item ${i + 1}`;
 }
-function k(r) {
+function B(r) {
   switch (Array.isArray(r.type) ? r.type[0] : r.type) {
-    case d.String:
+    case f.String:
       return "";
-    case d.Boolean:
+    case f.Boolean:
       return !1;
-    case d.Array:
+    case f.Array:
       return [];
-    case d.Integer:
-    case d.Number:
+    case f.Integer:
+    case f.Number:
       return;
     default:
       return {};
   }
 }
+const D = [
+  f.String,
+  f.Number,
+  f.Boolean,
+  f.Null,
+  f.Object,
+  f.Array
+];
+function V(r) {
+  return Array.isArray(r) ? f.Array : typeof r == "object" && r !== null ? f.Object : typeof r == "boolean" ? f.Boolean : typeof r == "number" ? f.Number : r === null ? f.Null : f.String;
+}
+const I = {
+  [f.String]: "",
+  [f.Number]: 0,
+  [f.Boolean]: !1,
+  [f.Null]: null,
+  [f.Object]: {},
+  [f.Array]: []
+};
+function k(r) {
+  return I[r];
+}
 export {
-  v as buildSummary,
-  N as detectAnyOfVariant,
-  j as extractDefaults,
-  V as getItemTitle,
-  q as getOptionLabel,
-  k as getSchemaDefault,
-  A as isMissingRequiredValue,
+  D as ENTRY_TYPE_OPTIONS,
+  E as buildSummary,
+  q as detectAnyOfVariant,
+  A as extractDefaults,
+  k as getEntryTypeDefault,
+  R as getItemTitle,
+  T as getOptionLabel,
+  B as getSchemaDefault,
+  V as inferEntryType,
+  j as isMissingRequiredValue,
   O as isObjectType,
-  u as resolveRef,
-  P as sortByPropertyOrder,
-  I as toFieldLabel,
-  $ as validateRequired
+  p as resolveRef,
+  x as sortByPropertyOrder,
+  N as toFieldLabel,
+  b as validateRequired
 };

package/dist/components/Skeleton/Skeleton.js

@@ -1,14 +1,15 @@
-import { jsx as t, Fragment as $, jsxs as k } from "react/jsx-runtime";
+import { jsx as t, Fragment as L, jsxs as k } from "react/jsx-runtime";
 import "react";
 import { mergeClasses as n } from "../../utils/merge-classes.js";
-import { SkeletonVariant as i, SkeletonAvatarShape as N } from "../../types/skeleton.js";
-import { getAvatarSize as F } from "./utils.js";
-const G = ({
-  active: j = !0,
+import { SkeletonVariant as i, SkeletonAvatarShape as S } from "../../types/skeleton.js";
+import { getAvatarSize as P } from "./utils.js";
+import { DIAL_KIT_CLASS as R } from "../../constants/public-class-names.js";
+const B = ({
+  active: A = !0,
   paragraph: u = !0,
   avatar: m = !1,
   showTitle: p = !0,
-  loading: S = !0,
+  loading: N = !0,
   children: g,
   variant: o = i.Default,
   width: l,
@@ -16,13 +17,13 @@ const G = ({
   overlay: s,
   color: e,
   className: h,
-  ...b
+  ...C
 }) => {
-  if (!S && g)
-    return /* @__PURE__ */ t($, { children: g });
+  if (!N && g)
+    return /* @__PURE__ */ t(L, { children: g });
   const d = n(
     "bg-layer-raised",
-    j && "animate-pulse",
+    A && "animate-pulse",
     h
   );
   if (o !== i.Default) {
@@ -33,21 +34,26 @@ const G = ({
       o === i.Text && "rounded",
       !!s && "relative"
     ), r = {};
-    return l && (r.width = typeof l == "number" ? `${l}px` : l), c && (r.height = typeof c == "number" ? `${c}px` : c), e && (r.backgroundColor = e), /* @__PURE__ */ t("div", { className: a, style: r, ...b, children: s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s }) });
+    return l && (r.width = typeof l == "number" ? `${l}px` : l), c && (r.height = typeof c == "number" ? `${c}px` : c), e && (r.backgroundColor = e), /* @__PURE__ */ t("div", { className: a, style: r, ...C, children: s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s }) });
   }
-  const A = !!m, w = !!p, z = !!u, x = typeof m == "object" ? m : {}, W = typeof p == "object" ? p : {}, C = typeof u == "object" ? u : {}, y = F(x.size), D = x.shape ?? N.Circle, P = W.width ?? "38%", v = C.rows ?? 3, f = C.width, R = (a) => f ? Array.isArray(f) ? f[a] ?? "100%" : f : a === v - 1 ? "61%" : "100%";
+  const j = !!m, w = !!p, z = !!u, b = typeof m == "object" ? m : {}, D = typeof p == "object" ? p : {}, x = typeof u == "object" ? u : {}, y = P(b.size), W = b.shape ?? S.Circle, _ = D.width ?? "38%", v = x.rows ?? 3, f = x.width, I = (a) => f ? Array.isArray(f) ? f[a] ?? "100%" : f : a === v - 1 ? "61%" : "100%";
   return /* @__PURE__ */ k(
     "div",
     {
-      ...b,
-      className: n("flex gap-4", !!s && "relative", h),
+      ...C,
+      className: n(
+        R.skeleton,
+        "flex gap-4",
+        !!s && "relative",
+        h
+      ),
       children: [
-        A && /* @__PURE__ */ t(
+        j && /* @__PURE__ */ t(
           "div",
           {
             className: n(
               d,
-              D === N.Circle ? "rounded-full" : "rounded",
+              W === S.Circle ? "rounded-full" : "rounded",
               "flex-shrink-0"
             ),
             style: {
@@ -63,7 +69,7 @@ const G = ({
             {
               className: n(d, "h-4 rounded"),
               style: {
-                width: P,
+                width: _,
                 ...e && { backgroundColor: e }
               }
             }
@@ -73,7 +79,7 @@ const G = ({
             {
               className: n(d, "h-4 rounded"),
               style: {
-                width: R(r),
+                width: I(r),
                 ...e && { backgroundColor: e }
               }
             },
@@ -86,5 +92,5 @@ const G = ({
   );
 };
 export {
-  G as Skeleton
+  B as Skeleton
 };

package/dist/components/Spinner/Spinner.js

@@ -1,6 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { mergeClasses as a } from "../../utils/merge-classes.js";
-const o = ({
+import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as o } from "../../constants/public-class-names.js";
+const d = ({
   size: e = 40,
   className: s,
   fullWidth: t = !1,
@@ -9,7 +10,8 @@ const o = ({
   "div",
   {
     role: "status",
-    className: a(
+    className: n(
+      o.spinner,
       "flex items-center justify-center",
       { "size-full": t },
       s
@@ -26,5 +28,5 @@ const o = ({
   }
 );
 export {
-  o as Spinner
+  d as Spinner
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.6",
-  "generatedAt": "2026-09-17T21:39:44.989Z",
+  "version": "0.15.0-dev.9",
+  "generatedAt": "2026-09-18T14:40:00.960Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -2898,6 +2898,65 @@
       ],
       "sourceFile": "components/New/Tabs/Tabs.tsx"
     },
+    {
+      "name": "FilterChips",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "A row of filter chips that picks one value out of a few.\naliases: FilterChipRow|ChipTabs|TagTabs|FilterTabs\nDesign system 2.0\n\nThe chip-shaped sibling of the kit's other single-select rows, and the one to\nreach for when the options label a *subset of a list* — \"All\", \"Shared\",\n\"Mine\" above a history panel. `Tabs` underlines the active option and reads\nas navigation between panels; `SegmentedControl` sinks equal segments into a\ntrack and reads as a view switch. This one draws `TagAppearance.Selectable`\nchips: no fill until selected, and a semibold label once it is. Selecting a\nchip therefore widens it by the difference between the regular and semibold\nlabel — give the row `stretch`, or the chips a width, if that shift matters.\n\nEach chip is a toggle button carrying its state on `aria-pressed`, wrapped in\na named `role=\"group\"` — the pattern `Tag` is built for. That makes every\nchip its own tab stop, which is what a filter row wants: unlike a\n`radiogroup`, arrowing onto a chip never changes the filter by accident.\nName the group through `aria-label` or `aria-labelledby`, or the chips are\nannounced as a handful of unrelated toggles.\n\nThere is no disabled chip. An option the user must not pick is left out of\n`items` — a chip that renders but cannot be activated is a label and nothing\nelse, and `Tag` drops its button role when disabled, so it would not even\nannounce as unavailable.\n\nLabels are the caller's to translate — the component ships no English\ndefaults.",
+      "props": [
+        {
+          "name": "items",
+          "type": "FilterChipItem<T>[]",
+          "required": true,
+          "description": "Chips to render, in order; each needs a unique `value` and a `label`"
+        },
+        {
+          "name": "value",
+          "type": "T",
+          "required": true,
+          "description": "The `value` of the selected chip"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: T) => void",
+          "required": true,
+          "description": "Called with the `value` of the chip the user picked. A click on the already-selected chip fires it again, so a row that clears back to a default handles that itself"
+        },
+        {
+          "name": "stretch",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Grows the chips to share the row width equally instead of hugging their labels"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for the row, e.g. its padding or `flex-wrap`"
+        },
+        {
+          "name": "chipClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every chip. A panel too narrow for the chips' default padding can tighten it here"
+        },
+        {
+          "name": "'aria-label'",
+          "type": "string",
+          "required": false
+        },
+        {
+          "name": "'aria-labelledby'",
+          "type": "string",
+          "required": false
+        }
+      ],
+      "examples": [
+        "<FilterChips\n  aria-label={t('Filter chats')}\n  value={tab}\n  onChange={setTab}\n  items={[\n    { value: 'all', label: t('All') },\n    { value: 'mine', label: t('My chats') },\n    { value: 'shared', label: t('Shared') },\n  ]}\n/>"
+      ],
+      "sourceFile": "components/New/FilterChips/FilterChips.tsx"
+    },
     {
       "name": "FileDropzone",
       "category": "Components_2_0",
@@ -10493,6 +10552,25 @@
       "sourceFile": "components/New/Tabs/Tabs.tsx",
       "description": "A single tab entry rendered by ."
     },
+    {
+      "name": "FilterChipItem",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "value",
+          "value": "T"
+        },
+        {
+          "name": "label",
+          "value": "string"
+        },
+        {
+          "name": "icon?",
+          "value": "ReactNode"
+        }
+      ],
+      "sourceFile": "components/New/FilterChips/FilterChips.tsx"
+    },
     {
       "name": "TagAppearance",
       "kind": "enum",
@@ -10761,6 +10839,11 @@
       "name": "NOT_ALLOWED_SPACES_REGEXP",
       "sourceFile": "constants/validation.ts",
       "signature": "NOT_ALLOWED_SPACES_REGEXP = new RegExp(NOT_ALLOWED_SPACES)"
+    },
+    {
+      "name": "DIAL_KIT_CLASS",
+      "sourceFile": "constants/public-class-names.ts",
+      "signature": "DIAL_KIT_CLASS = {\n  /* ── Feedback and status ───────────────────────────────────────────────── */\n  /** The `role=\"status\"` root of a `Spinner`. */\n  spinner: 'dial-kit-spinner',\n  /**\n   * The outermost element of a `ProgressBar`: the box wrapping its label,\n   * track and readout — or the track itself, which is the root when the bar\n   * has neither.\n   */\n  progressBar: 'dial-kit-progress-bar',\n  /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n  skeleton: 'dial-kit-skeleton',\n  /**\n   * The `Notification` surface. Present on every wrapper too — the toast and\n   * section-message variants of error, info, success, warning, loading and\n   * general all render this component.\n   */\n  notification: 'dial-kit-notification',\n  /** The empty-state root of `NoDataContent`. */\n  noDataContent: 'dial-kit-no-data-content',\n\n  /* ── Text ──────────────────────────────────────────────────────────────── */\n  /** The text element of a `Highlight`, which renders the matched query. */\n  highlight: 'dial-kit-highlight',\n  /** The caption line under a field, rendered by `CaptionText`. */\n  captionText: 'dial-kit-caption-text',\n  /**\n   * A caption in its error variant — what `ErrorText` renders. Additive to\n   * `captionText`, since one component draws both.\n   */\n  errorText: 'dial-kit-error-text',\n  /** The `Label` root, which wraps the `label` element and its info button. */\n  label: 'dial-kit-label',\n\n  /* ── Containers ────────────────────────────────────────────────────────── */\n  /** The `article` element of a `CardShell`. */\n  cardShell: 'dial-kit-card-shell',\n  /** The `aside` element of a `CollapsibleSidebar`. */\n  collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n  /** The content box inside a `ResizableContainer`'s resize frame. */\n  resizableContainer: 'dial-kit-resizable-container',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n  confirmationPopup: 'dial-kit-confirmation-popup',\n  /** The root of an `Accordion`. */\n  accordion: 'dial-kit-accordion',\n  /** The breadcrumb root of a `FolderPath`. */\n  folderPath: 'dial-kit-folder-path',\n\n  /* ── Menus and overlays ────────────────────────────────────────────────── */\n  /**\n   * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n   * `listClassName`.\n   */\n  dropdown: 'dial-kit-dropdown',\n  /**\n   * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n   * the rows and owns their vertical padding. Present in both generations, and\n   * on a submenu's own list. It is *not* the floating panel.\n   */\n  dropdownList: 'dial-kit-dropdown-list',\n  /**\n   * One row of a floating overlay: a dropdown item, a `Select` option, a\n   * submenu trigger, or a submenu child. It sits on the element that draws the\n   * row box — so on the wrapper, not the inner button, for a row that has a\n   * `rightControl` beside it.\n   */\n  menuItem: 'dial-kit-menuitem',\n  /**\n   * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n   * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n   * state.\n   */\n  menuItemCheck: 'dial-kit-menuitem-check',\n  /** The primary icon of a `DialDropdownIcon` trigger. */\n  dropdownIcon: 'dial-kit-dropdown-icon',\n  /**\n   * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n   * chevron sits on. Absent when `showCaret` is `false`.\n   */\n  dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n  /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n  tooltip: 'dial-kit-tooltip',\n  /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n  interactiveTooltip: 'dial-kit-interactive-tooltip',\n  /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n  ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n  /* ── Fields ────────────────────────────────────────────────────────────── */\n  /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n  search: 'dial-kit-search',\n  /** The `PasswordInput` field, additive to `dial-kit-input`. */\n  passwordInput: 'dial-kit-password-input',\n  /** The `NumberInput` field, additive to `dial-kit-input`. */\n  numberInput: 'dial-kit-number-input',\n  /** The `TagInput` field, additive to `dial-kit-input`. */\n  tagInput: 'dial-kit-tag-input',\n  /** The root of a `Select`, wrapping its label, field and caption. */\n  select: 'dial-kit-select',\n  /** The trigger button of an `InlineSelect`. */\n  inlineSelect: 'dial-kit-inline-select',\n  /** The root of a `Calendar`, wrapping its label and date field. */\n  calendar: 'dial-kit-calendar',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n\n  /* ── Controls ──────────────────────────────────────────────────────────── */\n  /** The row of a `Switch`: the control and its label. */\n  switch: 'dial-kit-switch',\n  /** The row of a `Checkbox`: the box and its label. */\n  checkbox: 'dial-kit-checkbox',\n  /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n  checkboxBox: 'dial-kit-checkbox-box',\n  /** The row of a `Radio`: the circle and its label. */\n  radio: 'dial-kit-radio',\n  /** The root of a `RadioGroup`, wrapping its label and its radios. */\n  radioGroup: 'dial-kit-radio-group',\n  /**\n   * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n   * field that opens the group.\n   */\n  radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n  /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n  segmentedControl: 'dial-kit-segmented-control',\n  /** One segment of a `SegmentedControl`. */\n  segmentedControlItem: 'dial-kit-segmented-control-item',\n  /** The `role=\"tablist\"` root of `Tabs`. */\n  tabs: 'dial-kit-tabs',\n  /**\n   * One tab inside `Tabs`. The selected tab's underline keeps its own\n   * `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n   * they carry `dial-kit-tag` and have no entry of their own.\n   */\n  filterChips: 'dial-kit-filter-chips',\n  /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n  tag: 'dial-kit-tag',\n  /**\n   * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n   * already carries.\n   */\n  toggleIconButton: 'dial-kit-toggle-icon-button',\n  /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n  closeButton: 'dial-kit-close-button',\n  /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n  infoButton: 'dial-kit-info-button',\n  /**\n   * The wrapper of a `ButtonDropdown` — its trigger carries\n   * `dial-kit-base-button`.\n   */\n  buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
     }
   ]
 }