@mittwald/flow-react-components 1.5.9 → 1.5.10

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

@@ -3,6 +3,7 @@
 import AccentBox_module_default from "./AccentBox.module.mjs";
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/AccentBox/AccentBox.tsx
@@ -46,10 +47,10 @@ var AccentBox = flowComponent("AccentBox", (props) => {
 	return /* @__PURE__ */ jsx(Element, {
 		className: rootClassName,
 		style,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			children
-		})
+		}) })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"AccentBox.mjs","names":["anyAccentBoxBackgroundColors","styles"],"sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  AccentBoxBackgroundColor | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The background color of the accent box. @default \"neutral\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"neutral\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n    className,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element className={rootClassName} style={style}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"mappings":";;;;;;;;AAcA,IAAM,4BAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,SAAS,YACP,WACuC;CAGvC,OACE,OAAO,cAAc,YACrBA,0BAA6B,SAAS,SAAS;AAEnD;;;;;AAsBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,OAAO,gBACP,kBAAkB,WAClB,iBACA,UACA,cAAc,OACd,WACA,OAAO,gBACP,gBACE;CAQJ,MAAM,QAAQ,mBALX,mBAAyC,cAC1C,oBAAoB,aAChB,SACA;CAIN,MAAM,eAAe,YAAY,eAAe;CAGhD,MAAM,2BACH,mBAAyC,aACzC,mBAAyC,cACzC,mBAAyC,UACrC,iBACD,KAAA;CAEN,MAAM,QAAQ;EACZ,iBAAiB,eAAe,KAAA,IAAY;EAC5C,iBAAiB,kBAAkB,OAAO,gBAAgB,KAAK,KAAA;EAC/D;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,KACpBC,yBAAO,WACP,2BACIA,yBAAO,4BACP,eACEA,yBAAO,mBACP,KAAA,GACN,SACF;CAEA,MAAM,UAAU;CAEhB,MAAM,eAAe,UAAU,YAAY,KAAA,IAAY;CAEvD,MAAM,eAA6B;EACjC,MAAM,EACJ,OAAO,aACT;EACA,MAAM,EACJ,OAAO,aACT;EACA,SAAS,EACP,OAAO,aACT;EACA,MAAM,EACJ,WAAWA,yBAAO,KACpB;CACF;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAsB;EACxC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,CAAC"}
+{"version":3,"file":"AccentBox.mjs","names":["anyAccentBoxBackgroundColors","styles"],"sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  AccentBoxBackgroundColor | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The background color of the accent box. @default \"neutral\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"neutral\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n    className,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element className={rootClassName} style={style}>\n      <SectionHeadingReset>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </SectionHeadingReset>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"mappings":";;;;;;;;;AAeA,IAAM,4BAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,SAAS,YACP,WACuC;CAGvC,OACE,OAAO,cAAc,YACrBA,0BAA6B,SAAS,SAAS;AAEnD;;;;;AAsBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,OAAO,gBACP,kBAAkB,WAClB,iBACA,UACA,cAAc,OACd,WACA,OAAO,gBACP,gBACE;CAQJ,MAAM,QAAQ,mBALX,mBAAyC,cAC1C,oBAAoB,aAChB,SACA;CAIN,MAAM,eAAe,YAAY,eAAe;CAGhD,MAAM,2BACH,mBAAyC,aACzC,mBAAyC,cACzC,mBAAyC,UACrC,iBACD,KAAA;CAEN,MAAM,QAAQ;EACZ,iBAAiB,eAAe,KAAA,IAAY;EAC5C,iBAAiB,kBAAkB,OAAO,gBAAgB,KAAK,KAAA;EAC/D;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,KACpBC,yBAAO,WACP,2BACIA,yBAAO,4BACP,eACEA,yBAAO,mBACP,KAAA,GACN,SACF;CAEA,MAAM,UAAU;CAEhB,MAAM,eAAe,UAAU,YAAY,KAAA,IAAY;CAEvD,MAAM,eAA6B;EACjC,MAAM,EACJ,OAAO,aACT;EACA,MAAM,EACJ,OAAO,aACT;EACA,SAAS,EACP,OAAO,aACT;EACA,MAAM,EACJ,WAAWA,yBAAO,KACpB;CACF;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAsB;EACxC,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACH,CAAA;CACd,CAAA;AAEb,CAAC"}

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import Accordion_module_default from "./Accordion.module.mjs";
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
 import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
@@ -101,7 +102,7 @@ var Accordion = flowComponent("Accordion", (props) => {
 		...rest,
 		id,
 		className: rootClassName,
-		children: /* @__PURE__ */ jsx(TriggerContext, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(TriggerContext, {
 			value: triggerProps,
 			children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 				props: propsContext,
@@ -118,7 +119,7 @@ var Accordion = flowComponent("Accordion", (props) => {
 					})
 				})]
 			})
-		})
+		}) })
 	});
 }, { type: "layout" });
 //#endregion

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

