@mittwald/flow-react-components 1.5.0-next.8 → 1.5.0

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

@@ -4,87 +4,120 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import Accordion_module_default from "./Accordion.module.mjs";
+import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
 import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
 import { Button } from "../Button/Button.mjs";
-import { Activity } from "../Activity/Activity.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { AccordionGroupContext, useAccordionGroupContext } from "../AccordionGroup/context.mjs";
 import clsx from "clsx";
-import { useCallback, useId, useState } from "react";
+import { createContext, useContext, useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useDisclosure } from "react-aria";
+import { useDisclosureState } from "react-stately";
 //#region src/components/Accordion/Accordion.tsx
+var TriggerContext = createContext(null);
 var HeaderButton = (props) => {
-	const { children, id, contentId, isExpanded, onToggle } = props;
+	const { children, isCompact } = props;
+	const buttonProps = useContext(TriggerContext);
 	return /* @__PURE__ */ jsxs(Button, {
 		tunnel: null,
 		unstyled: true,
-		id,
-		"aria-expanded": isExpanded,
 		className: Accordion_module_default.headerButton,
-		onPress: onToggle,
-		"aria-controls": contentId,
-		children: [children, /* @__PURE__ */ jsx(IconChevronDown, { className: Accordion_module_default.chevron })]
+		...buttonProps,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: Accordion_module_default.headerContent,
+			children
+		}), /* @__PURE__ */ jsx(IconChevronDown, {
+			className: Accordion_module_default.chevron,
+			size: isCompact ? "s" : "m"
+		})]
 	});
 };
