@epam/ai-dial-ui-kit 0.16.0-dev.37 → 0.16.0-dev.39

package/dist/components/New/EntityIdentity/EntityIdentity.js

@@ -1,65 +1,66 @@
 import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
-import { AvatarShape as _ } from "../../../types/avatar.js";
+import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
+import { AvatarShape as w } from "../../../types/avatar.js";
 import { EntityType as e } from "../../../types/entity-type.js";
 import { mergeClasses as l } from "../../../utils/merge-classes.js";
-import { Avatar as w } from "../Avatar/Avatar.js";
-import { EllipsisTooltip as d } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { Highlight as L } from "../Highlight/Highlight.js";
-const C = {
+import { Avatar as C } from "../Avatar/Avatar.js";
+import { EllipsisTooltip as x } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { Highlight as M } from "../Highlight/Highlight.js";
+const P = {
   [e.Model]: "Model",
   [e.Agent]: "Agent",
   [e.Toolset]: "Toolset",
   [e.Skill]: "Skill",
   [e.Prompt]: "Prompt"
-}, p = {
+}, h = {
   [e.Model]: "text-blue",
   [e.Agent]: "text-green-1",
   [e.Toolset]: "text-brown-2",
   [e.Skill]: "text-violet-1",
   [e.Prompt]: "text-violet-2"
-}, M = {
+}, k = {
   [e.Model]: "bg-blue",
   [e.Agent]: "bg-green-2",
   [e.Toolset]: "bg-brown",
   [e.Skill]: "bg-violet-2",
   [e.Prompt]: "bg-violet-1"
-}, P = ["h1", "h2", "h3", "h4", "h5", "h6"], k = (t) => P[Math.min(6, Math.max(1, Math.round(t))) - 1], z = ({
+}, I = ["h1", "h2", "h3", "h4", "h5", "h6"], j = (t) => I[Math.min(6, Math.max(1, Math.round(t))) - 1], K = ({
   item: t,
-  labels: i,
-  showVersion: x = !0,
-  hasFeaturedTag: h = !0,
-  iconSize: g = 48,
-  headingLevel: u = 3,
+  labels: o,
+  showType: g = !0,
+  showVersion: u = !0,
+  hasFeaturedTag: f = !0,
+  iconSize: y = 48,
+  headingLevel: v = 3,
   query: r,
   footer: a,
-  statusBadge: o,
-  className: f,
-  nameClassName: v = "dial-h3-text",
-  typeClassName: y = "dial-caption-lead-semi-text",
-  versionClassName: T = "dial-tiny-text",
-  iconClassName: A,
-  featuredChipClassName: S
+  statusBadge: c,
+  className: T,
+  nameClassName: A = "dial-h3-text",
+  typeClassName: S = "dial-caption-lead-semi-text",
+  versionClassName: b = "dial-tiny-text",
+  iconClassName: N,
+  featuredChipClassName: E
 }) => {
-  const N = k(u), m = h && !!t.isFeatured, b = o != null || m, c = x ? t.version : void 0;
+  const L = j(v), m = f && !!t.isFeatured, d = c != null || m, p = u ? t.version : void 0, i = g ? o?.type ?? P[t.type] : void 0;
   return /* @__PURE__ */ s(
     "div",
     {
       className: l(
         "flex items-start gap-2",
-        f,
-        E.entityIdentity
+        T,
+        _.entityIdentity
       ),
       children: [
         /* @__PURE__ */ n(
-          w,
+          C,
           {
             name: t.name,
             src: t.iconUrl,
-            size: g,
-            shape: _.Square,
+            size: y,
+            shape: w.Square,
             imageClassName: "bg-entity-icon",
-            className: l("rounded-[14px]", A)
+            className: l("rounded-[14px]", N)
           }
         ),
         /* @__PURE__ */ s(
@@ -70,60 +71,60 @@ const C = {
               a != null && "self-stretch"
             ),
             children: [
-              /* @__PURE__ */ s("div", { className: "relative flex items-center justify-between", children: [
-                /* @__PURE__ */ n(
+              (d || i) && /* @__PURE__ */ s("div", { className: "relative flex items-center justify-between", children: [
+                i && /* @__PURE__ */ n(
                   "span",
                   {
                     className: l(
                       "uppercase",
-                      y,
-                      p[t.type]
+                      S,
+                      h[t.type]
                     ),
-                    children: i?.type ?? C[t.type]
+                    children: i
                   }
                 ),
-                b && /* @__PURE__ */ s("div", { className: "absolute end-0 top-[-6px] flex items-center gap-2", children: [
-                  o,
+                d && /* @__PURE__ */ s("div", { className: "absolute end-0 top-[-6px] flex items-center gap-2", children: [
+                  c,
                   m && /* @__PURE__ */ n(
                     "span",
                     {
                       className: l(
                         "flex h-6 items-center justify-center rounded-2xl px-2",
                         "dial-caption-lead-semi-text",
-                        M[t.type],
-                        p[t.type],
-                        S
+                        k[t.type],
+                        h[t.type],
+                        E
                       ),
-                      children: i?.featured ?? "Featured"
+                      children: o?.featured ?? "Featured"
                     }
                   )
                 ] })
               ] }),
               /* @__PURE__ */ s("div", { className: "flex min-w-0 items-center gap-2", children: [
                 /* @__PURE__ */ n(
-                  N,
+                  L,
                   {
                     className: l(
                       "min-w-0 shrink text-primary",
-                      v
+                      A
                     ),
-                    children: r ? /* @__PURE__ */ n(L, { text: t.name, query: r, maxLines: 1 }) : /* @__PURE__ */ n(d, { text: t.name })
+                    children: r ? /* @__PURE__ */ n(M, { text: t.name, query: r, maxLines: 1 }) : /* @__PURE__ */ n(x, { text: t.name })
                   }
                 ),
-                c != null && /* Capped at 30% of the row so a long version truncates instead of
+                p != null && /* Capped at 30% of the row so a long version truncates instead of
                 squeezing the name out. */
                 /* @__PURE__ */ n(
-                  d,
+                  x,
                   {
                     className: l(
                       "max-w-[30%] shrink-0 text-secondary",
-                      T
+                      b
                     ),
-                    text: c
+                    text: p
                   }
                 )
               ] }),
-              a != null && /* @__PURE__ */ n("div", { className: "mt-auto pt-1", children: a })
+              a != null && a
             ]
           }
         )
@@ -132,5 +133,5 @@ const C = {
   );
 };
 export {
-  z as EntityIdentity
+  K as EntityIdentity
 };

package/dist/components/New/SelectedEntityCard/SelectedEntityCard.js

@@ -0,0 +1,86 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as y } from "../../../constants/public-class-names.js";
+import { SkeletonVariant as a } from "../../../types/skeleton.js";
+import { mergeClasses as v } from "../../../utils/merge-classes.js";
+import { ErrorText as b } from "../CaptionText/CaptionText.js";
+import { EntityIdentity as g } from "../EntityIdentity/EntityIdentity.js";
+import { Skeleton as l } from "../../Skeleton/Skeleton.js";
+const s = "bg-control-neutral-active", C = ({ iconSize: t }) => /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ e("div", { className: "shrink-0 overflow-hidden rounded-[14px]", children: /* @__PURE__ */ e(
+    l,
+    {
+      variant: a.Rectangular,
+      width: t,
+      height: t,
+      className: s
+    }
+  ) }),
+  /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        variant: a.Text,
+        width: "30%",
+        height: 12,
+        className: s
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        variant: a.Text,
+        width: "60%",
+        height: 16,
+        className: s
+      }
+    )
+  ] })
+] }), _ = ({
+  entityId: t,
+  item: n,
+  isLoading: h = !1,
+  isDisabled: x = !1,
+  error: i,
+  details: o,
+  labels: d,
+  showType: f = !0,
+  iconSize: c = 44,
+  headingLevel: p = 4,
+  className: u
+}) => {
+  const m = o != null ? /* @__PURE__ */ e("span", { className: "dial-caption-text text-secondary", children: o }) : void 0, N = () => t ? h ? /* @__PURE__ */ e(C, { iconSize: c }) : n == null ? /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ e("span", { className: "dial-body-semi-text block truncate text-secondary", children: t }),
+    m
+  ] }) : /* @__PURE__ */ e(
+    g,
+    {
+      item: n,
+      labels: { type: d?.type },
+      hasFeaturedTag: !1,
+      iconSize: c,
+      headingLevel: p,
+      nameClassName: "dial-body-semi-text",
+      showType: f,
+      footer: m
+    }
+  ) : /* @__PURE__ */ e("span", { className: "dial-body-semi-text block truncate text-secondary", children: d?.placeholder ?? "Not selected" });
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: v(
+          "rounded-2xl border bg-layer-raised p-3",
+          i ? "border-error" : "border-tertiary",
+          x && "opacity-50",
+          u,
+          y.selectedEntityCard
+        ),
+        children: N()
+      }
+    ),
+    /* @__PURE__ */ e(b, { text: i, className: "mt-1 block" })
+  ] });
+};
+export {
+  _ as SelectedEntityCard
+};

