@epam/ai-dial-ui-kit 0.15.0-dev.10 → 0.15.0-dev.12

package/dist/JsonEditor-qv1Z0dLX.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("./lazy-tfN4sKhq.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-C9-ZMRVi.cjs → MarkdownEditor-DHn2pYOJ.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-DM-7dL0Y.cjs"),k=require("./merge-classes-Dipy1Ih1.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 b=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:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,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(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;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})=>{const I=j.useMemo(()=>M(),[]),x=j.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:g=>i?.(g||""),height:r,preview:u,commands:I,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"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-tfN4sKhq.cjs"),k=require("./merge-classes-Dipy1Ih1.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 b=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:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,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(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;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})=>{const I=j.useMemo(()=>M(),[]),x=j.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:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-BzEbdj7R.cjs → MarkdownEditor-jQ8nDJfx.cjs}

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

package/dist/MarkdownEditorContainer-Bzcnoemw.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-CUKClcEz.cjs"),E=require("./lazy-tfN4sKhq.cjs"),N=require("./MarkdownEditor-jQ8nDJfx.cjs"),b=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-qv1Z0dLX.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=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:w,onChange:s=>C(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:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,28 +1,26 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as g, useState as x, useEffect as J, useCallback as u } from "react";
-import "../../constants/editor.js";
-import { EditorThemes as S } from "../../types/editor.js";
-import "@monaco-editor/react";
-import { DialSwitch as b } from "../Switch/Switch.js";
+import { DialSwitch as S } from "../Switch/Switch.js";
+import { EditorThemes as b } from "../../types/editor.js";
 import { DialMarkdownEditor as v } from "./MarkdownEditor.js";
 import { DialLabel as y } from "../Label/Label.js";
-const $ = ({
+const z = ({
   value: s,
   onChangeValue: l,
-  label: t,
+  label: i,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = S.dark,
+  theme: m = b.dark,
   onValidateJSON: f,
   preview: C = "edit"
 }) => {
-  const N = g(), [i, w] = x(!1), [p, D] = x(null);
+  const N = g(), [n, w] = x(!1), [p, D] = x(null);
   J(() => {
-    i && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       D(() => o.DialJsonEditor);
     });
-  }, [i]);
+  }, [n]);
   const h = u(
     (o) => {
       l?.(o);
@@ -33,16 +31,16 @@ const $ = ({
       f?.(o);
     },
     [f]
-  ), n = !!a;
+  ), t = !!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 || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      t && /* @__PURE__ */ e(y, { label: t }),
+    (i || d || t) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      i && /* @__PURE__ */ e(y, { label: i }),
       /* @__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(
-          b,
+        t && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          S,
           {
-            isOn: i,
+            isOn: n,
             label: a,
             switchId: N,
             onChange: (o) => w(o)
@@ -50,7 +48,7 @@ const $ = ({
         ) })
       ] })
     ] }),
-    n && i ? /* @__PURE__ */ e(
+    t && n ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -78,5 +76,5 @@ const $ = ({
   ] }) }) });
 };
 export {
-  $ as DialMarkdownEditorContainer
+  z as DialMarkdownEditorContainer
 };

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