@@ -1 +1 @@
-{"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"}
+{"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\";\nimport { SectionHeadingReset } from \"@/components/Section/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        <SectionHeadingReset>\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        </SectionHeadingReset>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+CA,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,qBAAD,EAAA,UACE,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,EACG,CAAA;CAClB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import Alert_module_default from "./Alert.module.mjs";
@@ -37,11 +38,11 @@ var Alert = flowComponent("Alert", (props) => {
 		...rest,
 		className: rootClassName,
 		ref,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			dependencies: [status],
 			children
-		})
+		}) })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Alert.module.scss\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertProps\n  extends\n    PropsWithChildren<ComponentProps<\"aside\">>,\n    PropsWithStatus,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Alert = flowComponent(\"Alert\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.alert,\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 3,\n      size: \"s\",\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Content: {\n      className: styles.content,\n      Button: {\n        size: \"s\",\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n      },\n    },\n  };\n\n  return (\n    <aside {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext} dependencies={[status]}>\n        {children}\n      </PropsContextProvider>\n    </aside>\n  );\n});\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,qBAAO,OACPA,qBAAO,SACP,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,qBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,qBAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,SAAS;GACP,WAAWA,qBAAO;GAClB,QAAQ,EACN,MAAM,IACR;GACA,aAAa;IACX,eAAe;IACf,MAAM;GACR;EACF;CACF;CAEA,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAAc,cAAc,CAAC,MAAM;GAC7D;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}
+{"version":3,"file":"Alert.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Alert.module.scss\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nexport interface AlertProps\n  extends\n    PropsWithChildren<ComponentProps<\"aside\">>,\n    PropsWithStatus,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Alert = flowComponent(\"Alert\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.alert,\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 3,\n      size: \"s\",\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Content: {\n      className: styles.content,\n      Button: {\n        size: \"s\",\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n      },\n    },\n  };\n\n  return (\n    <aside {...rest} className={rootClassName} ref={ref}>\n      <SectionHeadingReset>\n        <PropsContextProvider props={propsContext} dependencies={[status]}>\n          {children}\n        </PropsContextProvider>\n      </SectionHeadingReset>\n    </aside>\n  );\n});\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,qBAAO,OACPA,qBAAO,SACP,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,qBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,qBAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,SAAS;GACP,WAAWA,qBAAO;GAClB,QAAQ,EACN,MAAM,IACR;GACA,aAAa;IACX,eAAe;IACf,MAAM;GACR;EACF;CACF;CAEA,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAAc,cAAc,CAAC,MAAM;GAC7D;EACmB,CAAA,EACH,CAAA;CAChB,CAAA;AAEX,CAAC"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useRegisterSectionHeading } from "../Section/context.mjs";
 import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { styleClassname } from "../../lib/scss/selectors.mjs";
@@ -25,6 +26,7 @@ var sizeByLevel = {
 /** @flr-generate all */
 var Heading = flowComponent("Heading", (props) => {
 	const { children, className, level = 2, color = "default", wrap, size, ref, elementType, ...rest } = props;
+	useRegisterSectionHeading(rest.id);
 	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], styleClassname(Heading_module_default, `h${level}`), className);
 	const Element = elementType ?? Aria.Heading;

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":["styles"],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { Children } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    // The level class carries the font size. Emitted for every heading — not\n    // just the `elementType` ones — so the stylesheet can select on the class\n    // instead of the h1–h6 element react-aria renders without one.\n    styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element\n        className={rootClassName}\n        {...rest}\n        ref={ref}\n        level={level}\n        inert={isSkeleton || undefined}\n      >\n        <span className={styles.headingText}>\n          <SkeletonTextContent defaultWidth=\"12em\">\n            {children}\n          </SkeletonTextContent>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.count(items) > 0 && (\n                <span className={styles.headingTextSpacer} />\n              )\n            }\n          </UiComponentTunnelExit>\n        </span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.map(items, (item) => (\n                <span className={styles.headingContentItem}>{item}</span>\n              ))\n            }\n          </UiComponentTunnelExit>\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,uBAAO,SACP,QAAQA,uBAAO,QAAQ,SACvB,UAAU,aAAaA,uBAAO,QAC9B,QAAQA,uBAAO,QAAQ,SAIvB,eAAeA,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAWA,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAWA,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GACE,WAAW;GACX,GAAI;GACC;GACE;GACP,OAAO,cAAc,KAAA;GALvB,UAAA,CAOE,qBAAC,QAAD;IAAM,WAAWA,uBAAO;IAAxB,UAAA,CACE,oBAAC,qBAAD;KAAqB,cAAa;KAC/B;IACkB,CAAA,GACrB,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAWA,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAWA,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAWA,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Heading.mjs","names":["styles"],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { Children } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useRegisterSectionHeading } from \"@/components/Section/context\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  useRegisterSectionHeading(rest.id);\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    // The level class carries the font size. Emitted for every heading — not\n    // just the `elementType` ones — so the stylesheet can select on the class\n    // instead of the h1–h6 element react-aria renders without one.\n    styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element\n        className={rootClassName}\n        {...rest}\n        ref={ref}\n        level={level}\n        inert={isSkeleton || undefined}\n      >\n        <span className={styles.headingText}>\n          <SkeletonTextContent defaultWidth=\"12em\">\n            {children}\n          </SkeletonTextContent>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.count(items) > 0 && (\n                <span className={styles.headingTextSpacer} />\n              )\n            }\n          </UiComponentTunnelExit>\n        </span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.map(items, (item) => (\n                <span className={styles.headingContentItem}>{item}</span>\n              ))\n            }\n          </UiComponentTunnelExit>\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,0BAA0B,KAAK,EAAE;CAEjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,uBAAO,SACP,QAAQA,uBAAO,QAAQ,SACvB,UAAU,aAAaA,uBAAO,QAC9B,QAAQA,uBAAO,QAAQ,SAIvB,eAAeA,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAWA,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAWA,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GACE,WAAW;GACX,GAAI;GACC;GACE;GACP,OAAO,cAAc,KAAA;GALvB,UAAA,CAOE,qBAAC,QAAD;IAAM,WAAWA,uBAAO;IAAxB,UAAA,CACE,oBAAC,qBAAD;KAAqB,cAAa;KAC/B;IACkB,CAAA,GACrB,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAWA,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAWA,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAWA,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
 import IllustratedMessage_module_default from "./IllustratedMessage.module.mjs";
 import clsx from "clsx";