+var compactHeader = {
+	className: clsx(Accordion_module_default.header, Accordion_module_default.textHeader),
+	children: dynamic((props) => /* @__PURE__ */ jsx(HeaderButton, {
+		isCompact: true,
+		children: props.children
+	}))
+};
+var propsContext = {
+	Content: {
+		className: Accordion_module_default.contentInner,
+		tunnel: {
+			id: "content",
+			component: "Accordion"
+		}
+	},
+	Heading: {
+		className: Accordion_module_default.header,
+		level: 3,
+		children: dynamic((props) => /* @__PURE__ */ jsx(HeaderButton, { children: props.children })),
+		Button: { size: "m" }
+	},
+	Text: {
+		...compactHeader,
+		elementType: "div"
+	},
+	Label: {
+		...compactHeader,
+		elementType: "span"
+	}
+};
 /**
 * @flr-generate all
 * @flowStatus beta
 */
 var Accordion = flowComponent("Accordion", (props) => {
-	const { children, className, defaultExpanded = false, variant = "default", ...rest } = props;
-	const [expanded, setExpanded] = useState(defaultExpanded);
-	const rootClassName = clsx(Accordion_module_default.accordion, expanded && Accordion_module_default.expanded, variant === "outline" && Accordion_module_default.outline, className);
-	const headerId = useId();
-	const contentId = useId();
-	const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);
-	const renderHeaderButton = (children) => /* @__PURE__ */ jsx(HeaderButton, {
-		id: headerId,
-		contentId,
-		isExpanded: expanded,
-		onToggle: toggle,
-		children
-	});
-	const propsContext = {
-		Content: {
-			className: Accordion_module_default.contentInner,
-			tunnel: {
-				id: "content",
-				component: "Accordion"
-			}
-		},
-		Heading: {
-			className: Accordion_module_default.header,
-			level: 4,
-			size: "xs",
-			children: dynamic((props) => renderHeaderButton(props.children)),
-			Button: { size: "m" }
-		},
-		Label: {
-			className: Accordion_module_default.header,
-			elementType: "span",
-			children: dynamic((props) => renderHeaderButton(props.children))
+	const { children, className, id, defaultExpanded = false, variant, ...rest } = props;
+	const warnDeprecation = useWarnDeprecation();
+	if (variant !== void 0) warnDeprecation("The 'variant' prop of the 'Accordion' component is deprecated and will be removed in a future release. Use 'AccordionGroup' or a 'LayoutCard' to set accordions apart instead.");
+	const generatedKey = useId();
+	const key = id ?? generatedKey;
+	const group = useAccordionGroupContext();
+	const register = group?.register;
+	useEffect(() => id === void 0 ? void 0 : register?.(id, defaultExpanded), [
+		register,
+		id,
+		defaultExpanded
+	]);
+	const state = useDisclosureState({
+		defaultExpanded,
+		...group && {
+			isExpanded: group.isExpanded(key, defaultExpanded),
+			onExpandedChange: (isExpanded) => group.setExpanded(key, isExpanded)
 		}
+	});
+	const panelRef = useRef(null);
+	const { buttonProps, panelProps } = useDisclosure({}, state, panelRef);
+	const triggerProps = {
+		id: buttonProps.id,
+		"aria-expanded": state.isExpanded,
+		"aria-controls": buttonProps["aria-controls"],
+		onPress: buttonProps.onPress,
+		onPressStart: buttonProps.onPressStart
 	};
+	const rootClassName = clsx(Accordion_module_default.accordion, state.isExpanded && Accordion_module_default.expanded, group && Accordion_module_default.grouped, className);
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
+		id,
 		className: rootClassName,
-		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
-			dependencies: [expanded],
-			props: propsContext,
-			children: [children, /* @__PURE__ */ jsx("div", {
-				"aria-labelledby": headerId,
-				id: contentId,
-				role: "region",
-				hidden: !expanded,
-				className: Accordion_module_default.content,
-				children: /* @__PURE__ */ jsx(Activity, {
-					isActive: expanded,
-					inactiveDelay: 1e3,
-					children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
-						id: "content",
-						component: "Accordion"
+		children: /* @__PURE__ */ jsx(TriggerContext, {
+			value: triggerProps,
+			children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+				props: propsContext,
+				children: [children, /* @__PURE__ */ jsx("div", {
+					...panelProps,
+					ref: panelRef,
+					className: Accordion_module_default.content,
+					children: /* @__PURE__ */ jsx(AccordionGroupContext, {
+						value: null,
+						children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+							id: "content",
+							component: "Accordion"
+						})
 					})
-				})
-			})]
+				})]
+			})
 		})
 	});
 }, { type: "layout" });

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useCallback, useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n  ComponentProps<\"div\">\n> {\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /** The visual variant of the accordion. @default \"default\" */\n  variant?: \"default\" | \"outline\";\n}\n\ninterface HeaderButtonProps extends PropsWithChildren {\n  id: string;\n  contentId: string;\n  isExpanded: boolean;\n  onToggle: () => void;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n  const { children, id, contentId, isExpanded, onToggle } = props;\n\n  return (\n    <Button\n      tunnel={null}\n      unstyled\n      id={id}\n      aria-expanded={isExpanded}\n      className={styles.headerButton}\n      onPress={onToggle}\n      aria-controls={contentId}\n    >\n      {children}\n      <IconChevronDown className={styles.chevron} />\n    </Button>\n  );\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      defaultExpanded = false,\n      variant = \"default\",\n      ...rest\n    } = props;\n    const [expanded, setExpanded] = useState(defaultExpanded);\n\n    const rootClassName = clsx(\n      styles.accordion,\n      expanded && styles.expanded,\n      variant === \"outline\" && styles.outline,\n      className,\n    );\n\n    const headerId = useId();\n\n    const contentId = useId();\n\n    const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);\n\n    const renderHeaderButton = (children: ReactNode) => (\n      <HeaderButton\n        id={headerId}\n        contentId={contentId}\n        isExpanded={expanded}\n        onToggle={toggle}\n      >\n        {children}\n      </HeaderButton>\n    );\n\n    const propsContext: PropsContext = {\n      Content: {\n        className: styles.contentInner,\n        tunnel: {\n          id: \"content\",\n          component: \"Accordion\",\n        },\n      },\n      Heading: {\n        className: styles.header,\n        level: 4,\n        size: \"xs\",\n        children: dynamic((props) => renderHeaderButton(props.children)),\n        Button: { size: \"m\" },\n      },\n      Label: {\n        className: styles.header,\n        /*\n         * A <label> names the first labelable element below it — here the\n         * toggle, whose own text is the label's only content. The name\n         * computation walks into the label, meets the button it started from\n         * and stops, so the toggle ends up with an empty name. A <span> names\n         * nothing and the name comes from the toggle's content again.\n         */\n        elementType: \"span\",\n        children: dynamic((props) => renderHeaderButton(props.children)),\n      },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        {/*\n         * The props context is memoized, and the header button takes `expanded`\n         * from it – without the dependency the toggle keeps announcing the\n         * state it was first rendered with.\n         */}\n        <PropsContextProvider dependencies={[expanded]} props={propsContext}>\n          {children}\n          <div\n            aria-labelledby={headerId}\n            id={contentId}\n            role=\"region\"\n            hidden={!expanded}\n            className={styles.content}\n          >\n            <Activity isActive={expanded} inactiveDelay={1000}>\n              <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n            </Activity>\n          </div>\n        </PropsContextProvider>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,IAAI,WAAW,YAAY,aAAa;CAE1D,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACI;EACJ,iBAAe;EACf,WAAW,yBAAO;EAClB,SAAS;EACT,iBAAe;EAPjB,UAAA,CASG,UACD,oBAAC,iBAAD,EAAiB,WAAW,yBAAO,QAAU,CAAA,CACvC;;AAEZ;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,UAAU,WACV,GAAG,SACD;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,eAAe;CAExD,MAAM,gBAAgB,KACpB,yBAAO,WACP,YAAY,yBAAO,UACnB,YAAY,aAAa,yBAAO,SAChC,SACF;CAEA,MAAM,WAAW,MAAM;CAEvB,MAAM,YAAY,MAAM;CAExB,MAAM,SAAS,kBAAkB,aAAa,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC;CAEzE,MAAM,sBAAsB,aAC1B,oBAAC,cAAD;EACE,IAAI;EACO;EACX,YAAY;EACZ,UAAU;EAET;CACW,CAAA;CAGhB,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,SAAS;GACP,WAAW,yBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;GAC/D,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,OAAO;GACL,WAAW,yBAAO;GAQlB,aAAa;GACb,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;EACjE;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EAMxB,UAAA,qBAAC,sBAAD;GAAsB,cAAc,CAAC,QAAQ;GAAG,OAAO;GAAvD,UAAA,CACG,UACD,oBAAC,OAAD;IACE,mBAAiB;IACjB,IAAI;IACJ,MAAK;IACL,QAAQ,CAAC;IACT,WAAW,yBAAO;IAElB,UAAA,oBAAC,UAAD;KAAU,UAAU;KAAU,eAAe;KAC3C,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAa,CAAA;IACnD,CAAA;GACP,CAAA,CACe;;CACnB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Accordion.mjs","names":["styles"],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useId, useRef } from \"react\";\nimport { useDisclosure } from \"react-aria\";\nimport { useDisclosureState } from \"react-stately\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n  AccordionGroupContext,\n  useAccordionGroupContext,\n} from \"@/components/AccordionGroup/context\";\n\nexport interface AccordionProps extends PropsWithChildren<\n  ComponentProps<\"div\">\n> {\n  /**\n   * The key of the accordion inside an `AccordionGroup`, used by its\n   * `expandedKeys`. Also set as the DOM id.\n   */\n  id?: string;\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /**\n   * The visual variant of the accordion. Has no effect.\n   *\n   * @deprecated Use `AccordionGroup` or a `LayoutCard` to set accordions apart.\n   */\n  variant?: \"default\" | \"outline\";\n}\n\n/*\n * The header button is rendered by the `Heading`, `Text` or `Label` the\n * consumer wrote, through a memoized props context. It reads the disclosure\n * state from a React context instead, so it always gets the current one.\n */\ntype TriggerProps = Pick<\n  ButtonProps,\n  \"id\" | \"aria-expanded\" | \"aria-controls\" | \"onPress\" | \"onPressStart\"\n>;\n\nconst TriggerContext = createContext<TriggerProps | null>(null);\n\ninterface HeaderButtonProps extends PropsWithChildren {\n  /** Text and label headers are smaller than headings, so is their chevron. */\n  isCompact?: boolean;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n  const { children, isCompact } = props;\n  const buttonProps = useContext(TriggerContext);\n\n  return (\n    <Button\n      tunnel={null}\n      unstyled\n      className={styles.headerButton}\n      {...buttonProps}\n    >\n      <span className={styles.headerContent}>{children}</span>\n      <IconChevronDown\n        className={styles.chevron}\n        size={isCompact ? \"s\" : \"m\"}\n      />\n    </Button>\n  );\n};\n\n/* Text and label headers render the same compact toggle. */\nconst compactHeader = {\n  className: clsx(styles.header, styles.textHeader),\n  children: dynamic((props: PropsWithChildren) => (\n    <HeaderButton isCompact>{props.children}</HeaderButton>\n  )),\n};\n\nconst propsContext: PropsContext = {\n  Content: {\n    className: styles.contentInner,\n    tunnel: {\n      id: \"content\",\n      component: \"Accordion\",\n    },\n  },\n  Heading: {\n    className: styles.header,\n    level: 3,\n    children: dynamic((props) => <HeaderButton>{props.children}</HeaderButton>),\n    Button: { size: \"m\" },\n  },\n  Text: {\n    ...compactHeader,\n    elementType: \"div\",\n  },\n  Label: {\n    ...compactHeader,\n    /*\n     * A <label> names the first labelable element below it — here the toggle,\n     * whose own text is the label's only content. The name computation walks\n     * into the label, meets the button it started from and stops, so the\n     * toggle ends up with an empty name. A <span> names nothing and the name\n     * comes from the toggle's content again.\n     */\n    elementType: \"span\",\n  },\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      id,\n      defaultExpanded = false,\n      variant,\n      ...rest\n    } = props;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (variant !== undefined) {\n      warnDeprecation(\n        \"The 'variant' prop of the 'Accordion' component is deprecated and will be removed in a future release. Use 'AccordionGroup' or a 'LayoutCard' to set accordions apart instead.\",\n      );\n    }\n\n    const generatedKey = useId();\n    const key = id ?? generatedKey;\n    const group = useAccordionGroupContext();\n    const register = group?.register;\n\n    /* `onExpandedChange` reports only keys the consumer gave. */\n    useEffect(\n      () => (id === undefined ? undefined : register?.(id, defaultExpanded)),\n      [register, id, defaultExpanded],\n    );\n\n    const state = useDisclosureState({\n      defaultExpanded,\n      ...(group && {\n        isExpanded: group.isExpanded(key, defaultExpanded),\n        onExpandedChange: (isExpanded) => group.setExpanded(key, isExpanded),\n      }),\n    });\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const { buttonProps, panelProps } = useDisclosure({}, state, panelRef);\n    const triggerProps: TriggerProps = {\n      id: buttonProps.id,\n      \"aria-expanded\": state.isExpanded,\n      \"aria-controls\": buttonProps[\"aria-controls\"],\n      onPress: buttonProps.onPress,\n      onPressStart: buttonProps.onPressStart,\n    };\n\n    const rootClassName = clsx(\n      styles.accordion,\n      state.isExpanded && styles.expanded,\n      group && styles.grouped,\n      className,\n    );\n\n    return (\n      <div {...rest} id={id} className={rootClassName}>\n        <TriggerContext value={triggerProps}>\n          <PropsContextProvider props={propsContext}>\n            {children}\n            <div {...panelProps} ref={panelRef} className={styles.content}>\n              {/* An accordion inside the content is not part of this group. */}\n              <AccordionGroupContext value={null}>\n                <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n              </AccordionGroupContext>\n            </div>\n          </PropsContextProvider>\n        </TriggerContext>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,IAAM,iBAAiB,cAAmC,IAAI;AAY9D,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,cAAc,WAAW,cAAc;CAE7C,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACA,WAAWA,yBAAO;EAClB,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAWA,yBAAO;GAAgB;EAAe,CAAA,GACvD,oBAAC,iBAAD;GACE,WAAWA,yBAAO;GAClB,MAAM,YAAY,MAAM;EACzB,CAAA,CACK;;AAEZ;AAGA,IAAM,gBAAgB;CACpB,WAAW,KAAKA,yBAAO,QAAQA,yBAAO,UAAU;CAChD,UAAU,SAAS,UACjB,oBAAC,cAAD;EAAc,WAAA;EAAW,UAAA,MAAM;CAAuB,CAAA,CACvD;AACH;AAEA,IAAM,eAA6B;CACjC,SAAS;EACP,WAAWA,yBAAO;EAClB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb;CACF;CACA,SAAS;EACP,WAAWA,yBAAO;EAClB,OAAO;EACP,UAAU,SAAS,UAAU,oBAAC,cAAD,EAAA,UAAe,MAAM,SAAuB,CAAA,CAAC;EAC1E,QAAQ,EAAE,MAAM,IAAI;CACtB;CACA,MAAM;EACJ,GAAG;EACH,aAAa;CACf;CACA,OAAO;EACL,GAAG;EAQH,aAAa;CACf;AACF;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,IACA,kBAAkB,OAClB,SACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,YAAY,KAAA,GACd,gBACE,gLACF;CAGF,MAAM,eAAe,MAAM;CAC3B,MAAM,MAAM,MAAM;CAClB,MAAM,QAAQ,yBAAyB;CACvC,MAAM,WAAW,OAAO;CAGxB,gBACS,OAAO,KAAA,IAAY,KAAA,IAAY,WAAW,IAAI,eAAe,GACpE;EAAC;EAAU;EAAI;CAAe,CAChC;CAEA,MAAM,QAAQ,mBAAmB;EAC/B;EACA,GAAI,SAAS;GACX,YAAY,MAAM,WAAW,KAAK,eAAe;GACjD,mBAAmB,eAAe,MAAM,YAAY,KAAK,UAAU;EACrE;CACF,CAAC;CAED,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,EAAE,aAAa,eAAe,cAAc,CAAC,GAAG,OAAO,QAAQ;CACrE,MAAM,eAA6B;EACjC,IAAI,YAAY;EAChB,iBAAiB,MAAM;EACvB,iBAAiB,YAAY;EAC7B,SAAS,YAAY;EACrB,cAAc,YAAY;CAC5B;CAEA,MAAM,gBAAgB,KACpBA,yBAAO,WACP,MAAM,cAAcA,yBAAO,UAC3B,SAASA,yBAAO,SAChB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAU;EAAI,WAAW;EAChC,UAAA,oBAAC,gBAAD;GAAgB,OAAO;GACrB,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,UACD,oBAAC,OAAD;KAAK,GAAI;KAAY,KAAK;KAAU,WAAWA,yBAAO;KAEpD,UAAA,oBAAC,uBAAD;MAAuB,OAAO;MAC5B,UAAA,oBAAC,uBAAD;OAAuB,IAAG;OAAU,WAAU;MAAa,CAAA;KACtC,CAAA;IACpB,CAAA,CACe;;EACR,CAAA;CACb,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -2,24 +2,28 @@
 /* */
 //#region src/components/Accordion/Accordion.module.scss
 var accordion = "flow--accordion";
