@epam/ai-dial-ui-kit 0.16.0-dev.32 → 0.16.0-dev.33

package/dist/components/New/NoDataContent/NoDataContent.js

@@ -1,56 +1,51 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import d from "../../../assets/icons/no-data.svg.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
-const r = 32, N = ({
-  title: s,
-  description: a,
-  icon: o,
-  live: i = !1,
+import { NoDataIllustration as d } from "./NoDataIllustration.js";
+const h = ({
+  title: a,
+  description: l,
+  icon: r,
+  action: s,
+  live: m = !1,
   className: n,
-  titleClassName: l,
-  descriptionClassName: m
+  titleClassName: o,
+  descriptionClassName: i
 }) => /* @__PURE__ */ c(
   "div",
   {
-    role: i ? "status" : void 0,
+    role: m ? "status" : void 0,
     className: e(
-      "flex size-full flex-col items-center justify-center gap-2 text-tertiary",
+      "flex size-full flex-col items-center justify-center px-4 text-center",
       n,
       x.noDataContent
     ),
     children: [
-      o ?? /* @__PURE__ */ t(
-        d,
-        {
-          width: r,
-          height: r,
-          "aria-hidden": "true"
-        }
-      ),
+      r ?? /* @__PURE__ */ t(d, {}),
       /* @__PURE__ */ t(
         "span",
         {
           className: e(
-            "dial-tiny-text text-secondary",
-            l
+            "dial-small-semi-text mt-6 text-primary",
+            o
           ),
-          children: s
+          children: a
         }
       ),
-      a && /* @__PURE__ */ t(
+      l != null && /* @__PURE__ */ t(
         "span",
         {
           className: e(
-            "dial-tiny-text text-secondary",
-            m
+            "dial-small-text mt-2 text-secondary",
+            i
           ),
-          children: a
+          children: l
         }
-      )
+      ),
+      s != null && /* @__PURE__ */ t("div", { className: "mt-4", children: s })
     ]
   }
 );
 export {
-  N as NoDataContent
+  h as NoDataContent
 };

package/dist/components/New/NoDataContent/NoDataIllustration.js

@@ -0,0 +1,53 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+const i = [12, 40, 68], t = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    width: 121,
+    height: 97,
+    viewBox: "0 0 121 97",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ l(
+        "rect",
+        {
+          x: 0.5,
+          y: 0.5,
+          width: 120,
+          height: 96,
+          rx: 16,
+          className: "fill-layer-0 stroke-tertiary"
+        }
+      ),
+      i.map((e) => /* @__PURE__ */ r("g", { children: [
+        /* @__PURE__ */ l("circle", { cx: 20.5, cy: e + 8.5, r: 8, className: "fill-layer-1" }),
+        /* @__PURE__ */ l(
+          "rect",
+          {
+            x: 36.5,
+            y: e + 1,
+            width: 56,
+            height: 6,
+            rx: 3,
+            className: "fill-layer-1"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "rect",
+          {
+            x: 36.5,
+            y: e + 11,
+            width: 34,
+            height: 5,
+            rx: 2.5,
+            className: "fill-layer-2"
+          }
+        )
+      ] }, e))
+    ]
+  }
+);
+export {
+  t as NoDataIllustration
+};

package/dist/components/New/Select/Select.js

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as g, Fragment as Ve } from "react/jsx-runtime";
+import { jsx as l, jsxs as N, Fragment as Ve } from "react/jsx-runtime";
 import { IconChevronDown as qe } from "@tabler/icons-react";
 import { useId as Ge, useState as U, useCallback as m, useMemo as u, useEffect as He, useImperativeHandle as Qe, Fragment as We } from "react";
 import { Checkbox as Ze } from "../Checkbox/Checkbox.js";
@@ -9,7 +9,7 @@ import { ErrorText as Ye, CaptionText as Pe } from "../CaptionText/CaptionText.j
 import { GhostIconButton as el } from "../IconButton/IconButtonWrappers.js";
 import { Input as se } from "../Input/Input.js";
 import { Label as ll } from "../Label/Label.js";
-import { DialNoDataContent as tl } from "../../NoDataContent/NoDataContent.js";
+import { NoDataContent as tl } from "../NoDataContent/NoDataContent.js";
 import { DIAL_KIT_ICON_STROKE as nl } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as ce } from "../../../constants/icon.js";
 import { MenuItem as de } from "../MenuItem/MenuItem.js";
@@ -21,9 +21,9 @@ import { mergeClasses as p } from "../../../utils/merge-classes.js";
 import { CollapsedSelectTags as il } from "./CollapsedSelectTags.js";
 import { MultiSelectTags as al } from "./MultiSelectTags.js";
 import { SelectSubMenuItem as ol } from "./SelectSubMenuItem.js";