@@ -1,87 +1,90 @@
-import { jsx as a, jsxs as o, Fragment as T } from "react/jsx-runtime";
-import { IconDots as v } from "@tabler/icons-react";
-import { useMemo as N, useCallback as x } from "react";
-import { Dropdown as A } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as D } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { DIAL_KIT_ICON_STROKE as w } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as B } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as u } from "../../../constants/public-class-names.js";
-import { mergeClasses as c } from "../../../utils/merge-classes.js";
-import { listClassName as F, overflowButtonClassName as y, defaultSeparator as K, separatorClassName as g, itemClassName as b, navClassName as O, DEFAULT_MAX_VISIBLE_ITEMS as j, MIN_VISIBLE_ITEMS as R, linkSegmentClassName as V, currentSegmentClassName as W, staticSegmentClassName as z, segmentClassName as P, segmentWidthClassName as U } from "./constants.js";
-const ae = ({
+import { jsx as a, jsxs as c, Fragment as x } from "react/jsx-runtime";
+import { IconDots as A } from "@tabler/icons-react";
+import { useMemo as u, useCallback as B } from "react";
+import { Dropdown as D } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as w } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DIAL_KIT_ICON_STROKE as F } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { BreadcrumbsSize as K } from "../../../types/breadcrumbs.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+import { listClassName as O, overflowButtonClassName as j, defaultSeparator as z, separatorClassName as g, sizeClassName as I, itemClassName as S, navClassName as R, DEFAULT_MAX_VISIBLE_ITEMS as V, MIN_VISIBLE_ITEMS as W, linkSegmentClassName as P, staticSegmentClassName as U, currentSegmentClassName as X, currentSizeClassName as Z, segmentClassName as $, segmentWidthClassName as q } from "./constants.js";
+const te = ({
   items: s,
-  maxVisibleItems: I = j,
-  separator: p = K,
-  ariaLabel: S = "Breadcrumb",
-  overflowAriaLabel: k = "Show hidden path segments",
-  className: _,
-  itemClassName: M
+  maxVisibleItems: k = V,
+  size: i = K.Small,
+  separator: f = z,
+  ariaLabel: _ = "Breadcrumb",
+  overflowAriaLabel: M = "Show hidden path segments",
+  className: E,
+  itemClassName: L
 }) => {
-  const i = Math.max(I, R), t = N(
-    () => s.length > i ? s.slice(1, -(i - 2)) : [],
-    [s, i]
-  ), E = N(
-    () => t.map((e, l) => ({
+  const m = Math.max(k, W), n = u(
+    () => s.length > m ? s.slice(1, -(m - 2)) : [],
+    [s, m]
+  ), T = u(
+    () => n.map((e, l) => ({
       key: String(l),
       label: e.label,
       icon: e.icon
     })),
-    [t]
-  ), L = x(
+    [n]
+  ), v = B(
     ({ key: e, domEvent: l }) => {
-      const n = t[Number(e)];
-      n && (n.onClick?.(l), !n.onClick && n.href && !l.defaultPrevented && (window.location.href = n.href));
+      const r = n[Number(e)];
+      r && (r.onClick?.(l), !r.onClick && r.href && !l.defaultPrevented && (window.location.href = r.href));
     },
-    [t]
+    [n]
   );
   if (s.length === 0) return null;
-  const m = s.slice(t.length + 1), f = (e, {
+  const d = s.slice(n.length + 1), C = (e, {
     index: l,
-    isFirst: n,
-    isCurrent: r
+    isFirst: r,
+    isCurrent: t
   }) => {
-    const C = !r && (!!e.href || !!e.onClick), d = c(
-      P,
-      C ? V : r ? W : z,
-      M,
-      u.breadcrumbsItem
-    ), h = /* @__PURE__ */ o(T, { children: [
+    const N = !t && (!!e.href || !!e.onClick), h = o(
+      $,
+      N ? P : t ? o(X, Z[i]) : U,
+      L,
+      b.breadcrumbsItem
+    ), p = /* @__PURE__ */ c(x, { children: [
       e.icon,
-      /* @__PURE__ */ a(D, { text: e.label })
+      /* @__PURE__ */ a(w, { text: e.label })
     ] });
-    return /* @__PURE__ */ o(
+    return /* @__PURE__ */ c(
       "li",
       {
-        className: c(
-          b,
-          U[r ? "last" : n ? "first" : "middle"]
+        className: o(
+          S,
+          I[i],
+          q[t ? "last" : r ? "first" : "middle"]
         ),
         children: [
-          C ? e.href ? /* @__PURE__ */ a(
+          N ? e.href ? /* @__PURE__ */ a(
             "a",
             {
               href: e.href,
               onClick: e.onClick,
-              className: d,
-              children: h
+              className: h,
+              children: p
             }
           ) : /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               onClick: e.onClick,
-              className: d,
-              children: h
+              className: h,
+              children: p
             }
           ) : /* @__PURE__ */ a(
             "span",
             {
-              className: d,
-              "aria-current": r ? "page" : void 0,
-              children: h
+              className: h,
+              "aria-current": t ? "page" : void 0,
+              children: p
             }
           ),
-          !r && /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: p })
+          !t && /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
         ]
       },
       `segment-${l}`
@@ -90,51 +93,61 @@ const ae = ({
   return /* @__PURE__ */ a(
     "nav",
     {
-      "aria-label": S,
-      className: c(
-        O,
-        _,
-        u.breadcrumbs
+      "aria-label": _,
+      className: o(
+        R,
+        E,
+        b.breadcrumbs
       ),
-      children: /* @__PURE__ */ o("ol", { className: F, children: [
-        f(s[0], {
+      children: /* @__PURE__ */ c("ol", { className: O, children: [
+        C(s[0], {
           index: 0,
           isFirst: !0,
           isCurrent: s.length === 1
         }),
-        t.length > 0 && /* @__PURE__ */ o("li", { className: c(b, "shrink-0"), children: [
-          /* @__PURE__ */ a(
-            A,
-            {
-              items: E,
-              onItemClick: L,
-              placement: "bottom-start",
-              matchReferenceWidth: !1,
-              children: /* @__PURE__ */ a(
-                "button",
+        n.length > 0 && /* @__PURE__ */ c(
+          "li",
+          {
+            className: o(
+              S,
+              I[i],
+              "shrink-0"
+            ),
+            children: [
+              /* @__PURE__ */ a(
+                D,
                 {
-                  type: "button",
-                  "aria-label": k,
-                  className: y,
+                  items: T,
+                  onItemClick: v,
+                  placement: "bottom-start",
+                  matchReferenceWidth: !1,
                   children: /* @__PURE__ */ a(
-                    v,
+                    "button",
                     {
-                      size: B.SM,
-                      stroke: w,
-                      "aria-hidden": "true"
+                      type: "button",
+                      "aria-label": M,
+                      className: j,
+                      children: /* @__PURE__ */ a(
+                        A,
+                        {
+                          size: y.SM,
+                          stroke: F,
+                          "aria-hidden": "true"
+                        }
+                      )
                     }
                   )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: p })
-        ] }),
-        m.map(
-          (e, l) => f(e, {
-            index: s.length - m.length + l,
+              ),
+              /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
+            ]
+          }
+        ),
+        d.map(
+          (e, l) => C(e, {
+            index: s.length - d.length + l,
             isFirst: !1,
-            isCurrent: l === m.length - 1
+            isCurrent: l === d.length - 1
           })
         )
       ] })
@@ -142,5 +155,5 @@ const ae = ({
   );
 };
 export {
-  ae as Breadcrumbs
+  te as Breadcrumbs
 };

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

@@ -1,32 +1,41 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconChevronRight as t } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as n } from "../../../constants/icon.js";
-const r = "w-full overflow-hidden", m = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap", c = "flex min-w-0 items-center gap-2 dial-small-text", f = {
+import { jsx as t } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as i } from "../../../constants/icon.js";
+import { BreadcrumbsSize as e } from "../../../types/breadcrumbs.js";
+const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap", u = "flex min-w-0 items-center gap-2", d = {
+  [e.Small]: "dial-small-text",
+  [e.Heading]: "dial-h2-text"
+}, x = {
+  [e.Small]: "dial-small-semi-text",
+  [e.Heading]: "dial-h2-text"
+}, N = {
   first: "shrink-0",
   middle: "min-w-0 max-w-[30%] shrink",
   last: "min-w-0 max-w-[51%] shrink"
-}, u = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors", d = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", x = "dial-small-semi-text cursor-default text-primary", p = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", N = "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, C = 4, h = /* @__PURE__ */ e(
-  t,
+}, 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(
+  s,
   {
-    size: n.SM,
-    stroke: s,
+    size: i.SM,
+    stroke: n,
     "aria-hidden": "true",
     className: "rtl:scale-x-[-1]"
   }
 );
 export {
-  C as DEFAULT_MAX_VISIBLE_ITEMS,
+  v as DEFAULT_MAX_VISIBLE_ITEMS,
   w as MIN_VISIBLE_ITEMS,
-  x as currentSegmentClassName,
-  h as defaultSeparator,
-  c as itemClassName,
-  d as linkSegmentClassName,
-  m as listClassName,
-  r as navClassName,
-  N as overflowButtonClassName,
-  u as segmentClassName,
-  f as segmentWidthClassName,
+  S as currentSegmentClassName,
+  x as currentSizeClassName,
+  _ as defaultSeparator,
+  u as itemClassName,
+  C as linkSegmentClassName,
+  f as listClassName,
+  c as navClassName,
+  g as overflowButtonClassName,
+  p as segmentClassName,
+  N as segmentWidthClassName,
   I as separatorClassName,
-  p as staticSegmentClassName
+  d as sizeClassName,
+  h as staticSegmentClassName
 };

package/dist/components/New/Tabs/Tabs.js

@@ -1,57 +1,59 @@
 import { jsx as s, jsxs as I } from "react/jsx-runtime";
-import { useRef as V, useId as j, useCallback as R } from "react";
+import { useRef as j, useId as R, useCallback as _ } from "react";
 import { mergeClasses as l } from "../../../utils/merge-classes.js";
-import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
+import { DIAL_KIT_CLASS as a } from "../../../constants/public-class-names.js";
 import { TabOrientation as u } from "../../../types/tab.js";
-const _ = {
+const z = {
   [u.Horizontal]: { next: "ArrowRight", previous: "ArrowLeft" },
   [u.Vertical]: { next: "ArrowDown", previous: "ArrowUp" }
-}, G = ({
+}, M = ({
   tabs: n,
-  activeTabId: a,
+  activeTabId: c,
   onTabChange: f,
   orientation: m = u.Horizontal,
-  sectionLabel: c,
+  sectionLabel: d,
   ariaLabel: k,
   className: v,
-  tabClassName: D,
-  sectionLabelClassName: S
+  tabListClassName: D,
+  tabClassName: S,
+  sectionLabelClassName: H
 }) => {
-  const w = V({}), A = j(), i = m === u.Vertical, h = n.find((e) => e.id === a), H = h && !h.disabled ? h.id : n.find((e) => !e.disabled)?.id, K = R(
+  const w = j({}), A = R(), i = m === u.Vertical, h = n.find((e) => e.id === c), K = h && !h.disabled ? h.id : n.find((e) => !e.disabled)?.id, V = _(
     (e) => {
-      const { next: t, previous: r } = _[m];
+      const { next: t, previous: r } = z[m];
       if (![t, r, "Home", "End"].includes(e.key) || n.length === 0)
         return;
       const o = n.filter((g) => !g.disabled);
       if (o.length === 0) return;
-      const d = Math.max(
-        o.findIndex((g) => g.id === a),
+      const p = Math.max(
+        o.findIndex((g) => g.id === c),
         0
       ), b = o.length - 1;
-      let p = d;
-      e.key === t ? p = d === b ? 0 : d + 1 : e.key === r ? p = d === 0 ? b : d - 1 : e.key === "Home" ? p = 0 : p = b, e.preventDefault();
-      const y = o[p];
-      w.current[y.id]?.focus(), y.id !== a && f(y.id);
+      let x = p;
+      e.key === t ? x = p === b ? 0 : p + 1 : e.key === r ? x = p === 0 ? b : p - 1 : e.key === "Home" ? x = 0 : x = b, e.preventDefault();
+      const y = o[x];
+      w.current[y.id]?.focus(), y.id !== c && f(y.id);
     },
-    [n, a, f, m]
+    [n, c, f, m]
   ), N = /* @__PURE__ */ s(
     "div",
     {
       role: "tablist",
       "aria-orientation": i ? "vertical" : void 0,
       "aria-label": k,
-      "aria-labelledby": !k && c ? A : void 0,
-      onKeyDown: K,
+      "aria-labelledby": !k && d ? A : void 0,
+      onKeyDown: V,
       className: l(
         i ? "flex flex-col gap-1 px-2" : "flex justify-start gap-1",
         // Without a heading the list is the root, so it takes the caller's
         // classes — and the root kit class below — itself.
-        !c && v,
-        x.tabList,
-        !c && x.tabs
+        !d && v,
+        D,
+        a.tabList,
+        !d && a.tabs
       ),
       children: n.map((e) => {
-        const t = a === e.id, r = !!e.disabled;
+        const t = c === e.id, r = !!e.disabled;
         return /* @__PURE__ */ I(
           "button",
           {
@@ -62,7 +64,7 @@ const _ = {
             role: "tab",
             "aria-selected": t,
             disabled: r,
-            tabIndex: e.id === H ? 0 : -1,
+            tabIndex: e.id === K ? 0 : -1,
             onClick: () => f(e.id),
             className: l(
               "dial-kit-enhanced-target flex items-center gap-2 text-start",
@@ -78,8 +80,9 @@ const _ = {
               ],
               r && (i ? "cursor-not-allowed text-control-disable-primary" : "cursor-not-allowed border-control-disable-primary text-control-disable-primary"),
               !r && (i ? t ? "bg-control-accent-alpha text-accent hover:bg-control-accent-alpha-hover" : "hover:bg-control-accent-alpha-hover" : t ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
-              D,
-              x.tab
+              S,
+              a.tab,
+              t && a.tabSelected
             ),
             children: [
               e.icon && // The label names the tab, so the icon beside it is decorative —
@@ -116,13 +119,13 @@ const _ = {
       })
     }
   );
-  return c ? /* @__PURE__ */ I(
+  return d ? /* @__PURE__ */ I(
     "div",
     {
       className: l(
         "flex flex-col gap-3",
         v,
-        x.tabs
+        a.tabs
       ),
       children: [
         /* @__PURE__ */ s(
@@ -138,10 +141,10 @@ const _ = {
                 id: A,
                 className: l(
                   "dial-h1-text text-primary",
-                  S,
-                  x.tabsSectionLabel
+                  H,
+                  a.tabsSectionLabel
                 ),
-                children: c
+                children: d
               }
             )
           }
@@ -152,5 +155,5 @@ const _ = {
   ) : N;
 };
 export {
-  G as Tabs
+  M as Tabs
 };