+var textHeader = "flow--accordion--text-header";
 var header = "flow--accordion--header";
 var headerButton = "flow--accordion--header-button";
+var headerContent = "flow--accordion--header-content";
 var content = "flow--accordion--content";
 var contentInner = "flow--accordion--content-inner";
 var chevron = "flow--accordion--chevron";
-var outline = "flow--accordion--outline";
+var grouped = "flow--accordion--grouped";
 var expanded = "flow--accordion--expanded";
 var Accordion_module_default = {
 	accordion,
+	textHeader,
 	header,
 	headerButton,
+	headerContent,
 	content,
 	contentInner,
 	chevron,
-	outline,
+	grouped,
 	expanded
 };
 //#endregion
-export { accordion, chevron, content, contentInner, Accordion_module_default as default, expanded, header, headerButton, outline };
+export { accordion, chevron, content, contentInner, Accordion_module_default as default, expanded, grouped, header, headerButton, headerContent, textHeader };
 
 //# sourceMappingURL=Accordion.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/focus\";\n\n.accordion {\n  display: flex;\n  flex-direction: column;\n\n  /* Elements */\n\n  .header {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .headerButton {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    text-align: start;\n    flex-grow: 1;\n    padding-inline: var(--accordion--padding-x);\n    padding-block: var(--accordion--padding-y);\n    border-radius: var(--accordion--corner-radius);\n    column-gap: var(--accordion--spacing);\n    border: none;\n    background: none;\n    width: 100%;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--fast);\n\n    @include focus.focus;\n\n    &:hover {\n      background-color: var(--accordion--background-color--hover);\n    }\n  }\n\n  .content {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition-property: grid-template-rows, visibility;\n    visibility: hidden;\n\n    @include expandTransition.expandTransition;\n  }\n\n  .contentInner {\n    overflow: hidden;\n    padding-inline: var(--accordion--padding-x);\n    transition-property: padding;\n\n    @include expandTransition.expandTransition;\n  }\n\n  .chevron {\n    transition-property: transform;\n\n    @include expandTransition.expandTransition;\n  }\n\n  &.outline {\n    border-color: var(--accordion--border-color);\n    border-width: var(--accordion--border-width);\n    border-style: var(--accordion--border-style);\n    border-radius: var(--accordion--corner-radius);\n  }\n\n  &.expanded {\n    .content {\n      grid-template-rows: 1fr;\n      visibility: visible;\n    }\n\n    .contentInner {\n      padding-block: var(--accordion--padding-y);\n    }\n\n    .chevron {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/focus\";\n\n.accordion {\n  display: flex;\n  flex-direction: column;\n\n  /* Header and content text line up with the content around the accordion;\n     only the hover background reaches past it. */\n  margin-inline: calc(var(--accordion--padding) * -1);\n\n  /* The toggle's block padding; a text or label header is more compact than\n     a heading. */\n  --toggle-padding-y: var(--accordion--padding);\n\n  &:has(> .textHeader) {\n    --toggle-padding-y: var(--accordion--padding-s-y);\n  }\n\n  /* Elements */\n\n  .header {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .headerButton {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    text-align: start;\n    flex-grow: 1;\n    padding-inline: var(--accordion--padding);\n    padding-block: var(--toggle-padding-y);\n    border-radius: var(--accordion--corner-radius);\n    column-gap: var(--accordion--spacing);\n    border: none;\n    background: none;\n    width: 100%;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--fast);\n\n    @include focus.focus;\n\n    &:hover {\n      background-color: var(--accordion--background-color--hover);\n    }\n  }\n\n  /* Takes the full width up to the chevron, so the header content can lay\n     itself out across it. */\n  .headerContent {\n    display: flex;\n    flex-grow: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--accordion--spacing);\n    min-width: 0;\n  }\n\n  /* React Aria sets the panel height, animates between pixel values and keeps\n     a collapsed panel `hidden=\"until-found\"`, so find-in-page still reaches\n     its content. */\n  .content {\n    height: var(--disclosure-panel-height);\n    overflow: clip;\n    transition-property: height;\n\n    @include expandTransition.expandTransition;\n  }\n\n  /* Heading and content text are as far apart as a heading and its text in a\n     section; the toggle's own padding already covers part of the distance. */\n  .contentInner {\n    $padding-top: calc(var(--section--spacing) - var(--toggle-padding-y));\n\n    padding-inline: var(--accordion--padding);\n    padding-block: $padding-top var(--accordion--content-padding-bottom);\n  }\n\n  .chevron {\n    flex-shrink: 0;\n    transition-property: transform;\n\n    @include expandTransition.expandTransition;\n  }\n\n  /* States */\n\n  /* In a group, the toggles keep a small gap to each other and to the\n     separators, the way menu items do. None above the first one, so a group\n     starts where a single accordion would. The gap below a toggle counts\n     towards the heading-to-content spacing. */\n  $group-gap: var(--size-px--xs);\n\n  &.grouped > :not(.content) {\n    padding-block: $group-gap;\n  }\n\n  &.grouped:first-child > :not(.content) {\n    padding-block-start: 0;\n  }\n\n  &.grouped > .content > .contentInner {\n    $toggle-to-text: calc(var(--section--spacing) - var(--toggle-padding-y));\n\n    padding-block-start: calc($toggle-to-text - $group-gap);\n  }\n\n  /* Skipping the content panel leaves the chevrons of nested accordions\n     alone. */\n  &.expanded > :not(.content) .chevron {\n    transform: rotate(180deg);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,68 @@
