@alixpartners/ui-components 2.5.2 → 2.5.3

package/dist/RichTextEditor-CfINW9Xs.js

@@ -0,0 +1,412 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { c as f } from "./clsx-OuTLNxxd.js";
+import { useMemo as be, useId as De, useRef as F, useState as d, useEffect as D } from "react";
+import Ae from "./components/Dialog/Dialog.js";
+import A from "./components/Icon/Icon.js";
+import Te from "./components/Input/Input.js";
+import J from "./components/Tooltip/Tooltip.js";
+import { R as Be, T as Ie, P as Pe, C as je } from "./index-DZ4Gof57.js";
+import './assets/RichTextEditor.css';const Ue = "RichTextEditor-module__container___AplP0", ze = "RichTextEditor-module__label___vjzs-", qe = "RichTextEditor-module__required___7duke", $e = "RichTextEditor-module__frame___7OSyf", We = "RichTextEditor-module__frameFocused___GtJ2x", Ke = "RichTextEditor-module__frameDisabled___LubtU", Ve = "RichTextEditor-module__frameError___sPTiY", Je = "RichTextEditor-module__errorMessage___4VdKj", Ge = "RichTextEditor-module__helpers___cpuz6", Ye = "RichTextEditor-module__helperText___rFoU0", Xe = "RichTextEditor-module__helpLink___7gYcv", Ze = "RichTextEditor-module__containerDisabled___6h9dd", Qe = "RichTextEditor-module__containerFullWidth___pOoeL", et = "RichTextEditor-module__toolbarContent___YXKHD", tt = "RichTextEditor-module__toolbarPanel___OVGHO", nt = "RichTextEditor-module__toolbarRow___f0xJR", ot = "RichTextEditor-module__toolbar___m9-M-", rt = "RichTextEditor-module__toolbarStacked___6rB10", it = "RichTextEditor-module__actions___ZAK9J", at = "RichTextEditor-module__toolButton___IT2Kg", lt = "RichTextEditor-module__toolButtonActive___-HvZQ", ct = "RichTextEditor-module__toolIcon___Wndhd", st = "RichTextEditor-module__formatControl___w4WcA", dt = "RichTextEditor-module__toolbarLinkSlot___Gu-9l", ut = "RichTextEditor-module__selectTrigger___frv3x", mt = "RichTextEditor-module__selectTriggerOpen___tk2Pb", _t = "RichTextEditor-module__selectTriggerLabel___FkEv0", pt = "RichTextEditor-module__selectIcon___aJWUk", ht = "RichTextEditor-module__formatMenu___y-uBL", ft = "RichTextEditor-module__formatMenuOptions___zcdlo", gt = "RichTextEditor-module__formatMenuOption___3ppTs", bt = "RichTextEditor-module__formatMenuOptionSelected___bq9J9", Tt = "RichTextEditor-module__formatMenuOptionParagraph___4BLds", xt = "RichTextEditor-module__formatMenuOptionHeading1___H1cKX", Rt = "RichTextEditor-module__formatMenuOptionHeading2___JdixR", Et = "RichTextEditor-module__formatMenuOptionHeading3___NcwLr", Mt = "RichTextEditor-module__formatMenuOptionHeading4___4mLbG", vt = "RichTextEditor-module__formatMenuOptionPreformatted___cB0Ix", Ct = "RichTextEditor-module__editor___M32R7", kt = "RichTextEditor-module__wordCount___5SSVY", Ot = "RichTextEditor-module__wordCountExceeded___NhqBc", yt = "RichTextEditor-module__linkDialogForm___vOLO1", t = {
+  container: Ue,
+  label: ze,
+  required: qe,
+  frame: $e,
+  frameFocused: We,
+  frameDisabled: Ke,
+  frameError: Ve,
+  errorMessage: Je,
+  helpers: Ge,
+  helperText: Ye,
+  helpLink: Xe,
+  containerDisabled: Ze,
+  containerFullWidth: Qe,
+  toolbarContent: et,
+  toolbarPanel: tt,
+  toolbarRow: nt,
+  toolbar: ot,
+  toolbarStacked: rt,
+  actions: it,
+  toolButton: at,
+  toolButtonActive: lt,
+  toolIcon: ct,
+  formatControl: st,
+  toolbarLinkSlot: dt,
+  selectTrigger: ut,
+  selectTriggerOpen: mt,
+  selectTriggerLabel: _t,
+  selectIcon: pt,
+  formatMenu: ht,
+  formatMenuOptions: ft,
+  formatMenuOption: gt,
+  formatMenuOptionSelected: bt,
+  formatMenuOptionParagraph: Tt,
+  formatMenuOptionHeading1: xt,
+  formatMenuOptionHeading2: Rt,
+  formatMenuOptionHeading3: Et,
+  formatMenuOptionHeading4: Mt,
+  formatMenuOptionPreformatted: vt,
+  editor: Ct,
+  wordCount: kt,
+  wordCountExceeded: Ot,
+  linkDialogForm: yt
+}, Lt = {
+  paragraph: "p",
+  heading1: "h1",
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  preformatted: "pre",
+  "unordered-list": "ul",
+  "ordered-list": "ol"
+};
+function Re(r) {
+  return r.trim().length > 0 ? r : "<br>";
+}
+function Ht(r) {
+  switch (r.toLowerCase()) {
+    case "h1":
+      return "heading1";
+    case "h2":
+      return "heading2";
+    case "h3":
+      return "heading3";
+    case "h4":
+      return "heading4";
+    case "pre":
+      return "preformatted";
+    case "ul":
+      return "unordered-list";
+    case "ol":
+      return "ordered-list";
+    case "p":
+    default:
+      return "paragraph";
+  }
+}
+function G(r) {
+  if (!r.trim())
+    return {
+      blocks: [{
+        type: "paragraph",
+        html: "<br>"
+      }]
+    };
+  const m = new DOMParser().parseFromString(r, "text/html"), _ = Array.from(m.body.childNodes), g = [];
+  return _.forEach((i) => {
+    var T;
+    if (i.nodeType === Node.TEXT_NODE) {
+      const E = (T = i.textContent) == null ? void 0 : T.trim();
+      E && g.push({
+        type: "paragraph",
+        html: E
+      });
+      return;
+    }
+    if (i.nodeType !== Node.ELEMENT_NODE)
+      return;
+    const u = i, b = u.style.textAlign;
+    g.push({
+      type: Ht(u.tagName),
+      html: Re(u.innerHTML),
+      align: b || void 0
+    });
+  }), {
+    blocks: g.length > 0 ? g : [{
+      type: "paragraph",
+      html: "<br>"
+    }]
+  };
+}
+function xe(r) {
+  return r.blocks.length ? r.blocks.map((l) => {
+    const m = Lt[l.type], _ = l.align ? ` style="text-align:${l.align}"` : "";
+    return `<${m}${_}>${Re(l.html)}</${m}>`;
+  }).join("") : "<p><br></p>";
+}
+function Nt(r) {
+  const l = r.blocks.map((m) => m.html.replace(/<[^>]+>/g, " ")).join(" ").replace(/\s+/g, " ").trim();
+  return l ? l.split(" ").length : 0;
+}
+const wt = ["bold", "italic", "underline", "align-left", "align-center", "align-right", "bulleted", "link", "format"], St = [{
+  label: "Paragraph",
+  value: "paragraph"
+}, {
+  label: "Heading 1",
+  value: "heading1"
+}, {
+  label: "Heading 2",
+  value: "heading2"
+}, {
+  label: "Heading 3",
+  value: "heading3"
+}, {
+  label: "Heading 4",
+  value: "heading4"
+}, {
+  label: "Preformatted",
+  value: "preformatted"
+}], Ft = {
+  paragraph: "P",
+  heading1: "H1",
+  heading2: "H2",
+  heading3: "H3",
+  heading4: "H4",
+  preformatted: "PRE",
+  "unordered-list": "UL",
+  "ordered-list": "OL"
+};
+function Y() {
+  return "<p><br></p>";
+}
+function Dt(r) {
+  return r.trim().length > 0 ? r : Y();
+}
+function At() {
+  const r = document.queryCommandValue("formatBlock");
+  switch (String(r || "").replace(/[<>]/g, "").toUpperCase()) {
+    case "H1":
+      return "heading1";
+    case "H2":
+      return "heading2";
+    case "H3":
+      return "heading3";
+    case "H4":
+      return "heading4";
+    case "PRE":
+      return "preformatted";
+    default:
+      return "paragraph";
+  }
+}
+function Bt(r) {
+  switch (r) {
+    case "heading1":
+      return t.formatMenuOptionHeading1;
+    case "heading2":
+      return t.formatMenuOptionHeading2;
+    case "heading3":
+      return t.formatMenuOptionHeading3;
+    case "heading4":
+      return t.formatMenuOptionHeading4;
+    case "preformatted":
+      return t.formatMenuOptionPreformatted;
+    default:
+      return t.formatMenuOptionParagraph;
+  }
+}
+function Kt({
+  className: r,
+  label: l,
+  required: m = !1,
+  value: _,
+  placeholder: g = "Content",
+  disabled: i = !1,
+  errorMessage: u,
+  helpText: b,
+  helpLink: T,
+  helpLinkText: E,
+  toolbarLayout: B = "inline",
+  showToolbar: I = !0,
+  showWordCount: Ee = !0,
+  maxWords: O,
+  resizable: Me = !0,
+  rows: ve = 8,
+  fullWidth: P = !1,
+  tooltipEnabled: y = !0,
+  formatOptions: X = St,
+  toolbarOptions: Z = wt,
+  onChange: j,
+  onModelChange: U
+}) {
+  const Ce = be(() => new Set(Z), [Z]), M = (e) => Ce.has(e), Q = De(), s = F(null), ee = F(null), te = F(null), v = F(null), [ke, ne] = d(!1), [z, oe] = d(!1), [Oe, ye] = d(0), [re, ie] = d(null), [Le, ae] = d(!1), [le, ce] = d(""), [se, de] = d(""), [L, ue] = d(() => G(_ || Y())), [me, He] = d("paragraph"), [p, Ne] = d({
+    bold: !1,
+    italic: !1,
+    underline: !1,
+    justifyLeft: !1,
+    justifyCenter: !1,
+    justifyRight: !1,
+    insertUnorderedList: !1
+  }), q = be(() => Nt(L), [L]), $ = () => {
+    if (!s.current) return;
+    const e = G(s.current.innerHTML);
+    ue(e), U == null || U(e), j == null || j(xe(e));
+  }, C = () => {
+    He(At()), Ne({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline"),
+      justifyLeft: document.queryCommandState("justifyLeft"),
+      justifyCenter: document.queryCommandState("justifyCenter"),
+      justifyRight: document.queryCommandState("justifyRight"),
+      insertUnorderedList: document.queryCommandState("insertUnorderedList")
+    });
+  }, W = () => {
+    var e;
+    i || (e = s.current) == null || e.focus();
+  }, _e = (e, o) => {
+    i || (W(), document.execCommand(e, !1, o), $(), C());
+  }, we = (e) => {
+    _e("formatBlock", Ft[e]);
+  }, pe = () => {
+    var h, R;
+    if (i) return;
+    W();
+    const e = window.getSelection();
+    let o = "", a = "";
+    if (e && e.rangeCount > 0) {
+      const k = e.getRangeAt(0);
+      v.current = k.cloneRange(), o = e.toString();
+      const V = ((h = k.startContainer.parentElement) == null ? void 0 : h.closest("a")) ?? ((R = k.endContainer.parentElement) == null ? void 0 : R.closest("a"));
+      V instanceof HTMLAnchorElement && (o = V.textContent ?? o, a = V.getAttribute("href") ?? "");
+    } else
+      v.current = null;
+    ce(o), de(a), ae(!0);
+  }, H = () => {
+    ae(!1), v.current = null;
+  }, Se = () => {
+    const e = se.trim();
+    if (!e) {
+      H();
+      return;
+    }
+    const o = le.trim() || e, a = (k) => k.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), h = `<a href="${a(e)}" target="_blank" rel="noopener noreferrer">${a(o)}</a>`;
+    W();
+    const R = window.getSelection();
+    R && v.current && (R.removeAllRanges(), R.addRange(v.current)), document.execCommand("insertHTML", !1, h), $(), C(), H();
+  }, Fe = (e) => {
+    if (!e.ctrlKey && !e.metaKey) return;
+    const o = e.target, a = o == null ? void 0 : o.closest("a");
+    a instanceof HTMLAnchorElement && a.href && (e.preventDefault(), window.open(a.href, "_blank", "noopener,noreferrer"));
+  };
+  D(() => {
+    const e = Dt(_ || Y()), o = G(e);
+    ue(o), s.current && s.current.innerHTML !== e && (s.current.innerHTML = e);
+  }, [_]), D(() => {
+    s.current && (s.current.innerHTML.trim() || (s.current.innerHTML = xe(L)));
+  }, [L]), D(() => {
+    var o;
+    const e = (o = ee.current) == null ? void 0 : o.getBoundingClientRect().width;
+    e && ye(e);
+  }, [z]), D(() => {
+    if (!I || P) {
+      ie(null);
+      return;
+    }
+    const e = te.current;
+    if (!e) return;
+    const o = () => {
+      const h = e.getBoundingClientRect().width;
+      h > 0 && ie(h);
+    };
+    o();
+    const a = new ResizeObserver(() => {
+      o();
+    });
+    return a.observe(e), window.addEventListener("resize", o), () => {
+      a.disconnect(), window.removeEventListener("resize", o);
+    };
+  }, [I, B, i, y, P]);
+  const x = (e) => /* @__PURE__ */ n(J, { content: e.tooltip, size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !y, children: /* @__PURE__ */ n("button", { type: "button", className: f(t.toolButton, e.active && t.toolButtonActive), onMouseDown: (o) => o.preventDefault(), onClick: () => _e(e.command, e.value), "aria-label": e.tooltip, disabled: i, children: /* @__PURE__ */ n(A, { icon: e.icon, className: t.toolIcon }) }) }, e.id), K = [{
+    id: "bold",
+    icon: "ap-icon-bold",
+    command: "bold",
+    tooltip: "Bold (CTRL + B)",
+    active: p.bold
+  }, {
+    id: "italic",
+    icon: "ap-icon-italic",
+    command: "italic",
+    tooltip: "Italic (CTRL + I)",
+    active: p.italic
+  }, {
+    id: "underline",
+    icon: "ap-icon-underline",
+    command: "underline",
+    tooltip: "Underline (CTRL + U)",
+    active: p.underline
+  }, {
+    id: "align-left",
+    icon: "ap-icon-left",
+    command: "justifyLeft",
+    tooltip: "Align left",
+    active: p.justifyLeft
+  }, {
+    id: "align-center",
+    icon: "ap-icon-bar",
+    command: "justifyCenter",
+    tooltip: "Align center",
+    active: p.justifyCenter
+  }, {
+    id: "align-right",
+    icon: "ap-icon-right",
+    command: "justifyRight",
+    tooltip: "Align right",
+    active: p.justifyRight
+  }, {
+    id: "bulleted",
+    icon: "ap-icon-list",
+    command: "insertUnorderedList",
+    tooltip: "Bulleted list",
+    active: p.insertUnorderedList
+  }], N = K.filter((e) => ["bold", "italic", "underline"].includes(e.id) && M(e.id)), w = K.filter((e) => ["align-left", "align-center", "align-right"].includes(e.id) && M(e.id)), S = K.filter((e) => ["bulleted"].includes(e.id) && M(e.id)), he = M("link"), fe = M("format"), ge = () => {
+    var e;
+    return /* @__PURE__ */ n("div", { className: t.formatControl, children: /* @__PURE__ */ c(Be, { open: z, onOpenChange: oe, children: [
+      /* @__PURE__ */ c(Ie, { ref: ee, disabled: i, className: f(t.selectTrigger, z && t.selectTriggerOpen), children: [
+        /* @__PURE__ */ n("span", { className: t.selectTriggerLabel, children: ((e = X.find((o) => o.value === me)) == null ? void 0 : e.label) || "Paragraph" }),
+        /* @__PURE__ */ n(A, { icon: "ap-icon-expand-more", className: t.selectIcon })
+      ] }),
+      /* @__PURE__ */ n(Pe, { children: /* @__PURE__ */ n(je, { align: "end", side: "bottom", sideOffset: 6, collisionPadding: 8, className: t.formatMenu, style: {
+        minWidth: Oe || 180,
+        zIndex: 9999
+      }, children: /* @__PURE__ */ n("div", { className: t.formatMenuOptions, children: X.map((o) => /* @__PURE__ */ n("button", { type: "button", className: f(t.formatMenuOption, Bt(o.value), o.value === me && t.formatMenuOptionSelected), onMouseDown: (a) => a.preventDefault(), onClick: () => {
+        we(o.value), oe(!1);
+      }, children: o.label }, o.value)) }) }) })
+    ] }) });
+  };
+  return /* @__PURE__ */ c("div", { className: f(t.container, i && t.containerDisabled, P && t.containerFullWidth, r), children: [
+    l && /* @__PURE__ */ c("label", { className: t.label, htmlFor: Q, children: [
+      l,
+      m && /* @__PURE__ */ n("span", { className: t.required, children: "*" })
+    ] }),
+    /* @__PURE__ */ c("div", { className: f(t.frame, ke && t.frameFocused, i && t.frameDisabled, u && t.frameError), style: {
+      width: re ? `${re}px` : void 0
+    }, children: [
+      I && /* @__PURE__ */ n("div", { className: f(t.toolbar, B === "stacked" && t.toolbarStacked), children: /* @__PURE__ */ n("div", { ref: te, className: t.toolbarContent, children: B === "stacked" ? /* @__PURE__ */ c("div", { className: t.toolbarPanel, children: [
+        /* @__PURE__ */ c("div", { className: t.toolbarRow, children: [
+          N.length > 0 && /* @__PURE__ */ n("div", { className: t.actions, children: N.map(x) }),
+          w.length > 0 && /* @__PURE__ */ n("div", { className: t.actions, children: w.map(x) })
+        ] }),
+        /* @__PURE__ */ c("div", { className: t.toolbarRow, children: [
+          S.length > 0 && /* @__PURE__ */ n("div", { className: t.actions, children: S.map(x) }),
+          he && /* @__PURE__ */ n("div", { className: t.toolbarLinkSlot, children: /* @__PURE__ */ n(J, { content: "Insert link", size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !y, children: /* @__PURE__ */ n("button", { type: "button", className: t.toolButton, onMouseDown: (e) => e.preventDefault(), onClick: pe, "aria-label": "Insert link", disabled: i, children: /* @__PURE__ */ n(A, { icon: "ap-icon-link", className: t.toolIcon }) }) }) }),
+          fe && ge()
+        ] })
+      ] }) : /* @__PURE__ */ n("div", { className: t.toolbarPanel, children: /* @__PURE__ */ c("div", { className: t.toolbarRow, children: [
+        N.length > 0 && /* @__PURE__ */ n("div", { className: t.actions, children: N.map(x) }),
+        w.length > 0 && /* @__PURE__ */ n("div", { className: t.actions, children: w.map(x) }),
+        S.length > 0 && /* @__PURE__ */ n("div", { className: t.actions, children: S.map(x) }),
+        he && /* @__PURE__ */ n("div", { className: t.toolbarLinkSlot, children: /* @__PURE__ */ n(J, { content: "Insert link", size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !y, children: /* @__PURE__ */ n("button", { type: "button", className: t.toolButton, onMouseDown: (e) => e.preventDefault(), onClick: pe, "aria-label": "Insert link", disabled: i, children: /* @__PURE__ */ n(A, { icon: "ap-icon-link", className: t.toolIcon }) }) }) }),
+        fe && ge()
+      ] }) }) }) }),
+      /* @__PURE__ */ n("div", { id: Q, ref: s, className: t.editor, contentEditable: !i, suppressContentEditableWarning: !0, role: "textbox", "aria-multiline": "true", "aria-label": l || "Rich text editor", "data-placeholder": g, onInput: $, onFocus: () => {
+        ne(!0), C();
+      }, onBlur: () => ne(!1), onKeyUp: C, onMouseUp: C, onClick: Fe, style: {
+        minHeight: `${ve * 20}px`,
+        resize: Me ? "vertical" : "none"
+      } }),
+      Ee && /* @__PURE__ */ n("div", { className: f(t.wordCount, O && q > O && t.wordCountExceeded), children: O ? `${q}/${O}` : q })
+    ] }),
+    (u || b || T) && /* @__PURE__ */ c("div", { className: t.helpers, children: [
+      u ? /* @__PURE__ */ n("span", { title: u, className: t.errorMessage, children: u }) : b && /* @__PURE__ */ n("span", { title: b, className: t.helperText, children: b }),
+      T && E && /* @__PURE__ */ n("a", { href: T, className: t.helpLink, target: "_blank", rel: "noopener noreferrer", children: E })
+    ] }),
+    /* @__PURE__ */ n(Ae, { isOpen: Le, onClose: H, title: "Attach link", cancelButtonText: "Cancel", cancelButtonType: "secondary", cancelButtonVariant: "cancel", confirmButtonText: "Attach", confirmButtonType: "primary", onCancel: H, onConfirm: Se, description: /* @__PURE__ */ c("div", { className: t.linkDialogForm, children: [
+      /* @__PURE__ */ n(Te, { type: "text", label: "Displayed text", value: le, onChange: ce, autofocus: !0 }),
+      /* @__PURE__ */ n(Te, { type: "text", label: "Link", value: se, placeholder: "https://example.com/", onChange: de })
+    ] }) })
+  ] });
+}
+export {
+  Kt as R,
+  t as s
+};

