@mittwald/flow-react-components 0.1.0-alpha.91 → 0.1.0-alpha.93

package/dist/{Action-CPBrLRz3.js → Action-BoUrh0Ww.js}

@@ -13,10 +13,10 @@ import { u as x, A as O } from "./context-DJetA3qV.js";
 import { TunnelProvider as M, TunnelExit as R } from "@mittwald/react-tunnel";
 import { makeObservable as B, observable as I, action as T } from "mobx";
 import { u as N } from "./useSelector-DpU7_HMO.js";
-const k = (t) => (...e) => {
+const v = (t) => (...e) => {
   const n = [...t], s = n.shift();
   if (s) {
-    const o = s(...e), r = () => n.length === 0 ? o : k(n)(...e);
+    const o = s(...e), r = () => n.length === 0 ? o : v(n)(...e);
     return o instanceof Promise ? o.then(r) : r();
   }
 }, b = "flowBreakActionMarker";
@@ -70,7 +70,7 @@ class H {
     this.isDone || this.state.updateState("isPending");
   }
 }
-class v {
+class k {
   constructor() {
     f(this, "state", "isIdle");
     B(this, {
@@ -79,7 +79,7 @@ class v {
     });
   }
   static useNew() {
-    return C(new v()).current;
+    return C(new k()).current;
   }
   updateState(e) {
     this.state = e;
@@ -118,7 +118,7 @@ const L = () => {
     n(), r(i), l();
   }
 }, q = (t) => {
-  const { isConfirmationAction: e, showFeedback: n } = t, s = U(t), o = x(), r = v.useNew(), l = !e, i = e ? void 0 : o, h = e ? o : void 0, u = k([s, i]);
+  const { isConfirmationAction: e, showFeedback: n } = t, s = U(t), o = x(), r = k.useNew(), l = !e, i = e ? void 0 : o, h = e ? o : void 0, u = v([s, i]);
   return {
     callAction: (...c) => {
       const A = new H(r, c, {
@@ -169,7 +169,7 @@ const L = () => {
       ButtonGroup: {
         Button: {
           render: (u, d) => {
-            const { variant: c } = d;
+            const { color: c } = d;
             return c === "secondary" ? /* @__PURE__ */ a.createElement(m, { break: !0 }, /* @__PURE__ */ a.createElement(m, { closeOverlay: !0 }, /* @__PURE__ */ a.createElement(u, { ...d }))) : /* @__PURE__ */ a.createElement(m, { closeOverlay: !0 }, /* @__PURE__ */ a.createElement(m, { ...t, isConfirmationAction: !0 }, /* @__PURE__ */ a.createElement(u, { ...d })));
           }
         }

package/dist/Action.js

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

package/dist/{Button-DJcL25jy.js → Button-yGwfBM_W.js}

@@ -3,8 +3,8 @@
 import o, { useEffect as S } from "react";
 import * as x from "react-aria-components";
 import F from "clsx";
-import { C as y } from "./ClearPropsContext-CeCMjUK9.js";
-import { P as E } from "./PropsContextProvider-DZvwqHLP.js";
+import { C as E } from "./ClearPropsContext-CeCMjUK9.js";
+import { P as y } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
@@ -65,8 +65,8 @@ const B = "flow--button", L = "flow--button--content", k = "flow--button--state-
 }, _ = (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 = A("Button", (e) => {
   e = _(e);
   const {
-    variant: c = "primary",
-    style: i = "solid",
+    color: c = "primary",
+    variant: i = "solid",
     children: a,
     className: r,
     size: s = "m",
@@ -109,7 +109,7 @@ const B = "flow--button", L = "flow--button--content", k = "flow--button--state-
       className: t.avatar
     }
   }, m = d ? C : l ? I : n ? D : void 0, w = m && /* @__PURE__ */ o.createElement(m, { size: s, className: t.stateIcon }), p = typeof a == "string";
-  return /* @__PURE__ */ o.createElement(y, null, /* @__PURE__ */ o.createElement(x.Button, { className: v, ref: u, ...g }, /* @__PURE__ */ o.createElement(E, { props: P }, /* @__PURE__ */ o.createElement("span", { className: t.content }, /* @__PURE__ */ o.createElement(N, { if: p }, /* @__PURE__ */ o.createElement(h, null, a)))), w));
+  return /* @__PURE__ */ o.createElement(E, null, /* @__PURE__ */ o.createElement(x.Button, { className: v, ref: u, ...g }, /* @__PURE__ */ o.createElement(y, { props: P }, /* @__PURE__ */ o.createElement("span", { className: t.content }, /* @__PURE__ */ o.createElement(N, { if: p }, /* @__PURE__ */ o.createElement(h, null, a)))), w));
 });
 export {
   ve as B

package/dist/Button.js

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

package/dist/ButtonGroup.js

@@ -20,7 +20,7 @@ const d = "flow--button-group--button-group-container", f = "flow--button-group"
       className: i(
         (c) => r(
           t.button,
-          c.variant === "secondary" ? t.secondary : void 0
+          c.color === "secondary" ? t.secondary : void 0
         )
       )
     }

package/dist/CopyButton.js

@@ -2,7 +2,7 @@
 /* */
 import o from "react";
 import a from "copy-to-clipboard";
-import { B as i } from "./Button-DJcL25jy.js";
+import { B as i } from "./Button-yGwfBM_W.js";
 import "@tabler/icons-react";
 import "./Icon-DpcNiaNb.js";
 import { I as c } from "./IconCopy-BOSbNCO3.js";
@@ -15,7 +15,7 @@ import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
 import { f as C } from "./flowComponent-C4FfRbD8.js";
-import { A as E } from "./Action-CPBrLRz3.js";
+import { A as E } from "./Action-BoUrh0Ww.js";
 const B = {
   "de-DE": {
     "copyButton.copy": "Kopieren"

package/dist/HeaderNavigation.js

@@ -12,11 +12,11 @@ const p = "flow--header-navigation", E = "flow--header-navigation--link", f = "f
   link: E,
   button: f,
   inverse: g
-}, C = (o) => {
-  const { children: l, className: i, inverse: r, ...s } = o, c = v(
+}, P = (o) => {
+  const { children: i, className: l, inverse: r, ...s } = o, c = v(
     n.headerNavigation,
     r && n.inverse,
-    i
+    l
   ), m = {
     Link: {
       render: (a, t) => /* @__PURE__ */ e.createElement("li", null, /* @__PURE__ */ e.createElement(a, { ...t, className: n.link, unstyled: !0 }, /* @__PURE__ */ e.createElement(u, null, t.children)))
@@ -27,15 +27,15 @@ const p = "flow--header-navigation", E = "flow--header-navigation--link", f = "f
         {
           ...t,
           className: n.button,
-          style: "plain",
+          variant: "plain",
           inverse: r
         }
       ))
     }
   };
-  return /* @__PURE__ */ e.createElement("nav", { className: c, role: "navigation", ...s }, /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement(d, { props: m }, l)));
+  return /* @__PURE__ */ e.createElement("nav", { className: c, role: "navigation", ...s }, /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement(d, { props: m }, i)));
 };
 export {
-  C as HeaderNavigation,
-  C as default
+  P as HeaderNavigation,
+  P as default
 };

package/dist/IllustratedMessage.js

@@ -6,16 +6,16 @@ import "./propsContext-CauylOgH.js";
 import { P as m } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
-const d = "flow--illustrated-message--illustrated-message-container", g = "flow--illustrated-message", u = "flow--illustrated-message--icon", f = "flow--illustrated-message--heading", p = "flow--illustrated-message--text", x = "flow--illustrated-message--button", v = "flow--illustrated-message--negative", e = {
+const d = "flow--illustrated-message--illustrated-message-container", g = "flow--illustrated-message", u = "flow--illustrated-message--icon", f = "flow--illustrated-message--heading", p = "flow--illustrated-message--text", x = "flow--illustrated-message--button", N = "flow--illustrated-message--negative", e = {
   illustratedMessageContainer: d,
   illustratedMessage: g,
   icon: u,
   heading: f,
   text: p,
   button: x,
-  negative: v
+  negative: N
 }, E = (a) => {
-  const { className: l, children: o, variant: n = "info", ...i } = a, r = s(e.illustratedMessageContainer, l), c = {
+  const { className: l, children: o, variant: n = "info", ...r } = a, i = s(e.illustratedMessageContainer, l), c = {
     Icon: {
       className: e.icon,
       size: "l"
@@ -28,10 +28,10 @@ const d = "flow--illustrated-message--illustrated-message-container", g = "flow-
     },
     Button: {
       className: e.button,
-      variant: "accent"
+      color: "accent"
     }
   };
-  return /* @__PURE__ */ t.createElement("div", { ...i, className: r }, /* @__PURE__ */ t.createElement("div", { className: s(e.illustratedMessage, e[n]) }, /* @__PURE__ */ t.createElement(m, { props: c }, o)));
+  return /* @__PURE__ */ t.createElement("div", { ...r, className: i }, /* @__PURE__ */ t.createElement("div", { className: s(e.illustratedMessage, e[n]) }, /* @__PURE__ */ t.createElement(m, { props: c }, o)));
 };
 export {
   E as IllustratedMessage,

package/dist/LabeledValue.js

@@ -11,25 +11,25 @@ const b = "flow--labeled-value", p = "flow--labeled-value--button", u = "flow--l
   labeledValue: b,
   button: p,
   label: u
-}, y = (t) => {
+}, P = (t) => {
   const { children: a, className: o } = t, s = r(e.labeledValue, o), n = {
     Label: {
       className: e.label
     },
     CopyButton: {
       className: e.button,
-      style: "plain",
+      variant: "plain",
       size: "s"
     },
     Button: {
       className: e.button,
-      style: "plain",
+      variant: "plain",
       size: "s"
     }
   };
   return /* @__PURE__ */ l.createElement(m, null, /* @__PURE__ */ l.createElement("div", { className: s }, /* @__PURE__ */ l.createElement(c, { props: n }, a)));
 };
 export {
-  y as LabeledValue,
-  y as default
+  P as LabeledValue,
+  P as default
 };

package/dist/List.js

@@ -12,7 +12,7 @@ import { T as b } from "./Text-DlBpZns-.js";
 import "@tabler/icons-react";
 import "./Icon-DpcNiaNb.js";
 import { I as $ } from "./IconChevronDown-CbK0gKMB.js";
-import { B as h } from "./Button-DJcL25jy.js";
+import { B as h } from "./Button-yGwfBM_W.js";
 import { useMessageFormatter as H, useLocalizedStringFormatter as q } from "react-aria";
 import K from "clsx";
 import { I as rt } from "./IconClose-CwV3QUi2.js";
@@ -74,7 +74,7 @@ const J = Y({}), m = () => Z(J).list, Et = (i) => /* @__PURE__ */ r.createElemen
     },
     "setSorting"
   ) : /* @__PURE__ */ r.createElement(v, { locales: g }, "sorting"));
-  return /* @__PURE__ */ r.createElement(O.MenuTrigger, null, /* @__PURE__ */ r.createElement(h, { style: "soft", size: "s", variant: "secondary" }, a, /* @__PURE__ */ r.createElement($, null)), /* @__PURE__ */ r.createElement(
+  return /* @__PURE__ */ r.createElement(O.MenuTrigger, null, /* @__PURE__ */ r.createElement(h, { variant: "soft", size: "s", color: "secondary" }, a, /* @__PURE__ */ r.createElement($, null)), /* @__PURE__ */ r.createElement(
     x,
     {
       selectionMode: "single",
@@ -89,7 +89,7 @@ const J = Y({}), m = () => Z(J).list, Et = (i) => /* @__PURE__ */ r.createElemen
   const { filter: t } = i, e = t.values.map((n) => /* @__PURE__ */ r.createElement(U, { key: t.getValueId(n), id: String(n) }, String(n))), a = t.values.filter((n) => t.isValueActive(n)).map((n) => String(n)), s = (n) => {
     t.toggleValue(n);
   };
-  return /* @__PURE__ */ r.createElement(O.MenuTrigger, null, /* @__PURE__ */ r.createElement(h, { style: "soft", size: "s", variant: "secondary" }, /* @__PURE__ */ r.createElement(b, null, t.name ?? t.property), /* @__PURE__ */ r.createElement($, null)), /* @__PURE__ */ r.createElement(
+  return /* @__PURE__ */ r.createElement(O.MenuTrigger, null, /* @__PURE__ */ r.createElement(h, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ r.createElement(b, null, t.name ?? t.property), /* @__PURE__ */ r.createElement($, null)), /* @__PURE__ */ r.createElement(
     x,
     {
       onAction: s,
@@ -109,7 +109,7 @@ const J = Y({}), m = () => Z(J).list, Et = (i) => /* @__PURE__ */ r.createElemen
     (e) => e.values.filter((a) => e.isValueActive(a)).map((a) => /* @__PURE__ */ r.createElement(
       h,
       {
-        style: "soft",
+        variant: "soft",
         size: "s",
         key: String(a),
         onPress: () => e.deactivateValue(a)
@@ -123,7 +123,7 @@ const J = Y({}), m = () => Z(J).list, Et = (i) => /* @__PURE__ */ r.createElemen
     {
       className: R.clearButton,
       size: "s",
-      style: "plain",
+      variant: "plain",
       onPress: () => i.clearFilters()
     },
     /* @__PURE__ */ r.createElement(v, { locales: g }, "resetAll")
@@ -573,7 +573,7 @@ const Kt = "flow--list--items--item-list", jt = "flow--list--items--is-loading",
   return /* @__PURE__ */ r.createElement(st, null, /* @__PURE__ */ r.createElement(
     h,
     {
-      style: "plain",
+      variant: "plain",
       className: t,
       "aria-label": a.format("options")
     },
@@ -655,7 +655,7 @@ const le = "flow--list--footer", ce = {
       isPending: a,
       ...i,
       onPress: () => e.batches.nextBatch(),
-      style: "plain",
+      variant: "plain",
       isDisabled: !n,
       size: "s"
     },

package/dist/Navigation.js

@@ -1,49 +1,57 @@
 "use client"
 /* */
-import t, { useId as m } from "react";
-import g from "clsx";
-import { d as v } from "./deepFindOfType-6pG0fH7S.js";
+import t, { useId as v } from "react";
+import m from "clsx";
+import { d } from "./deepFindOfType-6pG0fH7S.js";
 import { W as f } from "./Wrap-DGT1h1o3.js";
 import "./propsContext-CauylOgH.js";
-import { P as u } from "./PropsContextProvider-DZvwqHLP.js";
+import { P as p } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
-import { TunnelExit as x } from "@mittwald/react-tunnel";
-const N = "flow--navigation", E = "flow--navigation--item", I = "flow--navigation--icon", b = "flow--navigation--text", w = "flow--navigation--control-icon", a = {
+import { TunnelProvider as x, TunnelExit as E } from "@mittwald/react-tunnel";
+const N = "flow--navigation", b = "flow--navigation--item", w = "flow--navigation--icon", I = "flow--navigation--text", C = "flow--navigation--control-icon", o = {
   navigation: N,
-  item: E,
-  icon: I,
-  text: b,
-  controlIcon: w
-}, $ = (i) => {
-  const { className: r, children: e, ...l } = i, s = g(a.navigation, r), n = !!v(e, G), o = {
+  item: b,
+  icon: w,
+  text: I,
+  controlIcon: C
+}, j = (a) => {
+  const { className: i, children: e, ...r } = a, l = m(o.navigation, i), n = !!d(e, P), s = {
     Link: {
-      render: (c, d) => /* @__PURE__ */ t.createElement("li", null, /* @__PURE__ */ t.createElement(c, { ...d, className: a.item, unstyled: !0 })),
+      render: (u, g) => /* @__PURE__ */ t.createElement("li", null, /* @__PURE__ */ t.createElement(u, { ...g, className: o.item, unstyled: !0 })),
       Text: {
-        className: a.text
+        className: o.text
       },
       Icon: {
-        className: a.icon
+        className: o.icon
       }
     }
   };
-  return /* @__PURE__ */ t.createElement("nav", { className: s, role: "navigation", ...l }, /* @__PURE__ */ t.createElement(u, { props: o }, /* @__PURE__ */ t.createElement(f, { if: !n }, /* @__PURE__ */ t.createElement("ul", null, e))));
-}, C = "flow--navigation--navigation-group", y = "flow--navigation--navigation-group--label", p = {
-  navigationGroup: C,
-  label: y
-}, G = (i) => {
-  const { children: r, className: e, ...l } = i, s = g(p.navigationGroup, e), n = m(), o = m(), c = {
+  return /* @__PURE__ */ t.createElement("nav", { className: l, role: "navigation", ...r }, /* @__PURE__ */ t.createElement(p, { props: s }, /* @__PURE__ */ t.createElement(f, { if: !n }, /* @__PURE__ */ t.createElement("ul", null, e))));
+}, y = "flow--navigation--navigation-group", G = "flow--navigation--navigation-group--label", c = {
+  navigationGroup: y,
+  label: G
+}, P = (a) => {
+  const { children: i, className: e, ...r } = a, l = m(c.navigationGroup, e), n = v(), s = {
     Label: {
-      tunnelId: o,
+      tunnelId: "Label",
       id: n,
-      className: p.label,
+      className: c.label,
       "aria-hidden": !0
     }
   };
-  return /* @__PURE__ */ t.createElement("section", { "aria-labelledby": n, className: s, ...l }, /* @__PURE__ */ t.createElement(u, { mergeInParentContext: !0, props: c }, /* @__PURE__ */ t.createElement(x, { id: o }), /* @__PURE__ */ t.createElement("ul", null, r)));
+  return /* @__PURE__ */ t.createElement(x, null, /* @__PURE__ */ t.createElement(
+    "section",
+    {
+      "aria-labelledby": n,
+      className: l,
+      ...r
+    },
+    /* @__PURE__ */ t.createElement(p, { mergeInParentContext: !0, props: s }, /* @__PURE__ */ t.createElement(E, { id: "Label" }), /* @__PURE__ */ t.createElement("ul", null, i))
+  ));
 };
 export {
-  $ as Navigation,
-  G as NavigationGroup,
-  $ as default
+  j as Navigation,
+  P as NavigationGroup,
+  j as default
 };

package/dist/NumberField.js

@@ -2,7 +2,7 @@
 /* */
 import e from "react";
 import * as r from "react-aria-components";
-import { s as o } from "./FormField.module-DHK6nIcD.js";
+import { s as t } from "./FormField.module-DHK6nIcD.js";
 import E from "clsx";
 import { C as N } from "./ClearPropsContext-CeCMjUK9.js";
 import { P as b } from "./PropsContextProvider-DZvwqHLP.js";
@@ -10,30 +10,30 @@ import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
 import { F as I } from "./FieldError-CDPZJvma.js";
-import { B as a } from "./Button-DJcL25jy.js";
+import { B as c } from "./Button-yGwfBM_W.js";
 import "@tabler/icons-react";
 import "./Icon-DpcNiaNb.js";
 import { I as C } from "./IconChevronDown-CbK0gKMB.js";
 import { I as h, a as F, b as P } from "./IconPlus-DS099is1.js";
 import { f as w } from "./flowComponent-C4FfRbD8.js";
-const B = "flow--number-field--group", g = "flow--number-field--input", y = "flow--number-field--decrement-button", v = "flow--number-field--increment-button", x = "flow--number-field--coarse-pointer-icon", D = "flow--number-field--touch-icon", t = {
+const B = "flow--number-field--group", g = "flow--number-field--input", v = "flow--number-field--decrement-button", x = "flow--number-field--increment-button", y = "flow--number-field--coarse-pointer-icon", D = "flow--number-field--touch-icon", o = {
   group: B,
   input: g,
-  decrementButton: y,
-  incrementButton: v,
-  coarsePointerIcon: x,
+  decrementButton: v,
+  incrementButton: x,
+  coarsePointerIcon: y,
   touchIcon: D
 }, K = w("NumberField", (n) => {
-  const { children: m, className: c, ref: l, onChange: s, ...i } = n, u = E(o.formField, c), p = {
+  const { children: a, className: m, ref: l, onChange: s, ...i } = n, u = E(t.formField, m), p = {
     Label: {
-      className: o.label,
+      className: t.label,
       optional: !n.isRequired
     },
     FieldDescription: {
-      className: o.fieldDescription
+      className: t.fieldDescription
     },
     FieldError: {
-      className: o.customFieldError
+      className: t.customFieldError
     }
   }, f = (d) => {
     setTimeout(() => {
@@ -47,31 +47,31 @@ const B = "flow--number-field--group", g = "flow--number-field--input", y = "flo
       className: u,
       onChange: f
     },
-    /* @__PURE__ */ e.createElement(r.Group, { className: t.group }, /* @__PURE__ */ e.createElement(
-      a,
+    /* @__PURE__ */ e.createElement(r.Group, { className: o.group }, /* @__PURE__ */ e.createElement(
+      c,
       {
         slot: "decrement",
-        className: t.decrementButton,
+        className: o.decrementButton,
         size: "s",
-        style: "plain",
-        variant: "secondary"
+        variant: "plain",
+        color: "secondary"
       },
       /* @__PURE__ */ e.createElement(C, null),
-      /* @__PURE__ */ e.createElement(h, { className: t.coarsePointerIcon })
-    ), /* @__PURE__ */ e.createElement(r.Input, { className: t.input, ref: l }), /* @__PURE__ */ e.createElement(
-      a,
+      /* @__PURE__ */ e.createElement(h, { className: o.coarsePointerIcon })
+    ), /* @__PURE__ */ e.createElement(r.Input, { className: o.input, ref: l }), /* @__PURE__ */ e.createElement(
+      c,
       {
         slot: "increment",
-        className: t.incrementButton,
+        className: o.incrementButton,
         size: "s",
-        style: "plain",
-        variant: "secondary"
+        variant: "plain",
+        color: "secondary"
       },
       /* @__PURE__ */ e.createElement(F, null),
-      /* @__PURE__ */ e.createElement(P, { className: t.coarsePointerIcon })
+      /* @__PURE__ */ e.createElement(P, { className: o.coarsePointerIcon })
     )),
-    /* @__PURE__ */ e.createElement(b, { props: p }, m),
-    /* @__PURE__ */ e.createElement(I, { className: o.fieldError })
+    /* @__PURE__ */ e.createElement(b, { props: p }, a),
+    /* @__PURE__ */ e.createElement(I, { className: t.fieldError })
   ));
 });
 export {

package/dist/OffCanvas.js

@@ -1,12 +1,12 @@
 "use client"
 /* */
 import o from "react";
-import f from "clsx";
-import { B as c } from "./Button-DJcL25jy.js";
+import c from "clsx";
+import { B as f } from "./Button-yGwfBM_W.js";
 import "@tabler/icons-react";
 import "./Icon-DpcNiaNb.js";
 import { I as m } from "./IconClose-CwV3QUi2.js";
-import { A as i } from "./Action-CPBrLRz3.js";
+import { A as i } from "./Action-BoUrh0Ww.js";
 import { O as p } from "./Overlay-ofdfFqqi.js";
 import "mobx";
 import "./index-0qLHBjoi.js";
@@ -20,17 +20,17 @@ const u = "flow--off-canvas", d = "flow--off-canvas--close-button", t = {
   "off-canvas-slide-out": "flow--off-canvas--off-canvas-slide-out",
   closeButton: d
 }, z = (s) => {
-  const { controller: a, children: e, className: n } = s, r = f(t.offCanvas, n), l = {
+  const { controller: a, children: e, className: r } = s, n = c(t.offCanvas, r), l = {
     Heading: {
       slot: "title"
     }
   };
-  return /* @__PURE__ */ o.createElement(p, { controller: a, className: r }, /* @__PURE__ */ o.createElement(i, { closeOverlay: !0 }, /* @__PURE__ */ o.createElement(
-    c,
+  return /* @__PURE__ */ o.createElement(p, { controller: a, className: n }, /* @__PURE__ */ o.createElement(i, { closeOverlay: !0 }, /* @__PURE__ */ o.createElement(
+    f,
     {
-      style: "plain",
+      variant: "plain",
       size: "s",
-      variant: "secondary",
+      color: "secondary",
       className: t.closeButton
     },
     /* @__PURE__ */ o.createElement(m, null)

package/dist/OverlayTrigger.js

@@ -3,7 +3,7 @@
 import r from "react";
 import "mobx";
 import { u as l, a as m } from "./index-0qLHBjoi.js";
-import { A as p } from "./Action-CPBrLRz3.js";
+import { A as p } from "./Action-BoUrh0Ww.js";
 import "./propsContext-CauylOgH.js";
 import { P as i } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";

package/dist/Tabs.js

@@ -9,7 +9,7 @@ import { f as S } from "./flowComponent-C4FfRbD8.js";
 import { useCallbackRef as B } from "use-callback-ref";
 import { C as K } from "./ContextMenu-B3m9vxOe.js";
 import { M as L } from "./MenuItem-B5kgO_0u.js";
-import { B as F } from "./Button-DJcL25jy.js";
+import { B as F } from "./Button-yGwfBM_W.js";
 import "@tabler/icons-react";
 import "./Icon-DpcNiaNb.js";
 import { I as A } from "./IconContextMenu-DD5RGOEW.js";
@@ -60,9 +60,9 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
   }, v = /* @__PURE__ */ e.createElement(E.TabList, { className: u.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(f, { id: "Titles" })), g = l && /* @__PURE__ */ e.createElement(U, { id: a }), w = l && /* @__PURE__ */ e.createElement(O, null, /* @__PURE__ */ e.createElement(
     F,
     {
-      style: "soft",
+      variant: "soft",
       className: u.contextMenuButton,
-      variant: "secondary",
+      color: "secondary",
       "aria-labelledby": a
     },
     /* @__PURE__ */ e.createElement(A, null)

package/dist/types/components/Button/Button.d.ts

@@ -2,11 +2,11 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { PropsWithChildren, default as React } from 'react';
 
 import * as Aria from "react-aria-components";
-export interface ButtonProps extends PropsWithChildren<Omit<Aria.ButtonProps, "style">>, FlowComponentProps<"Button"> {
+export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps>, FlowComponentProps<"Button"> {
     /** @default "primary" */
-    variant?: "primary" | "accent" | "secondary" | "danger";
+    color?: "primary" | "accent" | "secondary" | "danger";
     /** @default "solid" */
-    style?: "plain" | "solid" | "soft";
+    variant?: "plain" | "solid" | "soft";
     /** @default "m" */
     size?: "m" | "s";
     "aria-disabled"?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.91",
+  "version": "0.1.0-alpha.93",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -243,12 +243,12 @@
   },
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.91",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.93",
     "@mittwald/react-use-promise": "^2.3.13",
-    "@react-aria/utils": "^3.23.2",
-    "@react-types/shared": "^3.22.1",
+    "@react-aria/utils": "^3.24.0",
+    "@react-types/shared": "^3.23.0",
     "@storybook/test": "^8.0.9",
-    "@tabler/icons-react": "^3.2.0",
+    "@tabler/icons-react": "^3.3.0",
     "@tanstack/react-table": "^8.16.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
@@ -258,16 +258,16 @@
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
     "object-code": "^1.3.3",
-    "react-aria": "^3.32.1",
-    "react-aria-components": "^1.1.1",
+    "react-aria": "^3.33.0",
+    "react-aria-components": "^1.2.0",
     "react-children-utilities": "^2.10.0",
-    "react-stately": "^3.30.1",
+    "react-stately": "^3.31.0",
     "remeda": "^1.61.0",
     "use-callback-ref": "^1.3.2"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.91",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.93",
     "@mittwald/react-use-promise": "^2.3.13",
     "@nx/storybook": "^18.3.4",
     "@storybook/addon-a11y": "^8.0.9",
@@ -283,19 +283,19 @@
     "@storybook/react": "^8.0.9",
     "@storybook/react-vite": "^8.0.9",
     "@storybook/theming": "^8.0.9",
-    "@testing-library/dom": "^10.0.0",
+    "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "~14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/invariant": "^2.2.37",
-    "@types/node": "20.12.7",
+    "@types/node": "20.12.8",
     "@types/prettier": "^3.0.0",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/rollup": "^0.54.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "~1.5.2",
+    "@vitest/coverage-v8": "~1.5.3",
     "decamelize": "^6.0.0",
     "fs-jetpack": "^5.1.0",
     "happy-dom": "^14.7.1",
@@ -310,10 +310,10 @@
     "react-dom": "^18.3.1",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.51.3",
-    "rollup": "^4.17.1",
-    "sass": "^1.75.0",
+    "rollup": "^4.17.2",
+    "sass": "^1.76.0",
     "storybook": "^8.0.9",
-    "tsx": "^4.7.3",
+    "tsx": "^4.8.2",
     "typescript": "^5.4.5",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.2.10",
@@ -321,7 +321,7 @@
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-dts": "^3.9.0",
     "vite-plugin-externalize-deps": "^0.8.0",
-    "vitest": "~1.5.2",
+    "vitest": "~1.5.3",
     "yaml": "^2.4.2"
   },
   "peerDependencies": {
@@ -342,5 +342,5 @@
       "optional": true
     }
   },
-  "gitHead": "97773fc7fa2e06f4ef7db9d9e54e3171511326c4"
+  "gitHead": "ba6ed84d5b3ec4dce8aa6789929d47ca095d9afc"
 }