@@ -35,10 +36,10 @@ var IllustratedMessage = flowComponent("IllustratedMessage", (props) => {
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		className: rootClassName,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			children
-		})
+		}) })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"IllustratedMessage.mjs","names":["styles"],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface IllustratedMessageProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n  /** The color of the illustrated message. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"default\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      color !== \"default\" && styles[color],\n      className,\n    );\n\n    const alphaColor = isAlphaColor(color) ? color : undefined;\n\n    const propsContext: PropsContext = {\n      Icon: {\n        className: styles.icon,\n        size: \"l\",\n      },\n      Heading: {\n        className: styles.heading,\n        color,\n      },\n      Text: {\n        className: styles.text,\n        color: alphaColor,\n      },\n      Button: {\n        color: alphaColor,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        className: styles.actionGroup,\n      },\n      ProgressBar: { className: styles.progressBar },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n    );\n  },\n);\n\nexport default IllustratedMessage;\n"],"mappings":";;;;;;;;;;AAkBA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,WAAW,UAAU,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpBA,kCAAO,oBACP,UAAU,aAAaA,kCAAO,QAC9B,SACF;CAEA,MAAM,aAAa,aAAa,KAAK,IAAI,QAAQ,KAAA;CAEjD,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAWA,kCAAO;GAClB,MAAM;EACR;EACA,SAAS;GACP,WAAWA,kCAAO;GAClB;EACF;EACA,MAAM;GACJ,WAAWA,kCAAO;GAClB,OAAO;EACT;EACA,QAAQ,EACN,OAAO,WACT;EACA,aAAa;GACX,eAAe;GACf,WAAWA,kCAAO;EACpB;EACA,aAAa,EAAE,WAAWA,kCAAO,YAAY;CAC/C;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACxB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACnB,CAAA;AAET,CACF"}
+{"version":3,"file":"IllustratedMessage.mjs","names":["styles"],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./IllustratedMessage.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nexport interface IllustratedMessageProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, FlowComponentProps {\n  /** The color of the illustrated message. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n}\n\n/** @flr-generate all */\nexport const IllustratedMessage = flowComponent(\n  \"IllustratedMessage\",\n  (props) => {\n    const { className, children, color = \"default\", ...rest } = props;\n\n    const rootClassName = clsx(\n      styles.illustratedMessage,\n      color !== \"default\" && styles[color],\n      className,\n    );\n\n    const alphaColor = isAlphaColor(color) ? color : undefined;\n\n    const propsContext: PropsContext = {\n      Icon: {\n        className: styles.icon,\n        size: \"l\",\n      },\n      Heading: {\n        className: styles.heading,\n        color,\n      },\n      Text: {\n        className: styles.text,\n        color: alphaColor,\n      },\n      Button: {\n        color: alphaColor,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        className: styles.actionGroup,\n      },\n      ProgressBar: { className: styles.progressBar },\n    };\n\n    return (\n      <div {...rest} className={rootClassName}>\n        <SectionHeadingReset>\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </SectionHeadingReset>\n      </div>\n    );\n  },\n);\n\nexport default IllustratedMessage;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,WAAW,UAAU,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpBA,kCAAO,oBACP,UAAU,aAAaA,kCAAO,QAC9B,SACF;CAEA,MAAM,aAAa,aAAa,KAAK,IAAI,QAAQ,KAAA;CAEjD,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAWA,kCAAO;GAClB,MAAM;EACR;EACA,SAAS;GACP,WAAWA,kCAAO;GAClB;EACF;EACA,MAAM;GACJ,WAAWA,kCAAO;GAClB,OAAO;EACT;EACA,QAAQ,EACN,OAAO,WACT;EACA,aAAa;GACX,eAAe;GACf,WAAWA,kCAAO;EACpB;EACA,aAAa,EAAE,WAAWA,kCAAO,YAAY;CAC/C;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACxB,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACH,CAAA;CAClB,CAAA;AAET,CACF"}

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