-import { selectFieldIconClassName as sl, selectListWidthClassName as cl, selectOverlayBaseClassName as dl, selectSearchThreshold as fl, selectSearchIcon as ml, selectCloseIcon as ul, selectOptionBaseClassName as hl, selectOptionsScrollClassName as pl, selectEmptyStateIcon as vl } from "./constants.js";
-import { DIAL_KIT_CLASS as bl } from "../../../constants/public-class-names.js";
-const ql = ({
+import { selectFieldIconClassName as sl, selectListWidthClassName as cl, selectOverlayBaseClassName as dl, selectSearchThreshold as fl, selectSearchIcon as ml, selectCloseIcon as ul, selectOptionBaseClassName as hl, selectOptionsScrollClassName as pl } from "./constants.js";
+import { DIAL_KIT_CLASS as vl } from "../../../constants/public-class-names.js";
+const Vl = ({
   options: i,
   multiple: n = !1,
   id: me,
@@ -33,7 +33,7 @@ const ql = ({
   prefix: G,
   customSelectedValue: H,
   placeholder: he = "Select...",
-  labelProps: N,
+  labelProps: S,
   error: v,
   caption: Q,
   ariaLabel: W,
@@ -44,11 +44,11 @@ const ql = ({
   selectAll: be = !1,
   invalid: R,
   selectAllLabel: Ce = "Select all",
-  collapseTagOverflow: Ie = !1,
+  collapseTagOverflow: ge = !1,
   selectedOptionMark: X = V.Tint,
-  emptyStateTitle: Se = "No options available",
-  emptyStateDescription: ge,
-  emptyStateIcon: Ne,
+  emptyStateTitle: Ie = "No options available",
+  emptyStateDescription: Ne,
+  emptyStateIcon: Se,
   disabled: b = !1,
   className: xe,
   fieldClassName: we,
@@ -65,28 +65,28 @@ const ql = ({
   onSearchQueryChange: ne,
   customMultiSelectTagsRenderer: $
 }) => {
-  const Ae = Ge(), c = me || Ae, re = `list-${c}`, ie = v ? `${c}-error` : void 0, ae = !v && Q ? `${c}-caption` : void 0, oe = q === D.Small, [ke, Oe] = U(!1), E = le !== void 0, f = E ? !!le : ke, d = m(
+  const Ae = Ge(), c = me || Ae, re = `list-${c}`, ie = v ? `${c}-error` : void 0, ae = !v && Q ? `${c}-caption` : void 0, oe = q === D.Small, [ke, Oe] = U(!1), M = le !== void 0, f = M ? !!le : ke, d = m(
     (e) => {
-      E || Oe(e), te?.(e);
+      M || Oe(e), te?.(e);
     },
-    [E, te]
-  ), [h, De] = U(""), M = m(
+    [M, te]
+  ), [h, De] = U(""), B = m(
     (e) => {
       e !== h && (De(e || ""), ne?.(e || ""));
     },
     [ne, h]
-  ), B = F !== void 0, [Fe, Le] = U(ue), C = B ? F : Fe, r = u(() => n ? Array.isArray(C) ? C : [] : typeof C == "string" ? [C] : [], [C, n]), y = u(() => {
+  ), E = F !== void 0, [Fe, Le] = U(ue), C = E ? F : Fe, r = u(() => n ? Array.isArray(C) ? C : [] : typeof C == "string" ? [C] : [], [C, n]), y = u(() => {
     const e = h.trim().toLowerCase();
     return e ? i.filter((t) => t.label.toLowerCase().includes(e)) : i;
   }, [i, h]);
   He(() => {
-    f || M("");
-  }, [f, M]);
+    f || B("");
+  }, [f, B]);
   const s = m(
     (e) => {
-      B || Le(e), P?.(e);
+      E || Le(e), P?.(e);
     },
-    [B, P]
+    [E, P]
   ), _ = m(
     (e) => {
       if (n) {
@@ -119,7 +119,7 @@ const ql = ({
       allSelectedInFiltered: e,
       someSelectedInFiltered: j > 0 && !e
     };
-  }, [o, j]), Ee = m(() => {
+  }, [o, j]), Me = m(() => {
     if (!(!n || o.length === 0))
       if (K) {
         const e = new Set(o.map((t) => t.value));
@@ -137,7 +137,7 @@ const ql = ({
   ]), A = r.length > 0, k = !n && A ? r[0] : void 0, a = u(
     () => k ? i.find((e) => e.value === k) ?? i.flatMap((e) => e.children ?? []).find((e) => e.value === k) : void 0,
     [i, k]
-  ), I = a ? G ? `${G} ${a.label}` : a.label : void 0, Me = rl(), z = n && Ie && !$ && !Me, S = u(() => n ? A ? z ? /* @__PURE__ */ l(
+  ), g = a ? G ? `${G} ${a.label}` : a.label : void 0, Be = rl(), z = n && ge && !$ && !Be, I = u(() => n ? A ? z ? /* @__PURE__ */ l(
     il,
     {
       options: i,
@@ -155,11 +155,11 @@ const ql = ({
       selectedValues: r,
       handleRemoveTag: T
     }
-  ) }) : null : !a || !a.labelNode && !a.description ? null : /* @__PURE__ */ g("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+  ) }) : null : !a || !a.labelNode && !a.description ? null : /* @__PURE__ */ N("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
     /* @__PURE__ */ l(
       Re,
       {
-        text: a.labelNode ?? I
+        text: a.labelNode ?? g
       }
     ),
     a.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: a.description })
@@ -170,12 +170,12 @@ const ql = ({
     A,
     n,
     i,
-    I,
+    g,
     r,
     a
-  ]), Be = n || S ? "" : I || (H && F ? H : ""), _e = typeof N?.label == "string" ? N.label : void 0, je = S ? [
+  ]), Ee = n || I ? "" : g || (H && F ? H : ""), _e = typeof S?.label == "string" ? S.label : void 0, je = I ? [
     fe(W, _e),
-    n ? r.map((e) => i.find((t) => t.value === e)?.label ?? e).join(", ") : I
+    n ? r.map((e) => i.find((t) => t.value === e)?.label ?? e).join(", ") : g
   ].filter(Boolean).join(", ") || void 0 : fe(W);
   Qe(Te, () => ({
     dismiss: () => {
@@ -187,7 +187,7 @@ const ql = ({
       b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), f || d(!0));
     },
     [b, f, d]
-  ), ze = () => /* @__PURE__ */ g(
+  ), ze = () => /* @__PURE__ */ N(
     "div",
     {
       id: re,
@@ -196,7 +196,7 @@ const ql = ({
       className: dl,
       children: [
         x && /* @__PURE__ */ l(Ve, { children: typeof x == "function" ? x() : x }),
-        (Z || L) && (i.length > fl || !!h) && /* @__PURE__ */ g("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+        (Z || L) && (i.length > fl || !!h) && /* @__PURE__ */ N("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
           Z && /* @__PURE__ */ l(
             se,
             {
@@ -204,7 +204,7 @@ const ql = ({
               size: ve,
               placeholder: J,
               "aria-label": J || "Search options",
-              onChange: (e) => M(e),
+              onChange: (e) => B(e),
               value: h,
               iconBefore: ml,
               containerClassName: "w-full"
@@ -230,15 +230,15 @@ const ql = ({
             labelProps: { label: Ce },
             isSelected: K,
             isIndeterminate: $e,
-            onChange: Ee
+            onChange: Me
           }
         ) }),
         /* @__PURE__ */ l("div", { role: "none", className: pl, children: y.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
           tl,
           {
-            icon: Ne ?? vl,
-            title: Se,
-            description: ge
+            icon: Se,
+            title: Ie,
+            description: Ne
           }
         ) }) : y.map((e) => {
           const t = r.includes(e.value);
@@ -318,17 +318,17 @@ const ql = ({
       ]
     }
   );
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ N(
     "div",
     {
       className: p(
         "flex w-full flex-col gap-2",
         xe,
-        bl.select
+        vl.select
       ),
       children: [
-        N && /* @__PURE__ */ l(ll, { ...N, htmlFor: c }),
-        /* @__PURE__ */ g("div", { className: "flex flex-col gap-1", children: [
+        S && /* @__PURE__ */ l(ll, { ...S, htmlFor: c }),
+        /* @__PURE__ */ N("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ l(
             Je,
             {
@@ -349,8 +349,8 @@ const ql = ({
                   size: q,
                   disabled: b,
                   invalid: R,
-                  value: Be,
-                  placeholder: S ? void 0 : he,
+                  value: Ee,
+                  placeholder: I ? void 0 : he,
                   readOnly: !0,
                   iconBefore: n ? void 0 : a?.icon,
                   iconAfter: /* @__PURE__ */ l(
@@ -384,10 +384,10 @@ const ql = ({
                   ),
                   className: p(
                     "cursor-pointer",
-                    S && "w-0 min-w-0 flex-none p-0"
+                    I && "w-0 min-w-0 flex-none p-0"
                   ),
                   onKeyDown: Ke,
-                  children: S
+                  children: I
                 }
               )
             }
@@ -400,5 +400,5 @@ const ql = ({
   );
 };
 export {
-  ql as Select
+  Vl as Select
 };

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

@@ -1,53 +1,44 @@
-import { jsx as s } from "react/jsx-runtime";
-import { IconSearch as a, IconX as r, IconChevronRight as c } from "@tabler/icons-react";
-import l from "../../../assets/icons/no-data.svg.js";
-import { overlayItemClassName as n, overlayListClassName as i, overlayGap as m, overlaySubMenuListClassName as h } from "../constants/overlay.js";
-import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
-import { mergeClasses as o } from "../../../utils/merge-classes.js";
-const N = o("w-full flex flex-col"), v = n, y = "!max-w-[var(--reference-width)]", x = o(
+import { jsx as e } from "react/jsx-runtime";
+import { IconSearch as a, IconX as r, IconChevronRight as l } from "@tabler/icons-react";
+import { overlayItemClassName as c, overlayListClassName as n, overlayGap as i, overlaySubMenuListClassName as m } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as o } from "../../../constants/icon.js";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+const S = t("w-full flex flex-col"), d = c, N = "!max-w-[var(--reference-width)]", v = t(
   "max-h-[344px] overflow-y-auto py-1",
-  i
-), L = m, M = h, O = /* @__PURE__ */ s(
-  c,
+  n
+), x = i, y = m, M = /* @__PURE__ */ e(
+  l,
   {
-    size: e.SM,
-    stroke: t,
+    size: o.SM,
+    stroke: s,
     "aria-hidden": "true"
   }
-), w = "text-secondary transition-transform", _ = 8, b = /* @__PURE__ */ s(
+), O = "text-secondary transition-transform", L = 8, _ = /* @__PURE__ */ e(
   a,
   {
-    size: e.MD,
-    stroke: t,
+    size: o.MD,
+    stroke: s,
     "aria-hidden": "true"
   }
-), g = /* @__PURE__ */ s(
+), b = /* @__PURE__ */ e(
   r,
   {
-    size: e.SM,
-    stroke: t,
-    "aria-hidden": "true"
-  }
-), D = /* @__PURE__ */ s(
-  l,
-  {
-    width: e.LG,
-    height: e.LG,
+    size: o.SM,
+    stroke: s,
     "aria-hidden": "true"
   }
 );
 export {
-  g as selectCloseIcon,
-  D as selectEmptyStateIcon,
-  w as selectFieldIconClassName,
-  y as selectListWidthClassName,
-  v as selectOptionBaseClassName,
-  x as selectOptionsScrollClassName,
-  N as selectOverlayBaseClassName,
-  b as selectSearchIcon,
-  _ as selectSearchThreshold,
-  O as selectSubMenuCaretIcon,
-  M as selectSubMenuClassName,
-  L as selectSubMenuGap
+  b as selectCloseIcon,
+  O as selectFieldIconClassName,
+  N as selectListWidthClassName,
+  d as selectOptionBaseClassName,
+  v as selectOptionsScrollClassName,
+  S as selectOverlayBaseClassName,
+  _ as selectSearchIcon,
+  L as selectSearchThreshold,
+  M as selectSubMenuCaretIcon,
+  y as selectSubMenuClassName,
+  x as selectSubMenuGap
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.32",
-  "generatedAt": "2026-10-21T19:48:14.902Z",
+  "version": "0.16.0-dev.33",
+  "generatedAt": "2026-10-21T20:30:45.012Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -5070,7 +5070,7 @@
       "name": "NoDataContent",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "Message shown in place of a list, table or grid that has nothing to show.\naliases: EmptyState|NoResults|ZeroState\nDesign system 2.0\n\nFills its container and centres an illustration, a headline and an optional\nsecondary line. The icon is decorative, so it is hidden from assistive tech\nand the text carries the message on its own.",
+      "description": "Message shown in place of a list, table or grid that has nothing to show.\naliases: EmptyState|NoResults|ZeroState\nDesign system 2.0\n\nFills its container and centres an illustration, a headline, an optional\nsecondary line and an optional action. The icon is decorative, so it is\nhidden from assistive tech and the text carries the message on its own.",
       "props": [
         {
           "name": "title",
@@ -5088,7 +5088,13 @@
           "name": "icon",
           "type": "ReactNode",
           "required": false,
-          "description": "Illustration above the title. Defaults to the empty-state document mark."
+          "description": "Illustration above the title. Defaults to the placeholder-list card."
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional way forward, rendered under the text."
         },
         {
           "name": "live",
@@ -5117,7 +5123,7 @@
         }
       ],
       "examples": [
-        "<NoDataContent\n  title=\"No results found\"\n  description=\"Try a different search term.\"\n/>\n\n<NoDataContent title=\"Nothing here yet\" icon={<IconInbox size={60} />} live />"
+        "<NoDataContent\n  title=\"No chats found\"\n  description=\"Try a different search term or check your filters.\"\n  live\n/>\n\n<NoDataContent\n  title=\"No chats yet\"\n  description=\"Chats will appear here once you start one.\"\n  action={<Button label=\"New chat\" onClick={createChat} />}\n/>"
       ],
       "sourceFile": "components/New/NoDataContent/NoDataContent.tsx"
     },