@mittwald/flow-react-components 0.2.0-experimental.775 → 1.0.0

package/dist/js/packages/components/src/components/Action/models/ActionState.mjs

@@ -1,97 +1,89 @@
 "use client"
 /* */
-import { makeObservable, computed, action, observable } from 'mobx';
-import useSelector from '../../../lib/mobx/useSelector.mjs';
-import { sleep } from '../../../lib/promises/sleep.mjs';
-import { useStatic } from '../../../lib/hooks/useStatic.mjs';
-
-const duration = {
-  pending: 1e3,
-  succeeded: 1500,
-  failed: 2e3
+import useSelector from "../../../lib/mobx/useSelector.mjs";
+import { useStatic } from "../../../lib/hooks/useStatic.mjs";
+import { sleep } from "../../../lib/promises/sleep.mjs";
+import { action, computed, makeObservable, observable } from "mobx";
+//#region src/components/Action/models/ActionState.ts
+var duration = {
+	pending: 1e3,
+	succeeded: 800,
+	failed: 2e3
 };
-class ActionState {
-  showFeedback;
-  state = "isIdle";
-  setPendingTimeout;
-  error;
-  isAsync = false;
-  constructor() {
-    makeObservable(this, {
-      state: observable,
-      updateState: action,
-      isBusy: computed
-    });
-  }
-  static useNew() {
-    return useStatic(() => new ActionState());
-  }
-  updateState(newState) {
-    this.state = newState;
-  }
-  useValue() {
-    return useSelector(() => this.state, [this]);
-  }
-  useIsBusy() {
-    return useSelector(() => this.isBusy, [this]);
-  }
-  get isBusy() {
-    return this.state !== "isIdle";
-  }
-  onAsyncStart() {
-    this.clearPendingTimeout();
-    this.isAsync = true;
-    this.updateState("isExecuting");
-    this.setPendingTimeout = window.setTimeout(
-      () => this.startPending(),
-      duration.pending
-    );
-  }
-  async onSucceeded() {
-    await this.onDone();
-  }
-  async onFailed(error) {
-    this.error = error ?? new Error("Unknown error");
-    await this.onDone();
-  }
-  withFeedback(feedback) {
-    this.showFeedback = feedback;
-    return this;
-  }
-  async startFailedFeedback() {
-    this.updateState("isFailed");
-    await sleep(duration.failed);
-    this.resetAfterDone();
-  }
-  async startSucceededFeedback() {
-    this.updateState("isSucceeded");
-    await sleep(duration.succeeded);
-    this.resetAfterDone();
-  }
-  resetAfterDone() {
-    this.updateState("isIdle");
-    this.isAsync = false;
-    this.error = void 0;
-  }
-  clearPendingTimeout() {
-    if (this.setPendingTimeout) {
-      window.clearTimeout(this.setPendingTimeout);
-    }
-  }
-  onDone() {
-    this.clearPendingTimeout();
-    if (this.error) {
-      return this.startFailedFeedback();
-    } else if (this.showFeedback !== false && (this.showFeedback || this.isAsync)) {
-      return this.startSucceededFeedback();
-    } else {
-      this.resetAfterDone();
-    }
-  }
-  startPending() {
-    this.updateState("isPending");
-  }
-}
-
+var ActionState = class ActionState {
+	showFeedback;
+	state = "isIdle";
+	setPendingTimeout;
+	error;
+	isAsync = false;
+	constructor() {
+		makeObservable(this, {
+			state: observable,
+			updateState: action,
+			isBusy: computed
+		});
+	}
+	static useNew() {
+		return useStatic(() => new ActionState());
+	}
+	updateState(newState) {
+		this.state = newState;
+	}
+	useValue() {
+		return useSelector(() => this.state, [this]);
+	}
+	useIsBusy() {
+		return useSelector(() => this.isBusy, [this]);
+	}
+	get isBusy() {
+		return this.state !== "isIdle";
+	}
+	onAsyncStart() {
+		this.clearPendingTimeout();
+		this.isAsync = true;
+		this.updateState("isExecuting");
+		this.setPendingTimeout = window.setTimeout(() => this.startPending(), duration.pending);
+	}
+	async onSucceeded() {
+		await this.onDone();
+	}
+	async onFailed(error) {
+		this.error = error ?? /* @__PURE__ */ new Error("Unknown error");
+		await this.onDone();
+	}
+	withFeedback(feedback) {
+		this.showFeedback = feedback;
+		return this;
+	}
+	async startFailedFeedback() {
+		this.updateState("isFailed");
+		await sleep(duration.failed);
+		this.resetAfterDone();
+	}
+	async startSucceededFeedback() {
+		this.updateState("isSucceeded");
+		await sleep(duration.succeeded);
+		this.resetAfterDone();
+	}
+	resetAfterDone() {
+		this.updateState("isIdle");
+		this.isAsync = false;
+		this.error = void 0;
+	}
+	clearPendingTimeout() {
+		if (this.setPendingTimeout) window.clearTimeout(this.setPendingTimeout);
+	}
+	onDone() {
+		this.clearPendingTimeout();
+		if (this.error) return this.startFailedFeedback();
+		else if (this.showFeedback !== false && (this.showFeedback || this.isAsync)) return this.startSucceededFeedback();
+		else this.resetAfterDone();
+	}
+	startPending() {
+		this.updateState("isPending");
+	}
+};
+//#endregion
 export { ActionState, duration };
-//# sourceMappingURL=ActionState.mjs.map
+
+//# sourceMappingURL=ActionState.mjs.map

package/dist/js/packages/components/src/components/Action/models/ActionState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionState.mjs","sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  action as mobxAction,\n  computed,\n  makeObservable,\n  observable,\n} from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { sleep } from \"@/lib/promises/sleep\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type ActionStateValue =\n  | \"isIdle\"\n  | \"isSucceeded\"\n  | \"isPending\"\n  | \"isExecuting\"\n  | \"isFailed\";\n\nexport const duration = {\n  pending: 1000,\n  succeeded: 1500,\n  failed: 2000,\n};\n\nexport class ActionState {\n  private showFeedback?: boolean;\n  public state: ActionStateValue = \"isIdle\";\n  private setPendingTimeout: number | undefined;\n  public error: unknown;\n  private isAsync = false;\n\n  public constructor() {\n    makeObservable(this, {\n      state: observable,\n      updateState: mobxAction,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public updateState(newState: ActionStateValue): void {\n    this.state = newState;\n  }\n\n  public useValue(): ActionStateValue {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n\n  public get isBusy(): boolean {\n    return this.state !== \"isIdle\";\n  }\n\n  public onAsyncStart(): void {\n    this.clearPendingTimeout();\n    this.isAsync = true;\n    this.updateState(\"isExecuting\");\n    this.setPendingTimeout = window.setTimeout(\n      () => this.startPending(),\n      duration.pending,\n    );\n  }\n\n  public async onSucceeded(): Promise<void> {\n    await this.onDone();\n  }\n\n  public async onFailed(error?: unknown): Promise<void> {\n    this.error = error ?? new Error(\"Unknown error\");\n    await this.onDone();\n  }\n\n  public withFeedback(feedback?: boolean): ActionState {\n    this.showFeedback = feedback;\n    return this;\n  }\n\n  private async startFailedFeedback(): Promise<void> {\n    this.updateState(\"isFailed\");\n    await sleep(duration.failed);\n    this.resetAfterDone();\n  }\n\n  private async startSucceededFeedback(): Promise<void> {\n    this.updateState(\"isSucceeded\");\n    await sleep(duration.succeeded);\n    this.resetAfterDone();\n  }\n\n  private resetAfterDone(): void {\n    this.updateState(\"isIdle\");\n    this.isAsync = false;\n    this.error = undefined;\n  }\n\n  private clearPendingTimeout(): void {\n    if (this.setPendingTimeout) {\n      window.clearTimeout(this.setPendingTimeout);\n    }\n  }\n\n  private onDone(): Promise<void> | void {\n    this.clearPendingTimeout();\n    if (this.error) {\n      return this.startFailedFeedback();\n    } else if (\n      this.showFeedback !== false &&\n      (this.showFeedback || this.isAsync)\n    ) {\n      return this.startSucceededFeedback();\n    } else {\n      this.resetAfterDone();\n    }\n  }\n\n  private startPending(): void {\n    this.updateState(\"isPending\");\n  }\n}\n"],"names":["mobxAction"],"mappings":"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"}
+{"version":3,"file":"ActionState.mjs","names":[],"sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  action as mobxAction,\n  computed,\n  makeObservable,\n  observable,\n} from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { sleep } from \"@/lib/promises/sleep\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type ActionStateValue =\n  \"isIdle\" | \"isSucceeded\" | \"isPending\" | \"isExecuting\" | \"isFailed\";\n\nexport const duration = {\n  pending: 1000,\n  succeeded: 800,\n  failed: 2000,\n};\n\nexport class ActionState {\n  private showFeedback?: boolean;\n  public state: ActionStateValue = \"isIdle\";\n  private setPendingTimeout: number | undefined;\n  public error: unknown;\n  private isAsync = false;\n\n  public constructor() {\n    makeObservable(this, {\n      state: observable,\n      updateState: mobxAction,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public updateState(newState: ActionStateValue): void {\n    this.state = newState;\n  }\n\n  public useValue(): ActionStateValue {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n\n  public get isBusy(): boolean {\n    return this.state !== \"isIdle\";\n  }\n\n  public onAsyncStart(): void {\n    this.clearPendingTimeout();\n    this.isAsync = true;\n    this.updateState(\"isExecuting\");\n    this.setPendingTimeout = window.setTimeout(\n      () => this.startPending(),\n      duration.pending,\n    );\n  }\n\n  public async onSucceeded(): Promise<void> {\n    await this.onDone();\n  }\n\n  public async onFailed(error?: unknown): Promise<void> {\n    this.error = error ?? new Error(\"Unknown error\");\n    await this.onDone();\n  }\n\n  public withFeedback(feedback?: boolean): ActionState {\n    this.showFeedback = feedback;\n    return this;\n  }\n\n  private async startFailedFeedback(): Promise<void> {\n    this.updateState(\"isFailed\");\n    await sleep(duration.failed);\n    this.resetAfterDone();\n  }\n\n  private async startSucceededFeedback(): Promise<void> {\n    this.updateState(\"isSucceeded\");\n    await sleep(duration.succeeded);\n    this.resetAfterDone();\n  }\n\n  private resetAfterDone(): void {\n    this.updateState(\"isIdle\");\n    this.isAsync = false;\n    this.error = undefined;\n  }\n\n  private clearPendingTimeout(): void {\n    if (this.setPendingTimeout) {\n      window.clearTimeout(this.setPendingTimeout);\n    }\n  }\n\n  private onDone(): Promise<void> | void {\n    this.clearPendingTimeout();\n    if (this.error) {\n      return this.startFailedFeedback();\n    } else if (\n      this.showFeedback !== false &&\n      (this.showFeedback || this.isAsync)\n    ) {\n      return this.startSucceededFeedback();\n    } else {\n      this.resetAfterDone();\n    }\n  }\n\n  private startPending(): void {\n    this.updateState(\"isPending\");\n  }\n}\n"],"mappings":";;;;;;;AAaA,IAAa,WAAW;CACtB,SAAS;CACT,WAAW;CACX,QAAQ;AACV;AAEA,IAAa,cAAb,MAAa,YAAY;CACvB;CACA,QAAiC;CACjC;CACA;CACA,UAAkB;CAElB,cAAqB;EACnB,eAAe,MAAM;GACnB,OAAO;GACP,aAAa;GACb,QAAQ;EACV,CAAC;CACH;CAEA,OAAc,SAAsB;EAClC,OAAO,gBAAgB,IAAI,YAAY,CAAC;CAC1C;CAEA,YAAmB,UAAkC;EACnD,KAAK,QAAQ;CACf;CAEA,WAAoC;EAClC,OAAO,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC;CAC7C;CAEA,YAA4B;EAC1B,OAAO,kBAAkB,KAAK,QAAQ,CAAC,IAAI,CAAC;CAC9C;CAEA,IAAW,SAAkB;EAC3B,OAAO,KAAK,UAAU;CACxB;CAEA,eAA4B;EAC1B,KAAK,oBAAoB;EACzB,KAAK,UAAU;EACf,KAAK,YAAY,aAAa;EAC9B,KAAK,oBAAoB,OAAO,iBACxB,KAAK,aAAa,GACxB,SAAS,OACX;CACF;CAEA,MAAa,cAA6B;EACxC,MAAM,KAAK,OAAO;CACpB;CAEA,MAAa,SAAS,OAAgC;EACpD,KAAK,QAAQ,yBAAS,IAAI,MAAM,eAAe;EAC/C,MAAM,KAAK,OAAO;CACpB;CAEA,aAAoB,UAAiC;EACnD,KAAK,eAAe;EACpB,OAAO;CACT;CAEA,MAAc,sBAAqC;EACjD,KAAK,YAAY,UAAU;EAC3B,MAAM,MAAM,SAAS,MAAM;EAC3B,KAAK,eAAe;CACtB;CAEA,MAAc,yBAAwC;EACpD,KAAK,YAAY,aAAa;EAC9B,MAAM,MAAM,SAAS,SAAS;EAC9B,KAAK,eAAe;CACtB;CAEA,iBAA+B;EAC7B,KAAK,YAAY,QAAQ;EACzB,KAAK,UAAU;EACf,KAAK,QAAQ,KAAA;CACf;CAEA,sBAAoC;EAClC,IAAI,KAAK,mBACP,OAAO,aAAa,KAAK,iBAAiB;CAE9C;CAEA,SAAuC;EACrC,KAAK,oBAAoB;EACzB,IAAI,KAAK,OACP,OAAO,KAAK,oBAAoB;OAC3B,IACL,KAAK,iBAAiB,UACrB,KAAK,gBAAgB,KAAK,UAE3B,OAAO,KAAK,uBAAuB;OAEnC,KAAK,eAAe;CAExB;CAEA,eAA6B;EAC3B,KAAK,YAAY,WAAW;CAC9B;AACF"}