+"use client"
+/* */
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { AccordionGroupContext } from "./context.mjs";
+import AccordionGroup_module_default from "./AccordionGroup.module.mjs";
+import { expandedKeysOf, initialExpansion, isKeyExpanded, nextExpandedKeys, setKeyExpanded } from "./lib/expansion.mjs";
+import clsx from "clsx";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/AccordionGroup/AccordionGroup.tsx
+var propsContext = { Accordion: { className: AccordionGroup_module_default.accordion } };
+/**
+* @flr-generate all
+* @flowStatus beta, new
+*/
+var AccordionGroup = flowComponent("AccordionGroup", (props) => {
+	const { children, className, allowsMultipleExpanded = true, separators = true, expandedKeys, defaultExpandedKeys, onExpandedChange, ref, ...rest } = props;
+	const [expansion, setExpansion] = useState(() => initialExpansion(defaultExpandedKeys));
+	const latestExpansion = useRef(expansion);
+	const registeredAccordions = useRef(/* @__PURE__ */ new Map());
+	const register = useCallback((key, isDefaultExpanded) => {
+		registeredAccordions.current.set(key, isDefaultExpanded);
+		return () => {
+			registeredAccordions.current.delete(key);
+		};
+	}, []);
+	const groupContext = useMemo(() => {
+		const controlledKeys = expandedKeys === void 0 ? void 0 : new Set(expandedKeys);
+		return {
+			isExpanded: (key, isDefaultExpanded) => controlledKeys ? controlledKeys.has(key) : isKeyExpanded(expansion, key, isDefaultExpanded),
+			setExpanded: (key, isExpanded) => {
+				if (controlledKeys) {
+					onExpandedChange?.(nextExpandedKeys(controlledKeys, key, isExpanded, allowsMultipleExpanded));
+					return;
+				}
+				const next = setKeyExpanded(latestExpansion.current, key, isExpanded, allowsMultipleExpanded);
+				latestExpansion.current = next;
+				setExpansion(next);
+				onExpandedChange?.(expandedKeysOf(next, registeredAccordions.current));
+			},
+			register
+		};
+	}, [
+		expansion,
+		expandedKeys,
+		onExpandedChange,
+		allowsMultipleExpanded,
+		register
+	]);
+	const rootClassName = clsx(AccordionGroup_module_default.accordionGroup, separators && AccordionGroup_module_default.separators, className);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		className: rootClassName,
+		children: /* @__PURE__ */ jsx(AccordionGroupContext, {
+			value: groupContext,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children
+			})
+		})
+	});
+}, { type: "layout" });
+//#endregion
+export { AccordionGroup, AccordionGroup as default };
+
+//# sourceMappingURL=AccordionGroup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.mjs","names":["styles"],"sources":["../../../../../../../src/components/AccordionGroup/AccordionGroup.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./AccordionGroup.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  AccordionGroupContext,\n  type AccordionGroupContextValue,\n} from \"@/components/AccordionGroup/context\";\nimport {\n  expandedKeysOf,\n  initialExpansion,\n  isKeyExpanded,\n  nextExpandedKeys,\n  setKeyExpanded,\n} from \"@/components/AccordionGroup/lib/expansion\";\n\nexport interface AccordionGroupProps\n  extends\n    PropsWithChildren<\n      Omit<\n        ComponentProps<\"div\">,\n        \"defaultValue\" | \"onChange\" | \"ref\" | \"children\"\n      >\n    >,\n    FlowComponentProps {\n  /**\n   * The `id`s of the expanded accordions, when the group is controlled. Like\n   * React Aria's `expandedKeys`, but an accordion's `id` is a string.\n   */\n  expandedKeys?: Iterable<string>;\n  /** The `id`s of the accordions that are expanded initially. */\n  defaultExpandedKeys?: Iterable<string>;\n  /** Called with the `id`s of the expanded accordions when they change. */\n  onExpandedChange?: (expandedKeys: Set<string>) => void;\n  /**\n   * Whether several accordions can be expanded at the same time. When false,\n   * expanding one accordion collapses the others. Unlike React Aria's\n   * `DisclosureGroup`, this defaults to `true`.\n   *\n   * @default true\n   */\n  allowsMultipleExpanded?: boolean;\n  /**\n   * Whether separators are drawn between the accordions.\n   *\n   * @default true\n   */\n  separators?: boolean;\n}\n\nconst propsContext: PropsContext = {\n  Accordion: {\n    className: styles.accordion,\n  },\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta, new\n */\nexport const AccordionGroup = flowComponent(\n  \"AccordionGroup\",\n  (props) => {\n    const {\n      children,\n      className,\n      allowsMultipleExpanded = true,\n      separators = true,\n      expandedKeys,\n      defaultExpandedKeys,\n      onExpandedChange,\n      ref,\n      ...rest\n    } = props;\n\n    const [expansion, setExpansion] = useState(() =>\n      initialExpansion(defaultExpandedKeys),\n    );\n    /*\n     * Two toggles before the next render (a find match while another toggle\n     * is pending) must build on each other, not on the rendered state.\n     */\n    const latestExpansion = useRef(expansion);\n    const registeredAccordions = useRef(new Map<string, boolean>());\n\n    const register = useCallback((key: string, isDefaultExpanded: boolean) => {\n      registeredAccordions.current.set(key, isDefaultExpanded);\n      return () => {\n        registeredAccordions.current.delete(key);\n      };\n    }, []);\n\n    const groupContext = useMemo((): AccordionGroupContextValue => {\n      const controlledKeys =\n        expandedKeys === undefined ? undefined : new Set(expandedKeys);\n\n      return {\n        isExpanded: (key, isDefaultExpanded) =>\n          controlledKeys\n            ? controlledKeys.has(key)\n            : isKeyExpanded(expansion, key, isDefaultExpanded),\n        setExpanded: (key, isExpanded) => {\n          if (controlledKeys) {\n            onExpandedChange?.(\n              nextExpandedKeys(\n                controlledKeys,\n                key,\n                isExpanded,\n                allowsMultipleExpanded,\n              ),\n            );\n            return;\n          }\n          const next = setKeyExpanded(\n            latestExpansion.current,\n            key,\n            isExpanded,\n            allowsMultipleExpanded,\n          );\n          latestExpansion.current = next;\n          setExpansion(next);\n          onExpandedChange?.(\n            expandedKeysOf(next, registeredAccordions.current),\n          );\n        },\n        register,\n      };\n    }, [\n      expansion,\n      expandedKeys,\n      onExpandedChange,\n      allowsMultipleExpanded,\n      register,\n    ]);\n\n    const rootClassName = clsx(\n      styles.accordionGroup,\n      separators && styles.separators,\n      className,\n    );\n\n    return (\n      <div {...rest} ref={ref} className={rootClassName}>\n        <AccordionGroupContext value={groupContext}>\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </AccordionGroupContext>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default AccordionGroup;\n"],"mappings":";;;;;;;;;;;AAuDA,IAAM,eAA6B,EACjC,WAAW,EACT,WAAWA,8BAAO,UACpB,EACF;;;;;AAMA,IAAa,iBAAiB,cAC5B,mBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,yBAAyB,MACzB,aAAa,MACb,cACA,qBACA,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,CAAC,WAAW,gBAAgB,eAChC,iBAAiB,mBAAmB,CACtC;CAKA,MAAM,kBAAkB,OAAO,SAAS;CACxC,MAAM,uBAAuB,uBAAO,IAAI,IAAqB,CAAC;CAE9D,MAAM,WAAW,aAAa,KAAa,sBAA+B;EACxE,qBAAqB,QAAQ,IAAI,KAAK,iBAAiB;EACvD,aAAa;GACX,qBAAqB,QAAQ,OAAO,GAAG;EACzC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,cAA0C;EAC7D,MAAM,iBACJ,iBAAiB,KAAA,IAAY,KAAA,IAAY,IAAI,IAAI,YAAY;EAE/D,OAAO;GACL,aAAa,KAAK,sBAChB,iBACI,eAAe,IAAI,GAAG,IACtB,cAAc,WAAW,KAAK,iBAAiB;GACrD,cAAc,KAAK,eAAe;IAChC,IAAI,gBAAgB;KAClB,mBACE,iBACE,gBACA,KACA,YACA,sBACF,CACF;KACA;IACF;IACA,MAAM,OAAO,eACX,gBAAgB,SAChB,KACA,YACA,sBACF;IACA,gBAAgB,UAAU;IAC1B,aAAa,IAAI;IACjB,mBACE,eAAe,MAAM,qBAAqB,OAAO,CACnD;GACF;GACA;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,cAAcA,8BAAO,YACrB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAW;EAAK,WAAW;EAClC,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAC5B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACD,CAAA;CACpB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -0,0 +1,15 @@
+"use client"
+/* */
+//#region src/components/AccordionGroup/AccordionGroup.module.scss
+var accordionGroup = "flow--accordion-group";
+var separators = "flow--accordion-group--separators";
+var accordion = "flow--accordion-group--accordion";
+var AccordionGroup_module_default = {
+	accordionGroup,
+	separators,
+	accordion
+};
+//#endregion
+export { accordion, accordionGroup, AccordionGroup_module_default as default, separators };
+
+//# sourceMappingURL=AccordionGroup.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/AccordionGroup/AccordionGroup.module.scss"],"sourcesContent":[".accordionGroup {\n  display: flex;\n  flex-direction: column;\n\n  /* Variants */\n\n  /* The accordion reaches past the content edge, the separator does not. */\n  &.separators .accordion + .accordion::before {\n    content: \"\";\n    margin-inline: var(--accordion--padding);\n    border-block-start: var(--separator--height) var(--separator--border-style)\n      var(--separator--color);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/AccordionGroup/context.mjs

