@epam/ai-dial-ui-kit 0.16.0-dev.4 → 0.16.0-dev.41

package/dist/components/InputPopup/InputPopup.js

@@ -5,7 +5,7 @@ import { useCallback as M } from "react";
 import { DialTooltip as P } from "../Tooltip/Tooltip.js";
 import { DialErrorText as N } from "../CaptionText/CaptionText.js";
 import { DialAutocompleteInputValue as _ } from "../AutocompleteInput/AutocompleteInputValue.js";
-import u from "../../assets/icons/open-popup.svg.js";
+import d from "../../assets/icons/open-popup.svg.js";
 import { DialIcon as r } from "../Icon/Icon.js";
 import { BASE_ICON_SIZE as a } from "../../constants/icon.js";
 const U = ({
@@ -13,7 +13,7 @@ const U = ({
   open: k,
   disabled: l = !1,
   selectedValue: t,
-  valueClassName: d,
+  valueClassName: u,
   inputClassName: f,
   onOpen: h,
   elementId: x,
@@ -56,7 +56,7 @@ const U = ({
             r,
             {
               icon: /* @__PURE__ */ i(
-                u,
+                d,
                 {
                   role: "img",
                   width: a,
@@ -85,8 +85,8 @@ const U = ({
                 {
                   type: "text",
                   className: c(
-                    "flex-1 min-w-0 bg-transparent outline-none border-none p-0 dial-small-text text-primary placeholder:text-secondary",
-                    d
+                    "flex-1 min-w-0 bg-transparent outline-hidden border-none p-0 dial-small-text text-primary placeholder:text-secondary",
+                    u
                   ),
                   value: typeof t == "string" ? t : "",
                   placeholder: o || w,
@@ -108,7 +108,7 @@ const U = ({
                   r,
                   {
                     icon: /* @__PURE__ */ i(
-                      u,
+                      d,
                       {
                         role: "img",
                         width: a,
@@ -144,13 +144,13 @@ const U = ({
               children: [
                 /* @__PURE__ */ e("div", { className: "flex flex-row items-center gap-x-2 flex-1 min-w-0", children: [
                   n && /* @__PURE__ */ i(r, { icon: n }),
-                  /* @__PURE__ */ i(P, { tooltip: p == null ? void 0 : String(p), children: p || !o ? /* @__PURE__ */ i("span", { className: d, children: p }) : /* @__PURE__ */ i("span", { className: "text-secondary", children: o }) })
+                  /* @__PURE__ */ i(P, { tooltip: p == null ? void 0 : String(p), children: p || !o ? /* @__PURE__ */ i("span", { className: u, children: p }) : /* @__PURE__ */ i("span", { className: "text-secondary", children: o }) })
                 ] }),
                 !l && /* @__PURE__ */ i("div", { className: "shrink-0", children: /* @__PURE__ */ i(
                   r,
                   {
                     icon: /* @__PURE__ */ i(
-                      u,
+                      d,
                       {
                         role: "img",
                         width: a,

package/dist/components/LoadFileArea/EmptyFileArea.js

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

package/dist/components/Loader/Loader.js

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

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,29 +1,27 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as J, useState as u, useEffect as S, useCallback as x } from "react";
-import "../../constants/editor.js";
-import { EditorThemes as b } from "../../types/editor.js";
-import "@monaco-editor/react";
-import { DialSwitch as v } from "../Switch/Switch.js";
+import { DialSwitch as b } from "../Switch/Switch.js";
+import { EditorThemes as v } from "../../types/editor.js";
 import { DialMarkdownEditor as y } from "./MarkdownEditor.js";
 import { DialLabel as j } from "../Label/Label.js";
-const q = ({
+const B = ({
   value: s,
   onChangeValue: l,
-  label: i,
+  label: t,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = b.dark,
+  theme: m = v.dark,
   onValidateJSON: f,
   preview: C = "edit",
   showDragbar: N = !0
 }) => {
-  const w = J(), [t, D] = u(!1), [p, E] = u(null);
+  const w = J(), [n, D] = u(!1), [p, E] = u(null);
   S(() => {
-    t && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       E(() => o.DialJsonEditor);
     });
-  }, [t]);
+  }, [n]);
   const h = x(
     (o) => {
       l?.(o);
@@ -34,16 +32,16 @@ const q = ({
       f?.(o);
     },
     [f]
-  ), n = !!a;
+  ), i = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (i || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      i && /* @__PURE__ */ e(j, { label: i }),
+    (t || d || i) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      t && /* @__PURE__ */ e(j, { label: t }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          v,
+        i && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          b,
           {
-            isOn: t,
+            isOn: n,
             label: a,
             switchId: w,
             onChange: (o) => D(o)
@@ -51,7 +49,7 @@ const q = ({
         ) })
       ] })
     ] }),
-    n && t ? /* @__PURE__ */ e(
+    i && n ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -80,5 +78,5 @@ const q = ({
   ] }) }) });
 };
 export {
-  q as DialMarkdownEditorContainer
+  B as DialMarkdownEditorContainer
 };

package/dist/components/New/Avatar/Avatar.js

@@ -1,31 +1,33 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useState as C } from "react";
-import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { useState as w } from "react";
+import { DIAL_KIT_CLASS as I } from "../../../constants/public-class-names.js";
 import { AvatarShape as d } from "../../../types/avatar.js";
-import { pickAvatarColor as w, extractInitials as I } from "../../../utils/avatar.js";
+import { pickAvatarColor as N, extractInitials as j } from "../../../utils/avatar.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const N = {
+const k = {
   [d.Circle]: "rounded-full",
   [d.Square]: "rounded-md"
-}, E = ({
+}, D = ({
   name: s,
   initials: c,
   src: r,
   alt: t = "",
   size: o = 32,
   shape: f = d.Circle,
-  className: h,
+  color: h,
+  className: u,
   textClassName: l,
-  onImageError: u
+  imageClassName: S,
+  onImageError: p
 }) => {
-  const [S, p] = C(), v = !!r && S !== r, i = t !== "", m = (n) => e(
+  const [v, g] = w(), A = !!r && v !== r, i = t !== "", m = (n) => e(
     "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
-    N[f],
+    k[f],
     n,
-    h,
-    b.avatar
+    u,
+    I.avatar
   );
-  if (v)
+  if (A)
     return /* @__PURE__ */ a(
       "img",
       {
@@ -33,20 +35,20 @@ const N = {
         alt: t,
         width: o,
         height: o,
-        className: e(m(), "object-cover"),
+        className: e(m(S), "object-cover"),
         onError: (n) => {
-          p(r), u?.(n);
+          g(r), p?.(n);
         }
       }
     );
-  const { background: g, foreground: A } = w(s);
+  const { background: C, foreground: b } = h ?? N(s);
   return /* @__PURE__ */ a(
     "span",
     {
       role: i ? "img" : void 0,
       "aria-label": i ? t : void 0,
       "aria-hidden": i ? void 0 : !0,
-      className: m(e(g, A)),
+      className: m(e(C, b)),
       style: {
         width: o,
         height: o,
@@ -59,12 +61,12 @@ const N = {
             "leading-none",
             l ?? "font-semibold"
           ),
-          children: c ?? I(s)
+          children: c ?? j(s)
         }
       )
     }
   );
 };
 export {
-  E as Avatar
+  D as Avatar
 };

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

@@ -1,86 +1,87 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useFloating as k, useRole as A, useDismiss as O, useInteractions as w, FloatingPortal as z, FloatingOverlay as D, FloatingFocusManager as T } from "@floating-ui/react";
-import { IconArrowLeft as j } from "@tabler/icons-react";
-import { useId as B } from "react";
-import { CloseButton as E } from "../CloseButton/CloseButton.js";
-import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
-import { GhostIconButton as P } from "../IconButton/IconButtonWrappers.js";
-import { useThemeScope as G } from "../ThemeScope/ThemeScope.js";
-import { DIAL_ICON_SIZE as R } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useFloating as k, useRole as A, useDismiss as w, useInteractions as z, FloatingPortal as D, FloatingOverlay as T, FloatingFocusManager as j } from "@floating-ui/react";
+import { IconArrowLeft as B } from "@tabler/icons-react";
+import { useId as E } from "react";
+import { CloseButton as K } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as P } from "../constants/icon.js";
+import { GhostIconButton as G } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as R } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as M } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as c } from "../../../constants/public-class-names.js";
 import { ElementSize as U } from "../../../types/size.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
 const te = ({
   open: i,
   onClose: a,
   title: t,
-  ariaLabel: c,
+  ariaLabel: d,
   onBack: s,
-  backAriaLabel: d = "Back",
-  closeAriaLabel: u = "Close",
-  closeOnOutsideClick: f = !0,
-  children: p,
-  className: h,
-  overlayClassName: b,
-  headerClassName: g,
-  style: x,
-  overlayStyle: I,
-  bodyClassName: S,
-  titleClassName: N,
-  portalId: v
+  backAriaLabel: u = "Back",
+  closeAriaLabel: f = "Close",
+  closeOnOutsideClick: p = !0,
+  children: h,
+  className: b,
+  overlayClassName: g,
+  headerClassName: x,
+  style: I,
+  overlayStyle: S,
+  bodyClassName: v,
+  titleClassName: y,
+  portalId: N
 }) => {
-  const y = G(), l = `bottom-sheet-title-${B()}`, { refs: n, context: r } = k({
+  const F = R(), l = `bottom-sheet-title-${E()}`, { refs: m, context: r } = k({
     open: i,
-    onOpenChange: (_) => {
-      _ || a();
+    onOpenChange: (O) => {
+      O || a();
     }
-  }), F = A(r, { role: "dialog" }), C = O(r, { outsidePress: f }), { getFloatingProps: L } = w([F, C]);
-  return i ? /* @__PURE__ */ e(z, { id: v, children: /* @__PURE__ */ e(
-    D,
+  }), C = A(r, { role: "dialog" }), L = w(r, { outsidePress: p }), { getFloatingProps: _ } = z([C, L]);
+  return i ? /* @__PURE__ */ e(D, { id: N, children: /* @__PURE__ */ e(
+    T,
     {
       lockScroll: !0,
-      style: I,
+      style: S,
       className: o(
         "z-popup flex items-end bg-backdrop",
-        y,
-        b
+        F,
+        g,
+        c.bottomSheetOverlay
       ),
-      children: /* @__PURE__ */ e(T, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ e(j, { context: r, initialFocus: m.floating, children: /* @__PURE__ */ n(
         "div",
         {
-          ref: n.setFloating,
-          ...L(),
+          ref: m.setFloating,
+          ..._(),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": t ? l : void 0,
-          "aria-label": t ? void 0 : c,
-          style: x,
+          "aria-label": t ? void 0 : d,
+          style: I,
           className: o(
-            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
+            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-hidden",
             "animate-slideUp motion-reduce:animate-none",
-            h,
-            M.bottomSheet
+            b,
+            c.bottomSheet
           ),
           children: [
-            t && /* @__PURE__ */ m(
+            t && /* @__PURE__ */ n(
               "div",
               {
                 className: o(
                   "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14",
-                  g
+                  x
                 ),
                 children: [
                   s && /* @__PURE__ */ e(
-                    P,
+                    G,
                     {
-                      "aria-label": d,
+                      "aria-label": u,
                       className: "absolute start-4",
                       onClick: s,
                       icon: /* @__PURE__ */ e(
-                        j,
+                        B,
                         {
-                          size: R.LG,
-                          stroke: K,
+                          size: M.LG,
+                          stroke: P,
                           className: "rtl:-scale-x-100",
                           "aria-hidden": "true"
                         }
@@ -93,15 +94,15 @@ const te = ({
                       id: l,
                       className: o(
                         "min-w-0 truncate text-primary",
-                        N ?? "dial-body-semi-text"
+                        y ?? "dial-body-semi-text"
                       ),
                       children: t
                     }
                   ),
                   /* @__PURE__ */ e(
-                    E,
+                    K,
                     {
-                      ariaLabel: u,
+                      ariaLabel: f,
                       onClose: a,
                       size: U.Standard,
                       className: "absolute end-4"
@@ -113,8 +114,8 @@ const te = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: o("min-h-0 overflow-y-auto", S),
-                children: p
+                className: o("min-h-0 overflow-y-auto", v),
+                children: h
               }
             )
           ]

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

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