package/dist/js/packages/components/src/components/Action/models/ActionStateContext.mjs

@@ -1,61 +1,61 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useEffect, useContext } from 'react';
-import { makeObservable, computed, action, observable } from 'mobx';
-import useSelector from '../../../lib/mobx/useSelector.mjs';
-import { useStatic } from '../../../lib/hooks/useStatic.mjs';
-
-class ActionStateContext {
-  states = /* @__PURE__ */ new Set();
-  constructor() {
-    makeObservable(this, {
-      states: observable,
-      addState: action,
-      removeState: action,
-      isBusy: computed
-    });
-  }
-  static useNew() {
-    return useStatic(() => new ActionStateContext());
-  }
-  static useRegisterState(state) {
-    const context2 = useActionStateContext();
-    useEffect(() => {
-      context2?.addState(state);
-      return () => {
-        context2?.removeState(state);
-      };
-    }, [context2, state]);
-  }
-  addState(state) {
-    this.states.add(state);
-  }
-  removeState(state) {
-    this.states.delete(state);
-  }
-  useIsBusy() {
-    return useSelector(() => this.isBusy);
-  }
-  get isBusy() {
-    for (const s of this.states) {
-      if (s.isBusy) {
-        return true;
-      }
-    }
-    return false;
-  }
-}
-const context = createContext(void 0);
-const ActionStateContextProvider = (props) => {
-  const { children } = props;
-  const ctx = ActionStateContext.useNew();
-  return /* @__PURE__ */ jsx(context.Provider, { value: ctx, children });
+import useSelector from "../../../lib/mobx/useSelector.mjs";
+import { useStatic } from "../../../lib/hooks/useStatic.mjs";
+import { createContext, useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { action, computed, makeObservable, observable } from "mobx";
+//#region src/components/Action/models/ActionStateContext.tsx
+var ActionStateContext = class ActionStateContext {
+	states = /* @__PURE__ */ new Set();
+	constructor() {
+		makeObservable(this, {
+			states: observable,
+			addState: action,
+			removeState: action,
+			isBusy: computed
+		});
+	}
+	static useNew() {
+		return useStatic(() => new ActionStateContext());
+	}
+	static useRegisterState(state) {
+		const context = useActionStateContext();
+		useEffect(() => {
+			context?.addState(state);
+			return () => {
+				context?.removeState(state);
+			};
+		}, [context, state]);
+	}
+	addState(state) {
+		this.states.add(state);
+	}
+	removeState(state) {
+		this.states.delete(state);
+	}
+	useIsBusy() {
+		return useSelector(() => this.isBusy);
+	}
+	get isBusy() {
+		for (const s of this.states) if (s.isBusy) return true;
+		return false;
+	}
 };
-const useActionStateContext = () => {
-  const newContext = ActionStateContext.useNew();
-  return useContext(context) ?? newContext;
+var context = createContext(void 0);
+var ActionStateContextProvider = (props) => {
+	const { children } = props;
+	const ctx = ActionStateContext.useNew();
+	return /* @__PURE__ */ jsx(context.Provider, {
+		value: ctx,
+		children
+	});
 };
-
+var useActionStateContext = () => {
+	const newContext = ActionStateContext.useNew();
+	return useContext(context) ?? newContext;
+};
+//#endregion
 export { ActionStateContext, ActionStateContextProvider, useActionStateContext };
-//# sourceMappingURL=ActionStateContext.mjs.map
+
+//# sourceMappingURL=ActionStateContext.mjs.map

package/dist/js/packages/components/src/components/Action/models/ActionStateContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionStateContext.mjs","sources":["../../../../../../../../src/components/Action/models/ActionStateContext.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React, { createContext, useContext, useEffect } from \"react\";\nimport type { ActionState } from \"@/components/Action/models/ActionState\";\nimport { action, computed, makeObservable, observable } from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport class ActionStateContext {\n  public states = new Set<ActionState>();\n\n  public constructor() {\n    makeObservable(this, {\n      states: observable,\n      addState: action,\n      removeState: action,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionStateContext {\n    return useStatic(() => new ActionStateContext());\n  }\n\n  public static useRegisterState(state: ActionState): void {\n    const context = useActionStateContext();\n\n    useEffect(() => {\n      context?.addState(state);\n      return () => {\n        context?.removeState(state);\n      };\n    }, [context, state]);\n  }\n\n  public addState(state: ActionState): void {\n    this.states.add(state);\n  }\n\n  public removeState(state: ActionState): void {\n    this.states.delete(state);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy);\n  }\n\n  public get isBusy(): boolean {\n    for (const s of this.states) {\n      if (s.isBusy) {\n        return true;\n      }\n    }\n    return false;\n  }\n}\n\nconst context = createContext<ActionStateContext | undefined>(undefined);\n\nexport const ActionStateContextProvider: FC<PropsWithChildren> = (props) => {\n  const { children } = props;\n  const ctx = ActionStateContext.useNew();\n  return <context.Provider value={ctx}>{children}</context.Provider>;\n};\n\nexport const useActionStateContext = (): ActionStateContext => {\n  const newContext = ActionStateContext.useNew();\n  return useContext(context) ?? newContext;\n};\n"],"names":["context"],"mappings":";;;;;;AAOO,MAAM,kBAAA,CAAmB;AAAA,EACvB,MAAA,uBAAa,GAAA,EAAiB;AAAA,EAE9B,WAAA,GAAc;AACnB,IAAA,cAAA,CAAe,IAAA,EAAM;AAAA,MACnB,MAAA,EAAQ,UAAA;AAAA,MACR,QAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAa,MAAA;AAAA,MACb,MAAA,EAAQ;AAAA,KACT,CAAA;AAAA,EACH;AAAA,EAEA,OAAc,MAAA,GAA6B;AACzC,IAAA,OAAO,SAAA,CAAU,MAAM,IAAI,kBAAA,EAAoB,CAAA;AAAA,EACjD;AAAA,EAEA,OAAc,iBAAiB,KAAA,EAA0B;AACvD,IAAA,MAAMA,WAAU,qBAAA,EAAsB;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAAA,QAAAA,EAAS,SAAS,KAAK,CAAA;AACvB,MAAA,OAAO,MAAM;AACX,QAAAA,QAAAA,EAAS,YAAY,KAAK,CAAA;AAAA,MAC5B,CAAA;AAAA,IACF,CAAA,EAAG,CAACA,QAAAA,EAAS,KAAK,CAAC,CAAA;AAAA,EACrB;AAAA,EAEO,SAAS,KAAA,EAA0B;AACxC,IAAA,IAAA,CAAK,MAAA,CAAO,IAAI,KAAK,CAAA;AAAA,EACvB;AAAA,EAEO,YAAY,KAAA,EAA0B;AAC3C,IAAA,IAAA,CAAK,MAAA,CAAO,OAAO,KAAK,CAAA;AAAA,EAC1B;AAAA,EAEO,SAAA,GAAqB;AAC1B,IAAA,OAAO,WAAA,CAAY,MAAM,IAAA,CAAK,MAAM,CAAA;AAAA,EACtC;AAAA,EAEA,IAAW,MAAA,GAAkB;AAC3B,IAAA,KAAA,MAAW,CAAA,IAAK,KAAK,MAAA,EAAQ;AAC3B,MAAA,IAAI,EAAE,MAAA,EAAQ;AACZ,QAAA,OAAO,IAAA;AAAA,MACT;AAAA,IACF;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AACF;AAEA,MAAM,OAAA,GAAU,cAA8C,MAAS,CAAA;AAEhE,MAAM,0BAAA,GAAoD,CAAC,KAAA,KAAU;AAC1E,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,GAAA,GAAM,mBAAmB,MAAA,EAAO;AACtC,EAAA,2BAAQ,OAAA,CAAQ,QAAA,EAAR,EAAiB,KAAA,EAAO,KAAM,QAAA,EAAS,CAAA;AACjD;AAEO,MAAM,wBAAwB,MAA0B;AAC7D,EAAA,MAAM,UAAA,GAAa,mBAAmB,MAAA,EAAO;AAC7C,EAAA,OAAO,UAAA,CAAW,OAAO,CAAA,IAAK,UAAA;AAChC;;;;"}
+{"version":3,"file":"ActionStateContext.mjs","names":[],"sources":["../../../../../../../../src/components/Action/models/ActionStateContext.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect } from \"react\";\nimport type { ActionState } from \"@/components/Action/models/ActionState\";\nimport { action, computed, makeObservable, observable } from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport class ActionStateContext {\n  public states = new Set<ActionState>();\n\n  public constructor() {\n    makeObservable(this, {\n      states: observable,\n      addState: action,\n      removeState: action,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionStateContext {\n    return useStatic(() => new ActionStateContext());\n  }\n\n  public static useRegisterState(state: ActionState): void {\n    const context = useActionStateContext();\n\n    useEffect(() => {\n      context?.addState(state);\n      return () => {\n        context?.removeState(state);\n      };\n    }, [context, state]);\n  }\n\n  public addState(state: ActionState): void {\n    this.states.add(state);\n  }\n\n  public removeState(state: ActionState): void {\n    this.states.delete(state);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy);\n  }\n\n  public get isBusy(): boolean {\n    for (const s of this.states) {\n      if (s.isBusy) {\n        return true;\n      }\n    }\n    return false;\n  }\n}\n\nconst context = createContext<ActionStateContext | undefined>(undefined);\n\nexport const ActionStateContextProvider: FC<PropsWithChildren> = (props) => {\n  const { children } = props;\n  const ctx = ActionStateContext.useNew();\n  return <context.Provider value={ctx}>{children}</context.Provider>;\n};\n\nexport const useActionStateContext = (): ActionStateContext => {\n  const newContext = ActionStateContext.useNew();\n  return useContext(context) ?? newContext;\n};\n"],"mappings":";;;;;;;;AAOA,IAAa,qBAAb,MAAa,mBAAmB;CAC9B,yBAAgB,IAAI,IAAiB;CAErC,cAAqB;EACnB,eAAe,MAAM;GACnB,QAAQ;GACR,UAAU;GACV,aAAa;GACb,QAAQ;EACV,CAAC;CACH;CAEA,OAAc,SAA6B;EACzC,OAAO,gBAAgB,IAAI,mBAAmB,CAAC;CACjD;CAEA,OAAc,iBAAiB,OAA0B;EACvD,MAAM,UAAU,sBAAsB;EAEtC,gBAAgB;GACd,SAAS,SAAS,KAAK;GACvB,aAAa;IACX,SAAS,YAAY,KAAK;GAC5B;EACF,GAAG,CAAC,SAAS,KAAK,CAAC;CACrB;CAEA,SAAgB,OAA0B;EACxC,KAAK,OAAO,IAAI,KAAK;CACvB;CAEA,YAAmB,OAA0B;EAC3C,KAAK,OAAO,OAAO,KAAK;CAC1B;CAEA,YAA4B;EAC1B,OAAO,kBAAkB,KAAK,MAAM;CACtC;CAEA,IAAW,SAAkB;EAC3B,KAAK,MAAM,KAAK,KAAK,QACnB,IAAI,EAAE,QACJ,OAAO;EAGX,OAAO;CACT;AACF;AAEA,IAAM,UAAU,cAA8C,KAAA,CAAS;AAEvE,IAAa,8BAAqD,UAAU;CAC1E,MAAM,EAAE,aAAa;CACrB,MAAM,MAAM,mBAAmB,OAAO;CACtC,OAAO,oBAAC,QAAQ,UAAT;EAAkB,OAAO;EAAM;CAA2B,CAAA;AACnE;AAEA,IAAa,8BAAkD;CAC7D,MAAM,aAAa,mBAAmB,OAAO;CAC7C,OAAO,WAAW,OAAO,KAAK;AAChC"}

package/dist/js/packages/components/src/components/Action/models/getExecutionFunction.mjs

@@ -1,50 +1,21 @@
 "use client"
 /* */
-import { ActionModel } from './ActionModel.mjs';
-import '../Action.mjs';
-import 'react/jsx-runtime';
-import 'react-aria';
-import 'react';
-import '@react-aria/live-announcer';
-
-const voidAction = () => {
-};
+import { ActionModel } from "./ActionModel.mjs";
+//#region src/components/Action/models/getExecutionFunction.ts
+var voidAction = () => {};
 function getExecutionFunction(action) {
-  if (action.needsConfirmation) {
-    return action.confirmationModalController.open;
-  }
-  const {
-    onAction,
-    toggleOverlay,
-    closeOverlay,
-    openOverlay,
-    openModal,
-    closeModal,
-    toggleModal
-  } = action.actionProps;
-  if (onAction) {
-    return onAction;
-  }
-  if (openOverlay) {
-    return () => action.getOverlayController(openOverlay)?.open();
-  }
-  if (closeOverlay) {
-    return () => action.getOverlayController(closeOverlay)?.close(ActionModel.getCloseOverlayOptions(closeOverlay));
-  }
-  if (toggleOverlay) {
-    return () => action.getOverlayController(toggleOverlay)?.toggle();
-  }
-  if (openModal) {
-    return () => action.getOverlayController("Modal")?.open();
-  }
-  if (toggleModal) {
-    return () => action.getOverlayController("Modal")?.toggle();
-  }
-  if (closeModal) {
-    return () => action.getOverlayController("Modal")?.close(ActionModel.getCloseOverlayOptions(closeModal));
-  }
-  return voidAction;
+	if (action.needsConfirmation) return action.confirmationModalController.open;
+	const { onAction, toggleOverlay, closeOverlay, openOverlay, openModal, closeModal, toggleModal } = action.actionProps;
+	if (onAction) return onAction;
+	if (openOverlay) return () => action.getOverlayController(openOverlay)?.open();
+	if (closeOverlay) return () => action.getOverlayController(closeOverlay)?.close(ActionModel.getCloseOverlayOptions(closeOverlay));
+	if (toggleOverlay) return () => action.getOverlayController(toggleOverlay)?.toggle();
+	if (openModal) return () => action.getOverlayController("Modal")?.open();
+	if (toggleModal) return () => action.getOverlayController("Modal")?.toggle();
+	if (closeModal) return () => action.getOverlayController("Modal")?.close(ActionModel.getCloseOverlayOptions(closeModal));
+	return voidAction;
 }
-
+//#endregion
 export { getExecutionFunction };
-//# sourceMappingURL=getExecutionFunction.mjs.map
+
+//# sourceMappingURL=getExecutionFunction.mjs.map

package/dist/js/packages/components/src/components/Action/models/getExecutionFunction.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getExecutionFunction.mjs","sources":["../../../../../../../../src/components/Action/models/getExecutionFunction.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { type ActionFn } from \"@/components/Action\";\n\nconst voidAction = () => {\n  // do nothing\n};\n\nexport function getExecutionFunction(action: ActionModel): ActionFn {\n  if (action.needsConfirmation) {\n    return action.confirmationModalController.open;\n  }\n\n  const {\n    onAction,\n    toggleOverlay,\n    closeOverlay,\n    openOverlay,\n    openModal,\n    closeModal,\n    toggleModal,\n  } = action.actionProps;\n\n  if (onAction) {\n    return onAction;\n  }\n\n  if (openOverlay) {\n    return () => action.getOverlayController(openOverlay)?.open();\n  }\n  if (closeOverlay) {\n    return () =>\n      action\n        .getOverlayController(closeOverlay)\n        ?.close(ActionModel.getCloseOverlayOptions(closeOverlay));\n  }\n  if (toggleOverlay) {\n    return () => action.getOverlayController(toggleOverlay)?.toggle();\n  }\n\n  if (openModal) {\n    return () => action.getOverlayController(\"Modal\")?.open();\n  }\n  if (toggleModal) {\n    return () => action.getOverlayController(\"Modal\")?.toggle();\n  }\n  if (closeModal) {\n    return () =>\n      action\n        .getOverlayController(\"Modal\")\n        ?.close(ActionModel.getCloseOverlayOptions(closeModal));\n  }\n\n  return voidAction;\n}\n"],"names":[],"mappings":";;;;;;;AAGA,MAAM,aAAa,MAAM;AAEzB,CAAA;AAEO,SAAS,qBAAqB,MAAA,EAA+B;AAClE,EAAA,IAAI,OAAO,iBAAA,EAAmB;AAC5B,IAAA,OAAO,OAAO,2BAAA,CAA4B,IAAA;AAAA,EAC5C;AAEA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,MACE,MAAA,CAAO,WAAA;AAEX,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AAEA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,OAAO,MAAM,MAAA,CAAO,oBAAA,CAAqB,WAAW,GAAG,IAAA,EAAK;AAAA,EAC9D;AACA,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,OAAO,MACL,OACG,oBAAA,CAAqB,YAAY,GAChC,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAuB,YAAY,CAAC,CAAA;AAAA,EAC9D;AACA,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,OAAO,MAAM,MAAA,CAAO,oBAAA,CAAqB,aAAa,GAAG,MAAA,EAAO;AAAA,EAClE;AAEA,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAO,MAAM,MAAA,CAAO,oBAAA,CAAqB,OAAO,GAAG,IAAA,EAAK;AAAA,EAC1D;AACA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,OAAO,MAAM,MAAA,CAAO,oBAAA,CAAqB,OAAO,GAAG,MAAA,EAAO;AAAA,EAC5D;AACA,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,MACL,OACG,oBAAA,CAAqB,OAAO,GAC3B,KAAA,CAAM,WAAA,CAAY,sBAAA,CAAuB,UAAU,CAAC,CAAA;AAAA,EAC5D;AAEA,EAAA,OAAO,UAAA;AACT;;;;"}
+{"version":3,"file":"getExecutionFunction.mjs","names":[],"sources":["../../../../../../../../src/components/Action/models/getExecutionFunction.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { type ActionFn } from \"@/components/Action\";\n\nconst voidAction = () => {\n  // do nothing\n};\n\nexport function getExecutionFunction(action: ActionModel): ActionFn {\n  if (action.needsConfirmation) {\n    return action.confirmationModalController.open;\n  }\n\n  const {\n    onAction,\n    toggleOverlay,\n    closeOverlay,\n    openOverlay,\n    openModal,\n    closeModal,\n    toggleModal,\n  } = action.actionProps;\n\n  if (onAction) {\n    return onAction;\n  }\n\n  if (openOverlay) {\n    return () => action.getOverlayController(openOverlay)?.open();\n  }\n  if (closeOverlay) {\n    return () =>\n      action\n        .getOverlayController(closeOverlay)\n        ?.close(ActionModel.getCloseOverlayOptions(closeOverlay));\n  }\n  if (toggleOverlay) {\n    return () => action.getOverlayController(toggleOverlay)?.toggle();\n  }\n\n  if (openModal) {\n    return () => action.getOverlayController(\"Modal\")?.open();\n  }\n  if (toggleModal) {\n    return () => action.getOverlayController(\"Modal\")?.toggle();\n  }\n  if (closeModal) {\n    return () =>\n      action\n        .getOverlayController(\"Modal\")\n        ?.close(ActionModel.getCloseOverlayOptions(closeModal));\n  }\n\n  return voidAction;\n}\n"],"mappings":";;;;AAGA,IAAM,mBAAmB,CAEzB;AAEA,SAAgB,qBAAqB,QAA+B;CAClE,IAAI,OAAO,mBACT,OAAO,OAAO,4BAA4B;CAG5C,MAAM,EACJ,UACA,eACA,cACA,aACA,WACA,YACA,gBACE,OAAO;CAEX,IAAI,UACF,OAAO;CAGT,IAAI,aACF,aAAa,OAAO,qBAAqB,WAAW,CAAC,EAAE,KAAK;CAE9D,IAAI,cACF,aACE,OACG,qBAAqB,YAAY,CAAC,EACjC,MAAM,YAAY,uBAAuB,YAAY,CAAC;CAE9D,IAAI,eACF,aAAa,OAAO,qBAAqB,aAAa,CAAC,EAAE,OAAO;CAGlE,IAAI,WACF,aAAa,OAAO,qBAAqB,OAAO,CAAC,EAAE,KAAK;CAE1D,IAAI,aACF,aAAa,OAAO,qBAAqB,OAAO,CAAC,EAAE,OAAO;CAE5D,IAAI,YACF,aACE,OACG,qBAAqB,OAAO,CAAC,EAC5B,MAAM,YAAY,uBAAuB,UAAU,CAAC;CAG5D,OAAO;AACT"}

