@epam/ai-dial-ui-kit 0.15.0-dev.53 → 0.15.0-dev.55

package/dist/JsonEditor-Bxui5wJH.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("./lazy-_W6FYhKg.cjs"),c=require("@monaco-editor/react");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const f=g(c),b={[a.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[a.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},k=({value:e,onChange:o,onValidateJSON:r,options:t,currentTheme:n,themesConfig:s=b})=>{function d(i){i?.editor?.defineTheme(n,s[n]),i.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}=f;return u.jsx(l,{beforeMount:d,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:r,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},...t??{}}})};exports.DialJsonEditor=k;

package/dist/{MarkdownEditor-Cp-KX6-T.cjs → MarkdownEditor-BKtFs714.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-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;
+"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;

package/dist/{MarkdownEditor-Dav_pp0T.cjs → MarkdownEditor-Bapd1ycU.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-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;
+"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;

package/dist/MarkdownEditorContainer-B5aHwoYF.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-DE6MrcqJ.cjs"),N=require("./lazy-_W6FYhKg.cjs"),b=require("./MarkdownEditor-Bapd1ycU.cjs"),g=({value:r,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-Bxui5wJH.cjs")).then(s=>{S(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),E=n.useCallback(s=>{x?.(s)},[x]),o=!!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||o)&&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,o&&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)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:E,currentTheme:u})}):e.jsx(b.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,showDragbar:w,theme:u})]})})})};exports.DialMarkdownEditorContainer=g;

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/Popup/Popup.js

