@mittwald/flow-react-components 0.1.0-alpha.143 → 0.1.0-alpha.145

package/dist/{Accordion-QhhkJhTO.js → Accordion-S70SYWwS.js}

@@ -7,10 +7,10 @@ import { P as N } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
 import { d } from "./dynamic-ClpUSmEt.js";
-import { B as w } from "./Button-BS1F0zPs.js";
+import { B as w } from "./Button-Bs4J6es6.js";
 import "@tabler/icons-react";
-import "./Icon-D4bkU_pz.js";
-import { I as y } from "./IconChevronDown-HLDPe1kj.js";
+import "./Icon-CvhSELPq.js";
+import { I as y } from "./IconChevronDown-BjpRbARt.js";
 import { TunnelProvider as B, TunnelExit as C } from "@mittwald/react-tunnel";
 import { A as P } from "./Activity-CmfZpgOM.js";
 const A = "flow--accordion", b = "flow--accordion--header", g = "flow--accordion--header-button", D = "flow--accordion--content", T = "flow--accordion--content-inner", H = "flow--accordion--chevron", L = "flow--accordion--expanded", n = {

package/dist/Accordion.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as r } from "./Accordion-QhhkJhTO.js";
+import { A as r } from "./Accordion-S70SYWwS.js";
 export {
   r as Accordion,
   r as default

package/dist/Action-BW80BkOP.js

@@ -0,0 +1,291 @@
+"use client"
+/* */
+var k = Object.defineProperty;
+var M = (n, t, e) => t in n ? k(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var r = (n, t, e) => (M(n, typeof t != "symbol" ? t + "" : t, e), e);
+import g, { createContext as O, useRef as I, useContext as w } from "react";
+import { u as E, O as D } from "./context-Bdh6m_8S.js";
+import T from "invariant";
+import { makeObservable as N, observable as R, action as V, computed as $ } from "mobx";
+import { u as b } from "./useSelector-DpU7_HMO.js";
+import { a as G, g as L, u as U } from "./getActionGroupSlot-Do-bk4GU.js";
+import "./propsContext-DzAKlmhS.js";
+import { P as j } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { d as l } from "./dynamic-ClpUSmEt.js";
+import { u as q } from "./slotContext-DoCFkzCA.js";
+const A = O(void 0), z = A.Provider, v = (n) => new Promise((t) => setTimeout(t, n)), C = {
+  pending: 1e3,
+  succeeded: 1500,
+  failed: 2e3
+};
+class x {
+  constructor() {
+    r(this, "showFeedback");
+    r(this, "state", "isIdle");
+    r(this, "setPendingTimeout");
+    r(this, "error");
+    r(this, "isAsync", !1);
+    N(this, {
+      state: R,
+      updateState: V,
+      isBusy: $
+    });
+  }
+  static useNew() {
+    return I(new x()).current;
+  }
+  updateState(t) {
+    this.state = t;
+  }
+  useValue() {
+    return b(() => this.state, [this]);
+  }
+  useIsBusy() {
+    return b(() => this.isBusy, [this]);
+  }
+  get isBusy() {
+    return this.state !== "isIdle";
+  }
+  onAsyncStart() {
+    this.isAsync = !0, this.updateState("isExecuting"), this.setPendingTimeout = window.setTimeout(
+      () => this.startPending(),
+      C.pending
+    );
+  }
+  async onSucceeded() {
+    await this.onDone();
+  }
+  async onFailed(t) {
+    this.error = t ?? new Error("Unknown error"), await this.onDone();
+  }
+  withFeedback(t) {
+    return this.showFeedback = t, this;
+  }
+  async startFailedFeedback() {
+    this.updateState("isFailed"), await v(C.failed), this.resetAfterDone();
+  }
+  async startSucceededFeedback() {
+    this.updateState("isSucceeded"), await v(C.succeeded), this.resetAfterDone();
+  }
+  resetAfterDone() {
+    this.updateState("isIdle"), this.isAsync = !1, this.error = void 0;
+  }
+  async onDone() {
+    this.setPendingTimeout && window.clearTimeout(this.setPendingTimeout), this.error ? await this.startFailedFeedback() : this.showFeedback !== !1 && (this.showFeedback || this.isAsync) ? await this.startSucceededFeedback() : this.resetAfterDone();
+  }
+  startPending() {
+    this.updateState("isPending");
+  }
+}
+const B = (n) => (...t) => {
+  const e = [...n], o = e.shift();
+  if (o) {
+    const s = o(...t), a = () => e.length === 0 ? s : B(e)(...t);
+    return s instanceof Promise ? s.then(a) : a();
+  }
+}, f = () => {
+}, H = (n, t = {}) => {
+  const {
+    onSync: e = f,
+    onAsync: o = f,
+    then: s = f,
+    catch: a = f,
+    finally: c = f
+  } = t;
+  try {
+    const i = n();
+    return i instanceof Promise ? (o(), i.then(s).catch(a).finally(c)) : (e(), s(i), c(), i);
+  } catch (i) {
+    e(), a(i), c();
+  }
+}, P = () => {
+};
+function J(n) {
+  var i, h, d;
+  if (n.needsConfirmation)
+    return n.confirmationModalController.open;
+  const t = (p) => typeof p == "string" ? n.getOverlayController(p) : p, {
+    action: e,
+    toggleOverlay: o,
+    closeOverlay: s,
+    openOverlay: a
+  } = n.actionProps;
+  return (e || (a ? (i = t(a)) == null ? void 0 : i.open : s ? (h = t(s)) == null ? void 0 : h.close : o ? (d = t(o)) == null ? void 0 : d.toggle : P)) ?? P;
+}
+class S {
+  constructor(t) {
+    r(this, "actions", []);
+    r(this, "baseAction");
+    this.baseAction = t;
+  }
+  addAction(t) {
+    this.actions.push(t);
+  }
+  async executeBatch(t) {
+    if (this.actions.length === 0)
+      return;
+    const e = this.actions[this.actions.length - 1].actionProps.showFeedback, o = this.baseAction.state.withFeedback(
+      this.baseAction.needsConfirmation ? !1 : e
+    ), s = this.actions.map((i) => J(i)), a = B(s);
+    let c;
+    if (await H(() => a(...t), {
+      onAsync: () => o.onAsyncStart(),
+      then: () => o.onSucceeded(),
+      catch: (i) => {
+        o.onFailed(i), c = i;
+      }
+    }), c)
+      throw c;
+  }
+}
+class K {
+  constructor(t) {
+    r(this, "action");
+    r(this, "execute", (...t) => {
+      const e = this.getBatchedActions();
+      (async () => {
+        for (const s of e)
+          await s.executeBatch(t);
+      })().catch((s) => console.error(s));
+    });
+    r(this, "getBatchedActions", () => {
+      let t = this.action;
+      const e = [];
+      let o = new S(
+        this.action
+      ), s = 0;
+      for (; t; ) {
+        const { action: a, break: c, skip: i } = t.actionProps;
+        if (t.needsConfirmation) {
+          o.addAction(t);
+          break;
+        }
+        if (i) {
+          s = i === !0 ? 1 : i, t = t.parentAction;
+          continue;
+        }
+        if (s > 0) {
+          t = t.parentAction, s--;
+          continue;
+        }
+        if (c)
+          break;
+        a || (e.push(o), o = new S(this.action)), o.addAction(t), t = t.parentAction;
+      }
+      return e.push(o), e;
+    });
+    this.action = t;
+  }
+}
+class u {
+  constructor(t) {
+    r(this, "state");
+    r(this, "needsConfirmation");
+    r(this, "actionProps");
+    r(this, "parentAction");
+    r(this, "confirmationModalController");
+    r(this, "overlayContext");
+    r(this, "execute", (...t) => {
+      new K(this).execute(...t);
+    });
+    const {
+      actionProps: e,
+      needsConfirmation: o,
+      parentAction: s,
+      overlayContext: a,
+      confirmationModalController: c,
+      state: i
+    } = t;
+    this.actionProps = e, this.parentAction = s, this.confirmationModalController = c, this.needsConfirmation = o, this.overlayContext = a, this.state = i;
+  }
+  static useNew(t, e = {}) {
+    const o = w(A), s = E(), a = D.useNew(), c = x.useNew();
+    return new u({
+      parentAction: o,
+      overlayContext: s,
+      confirmationModalController: a,
+      needsConfirmation: !1,
+      actionProps: t,
+      state: c,
+      ...e
+    });
+  }
+  static use() {
+    const t = w(A);
+    return T(!!t, "Action context is not defined"), G.useRegisterState(t.state), t;
+  }
+  static useConfirmationAction() {
+    const t = u.use();
+    return new u({
+      actionProps: t.actionProps,
+      confirmationModalController: t.confirmationModalController,
+      overlayContext: t.overlayContext,
+      state: t.state,
+      needsConfirmation: !1,
+      parentAction: u.useNew(
+        {
+          closeOverlay: t.confirmationModalController
+        },
+        {
+          parentAction: t.parentAction
+        }
+      )
+    });
+  }
+  getOverlayController(t) {
+    const e = (o) => o === void 0 ? void 0 : o ? this.overlayContext[t] : void 0;
+    return e(this.actionProps.openOverlay) ?? e(this.actionProps.closeOverlay) ?? e(this.actionProps.toggleOverlay);
+  }
+}
+const Q = (n) => q()[n], y = (n) => Q("Modal") === "actionConfirm" ? L(n) : void 0, m = (n) => {
+  const t = u.use(), e = t.state.useValue(), o = y(n) === "primary", s = t.confirmationModalController.useIsOpen();
+  return t.needsConfirmation && s && !o ? "isIdle" : e;
+}, F = {
+  onPress: l((n) => {
+    const t = u.use(), e = u.useConfirmationAction(), o = y(n) === "primary";
+    return y(n) === "abort" ? t.confirmationModalController.close : o ? e.execute : t.execute;
+  }),
+  isPending: l((n) => m(n) === "isPending"),
+  isSucceeded: l(
+    (n) => m(n) === "isSucceeded"
+  ),
+  isFailed: l((n) => m(n) === "isFailed"),
+  "aria-disabled": l((n) => {
+    const t = m(n), e = U().useIsBusy();
+    return t === "isExecuting" || e;
+  })
+}, ct = (n) => {
+  const { children: t, actionModel: e, ...o } = n, s = u.useNew(o), a = e ?? s, c = {
+    Button: F,
+    Link: {
+      onPress: l(() => u.use().execute)
+    },
+    MenuItem: {
+      onAction: l(() => u.use().execute)
+    },
+    Modal: {
+      slot: l((i) => {
+        const { slot: h } = i, d = u.use();
+        return d.needsConfirmation = h === "actionConfirm", h;
+      }),
+      isDismissable: l((i) => {
+        const d = u.use().state.useValue();
+        return d === "isExecuting" || d === "isPending" ? !1 : i.isDismissable;
+      }),
+      controller: l(() => {
+        const i = u.use();
+        return i.needsConfirmation ? i.confirmationModalController : i.getOverlayController("Modal");
+      }),
+      ActionGroup: {
+        Button: F
+      }
+    }
+  };
+  return /* @__PURE__ */ g.createElement(z, { value: a }, /* @__PURE__ */ g.createElement(j, { props: c, mergeInParentContext: !0 }, t));
+};
+export {
+  ct as A,
+  u as a
+};

package/dist/Action.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as t } from "./Action-C4Ncwjzf.js";
+import { A as t } from "./Action-BW80BkOP.js";
 export {
   t as Action,
   t as default

package/dist/ActionGroup.js

@@ -7,7 +7,7 @@ import "@react-aria/utils";
 import "remeda";
 import { d as e } from "./dynamic-ClpUSmEt.js";
 import i from "clsx";
-import { f as g } from "./flowComponent-CPKCCJEg.js";
+import { f as g } from "./flowComponent-CWmvUeHT.js";
 import { TunnelProvider as E, TunnelExit as n } from "@mittwald/react-tunnel";
 import { A as C, g as a } from "./getActionGroupSlot-Do-bk4GU.js";
 const G = "flow--action-group--action-group-container", v = "flow--action-group", x = "flow--action-group--primary", N = "flow--action-group--secondary", P = "flow--action-group--abort", r = {

package/dist/Avatar.js

@@ -9,7 +9,7 @@ import "./propsContext-DzAKlmhS.js";
 import "remeda";
 import { hash as w } from "object-code";
 import { deepForEach as z } from "react-children-utilities";
-import { f as d } from "./flowComponent-CPKCCJEg.js";
+import { f as d } from "./flowComponent-CWmvUeHT.js";
 const C = "flow--avatar", h = "flow--avatar--icon", x = "flow--avatar--initials", r = {
   avatar: C,
   icon: h,

package/dist/Breadcrumb.js

@@ -4,8 +4,8 @@ import r from "react";
 import * as m from "react-aria-components";
 import a from "clsx";
 import "@tabler/icons-react";
-import "./Icon-D4bkU_pz.js";
-import { I as b } from "./IconChevronRight-DmCZeDFh.js";
+import "./Icon-CvhSELPq.js";
+import { I as b } from "./IconChevronRight-BKNi_Ug_.js";
 import "./propsContext-DzAKlmhS.js";
 import { P as d } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";

package/dist/{Button-BS1F0zPs.js → Button-Bs4J6es6.js}

@@ -9,12 +9,12 @@ import "@react-aria/utils";
 import "./propsContext-DzAKlmhS.js";
 import "remeda";
 import "@tabler/icons-react";
-import "./Icon-D4bkU_pz.js";
-import { I as h, a as I } from "./IconSucceeded-KKiDIenP.js";
+import "./Icon-CvhSELPq.js";
+import { I as h, a as I } from "./IconSucceeded-YONbnUQb.js";
 import { W as f } from "./Wrap-DGT1h1o3.js";
-import { T as N } from "./Text-D6e-S6em.js";
-import { f as B } from "./flowComponent-CPKCCJEg.js";
-import { L as k } from "./LoadingSpinner-CoSM7GIL.js";
+import { T as N } from "./Text-BgxTAtk1.js";
+import { f as B } from "./flowComponent-CWmvUeHT.js";
+import { L as k } from "./LoadingSpinner-bd5Is2yg.js";
 import { useLocalizedStringFormatter as A } from "react-aria";
 import { useLiveRegion as D } from "@chakra-ui/live-region";
 const T = "flow--button", z = "flow--button--content", L = "flow--button--state-icon", R = "flow--button--avatar", K = "flow--button--icon", U = "flow--button--text", W = "flow--button--counter-badge", $ = "flow--button--is-succeeded", j = "flow--button--is-failed", q = "flow--button--is-pending", G = "flow--button--plain", H = "flow--button--primary", J = "flow--button--solid", M = "flow--button--aria-disabled", O = "flow--button--accent", Q = "flow--button--danger", V = "flow--button--secondary", X = "flow--button--dark", Y = "flow--button--light", Z = "flow--button--soft", t = {

package/dist/Button.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { B as o } from "./Button-BS1F0zPs.js";
+import { B as o } from "./Button-Bs4J6es6.js";
 export {
   o as Button,
   o as default

package/dist/{Checkbox-CD6v6jqo.js → Checkbox-zg7icNVe.js}

@@ -4,15 +4,15 @@ import e from "react";
 import * as i from "react-aria-components";
 import p from "clsx";
 import "@tabler/icons-react";
-import "./Icon-D4bkU_pz.js";
-import { I as x, a as f } from "./IconCheckboxEmpty-DQLeOSmS.js";
-import { I as h } from "./IconCheckboxIndeterminate-DoNQre-9.js";
+import "./Icon-CvhSELPq.js";
+import { I as x, a as f } from "./IconCheckboxEmpty-CzAVypP3.js";
+import { I as h } from "./IconCheckboxIndeterminate-CKiaFL3c.js";
 import { C } from "./ClearPropsContext-CUvsbMn8.js";
 import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as k } from "./flowComponent-CPKCCJEg.js";
+import { f as k } from "./flowComponent-CWmvUeHT.js";
 const b = "flow--checkbox", E = "flow--checkbox--icon", o = {
   checkbox: b,
   icon: E

package/dist/Checkbox.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as a } from "./Checkbox-CD6v6jqo.js";
+import { C as a } from "./Checkbox-zg7icNVe.js";
 export {
   a as Checkbox,
   a as default

package/dist/{CheckboxButton-I0WYBLv2.js → CheckboxButton-CbLlDhsH.js}

@@ -7,8 +7,8 @@ import { P as b } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "./propsContext-DzAKlmhS.js";
 import "remeda";
-import { C as x } from "./Checkbox-CD6v6jqo.js";
-import { f } from "./flowComponent-CPKCCJEg.js";
+import { C as x } from "./Checkbox-zg7icNVe.js";
+import { f } from "./flowComponent-CWmvUeHT.js";
 const C = "flow--checkbox-button", i = "flow--checkbox-button--label", h = "flow--checkbox-button--content", t = {
   checkboxButton: C,
   label: i,

package/dist/CheckboxButton.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as t } from "./CheckboxButton-I0WYBLv2.js";
+import { C as t } from "./CheckboxButton-CbLlDhsH.js";
 export {
   t as CheckboxButton,
   t as default

package/dist/CheckboxGroup.js

@@ -7,13 +7,13 @@ import "./propsContext-DzAKlmhS.js";
 import { P as h } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-import { F as E } from "./FieldError-D_VRyiJG.js";
-import { C as k } from "./CheckboxButton-I0WYBLv2.js";
+import { F as E } from "./FieldError-eiEmcuuK.js";
+import { C as k } from "./CheckboxButton-CbLlDhsH.js";
 import { TunnelProvider as C, TunnelExit as r } from "@mittwald/react-tunnel";
 import { s as o } from "./FormField.module-DHK6nIcD.js";
 import { C as N } from "./ColumnLayout-FMONjI17.js";
 import { d as F } from "./deepFindOfType-6pG0fH7S.js";
-import { f as G } from "./flowComponent-CPKCCJEg.js";
+import { f as G } from "./flowComponent-CWmvUeHT.js";
 const P = "flow--checkbox-group", s = {
   checkboxGroup: P
 }, j = G("CheckboxGroup", (l) => {

package/dist/{Content-DlB-BYko.js → Content-arM8nm8H.js}

@@ -6,7 +6,7 @@ import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as l } from "./flowComponent-CPKCCJEg.js";
+import { f as l } from "./flowComponent-CWmvUeHT.js";
 import { W as s } from "./Wrap-DGT1h1o3.js";
 import { A as f } from "./Activity-CmfZpgOM.js";
 const W = l("Content", (e) => {

package/dist/Content.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as o } from "./Content-DlB-BYko.js";
+import { C as o } from "./Content-arM8nm8H.js";
 export {
   o as Content,
   o as default

package/dist/ContextMenu.js

@@ -1,8 +1,8 @@
 "use client"
 /* */
-import { C as t } from "./ContextMenuTrigger-DjZx2IST.js";
-import { a } from "./ContextMenuTrigger-DjZx2IST.js";
-import { M as n } from "./MenuItem-Dny58Rqq.js";
+import { C as t } from "./ContextMenuTrigger-Cm0Tlmv1.js";
+import { a } from "./ContextMenuTrigger-Cm0Tlmv1.js";
+import { M as n } from "./MenuItem-CCEquV9i.js";
 export {
   t as ContextMenu,
   a as ContextMenuTrigger,

package/dist/ContextMenuTrigger-Cm0Tlmv1.js

@@ -0,0 +1,83 @@
+"use client"
+/* */
+import e from "react";
+import * as a from "react-aria-components";
+import { f as g } from "./flowComponent-CWmvUeHT.js";
+import { P as d } from "./Popover-DrXvRfAg.js";
+import "mobx";
+import { u as P } from "./useOverlayController-C88Gnnhi.js";
+import { C as E } from "./ClearPropsContext-CUvsbMn8.js";
+import { P as O } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import { O as T } from "./OverlayContextProvider-BBz2Hde8.js";
+import { A } from "./Action-BW80BkOP.js";
+import { O as h } from "./OverlayTrigger-CZdXqASS.js";
+const w = "flow--context-menu", F = "flow--context-menu--popover", s = {
+  contextMenu: w,
+  popover: F
+}, G = g("ContextMenu", (t) => {
+  const {
+    children: r,
+    onAction: n,
+    selectionMode: o,
+    selectedKeys: c,
+    defaultSelectedKeys: i,
+    disabledKeys: m,
+    onSelectionChange: p,
+    refProp: u,
+    controller: C,
+    ...v
+  } = t, x = P("ContextMenu", {
+    reuseControllerFromContext: !0
+  }), l = C ?? x, f = o === "navigation" ? "single" : o, y = {
+    MenuItem: {
+      selectionVariant: o === "navigation" ? "navigation" : "control"
+    }
+  }, M = o === "single" ? "ContextMenu" : void 0;
+  return /* @__PURE__ */ e.createElement(E, null, /* @__PURE__ */ e.createElement(
+    d,
+    {
+      ...v,
+      className: s.popover,
+      controller: l
+    },
+    /* @__PURE__ */ e.createElement(
+      T,
+      {
+        type: "ContextMenu",
+        controller: l
+      },
+      /* @__PURE__ */ e.createElement(
+        a.Menu,
+        {
+          className: s.contextMenu,
+          onAction: n,
+          selectionMode: f,
+          selectedKeys: c,
+          defaultSelectedKeys: i,
+          disabledKeys: m,
+          onSelectionChange: p,
+          ref: u
+        },
+        /* @__PURE__ */ e.createElement(O, { props: y }, /* @__PURE__ */ e.createElement(A, { closeOverlay: M }, r))
+      )
+    )
+  ));
+}), H = (t) => {
+  const { children: r, ...n } = t;
+  return /* @__PURE__ */ e.createElement(
+    h,
+    {
+      overlayType: "ContextMenu",
+      ...n,
+      component: a.MenuTrigger
+    },
+    r
+  );
+};
+export {
+  G as C,
+  H as a
+};

package/dist/ContextualHelp.js

@@ -1,47 +1,64 @@
 "use client"
 /* */
 import t from "react";
-import { P as l } from "./Popover-B-COTLld.js";
-import * as i from "react-aria-components";
+import { P as s } from "./Popover-DrXvRfAg.js";
+import * as c from "react-aria-components";
 import "mobx";
-import "./useOverlayController-CGKumeGL.js";
+import { u } from "./useOverlayController-C88Gnnhi.js";
 import "./propsContext-DzAKlmhS.js";
-import { P as n } from "./PropsContextProvider-C6Z4XGp6.js";
+import { P as l } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-import { O as m } from "./OverlayTrigger-DbjMkqKf.js";
-import { useLocalizedStringFormatter as p } from "react-aria";
+import "./context-Bdh6m_8S.js";
+import { f } from "./flowComponent-CWmvUeHT.js";
+import { O as x } from "./OverlayTrigger-CZdXqASS.js";
+import { useLocalizedStringFormatter as g } from "react-aria";
 import "@tabler/icons-react";
-import "./Icon-D4bkU_pz.js";
-import { I as c } from "./IconInfo-Dzy8qZId.js";
-const s = "flow--contextual-help", u = {
-  contextualHelp: s
-}, w = (e) => {
-  const { children: r, ...o } = e, a = {
+import "./Icon-CvhSELPq.js";
+import { I as C } from "./IconInfo-DDhh409U.js";
+const H = "flow--contextual-help", d = {
+  contextualHelp: H
+}, A = f("ContextualHelp", (o) => {
+  const {
+    children: e,
+    controller: r,
+    refProp: a,
+    ...n
+  } = o, m = u("ContextualHelp", {
+    reuseControllerFromContext: !0
+  }), p = r ?? m, i = {
     Heading: {
       level: 5
     }
   };
-  return /* @__PURE__ */ t.createElement(l, { withTip: !0, ...o }, /* @__PURE__ */ t.createElement(n, { props: a }, /* @__PURE__ */ t.createElement("div", { className: u.contextualHelp }, r)));
-}, f = { "de-DE": {
+  return /* @__PURE__ */ t.createElement(s, { withTip: !0, ...n, controller: p }, /* @__PURE__ */ t.createElement(l, { props: i }, /* @__PURE__ */ t.createElement("div", { className: d.contextualHelp }, e)));
+}), P = { "de-DE": {
   "contextualHelpButton.moreInformation": "Weitere Informationen"
 }, "en-EN": {
   "contextualHelpButton.moreInformation": "More information"
-} }, y = (e) => {
-  const o = {
+} }, L = (o) => {
+  const { children: e, ...r } = o, n = {
     Button: {
-      "aria-label": p(f).format(
+      "aria-label": g(P).format(
         "contextualHelpButton.moreInformation"
       ),
-      children: /* @__PURE__ */ t.createElement(c, null),
+      children: /* @__PURE__ */ t.createElement(C, null),
       size: "s",
       variant: "plain"
     }
   };
-  return /* @__PURE__ */ t.createElement(m, null, /* @__PURE__ */ t.createElement(i.DialogTrigger, null, /* @__PURE__ */ t.createElement(n, { props: o, mergeInParentContext: !0 }, e.children)));
+  return /* @__PURE__ */ t.createElement(
+    x,
+    {
+      overlayType: "ContextualHelp",
+      ...r,
+      component: c.DialogTrigger
+    },
+    /* @__PURE__ */ t.createElement(l, { props: n, mergeInParentContext: !0 }, e)
+  );
 };
 export {
-  w as ContextualHelp,
-  y as ContextualHelpTrigger,
-  w as default
+  A as ContextualHelp,
+  L as ContextualHelpTrigger,
+  A as default
 };