@epam/ai-dial-ui-kit 0.15.0 → 0.15.1

package/dist/CHANGELOG.md

@@ -73,6 +73,8 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`Popup` (2.0) — footer buttons split the row evenly on mobile** — below the `mobile` breakpoint (768px), where the popup fills the screen, the trailing `mainButtons` group now spans the footer and each of its buttons takes an equal share, so a Cancel/Confirm pair renders 50/50 and a single button fills the row. `additionalButtons` in the trailing group stretch with it; with `additionalButtonsOnLeft` they keep their natural width. Desktop is unchanged, a caller's `className` on a button still merges on top, and a custom `footer` node is not touched. The props are unchanged. Reported on the mobile dialogs in ai-dial-chat.
+
 - **`Slider` (2.0) — ticks** — ticks are drawn in the `Controls/Stroke/Accent-focus` token (`--stroke-accent-focus`, was the neutral control grey), and there is one per step after `min`: a 0–1 slider at 0.1 now draws exactly 10. The tick at `min` was always under the thumb or the fill, so nothing visible is lost. Visual only; no props change.
 
 - **`Grid` (2.0) — a 1px header divider and an accent outline on hovered and selected rows** — the line under the header was on the thin 0.5px stroke like the rows, so the table body did not read as separate from its header; it is now the 1px main stroke, while the rows keep 0.5px. A hovered or selected row is outlined top and bottom with the design system shadow colour `--shadow-xs-1`, drawn as an inset shadow so the row keeps its height, and tinted with the new `--bg-control-accent-alpha-hover-subtle` (hover) and `--bg-control-accent-alpha-active-subtle` (selected) tokens. The line between the header titles and the filter row is removed, and the search fields use an 8px radius. The 1px line under the header was never drawn — ag-Grid's `border-bottom: none` collapsed it to 0 — and now is; column titles are 10px semibold caps, the header dividers are the design's short 12px marks, and the filter inputs use 12px text. Visual only; no prop changes.

package/dist/JsonEditor-eAV7SaKu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("./editor-BH6_A1k2.cjs"),d=require("@monaco-editor/react");function f(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const m=f(d),b=({value:e,onChange:o,onValidateJSON:t,options:a,currentTheme:n,themesConfig:i=u.EDITOR_THEMES_CONFIG})=>{function s(r){r?.editor?.defineTheme(n,i[n]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=m;return c.jsx(l,{beforeMount:s,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:t,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...a??{}}})};exports.DialJsonEditor=b;

package/dist/{MarkdownEditor-BKtFs714.cjs → MarkdownEditor-Cp-KX6-T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-_W6FYhKg.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-DMVYJhUR.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const h=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:g,strikethrough:x,table:j,unorderedListCommand:C}=h;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(x,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(g,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(j,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=h;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m,showDragbar:I=!0})=>{const g=b.useMemo(()=>M(),[]),x=b.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:j=>i?.(j||""),height:r,preview:u,visibleDragbar:I,commands:g,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-Bapd1ycU.cjs → MarkdownEditor-Dav_pp0T.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-_W6FYhKg.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("@uiw/react-md-editor"),u=require("./lazy-DMVYJhUR.cjs"),x=require("./merge-classes-BEJXjzkx.cjs"),g=({value:r,onChange:s,height:o=300,preview:i="edit",theme:a=u.EditorThemes.dark,className:n,placeholder:t,showDragbar:d=!0})=>{const l=t!==void 0&&!r;return e.jsxs("div",{"data-color-mode":a,className:x.mergeClasses("relative",n),children:[e.jsx(m,{value:r,onChange:c=>s?.(c||""),height:o,preview:i,visibleDragbar:d}),l&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:t})]})};exports.DialMarkdownEditor=g;

package/dist/MarkdownEditorContainer-96cKYmYd.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react");require("./editor-BH6_A1k2.cjs");const N=require("./lazy-DMVYJhUR.cjs");require("@monaco-editor/react");const m=require("./Switch-DE6MrcqJ.cjs"),b=require("./MarkdownEditor-Dav_pp0T.cjs"),g=({value:o,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=N.EditorThemes.dark,onValidateJSON:x,preview:j="edit",showDragbar:w=!0})=>{const C=n.useId(),[t,p]=n.useState(!1),[f,S]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-eAV7SaKu.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),r=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||r)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,r&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:C,onChange:s=>p(s)})})]})]}),r&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:o,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:o,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

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

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

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

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0",
-  "generatedAt": "2026-10-08T15:16:08.527Z",
+  "version": "0.15.1",
+  "generatedAt": "2026-10-12T13:29:09.309Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",