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

package/dist/components/New/Notification/Notification.js

@@ -1,63 +1,65 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { useMemo as b } from "react";
-import { DialIcon as k } from "../../Icon/Icon.js";
-import { NotificationVariant as n, NotificationType as i } from "../../../types/notification.js";
-import { mergeClasses as c } from "../../../utils/merge-classes.js";
-import { CloseButton as u } from "../CloseButton/CloseButton.js";
-import { variantIcons as I, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as v } from "./constants.js";
-import { DIAL_KIT_CLASS as L } from "../../../constants/public-class-names.js";
-const K = ({
-  variant: e = n.Info,
-  type: s = i.Toast,
+import { useMemo as k } from "react";
+import { DialIcon as u } from "../../Icon/Icon.js";
+import { NotificationVariant as c, NotificationType as s } from "../../../types/notification.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { CloseButton as v } from "../CloseButton/CloseButton.js";
+import { variantIcons as I, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as L } from "./constants.js";
+import { DIAL_KIT_CLASS as V } from "../../../constants/public-class-names.js";
+const R = ({
+  variant: e = c.Info,
+  type: i = s.Toast,
   title: o,
-  message: t,
-  className: d,
-  iconSize: l = 24,
-  iconStroke: m = 2,
-  closable: f = !1,
-  onClose: p,
-  children: x,
-  textClassName: h,
+  message: l,
+  action: t,
+  className: f,
+  iconSize: m = 24,
+  iconStroke: n = 2,
+  closable: p = !1,
+  onClose: x,
+  children: h,
+  textClassName: N,
   ...w
 }) => {
-  const N = b(() => I({ size: l, stroke: m })[e], [e, l, m]), g = h ?? (s === i.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  const g = k(() => I({ size: m, stroke: n })[e], [e, m, n]), C = N ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
   return /* @__PURE__ */ r(
     "div",
     {
       role: M[e],
       ...w,
-      className: c(
-        L.notification,
-        v,
+      className: d(
+        L,
         T[e],
-        s === i.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
-        s === i.SectionMessage && e === n.Loading && "border-secondary",
-        d
+        i === s.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
+        i === s.SectionMessage && e === c.Loading && "border-secondary",
+        f,
+        V.notification
       ),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(k, { icon: N }) }),
+          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(u, { icon: g }) }),
           o ? /* @__PURE__ */ r(
             "div",
             {
-              className: c(
+              className: d(
                 "flex min-w-0 text-primary break-words",
-                g
+                C
               ),
               children: [
                 /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: o }),
-                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 break-words", children: t })
+                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 break-words", children: l })
               ]
             }
-          ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: t })
+          ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
         ] }),
-        x,
-        f && /* @__PURE__ */ a(
-          u,
+        t != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: t }),
+        h,
+        p && /* @__PURE__ */ a(
+          v,
           {
             className: "shrink-0 self-start",
             ariaLabel: "Close notification",
-            onClose: (C) => p?.(C)
+            onClose: (b) => x?.(b)
           }
         )
       ]
@@ -65,5 +67,5 @@ const K = ({
   );
 };
 export {
-  K as Notification
+  R as Notification
 };

package/dist/components/New/NumberInput/NumberInput.js