package/dist/components/New/Tag/Tag.js

@@ -1,19 +1,19 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { IconX as C } from "@tabler/icons-react";
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { IconX as x } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
-import { ElementSize as D } from "../../../types/size.js";
+import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
+import { ElementSize as T } from "../../../types/size.js";
 import { TagAppearance as d } from "../../../types/tag.js";
-import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { mergeClasses as y } from "../../../utils/merge-classes.js";
 import { GhostIconButton as A } from "../IconButton/IconButtonWrappers.js";
-import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagBaseClassName as z } from "./constants.js";
-import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
-const X = ({
+import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagShapeClassNames as z, tagBaseClassName as E } from "./constants.js";
+import { DIAL_KIT_CLASS as O } from "../../../constants/public-class-names.js";
+const Z = ({
   label: o,
-  icon: m,
-  appearance: l = d.Outlined,
+  icon: l,
+  appearance: s = d.Outlined,
   selected: i = !1,
-  disabled: t = !1,
+  disabled: a = !1,
   closable: p = !1,
   removeLabel: u,
   className: I,
@@ -21,45 +21,45 @@ const X = ({
   onClick: n,
   onRemove: c,
   onKeyDown: h,
-  ...s
+  ...m
 }) => {
-  const f = l === d.Selectable, a = !!n && !t, N = p && !!c && !t, S = f && i, k = (e) => {
-    h?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
+  const f = s === d.Selectable, t = !!n && !a, N = p && !!c && !a, S = f && i, C = (e) => {
+    h?.(e), !(!t || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ k(
     "span",
     {
-      ...s,
-      role: a ? "button" : s.role,
-      tabIndex: a ? 0 : s.tabIndex,
-      "aria-disabled": t || void 0,
-      "aria-pressed": f && a ? i : void 0,
-      onClick: t ? void 0 : n,
-      onKeyDown: k,
-      className: T(
-        z,
-        S ? "dial-tiny-semi-text" : "dial-tiny-text",
-        w[l][i ? "selected" : "default"],
+      ...m,
+      role: t ? "button" : m.role,
+      tabIndex: t ? 0 : m.tabIndex,
+      "aria-disabled": a || void 0,
+      "aria-pressed": f && t ? i : void 0,
+      onClick: a ? void 0 : n,
+      onKeyDown: C,
+      className: y(
+        E,
+        S ? "dial-tiny-semi-text" : z[s],
+        w[s][i ? "selected" : "default"],
         // The design defines no disabled tag, so a disabled one keeps its
         // colours and only stops responding.
-        t && "cursor-not-allowed",
-        a && [K, L],
+        a && "cursor-not-allowed",
+        t && [K, L],
         I,
-        E.tag
+        O.tag
       ),
       children: [
-        m && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: m }),
+        l && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
         /* @__PURE__ */ r("span", { className: "truncate", title: g ?? o, children: o }),
         N && /* @__PURE__ */ r(
           A,
           {
             className: "size-[16px] shrink-0 dial-kit-minimum-target",
-            size: D.Small,
+            size: T.Small,
             "aria-label": u ?? `Remove ${o}`,
             icon: /* @__PURE__ */ r(
-              C,
+              x,
               {
-                size: y.SM,
+                size: D.SM,
                 stroke: _,
                 "aria-hidden": "true"
               }
@@ -74,5 +74,5 @@ const X = ({
   );
 };
 export {
-  X as Tag
+  Z as Tag
 };

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

@@ -1,5 +1,9 @@
 import { TagAppearance as e } from "../../../types/tag.js";
 const a = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3", l = {
+  [e.Outlined]: "dial-tiny-text",
+  [e.Selectable]: "dial-tiny-text",
+  [e.Bordered]: "h-[24px] rounded-md border px-2 dial-small-text"
+}, r = {
   [e.Outlined]: {
     default: "bg-layer-raised text-primary",
     selected: "bg-control-accent-alpha text-primary"
@@ -7,11 +11,16 @@ const a = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3"
   [e.Selectable]: {
     default: "text-secondary",
     selected: "bg-control-accent-alpha text-primary"
+  },
+  [e.Bordered]: {
+    default: "border-tertiary bg-layer-sunken text-primary",
+    selected: "border-accent bg-control-accent-alpha text-primary"
   }
-}, c = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus", o = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
+}, o = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus", c = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
 export {
   a as tagBaseClassName,
-  o as tagHoverClassName,
-  c as tagInteractiveClassName,
-  l as tagStateClassNames
+  c as tagHoverClassName,
+  o as tagInteractiveClassName,
+  l as tagShapeClassNames,
+  r as tagStateClassNames
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.37",
-  "generatedAt": "2026-10-23T14:29:15.666Z",
+  "version": "0.16.0-dev.39",
+  "generatedAt": "2026-10-23T16:09:19.048Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -3826,6 +3826,13 @@
           "required": false,
           "description": "User-visible strings"
         },
+        {
+          "name": "showType",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the type label"
+        },
         {
           "name": "showVersion",
           "type": "boolean",
@@ -3911,6 +3918,89 @@
       ],
       "sourceFile": "components/New/EntityIdentity/EntityIdentity.tsx"
     },
+    {
+      "name": "SelectedEntityCard",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "The card of a form field that holds one selected entity — a model, an agent,\na toolset: its identity, a skeleton while the catalog loads, its raw id when\nthe catalog does not list it, or a placeholder when nothing is selected.\naliases: SelectedModelCard|ModelCard|EntityCard\nDesign system 2.0\n\nThe control that changes the selection lives next to the card, not in it:\nthe card is not interactive.",
+      "props": [
+        {
+          "name": "entityId",
+          "type": "string",
+          "required": true,
+          "description": "Id of the selected entity, `''` when there is none"
+        },
+        {
+          "name": "item",
+          "type": "EntityIdentityItem",
+          "required": false,
+          "description": "The selected entity as the catalog lists it"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the catalog is still loading"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Dims the card"
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "required": false,
+          "description": "Error text under the card; also turns its border red"
+        },
+        {
+          "name": "details",
+          "type": "ReactNode",
+          "required": false,
+          "description": "A line under the name"
+        },
+        {
+          "name": "labels",
+          "type": "SelectedEntityCardLabels",
+          "required": false,
+          "description": "User-visible strings"
+        },
+        {
+          "name": "showType",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to show the type label"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "defaultValue": "44",
+          "description": "Icon size in px"
+        },
+        {
+          "name": "headingLevel",
+          "type": "number",
+          "required": false,
+          "defaultValue": "4",
+          "description": "Heading level of the name"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the card"
+        }
+      ],
+      "examples": [
+        "<SelectedEntityCard\n  entityId=\"gpt-4o\"\n  item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}\n  isLoading={isLoading}\n  labels={{ type: t('Model'), placeholder: t('Select model') }}\n/>"
+      ],
+      "sourceFile": "components/New/SelectedEntityCard/SelectedEntityCard.tsx"
+    },
     {
       "name": "SideDrawer",
       "category": "Components_2_0",
@@ -4059,7 +4149,7 @@
       "name": "Tag",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag has one height — the 32px pill of the 2.0 design. There is no `size`\nprop: a tag sizes itself, and a caller that needs a different height is\nusually reaching for a button.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\nNo tag draws a rim; the two appearances are told apart by their fill.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
+      "description": "A compact label element used for selections, filters, or categories.\naliases: Chip|Pill\nDesign system 2.0\n\nThe tag is the 32px pill of the 2.0 design; `TagAppearance.Bordered` is the\ncompact 24px value chip of a form field. There is no `size` prop: a tag sizes\nitself, and a caller that needs a different height is usually reaching for a\nbutton.\n\nThe label truncates rather than wrapping, and carries a native `title` so the\nfull text stays reachable when it does.\n\nA tag with `onClick` becomes a `role=\"button\"` operable with Enter and Space.\nIts remove control is a real nested `<button>`, so keep the two roles apart in\nthe caller: a clickable tag that is also closable gives a screen reader two\nactions with no way to tell which one it landed on.\n\n`outlined` and `selectable` draw no rim and are told apart by their fill;\n`bordered` draws one: the outlined `Badge`'s look, for a value the user can\nremove, on a surface the rimless fill would vanish on.\n`TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill\nat all until it is selected, one hover tint shared by both states, a semibold\nlabel once selected, and the state carried on `aria-pressed` rather than by\nthe tint alone. Give it an `onClick` — a selectable tag that cannot be\nactivated is a colour and nothing else.\n\nSelecting one therefore changes its width by the difference between the\nregular and semibold label. In a wrapping filter row that is what the design\nasks for; if a fixed width matters, give the chip one.",
       "props": [
         {
           "name": "label",
@@ -4078,7 +4168,7 @@
           "type": "TagAppearance",
           "required": false,
           "defaultValue": "TagAppearance.Outlined",
-          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected."
+          "description": "`outlined` is the filled chip on the raised\nlayer; `selectable` is the unfilled filter chip that tints and turns semibold when selected;\n`bordered` is the compact rimmed value chip of a form field."
         },
         {
           "name": "selected",
@@ -11376,6 +11466,22 @@
       "sourceFile": "types/entity-type.ts",
       "description": "The category of a DIAL catalog entity. It picks the colour of the type label and the featured chip."
     },
+    {
+      "name": "SelectedEntityCardLabels",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "type?",
+          "value": "string"
+        },
+        {
+          "name": "placeholder?",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "components/New/SelectedEntityCard/SelectedEntityCard.tsx",
+      "description": "User-visible strings of `SelectedEntityCard`."
+    },
     {
       "name": "TagAppearance",
       "kind": "enum",
@@ -11387,6 +11493,11 @@
         {
           "name": "Selectable",
           "value": "'selectable'"
+        },
+        {
+          "name": "Bordered",
+          "value": "'bordered'",
+          "comment": "The compact, rimmed chip of a value in a form field (a host, a variable)."
         }
       ],
       "sourceFile": "types/tag.ts"
@@ -11823,7 +11934,7 @@
     {
       "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  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\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  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\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  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\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  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\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 `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-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 root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\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  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\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"
+      "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  /** The `section` root of a `StateScreen`. */\n  stateScreen: 'dial-kit-state-screen',\n  /** The `role=\"status\"` panel of a `TransferQueue`: header, rows and aggregate bar. */\n  transferQueue: 'dial-kit-transfer-queue',\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  /** The `role=\"separator\"` element of a `ResizeHandle`. */\n  resizeHandle: 'dial-kit-resize-handle',\n  /**\n   * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n   * `overlayClassName`.\n   */\n  popup: 'dial-kit-popup',\n  /** The `role=\"dialog\"` panel of a `BottomSheet`. */\n  bottomSheet: 'dial-kit-bottom-sheet',\n  /**\n   * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on\n   * `z-popup` that holds the panel.\n   */\n  bottomSheetOverlay: 'dial-kit-bottom-sheet-overlay',\n  /** The `role=\"dialog\"` panel of a `SideDrawer`, open or closed. */\n  sideDrawer: 'dial-kit-side-drawer',\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  /** The `nav` element of a `Breadcrumbs` trail. */\n  breadcrumbs: 'dial-kit-breadcrumbs',\n  /**\n   * One segment of a `Breadcrumbs` trail: the link, button or plain span that\n   * draws the label — not the `li`, which also holds the separator after it.\n   */\n  breadcrumbsItem: 'dial-kit-breadcrumbs-item',\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  /** The search row above the item list of a `searchable` `Dropdown`. */\n  dropdownSearch: 'dial-kit-dropdown-search',\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 `AutocompleteTagInput` field, additive to `dial-kit-input`. */\n  autocompleteTagInput: 'dial-kit-autocomplete-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 root of a `SchemaRenderer`, wrapping its top-level sections or fields. */\n  schemaRenderer: 'dial-kit-schema-renderer',\n  /**\n   * The card of one collapsible `SchemaRenderer` section, at any depth: a\n   * top-level property, a nested object or array, an array item, or a\n   * key-value entry holding an object.\n   */\n  schemaRendererSection: 'dial-kit-schema-renderer-section',\n  /** The drop area of a `FileDropzone`. */\n  fileDropzone: 'dial-kit-file-dropzone',\n  /**\n   * The root of a `FileIcon`, wrapping the file or folder glyph (or\n   * its spinner while loading) and the shared badge.\n   */\n  fileIcon: 'dial-kit-file-icon',\n  /** The row of a `FileName`: its type icon, the name and any details. */\n  fileName: 'dial-kit-file-name',\n  /** The `FileName` row of a `FolderName`, additive to `fileName`. */\n  folderName: 'dial-kit-folder-name',\n  /**\n   * The `role=\"img\"` badge of a `SharedEntityIndicator` — standalone, or the\n   * shared badge a `FileIcon` draws over its glyph.\n   */\n  sharedEntityIndicator: 'dial-kit-shared-entity-indicator',\n  /** The root of a `Badge`: the label box, with its icon when it has one. */\n  badge: 'dial-kit-badge',\n  /** The root of an `Avatar`: the image, or the initials box that replaces it. */\n  avatar: 'dial-kit-avatar',\n  /** The root row of an `EntityIdentity`: its icon, type label, name and version. */\n  entityIdentity: 'dial-kit-entity-identity',\n  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */\n  selectedEntityCard: 'dial-kit-selected-entity-card',\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  /**\n   * The outermost element of a `Tabs`: the box wrapping its heading and tab\n   * list — or the `role=\"tablist\"` itself, which is the root when the tabs\n   * carry no `sectionLabel`.\n   */\n  tabs: 'dial-kit-tabs',\n  /**\n   * The `role=\"tablist\"` holding the tabs, in either orientation. Additive to\n   * `tabs` when there is no heading above it, since one element is then both.\n   */\n  tabList: 'dial-kit-tab-list',\n  /**\n   * One tab inside `Tabs`, in either orientation. The selected tab of a\n   * horizontal row keeps its own `dial-kit-tab-selected-underline`.\n   */\n  tab: 'dial-kit-tab',\n  /**\n   * The selected tab, additive to `tab`. A horizontal row draws its selection\n   * with `dial-kit-tab-selected-underline`, which carries the gradient rule;\n   * this one carries no declarations and marks the selected tab in either\n   * orientation.\n   */\n  tabSelected: 'dial-kit-tab-selected',\n  /** The `sectionLabel` heading above a `Tabs`. Absent when there is none. */\n  tabsSectionLabel: 'dial-kit-tabs-section-label',\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"
     }
   ]
 }

package/dist/constants/public-class-names.js

@@ -157,6 +157,8 @@ const i = {
   avatar: "dial-kit-avatar",
   /** The root row of an `EntityIdentity`: its icon, type label, name and version. */
   entityIdentity: "dial-kit-entity-identity",
+  /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */
+  selectedEntityCard: "dial-kit-selected-entity-card",
   /* ── Controls ──────────────────────────────────────────────────────────── */
   /** The row of a `Switch`: the control and its label. */
   switch: "dial-kit-switch",