@@ -0,0 +1,10 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+//#region src/components/AccordionGroup/context.ts
+var AccordionGroupContext = createContext(null);
+var useAccordionGroupContext = () => useContext(AccordionGroupContext);
+//#endregion
+export { AccordionGroupContext, useAccordionGroupContext };
+
+//# sourceMappingURL=context.mjs.map

package/dist/js/packages/components/src/components/AccordionGroup/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/AccordionGroup/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface AccordionGroupContextValue {\n  isExpanded: (key: string, isDefaultExpanded: boolean) => boolean;\n  setExpanded: (key: string, isExpanded: boolean) => void;\n  /** Registers an accordion for `onExpandedChange`; returns the cleanup. */\n  register: (key: string, isDefaultExpanded: boolean) => () => void;\n}\n\nexport const AccordionGroupContext =\n  createContext<AccordionGroupContextValue | null>(null);\n\nexport const useAccordionGroupContext = () => useContext(AccordionGroupContext);\n"],"mappings":";;;;AASA,IAAa,wBACX,cAAiD,IAAI;AAEvD,IAAa,iCAAiC,WAAW,qBAAqB"}

package/dist/js/packages/components/src/components/AccordionGroup/lib/expansion.mjs

@@ -0,0 +1,29 @@
+"use client"
+/* */
+//#region src/components/AccordionGroup/lib/expansion.ts
+var initialExpansion = (defaultExpandedKeys = []) => ({
+	defaultKeys: new Set(defaultExpandedKeys),
+	overrides: /* @__PURE__ */ new Map(),
+	followsDefaults: true
+});
+var isKeyExpanded = (expansion, key, isDefaultExpanded) => expansion.overrides.get(key) ?? (expansion.followsDefaults && (isDefaultExpanded || expansion.defaultKeys.has(key)));
+var setKeyExpanded = (expansion, key, isExpanded, allowsMultipleExpanded) => isExpanded && !allowsMultipleExpanded ? {
+	...expansion,
+	overrides: /* @__PURE__ */ new Map([[key, true]]),
+	followsDefaults: false
+} : {
+	...expansion,
+	overrides: new Map(expansion.overrides).set(key, isExpanded)
+};
+var expandedKeysOf = (expansion, defaultExpandedByKey) => new Set([...defaultExpandedByKey].flatMap(([key, isDefaultExpanded]) => isKeyExpanded(expansion, key, isDefaultExpanded) ? [key] : []));
+var nextExpandedKeys = (expandedKeys, key, isExpanded, allowsMultipleExpanded) => {
+	if (isExpanded && !allowsMultipleExpanded) return /* @__PURE__ */ new Set([key]);
+	const next = new Set(expandedKeys);
+	if (isExpanded) next.add(key);
+	else next.delete(key);
+	return next;
+};
+//#endregion
+export { expandedKeysOf, initialExpansion, isKeyExpanded, nextExpandedKeys, setKeyExpanded };
+
+//# sourceMappingURL=expansion.mjs.map