package/dist/assets/RichTextEditor.css

@@ -1 +1 @@
-.RichTextEditor-module__container___AplP0{width:fit-content;max-width:100%;display:grid;grid-template-columns:1fr;row-gap:12px}.RichTextEditor-module__label___vjzs-{color:#4a4a4a;font-size:14px;font-weight:500;line-height:1.2;display:inline-flex;align-items:center;gap:4px}.RichTextEditor-module__required___7duke{color:#cb282e}.RichTextEditor-module__frame___7OSyf{border:1px solid #cccccc;border-radius:4px;background:#fff;overflow:hidden}.RichTextEditor-module__frameFocused___GtJ2x{border-color:#5cb335}.RichTextEditor-module__frameDisabled___LubtU{opacity:.7}.RichTextEditor-module__toolbar___m9-M-{display:block;border-bottom:1px solid #cccccc}.RichTextEditor-module__toolbarContent___YXKHD{width:fit-content;display:flex;align-items:center;gap:12px}.RichTextEditor-module__toolbarStacked___6rB10 .RichTextEditor-module__toolbarContent___YXKHD{display:block}.RichTextEditor-module__actions___ZAK9J{display:flex;align-items:center;gap:6px}.RichTextEditor-module__toolbarPanel___OVGHO{border-radius:4px;overflow:hidden;width:fit-content}.RichTextEditor-module__toolbarRow___f0xJR{display:flex;align-items:center;width:fit-content;min-height:32px;border-bottom:1px solid #cccccc;padding:2px 4px;gap:2px}.RichTextEditor-module__toolbarRow___f0xJR:last-child{border-bottom:none}.RichTextEditor-module__toolbarRow___f0xJR>*{padding-right:8px;margin-right:8px;border-right:1px solid #cccccc}.RichTextEditor-module__toolbarRow___f0xJR>*:last-child{padding-right:0;margin-right:0;border-right:none}.RichTextEditor-module__toolButton___IT2Kg{width:32px;height:32px;border:none;background:transparent;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.RichTextEditor-module__toolButton___IT2Kg:hover:not(:disabled){background:#f7f7f7}.RichTextEditor-module__toolButton___IT2Kg:active:not(:disabled),.RichTextEditor-module__toolButton___IT2Kg.RichTextEditor-module__toolButtonActive___-HvZQ{background:#e4e4e4}.RichTextEditor-module__toolIcon___Wndhd{color:#4a4a4a;font-size:20px}.RichTextEditor-module__formatControl___w4WcA{position:relative;flex-shrink:0}.RichTextEditor-module__toolbarLinkSlot___Gu-9l{display:inline-flex;align-items:center;flex-shrink:0}.RichTextEditor-module__selectTrigger___frv3x{height:32px;min-width:180px;flex-shrink:0;border:none;background:transparent;color:#4a4a4a;font-size:16px;outline:none;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between}.RichTextEditor-module__selectTrigger___frv3x:hover:not(:disabled){background:#f7f7f7}.RichTextEditor-module__selectTrigger___frv3x:focus-visible{background:#e4e4e4}.RichTextEditor-module__selectTriggerOpen___tk2Pb{background:#e4e4e4}.RichTextEditor-module__selectTriggerLabel___FkEv0{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.RichTextEditor-module__selectIcon___aJWUk{margin-left:8px;pointer-events:none;color:#4a4a4a;font-size:16px}.RichTextEditor-module__formatMenu___y-uBL{background-color:#fff;border:1px solid #cccccc;border-radius:4px;box-shadow:0 0 4px #00000029;max-width:640px;width:fit-content;overflow:hidden}.RichTextEditor-module__formatMenuOptions___zcdlo{padding:8px;display:flex;flex-direction:column;gap:0}.RichTextEditor-module__formatMenuOption___3ppTs{width:100%;border:none;background:none;min-height:32px;padding:8px;border-radius:4px;color:#4a4a4a;text-align:left;font-size:14px;cursor:pointer}.RichTextEditor-module__formatMenuOption___3ppTs:hover,.RichTextEditor-module__formatMenuOptionSelected___bq9J9{background-color:#dff0db}.RichTextEditor-module__formatMenuOptionParagraph___4BLds{font-size:16px;font-weight:400;line-height:1.3}.RichTextEditor-module__formatMenuOptionHeading1___H1cKX{font-size:48px;font-weight:600;line-height:1.2}.RichTextEditor-module__formatMenuOptionHeading2___JdixR{font-size:40px;font-weight:600;line-height:1.2}.RichTextEditor-module__formatMenuOptionHeading3___NcwLr{font-size:32px;font-weight:600;line-height:1.25}.RichTextEditor-module__formatMenuOptionHeading4___4mLbG{font-size:24px;font-weight:600;line-height:1.3}.RichTextEditor-module__formatMenuOptionPreformatted___cB0Ix{font-family:Roboto Mono,Consolas,Monaco,Courier New,monospace;font-size:14px;letter-spacing:.08em;font-weight:400;line-height:1.3}.RichTextEditor-module__editor___M32R7{width:100%;box-sizing:border-box;min-height:160px;padding:6px 12px;color:#28292c;font-size:14px;line-height:1.4;overflow:auto;outline:none}.RichTextEditor-module__editor___M32R7:empty:before{content:attr(data-placeholder);color:#878787;pointer-events:none}.RichTextEditor-module__wordCount___5SSVY{text-align:right;color:#727272;font-size:12px;padding-right:8px;padding-bottom:4px;padding-top:4px}.RichTextEditor-module__wordCountExceeded___NhqBc{color:#bf494e}
+.RichTextEditor-module__container___AplP0{width:fit-content;max-width:100%;display:grid;grid-template-columns:1fr;row-gap:6px}.RichTextEditor-module__label___vjzs-{color:#4a4a4a;font-size:14px;font-weight:500;line-height:1.2;display:inline-flex;align-items:center;gap:4px}.RichTextEditor-module__required___7duke{color:#cb282e}.RichTextEditor-module__frame___7OSyf{border:1px solid #cccccc;border-radius:4px;background:#fff;overflow:hidden}.RichTextEditor-module__frameFocused___GtJ2x{border-color:#5cb335}.RichTextEditor-module__frameDisabled___LubtU{opacity:.7}.RichTextEditor-module__frameError___sPTiY{border-color:#bf494e}.RichTextEditor-module__errorMessage___4VdKj{color:#bf494e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.RichTextEditor-module__helpers___cpuz6{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}.RichTextEditor-module__helperText___rFoU0{color:#727272;font-size:12px;font-weight:400;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.RichTextEditor-module__helpLink___7gYcv{color:#0369a3;font-size:13px;font-weight:500;line-height:1;text-decoration:none;flex-shrink:0;margin-left:auto}.RichTextEditor-module__helpLink___7gYcv:hover{text-decoration:underline}.RichTextEditor-module__containerDisabled___6h9dd .RichTextEditor-module__helperText___rFoU0{color:#b2b2b2}.RichTextEditor-module__containerDisabled___6h9dd .RichTextEditor-module__helpLink___7gYcv{color:#878787;pointer-events:none;cursor:not-allowed}.RichTextEditor-module__containerFullWidth___pOoeL,.RichTextEditor-module__containerFullWidth___pOoeL .RichTextEditor-module__frame___7OSyf,.RichTextEditor-module__containerFullWidth___pOoeL .RichTextEditor-module__toolbarContent___YXKHD,.RichTextEditor-module__containerFullWidth___pOoeL .RichTextEditor-module__toolbarPanel___OVGHO,.RichTextEditor-module__containerFullWidth___pOoeL .RichTextEditor-module__toolbarRow___f0xJR{width:100%}.RichTextEditor-module__toolbar___m9-M-{display:block;border-bottom:1px solid #cccccc}.RichTextEditor-module__toolbarContent___YXKHD{width:fit-content;display:flex;align-items:center;gap:12px}.RichTextEditor-module__toolbarStacked___6rB10 .RichTextEditor-module__toolbarContent___YXKHD{display:block}.RichTextEditor-module__actions___ZAK9J{display:flex;align-items:center;gap:6px}.RichTextEditor-module__toolbarPanel___OVGHO{border-radius:4px;overflow:hidden;width:fit-content}.RichTextEditor-module__toolbarRow___f0xJR{display:flex;align-items:center;width:fit-content;min-height:32px;border-bottom:1px solid #cccccc;padding:2px 4px;gap:2px}.RichTextEditor-module__toolbarRow___f0xJR:last-child{border-bottom:none}.RichTextEditor-module__toolbarRow___f0xJR>*{padding-right:8px;margin-right:8px;border-right:1px solid #cccccc}.RichTextEditor-module__toolbarRow___f0xJR>*:last-child{padding-right:0;margin-right:0;border-right:none}.RichTextEditor-module__toolButton___IT2Kg{width:32px;height:32px;border:none;background:transparent;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.RichTextEditor-module__toolButton___IT2Kg:hover:not(:disabled){background:#f7f7f7}.RichTextEditor-module__toolButton___IT2Kg:active:not(:disabled),.RichTextEditor-module__toolButton___IT2Kg.RichTextEditor-module__toolButtonActive___-HvZQ{background:#e4e4e4}.RichTextEditor-module__toolIcon___Wndhd{color:#4a4a4a;font-size:20px!important}.RichTextEditor-module__formatControl___w4WcA{position:relative;flex-shrink:0}.RichTextEditor-module__toolbarLinkSlot___Gu-9l{display:inline-flex;align-items:center;flex-shrink:0}.RichTextEditor-module__selectTrigger___frv3x{height:32px;flex-shrink:0;border:none;background:transparent;color:#4a4a4a;font-size:16px;outline:none;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between}.RichTextEditor-module__selectTrigger___frv3x:hover:not(:disabled){background:#f7f7f7}.RichTextEditor-module__selectTrigger___frv3x:focus-visible{background:#e4e4e4}.RichTextEditor-module__selectTriggerOpen___tk2Pb{background:#e4e4e4}.RichTextEditor-module__selectTriggerLabel___FkEv0{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.RichTextEditor-module__selectIcon___aJWUk{margin-left:8px;pointer-events:none;color:#4a4a4a;font-size:16px}.RichTextEditor-module__formatMenu___y-uBL{background-color:#fff;border:1px solid #cccccc;border-radius:4px;box-shadow:0 0 4px #00000029;max-width:640px;width:fit-content;overflow:hidden}.RichTextEditor-module__formatMenuOptions___zcdlo{padding:8px;display:flex;flex-direction:column;gap:0}.RichTextEditor-module__formatMenuOption___3ppTs{width:100%;border:none;background:none;min-height:32px;padding:8px;border-radius:4px;color:#4a4a4a;text-align:left;font-size:14px;cursor:pointer}.RichTextEditor-module__formatMenuOption___3ppTs:hover,.RichTextEditor-module__formatMenuOptionSelected___bq9J9{background-color:#dff0db}.RichTextEditor-module__formatMenuOptionParagraph___4BLds{font-size:16px;font-weight:400;line-height:1.3}.RichTextEditor-module__formatMenuOptionHeading1___H1cKX{font-size:48px;font-weight:600;line-height:1.2}.RichTextEditor-module__formatMenuOptionHeading2___JdixR{font-size:40px;font-weight:600;line-height:1.2}.RichTextEditor-module__formatMenuOptionHeading3___NcwLr{font-size:32px;font-weight:600;line-height:1.25}.RichTextEditor-module__formatMenuOptionHeading4___4mLbG{font-size:24px;font-weight:600;line-height:1.3}.RichTextEditor-module__formatMenuOptionPreformatted___cB0Ix{font-family:Roboto Mono,Consolas,Monaco,Courier New,monospace;font-size:14px;letter-spacing:.08em;font-weight:400;line-height:1.3}.RichTextEditor-module__editor___M32R7{width:100%;box-sizing:border-box;min-height:160px;padding:6px 12px;color:#28292c;font-size:14px;line-height:1.4;overflow:auto;outline:none}.RichTextEditor-module__editor___M32R7:empty:before{content:attr(data-placeholder);color:#878787;pointer-events:none}.RichTextEditor-module__wordCount___5SSVY{text-align:right;color:#727272;font-size:12px;padding-right:8px;padding-bottom:4px;padding-top:4px}.RichTextEditor-module__wordCountExceeded___NhqBc{color:#bf494e}.RichTextEditor-module__linkDialogForm___vOLO1{padding-top:1rem;display:flex;flex-direction:column;gap:.75rem}.RichTextEditor-module__linkDialogForm___vOLO1>*{width:100%}a{cursor:pointer}

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -1,5 +1,6 @@
 import { RichTextBlockType, RichTextDocumentModel } from './RichTextEditor.model';
 type ToolbarLayout = 'inline' | 'stacked';
+export type ToolbarOption = 'bold' | 'italic' | 'underline' | 'align-left' | 'align-center' | 'align-right' | 'bulleted' | 'link' | 'format';
 type FormatOption = {
     label: string;
     value: RichTextBlockType;
@@ -11,16 +12,22 @@ type RichTextEditorProps = {
     value?: string;
     placeholder?: string;
     disabled?: boolean;
+    errorMessage?: string;
+    helpText?: string;
+    helpLink?: string;
+    helpLinkText?: string;
     toolbarLayout?: ToolbarLayout;
     showToolbar?: boolean;
     showWordCount?: boolean;
     maxWords?: number;
     resizable?: boolean;
     rows?: number;
+    fullWidth?: boolean;
     tooltipEnabled?: boolean;
     formatOptions?: FormatOption[];
+    toolbarOptions?: ToolbarOption[];
     onChange?: (value: string) => void;
     onModelChange?: (model: RichTextDocumentModel) => void;
 };
-export default function RichTextEditor({ className, label, required, value, placeholder, disabled, toolbarLayout, showToolbar, showWordCount, maxWords, resizable, rows, tooltipEnabled, formatOptions, onChange, onModelChange, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function RichTextEditor({ className, label, required, value, placeholder, disabled, errorMessage, helpText, helpLink, helpLinkText, toolbarLayout, showToolbar, showWordCount, maxWords, resizable, rows, fullWidth, tooltipEnabled, formatOptions, toolbarOptions, onChange, onModelChange, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -1,10 +1,12 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "react";
+import "../Dialog/Dialog.js";
 import "../Icon/Icon.js";
+import "../Input/Input.js";
 import "../Tooltip/Tooltip.js";
-import { R as f } from "../../RichTextEditor-CHGQT1Qj.js";
+import { R as l } from "../../RichTextEditor-CfINW9Xs.js";
 import "../../index-DZ4Gof57.js";
 export {
-  f as default
+  l as default
 };

package/dist/components/RichTextEditor/RichTextEditor.test.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { d, i as r, r as a, g as t, s as e, f as i, w as y, v as b } from "../../vi.bdSIJ99Y-017e_Pkz.js";
-import { s as c, R as n } from "../../RichTextEditor-CHGQT1Qj.js";
+import { s as c, R as n } from "../../RichTextEditor-CfINW9Xs.js";
 d("RichTextEditor", () => {
   d("Rendering", () => {
     r("renders label and required marker", () => {

package/dist/main.js

@@ -12,7 +12,7 @@ import { default as B } from "./components/Dropdown/Dropdown.js";
 import { default as v, useFilePickerContext as C } from "./components/FilePicker/FilePicker.js";
 import { default as I } from "./components/Search/Search.js";
 import { default as S } from "./components/Datepicker/Datepicker.js";
-import { R as N } from "./RichTextEditor-CHGQT1Qj.js";
+import { R as N } from "./RichTextEditor-CfINW9Xs.js";
 import { default as w } from "./components/Toast/Toast.js";
 import { T as E } from "./ToastProvider-D5LImZ-Q.js";
 import { u as j } from "./useToast-Cz5MGKnw.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alixpartners/ui-components",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "type": "module",
   "files": [
     "dist"

package/dist/RichTextEditor-CHGQT1Qj.js

@@ -1,363 +0,0 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { c as _ } from "./clsx-OuTLNxxd.js";
-import { useId as se, useRef as w, useState as p, useMemo as ue, useEffect as E } from "react";
-import O from "./components/Icon/Icon.js";
-import S from "./components/Tooltip/Tooltip.js";
-import { R as me, T as fe, P as _e, C as pe } from "./index-DZ4Gof57.js";
-import './assets/RichTextEditor.css';const he = "RichTextEditor-module__container___AplP0", ge = "RichTextEditor-module__label___vjzs-", be = "RichTextEditor-module__required___7duke", Me = "RichTextEditor-module__frame___7OSyf", Te = "RichTextEditor-module__frameFocused___GtJ2x", xe = "RichTextEditor-module__frameDisabled___LubtU", ve = "RichTextEditor-module__toolbar___m9-M-", Re = "RichTextEditor-module__toolbarContent___YXKHD", Ee = "RichTextEditor-module__toolbarStacked___6rB10", Oe = "RichTextEditor-module__actions___ZAK9J", Ce = "RichTextEditor-module__toolbarPanel___OVGHO", ye = "RichTextEditor-module__toolbarRow___f0xJR", He = "RichTextEditor-module__toolButton___IT2Kg", Ne = "RichTextEditor-module__toolButtonActive___-HvZQ", ke = "RichTextEditor-module__toolIcon___Wndhd", Le = "RichTextEditor-module__formatControl___w4WcA", we = "RichTextEditor-module__toolbarLinkSlot___Gu-9l", Se = "RichTextEditor-module__selectTrigger___frv3x", Fe = "RichTextEditor-module__selectTriggerOpen___tk2Pb", Ie = "RichTextEditor-module__selectTriggerLabel___FkEv0", Pe = "RichTextEditor-module__selectIcon___aJWUk", Be = "RichTextEditor-module__formatMenu___y-uBL", Ae = "RichTextEditor-module__formatMenuOptions___zcdlo", je = "RichTextEditor-module__formatMenuOption___3ppTs", ze = "RichTextEditor-module__formatMenuOptionSelected___bq9J9", De = "RichTextEditor-module__formatMenuOptionParagraph___4BLds", qe = "RichTextEditor-module__formatMenuOptionHeading1___H1cKX", Ue = "RichTextEditor-module__formatMenuOptionHeading2___JdixR", $e = "RichTextEditor-module__formatMenuOptionHeading3___NcwLr", We = "RichTextEditor-module__formatMenuOptionHeading4___4mLbG", Je = "RichTextEditor-module__formatMenuOptionPreformatted___cB0Ix", Ke = "RichTextEditor-module__editor___M32R7", Ve = "RichTextEditor-module__wordCount___5SSVY", Ge = "RichTextEditor-module__wordCountExceeded___NhqBc", e = {
-  container: he,
-  label: ge,
-  required: be,
-  frame: Me,
-  frameFocused: Te,
-  frameDisabled: xe,
-  toolbar: ve,
-  toolbarContent: Re,
-  toolbarStacked: Ee,
-  actions: Oe,
-  toolbarPanel: Ce,
-  toolbarRow: ye,
-  toolButton: He,
-  toolButtonActive: Ne,
-  toolIcon: ke,
-  formatControl: Le,
-  toolbarLinkSlot: we,
-  selectTrigger: Se,
-  selectTriggerOpen: Fe,
-  selectTriggerLabel: Ie,
-  selectIcon: Pe,
-  formatMenu: Be,
-  formatMenuOptions: Ae,
-  formatMenuOption: je,
-  formatMenuOptionSelected: ze,
-  formatMenuOptionParagraph: De,
-  formatMenuOptionHeading1: qe,
-  formatMenuOptionHeading2: Ue,
-  formatMenuOptionHeading3: $e,
-  formatMenuOptionHeading4: We,
-  formatMenuOptionPreformatted: Je,
-  editor: Ke,
-  wordCount: Ve,
-  wordCountExceeded: Ge
-}, Xe = {
-  paragraph: "p",
-  heading1: "h1",
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  preformatted: "pre",
-  "unordered-list": "ul",
-  "ordered-list": "ol"
-};
-function te(o) {
-  return o.trim().length > 0 ? o : "<br>";
-}
-function Ye(o) {
-  switch (o.toLowerCase()) {
-    case "h1":
-      return "heading1";
-    case "h2":
-      return "heading2";
-    case "h3":
-      return "heading3";
-    case "h4":
-      return "heading4";
-    case "pre":
-      return "preformatted";
-    case "ul":
-      return "unordered-list";
-    case "ol":
-      return "ordered-list";
-    case "p":
-    default:
-      return "paragraph";
-  }
-}
-function F(o) {
-  if (!o.trim())
-    return {
-      blocks: [{
-        type: "paragraph",
-        html: "<br>"
-      }]
-    };
-  const d = new DOMParser().parseFromString(o, "text/html"), s = Array.from(d.body.childNodes), h = [];
-  return s.forEach((i) => {
-    var T;
-    if (i.nodeType === Node.TEXT_NODE) {
-      const m = (T = i.textContent) == null ? void 0 : T.trim();
-      m && h.push({
-        type: "paragraph",
-        html: m
-      });
-      return;
-    }
-    if (i.nodeType !== Node.ELEMENT_NODE)
-      return;
-    const u = i, b = u.style.textAlign;
-    h.push({
-      type: Ye(u.tagName),
-      html: te(u.innerHTML),
-      align: b || void 0
-    });
-  }), {
-    blocks: h.length > 0 ? h : [{
-      type: "paragraph",
-      html: "<br>"
-    }]
-  };
-}
-function ee(o) {
-  return o.blocks.length ? o.blocks.map((a) => {
-    const d = Xe[a.type], s = a.align ? ` style="text-align:${a.align}"` : "";
-    return `<${d}${s}>${te(a.html)}</${d}>`;
-  }).join("") : "<p><br></p>";
-}
-function Ze(o) {
-  const a = o.blocks.map((d) => d.html.replace(/<[^>]+>/g, " ")).join(" ").replace(/\s+/g, " ").trim();
-  return a ? a.split(" ").length : 0;
-}
-const Qe = [{
-  label: "Paragraph",
-  value: "paragraph"
-}, {
-  label: "Heading 1",
-  value: "heading1"
-}, {
-  label: "Heading 2",
-  value: "heading2"
-}, {
-  label: "Heading 3",
-  value: "heading3"
-}, {
-  label: "Heading 4",
-  value: "heading4"
-}, {
-  label: "Preformatted",
-  value: "preformatted"
-}], et = {
-  paragraph: "P",
-  heading1: "H1",
-  heading2: "H2",
-  heading3: "H3",
-  heading4: "H4",
-  preformatted: "PRE",
-  "unordered-list": "UL",
-  "ordered-list": "OL"
-};
-function I() {
-  return "<p><br></p>";
-}
-function tt(o) {
-  return o.trim().length > 0 ? o : I();
-}
-function nt() {
-  const o = document.queryCommandValue("formatBlock");
-  switch (String(o || "").replace(/[<>]/g, "").toUpperCase()) {
-    case "H1":
-      return "heading1";
-    case "H2":
-      return "heading2";
-    case "H3":
-      return "heading3";
-    case "H4":
-      return "heading4";
-    case "PRE":
-      return "preformatted";
-    default:
-      return "paragraph";
-  }
-}
-function ot(o) {
-  switch (o) {
-    case "heading1":
-      return e.formatMenuOptionHeading1;
-    case "heading2":
-      return e.formatMenuOptionHeading2;
-    case "heading3":
-      return e.formatMenuOptionHeading3;
-    case "heading4":
-      return e.formatMenuOptionHeading4;
-    case "preformatted":
-      return e.formatMenuOptionPreformatted;
-    default:
-      return e.formatMenuOptionParagraph;
-  }
-}
-function st({
-  className: o,
-  label: a,
-  required: d = !1,
-  value: s,
-  placeholder: h = "Content",
-  disabled: i = !1,
-  toolbarLayout: u = "inline",
-  showToolbar: b = !0,
-  showWordCount: T = !0,
-  maxWords: m,
-  resizable: ne = !0,
-  rows: oe = 8,
-  tooltipEnabled: x = !0,
-  formatOptions: P = Qe,
-  onChange: C,
-  onModelChange: y
-}) {
-  const B = se(), l = w(null), A = w(null), j = w(null), [re, z] = p(!1), [H, D] = p(!1), [ie, ae] = p(0), [q, U] = p(null), [v, $] = p(() => F(s || I())), [W, le] = p("paragraph"), [f, ce] = p({
-    bold: !1,
-    italic: !1,
-    underline: !1,
-    justifyLeft: !1,
-    justifyCenter: !1,
-    justifyRight: !1,
-    insertUnorderedList: !1
-  }), N = ue(() => Ze(v), [v]), k = () => {
-    if (!l.current) return;
-    const t = F(l.current.innerHTML);
-    $(t), y == null || y(t), C == null || C(ee(t));
-  }, M = () => {
-    le(nt()), ce({
-      bold: document.queryCommandState("bold"),
-      italic: document.queryCommandState("italic"),
-      underline: document.queryCommandState("underline"),
-      justifyLeft: document.queryCommandState("justifyLeft"),
-      justifyCenter: document.queryCommandState("justifyCenter"),
-      justifyRight: document.queryCommandState("justifyRight"),
-      insertUnorderedList: document.queryCommandState("insertUnorderedList")
-    });
-  }, J = () => {
-    var t;
-    i || (t = l.current) == null || t.focus();
-  }, K = (t, r) => {
-    i || (J(), document.execCommand(t, !1, r), k(), M());
-  }, de = (t) => {
-    K("formatBlock", et[t]);
-  }, V = () => {
-    if (i) return;
-    J();
-    const t = window.prompt("Enter URL");
-    t && (document.execCommand("createLink", !1, t), k(), M());
-  };
-  E(() => {
-    const t = tt(s || I()), r = F(t);
-    $(r), l.current && l.current.innerHTML !== t && (l.current.innerHTML = t);
-  }, [s]), E(() => {
-    l.current && (l.current.innerHTML.trim() || (l.current.innerHTML = ee(v)));
-  }, [v]), E(() => {
-    var r;
-    const t = (r = A.current) == null ? void 0 : r.getBoundingClientRect().width;
-    t && ae(t);
-  }, [H]), E(() => {
-    if (!b) {
-      U(null);
-      return;
-    }
-    const t = j.current;
-    if (!t) return;
-    const r = () => {
-      const Q = t.getBoundingClientRect().width;
-      Q > 0 && U(Q);
-    };
-    r();
-    const R = new ResizeObserver(() => {
-      r();
-    });
-    return R.observe(t), window.addEventListener("resize", r), () => {
-      R.disconnect(), window.removeEventListener("resize", r);
-    };
-  }, [b, u, i, x]);
-  const g = (t) => /* @__PURE__ */ n(S, { content: t.tooltip, size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !x, children: /* @__PURE__ */ n("button", { type: "button", className: _(e.toolButton, t.active && e.toolButtonActive), onMouseDown: (r) => r.preventDefault(), onClick: () => K(t.command, t.value), "aria-label": t.tooltip, disabled: i, children: /* @__PURE__ */ n(O, { icon: t.icon, className: e.toolIcon }) }) }, t.id), L = [{
-    id: "bold",
-    icon: "ap-icon-bold",
-    command: "bold",
-    tooltip: "Bold",
-    active: f.bold
-  }, {
-    id: "italic",
-    icon: "ap-icon-italic",
-    command: "italic",
-    tooltip: "Italic",
-    active: f.italic
-  }, {
-    id: "underline",
-    icon: "ap-icon-underline",
-    command: "underline",
-    tooltip: "Underline",
-    active: f.underline
-  }, {
-    id: "align-left",
-    icon: "ap-icon-left",
-    command: "justifyLeft",
-    tooltip: "Align left",
-    active: f.justifyLeft
-  }, {
-    id: "align-center",
-    icon: "ap-icon-bar",
-    command: "justifyCenter",
-    tooltip: "Align center",
-    active: f.justifyCenter
-  }, {
-    id: "align-right",
-    icon: "ap-icon-right",
-    command: "justifyRight",
-    tooltip: "Align right",
-    active: f.justifyRight
-  }, {
-    id: "bulleted",
-    icon: "ap-icon-list",
-    command: "insertUnorderedList",
-    tooltip: "Bulleted list",
-    active: f.insertUnorderedList
-  }], G = L.filter((t) => ["bold", "italic", "underline"].includes(t.id)), X = L.filter((t) => ["align-left", "align-center", "align-right"].includes(t.id)), Y = L.filter((t) => ["bulleted"].includes(t.id)), Z = () => {
-    var t;
-    return /* @__PURE__ */ n("div", { className: e.formatControl, children: /* @__PURE__ */ c(me, { open: H, onOpenChange: D, children: [
-      /* @__PURE__ */ c(fe, { ref: A, disabled: i, className: _(e.selectTrigger, H && e.selectTriggerOpen), children: [
-        /* @__PURE__ */ n("span", { className: e.selectTriggerLabel, children: ((t = P.find((r) => r.value === W)) == null ? void 0 : t.label) || "Paragraph" }),
-        /* @__PURE__ */ n(O, { icon: "ap-icon-expand-more", className: e.selectIcon })
-      ] }),
-      /* @__PURE__ */ n(_e, { children: /* @__PURE__ */ n(pe, { align: "end", side: "bottom", sideOffset: 6, collisionPadding: 8, className: e.formatMenu, style: {
-        minWidth: ie || 180,
-        zIndex: 9999
-      }, children: /* @__PURE__ */ n("div", { className: e.formatMenuOptions, children: P.map((r) => /* @__PURE__ */ n("button", { type: "button", className: _(e.formatMenuOption, ot(r.value), r.value === W && e.formatMenuOptionSelected), onMouseDown: (R) => R.preventDefault(), onClick: () => {
-        de(r.value), D(!1);
-      }, children: r.label }, r.value)) }) }) })
-    ] }) });
-  };
-  return /* @__PURE__ */ c("div", { className: _(e.container, o), children: [
-    a && /* @__PURE__ */ c("label", { className: e.label, htmlFor: B, children: [
-      a,
-      d && /* @__PURE__ */ n("span", { className: e.required, children: "*" })
-    ] }),
-    /* @__PURE__ */ c("div", { className: _(e.frame, re && e.frameFocused, i && e.frameDisabled), style: {
-      width: q ? `${q}px` : void 0
-    }, children: [
-      b && /* @__PURE__ */ n("div", { className: _(e.toolbar, u === "stacked" && e.toolbarStacked), children: /* @__PURE__ */ n("div", { ref: j, className: e.toolbarContent, children: u === "stacked" ? /* @__PURE__ */ c("div", { className: e.toolbarPanel, children: [
-        /* @__PURE__ */ c("div", { className: e.toolbarRow, children: [
-          /* @__PURE__ */ n("div", { className: e.actions, children: G.map(g) }),
-          /* @__PURE__ */ n("div", { className: e.actions, children: X.map(g) })
-        ] }),
-        /* @__PURE__ */ c("div", { className: e.toolbarRow, children: [
-          /* @__PURE__ */ n("div", { className: e.actions, children: Y.map(g) }),
-          /* @__PURE__ */ n("div", { className: e.toolbarLinkSlot, children: /* @__PURE__ */ n(S, { content: "Insert link", size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !x, children: /* @__PURE__ */ n("button", { type: "button", className: e.toolButton, onMouseDown: (t) => t.preventDefault(), onClick: V, "aria-label": "Insert link", disabled: i, children: /* @__PURE__ */ n(O, { icon: "ap-icon-link", className: e.toolIcon }) }) }) }),
-          Z()
-        ] })
-      ] }) : /* @__PURE__ */ n("div", { className: e.toolbarPanel, children: /* @__PURE__ */ c("div", { className: e.toolbarRow, children: [
-        /* @__PURE__ */ n("div", { className: e.actions, children: G.map(g) }),
-        /* @__PURE__ */ n("div", { className: e.actions, children: X.map(g) }),
-        /* @__PURE__ */ n("div", { className: e.actions, children: Y.map(g) }),
-        /* @__PURE__ */ n("div", { className: e.toolbarLinkSlot, children: /* @__PURE__ */ n(S, { content: "Insert link", size: "sm", theme: "dark", tipSide: "top", tipAlignment: "center", disabled: !x, children: /* @__PURE__ */ n("button", { type: "button", className: e.toolButton, onMouseDown: (t) => t.preventDefault(), onClick: V, "aria-label": "Insert link", disabled: i, children: /* @__PURE__ */ n(O, { icon: "ap-icon-link", className: e.toolIcon }) }) }) }),
-        Z()
-      ] }) }) }) }),
-      /* @__PURE__ */ n("div", { id: B, ref: l, className: e.editor, contentEditable: !i, suppressContentEditableWarning: !0, role: "textbox", "aria-multiline": "true", "aria-label": a || "Rich text editor", "data-placeholder": h, onInput: k, onFocus: () => {
-        z(!0), M();
-      }, onBlur: () => z(!1), onKeyUp: M, onMouseUp: M, style: {
-        minHeight: `${oe * 20}px`,
-        resize: ne ? "vertical" : "none"
-      } }),
-      T && /* @__PURE__ */ n("div", { className: _(e.wordCount, m && N > m && e.wordCountExceeded), children: m ? `${N}/${m}` : N })
-    ] })
-  ] });
-}
-export {
-  st as R,
-  e as s
-};