@epam/ai-dial-ui-kit 0.13.0-dev.57 → 0.13.0-dev.60

package/README.md

@@ -194,6 +194,10 @@ pseudo-element. The visible control is unchanged, so layouts keep their existing
 metrics. WCAG 2.5.5 measures the region that accepts a pointer action, not the
 visible decoration.
 
+A control too small for a 44px target to clear its neighbours uses
+`dial-kit-minimum-target` instead, which applies the same pseudo-element at the
+Level AA minimum of 24×24 (WCAG 2.5.8).
+
 These controls are **documented exceptions** and meet Level AA (2.5.8, 24×24) but
 not AAA:
 
@@ -204,6 +208,7 @@ not AAA:
 | `DialCloseButton` | icon-sized | Renders `h-auto w-auto`, so its target follows the caller's icon size |
 | `DialInfoButton`, `InfoButton` | 24×24 | Fixed small affordance, same overlap constraint as small variants |
 | Standard 2.0 fields (`Input`, `Select`) | 40px tall | The pointer target spans the full field width but stays 4px short of 44 vertically; the height is a shared form design token, not a per-control choice |
+| `Tag` remove button | 16×16 rendered | Reaches 24×24 through `dial-kit-minimum-target`; a 44px target would overhang 14px per side and swallow the neighbouring tags of a `TagInput` row |
 
 Give small-variant controls at least 20px of surrounding space if you need to reach
 AAA in a specific layout, or use the standard size instead.

package/dist/CHANGELOG.md

@@ -21,9 +21,14 @@ Versions match the git tags on the `development` branch.
   See [migration guide](migration-guides/0.13.0/caption-semi-text-lead-rename.md).
 - **`Notification` (2.0) — live-region role now follows the variant** — the container was hardcoded to `role="alert"` for every variant. `role="alert"` is implicitly `aria-live="assertive"` and interrupts the screen reader, which is wrong for routine feedback and for section messages that are static page content. `error` and `warning` keep `role="alert"`; `info`, `success`, and `loading` now use the polite `role="status"`. Pass an explicit `role` to override.
   Consumers asserting `getByRole('alert')` on a non-error notification must query `status` instead.
+- **`Calendar`, `Switch`, `ProgressBar` — `label` → `labelProps`** — the three components rendered their own label from a bare `label` prop, so `required`, `caption` and `size` were unreachable while every other 2.0 field (`Input`, `Textarea`, `Select`, `TagInput`, …) took them through a `labelProps` object. All three now take `labelProps: LabelProps` and render the shared `Label`. In `Switch` the track and the label text become two sibling `<label for>` elements rather than one wrapper — a `caption` info button nested in a label forwards its clicks to the labelled control — which moves `className` onto the row and the focus ring onto the track.
+  See [migration guide](migration-guides/0.13.0/field-label-props-unification.md).
+- **`DialProgressBar` → `ProgressBar`** — the progress bar was built on 1.0 tokens slated for removal (`bg-layer-4`, `bg-controls-accent-primary`), so it could not appear in a 2.0 screen without pulling the legacy palette along. It is rebuilt on the 2.0 set and adopts the 2.0 conventions: the `Dial*` prefix is dropped, the bespoke `DialProgressBarSize` gives way to the shared `ElementSize` (`Medium` → `Standard`), and `ariaLabel` becomes the native `aria-label`. A new optional `labelProps` renders a `Label` above the bar and names it, replacing the generic `"Progress"` default that every bar shared, and `valueLabel` puts a readout (`"3.31 / 500"`) at the end of that row.
+  See [migration guide](migration-guides/0.13.0/progress-bar-2-0-rewrite.md).
 
 ### Fixed
 
