@mittwald/flow-react-components 0.1.0-alpha.131 → 0.1.0-alpha.133

package/dist/{Accordion-BzgwSHYE.js → Accordion-rCpRbkUM.js}

@@ -2,15 +2,15 @@
 /* */
 import e, { useState as E, useId as a } from "react";
 import I from "clsx";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
-import { P as N } from "./PropsContextProvider-B7e3QrmR.js";
+import "./propsContext-DzAKlmhS.js";
+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-DAoWF37n.js";
+import { B as w } from "./Button-BPAhEOTg.js";
 import "@tabler/icons-react";
-import "./Icon-DdmDlHdu.js";
-import { I as y } from "./IconChevronDown-1Ln2Aunx.js";
+import "./Icon-D4bkU_pz.js";
+import { I as y } from "./IconChevronDown-HLDPe1kj.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-BzgwSHYE.js";
+import { A as r } from "./Accordion-rCpRbkUM.js";
 export {
   r as Accordion,
   r as default

package/dist/Action-Dp9FyJCZ.js

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

package/dist/Action.js

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

package/dist/ActionGroup.js

@@ -1,38 +1,38 @@
 "use client"
 /* */
 import o from "react";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
-import { P as E } from "./PropsContextProvider-B7e3QrmR.js";
+import "./propsContext-DzAKlmhS.js";
+import { P as y } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-import { d as g } from "./dynamic-ClpUSmEt.js";
-import c from "clsx";
-import { f as C } from "./flowComponent-CpHt0lsO.js";
-import { TunnelProvider as G, TunnelExit as n } from "@mittwald/react-tunnel";
-import { A as N } from "./ActionStateContext-C_nPivaA.js";
-import { g as i } from "./getActionGroupSlot-B4Vu4Kix.js";
-const v = "flow--action-group--action-group-container", x = "flow--action-group", w = "flow--action-group--primary", A = "flow--action-group--secondary", P = "flow--action-group--abort", t = {
-  actionGroupContainer: v,
-  actionGroup: x,
-  primary: w,
-  secondary: A,
+import { d as e } from "./dynamic-ClpUSmEt.js";
+import i from "clsx";
+import { f as g } from "./flowComponent-CPKCCJEg.js";
+import { TunnelProvider as E, TunnelExit as n } from "@mittwald/react-tunnel";
+import { A as C, g as a } from "./getActionGroupSlot-izllH4ID.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 = {
+  actionGroupContainer: G,
+  actionGroup: v,
+  primary: x,
+  secondary: N,
   abort: P
-}, D = C("ActionGroup", (s) => {
-  const { children: m, className: l, refProp: p, ...u } = s, d = c(t.actionGroupContainer, l), f = {
+}, k = g("ActionGroup", (s) => {
+  const { children: m, className: l, refProp: p, ...u } = s, d = i(r.actionGroupContainer, l), f = {
     Button: {
-      render: (r, e) => {
-        const a = i(e), y = c(
-          e.className,
-          a !== "secondary" ? t[a] : void 0
+      tunnelId: e((t) => a(t)),
+      slot: e((t) => a(t)),
+      className: e((t) => {
+        const c = a(t);
+        return i(
+          t.className,
+          c !== "secondary" ? r[c] : void 0
         );
-        return /* @__PURE__ */ o.createElement(r, { ...e, className: y });
-      },
-      tunnelId: g((r) => i(r))
+      })
     }
   };
-  return /* @__PURE__ */ o.createElement(N, null, /* @__PURE__ */ o.createElement(E, { props: f, mergeInParentContext: !0 }, /* @__PURE__ */ o.createElement(G, null, /* @__PURE__ */ o.createElement("div", { ...u, className: d, ref: p }, /* @__PURE__ */ o.createElement("div", { className: t.actionGroup, role: "group" }, m, /* @__PURE__ */ o.createElement(n, { id: "primary" }), /* @__PURE__ */ o.createElement("div", { className: t.secondary }, /* @__PURE__ */ o.createElement(n, { id: "secondary" })), /* @__PURE__ */ o.createElement(n, { id: "abort" }))))));
+  return /* @__PURE__ */ o.createElement(C, null, /* @__PURE__ */ o.createElement(y, { props: f, mergeInParentContext: !0 }, /* @__PURE__ */ o.createElement(E, null, /* @__PURE__ */ o.createElement("div", { ...u, className: d, ref: p }, /* @__PURE__ */ o.createElement("div", { className: r.actionGroup, role: "group" }, m, /* @__PURE__ */ o.createElement(n, { id: "primary" }), /* @__PURE__ */ o.createElement("div", { className: r.secondary }, /* @__PURE__ */ o.createElement(n, { id: "secondary" })), /* @__PURE__ */ o.createElement(n, { id: "abort" }))))));
 });
 export {
-  D as ActionGroup,
-  D as default
+  k as ActionGroup,
+  k as default
 };

package/dist/Avatar.js

@@ -2,14 +2,14 @@
 /* */
 import i, { isValidElement as p } from "react";
 import v from "clsx";
-import { C as c } from "./ClearPropsContext-mes1t7Bj.js";
-import { P as f } from "./PropsContextProvider-B7e3QrmR.js";
+import { C as c } from "./ClearPropsContext-CUvsbMn8.js";
+import { P as f } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
+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-CpHt0lsO.js";
+import { f as d } from "./flowComponent-CPKCCJEg.js";
 const C = "flow--avatar", h = "flow--avatar--icon", x = "flow--avatar--initials", r = {
   avatar: C,
   icon: h,

package/dist/Breadcrumb.js

@@ -4,31 +4,33 @@ import r from "react";
 import * as m from "react-aria-components";
 import a from "clsx";
 import "@tabler/icons-react";
-import "./Icon-DdmDlHdu.js";
-import { I as u } from "./IconChevronRight-CAcIYBGT.js";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
-import { P as p } from "./PropsContextProvider-B7e3QrmR.js";
+import "./Icon-D4bkU_pz.js";
+import { I as b } from "./IconChevronRight-DmCZeDFh.js";
+import "./propsContext-DzAKlmhS.js";
+import { P as d } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-const f = "flow--breadcrumb", k = "flow--breadcrumb--link", h = "flow--breadcrumb--breadcrumb-item", N = "flow--breadcrumb--icon", w = "flow--breadcrumb--dark", E = "flow--breadcrumb--light", e = {
-  breadcrumb: f,
-  link: k,
-  breadcrumbItem: h,
-  icon: N,
-  dark: w,
-  light: E
-}, I = (t) => {
+const u = "flow--breadcrumb", p = "flow--breadcrumb--link", f = "flow--breadcrumb--breadcrumb-item", h = "flow--breadcrumb--icon", k = "flow--breadcrumb--dark", w = "flow--breadcrumb--light", e = {
+  breadcrumb: u,
+  link: p,
+  breadcrumbItem: f,
+  icon: h,
+  dark: k,
+  light: w
+}, N = (t) => {
   const { children: o } = t, c = a(e.breadcrumbItem);
-  return /* @__PURE__ */ r.createElement(m.Breadcrumb, { className: c }, o, /* @__PURE__ */ r.createElement(u, { size: "s", className: e.icon }));
-}, A = (t) => {
-  const { children: o, className: c, color: s = "primary", ...n } = t, l = a(e.breadcrumb, e[s], c), b = {
+  return /* @__PURE__ */ r.createElement(m.Breadcrumb, { className: c }, o, /* @__PURE__ */ r.createElement(b, { size: "s", className: e.icon }));
+}, R = (t) => {
+  const { children: o, className: c, color: s = "primary", ...n } = t, l = a(e.breadcrumb, e[s], c), i = {
     Link: {
-      render: (i, d) => /* @__PURE__ */ r.createElement(I, null, /* @__PURE__ */ r.createElement(i, { ...d, unstyled: !0, className: e.link }))
+      unstyled: !0,
+      className: e.link,
+      wrapWith: /* @__PURE__ */ r.createElement(N, null)
     }
   };
-  return /* @__PURE__ */ r.createElement(m.Breadcrumbs, { ...n, className: l }, /* @__PURE__ */ r.createElement(p, { props: b }, o));
+  return /* @__PURE__ */ r.createElement(m.Breadcrumbs, { ...n, className: l }, /* @__PURE__ */ r.createElement(d, { props: i }, o));
 };
 export {
-  A as Breadcrumb,
-  A as default
+  R as Breadcrumb,
+  R as default
 };

package/dist/{Button-DAoWF37n.js → Button-BPAhEOTg.js}

@@ -3,28 +3,28 @@
 import o, { useEffect as x } from "react";
 import * as F from "react-aria-components";
 import E from "clsx";
-import { C as y } from "./ClearPropsContext-mes1t7Bj.js";
-import { P as C } from "./PropsContextProvider-B7e3QrmR.js";
+import { C as y } from "./ClearPropsContext-CUvsbMn8.js";
+import { P as C } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import "./propsContext-DzAKlmhS.js";
 import "remeda";
 import "@tabler/icons-react";
-import "./Icon-DdmDlHdu.js";
-import { I as h, a as I } from "./IconSucceeded-cPVVsQAs.js";
+import "./Icon-D4bkU_pz.js";
+import { I as h, a as I } from "./IconSucceeded-KKiDIenP.js";
 import { W as f } from "./Wrap-DGT1h1o3.js";
-import { T as N } from "./Text-CZrXXfX3.js";
-import { f as L } from "./flowComponent-CpHt0lsO.js";
-import { L as k } from "./LoadingSpinner-VQh3iQVs.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 { useLocalizedStringFormatter as A } from "react-aria";
 import { useLiveRegion as D } from "@chakra-ui/live-region";
-const T = "flow--button", z = "flow--button--content", B = "flow--button--state-icon", R = "flow--button--avatar", K = "flow--button--icon", U = "flow--button--text", W = "flow--button--counter-label", $ = "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 = {
+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 = {
   button: T,
   content: z,
-  stateIcon: B,
+  stateIcon: L,
   avatar: R,
   icon: K,
   text: U,
-  counterLabel: W,
+  counterBadge: W,
   isSucceeded: $,
   isFailed: j,
   isPending: q,
@@ -64,7 +64,7 @@ const T = "flow--button", z = "flow--button--content", B = "flow--button--state-
   x(() => {
     e === "isPending" ? n.speak(s) : e === "isSucceeded" ? n.speak(c) : e === "isFailed" && n.speak(a);
   }, [e]);
-}, te = (e) => ((e.isPending || e.isSucceeded || e.isFailed || e["aria-disabled"]) && (e = { ...e }, e.onPress = void 0, e.onPressStart = void 0, e.onPressEnd = void 0, e.onPressChange = void 0, e.onPressUp = void 0, e.onKeyDown = void 0, e.onKeyUp = void 0), e), ve = L("Button", (e) => {
+}, te = (e) => ((e.isPending || e.isSucceeded || e.isFailed || e["aria-disabled"]) && (e = { ...e }, e.onPress = void 0, e.onPressStart = void 0, e.onPressEnd = void 0, e.onPressChange = void 0, e.onPressUp = void 0, e.onKeyDown = void 0, e.onKeyUp = void 0), e), ve = B("Button", (e) => {
   e = te(e);
   const {
     color: r = "primary",
@@ -73,17 +73,17 @@ const T = "flow--button", z = "flow--button--content", B = "flow--button--state-
     className: c,
     size: a = "m",
     isPending: n,
-    isSucceeded: l,
-    isFailed: d,
-    "aria-disabled": b,
-    refProp: g,
+    isSucceeded: d,
+    isFailed: l,
+    "aria-disabled": g,
+    refProp: b,
     unstyled: m,
     ...P
   } = e, w = m ? c : E(
     t.button,
     n && t.isPending,
-    l && t.isSucceeded,
-    d && t.isFailed,
+    d && t.isSucceeded,
+    l && t.isFailed,
     t[`size-${a}`],
     t[r],
     t[i],
@@ -92,10 +92,10 @@ const T = "flow--button", z = "flow--button--content", B = "flow--button--state-
      * Workaround warning: The Aria.Button does not support "aria-disabled"
      * by now, so this Button will be visually disabled via CSS.
      */
-    b && t.ariaDisabled
+    g && t.ariaDisabled
   );
   ee(
-    n ? "isPending" : l ? "isSucceeded" : d ? "isFailed" : "isIdle"
+    n ? "isPending" : d ? "isSucceeded" : l ? "isFailed" : "isIdle"
   );
   const v = {
     Icon: {
@@ -109,11 +109,11 @@ const T = "flow--button", z = "flow--button--content", B = "flow--button--state-
     Avatar: {
       className: t.avatar
     },
-    CounterLabel: {
-      className: t.counterLabel
+    CounterBadge: {
+      className: t.counterBadge
     }
-  }, u = l ? h : d ? I : n ? k : void 0, p = u && /* @__PURE__ */ o.createElement(u, { size: a, className: t.stateIcon }), S = typeof s == "string";
-  return /* @__PURE__ */ o.createElement(y, null, /* @__PURE__ */ o.createElement(F.Button, { className: w, ref: g, ...P }, /* @__PURE__ */ o.createElement(C, { props: v }, /* @__PURE__ */ o.createElement(f, { if: !m }, /* @__PURE__ */ o.createElement("span", { className: t.content }, /* @__PURE__ */ o.createElement(f, { if: S }, /* @__PURE__ */ o.createElement(N, null, s))))), p));
+  }, u = d ? h : l ? I : n ? k : void 0, p = u && /* @__PURE__ */ o.createElement(u, { size: a, className: t.stateIcon }), S = typeof s == "string";
+  return /* @__PURE__ */ o.createElement(y, null, /* @__PURE__ */ o.createElement(F.Button, { className: w, ref: b, ...P }, /* @__PURE__ */ o.createElement(C, { props: v }, /* @__PURE__ */ o.createElement(f, { if: !m }, /* @__PURE__ */ o.createElement("span", { className: t.content }, /* @__PURE__ */ o.createElement(f, { if: S }, /* @__PURE__ */ o.createElement(N, null, s))))), p));
 });
 export {
   ve as B

package/dist/Button.js

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

package/dist/{Checkbox-2PUuXc0T.js → Checkbox-CD6v6jqo.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-DdmDlHdu.js";
-import { I as x, a as f } from "./IconCheckboxEmpty-BxpTlSro.js";
-import { I as h } from "./IconCheckboxIndeterminate-Cc72OI6v.js";
-import { C } from "./ClearPropsContext-mes1t7Bj.js";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
+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 { C } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as k } from "./flowComponent-CpHt0lsO.js";
+import { f as k } from "./flowComponent-CPKCCJEg.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-2PUuXc0T.js";
+import { C as a } from "./Checkbox-CD6v6jqo.js";
 export {
   a as Checkbox,
   a as default

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

@@ -2,13 +2,13 @@
 /* */
 import o from "react";
 import m from "clsx";
-import { C as p } from "./ClearPropsContext-mes1t7Bj.js";
-import { P as b } from "./PropsContextProvider-B7e3QrmR.js";
+import { C as p } from "./ClearPropsContext-CUvsbMn8.js";
+import { P as b } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import "./propsContext-DzAKlmhS.js";
 import "remeda";
-import { C as x } from "./Checkbox-2PUuXc0T.js";
-import { f } from "./flowComponent-CpHt0lsO.js";
+import { C as x } from "./Checkbox-CD6v6jqo.js";
+import { f } from "./flowComponent-CPKCCJEg.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-BPHQLZJq.js";
+import { C as t } from "./CheckboxButton-I0WYBLv2.js";
 export {
   t as CheckboxButton,
   t as default

package/dist/CheckboxGroup.js

@@ -3,17 +3,17 @@
 import e from "react";
 import * as x from "react-aria-components";
 import b from "clsx";
-import "./ComponentRenderContextProvider-C-1_ziLI.js";
-import { P as h } from "./PropsContextProvider-B7e3QrmR.js";
+import "./propsContext-DzAKlmhS.js";
+import { P as h } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-import { F as E } from "./FieldError-BKoqRvQY.js";
-import { C as k } from "./CheckboxButton-BPHQLZJq.js";
+import { F as E } from "./FieldError-D_VRyiJG.js";
+import { C as k } from "./CheckboxButton-I0WYBLv2.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-CpHt0lsO.js";
+import { f as G } from "./flowComponent-CPKCCJEg.js";
 const P = "flow--checkbox-group", s = {
   checkboxGroup: P
 }, j = G("CheckboxGroup", (l) => {