@@ -33,8 +33,8 @@ const I = /^0+\.(\d+)?$/, K = /^0+/, S = [".", "-", "+", "e", "E"], l = (t) => !
     {
       ...c,
       wrapperClassName: h(
-        w.numberInput,
-        c.wrapperClassName
+        c.wrapperClassName,
+        w.numberInput
       ),
       type: "number",
       min: s,

package/dist/components/New/PasswordInput/PasswordInput.js

@@ -23,8 +23,8 @@ const K = ({
     {
       ...t,
       wrapperClassName: E(
-        _.passwordInput,
-        t.wrapperClassName
+        t.wrapperClassName,
+        _.passwordInput
       ),
       size: n,
       disabled: r,

package/dist/components/New/Popup/Popup.js

@@ -1,158 +1,183 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useFloating as J, useRole as Q, useDismiss as U, useInteractions as W, FloatingPortal as X, FloatingOverlay as Y, FloatingFocusManager as ee } from "@floating-ui/react";
-import { useRef as oe, useId as re } from "react";
-import { Button as se } from "../Button/Button.js";
-import { CloseButton as ae } from "../CloseButton/CloseButton.js";
-import { GhostIconButton as ie } from "../IconButton/IconButtonWrappers.js";
-import { Tooltip as le } from "../Tooltip/Tooltip.js";
-import { DIAL_KIT_ICON_STROKE as te } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as ne } from "../../../constants/icon.js";
-import { ButtonVariant as pe } from "../../../types/button.js";
-import { PopupSize as me } from "../../../types/popup.js";
-import { ElementSize as ce } from "../../../types/size.js";
-import { useThemeScope as de } from "../ThemeScope/ThemeScope.js";
-import { mergeClasses as r } from "../../../utils/merge-classes.js";
-import { IconChevronLeft as ue } from "@tabler/icons-react";
-import { popupActionsGroupClassName as l, popupHeaderDividerClassName as fe, popupHeaderClassName as ge, popupSizeClassMap as he, popupBaseClassName as Ne, popupOverlayBaseClassName as Ce, popupTitleClassName as ve, popupFooterDividerClassName as Ie, popupFooterClassName as Fe } from "./constants.js";
-import { DIAL_KIT_CLASS as Se } from "../../../constants/public-class-names.js";
-const $e = ({
-  open: t = !1,
-  header: n,
-  ariaLabel: F,
-  portalId: S,
-  className: x,
-  overlayClassName: T,
-  titleClassName: _,
-  headerClassName: b,
-  bodyClassName: z,
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { useFloating as X, useRole as Y, useDismiss as ee, useInteractions as oe, FloatingPortal as se, FloatingOverlay as re, FloatingFocusManager as ae } from "@floating-ui/react";
+import { useRef as ie, useId as le } from "react";
+import { Button as te } from "../Button/Button.js";
+import { CloseButton as ne } from "../CloseButton/CloseButton.js";
+import { GhostIconButton as pe } from "../IconButton/IconButtonWrappers.js";
+import { Tooltip as me } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_ICON_STROKE as ce } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ue } from "../../../constants/icon.js";
+import { ButtonVariant as de } from "../../../types/button.js";
+import { PopupSize as fe } from "../../../types/popup.js";
+import { ElementSize as Ne } from "../../../types/size.js";
+import { useThemeScope as ge } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
+import { IconChevronLeft as he } from "@tabler/icons-react";
+import { popupActionsGroupClassName as t, popupHeaderDividerClassName as Ce, popupHeaderClassName as ve, popupSizeClassMap as Ie, popupBaseClassName as Fe, popupOverlayBaseClassName as Se, popupTitleClassName as xe, popupMainActionsGroupClassName as Te, popupFooterDividerClassName as _e, popupFooterClassName as be, popupMainActionButtonClassName as F } from "./constants.js";
+import { DIAL_KIT_CLASS as ye } from "../../../constants/public-class-names.js";
+const Ve = ({
+  open: n = !1,
+  header: p,
+  ariaLabel: S,
+  portalId: x,
+  className: T,
+  overlayClassName: _,
+  overlayStyle: b,
+  titleClassName: y,
+  headerClassName: z,
+  bodyClassName: A,
   children: D,
-  footer: p,
-  footerClassName: y,
-  onClose: m,
-  onBack: c,
+  footer: m,
+  footerClassName: M,
+  onClose: c,
+  onBack: u,
   backAriaLabel: B = "Back",
   headerActions: d,
-  headerDivider: L = !1,
-  mainButtons: u,
-  additionalButtons: f,
-  additionalButtonsOnLeft: g = !1,
-  footerDivider: P = !1,
-  size: A = me.Md,
-  hideClose: M = !1,
-  closeAriaLabel: R = "Close dialog",
-  closeOnOutsideClick: w = !0,
-  preventKeyboardOnOpen: h = !1
+  headerDivider: P = !1,
+  mainButtons: f,
+  additionalButtons: N,
+  additionalButtonsOnLeft: a = !1,
+  footerDivider: G = !1,
+  size: L = fe.Md,
+  hideClose: R = !1,
+  closeAriaLabel: w = "Close dialog",
+  closeOnOutsideClick: E = !0,
+  preventKeyboardOnOpen: g = !1
 }) => {
-  const E = de(), N = oe(null), G = re(), { refs: C, context: a } = J({
-    open: t,
+  const $ = ge(), h = ie(null), j = le(), { refs: C, context: i } = X({
+    open: n,
     onOpenChange: (e) => {
-      e || m?.(null);
+      e || c?.(null);
     }
-  }), O = Q(a, { role: "dialog" }), $ = U(a, { outsidePress: w }), { getFloatingProps: j } = W([O, $]);
-  if (!t) return null;
-  const i = typeof n == "string" ? `popup-heading-${G}` : void 0, k = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
+  }), k = Y(i, { role: "dialog" }), H = ee(i, { outsidePress: E }), { getFloatingProps: K } = oe([k, H]);
+  if (!n) return null;
+  const l = typeof p == "string" ? `popup-heading-${j}` : void 0, O = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
     "h2",
     {
-      id: i,
-      className: r(ve, _),
-      children: /* @__PURE__ */ o(le, { tooltip: e, triggerClassName: "truncate", children: e })
+      id: l,
+      className: s(xe, y),
+      children: /* @__PURE__ */ o(me, { tooltip: e, triggerClassName: "truncate", children: e })
     }
-  ) : e : /* @__PURE__ */ o("span", {}), v = M ? null : /* @__PURE__ */ o(ae, { ariaLabel: R, onClose: (e) => m?.(e) }), I = (e, K = []) => K.map(({ variant: V = pe.Neutral, ...Z }, q) => /* @__PURE__ */ o(se, { variant: V, ...Z }, `${e}-${q}`)), H = () => {
-    if (p !== void 0) return p;
-    if (!u?.length && !f?.length) return null;
-    const e = I("additional", f);
-    return /* @__PURE__ */ s(
+  ) : e : /* @__PURE__ */ o("span", {}), v = R ? null : /* @__PURE__ */ o(ne, { ariaLabel: w, onClose: (e) => c?.(e) }), I = (e, Z = [], q) => Z.map(
+    ({ variant: J = de.Neutral, className: Q, ...U }, W) => /* @__PURE__ */ o(
+      te,
+      {
+        variant: J,
+        className: s(q, Q),
+        ...U
+      },
+      `${e}-${W}`
+    )
+  ), V = () => {
+    if (m !== void 0) return m;
+    if (!f?.length && !N?.length) return null;
+    const e = I(
+      "additional",
+      N,
+      a ? void 0 : F
+    );
+    return /* @__PURE__ */ r(
       "div",
       {
-        className: r(
-          Fe,
-          P && Ie,
-          y
+        className: s(
+          be,
+          G && _e,
+          M
         ),
         children: [
-          g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
-          /* @__PURE__ */ s("div", { className: r(l, "ml-auto"), children: [
-            !g && e,
-            I("main", u)
-          ] })
+          a && e.length > 0 && /* @__PURE__ */ o("div", { className: t, children: e }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: s(
+                t,
+                Te
+              ),
+              children: [
+                !a && e,
+                I("main", f, F)
+              ]
+            }
+          )
         ]
       }
     );
   };
-  return /* @__PURE__ */ o(X, { id: S, children: /* @__PURE__ */ o(
-    Y,
+  return /* @__PURE__ */ o(se, { id: x, children: /* @__PURE__ */ o(
+    re,
     {
-      className: r(
-        Ce,
-        E,
-        T
+      style: b,
+      className: s(
+        Se,
+        $,
+        _
       ),
       children: /* @__PURE__ */ o(
-        ee,
+        ae,
         {
-          context: a,
-          initialFocus: h ? N : C.floating,
-          children: /* @__PURE__ */ s(
+          context: i,
+          initialFocus: g ? h : C.floating,
+          children: /* @__PURE__ */ r(
             "div",
             {
               ref: C.setFloating,
-              ...j(),
+              ...K(),
               role: "dialog",
               "aria-modal": "true",
-              "aria-labelledby": i,
-              "aria-label": i ? void 0 : F,
-              className: r(
-                Se.popup,
-                Ne,
-                he[A],
-                x
+              "aria-labelledby": l,
+              "aria-label": l ? void 0 : S,
+              className: s(
+                Fe,
+                Ie[L],
+                T,
+                ye.popup
               ),
               children: [
-                h && /* @__PURE__ */ o(
+                g && /* @__PURE__ */ o(
                   "div",
                   {
-                    ref: N,
+                    ref: h,
                     tabIndex: -1,
                     "aria-hidden": !0,
                     className: "absolute size-px -m-px overflow-hidden opacity-0 pointer-events-none"
                   }
                 ),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ r(
                   "div",
                   {
-                    className: r(
-                      ge,
-                      L && fe,
-                      b
+                    className: s(
+                      ve,
+                      P && Ce,
+                      z
                     ),
                     children: [
-                      c && /* @__PURE__ */ o(
-                        ie,
+                      u && /* @__PURE__ */ o(
+                        pe,
                         {
                           "aria-label": B,
-                          size: ce.Small,
+                          size: Ne.Small,
                           className: "mr-2",
-                          onClick: c,
+                          onClick: u,
                           icon: /* @__PURE__ */ o(
-                            ue,
+                            he,
                             {
-                              size: ne.SM,
-                              stroke: te,
+                              size: ue.SM,
+                              stroke: ce,
                               "aria-hidden": "true"
                             }
                           )
                         }
                       ),
-                      k(n),
-                      d ? /* @__PURE__ */ s("div", { className: l, children: [
+                      O(p),
+                      d ? /* @__PURE__ */ r("div", { className: t, children: [
                         d,
                         v
                       ] }) : v
                     ]
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", z), children: D }),
-                H()
+                /* @__PURE__ */ o("div", { className: s("grow overflow-auto", A), children: D }),
+                V()
               ]
             }
           )
@@ -162,5 +187,5 @@ const $e = ({
   ) });
 };
 export {
-  $e as Popup
+  Ve as Popup
 };

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

@@ -1,17 +1,19 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const a = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", r = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", o = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", s = "border-b border-tertiary", l = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", x = "flex shrink-0 flex-row items-center gap-2", i = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"
 };
 export {
-  x as popupActionsGroupClassName,
-  r as popupBaseClassName,
-  l as popupFooterClassName,
+  i as popupActionsGroupClassName,
+  a as popupBaseClassName,
+  r as popupFooterClassName,
   m as popupFooterDividerClassName,
   t as popupHeaderClassName,
-  s as popupHeaderDividerClassName,
-  a as popupOverlayBaseClassName,
-  i as popupSizeClassMap,
-  o as popupTitleClassName
+  l as popupHeaderDividerClassName,
+  n as popupMainActionButtonClassName,
+  x as popupMainActionsGroupClassName,
+  o as popupOverlayBaseClassName,
+  u as popupSizeClassMap,
+  s as popupTitleClassName
 };

package/dist/components/New/Radio/Radio.js

@@ -28,9 +28,9 @@ const F = ({
       "div",
       {
         className: r(
-          k.radio,
           "flex items-center gap-2 ",
-          f
+          f,
+          k.radio
         ),
         children: [
           /* @__PURE__ */ e(

package/dist/components/New/RadioGroup/RadioGroup.js

@@ -30,9 +30,9 @@ const U = ({
     "div",
     {
       className: i(
-        K.radioGroup,
         E,
-        $
+        $,
+        K.radioGroup
       ),
       children: [
         r && /* @__PURE__ */ o(R, { ...r, id: n }),

package/dist/components/New/RadioGroupPopupField/RadioGroupPopupField.js

@@ -58,9 +58,9 @@ const zo = ({
     "div",
     {
       className: F(
-        Lo.radioGroupPopupField,
         "flex w-full flex-col gap-2",
-        Z
+        Z,
+        Lo.radioGroupPopupField
       ),
       children: [
         c && /* @__PURE__ */ o(ro, { ...c, id: $, htmlFor: e }),

package/dist/components/New/ResizableContainer/ResizableContainer.js

@@ -95,9 +95,9 @@ const j = 16, J = ({
     "div",
     {
       className: y(
-        K.resizableContainer,
         "group flex size-full flex-col bg-layer-raised transition-all motion-reduce:transition-none",
-        x
+        x,
+        K.resizableContainer
       ),
       children: M
     }