package/dist/js/packages/components/src/components/ActionGroup/ActionGroup.mjs

@@ -1,53 +1,58 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import styles from './ActionGroup.module.scss.mjs';
-import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import clsx from 'clsx';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { TunnelProvider } from '@mittwald/react-tunnel';
-import { ActionStateContextProvider } from '../Action/models/ActionStateContext.mjs';
-import { getActionGroupSlot } from './lib/getActionGroupSlot.mjs';
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { ActionStateContextProvider } from "../Action/models/ActionStateContext.mjs";
+import { getActionGroupSlot } from "./lib/getActionGroupSlot.mjs";
+import ActionGroup_module_default from "./ActionGroup.module.mjs";
+import { styleClassname } from "../../lib/scss/selectors.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ActionGroup/ActionGroup.tsx
+/** @flr-generate all */
+var ActionGroup = flowComponent("ActionGroup", (props) => {
+	const { children, className, ref, spacing = "s", size, preserveOrder = false, ...rest } = props;
+	const rootClassName = clsx(ActionGroup_module_default.actionGroup, ActionGroup_module_default[spacing], !preserveOrder && ActionGroup_module_default.sorted, className);
+	const propsContext = preserveOrder ? {
+		Button: { size },
+		Switch: { labelPosition: "leading" },
+		Link: { size }
+	} : {
+		Button: {
+			size,
+			slot: dynamic((props) => getActionGroupSlot(props)),
+			className: dynamic((props) => {
+				const slot = getActionGroupSlot(props);
+				return clsx(props.className, styleClassname(ActionGroup_module_default, slot));
+			})
+		},
+		Switch: {
+			labelPosition: "leading",
+			className: dynamic((props) => {
+				return clsx(props.className, props.slot && styleClassname(ActionGroup_module_default, props.slot));
+			})
+		},
+		Link: {
+			size,
+			className: dynamic((props) => {
+				return clsx(props.className, props.slot && styleClassname(ActionGroup_module_default, props.slot));
+			})
+		}
+	};
+	return /* @__PURE__ */ jsx(ActionStateContextProvider, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		dependencies: [preserveOrder, size],
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: rootClassName,
+			ref,
+			role: "group",
+			children
+		})
+	}) });
+}, { type: "layout" });
+//#endregion
+export { ActionGroup, ActionGroup as default };
 