package/dist/js/packages/components/src/components/AccordionGroup/lib/expansion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion.mjs","names":[],"sources":["../../../../../../../../src/components/AccordionGroup/lib/expansion.ts"],"sourcesContent":["/**\n * The expansion state of an uncontrolled `AccordionGroup`. An accordion's own\n * `defaultExpanded` is only known once it renders, so the state stores what the\n * user changed instead of the full set of expanded keys.\n */\nexport interface Expansion {\n  defaultKeys: ReadonlySet<string>;\n  overrides: ReadonlyMap<string, boolean>;\n  /** False once a single-expand toggle closed every accordion but one. */\n  followsDefaults: boolean;\n}\n\nexport const initialExpansion = (\n  defaultExpandedKeys: Iterable<string> = [],\n): Expansion => ({\n  defaultKeys: new Set(defaultExpandedKeys),\n  overrides: new Map(),\n  followsDefaults: true,\n});\n\nexport const isKeyExpanded = (\n  expansion: Expansion,\n  key: string,\n  isDefaultExpanded: boolean,\n): boolean =>\n  expansion.overrides.get(key) ??\n  (expansion.followsDefaults &&\n    (isDefaultExpanded || expansion.defaultKeys.has(key)));\n\nexport const setKeyExpanded = (\n  expansion: Expansion,\n  key: string,\n  isExpanded: boolean,\n  allowsMultipleExpanded: boolean,\n): Expansion =>\n  isExpanded && !allowsMultipleExpanded\n    ? {\n        ...expansion,\n        overrides: new Map([[key, true]]),\n        followsDefaults: false,\n      }\n    : {\n        ...expansion,\n        overrides: new Map(expansion.overrides).set(key, isExpanded),\n      };\n\nexport const expandedKeysOf = (\n  expansion: Expansion,\n  defaultExpandedByKey: ReadonlyMap<string, boolean>,\n): Set<string> =>\n  new Set(\n    [...defaultExpandedByKey].flatMap(([key, isDefaultExpanded]) =>\n      isKeyExpanded(expansion, key, isDefaultExpanded) ? [key] : [],\n    ),\n  );\n\nexport const nextExpandedKeys = (\n  expandedKeys: ReadonlySet<string>,\n  key: string,\n  isExpanded: boolean,\n  allowsMultipleExpanded: boolean,\n): Set<string> => {\n  if (isExpanded && !allowsMultipleExpanded) {\n    return new Set([key]);\n  }\n  const next = new Set(expandedKeys);\n  if (isExpanded) {\n    next.add(key);\n  } else {\n    next.delete(key);\n  }\n  return next;\n};\n"],"mappings":";;;AAYA,IAAa,oBACX,sBAAwC,CAAC,OAC1B;CACf,aAAa,IAAI,IAAI,mBAAmB;CACxC,2BAAW,IAAI,IAAI;CACnB,iBAAiB;AACnB;AAEA,IAAa,iBACX,WACA,KACA,sBAEA,UAAU,UAAU,IAAI,GAAG,MAC1B,UAAU,oBACR,qBAAqB,UAAU,YAAY,IAAI,GAAG;AAEvD,IAAa,kBACX,WACA,KACA,YACA,2BAEA,cAAc,CAAC,yBACX;CACE,GAAG;CACH,2BAAW,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;CAChC,iBAAiB;AACnB,IACA;CACE,GAAG;CACH,WAAW,IAAI,IAAI,UAAU,SAAS,CAAC,CAAC,IAAI,KAAK,UAAU;AAC7D;AAEN,IAAa,kBACX,WACA,yBAEA,IAAI,IACF,CAAC,GAAG,oBAAoB,CAAC,CAAC,SAAS,CAAC,KAAK,uBACvC,cAAc,WAAW,KAAK,iBAAiB,IAAI,CAAC,GAAG,IAAI,CAAC,CAC9D,CACF;AAEF,IAAa,oBACX,cACA,KACA,YACA,2BACgB;CAChB,IAAI,cAAc,CAAC,wBACjB,uBAAO,IAAI,IAAI,CAAC,GAAG,CAAC;CAEtB,MAAM,OAAO,IAAI,IAAI,YAAY;CACjC,IAAI,YACF,KAAK,IAAI,GAAG;MAEZ,KAAK,OAAO,GAAG;CAEjB,OAAO;AACT"}