@@ -1,63 +1,64 @@
 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 { 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 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 = ({
+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,
-  titleClassName: _,
-  headerClassName: b,
+  overlayStyle: _,
+  titleClassName: b,
+  headerClassName: y,
   bodyClassName: z,
   children: D,
   footer: p,
-  footerClassName: y,
+  footerClassName: B,
   onClose: m,
   onBack: c,
-  backAriaLabel: B = "Back",
+  backAriaLabel: L = "Back",
   headerActions: d,
-  headerDivider: L = !1,
+  headerDivider: P = !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,
+  footerDivider: A = !1,
+  size: M = ce.Md,
+  hideClose: R = !1,
+  closeAriaLabel: w = "Close dialog",
+  closeOnOutsideClick: E = !0,
   preventKeyboardOnOpen: h = !1
 }) => {
-  const E = de(), N = oe(null), G = re(), { refs: C, context: a } = J({
+  const G = ue(), N = re(null), O = se(), { refs: C, context: a } = Q({
     open: t,
     onOpenChange: (e) => {
       e || m?.(null);
     }
-  }), O = Q(a, { role: "dialog" }), $ = U(a, { outsidePress: w }), { getFloatingProps: j } = W([O, $]);
+  }), $ = U(a, { role: "dialog" }), j = W(a, { outsidePress: E }), { getFloatingProps: k } = X([$, j]);
   if (!t) return null;
-  const i = typeof n == "string" ? `popup-heading-${G}` : void 0, k = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
+  const i = typeof n == "string" ? `popup-heading-${O}` : void 0, H = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
     "h2",
     {
       id: i,
-      className: r(ve, _),
-      children: /* @__PURE__ */ o(le, { tooltip: e, triggerClassName: "truncate", children: e })
+      className: r(Ie, b),
+      children: /* @__PURE__ */ o(te, { 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 = () => {
+  ) : 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);
@@ -65,9 +66,9 @@ const $e = ({
       "div",
       {
         className: r(
-          Fe,
-          P && Ie,
-          y
+          Se,
+          A && Fe,
+          B
         ),
         children: [
           g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
@@ -79,16 +80,17 @@ const $e = ({
       }
     );
   };
-  return /* @__PURE__ */ o(X, { id: S, children: /* @__PURE__ */ o(
-    Y,
+  return /* @__PURE__ */ o(Y, { id: S, children: /* @__PURE__ */ o(
+    ee,
     {
+      style: _,
       className: r(
-        Ce,
-        E,
+        ve,
+        G,
         T
       ),
       children: /* @__PURE__ */ o(
-        ee,
+        oe,
         {
           context: a,
           initialFocus: h ? N : C.floating,
@@ -96,16 +98,16 @@ const $e = ({
             "div",
             {
               ref: C.setFloating,
-              ...j(),
+              ...k(),
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": i,
               "aria-label": i ? void 0 : F,
               className: r(
-                Ne,
-                he[A],
+                Ce,
+                Ne[M],
                 x,
-                Se.popup
+                xe.popup
               ),
               children: [
                 h && /* @__PURE__ */ o(
@@ -121,29 +123,29 @@ const $e = ({
                   "div",
                   {
                     className: r(
-                      ge,
-                      L && fe,
-                      b
+                      he,
+                      P && ge,
+                      y
                     ),
                     children: [
                       c && /* @__PURE__ */ o(
-                        ie,
+                        le,
                         {
-                          "aria-label": B,
-                          size: ce.Small,
+                          "aria-label": L,
+                          size: de.Small,
                           className: "mr-2",
                           onClick: c,
                           icon: /* @__PURE__ */ o(
-                            ue,
+                            fe,
                             {
-                              size: ne.SM,
-                              stroke: te,
+                              size: pe.SM,
+                              stroke: ne,
                               "aria-hidden": "true"
                             }
                           )
                         }
                       ),
-                      k(n),
+                      H(n),
                       d ? /* @__PURE__ */ s("div", { className: l, children: [
                         d,
                         v
@@ -152,7 +154,7 @@ const $e = ({
                   }
                 ),
                 /* @__PURE__ */ o("div", { className: r("grow overflow-auto", z), children: D }),
-                H()
+                K()
               ]
             }
           )
@@ -162,5 +164,5 @@ const $e = ({
   ) });
 };
 export {
-  $e as Popup
+  je as Popup
 };

package/dist/components/New/Slider/Slider.js

@@ -1,56 +1,56 @@
 import { jsxs as n, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { useId as Y, useState as P, useCallback as b } from "react";
+import { useId as Y, useState as P, useCallback as y } from "react";
 import { ElementSize as ee } from "../../../types/size.js";
 import { mergeClasses as s } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as D } from "../../../utils/accessible-name.js";
 import { ErrorText as te, CaptionText as ne } from "../CaptionText/CaptionText.js";
 import { Label as re } from "../Label/Label.js";
-import { NumberInput as le } from "../NumberInput/NumberInput.js";
-import { getTickPercents as ae, getStepPrecision as ie, snapToStep as se } from "./utils.js";
-const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t) => r && t ? "grid-cols-[auto_minmax(0,1fr)_auto]" : r ? "grid-cols-[auto_minmax(0,1fr)]" : t ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", Ne = ({
+import { NumberInput as ae } from "../NumberInput/NumberInput.js";
+import { getTickPercents as le, getStepPrecision as ie, snapToStep as se } from "./utils.js";
+const ce = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * ce}px)`, oe = (r, t) => r && t ? "grid-cols-[auto_minmax(0,1fr)_auto]" : r ? "grid-cols-[auto_minmax(0,1fr)]" : t ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", Ne = ({
   id: r,
   value: t,
-  min: o = 0,
+  min: c = 0,
   max: m = 1,
-  step: c = 0.1,
-  disabled: l,
+  step: o = 0.1,
+  disabled: a,
   labelProps: d,
-  labels: a,
-  formatValue: p,
-  showValue: y = !1,
+  labels: l,
+  formatValue: x,
+  showValue: S = !1,
   showTooltip: A = !1,
   showTicks: G = !1,
   leftContent: I,
-  rightContent: S,
-  showValueInput: w = !1,
+  rightContent: C,
+  showValueInput: h = !1,
   valueInputAriaLabel: H,
-  caption: C,
+  caption: T,
   error: u,
   onChange: f,
   containerClassName: U,
-  trackClassName: V,
-  fillClassName: Z,
-  className: q,
-  ...T
+  trackClassName: Z,
+  fillClassName: q,
+  className: J,
+  ...w
 }) => {
-  const J = Y(), h = r ?? J, F = C && !u ? `${h}-caption` : void 0, _ = u ? `${h}-error` : void 0, x = m - o, K = x > 0 ? Math.min(100, Math.max(0, (t - o) / x * 100)) : 0, z = L(K), O = G && !l ? ae(x, c) : [], B = A && !l, g = I != null, M = w || S != null, $ = ie(c), [Q, k] = P(null), v = p ? p(t) : t.toFixed($), R = b(
+  const K = Y(), p = r ?? K, F = T && !u ? `${p}-caption` : void 0, _ = u ? `${p}-error` : void 0, g = m - c, O = g > 0 ? Math.min(100, Math.max(0, (t - c) / g * 100)) : 0, z = L(O), Q = G && !a ? le(g, o) : [], B = A && !a, v = I != null, M = h || C != null, $ = ie(o), [R, k] = P(null), N = x ? x(t) : t.toFixed($), V = y(
     (i) => {
       f?.(Number(i.target.value));
     },
     [f]
-  ), W = b(
+  ), W = y(
     (i) => {
-      const N = i == null ? "" : String(i);
-      k(N);
-      const E = Number(N);
-      N !== "" && Number.isFinite(E) && f?.(se(E, o, m, c));
+      const b = i == null ? "" : String(i);
+      k(b);
+      const E = Number(b);
+      b !== "" && Number.isFinite(E) && f?.(se(E, c, m, o));
     },
-    [m, o, f, c]
-  ), X = b(() => k(null), []);
+    [m, c, f, o]
+  ), X = y(() => k(null), []);
   return /* @__PURE__ */ n("div", { className: s("flex flex-col gap-2", U), children: [
-    (d || y) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-      d && /* @__PURE__ */ e(re, { ...d, htmlFor: h }),
-      y && // The input already reports its value to assistive tech, so this is
+    (d || S) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      d && /* @__PURE__ */ e(re, { ...d, htmlFor: p }),
+      S && // The input already reports its value to assistive tech, so this is
       // a visual echo rather than a second announcement.
       /* @__PURE__ */ e(
         "span",
@@ -58,9 +58,9 @@ const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t)
           "aria-hidden": "true",
           className: s(
             "dial-small-text ml-auto",
-            l ? "text-control-disable-primary" : "text-primary"
+            a ? "text-control-disable-primary" : "text-primary"
           ),
-          children: v
+          children: N
         }
       )
     ] }),
@@ -69,25 +69,28 @@ const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t)
         "div",
         {
           className: s(
-            "grid items-center gap-x-3 gap-y-1",
-            ce(g, M),
+            "grid items-center gap-y-1",
+            // The value field reads as part of the control, so it sits closer
+            // to the track than free-form side content does.
+            h ? "gap-x-2" : "gap-x-3",
+            oe(v, M),
             // Room for the value bubble, which hangs above the track row.
-            B && "mt-7"
+            B && "mt-2"
           ),
           children: [
-            g && /* @__PURE__ */ e("div", { className: "flex items-center", children: I }),
+            v && /* @__PURE__ */ e("div", { className: "flex items-center", children: I }),
             /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
               /* @__PURE__ */ e(
                 "div",
                 {
                   className: s(
                     "pointer-events-none absolute inset-x-0 h-1 rounded-full",
-                    l ? "bg-control-disable-primary" : "bg-control-accent-muted",
-                    V
+                    a ? "bg-control-disable-primary" : "bg-control-accent-muted",
+                    Z
                   )
                 }
               ),
-              O.map((i) => /* @__PURE__ */ e(
+              Q.map((i) => /* @__PURE__ */ e(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -101,8 +104,8 @@ const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t)
                 {
                   className: s(
                     "pointer-events-none absolute left-0 h-1 rounded-full",
-                    l ? "bg-control-disable-secondary" : "bg-control-accent",
-                    Z
+                    a ? "bg-control-disable-secondary" : "bg-control-accent",
+                    q
                   ),
                   style: { width: z }
                 }
@@ -116,7 +119,7 @@ const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t)
                   className: "pointer-events-none absolute bottom-full mb-0.5 flex -translate-x-1/2 flex-col items-center",
                   style: { left: z },
                   children: [
-                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: v }),
+                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: N }),
                     /* @__PURE__ */ e(
                       "svg",
                       {
@@ -133,59 +136,59 @@ const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t)
               /* @__PURE__ */ e(
                 "input",
                 {
-                  ...T,
+                  ...w,
                   type: "range",
-                  id: h,
+                  id: p,
                   value: t,
-                  min: o,
+                  min: c,
                   max: m,
-                  step: c,
-                  disabled: l,
-                  onChange: R,
+                  step: o,
+                  disabled: a,
+                  onChange: V,
                   "aria-label": D(
-                    typeof d?.label != "string" ? T["aria-label"] : void 0
+                    typeof d?.label != "string" ? w["aria-label"] : void 0
                   ),
-                  "aria-valuetext": p ? v : void 0,
+                  "aria-valuetext": x ? N : void 0,
                   "aria-describedby": _ ?? F,
                   className: s(
                     "dial-kit-slider absolute inset-0 h-full w-full",
-                    q
+                    J
                   )
                 }
               )
             ] }),
-            M && /* @__PURE__ */ e("div", { className: "flex items-center", children: w ? /* @__PURE__ */ e(
-              le,
+            M && /* @__PURE__ */ e("div", { className: "flex items-center", children: h ? /* @__PURE__ */ e(
+              ae,
               {
                 "aria-label": D(
                   H ?? (typeof d?.label == "string" ? d.label : void 0)
                 ),
-                value: Q ?? t.toFixed($),
-                min: o,
+                value: R ?? t.toFixed($),
+                min: c,
                 max: m,
-                step: c,
-                disabled: l,
+                step: o,
+                disabled: a,
                 size: ee.Small,
                 containerClassName: "w-12",
                 className: "text-center",
                 onChange: W,
                 onBlur: X
               }
-            ) : S }),
-            a && /* @__PURE__ */ e(
+            ) : C }),
+            l && /* @__PURE__ */ e(
               "div",
               {
                 className: s(
                   "dial-tiny-text flex text-secondary",
-                  g && "col-start-2"
+                  v && "col-start-2"
                 ),
-                children: a.length === 3 ? /* @__PURE__ */ n(j, { children: [
-                  /* @__PURE__ */ e("span", { children: a[0] }),
-                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: a[1] }),
-                  /* @__PURE__ */ e("span", { children: a[2] })
+                children: l.length === 3 ? /* @__PURE__ */ n(j, { children: [
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: l[1] }),
+                  /* @__PURE__ */ e("span", { children: l[2] })
                 ] }) : /* @__PURE__ */ n(j, { children: [
-                  /* @__PURE__ */ e("span", { children: a[0] }),
-                  /* @__PURE__ */ e("span", { className: "ml-auto", children: a[1] })
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "ml-auto", children: l[1] })
                 ] })
               }
             )
@@ -193,7 +196,7 @@ const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t)
         }
       ),
       /* @__PURE__ */ e(te, { id: _, text: u }),
-      !u && /* @__PURE__ */ e(ne, { id: F, text: C })
+      !u && /* @__PURE__ */ e(ne, { id: F, text: T })
     ] })
   ] });
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.53",
-  "generatedAt": "2026-10-08T11:41:20.370Z",
+  "version": "0.15.0-dev.55",
+  "generatedAt": "2026-10-08T12:08:27.140Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1768,6 +1768,12 @@
           "required": false,
           "description": "Additional CSS classes applied to the overlay"
         },
+        {
+          "name": "overlayStyle",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles merged over Floating UI's own overlay styles (`position`, `inset`, `overflow: auto`)"
+        },
         {
           "name": "titleClassName",
           "type": "string",