-const ActionGroup = flowComponent(
-  "ActionGroup",
-  (props) => {
-    const {
-      children,
-      className,
-      ref,
-      spacing = "s",
-      ...rest
-    } = props;
-    const rootClassName = clsx(styles.actionGroup, className, styles[spacing]);
-    const propsContext = {
-      Button: {
-        slot: dynamic((props2) => getActionGroupSlot(props2)),
-        className: dynamic((props2) => {
-          const slot = getActionGroupSlot(props2);
-          return clsx(props2.className, styles[slot]);
-        })
-      },
-      Switch: {
-        labelPosition: "leading",
-        className: dynamic((props2) => {
-          return clsx(props2.className, props2.slot && styles[props2.slot]);
-        })
-      },
-      Link: {
-        className: dynamic((props2) => {
-          return clsx(props2.className, props2.slot && styles[props2.slot]);
-        })
-      }
-    };
-    return /* @__PURE__ */ jsx(ActionStateContextProvider, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, ref, role: "group", children }) }) }) });
-  },
-  {
-    type: "layout"
-  }
-);
-
-export { ActionGroup };
-//# sourceMappingURL=ActionGroup.mjs.map
+//# sourceMappingURL=ActionGroup.mjs.map

package/dist/js/packages/components/src/components/ActionGroup/ActionGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.mjs","sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\n\nexport interface ActionGroupProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithClassName {\n  /** The spacing between the buttons inside the action group. @default \"m\" */\n  spacing?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n  \"ActionGroup\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n\n      spacing = \"s\",\n      ...rest\n    } = props;\n\n    const rootClassName = clsx(styles.actionGroup, className, styles[spacing]);\n\n    const propsContext: PropsContext = {\n      Button: {\n        slot: dynamic((props) => getActionGroupSlot(props)),\n        className: dynamic((props) => {\n          const slot = getActionGroupSlot(props);\n          return clsx(props.className, styles[slot]);\n        }),\n      },\n      Switch: {\n        labelPosition: \"leading\",\n        className: dynamic((props) => {\n          return clsx(props.className, props.slot && styles[props.slot]);\n        }),\n      },\n      Link: {\n        className: dynamic((props) => {\n          return clsx(props.className, props.slot && styles[props.slot]);\n        }),\n      },\n    };\n\n    return (\n      <ActionStateContextProvider>\n        <PropsContextProvider props={propsContext}>\n          <TunnelProvider>\n            <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n              {children}\n            </div>\n          </TunnelProvider>\n        </PropsContextProvider>\n      </ActionStateContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ActionGroup;\n"],"names":["props"],"mappings":";;;;;;;;;;;AAsBO,MAAM,WAAA,GAAc,aAAA;AAAA,EACzB,aAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MAEA,OAAA,GAAU,GAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,aAAa,SAAA,EAAW,MAAA,CAAO,OAAO,CAAC,CAAA;AAEzE,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,MAAM,OAAA,CAAQ,CAACA,MAAAA,KAAU,kBAAA,CAAmBA,MAAK,CAAC,CAAA;AAAA,QAClD,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,MAAM,IAAA,GAAO,mBAAmBA,MAAK,CAAA;AACrC,UAAA,OAAO,IAAA,CAAKA,MAAAA,CAAM,SAAA,EAAW,MAAA,CAAO,IAAI,CAAC,CAAA;AAAA,QAC3C,CAAC;AAAA,OACH;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe,SAAA;AAAA,QACf,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,OAAO,IAAA,CAAKA,OAAM,SAAA,EAAWA,MAAAA,CAAM,QAAQ,MAAA,CAAOA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QAC/D,CAAC;AAAA,OACH;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,OAAO,IAAA,CAAKA,OAAM,SAAA,EAAWA,MAAAA,CAAM,QAAQ,MAAA,CAAOA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QAC/D,CAAC;AAAA;AACH,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,8BACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,kBACC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EAAU,IAAA,EAAK,SACrD,QAAA,EACH,CAAA,EACF,GACF,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}
+{"version":3,"file":"ActionGroup.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\nimport type { ButtonProps } from \"@/components/Button\";\n\nexport interface ActionGroupProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithClassName {\n  /** The spacing between the buttons inside the action group. @default \"s\" */\n  spacing?: \"s\" | \"m\";\n  /** The size of the buttons and links inside the action group. @default \"m\" */\n  size?: ButtonProps[\"size\"];\n  /**\n   * When set, the buttons are not sorted automatically but stay in source\n   * order. @default false\n   */\n  preserveOrder?: boolean;\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n  \"ActionGroup\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      spacing = \"s\",\n      size,\n      preserveOrder = false,\n      ...rest\n    } = props;\n\n    const rootClassName = clsx(\n      styles.actionGroup,\n      styles[spacing],\n      !preserveOrder && styles.sorted,\n      className,\n    );\n\n    const propsContext: PropsContext = preserveOrder\n      ? {\n          Button: { size },\n          Switch: {\n            labelPosition: \"leading\",\n          },\n          Link: { size },\n        }\n      : {\n          Button: {\n            size,\n            slot: dynamic((props) => getActionGroupSlot(props)),\n            className: dynamic((props) => {\n              const slot = getActionGroupSlot(props);\n              return clsx(props.className, styleClassname(styles, slot));\n            }),\n          },\n          Switch: {\n            labelPosition: \"leading\",\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n          Link: {\n            size,\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n        };\n\n    return (\n      <ActionStateContextProvider>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[preserveOrder, size]}\n        >\n          <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n            {children}\n          </div>\n        </PropsContextProvider>\n      </ActionStateContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ActionGroup;\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAa,cAAc,cACzB,gBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,UAAU,KACV,MACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,2BAAO,aACP,2BAAO,UACP,CAAC,iBAAiB,2BAAO,QACzB,SACF;CAEA,MAAM,eAA6B,gBAC/B;EACE,QAAQ,EAAE,KAAK;EACf,QAAQ,EACN,eAAe,UACjB;EACA,MAAM,EAAE,KAAK;CACf,IACA;EACE,QAAQ;GACN;GACA,MAAM,SAAS,UAAU,mBAAmB,KAAK,CAAC;GAClD,WAAW,SAAS,UAAU;IAC5B,MAAM,OAAO,mBAAmB,KAAK;IACrC,OAAO,KAAK,MAAM,WAAW,eAAe,4BAAQ,IAAI,CAAC;GAC3D,CAAC;EACH;EACA,QAAQ;GACN,eAAe;GACf,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAe,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;EACA,MAAM;GACJ;GACA,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAe,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;CACF;CAEJ,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,sBAAD;EACE,OAAO;EACP,cAAc,CAAC,eAAe,IAAI;EAElC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW;GAAoB;GAAK,MAAK;GACrD;EACE,CAAA;CACe,CAAA,EACI,CAAA;AAEhC,GACA,EACE,MAAM,SACR,CACF"}

