@alixpartners/ui-components 2.0.2 → 2.1.2

package/dist/components/Checkbox/Checkbox.test.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { d, i as h, r as n, g as c, s as o, v as b, f as a } from "../../vi.ClIskdbk-DlR4jLzR.js";
+import { d, i as h, r as n, g as c, s as o, v as b, f as a } from "../../vi.ClIskdbk-CFW_9sOK.js";
 import l from "./Checkbox.js";
 d("Checkbox", () => {
   d("Rendering", () => {

package/dist/components/Creatable/Creatable.d.ts

@@ -8,6 +8,7 @@ type CreatableProps = {
     value?: string[];
     disabled?: boolean;
     required?: boolean;
+    maxLength?: number;
     searchPlaceholder?: string;
     errorMessage?: string;
     helpText?: string;
@@ -49,5 +50,5 @@ type CreatableProps = {
  * @param {DataAttributes} [props.data-*] - Additional `data-` attributes forwarded to the root element
  * @returns {JSX.Element} The rendered Creatable component
  */
-export default function Creatable({ className, label, options, value, disabled, required, searchPlaceholder, errorMessage, helpText, helpLink, helpLinkText, onChange, onSearch, multiSelect, grouped, align, dropdownMenuClassName, labelTooltip, unselect, selectedOptionsLabel, allOptionsSelectedLabel, caseSensitive, ...props }: CreatableProps): import("react/jsx-runtime").JSX.Element;
+export default function Creatable({ className, label, options, value, disabled, required, maxLength, searchPlaceholder, errorMessage, helpText, helpLink, helpLinkText, onChange, onSearch, multiSelect, grouped, align, dropdownMenuClassName, labelTooltip, unselect, selectedOptionsLabel, allOptionsSelectedLabel, caseSensitive, ...props }: CreatableProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Creatable/Creatable.js

@@ -1,234 +1,232 @@
 import { jsxs as w, jsx as l } from "react/jsx-runtime";
 import { c as C } from "../../clsx-OuTLNxxd.js";
-import { useState as O, useRef as A, useEffect as R, useCallback as le } from "react";
-import W from "../Icon/Icon.js";
+import { useContext as Ie, useState as A, useRef as R, useEffect as V, useCallback as ae } from "react";
+import B from "../Icon/Icon.js";
 import ve from "../Button/Button.js";
 import "../Input/Input.js";
-import ge from "../Tooltip/Tooltip.js";
-import { R as Ne, A as Le, P as ye, C as De } from "../../index-BKtdMA_j.js";
-import '../../assets/Creatable.css';const ke = "Creatable-module__dropdownContainer___y0ptC", xe = "Creatable-module__dropdownLabel___RyuSY", Oe = "Creatable-module__dropdownLabelDisabled___nhYc0", Ae = "Creatable-module__required___g26DB", Re = "Creatable-module__dropdownWrapper___wu-B3", Ve = "Creatable-module__selectedItemsCreatable___P0mME", Ee = "Creatable-module__selectedItem___0LADh", Fe = "Creatable-module__selectedItemLabel___m0LSV", Me = "Creatable-module__removeButton___tjxwh", Se = "Creatable-module__removeIcon___KQKbD", Be = "Creatable-module__singleSelectedCreatableItem___tanxX", We = "Creatable-module__singleSelectedCreatableItemRemoveButton___Qi9Si", Ge = "Creatable-module__dropdownActions___FmHZe", Ke = "Creatable-module__dropdownArrow___SJmKg", je = "Creatable-module__dropdownArrowOpen___T3E0S", Ue = "Creatable-module__dropdownMenu___HEhC3", $e = "Creatable-module__dropdownCreatableSearchContainer___AgXA3", Je = "Creatable-module__disabled___ZIdus", Pe = "Creatable-module__dropdownCreatableError___FYVla", Ye = "Creatable-module__creatableInput___KaKxv", qe = "Creatable-module__optionsList___VZgJf", ze = "Creatable-module__categoryGroup___g8f-g", Qe = "Creatable-module__categoryDivider___QUgR9", Ze = "Creatable-module__categoryLabel___YhGp9", He = "Creatable-module__optionItem___Ys808", Xe = "Creatable-module__optionItemDisabled___jvfGz", Te = "Creatable-module__optionItemFocused___OfIQd", et = "Creatable-module__optionContent___9RCsJ", tt = "Creatable-module__optionLabel___FJfM1", ot = "Creatable-module__tickIcon___VjpDN", lt = "Creatable-module__helpers___GmPY4", rt = "Creatable-module__helpText___89mXU", at = "Creatable-module__helpTextDisabled___shU6E", nt = "Creatable-module__helpLink___IdU0g", st = "Creatable-module__helpLinkDisabled___B8rpy", dt = "Creatable-module__errorMessage___HRKr5", t = {
+import Le from "../Tooltip/Tooltip.js";
+import { DialogContext as Ne } from "../Dialog/Dialog.js";
+import { R as ge, A as De, P as ye, C as xe } from "../../index-BKtdMA_j.js";
+import '../../assets/Creatable.css';const ke = "Creatable-module__dropdownContainer___y0ptC", Oe = "Creatable-module__dropdownLabel___RyuSY", Ae = "Creatable-module__dropdownLabelDisabled___nhYc0", Re = "Creatable-module__required___g26DB", Ve = "Creatable-module__dropdownWrapper___wu-B3", Ee = "Creatable-module__selectedItemsCreatable___P0mME", Fe = "Creatable-module__selectedItem___0LADh", Se = "Creatable-module__selectedItemLabel___m0LSV", Me = "Creatable-module__removeButton___tjxwh", Be = "Creatable-module__removeIcon___KQKbD", Ge = "Creatable-module__singleSelectedCreatableItem___tanxX", Ke = "Creatable-module__singleSelectedCreatableItemRemoveButton___Qi9Si", je = "Creatable-module__dropdownActions___FmHZe", Ue = "Creatable-module__dropdownArrow___SJmKg", We = "Creatable-module__dropdownArrowOpen___T3E0S", $e = "Creatable-module__dropdownMenu___HEhC3", Je = "Creatable-module__dropdownCreatableSearchContainer___AgXA3", Pe = "Creatable-module__disabled___ZIdus", Ye = "Creatable-module__dropdownCreatableError___FYVla", qe = "Creatable-module__creatableInput___KaKxv", ze = "Creatable-module__optionsList___VZgJf", Qe = "Creatable-module__categoryGroup___g8f-g", Ze = "Creatable-module__categoryDivider___QUgR9", He = "Creatable-module__categoryLabel___YhGp9", Te = "Creatable-module__optionItem___Ys808", Xe = "Creatable-module__optionItemDisabled___jvfGz", et = "Creatable-module__optionItemFocused___OfIQd", tt = "Creatable-module__optionContent___9RCsJ", ot = "Creatable-module__optionLabel___FJfM1", lt = "Creatable-module__tickIcon___VjpDN", at = "Creatable-module__helpers___GmPY4", rt = "Creatable-module__helpText___89mXU", nt = "Creatable-module__helpTextDisabled___shU6E", st = "Creatable-module__helpLink___IdU0g", dt = "Creatable-module__helpLinkDisabled___B8rpy", ct = "Creatable-module__errorMessage___HRKr5", t = {
   dropdownContainer: ke,
-  dropdownLabel: xe,
+  dropdownLabel: Oe,
   "label-text": "Creatable-module__label-text___jlV2x",
-  dropdownLabelDisabled: Oe,
+  dropdownLabelDisabled: Ae,
   "label-tooltip-icon": "Creatable-module__label-tooltip-icon___G7Bou",
-  required: Ae,
-  dropdownWrapper: Re,
-  selectedItemsCreatable: Ve,
-  selectedItem: Ee,
-  selectedItemLabel: Fe,
+  required: Re,
+  dropdownWrapper: Ve,
+  selectedItemsCreatable: Ee,
+  selectedItem: Fe,
+  selectedItemLabel: Se,
   removeButton: Me,
-  removeIcon: Se,
-  singleSelectedCreatableItem: Be,
-  singleSelectedCreatableItemRemoveButton: We,
-  dropdownActions: Ge,
-  dropdownArrow: Ke,
-  dropdownArrowOpen: je,
-  dropdownMenu: Ue,
+  removeIcon: Be,
+  singleSelectedCreatableItem: Ge,
+  singleSelectedCreatableItemRemoveButton: Ke,
+  dropdownActions: je,
+  dropdownArrow: Ue,
+  dropdownArrowOpen: We,
+  dropdownMenu: $e,
   "dropdown-container-grouped": "Creatable-module__dropdown-container-grouped___gZle-",
   "dropdown-container-multi-select": "Creatable-module__dropdown-container-multi-select___1U1U4",
-  dropdownCreatableSearchContainer: $e,
-  disabled: Je,
-  dropdownCreatableError: Pe,
-  creatableInput: Ye,
-  optionsList: qe,
-  categoryGroup: ze,
-  categoryDivider: Qe,
-  categoryLabel: Ze,
-  optionItem: He,
+  dropdownCreatableSearchContainer: Je,
+  disabled: Pe,
+  dropdownCreatableError: Ye,
+  creatableInput: qe,
+  optionsList: ze,
+  categoryGroup: Qe,
+  categoryDivider: Ze,
+  categoryLabel: He,
+  optionItem: Te,
   optionItemDisabled: Xe,
-  optionItemFocused: Te,
-  optionContent: et,
-  optionLabel: tt,
-  tickIcon: ot,
-  helpers: lt,
+  optionItemFocused: et,
+  optionContent: tt,
+  optionLabel: ot,
+  tickIcon: lt,
+  helpers: at,
   helpText: rt,
-  helpTextDisabled: at,
-  helpLink: nt,
-  helpLinkDisabled: st,
-  errorMessage: dt
+  helpTextDisabled: nt,
+  helpLink: st,
+  helpLinkDisabled: dt,
+  errorMessage: ct
 };
-function wt({
+function ht({
   className: re,
   label: G,
-  options: D,
-  value: k = [],
+  options: y,
+  value: x = [],
   disabled: v = !1,
-  required: ae = !1,
-  searchPlaceholder: ne = "Search options...",
-  errorMessage: V,
-  helpText: F,
-  helpLink: K,
-  helpLinkText: j,
-  onChange: a,
-  onSearch: x,
+  required: ne = !1,
+  maxLength: se,
+  searchPlaceholder: de = "Search options...",
+  errorMessage: E,
+  helpText: K,
+  helpLink: J,
+  helpLinkText: P,
+  onChange: r,
+  onSearch: k,
   multiSelect: m = !1,
-  grouped: se = !1,
+  grouped: ce = !1,
   align: Y = "left",
-  dropdownMenuClassName: de,
-  labelTooltip: g,
+  dropdownMenuClassName: ie,
+  labelTooltip: L,
   unselect: q = !1,
   selectedOptionsLabel: z = "options selected",
-  allOptionsSelectedLabel: M,
-  caseSensitive: U = !1,
-  ...ce
+  allOptionsSelectedLabel: F,
+  caseSensitive: j = !1,
+  ..._e
 }) {
-  const [u, N] = O(k), [c, h] = O(!1), [Q, b] = O(""), [f, i] = O(-1), Z = A(null), ie = A(null), E = A(null), L = A(null), H = A(null), [_e, ue] = O(0), [pe, me] = O(0), X = A(k);
-  R(() => {
-    JSON.stringify(X.current) !== JSON.stringify(k) && (N(k), X.current = k);
-  }, [k]), R(() => {
-    var r;
-    const e = (r = ie.current) == null ? void 0 : r.getBoundingClientRect().width;
-    e && ue(e);
-  }, []), R(() => {
-    var r;
-    const e = (r = E.current) == null ? void 0 : r.getBoundingClientRect().width;
-    e && me(e);
+  const ue = Ie(Ne), [u, N] = A(x), [c, h] = A(!1), [Q, b] = A(""), [f, i] = A(-1), Z = R(null), O = R(null), g = R(null), H = R(null), [T, pe] = A(0), X = R(x);
+  V(() => {
+    JSON.stringify(X.current) !== JSON.stringify(x) && (N(x), X.current = x);
+  }, [x]), V(() => {
+    var a;
+    const e = (a = O.current) == null ? void 0 : a.getBoundingClientRect().width;
+    e && pe(e);
   }, []);
-  const _ = Q.trim(), p = D.filter((e) => {
-    const r = U ? e.label : e.label.toLowerCase(), o = U ? _ : _.toLowerCase();
-    return r.includes(o);
-  }), S = _ !== "" && !D.find((e) => U ? e.label === _ : e.label.toLowerCase() === _.toLowerCase());
-  R(() => {
-    c && L.current && L.current.focus();
+  const _ = Q.trim(), p = y.filter((e) => {
+    const a = j ? e.label : e.label.toLowerCase(), o = j ? _ : _.toLowerCase();
+    return a.includes(o);
+  }), S = _ !== "" && !y.find((e) => j ? e.label === _ : e.label.toLowerCase() === _.toLowerCase());
+  V(() => {
+    c && g.current && g.current.focus();
   }, [c]);
-  const be = (e) => {
+  const me = (e) => {
     h(e), b(""), i(-1);
-  }, $ = le((e) => {
+  }, U = ae((e) => {
     var o, n;
-    const r = {
+    const a = {
       value: e,
       label: e,
       disabled: !1
     };
-    if (D.push(r), m) {
-      const y = u.includes(e) ? u : [...u, e];
-      N(y), a == null || a(y), (o = L.current) == null || o.focus(), b(""), h(!0), i(-1);
+    if (y.push(a), m) {
+      const D = u.includes(e) ? u : [...u, e];
+      N(D), r == null || r(D), (o = g.current) == null || o.focus(), b(""), h(!0), i(-1);
     } else {
       const d = [e];
-      N(d), a == null || a(d), b(""), (n = E.current) == null || n.focus(), h(!1), i(-1);
+      N(d), r == null || r(d), b(""), (n = O.current) == null || n.focus(), h(!1), i(-1);
     }
-  }, [m, a, D, u]), J = le((e) => {
-    var r, o, n;
+  }, [m, r, y, u]), W = ae((e) => {
+    var a, o, n;
     if (!e.disabled)
       if (m) {
-        const y = u.includes(e.value) ? u.filter((Ie) => Ie !== e.value) : [...u, e.value];
-        N(y), a == null || a(y), h(!0), (r = L.current) == null || r.focus(), b(""), i(-1);
+        const D = u.includes(e.value) ? u.filter((he) => he !== e.value) : [...u, e.value];
+        N(D), r == null || r(D), h(!0), (a = g.current) == null || a.focus(), b(""), i(-1);
       } else if (u.includes(e.value)) {
         if (q) {
           const d = [];
-          N(d), a == null || a(d), (o = E.current) == null || o.focus(), h(!1), b(""), i(-1);
+          N(d), r == null || r(d), (o = O.current) == null || o.focus(), h(!1), b(""), i(-1);
         }
       } else {
         const d = [e.value];
-        N(d), a == null || a(d), (n = E.current) == null || n.focus(), h(!1), b(""), i(-1);
+        N(d), r == null || r(d), (n = O.current) == null || n.focus(), h(!1), b(""), i(-1);
       }
-  }, [m, a, u, q]), fe = (e) => {
-    h(!0), b(e), i(-1), x == null || x(e);
-  }, P = (e) => {
-    h(!0), b(e), i(-1), x == null || x(e);
-  }, T = (e) => {
-    const r = u.filter((o) => o !== e);
-    N(r), a == null || a(r);
+  }, [m, r, u, q]), be = (e) => {
+    h(!0), b(e), i(-1), k == null || k(e);
+  }, $ = (e) => {
+    h(!0), b(e), i(-1), k == null || k(e);
+  }, ee = (e) => {
+    const a = u.filter((o) => o !== e);
+    N(a), r == null || r(a);
   };
-  R(() => {
-    const e = (r) => {
+  V(() => {
+    const e = (a) => {
       if (!c) return;
       const o = p.length + (S ? 1 : 0);
       if (o !== 0)
-        switch (r.key) {
+        switch (a.key) {
           case "ArrowDown":
-            r.preventDefault(), i((n) => n < 0 ? 0 : n < o - 1 ? n + 1 : 0);
+            a.preventDefault(), i((n) => n < 0 ? 0 : n < o - 1 ? n + 1 : 0);
             break;
           case "ArrowUp":
-            r.preventDefault(), i((n) => n < 0 ? o - 1 : n > 0 ? n - 1 : o - 1);
+            a.preventDefault(), i((n) => n < 0 ? o - 1 : n > 0 ? n - 1 : o - 1);
             break;
           case "Enter":
-            if (r.preventDefault(), f >= 0 && f < p.length) {
+            if (a.preventDefault(), f >= 0 && f < p.length) {
               const n = p[f];
-              J(n);
-            } else S && f === p.length && $(_);
+              W(n);
+            } else S && f === p.length && U(_);
             break;
           case "Escape":
-            r.preventDefault(), h(!1), b(""), i(-1);
+            a.preventDefault(), h(!1), b(""), i(-1);
             break;
         }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [f, p, $, J, S, c, _]), R(() => {
+  }, [f, p, U, W, S, c, _]), V(() => {
     if (!c || f < 0) return;
-    const e = H.current, r = e == null ? void 0 : e.querySelector(`[data-option-index="${f}"]`);
-    e && r && r.scrollIntoView({
+    const e = H.current, a = e == null ? void 0 : e.querySelector(`[data-option-index="${f}"]`);
+    e && a && a.scrollIntoView({
       block: "nearest"
     });
   }, [c, f]);
-  const B = u, s = D.filter((e) => B.includes(e.value)), we = !!V, ee = D.filter((e) => !e.disabled), te = ee.length > 0 && ee.every((e) => B.includes(e.value)), Ce = p.reduce((e, r) => {
-    const o = r.category || "default";
-    return e[o] || (e[o] = []), e[o].push(r), e;
-  }, {}), he = p, {
+  const M = u, s = y.filter((e) => M.includes(e.value)), fe = !!E, te = y.filter((e) => !e.disabled), oe = te.length > 0 && te.every((e) => M.includes(e.value)), we = p.reduce((e, a) => {
+    const o = a.category || "default";
+    return e[o] || (e[o] = []), e[o].push(a), e;
+  }, {}), Ce = p, {
     onBlur: I,
-    ...oe
-  } = ce;
-  return /* @__PURE__ */ w("div", { ref: Z, className: C(t.dropdownContainer, se && t["dropdown-container-grouped"], m && t["dropdown-container-multi-select"], re), ...oe, children: [
+    ...le
+  } = _e;
+  return /* @__PURE__ */ w("div", { ref: Z, className: C(t.dropdownContainer, ce && t["dropdown-container-grouped"], m && t["dropdown-container-multi-select"], re), ...le, children: [
     G && /* @__PURE__ */ w("label", { className: C(t.dropdownLabel, v && t.dropdownLabelDisabled), children: [
       /* @__PURE__ */ l("span", { title: G, className: t["label-text"], children: G }),
-      ae && /* @__PURE__ */ l("span", { className: t.required, children: "*" }),
-      g && /* @__PURE__ */ l(ge, { content: g.content, size: g.size, theme: g.theme, tipSide: g.tipSide, tipAlignment: g.tipAlignment, startVisible: g.startVisible, children: /* @__PURE__ */ l(W, { icon: "ap-icon-info", className: t["label-tooltip-icon"] }) })
+      ne && /* @__PURE__ */ l("span", { className: t.required, children: "*" }),
+      L && /* @__PURE__ */ l(Le, { content: L.content, size: L.size, theme: L.theme, tipSide: L.tipSide, tipAlignment: L.tipAlignment, startVisible: L.startVisible, children: /* @__PURE__ */ l(B, { icon: "ap-icon-info", className: t["label-tooltip-icon"] }) })
     ] }),
-    /* @__PURE__ */ l(Ne, { open: c, onOpenChange: be, children: /* @__PURE__ */ w("div", { className: t.dropdownWrapper, children: [
-      /* @__PURE__ */ l(Le, { children: /* @__PURE__ */ w("div", { tabIndex: !m && s.length > 0 ? 0 : -1, ref: E, className: C(t.dropdownCreatableSearchContainer, v && t.disabled, we && t.dropdownCreatableError), onBlur: (e) => {
+    /* @__PURE__ */ l(ge, { open: c, onOpenChange: me, children: /* @__PURE__ */ w("div", { className: t.dropdownWrapper, children: [
+      /* @__PURE__ */ l(De, { children: /* @__PURE__ */ w("div", { tabIndex: !m && s.length > 0 ? 0 : -1, ref: O, className: C(t.dropdownCreatableSearchContainer, v && t.disabled, fe && t.dropdownCreatableError), onBlur: (e) => {
         c || I == null || I(e);
       }, onClick: () => {
         var e;
         if (!m && s.length > 0)
-          return P("");
-        (e = L.current) == null || e.focus();
+          return $("");
+        (e = g.current) == null || e.focus();
       }, onKeyDown: (e) => {
         if (e.key === "Enter" && !m && s.length > 0 && !c)
-          return P("");
-      }, ...oe, children: [
-        s.length > 0 && /* @__PURE__ */ l("div", { className: C(t.selectedItemsCreatable), children: m ? s.length > 3 ? /* @__PURE__ */ l("div", { className: t.selectedItem, children: /* @__PURE__ */ l("span", { className: t.selectedItemLabel, title: te && M ? M : `${s.length} ${z}`, children: te && M ? M : `${s.length} ${z}` }) }) : s.map((e) => /* @__PURE__ */ w("div", { className: t.selectedItem, children: [
+          return $("");
+      }, ...le, children: [
+        s.length > 0 && /* @__PURE__ */ l("div", { className: C(t.selectedItemsCreatable), children: m ? s.length > 3 ? /* @__PURE__ */ l("div", { className: t.selectedItem, children: /* @__PURE__ */ l("span", { className: t.selectedItemLabel, title: oe && F ? F : `${s.length} ${z}`, children: oe && F ? F : `${s.length} ${z}` }) }) : s.map((e) => /* @__PURE__ */ w("div", { className: t.selectedItem, children: [
           /* @__PURE__ */ l("span", { className: t.selectedItemLabel, title: e.label, children: e.label }),
-          /* @__PURE__ */ l("button", { type: "button", className: t.removeButton, onClick: () => T(e.value), disabled: v, children: /* @__PURE__ */ l(W, { icon: "ap-icon-close", className: t.removeIcon }) })
+          /* @__PURE__ */ l("button", { type: "button", className: t.removeButton, onClick: () => ee(e.value), disabled: v, children: /* @__PURE__ */ l(B, { icon: "ap-icon-close", className: t.removeIcon }) })
         ] }, e.value)) : s.length > 0 && /* @__PURE__ */ w("div", { className: t.singleSelectedCreatableItem, children: [
           /* @__PURE__ */ l("span", { className: t.selectedItemLabel, title: s[0].label, children: s[0].label }),
-          /* @__PURE__ */ l(ve, { type: "tertiary", variant: "default", size: "sm", onClick: () => T(s[0].value), disabled: v, icon: "ap-icon-add-filled", className: t.singleSelectedCreatableItemRemoveButton })
+          /* @__PURE__ */ l(ve, { type: "tertiary", variant: "default", size: "sm", onClick: () => ee(s[0].value), disabled: v, icon: "ap-icon-add-filled", className: t.singleSelectedCreatableItemRemoveButton })
         ] }) }),
-        (m || !s.length) && /* @__PURE__ */ l("input", { ref: L, placeholder: s.length > 0 ? "" : ne, value: Q, onChange: (e) => fe(e.target.value), onFocus: (e) => P(e.target.value), onBlur: (e) => {
+        (m || !s.length) && /* @__PURE__ */ l("input", { maxLength: se, ref: g, placeholder: s.length > 0 ? "" : de, value: Q, onChange: (e) => be(e.target.value), onFocus: (e) => $(e.target.value), onBlur: (e) => {
           c || I == null || I(e);
         }, disabled: v, className: t.creatableInput }),
-        /* @__PURE__ */ l("div", { className: t.dropdownActions, children: /* @__PURE__ */ l(W, { icon: "ap-icon-expand-more", className: C(t.dropdownArrow, c && t.dropdownArrowOpen) }) })
+        /* @__PURE__ */ l("div", { className: t.dropdownActions, children: /* @__PURE__ */ l(B, { icon: "ap-icon-expand-more", className: C(t.dropdownArrow, c && t.dropdownArrowOpen) }) })
       ] }) }),
-      /* @__PURE__ */ l(ye, { children: /* @__PURE__ */ l(De, { onOpenAutoFocus: (e) => {
+      /* @__PURE__ */ l(ye, { container: ue, children: /* @__PURE__ */ l(xe, { onOpenAutoFocus: (e) => {
         e.preventDefault();
       }, align: Y === "right" ? "end" : "start", side: "bottom", avoidCollisions: !0, sideOffset: 6, collisionPadding: 8, style: {
-        minWidth: _e,
+        width: T,
         zIndex: 9999
       }, onInteractOutside: (e) => {
         var o;
-        e.target === L.current && e.preventDefault(), ((o = Z.current) == null ? void 0 : o.contains(e.target)) || I == null || I(e);
+        e.target === g.current && e.preventDefault(), ((o = Z.current) == null ? void 0 : o.contains(e.target)) || I == null || I(e);
       }, children: c && /* @__PURE__ */ l("div", { style: {
-        minWidth: pe
-      }, className: C(t.dropdownMenu, de, Y === "right" && t.dropdownMenuRight), children: /* @__PURE__ */ w("div", { ref: H, className: t.optionsList, "data-dropdown-options-list": !0, children: [
-        p.length > 0 ? Object.entries(Ce).map(([e, r]) => /* @__PURE__ */ w("div", { className: t.categoryGroup, children: [
+        width: T
+      }, className: C(t.dropdownMenu, ie, Y === "right" && t.dropdownMenuRight), children: /* @__PURE__ */ w("div", { ref: H, className: t.optionsList, "data-dropdown-options-list": !0, children: [
+        p.length > 0 ? Object.entries(we).map(([e, a]) => /* @__PURE__ */ w("div", { className: t.categoryGroup, children: [
           e !== "default" && /* @__PURE__ */ l("div", { className: t.categoryDivider, children: /* @__PURE__ */ l("span", { className: t.categoryLabel, children: e }) }),
-          r.map((o) => {
-            const n = he.indexOf(o), d = p.find((y) => y.value === o.value);
-            return /* @__PURE__ */ l("button", { title: (d == null ? void 0 : d.label) || o.label, type: "button", className: C(t.optionItem, B.includes(o.value) && t.optionItemSelected, o.disabled && t.optionItemDisabled, n === f && t.optionItemFocused), onClick: () => J(o), disabled: o.disabled, "data-dropdown-option-item": !0, "data-option-index": n, children: /* @__PURE__ */ w("div", { className: t.optionContent, children: [
+          a.map((o) => {
+            const n = Ce.indexOf(o), d = p.find((D) => D.value === o.value);
+            return /* @__PURE__ */ l("button", { title: (d == null ? void 0 : d.label) || o.label, type: "button", className: C(t.optionItem, M.includes(o.value) && t.optionItemSelected, o.disabled && t.optionItemDisabled, n === f && t.optionItemFocused), onClick: () => W(o), disabled: o.disabled, "data-dropdown-option-item": !0, "data-option-index": n, children: /* @__PURE__ */ w("div", { className: t.optionContent, children: [
               /* @__PURE__ */ l("span", { className: t.optionLabel, children: o.label }),
-              B.includes(o.value) && /* @__PURE__ */ l(W, { icon: "ap-icon-check", className: t.tickIcon })
+              M.includes(o.value) && /* @__PURE__ */ l(B, { icon: "ap-icon-check", className: t.tickIcon })
             ] }) }, o.value);
           })
         ] }, e)) : null,
-        S && /* @__PURE__ */ l("button", { type: "button", className: C(t.optionItem, t.optionItemCreatable, f === p.length && t.optionItemFocused), title: _ ? `Create "${_}"` : "Create new option", "data-option-index": p.length, onClick: () => $(_), children: /* @__PURE__ */ l("div", { className: t.optionContent, children: /* @__PURE__ */ l("span", { className: t.optionLabel, children: _ ? `Create "${_}"` : "Create new option" }) }) })
+        S && /* @__PURE__ */ l("button", { type: "button", className: C(t.optionItem, t.optionItemCreatable, f === p.length && t.optionItemFocused), title: _ ? `Create "${_}"` : "Create new option", "data-option-index": p.length, onClick: () => U(_), children: /* @__PURE__ */ l("div", { className: t.optionContent, children: /* @__PURE__ */ l("span", { className: t.optionLabel, children: _ ? `Create "${_}"` : "Create new option" }) }) })
       ] }) }) }) })
     ] }) }),
-    (V || F || K && j) && /* @__PURE__ */ w("div", { className: t.helpers, children: [
-      V ? /* @__PURE__ */ l("span", { title: V, className: t.errorMessage, children: V }) : F && /* @__PURE__ */ l("span", { title: F, className: C(t.helpText, v && t.helpTextDisabled), children: F }),
-      K && j && /* @__PURE__ */ l("a", { href: K, className: C(t.helpLink, v && t.helpLinkDisabled), target: "_blank", rel: "noopener noreferrer", children: j })
+    /* @__PURE__ */ w("div", { className: t.helpers, children: [
+      E ? /* @__PURE__ */ l("span", { title: E, className: t.errorMessage, children: E }) : K && /* @__PURE__ */ l("span", { title: K, className: C(t.helpText, v && t.helpTextDisabled), children: K }),
+      J && P && /* @__PURE__ */ l("a", { href: J, className: C(t.helpLink, v && t.helpLinkDisabled), target: "_blank", rel: "noopener noreferrer", children: P })
     ] })
   ] });
 }
 export {
-  wt as default
+  ht as default
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -1,5 +1,6 @@
 import { DataAttributes } from '../../types/data-attributes';
 import { ApIcon } from '../../assets/ap-icons-types';
+export declare const DialogContext: import('react').Context<HTMLElement | null>;
 /**
  * Dialog component that displays modal content with customizable actions and optional illustration.
  * Provides a native HTML dialog element with backdrop support, confirmation/cancellation actions, and accessibility features.

package/dist/components/Dialog/Dialog.js

@@ -1,5 +1,5 @@
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { useRef as h, useEffect as I } from "react";
+import { createContext as I, useRef as h, useEffect as P } from "react";
 import f from "../Button/Button.js";
 import H from "../Icon/Icon.js";
 import '../../assets/Dialog.css';const J = "Dialog-module__dialog___r4ljx", a = {
@@ -11,38 +11,38 @@ import '../../assets/Dialog.css';const J = "Dialog-module__dialog___r4ljx", a =
   "dialog-buttons": "Dialog-module__dialog-buttons___x-v2M",
   "dialog-close-button": "Dialog-module__dialog-close-button___-PzEz",
   "dialog-close-button-icon": "Dialog-module__dialog-close-button-icon___BeGg2"
-};
-function q({
+}, K = I(null);
+function F({
   children: g,
   isOpen: d,
   onClose: l,
   title: v,
-  description: b,
+  description: D,
   illustrationSrc: s,
   confirmButtonText: _,
-  cancelButtonText: u,
-  confirmButtonType: D = "primary",
+  cancelButtonText: n,
+  confirmButtonType: b = "primary",
   cancelButtonType: p = "primary",
   confirmButtonVariant: N = "default",
   cancelButtonVariant: k = "cancel",
-  confirmButtonSize: y = "md",
-  cancelButtonSize: z = "md",
-  confirmButtonIcon: j,
-  cancelButtonIcon: x,
+  confirmButtonSize: x = "md",
+  cancelButtonSize: y = "md",
+  confirmButtonIcon: z,
+  cancelButtonIcon: j,
   onConfirm: e,
   onCancel: r,
   className: M,
   ...R
 }) {
   const w = h(null), t = h(null);
-  I(() => {
+  P(() => {
     var i, m;
     d !== void 0 && (d ? (i = t.current) == null || i.showModal() : (m = t.current) == null || m.close());
   }, [d]);
   const A = () => {
     var i;
     (i = t.current) == null || i.showModal();
-  }, n = () => {
+  }, u = () => {
     var i;
     l == null || l(), d === void 0 && ((i = t.current) == null || i.close());
   }, E = () => {
@@ -54,20 +54,21 @@ function q({
   };
   return /* @__PURE__ */ c("div", { className: M, ...R, children: [
     g && /* @__PURE__ */ o("div", { ref: w, onClick: A, children: g }),
-    /* @__PURE__ */ c("dialog", { className: a.dialog, ref: t, onClose: n, children: [
-      l && /* @__PURE__ */ o("button", { className: a["dialog-close-button"], onClick: n, children: /* @__PURE__ */ o(H, { className: a["dialog-close-button-icon"], icon: "ap-icon-close" }) }),
+    /* @__PURE__ */ o("dialog", { className: a.dialog, ref: t, onClose: u, children: /* @__PURE__ */ c(K.Provider, { value: t.current, children: [
+      l && /* @__PURE__ */ o("button", { className: a["dialog-close-button"], onClick: u, children: /* @__PURE__ */ o(H, { className: a["dialog-close-button-icon"], icon: "ap-icon-close" }) }),
       s && /* @__PURE__ */ o("div", { className: a["dialog-illustration"], children: /* @__PURE__ */ o("img", { src: s, alt: "Dialog illustration" }) }),
       /* @__PURE__ */ c("div", { className: a["dialog-content"], children: [
         /* @__PURE__ */ o("h2", { className: a["dialog-title"], children: v }),
-        /* @__PURE__ */ o("div", { className: a["dialog-description"], children: b })
+        /* @__PURE__ */ o("div", { className: a["dialog-description"], children: D })
       ] }),
       /* @__PURE__ */ c("div", { className: a["dialog-buttons"], children: [
-        u && /* @__PURE__ */ o(f, { type: p, variant: k, size: z, onClick: G, icon: x, children: u }),
-        _ && /* @__PURE__ */ o(f, { type: D, variant: N, size: y, onClick: E, icon: j, children: _ })
+        n && /* @__PURE__ */ o(f, { type: p, variant: k, size: y, onClick: G, icon: j, children: n }),
+        _ && /* @__PURE__ */ o(f, { type: b, variant: N, size: x, onClick: E, icon: z, children: _ })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 export {
-  q as default
+  K as DialogContext,
+  F as default
 };