@@ -39,10 +39,6 @@ var Label = flowComponent("Label", (props) => {
 		Button: {
 			tunnel: rightTunnel,
 			size: "s"
-		},
-		Action: {
-			tunnel: rightTunnel,
-			Button: { tunnel: null }
 		}
 	};
 	return /* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n    Action: {\n      tunnel: rightTunnel,\n      Button: {\n        tunnel: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs

@@ -1,13 +1,16 @@
 "use client"
 /* */
+import { useLabelledBySectionHeading } from "../../../../../Section/context.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/List/components/Items/views/GridList/GridList.tsx
 /** @flr-generate all */
 var GridList = (props) => {
 	const { tileMaxWidth, emptyView, ...rest } = props;
+	const ariaLabelledBy = useLabelledBySectionHeading(rest);
 	return /* @__PURE__ */ jsx(Aria.GridList, {
 		...rest,
+		"aria-labelledby": ariaLabelledBy,
 		renderEmptyState: () => emptyView,
 		style: { gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))` }
 	});

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridList.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n  emptyView?: ReactNode;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, emptyView, ...rest } = props;\n\n  return (\n    <Aria.GridList\n      {...rest}\n      renderEmptyState={() => emptyView}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"mappings":";;;;;;AASA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,cAAc,WAAW,GAAG,SAAS;CAE7C,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACJ,wBAAwB;EACxB,OAAO,EACL,qBAAqB,4BAA4B,aAAa,WAChE;CACD,CAAA;AAEL"}
+{"version":3,"file":"GridList.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, ReactNode } from \"react\";\nimport { useLabelledBySectionHeading } from \"@/components/Section/context\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n  emptyView?: ReactNode;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, emptyView, ...rest } = props;\n  const ariaLabelledBy = useLabelledBySectionHeading(rest);\n\n  return (\n    <Aria.GridList\n      {...rest}\n      aria-labelledby={ariaLabelledBy}\n      renderEmptyState={() => emptyView}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"mappings":";;;;;;;AAUA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,cAAc,WAAW,GAAG,SAAS;CAC7C,MAAM,iBAAiB,4BAA4B,IAAI;CAEvD,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACJ,mBAAiB;EACjB,wBAAwB;EACxB,OAAO,EACL,qBAAqB,4BAA4B,aAAa,WAChE;CACD,CAAA;AAEL"}

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SectionHeadingReset } from "../../Section/context.mjs";
 import { useIsActivityActive } from "../../Activity/context.mjs";
 import DivView from "../../../views/DivView.mjs";
 import Overlay_module_default from "../Overlay.module.mjs";
@@ -104,7 +105,7 @@ var OverlayContent = (props) => {
 					fallback: /* @__PURE__ */ jsx(Fallback, {}),
 					children: /* @__PURE__ */ jsx(Aria.Dialog, {
 						"aria-labelledby": ariaLabelledBy,
-						children
+						children: /* @__PURE__ */ jsx(SectionHeadingReset, { children })
 					})
 				}) })
 			})

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n *\n * Hidden nodes don't count either: react-aria appends a `display: none`\n * description node whenever a DatePicker's value changes, and moving the\n * container for it on every keystroke resets the segment being typed into.\n */\nconst isHiddenNode = (node: Element): boolean =>\n  node instanceof HTMLElement &&\n  (node.hidden === true || node.style.display === \"none\");\n\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                {children}\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B;;;;;;;;;;;;AAalC,IAAM,gBAAgB,SACpB,gBAAgB,gBACf,KAAK,WAAW,QAAQ,KAAK,MAAM,YAAY;AAElD,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,KAAK,CAAC,aAAa,IAAI,GACrD,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAWA,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAWA,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
+{"version":3,"file":"OverlayContent.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n *\n * Hidden nodes don't count either: react-aria appends a `display: none`\n * description node whenever a DatePicker's value changes, and moving the\n * container for it on every keystroke resets the segment being typed into.\n */\nconst isHiddenNode = (node: Element): boolean =>\n  node instanceof HTMLElement &&\n  (node.hidden === true || node.style.display === \"none\");\n\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                <SectionHeadingReset>{children}</SectionHeadingReset>\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAM,4BAA4B;;;;;;;;;;;;AAalC,IAAM,gBAAgB,SACpB,gBAAgB,gBACf,KAAK,WAAW,QAAQ,KAAK,MAAM,YAAY;AAElD,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,KAAK,CAAC,aAAa,IAAI,GACrD,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAWA,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAWA,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC5B,UAAA,oBAAC,qBAAD,EAAsB,SAA8B,CAAA;KACzC,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}

package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SectionHeadingReset } from "../../../Section/context.mjs";
 import { useIsActivityActive } from "../../../Activity/context.mjs";
 import Popover_module_default from "../../Popover.module.mjs";
 import { popoverViewportPadding } from "../../viewportPadding.mjs";
@@ -21,6 +22,7 @@ var PopoverContent = (props) => {
 	const triggerRefFromContext = popoverContext && "triggerRef" in popoverContext ? popoverContext.triggerRef : void 0;
 	const idFromContext = popoverContext && "id" in popoverContext ? popoverContext.id : void 0;
 	const ContentComponent = isDialogContent ? Aria.Dialog : "div";
+	const content = /* @__PURE__ */ jsx(SectionHeadingReset, { children });
 	if (!isActivityActive) return null;
 	if (modality === "non-modal") {
 		const anchor = rest.triggerRef ?? triggerRefFromContext;
@@ -35,7 +37,7 @@ var PopoverContent = (props) => {
 			id: idFromContext,
 			triggerRef: anchor,
 			onOpenChange,
-			children
+			children: content
 		});
 	}
 	return /* @__PURE__ */ jsxs(Aria.Popover, {
@@ -51,7 +53,7 @@ var PopoverContent = (props) => {
 			children: /* @__PURE__ */ jsx(PopoverTip, {})
 		}), /* @__PURE__ */ jsx(ContentComponent, {
 			className: Popover_module_default.content,
-			children
+			children: content
 		})]
 	});
 };

package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { PopoverTip } from \"../PopoverTip\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isDialogContent?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  /** @internal Set by `CoachMark`; see `PopoverProps`. */\n  modality?: \"modal\" | \"non-modal\";\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef?: RefObject<Element | null>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n  const {\n    children,\n    className,\n    isDialogContent = false,\n    withTip,\n    onOpenChange,\n    ref,\n    isOpen,\n    width,\n    modality,\n    ...rest\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  // A trigger hands its popover a ref through the context react-aria sets up,\n  // and the non-modal popover has to anchor itself with it.\n  const popoverContext = useContext(Aria.PopoverContext);\n  const triggerRefFromContext =\n    popoverContext && \"triggerRef\" in popoverContext\n      ? popoverContext.triggerRef\n      : undefined;\n\n  // The trigger points its `aria-controls` at this id while the popover is\n  // open, so the popover has to carry it — react-aria's own only applies it\n  // when the popover is a dialog.\n  const idFromContext =\n    popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n  const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  if (modality === \"non-modal\") {\n    const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n    // Without an anchor there is nothing to position against. react-aria's own\n    // popover has the same requirement; it just throws further in.\n    if (!anchor) {\n      return null;\n    }\n\n    return (\n      <NonModalPopoverContent\n        {...rest}\n        className={className}\n        ref={ref}\n        isOpen={isOpen}\n        width={width}\n        withTip={withTip}\n        id={idFromContext}\n        triggerRef={anchor}\n        onOpenChange={onOpenChange}\n      >\n        {children}\n      </NonModalPopoverContent>\n    );\n  }\n\n  return (\n    <Aria.Popover\n      {...rest}\n      className={className}\n      containerPadding={popoverViewportPadding}\n      ref={ref}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      style={popoverWidthStyle(width)}\n    >\n      {withTip && (\n        <Aria.OverlayArrow className={styles.tip}>\n          <PopoverTip />\n        </Aria.OverlayArrow>\n      )}\n      <ContentComponent className={styles.content}>{children}</ContentComponent>\n    </Aria.Popover>\n  );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAWA,uBAAO;GACnC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACI,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAWA,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}
+{"version":3,"file":"PopoverContent.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { PopoverTip } from \"../PopoverTip\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isDialogContent?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  /** @internal Set by `CoachMark`; see `PopoverProps`. */\n  modality?: \"modal\" | \"non-modal\";\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef?: RefObject<Element | null>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n  const {\n    children,\n    className,\n    isDialogContent = false,\n    withTip,\n    onOpenChange,\n    ref,\n    isOpen,\n    width,\n    modality,\n    ...rest\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  // A trigger hands its popover a ref through the context react-aria sets up,\n  // and the non-modal popover has to anchor itself with it.\n  const popoverContext = useContext(Aria.PopoverContext);\n  const triggerRefFromContext =\n    popoverContext && \"triggerRef\" in popoverContext\n      ? popoverContext.triggerRef\n      : undefined;\n\n  // The trigger points its `aria-controls` at this id while the popover is\n  // open, so the popover has to carry it — react-aria's own only applies it\n  // when the popover is a dialog.\n  const idFromContext =\n    popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n  const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n  const content = <SectionHeadingReset>{children}</SectionHeadingReset>;\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  if (modality === \"non-modal\") {\n    const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n    // Without an anchor there is nothing to position against. react-aria's own\n    // popover has the same requirement; it just throws further in.\n    if (!anchor) {\n      return null;\n    }\n\n    return (\n      <NonModalPopoverContent\n        {...rest}\n        className={className}\n        ref={ref}\n        isOpen={isOpen}\n        width={width}\n        withTip={withTip}\n        id={idFromContext}\n        triggerRef={anchor}\n        onOpenChange={onOpenChange}\n      >\n        {content}\n      </NonModalPopoverContent>\n    );\n  }\n\n  return (\n    <Aria.Popover\n      {...rest}\n      className={className}\n      containerPadding={popoverViewportPadding}\n      ref={ref}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      style={popoverWidthStyle(width)}\n    >\n      {withTip && (\n        <Aria.OverlayArrow className={styles.tip}>\n          <PopoverTip />\n        </Aria.OverlayArrow>\n      )}\n      <ContentComponent className={styles.content}>{content}</ContentComponent>\n    </Aria.Popover>\n  );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,MAAM,UAAU,oBAAC,qBAAD,EAAsB,SAA8B,CAAA;CAEpE,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb,UAAA;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAWA,uBAAO;GACnC,UAAA,oBAAC,YAAD,CAAa,CAAA;EACI,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAWA,uBAAO;GAAU,UAAA;EAA0B,CAAA,CAC5D;;AAElB"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SectionHeadingProvider, useSectionHeading } from "./context.mjs";
 import Section_module_default from "./Section.module.mjs";
 import ContextMenuSectionView from "../../views/ContextMenuSectionView.mjs";
 import clsx from "clsx";
@@ -12,6 +13,7 @@ import { jsx } from "react/jsx-runtime";
 var Section = flowComponent("Section", (props) => {
 	const { children, className, ref, renderContextMenuSection, hideSeparator, ...rest } = props;
 	const headingId = useId();
+	const sectionHeading = useSectionHeading(headingId);
 	if (!children) return null;
 	if (renderContextMenuSection) return /* @__PURE__ */ jsx(ContextMenuSectionView, {
 		ref,
@@ -24,16 +26,18 @@ var Section = flowComponent("Section", (props) => {
 			id: headingId,
 			className: Section_module_default.heading
 		},
-		Header: { renderSectionHeader: true },
-		List: { "aria-labelledby": headingId }
+		Header: { renderSectionHeader: true }
 	};
 	return /* @__PURE__ */ jsx("section", {
 		...rest,
 		className: rootClassName,
 		ref,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
-			children
+		children: /* @__PURE__ */ jsx(SectionHeadingProvider, {
+			value: sectionHeading,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children
+			})
 		})
 	});
 }, { type: "layout" });

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

@@ -1 +1 @@
-{"version":3,"file":"Section.mjs","names":["styles"],"sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    const headingId = useId();\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      hideSeparator && styles.hideSeparator,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n      List: {\n        \"aria-labelledby\": headingId,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,UAAU,cACrB,YACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,0BACA,eACA,GAAG,SACD;CAEJ,MAAM,YAAY,MAAM;CAExB,IAAI,CAAC,UACH,OAAO;CAGT,IAAI,0BACF,OACE,oBAAC,wBAAD;EAA6B;EAC1B;CACqB,CAAA;CAI5B,MAAM,gBAAgB,KACpBA,uBAAO,SACP,iBAAiBA,uBAAO,eACxB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,IAAI;GACJ,WAAWA,uBAAO;EACpB;EACA,QAAQ,EACN,qBAAqB,KACvB;EACA,MAAM,EACJ,mBAAmB,UACrB;CACF;CAEA,OACE,oBAAC,WAAD;EAAS,GAAI;EAAM,WAAW;EAAoB;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Section.mjs","names":["styles"],"sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\nimport { SectionHeadingProvider, useSectionHeading } from \"./context\";\n\nexport interface SectionProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    const headingId = useId();\n    const sectionHeading = useSectionHeading(headingId);\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      hideSeparator && styles.hideSeparator,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <SectionHeadingProvider value={sectionHeading}>\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </SectionHeadingProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,UAAU,cACrB,YACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,0BACA,eACA,GAAG,SACD;CAEJ,MAAM,YAAY,MAAM;CACxB,MAAM,iBAAiB,kBAAkB,SAAS;CAElD,IAAI,CAAC,UACH,OAAO;CAGT,IAAI,0BACF,OACE,oBAAC,wBAAD;EAA6B;EAC1B;CACqB,CAAA;CAI5B,MAAM,gBAAgB,KACpBA,uBAAO,SACP,iBAAiBA,uBAAO,eACxB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,IAAI;GACJ,WAAWA,uBAAO;EACpB;EACA,QAAQ,EACN,qBAAqB,KACvB;CACF;CAEA,OACE,oBAAC,WAAD;EAAS,GAAI;EAAM,WAAW;EAAoB;EAChD,UAAA,oBAAC,wBAAD;GAAwB,OAAO;GAC7B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACA,CAAA;CACjB,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs

@@ -40,10 +40,6 @@ var SectionHeader = flowComponent("SectionHeader", (props) => {
 			tunnel: actionsTunnel,
 			Button: { size: "s" }
 		},
-		Action: {
-			tunnel: actionsTunnel,
-			Button: { tunnel: null }
-		},
 		Heading: { level: 2 },
 		Link: { tunnel: actionsTunnel }
 	};

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n  overlayTriggersTunneledTo,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n  PropsWithClassName &\n  RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n  \"SectionHeader\",\n  (props) => {\n    const { children, className, ref } = props;\n\n    const rootClassName = clsx(styles.sectionHeader, className);\n\n    const actionsTunnel = {\n      id: \"actions\",\n      component: \"SectionHeader\",\n    } as const;\n\n    const propsContext: PropsContext = {\n      ...overlayTriggersTunneledTo(actionsTunnel),\n      Switch: {\n        labelPosition: \"leading\",\n        tunnel: actionsTunnel,\n      },\n      Button: {\n        size: \"s\",\n        tunnel: actionsTunnel,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n        tunnel: actionsTunnel,\n        Button: {\n          tunnel: null,\n        },\n        Switch: {\n          tunnel: null,\n        },\n        Link: {\n          size: \"m\",\n          tunnel: null,\n        },\n      },\n      FileField: {\n        tunnel: actionsTunnel,\n        Button: { size: \"s\" },\n      },\n      Action: {\n        tunnel: actionsTunnel,\n        Button: {\n          tunnel: null,\n        },\n      },\n      Heading: {\n        level: 2,\n      },\n      Link: {\n        tunnel: actionsTunnel,\n      },\n    };\n\n    return (\n      <header ref={ref} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n          <div className={styles.actions}>\n            <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n          </div>\n        </PropsContextProvider>\n      </header>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,gBAAgB;EACpB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,aAAa;EAC1C,QAAQ;GACN,eAAe;GACf,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;GACA,QAAQ,EACN,QAAQ,KACV;GACA,MAAM;IACJ,MAAM;IACN,QAAQ;GACV;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;EACA,SAAS,EACP,OAAO,EACT;EACA,MAAM,EACJ,QAAQ,cACV;CACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAC3B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IAAK,WAAWA,6BAAO;IACrB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"SectionHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n  overlayTriggersTunneledTo,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n  PropsWithClassName &\n  RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n  \"SectionHeader\",\n  (props) => {\n    const { children, className, ref } = props;\n\n    const rootClassName = clsx(styles.sectionHeader, className);\n\n    const actionsTunnel = {\n      id: \"actions\",\n      component: \"SectionHeader\",\n    } as const;\n\n    const propsContext: PropsContext = {\n      ...overlayTriggersTunneledTo(actionsTunnel),\n      Switch: {\n        labelPosition: \"leading\",\n        tunnel: actionsTunnel,\n      },\n      Button: {\n        size: \"s\",\n        tunnel: actionsTunnel,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n        tunnel: actionsTunnel,\n        Button: {\n          tunnel: null,\n        },\n        Switch: {\n          tunnel: null,\n        },\n        Link: {\n          size: \"m\",\n          tunnel: null,\n        },\n      },\n      FileField: {\n        tunnel: actionsTunnel,\n        Button: { size: \"s\" },\n      },\n      Heading: {\n        level: 2,\n      },\n      Link: {\n        tunnel: actionsTunnel,\n      },\n    };\n\n    return (\n      <header ref={ref} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n          <div className={styles.actions}>\n            <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n          </div>\n        </PropsContextProvider>\n      </header>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,gBAAgB;EACpB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,aAAa;EAC1C,QAAQ;GACN,eAAe;GACf,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;GACA,QAAQ,EACN,QAAQ,KACV;GACA,MAAM;IACJ,MAAM;IACN,QAAQ;GACV;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,SAAS,EACP,OAAO,EACT;EACA,MAAM,EACJ,QAAQ,cACV;CACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAC3B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IAAK,WAAWA,6BAAO;IACrB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -0,0 +1,47 @@
+"use client"
+/* */
+import { createContext, createElement, useCallback, useContext, useLayoutEffect, useMemo, useState } from "react";
+//#region src/components/Section/context.ts
+var sectionHeadingContext = createContext(void 0);
+/** The heading state a `Section` provides for the given heading id. */
+var useSectionHeading = (id) => {
+	const [renderedCount, setRenderedCount] = useState(0);
+	const register = useCallback(() => {
+		setRenderedCount((count) => count + 1);
+		return () => setRenderedCount((count) => count - 1);
+	}, []);
+	return useMemo(() => ({
+		id,
+		isRendered: renderedCount > 0,
+		register
+	}), [
+		id,
+		renderedCount,
+		register
+	]);
+};
+var SectionHeadingProvider = sectionHeadingContext.Provider;
+/**
+* Ends the surrounding `Section`'s heading scope, for content that has a
+* heading of its own (`Accordion`, `Alert`, an overlay, …).
+*/
+var SectionHeadingReset = ({ children }) => createElement(sectionHeadingContext.Provider, { value: void 0 }, children);
+/** Marks the section heading as rendered while a heading carries its id. */
+var useRegisterSectionHeading = (id) => {
+	const sectionHeading = useContext(sectionHeadingContext);
+	const register = sectionHeading && id === sectionHeading.id ? sectionHeading.register : void 0;
+	useLayoutEffect(() => register?.(), [register]);
+};
+/**
+* The `aria-labelledby` of a grid or table: its own label, else the heading of
+* the surrounding `Section` once that heading renders.
+*/
+var useLabelledBySectionHeading = (props) => {
+	const sectionHeading = useContext(sectionHeadingContext);
+	if (props["aria-labelledby"] || props["aria-label"]) return props["aria-labelledby"];
+	return sectionHeading?.isRendered ? sectionHeading.id : void 0;
+};
+//#endregion
+export { SectionHeadingProvider, SectionHeadingReset, useLabelledBySectionHeading, useRegisterSectionHeading, useSectionHeading };
+
+//# sourceMappingURL=context.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/Section/context.ts"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport {\n  createContext,\n  createElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\ninterface SectionHeading {\n  /** The id the surrounding `Section` gives its heading. */\n  id: string;\n  /** Whether a heading currently renders with that id. */\n  isRendered: boolean;\n  /** Called by a heading that renders with the id; returns the cleanup. */\n  register: () => () => void;\n}\n\nconst sectionHeadingContext = createContext<SectionHeading | undefined>(\n  undefined,\n);\n\n/** The heading state a `Section` provides for the given heading id. */\nexport const useSectionHeading = (id: string): SectionHeading => {\n  const [renderedCount, setRenderedCount] = useState(0);\n\n  const register = useCallback(() => {\n    setRenderedCount((count) => count + 1);\n    return () => setRenderedCount((count) => count - 1);\n  }, []);\n\n  return useMemo(\n    () => ({ id, isRendered: renderedCount > 0, register }),\n    [id, renderedCount, register],\n  );\n};\n\nexport const SectionHeadingProvider = sectionHeadingContext.Provider;\n\n/**\n * Ends the surrounding `Section`'s heading scope, for content that has a\n * heading of its own (`Accordion`, `Alert`, an overlay, …).\n */\nexport const SectionHeadingReset: FC<PropsWithChildren> = ({ children }) =>\n  createElement(sectionHeadingContext.Provider, { value: undefined }, children);\n\n/** Marks the section heading as rendered while a heading carries its id. */\nexport const useRegisterSectionHeading = (id: string | undefined) => {\n  const sectionHeading = useContext(sectionHeadingContext);\n  const register =\n    sectionHeading && id === sectionHeading.id\n      ? sectionHeading.register\n      : undefined;\n\n  useLayoutEffect(() => register?.(), [register]);\n};\n\n/**\n * The `aria-labelledby` of a grid or table: its own label, else the heading of\n * the surrounding `Section` once that heading renders.\n */\nexport const useLabelledBySectionHeading = (props: {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}): string | undefined => {\n  const sectionHeading = useContext(sectionHeadingContext);\n\n  if (props[\"aria-labelledby\"] || props[\"aria-label\"]) {\n    return props[\"aria-labelledby\"];\n  }\n\n  return sectionHeading?.isRendered ? sectionHeading.id : undefined;\n};\n"],"mappings":";;;;AAoBA,IAAM,wBAAwB,cAC5B,KAAA,CACF;;AAGA,IAAa,qBAAqB,OAA+B;CAC/D,MAAM,CAAC,eAAe,oBAAoB,SAAS,CAAC;CAEpD,MAAM,WAAW,kBAAkB;EACjC,kBAAkB,UAAU,QAAQ,CAAC;EACrC,aAAa,kBAAkB,UAAU,QAAQ,CAAC;CACpD,GAAG,CAAC,CAAC;CAEL,OAAO,eACE;EAAE;EAAI,YAAY,gBAAgB;EAAG;CAAS,IACrD;EAAC;EAAI;EAAe;CAAQ,CAC9B;AACF;AAEA,IAAa,yBAAyB,sBAAsB;;;;;AAM5D,IAAa,uBAA8C,EAAE,eAC3D,cAAc,sBAAsB,UAAU,EAAE,OAAO,KAAA,EAAU,GAAG,QAAQ;;AAG9E,IAAa,6BAA6B,OAA2B;CACnE,MAAM,iBAAiB,WAAW,qBAAqB;CACvD,MAAM,WACJ,kBAAkB,OAAO,eAAe,KACpC,eAAe,WACf,KAAA;CAEN,sBAAsB,WAAW,GAAG,CAAC,QAAQ,CAAC;AAChD;;;;;AAMA,IAAa,+BAA+B,UAGlB;CACxB,MAAM,iBAAiB,WAAW,qBAAqB;CAEvD,IAAI,MAAM,sBAAsB,MAAM,eACpC,OAAO,MAAM;CAGf,OAAO,gBAAgB,aAAa,eAAe,KAAK,KAAA;AAC1D"}