+- **`DialPopup` and `Popup` (2.0) — Enter closed the dialog the moment it opened** — the focus manager's default focuses the first tabbable descendant, and in a dialog whose header is a heading plus a close button, that is the close button. Every modal form therefore opened with the × focused, so the first Enter dismissed it instead of submitting ([ai-dial-chat#2579](https://github.com/epam/ai-dial-chat/issues/2579)). Initial focus now goes to the dialog container, which the focus manager marks `tabindex="-1"`: it is not a tab stop, screen readers announce the dialog on open, and Tab still moves to the first real control. `preventKeyboardOnOpen` is unchanged but no longer needed for this — the new default cannot raise the virtual keyboard either.
 - **Focus rings were invisible on hosts still themed with the pre-0.13 token names** — the `focus-black` border token dropped straight to its light default (`#161B2D`) when `--stroke-focus-black` was undefined. Hosts themed by the DIAL themes service still ship the old `--stroke-focus`, so every focus ring built on the token — inputs, buttons, icon buttons, dropdowns, accordion, calendar, slider — was painted `#161B2D`, which is the dark theme's own `--bg-layer-2`: a border drawn in the background colour. The token now falls back through `--stroke-focus` before reaching the light default, so those hosts get their real focus colour again. Light themes and hosts with no theme at all are unchanged.
 - **`DialGrid` — the legacy-token fallback inverted the raised/sunken relationship** — when a host defines the legacy DIAL layers but not `--bg-layer-raised`, the row surface fell back to `--bg-layer-0`, the _deepest_ layer in that palette (`#000000` in the DIAL dark theme), while odd rows fell back to the lighter `--bg-layer-2`. A grid whose base surface sits below its own sunken rows reads as inside-out, and pure black matches no other surface in the theme. The fallback is now `--bg-layer-3`, the elevated layer, which is what consumers already use for their own grid surfaces. The light default when no theme is present is unchanged (`#FCFCFC`).
 - **`Notification` (2.0)** — the variant icon is hidden from assistive tech. The `loading` spinner carries its own `role="status"`, so it previously formed a live region nested inside the notification's, announcing the content twice.
@@ -38,6 +43,11 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`Tag` (2.0)** — the generation 2.0 counterpart of `DialTag`: a compact label for selections, filters, and categories, with `standard` (24px) and `small` (20px) sizes, an optional icon, a `selected` state, and a removable variant. A tag given `onClick` is a keyboard-operable `role="button"`; its remove control is named `Remove <label>` and stops the click from also activating the tag. Built on 2.0 tokens and `IconButton`, so it pulls none of the 1.0 styling `DialTag` still carries.
+- **`TagInput` (2.0)** — the generation 2.0 counterpart of `DialTagInput`, built on the 2.0 `Input`, so it shares its sizes, label, caption, error and disabled states. Works controlled (`value`) or uncontrolled (`defaultValue`), commits on Enter or comma, removes the last tag on Backspace in an empty input, and renders the tags as a named list of `Tag`s rather than as unlabelled markup. `collapseTagOverflow` keeps the row on one line behind a `+N` chip that names the tags it hides.
+- **`FileDropzone` (2.0) — `labelProps`** — a `Label` above the drop area naming the field it fills, with the `required` marker and `caption` info button the other 2.0 fields already had. The existing `label` stays the copy inside the area: it says how to use the control, not what it is for. Both point at the same input, so its accessible name reads as the field name followed by that copy.
+- **`Input` (2.0) — `wrapperRef`** — exposes the bordered field wrapper, so a caller rendering into the `children` slot can measure the space its content has to fit into. The input itself only ever reports its own share of the row.
+- **`dial-kit-minimum-target`** — the `dial-kit-enhanced-target` mechanism at WCAG 2.5.8's Level AA minimum of 24×24, for controls where the 44px AAA target would overhang far enough to swallow their neighbours. Used by the `Tag` remove button; the rendered size is untouched.
 - **Typography — `dial-display3-text` and `dial-tiny-lead-semi-text`** — the two steps the design scale defined but the kit never shipped: Display 3 (22px/32px semibold) and Tiny Text Lead (Semi Bold) (12px/16px semibold, `+0.03em`, uppercase). The `dial-*-text` scale now covers every row of the design table.
 - **Typography — `dial-code-text` names a monospace face** — it previously inherited the body font despite being the Code style. It resolves through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before the system monospace stack, mirroring the existing `--theme-font` / `--font-inter` hook. The kit ships no font file; hosts that want Fira Code load it themselves.
 - **Enhanced pointer targets** — standard-size buttons expose a 44×44 pointer target (WCAG 2.5.5, Level AAA) via the `dial-kit-enhanced-target` utility, with no change to their rendered size. See the [Accessibility section of the README](README.md#-accessibility) for the documented exceptions.

package/dist/{JsonEditor-BCvdqbcv.js → JsonEditor-B5vfpxzh.js}

@@ -1,4 +1,4 @@
-import { E as o, j as l } from "./index-DcwG5QhT.js";
+import { E as o, j as l } from "./index-B4fgly61.js";
 import { Editor as u } from "@monaco-editor/react";
 const c = {
   [o.dark]: {

package/dist/{JsonEditor-Yy3JFyR4.cjs → JsonEditor-CjemqUZ2.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-ARMvZo4h.cjs"),l=require("@monaco-editor/react"),u={[r.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"}},[r.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"}}},c=({value:n,onChange:t,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=u})=>{function a(o){o?.editor?.defineTheme(e,d[e]),o.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}}]})}return r.jsxRuntimeExports.jsx(l.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:n,onChange:t,theme:e,onValidate:i,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},...s??{}}})};exports.DialJsonEditor=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CY5qji3j.cjs"),l=require("@monaco-editor/react"),u={[r.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"}},[r.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"}}},c=({value:n,onChange:t,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=u})=>{function a(o){o?.editor?.defineTheme(e,d[e]),o.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}}]})}return r.jsxRuntimeExports.jsx(l.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:n,onChange:t,theme:e,onValidate:i,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},...s??{}}})};exports.DialJsonEditor=c;