package/dist/js/packages/components/src/components/Action/lib/ariaLive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ariaLive.mjs","names":[],"sources":["../../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n  isPendingText?: string;\n  isSucceededText?: string;\n  isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n  actionState: ActionStateValue,\n  options: Options = {},\n): void => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  const {\n    isPendingText = formatter.format(\"action.isPending\"),\n    isSucceededText = formatter.format(\"action.isSucceeded\"),\n    isFailedText = formatter.format(\"action.isFailed\"),\n  } = options;\n\n  useEffect(() => {\n    if (actionState === \"isPending\") {\n      announce(isPendingText, \"polite\");\n    } else if (actionState === \"isSucceeded\") {\n      announce(isSucceededText, \"polite\");\n    } else if (actionState === \"isFailed\") {\n      announce(isFailedText, \"polite\");\n    }\n  }, [actionState]);\n};\n\nexport const useAriaAnnounceSuspense = () => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      const isPendingText = formatter.format(\"suspense.isPending\");\n      announce(isPendingText, \"polite\");\n    }, 750);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;AAYA,IAAa,8BACX,aACA,UAAmB,CAAC,MACX;CACT,MAAM,YAAY,4BAA4B,kBAAS,cAAc;CAErE,MAAM,EACJ,gBAAgB,UAAU,OAAO,kBAAkB,GACnD,kBAAkB,UAAU,OAAO,oBAAoB,GACvD,eAAe,UAAU,OAAO,iBAAiB,MAC/C;CAEJ,gBAAgB;EACd,IAAI,gBAAgB,aAClB,SAAS,eAAe,QAAQ;OAC3B,IAAI,gBAAgB,eACzB,SAAS,iBAAiB,QAAQ;OAC7B,IAAI,gBAAgB,YACzB,SAAS,cAAc,QAAQ;CAEnC,GAAG,CAAC,WAAW,CAAC;AAClB;AAEA,IAAa,gCAAgC;CAC3C,MAAM,YAAY,4BAA4B,kBAAS,cAAc;CAErE,gBAAgB;EACd,MAAM,UAAU,iBAAiB;GAC/B,MAAM,gBAAgB,UAAU,OAAO,oBAAoB;GAC3D,SAAS,eAAe,QAAQ;EAClC,GAAG,GAAG;EAEN,aAAa;GACX,aAAa,OAAO;EACtB;CACF,GAAG,CAAC,CAAC;AACP"}
+{"version":3,"file":"ariaLive.mjs","names":["locales"],"sources":["../../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n  isPendingText?: string;\n  isSucceededText?: string;\n  isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n  actionState: ActionStateValue,\n  options: Options = {},\n): void => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  const {\n    isPendingText = formatter.format(\"action.isPending\"),\n    isSucceededText = formatter.format(\"action.isSucceeded\"),\n    isFailedText = formatter.format(\"action.isFailed\"),\n  } = options;\n\n  useEffect(() => {\n    if (actionState === \"isPending\") {\n      announce(isPendingText, \"polite\");\n    } else if (actionState === \"isSucceeded\") {\n      announce(isSucceededText, \"polite\");\n    } else if (actionState === \"isFailed\") {\n      announce(isFailedText, \"polite\");\n    }\n  }, [actionState]);\n};\n\nexport const useAriaAnnounceSuspense = () => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      const isPendingText = formatter.format(\"suspense.isPending\");\n      announce(isPendingText, \"polite\");\n    }, 750);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;AAYA,IAAa,8BACX,aACA,UAAmB,CAAC,MACX;CACT,MAAM,YAAY,4BAA4BA,kBAAS,cAAc;CAErE,MAAM,EACJ,gBAAgB,UAAU,OAAO,kBAAkB,GACnD,kBAAkB,UAAU,OAAO,oBAAoB,GACvD,eAAe,UAAU,OAAO,iBAAiB,MAC/C;CAEJ,gBAAgB;EACd,IAAI,gBAAgB,aAClB,SAAS,eAAe,QAAQ;OAC3B,IAAI,gBAAgB,eACzB,SAAS,iBAAiB,QAAQ;OAC7B,IAAI,gBAAgB,YACzB,SAAS,cAAc,QAAQ;CAEnC,GAAG,CAAC,WAAW,CAAC;AAClB;AAEA,IAAa,gCAAgC;CAC3C,MAAM,YAAY,4BAA4BA,kBAAS,cAAc;CAErE,gBAAgB;EACd,MAAM,UAAU,iBAAiB;GAC/B,MAAM,gBAAgB,UAAU,OAAO,oBAAoB;GAC3D,SAAS,eAAe,QAAQ;EAClC,GAAG,GAAG;EAEN,aAAa;GACX,aAAa,OAAO;EACtB;CACF,GAAG,CAAC,CAAC;AACP"}

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

@@ -2,86 +2,24 @@
 /* */
 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";
+import { ActionState as ActionState$1, actionStateDurations } from "../../../../../components-base/src/action/ActionState.mjs";
+import "../../../../../components-base/src/index.mjs";
 //#region src/components/Action/models/ActionState.ts
-var duration = {
-	pending: 1e3,
-	succeeded: 800,
-	failed: 2e3
-};
-var ActionState = class ActionState {
-	showFeedback;
-	state = "isIdle";
-	setPendingTimeout;
-	error;
-	isAsync = false;
-	constructor() {
-		makeObservable(this, {
-			state: observable,
-			updateState: action,
-			isBusy: computed
-		});
-	}
+var duration = actionStateDurations;
+/**
+* The state machine is `@mittwald/flow-components-base`'s, shared with every
+* remote binding; this adds the hooks.
+*/
+var ActionState = class ActionState extends ActionState$1 {
 	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 };

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"ActionState.mjs","names":["ActionStateBase"],"sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  ActionState as ActionStateBase,\n  actionStateDurations,\n} from \"@mittwald/flow-components-base\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type { ActionStateValue } from \"@mittwald/flow-components-base\";\n\nexport const duration = actionStateDurations;\n\n/**\n * The state machine is `@mittwald/flow-components-base`'s, shared with every\n * remote binding; this adds the hooks.\n */\nexport class ActionState extends ActionStateBase {\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public useValue(): ActionStateBase[\"state\"] {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,WAAW;;;;;AAMxB,IAAa,cAAb,MAAa,oBAAoBA,cAAgB;CAC/C,OAAc,SAAsB;EAClC,OAAO,gBAAgB,IAAI,YAAY,CAAC;CAC1C;CAEA,WAA4C;EAC1C,OAAO,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC;CAC7C;CAEA,YAA4B;EAC1B,OAAO,kBAAkB,KAAK,QAAQ,CAAC,IAAI,CAAC;CAC9C;AACF"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"ActionGroup.mjs","names":["styles"],"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 into the slots `primary`, `secondary`\n   * and `abort` but stay in source order. Use it when the actions have no such\n   * hierarchy, e.g. a row of equal actions or icon buttons. @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":";;;;;;;;;;;;;AA+BA,IAAa,cAAc,cACzB,gBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,UAAU,KACV,MACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,UACP,CAAC,iBAAiBA,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,eAAeA,4BAAQ,IAAI,CAAC;GAC3D,CAAC;EACH;EACA,QAAQ;GACN,eAAe;GACf,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAeA,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;EACA,MAAM;GACJ;GACA,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAeA,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.map

@@ -1 +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":""}
+{"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\n      // Only the last abort action pushes the others away, so several abort\n      // actions stay together at the start.\n      &:not(:has(~ .abort)) {\n        margin-inline-end: auto;\n      }\n    }\n  }\n}\n"],"mappings":""}