package/dist/js/packages/components/src/components/ActionGroup/ActionGroup.module.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+//#region src/components/ActionGroup/ActionGroup.module.scss
+var actionGroup = "flow--action-group";
+var s = "flow--action-group--s";
+var m = "flow--action-group--m";
+var sorted = "flow--action-group--sorted";
+var primary = "flow--action-group--primary";
+var secondary = "flow--action-group--secondary";
+var abort = "flow--action-group--abort";
+var ActionGroup_module_default = {
+	actionGroup,
+	s,
+	m,
+	sorted,
+	primary,
+	secondary,
+	abort
+};
+//#endregion
+export { abort, actionGroup, ActionGroup_module_default as default, m, primary, s, secondary, sorted };
+
+//# sourceMappingURL=ActionGroup.module.mjs.map

package/dist/js/packages/components/src/components/ActionGroup/ActionGroup.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.module.scss"],"sourcesContent":[".actionGroup {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  @mixin spacing($spacing) {\n    &.#{$spacing} {\n      gap: var(--action-group--spacing--#{$spacing});\n    }\n  }\n\n  @include spacing(s);\n  @include spacing(m);\n\n  &.sorted {\n    justify-content: flex-end;\n    flex-grow: 1;\n\n    .primary {\n      order: 3;\n\n      &:only-child {\n        margin-inline-start: auto;\n      }\n    }\n\n    .secondary {\n      order: 2;\n    }\n\n    .abort {\n      order: 1;\n      margin-inline-end: auto;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ActionGroup/lib/getActionGroupSlot.mjs

@@ -1,10 +1,12 @@
 "use client"
 /* */
-const getActionGroupSlot = (props) => {
-  const { slot: slotFromProps, ...buttonProps } = props;
-  const guessedSlot = buttonProps.color === void 0 || buttonProps.color === "primary" || buttonProps.color === "danger" || buttonProps.color === "accent" ? "primary" : "abort";
-  return slotFromProps ?? guessedSlot;
+//#region src/components/ActionGroup/lib/getActionGroupSlot.tsx
+var getActionGroupSlot = (props) => {
+	const { slot: slotFromProps, ...buttonProps } = props;
+	const guessedSlot = buttonProps.color === void 0 || buttonProps.color === "primary" || buttonProps.color === "danger" || buttonProps.color === "success" || buttonProps.color === "accent" ? "primary" : "abort";
+	return slotFromProps ?? guessedSlot;
 };
-
+//#endregion
 export { getActionGroupSlot };
-//# sourceMappingURL=getActionGroupSlot.mjs.map
+
+//# sourceMappingURL=getActionGroupSlot.mjs.map