package/dist/{MarkdownEditor-BUC6u9en.cjs → MarkdownEditor-BrUvRwsB.cjs}

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

package/dist/{MarkdownEditor-_RQIObYV.js → MarkdownEditor-DKG9YlGS.js}

@@ -1,4 +1,4 @@
-import { j as e, E as m, m as c } from "./index-DcwG5QhT.js";
+import { j as e, E as m, m as c } from "./index-B4fgly61.js";
 import x from "@uiw/react-md-editor";
 const j = ({
   value: o,

package/dist/{MarkdownEditor-L5wQ88mr.js → MarkdownEditor-DWcVxbdX.js}

@@ -1,8 +1,8 @@
-import { j as e, D as u, E as z, m as g } from "./index-DcwG5QhT.js";
+import { j as e, D as z, E as g, m as u } from "./index-B4fgly61.js";
 import { useMemo as r } from "react";
-import h, { divider as i, group as C, heading1 as p, heading2 as E, heading3 as k, bold as L, italic as M, strikethrough as w, unorderedListCommand as N, orderedListCommand as b, quote as f, link as v, code as D, table as O, codeEdit as T, codeLive as _, codePreview as y, fullscreen as P } from "@uiw/react-md-editor";
-import { IconTextSize as S, IconBold as A, IconItalic as R, IconStrikethrough as B, IconList as Z, IconListNumbers as q, IconQuote as F, IconLink as K, IconCode as Q, IconColumns2 as W, IconPencil as G, IconLayoutColumns as H, IconEye as J, IconMaximize as U } from "@tabler/icons-react";
-const o = u.MD, s = (t, n) => ({
+import h, { divider as i, group as p, heading1 as C, heading2 as E, heading3 as k, bold as L, italic as M, strikethrough as w, unorderedListCommand as b, orderedListCommand as N, quote as T, link as f, code as v, table as O, codeEdit as S, codeLive as _, codePreview as y, fullscreen as D } from "@uiw/react-md-editor";
+import { IconTextSize as P, IconBold as A, IconItalic as R, IconStrikethrough as B, IconList as Z, IconListNumbers as q, IconQuote as F, IconLink as K, IconCode as Q, IconTable as W, IconPencil as G, IconLayoutColumns as H, IconEye as J, IconMaximize as U } from "@tabler/icons-react";
+const o = z.SM, s = (t, n) => ({
   ...t,
   icon: n
 }), V = () => [
@@ -13,38 +13,38 @@ const o = u.MD, s = (t, n) => ({
     /* @__PURE__ */ e.jsx(B, { size: o })
   ),
   i,
-  C([p, E, k], {
+  p([C, E, k], {
     name: "heading",
     groupName: "heading",
-    icon: /* @__PURE__ */ e.jsx(S, { size: o }),
+    icon: /* @__PURE__ */ e.jsx(P, { size: o }),
     buttonProps: { "aria-label": "Text style", title: "Text style" }
   }),
   i,
   s(
-    N,
+    b,
     /* @__PURE__ */ e.jsx(Z, { size: o })
   ),
   s(
-    b,
+    N,
     /* @__PURE__ */ e.jsx(q, { size: o })
   ),
   i,
-  s(f, /* @__PURE__ */ e.jsx(F, { size: o })),
-  s(v, /* @__PURE__ */ e.jsx(K, { size: o })),
-  s(D, /* @__PURE__ */ e.jsx(Q, { size: o })),
+  s(T, /* @__PURE__ */ e.jsx(F, { size: o })),
+  s(f, /* @__PURE__ */ e.jsx(K, { size: o })),
+  s(v, /* @__PURE__ */ e.jsx(Q, { size: o })),
   i,
   s(O, /* @__PURE__ */ e.jsx(W, { size: o }))
 ], X = () => [
-  s(T, /* @__PURE__ */ e.jsx(G, { size: o })),
+  s(S, /* @__PURE__ */ e.jsx(G, { size: o })),
   s(_, /* @__PURE__ */ e.jsx(H, { size: o })),
   s(y, /* @__PURE__ */ e.jsx(J, { size: o })),
   i,
-  s(P, /* @__PURE__ */ e.jsx(U, { size: o }))
+  s(D, /* @__PURE__ */ e.jsx(U, { size: o }))
 ], se = ({
   value: t,
   onChange: n,
   height: a = 300,
-  theme: d = z.light,
+  theme: d = g.light,
   className: c,
   placeholder: m,
   defaultPreview: x = "edit"
@@ -54,7 +54,7 @@ const o = u.MD, s = (t, n) => ({
     "div",
     {
       "data-color-mode": d,
-      className: g("dial-kit-markdown-editor", c),
+      className: u("dial-kit-markdown-editor", c),
       children: /* @__PURE__ */ e.jsx(
         h,
         {

package/dist/{MarkdownEditor-DdvzJy9k.cjs → MarkdownEditor-xg-rmepY.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-ARMvZo4h.cjs"),x=require("react"),e=require("@uiw/react-md-editor"),t=require("@tabler/icons-react"),o=s.DIAL_ICON_SIZE.MD,i=(n,r)=>({...n,icon:r}),p=()=>[i(e.bold,s.jsxRuntimeExports.jsx(t.IconBold,{size:o})),i(e.italic,s.jsxRuntimeExports.jsx(t.IconItalic,{size:o})),i(e.strikethrough,s.jsxRuntimeExports.jsx(t.IconStrikethrough,{size:o})),e.divider,e.group([e.heading1,e.heading2,e.heading3],{name:"heading",groupName:"heading",icon:s.jsxRuntimeExports.jsx(t.IconTextSize,{size:o}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),e.divider,i(e.unorderedListCommand,s.jsxRuntimeExports.jsx(t.IconList,{size:o})),i(e.orderedListCommand,s.jsxRuntimeExports.jsx(t.IconListNumbers,{size:o})),e.divider,i(e.quote,s.jsxRuntimeExports.jsx(t.IconQuote,{size:o})),i(e.link,s.jsxRuntimeExports.jsx(t.IconLink,{size:o})),i(e.code,s.jsxRuntimeExports.jsx(t.IconCode,{size:o})),e.divider,i(e.table,s.jsxRuntimeExports.jsx(t.IconColumns2,{size:o}))],I=()=>[i(e.codeEdit,s.jsxRuntimeExports.jsx(t.IconPencil,{size:o})),i(e.codeLive,s.jsxRuntimeExports.jsx(t.IconLayoutColumns,{size:o})),i(e.codePreview,s.jsxRuntimeExports.jsx(t.IconEye,{size:o})),e.divider,i(e.fullscreen,s.jsxRuntimeExports.jsx(t.IconMaximize,{size:o}))],R=({value:n,onChange:r,height:d=300,theme:c=s.EditorThemes.light,className:m,placeholder:a,defaultPreview:u="edit"})=>{const j=x.useMemo(()=>p(),[]),l=x.useMemo(()=>I(),[]);return s.jsxRuntimeExports.jsx("div",{"data-color-mode":c,className:s.mergeClasses("dial-kit-markdown-editor",m),children:s.jsxRuntimeExports.jsx(e,{value:n,onChange:E=>r?.(E||""),height:d,preview:u,commands:j,extraCommands:l,textareaProps:{placeholder:a}})})};exports.MarkdownEditor=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-CY5qji3j.cjs"),x=require("react"),e=require("@uiw/react-md-editor"),t=require("@tabler/icons-react"),o=s.DIAL_ICON_SIZE.SM,i=(n,r)=>({...n,icon:r}),p=()=>[i(e.bold,s.jsxRuntimeExports.jsx(t.IconBold,{size:o})),i(e.italic,s.jsxRuntimeExports.jsx(t.IconItalic,{size:o})),i(e.strikethrough,s.jsxRuntimeExports.jsx(t.IconStrikethrough,{size:o})),e.divider,e.group([e.heading1,e.heading2,e.heading3],{name:"heading",groupName:"heading",icon:s.jsxRuntimeExports.jsx(t.IconTextSize,{size:o}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),e.divider,i(e.unorderedListCommand,s.jsxRuntimeExports.jsx(t.IconList,{size:o})),i(e.orderedListCommand,s.jsxRuntimeExports.jsx(t.IconListNumbers,{size:o})),e.divider,i(e.quote,s.jsxRuntimeExports.jsx(t.IconQuote,{size:o})),i(e.link,s.jsxRuntimeExports.jsx(t.IconLink,{size:o})),i(e.code,s.jsxRuntimeExports.jsx(t.IconCode,{size:o})),e.divider,i(e.table,s.jsxRuntimeExports.jsx(t.IconTable,{size:o}))],I=()=>[i(e.codeEdit,s.jsxRuntimeExports.jsx(t.IconPencil,{size:o})),i(e.codeLive,s.jsxRuntimeExports.jsx(t.IconLayoutColumns,{size:o})),i(e.codePreview,s.jsxRuntimeExports.jsx(t.IconEye,{size:o})),e.divider,i(e.fullscreen,s.jsxRuntimeExports.jsx(t.IconMaximize,{size:o}))],R=({value:n,onChange:r,height:d=300,theme:c=s.EditorThemes.light,className:a,placeholder:m,defaultPreview:u="edit"})=>{const j=x.useMemo(()=>p(),[]),l=x.useMemo(()=>I(),[]);return s.jsxRuntimeExports.jsx("div",{"data-color-mode":c,className:s.mergeClasses("dial-kit-markdown-editor",a),children:s.jsxRuntimeExports.jsx(e,{value:n,onChange:E=>r?.(E||""),height:d,preview:u,commands:j,extraCommands:l,textareaProps:{placeholder:m}})})};exports.MarkdownEditor=R;