@mittwald/flow-react-components 1.4.0-next.0 → 1.4.0-next.10

package/dist/js/_virtual/_33.locale.mjs

@@ -1,22 +1,16 @@
 "use client"
 /* */
-//#region \0.locale.json@72ba2ce40f190df671686fec50c04ddf
+//#region \0.locale.json@16189d7d260d7331b0e0a1936d5c7c52
 var __locale_default = {
 	"de-DE": {
-		"validation.max": "Maximale Anzahl von {number} erreicht",
-		"validation.maxLength": "Bitte gib höchstens {number} Zeichen ein",
-		"validation.min": "Minimale Anzahl von {number} noch nicht erreicht",
-		"validation.minLength": "Bitte gib mindestens {number} Zeichen ein",
-		"validation.pattern": "Entspricht nicht dem erwarteten Format: {pattern}",
-		"validation.required": "Dieses Feld ist erforderlich"
+		"characters": "{maxCount, select, 0 {{count}} other {{count}/{maxCount}}} Zeichen",
+		"password.hide": "Passwort verbergen",
+		"password.show": "Passwort anzeigen"
 	},
 	"en-US": {
-		"validation.max": "Maximum number of {number} reached",
-		"validation.maxLength": "Please enter at most {number} characters",
-		"validation.min": "Minimum number of {number} has not yet been reached",
-		"validation.minLength": "Please enter at least {number} characters",
-		"validation.pattern": "Does not match the expected format: {pattern}",
-		"validation.required": "This field is required"
+		"characters": "{maxCount, select, 0 {{count}} other {{count}/{maxCount}}} characters",
+		"password.hide": "Show password",
+		"password.show": "Hide password"
 	}
 };
 //#endregion

package/dist/js/_virtual/_34.locale.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+//#region \0.locale.json@72ba2ce40f190df671686fec50c04ddf
+var __locale_default = {
+	"de-DE": {
+		"validation.max": "Maximale Anzahl von {number} erreicht",
+		"validation.maxLength": "Bitte gib höchstens {number} Zeichen ein",
+		"validation.min": "Minimale Anzahl von {number} noch nicht erreicht",
+		"validation.minLength": "Bitte gib mindestens {number} Zeichen ein",
+		"validation.pattern": "Entspricht nicht dem erwarteten Format: {pattern}",
+		"validation.required": "Dieses Feld ist erforderlich"
+	},
+	"en-US": {
+		"validation.max": "Maximum number of {number} reached",
+		"validation.maxLength": "Please enter at most {number} characters",
+		"validation.min": "Minimum number of {number} has not yet been reached",
+		"validation.minLength": "Please enter at least {number} characters",
+		"validation.pattern": "Does not match the expected format: {pattern}",
+		"validation.required": "This field is required"
+	}
+};
+//#endregion
+export { __locale_default as default };

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

@@ -22,6 +22,7 @@ var CheckboxButton = flowComponent("CheckboxButton", (props) => {
 		className: clsx(fieldProps.className, CheckboxButton_module_default.checkboxButton, className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Checkbox, {
 			...rest,
+			className: CheckboxButton_module_default.checkbox,
 			inputClassName: clsx(inputClassName, CheckboxButton_module_default.input),
 			children: /* @__PURE__ */ jsx(PropsContextProvider, {
 				props: mergedPropsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox {...rest} inputClassName={clsx(inputClassName, styles.input)}>\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,YACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,8BAAO,gBAAgB,SAAS;EAFxE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GAAU,GAAI;GAAM,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GACnE,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox\n          {...rest}\n          className={styles.checkbox}\n          inputClassName={clsx(inputClassName, styles.input)}\n        >\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,YACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,8BAAO,gBAAgB,SAAS;EAFxE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,8BAAO;GAClB,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GAEjD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -6,14 +6,16 @@ var input = "flow--checkbox-button--input";
 var readonly = "flow--checkbox-button--readonly";
 var content = "flow--checkbox-button--content";
 var label = "flow--checkbox-button--label";
+var checkbox = "flow--checkbox-button--checkbox";
 var CheckboxButton_module_default = {
 	checkboxButton,
 	input,
 	readonly,
 	content,
-	label
+	label,
+	checkbox
 };
 //#endregion
-export { checkboxButton, content, CheckboxButton_module_default as default, input, label, readonly };
+export { checkbox, checkboxButton, content, CheckboxButton_module_default as default, input, label, readonly };
 
 //# sourceMappingURL=CheckboxButton.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.checkboxButton {\n  @include formControl.formHiddenInputScrollBehaviorFix;\n\n  align-self: normal;\n  width: fit-content;\n\n  .input {\n    @include formControl.formControl();\n\n    & {\n      order: unset;\n    }\n\n    /* With content */\n    &:focus-within:not([data-selected], [data-focus-visible]) {\n      border-color: var(--form-control--border-color--default);\n    }\n\n    &[data-invalid]:not([data-selected]) {\n      border-color: var(--form-control--border-color--invalid);\n      background-color: var(--form-control--background-color--invalid);\n    }\n\n    &:has(.content) {\n      display: grid;\n      grid-template-areas:\n        \"icon label\"\n        \".    content\";\n      grid-template-rows: auto 1fr;\n\n      .label {\n        font-weight: var(--font-weight--bold);\n      }\n    }\n  }\n\n  /* Elements */\n  .label {\n    grid-area: label;\n  }\n\n  .content {\n    grid-area: content;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CheckboxButton.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.checkboxButton {\n  @include formControl.formHiddenInputScrollBehaviorFix;\n\n  align-self: normal;\n  width: fit-content;\n\n  .input {\n    @include formControl.formControl();\n\n    & {\n      order: unset;\n      height: 100%;\n    }\n\n    /* With content */\n    &:focus-within:not([data-selected], [data-focus-visible]) {\n      border-color: var(--form-control--border-color--default);\n    }\n\n    &[data-invalid]:not([data-selected]) {\n      border-color: var(--form-control--border-color--invalid);\n      background-color: var(--form-control--background-color--invalid);\n    }\n\n    &:has(.content) {\n      display: grid;\n      grid-template:\n        \"icon label\" auto\n        \".    content\" 1fr\n        / auto 1fr;\n\n      .label {\n        font-weight: var(--font-weight--bold);\n      }\n    }\n  }\n\n  /* Elements */\n  .checkbox {\n    flex-grow: 1;\n  }\n\n  .label {\n    grid-area: label;\n  }\n\n  .content {\n    grid-area: content;\n  }\n}\n"],"mappings":""}

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

@@ -21,9 +21,13 @@ var ColumnLayout = flowComponent("ColumnLayout", (props) => {
 	l?.map((v, i) => {
 		if (v === null) elementClassName = clsx(elementClassName, styleClassname(ColumnLayout_module_default, `hide-l-${i + 1}`));
 	});
-	const columnsS = s ? getColumns(s) : "1fr";
-	const columnsM = m ? getColumns(m) : s ? columnsS : "1fr 1fr";
-	const columnsL = l ? getColumns(l) : m || s ? columnsM : "1fr 1fr 1fr";
+	const columnsS = getColumns(s ?? [1]);
+	const columnsM = m ? getColumns(m) : s ? columnsS : getColumns([1, 1]);
+	const columnsL = l ? getColumns(l) : m || s ? columnsM : getColumns([
+		1,
+		1,
+		1
+	]);
 	const style = {
 		...styleFromProps,
 		"--column-layout--columns-s": columnsS,

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnLayout.mjs","names":[],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n  T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n>\n  extends\n    PropsWithChildren,\n    PropsWithElementType<T>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElementTagNameMap[T]> {\n  /** Column layout for container size s. */\n  s?: (number | null)[];\n  /** Column layout for container size m. */\n  m?: (number | null)[];\n  /** Column layout for container size l. */\n  l?: (number | null)[];\n  /**\n   * Size of the row and column gap between the content blocks inside the column\n   * layout.\n   *\n   * @default \"m\"\n   */\n  gap?: GapSize;\n  /** Size of the row gap between the content blocks inside the column layout. */\n  rowGap?: GapSize;\n  /** Size of the column gap between the content blocks inside the column layout. */\n  columnGap?: GapSize;\n}\n\n/** @flr-generate all */\nexport const ColumnLayout = flowComponent(\n  \"ColumnLayout\",\n  (props) => {\n    const {\n      children,\n      className,\n      s,\n      m,\n      l,\n      gap = \"m\",\n      rowGap = gap,\n      columnGap = gap,\n      elementType = \"div\",\n      \"aria-label\": ariaLabel,\n      ref,\n      style: styleFromProps,\n    } = props;\n\n    let elementClassName: string = styles.columnLayout;\n\n    s?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-s-${i + 1}`),\n        );\n      }\n    });\n    m?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-m-${i + 1}`),\n        );\n      }\n    });\n    l?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-l-${i + 1}`),\n        );\n      }\n    });\n\n    const columnsS = s ? getColumns(s) : \"1fr\";\n    const columnsM = m ? getColumns(m) : s ? columnsS : \"1fr 1fr\";\n    const columnsL = l ? getColumns(l) : m || s ? columnsM : \"1fr 1fr 1fr\";\n\n    const style = {\n      ...styleFromProps,\n      \"--column-layout--columns-s\": columnsS,\n      \"--column-layout--columns-m\": columnsM,\n      \"--column-layout--columns-l\": columnsL,\n      \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n      \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n    } as CSSProperties;\n\n    const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      Section: {\n        hideSeparator: true,\n      },\n    };\n\n    return (\n      <div className={rootClassName} style={style}>\n        <Element\n          ref={ref as never}\n          aria-label={ariaLabel}\n          className={elementClassName}\n        >\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </Element>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ColumnLayout;\n"],"mappings":";;;;;;;;;;;AA8CA,IAAa,eAAe,cAC1B,iBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,GACA,GACA,GACA,MAAM,KACN,SAAS,KACT,YAAY,KACZ,cAAc,OACd,cAAc,WACd,KACA,OAAO,mBACL;CAEJ,IAAI,mBAA2B,4BAAO;CAEtC,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CAED,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI;CACrC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW;CACpD,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,KAAK,IAAI,WAAW;CAEzD,MAAM,QAAQ;EACZ,GAAG;EACH,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,4BAA4B,6BAA6B,OAAO;EAChE,+BAA+B,6BAA6B,UAAU;CACxE;CAEA,MAAM,gBAAgB,KAAK,4BAAO,uBAAuB,SAAS;CAUlE,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB;EACpC,UAAA,oBAAC,aAAD;GACO;GACL,cAAY;GACZ,WAAW;GAEX,UAAA,oBAAC,sBAAD;IAAsB,OAAO,EAZjC,SAAS,EACP,eAAe,KACjB,EAUiC;IAC1B;GACmB,CAAA;EACf,CAAA;CACN,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"ColumnLayout.mjs","names":[],"sources":["../../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n  T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n>\n  extends\n    PropsWithChildren,\n    PropsWithElementType<T>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElementTagNameMap[T]> {\n  /** Column layout for container size s. */\n  s?: (number | null)[];\n  /** Column layout for container size m. */\n  m?: (number | null)[];\n  /** Column layout for container size l. */\n  l?: (number | null)[];\n  /**\n   * Size of the row and column gap between the content blocks inside the column\n   * layout.\n   *\n   * @default \"m\"\n   */\n  gap?: GapSize;\n  /** Size of the row gap between the content blocks inside the column layout. */\n  rowGap?: GapSize;\n  /** Size of the column gap between the content blocks inside the column layout. */\n  columnGap?: GapSize;\n}\n\n/** @flr-generate all */\nexport const ColumnLayout = flowComponent(\n  \"ColumnLayout\",\n  (props) => {\n    const {\n      children,\n      className,\n      s,\n      m,\n      l,\n      gap = \"m\",\n      rowGap = gap,\n      columnGap = gap,\n      elementType = \"div\",\n      \"aria-label\": ariaLabel,\n      ref,\n      style: styleFromProps,\n    } = props;\n\n    let elementClassName: string = styles.columnLayout;\n\n    s?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-s-${i + 1}`),\n        );\n      }\n    });\n    m?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-m-${i + 1}`),\n        );\n      }\n    });\n    l?.map((v, i) => {\n      if (v === null) {\n        elementClassName = clsx(\n          elementClassName,\n          styleClassname(styles, `hide-l-${i + 1}`),\n        );\n      }\n    });\n\n    const columnsS = getColumns(s ?? [1]);\n    const columnsM = m ? getColumns(m) : s ? columnsS : getColumns([1, 1]);\n    const columnsL = l\n      ? getColumns(l)\n      : m || s\n        ? columnsM\n        : getColumns([1, 1, 1]);\n\n    const style = {\n      ...styleFromProps,\n      \"--column-layout--columns-s\": columnsS,\n      \"--column-layout--columns-m\": columnsM,\n      \"--column-layout--columns-l\": columnsL,\n      \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n      \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n    } as CSSProperties;\n\n    const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n    const Element = elementType;\n\n    const propsContext: PropsContext = {\n      Section: {\n        hideSeparator: true,\n      },\n    };\n\n    return (\n      <div className={rootClassName} style={style}>\n        <Element\n          ref={ref as never}\n          aria-label={ariaLabel}\n          className={elementClassName}\n        >\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </Element>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ColumnLayout;\n"],"mappings":";;;;;;;;;;;AA8CA,IAAa,eAAe,cAC1B,iBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,GACA,GACA,GACA,MAAM,KACN,SAAS,KACT,YAAY,KACZ,cAAc,OACd,cAAc,WACd,KACA,OAAO,mBACL;CAEJ,IAAI,mBAA2B,4BAAO;CAEtC,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CACD,GAAG,KAAK,GAAG,MAAM;EACf,IAAI,MAAM,MACR,mBAAmB,KACjB,kBACA,eAAe,6BAAQ,UAAU,IAAI,GAAG,CAC1C;CAEJ,CAAC;CAED,MAAM,WAAW,WAAW,KAAK,CAAC,CAAC,CAAC;CACpC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,WAAW,CAAC,GAAG,CAAC,CAAC;CACrE,MAAM,WAAW,IACb,WAAW,CAAC,IACZ,KAAK,IACH,WACA,WAAW;EAAC;EAAG;EAAG;CAAC,CAAC;CAE1B,MAAM,QAAQ;EACZ,GAAG;EACH,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,4BAA4B,6BAA6B,OAAO;EAChE,+BAA+B,6BAA6B,UAAU;CACxE;CAEA,MAAM,gBAAgB,KAAK,4BAAO,uBAAuB,SAAS;CAUlE,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB;EACpC,UAAA,oBAAC,aAAD;GACO;GACL,cAAY;GACZ,WAAW;GAEX,UAAA,oBAAC,sBAAD;IAAsB,OAAO,EAZjC,SAAS,EACP,eAAe,KACjB,EAUiC;IAC1B;GACmB,CAAA;EACf,CAAA;CACN,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

package/dist/js/packages/components/src/components/ColumnLayout/lib/getColumns.mjs

@@ -2,7 +2,7 @@
 /* */
 //#region src/components/ColumnLayout/lib/getColumns.ts
 var getColumns = (values) => {
-	return values.filter((v) => v !== null).map((value) => `${value}fr`).join(" ");
+	return values.filter((v) => v !== null).map((value) => `minmax(0, ${value}fr)`).join(" ");
 };
 //#endregion
 export { getColumns };

package/dist/js/packages/components/src/components/ColumnLayout/lib/getColumns.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getColumns.mjs","names":[],"sources":["../../../../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"sourcesContent":["export const getColumns = (values: (number | null)[]): string => {\n  const fractionValues = values\n    .filter((v) => v !== null)\n    .map((value) => `${value}fr`);\n\n  return fractionValues.join(\" \");\n};\n"],"mappings":";;;AAAA,IAAa,cAAc,WAAsC;CAK/D,OAJuB,OACpB,QAAQ,MAAM,MAAM,IAAI,CAAC,CACzB,KAAK,UAAU,GAAG,MAAM,GAEpB,CAAA,CAAe,KAAK,GAAG;AAChC"}
+{"version":3,"file":"getColumns.mjs","names":[],"sources":["../../../../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"sourcesContent":["export const getColumns = (values: (number | null)[]): string => {\n  const fractionValues = values\n    .filter((v) => v !== null)\n    .map((value) => `minmax(0, ${value}fr)`);\n\n  return fractionValues.join(\" \");\n};\n"],"mappings":";;;AAAA,IAAa,cAAc,WAAsC;CAK/D,OAJuB,OACpB,QAAQ,MAAM,MAAM,IAAI,CAAC,CACzB,KAAK,UAAU,aAAa,MAAM,IAE9B,CAAA,CAAe,KAAK,GAAG;AAChC"}

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

@@ -10,16 +10,19 @@ import { closesOnSelect, getAriaSelectionMode, getMenuItemSelectionVariant } fro
 import ContextMenuContentView from "../../views/ContextMenuContentView.mjs";
 import ContextMenu_module_default from "./ContextMenu.module.mjs";
 import { OverlayContentSuspendWatcher } from "../../lib/controller/overlay/OverlayContentSuspendWatcher.mjs";
-import { jsx } from "react/jsx-runtime";
+import { ContextMenuSelectAll } from "./components/ContextMenuSelectAll/ContextMenuSelectAll.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ContextMenu/ContextMenu.tsx
 /** @flr-generate all */
 var ContextMenu = flowComponent("ContextMenu", (props) => {
-	const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, ref, controller: overlayControllerFromProps, ...rest } = props;
+	const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, showSelectAll, ref, controller: overlayControllerFromProps, ...rest } = props;
 	const overlayControllerFromContext = useOverlayController("ContextMenu", { reuseControllerFromContext: true });
 	const overlayController = overlayControllerFromProps ?? overlayControllerFromContext;
+	const selectionVariant = getMenuItemSelectionVariant(selectionMode);
+	const selectAll = showSelectAll && selectionMode === "multiple" && /* @__PURE__ */ jsx(ContextMenuSelectAll, {});
 	const propsContext = {
 		MenuItem: {
-			selectionVariant: getMenuItemSelectionVariant(selectionMode),
+			selectionVariant,
 			Avatar: { size: "l" }
 		},
 		Section: {
@@ -38,7 +41,7 @@ var ContextMenu = flowComponent("ContextMenu", (props) => {
 			children: /* @__PURE__ */ jsx(OverlayContextProvider, {
 				type: "ContextMenu",
 				controller: overlayController,
-				children: /* @__PURE__ */ jsx(ContextMenuContentView, {
+				children: /* @__PURE__ */ jsxs(ContextMenuContentView, {
 					className: ContextMenu_module_default.contextMenu,
 					onAction,
 					selectionMode: getAriaSelectionMode(selectionMode),
@@ -48,13 +51,13 @@ var ContextMenu = flowComponent("ContextMenu", (props) => {
 					onSelectionChange,
 					renderEmptyState,
 					ref,
-					children: /* @__PURE__ */ jsx(PropsContextProvider, {
+					children: [selectAll, /* @__PURE__ */ jsx(PropsContextProvider, {
 						props: propsContext,
 						children: /* @__PURE__ */ jsx(Action, {
 							closeOverlay: closesOnSelect(selectionMode),
 							children
 						})
-					})
+					})]
 				})
 			})
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  closesOnSelect,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\n\nexport interface ContextMenuProps\n  extends\n    Omit<PopoverProps, \"withTip\" | \"modality\">,\n    Pick<\n      Aria.MenuProps<MenuItemProps>,\n      | \"onAction\"\n      | \"selectedKeys\"\n      | \"defaultSelectedKeys\"\n      | \"onSelectionChange\"\n      | \"disabledKeys\"\n      | \"renderEmptyState\"\n    >,\n    FlowComponentProps {\n  /** The type of selection that is allowed in the context menu. */\n  selectionMode?: ContextMenuSelectionMode;\n  /** Sets the context menu to a fixed width. */\n  width?: string | number;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n  const {\n    children,\n    onAction,\n    selectionMode,\n    selectedKeys,\n    defaultSelectedKeys,\n    disabledKeys,\n    onSelectionChange,\n    renderEmptyState,\n    ref,\n    controller: overlayControllerFromProps,\n    ...rest\n  } = props;\n\n  const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n    reuseControllerFromContext: true,\n  });\n\n  const overlayController =\n    overlayControllerFromProps ?? overlayControllerFromContext;\n\n  const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n  const propsContext: PropsContext = {\n    MenuItem: {\n      selectionVariant,\n      Avatar: {\n        size: \"l\",\n      },\n    },\n\n    Section: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n      renderContextMenuSection: true,\n    },\n\n    ContextMenuSection: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n    },\n  };\n\n  return (\n    <OverlayContentSuspendWatcher overlayController={overlayController}>\n      <Popover\n        {...rest}\n        className={styles.popover}\n        controller={overlayController}\n        isDialogContent={false}\n      >\n        <OverlayContextProvider\n          type=\"ContextMenu\"\n          controller={overlayController}\n        >\n          <ContextMenuContentView\n            className={styles.contextMenu}\n            onAction={onAction}\n            selectionMode={getAriaSelectionMode(selectionMode)}\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n            disabledKeys={disabledKeys}\n            onSelectionChange={onSelectionChange}\n            renderEmptyState={renderEmptyState}\n            ref={ref}\n          >\n            <PropsContextProvider props={propsContext}>\n              <Action closeOverlay={closesOnSelect(selectionMode)}>\n                {children}\n              </Action>\n            </PropsContextProvider>\n          </ContextMenuContentView>\n        </OverlayContextProvider>\n      </Popover>\n    </OverlayContentSuspendWatcher>\n  );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAwCA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,KACA,YAAY,4BACZ,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAIhC,MAAM,eAA6B;EACjC,UAAU;GACR,kBAJqB,4BAA4B,aAIjD;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAW,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,oBAAC,wBAAD;KACE,WAAW,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KACb;KAEL,UAAA,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA;IACA,CAAA;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}
+{"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  closesOnSelect,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n  extends\n    Omit<PopoverProps, \"withTip\" | \"modality\">,\n    Pick<\n      Aria.MenuProps<MenuItemProps>,\n      | \"onAction\"\n      | \"selectedKeys\"\n      | \"defaultSelectedKeys\"\n      | \"onSelectionChange\"\n      | \"disabledKeys\"\n      | \"renderEmptyState\"\n    >,\n    FlowComponentProps {\n  /** The type of selection that is allowed in the context menu. */\n  selectionMode?: ContextMenuSelectionMode;\n  /** Sets the context menu to a fixed width. */\n  width?: string | number;\n  /**\n   * Adds a first entry that selects or deselects all items at once. Only\n   * applies to `selectionMode=\"multiple\"`.\n   */\n  showSelectAll?: boolean;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n  const {\n    children,\n    onAction,\n    selectionMode,\n    selectedKeys,\n    defaultSelectedKeys,\n    disabledKeys,\n    onSelectionChange,\n    renderEmptyState,\n    showSelectAll,\n    ref,\n    controller: overlayControllerFromProps,\n    ...rest\n  } = props;\n\n  const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n    reuseControllerFromContext: true,\n  });\n\n  const overlayController =\n    overlayControllerFromProps ?? overlayControllerFromContext;\n\n  const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n  const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n    <ContextMenuSelectAll />\n  );\n\n  const propsContext: PropsContext = {\n    MenuItem: {\n      selectionVariant,\n      Avatar: {\n        size: \"l\",\n      },\n    },\n\n    Section: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n      renderContextMenuSection: true,\n    },\n\n    ContextMenuSection: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n    },\n  };\n\n  return (\n    <OverlayContentSuspendWatcher overlayController={overlayController}>\n      <Popover\n        {...rest}\n        className={styles.popover}\n        controller={overlayController}\n        isDialogContent={false}\n      >\n        <OverlayContextProvider\n          type=\"ContextMenu\"\n          controller={overlayController}\n        >\n          <ContextMenuContentView\n            className={styles.contextMenu}\n            onAction={onAction}\n            selectionMode={getAriaSelectionMode(selectionMode)}\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n            disabledKeys={disabledKeys}\n            onSelectionChange={onSelectionChange}\n            renderEmptyState={renderEmptyState}\n            ref={ref}\n          >\n            {selectAll}\n            <PropsContextProvider props={propsContext}>\n              <Action closeOverlay={closesOnSelect(selectionMode)}>\n                {children}\n              </Action>\n            </PropsContextProvider>\n          </ContextMenuContentView>\n        </OverlayContextProvider>\n      </Popover>\n    </OverlayContentSuspendWatcher>\n  );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,YAAY,4BACZ,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAW,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,WAAW,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KACb;KATP,UAAA,CAWG,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}

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

@@ -4,12 +4,14 @@
 var contextMenu = "flow--context-menu";
 var section = "flow--context-menu--section";
 var popover = "flow--context-menu--popover";
+var selectAll = "flow--context-menu--select-all";
 var ContextMenu_module_default = {
 	contextMenu,
 	section,
-	popover
+	popover,
+	selectAll
 };
 //#endregion
-export { contextMenu, ContextMenu_module_default as default, popover, section };
+export { contextMenu, ContextMenu_module_default as default, popover, section, selectAll };
 
 //# sourceMappingURL=ContextMenu.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.module.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.module.scss"],"sourcesContent":[".contextMenu {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n  padding: var(--popover--padding--s);\n\n  // A consumer-placed `Separator`. Its `flow--separator` class also covers the\n  // vertical `<div>` variant, which must not get this block margin.\n  // stylelint-disable-next-line selector-max-type -- see above\n  > hr {\n    margin-block: var(--popover--spacing);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n\n  &:has(:global(.flow--avatar)) {\n    align-items: center;\n    padding-top: var(--menu--item-to-item-spacing);\n  }\n}\n\n.popover {\n  max-width: fit-content;\n}\n"],"mappings":""}
+{"version":3,"file":"ContextMenu.module.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.module.scss"],"sourcesContent":[".contextMenu {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n  padding: var(--popover--padding--s);\n\n  // A consumer-placed `Separator`. Its `flow--separator` class also covers the\n  // vertical `<div>` variant, which must not get this block margin.\n  // stylelint-disable-next-line selector-max-type -- see above\n  > hr {\n    margin-block: var(--popover--spacing);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--menu--item-to-item-spacing);\n\n  &:has(:global(.flow--avatar)) {\n    align-items: center;\n    padding-top: var(--menu--item-to-item-spacing);\n  }\n}\n\n.popover {\n  max-width: fit-content;\n}\n\n.selectAll {\n  margin-block-end: var(--menu--select-all-to-item-spacing);\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.mjs

@@ -0,0 +1,86 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { Text } from "../../../Text/Text.mjs";
+import MenuItem_module_default from "../../../MenuItem/MenuItem.module.mjs";
+import { MenuItemContent } from "../../../MenuItem/components/MenuItemContent/MenuItemContent.mjs";
+import ContextMenu_module_default from "../../ContextMenu.module.mjs";
+import __locale_default from "../../../../../../../_virtual/_13.locale.mjs";
+import { useContext, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.tsx
+var selectAllSectionId = "flow--context-menu--select-all";
+/**
+* Keys that share the menu's selection: enabled items at the top level and in
+* sections without a selection mode of their own.
+*/
+var getSelectableKeys = (state) => {
+	const keys = [];
+	const collect = (nodes) => {
+		for (const node of nodes) if (node.type === "item") {
+			if (!state.selectionManager.isDisabled(node.key)) keys.push(node.key);
+		} else if (node.type === "section" && node.key !== selectAllSectionId && node.props?.selectionMode === void 0) collect(state.collection.getChildren?.(node.key) ?? node.childNodes);
+	};
+	collect(state.collection);
+	return keys;
+};
+/**
+* Rendered by the visible menu item. The collection renders the item's element
+* a second time outside the menu, where `MenuStateContext` is missing.
+*/
+var SelectAllMenuItemContent = (props) => {
+	const { selectAll, ...renderProps } = props;
+	const state = useContext(Aria.MenuStateContext);
+	const formatter = useLocalizedStringFormatter(__locale_default, "ContextMenu");
+	const selectionManager = state?.selectionManager;
+	const keys = state ? getSelectableKeys(state) : [];
+	const selectedCount = keys.filter((key) => selectionManager?.isSelected(key)).length;
+	const isEverySelected = keys.length > 0 && selectedCount === keys.length;
+	const isIndeterminate = selectedCount > 0 && !isEverySelected;
+	selectAll.current = {
+		isEverySelected,
+		toggle: () => {
+			if (!selectionManager) return;
+			const keySet = new Set(keys);
+			const otherSelectedKeys = [...selectionManager.selectedKeys].filter((key) => !keySet.has(key));
+			selectionManager.setSelectedKeys(isEverySelected ? otherSelectedKeys : [...otherSelectedKeys, ...keys]);
+		}
+	};
+	return /* @__PURE__ */ jsx(MenuItemContent, {
+		...renderProps,
+		selectionMode: "multiple",
+		isSelected: isEverySelected,
+		isIndeterminate,
+		children: /* @__PURE__ */ jsx(Text, { children: formatter.format(isEverySelected ? "deselectAll" : "selectAll") })
+	});
+};
+var SelectAllMenuItem = () => {
+	const selectAll = useRef(void 0);
+	const formatter = useLocalizedStringFormatter(__locale_default, "ContextMenu");
+	return /* @__PURE__ */ jsx(Aria.MenuItem, {
+		id: `${selectAllSectionId}--item`,
+		textValue: formatter.format("selectAll"),
+		shouldCloseOnSelect: false,
+		onAction: () => selectAll.current?.toggle(),
+		className: MenuItem_module_default.menuItem,
+		children: (renderProps) => /* @__PURE__ */ jsx(SelectAllMenuItemContent, {
+			...renderProps,
+			selectAll
+		})
+	});
+};
+/**
+* The entry lives in a section without selection, so pressing it runs its
+* action only and sets the whole selection in one change.
+*/
+var ContextMenuSelectAll = () => /* @__PURE__ */ jsx(Aria.MenuSection, {
+	id: selectAllSectionId,
+	selectionMode: "none",
+	className: ContextMenu_module_default.selectAll,
+	children: /* @__PURE__ */ jsx(SelectAllMenuItem, {})
+});
+//#endregion
+export { ContextMenuSelectAll, ContextMenuSelectAll as default };
+
+//# sourceMappingURL=ContextMenuSelectAll.mjs.map

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuSelectAll.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { useContext, useRef, type FC } from \"react\";\nimport type { Key, Node } from \"@react-types/shared\";\nimport type { TreeState } from \"react-stately\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport menuItemStyles from \"@/components/MenuItem/MenuItem.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"../../ContextMenu.module.scss\";\n\nconst selectAllSectionId = \"flow--context-menu--select-all\";\n\n/**\n * Keys that share the menu's selection: enabled items at the top level and in\n * sections without a selection mode of their own.\n */\nconst getSelectableKeys = (state: TreeState<unknown>): Key[] => {\n  const keys: Key[] = [];\n\n  const collect = (nodes: Iterable<Node<unknown>>) => {\n    for (const node of nodes) {\n      if (node.type === \"item\") {\n        if (!state.selectionManager.isDisabled(node.key)) {\n          keys.push(node.key);\n        }\n      } else if (\n        node.type === \"section\" &&\n        node.key !== selectAllSectionId &&\n        node.props?.selectionMode === undefined\n      ) {\n        collect(state.collection.getChildren?.(node.key) ?? node.childNodes);\n      }\n    }\n  };\n\n  collect(state.collection);\n  return keys;\n};\n\ninterface SelectAll {\n  isEverySelected: boolean;\n  toggle: () => void;\n}\n\n/**\n * Rendered by the visible menu item. The collection renders the item's element\n * a second time outside the menu, where `MenuStateContext` is missing.\n */\nconst SelectAllMenuItemContent: FC<\n  Aria.MenuItemRenderProps & { selectAll: { current?: SelectAll } }\n> = (props) => {\n  const { selectAll, ...renderProps } = props;\n  const state = useContext(Aria.MenuStateContext);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  const selectionManager = state?.selectionManager;\n  const keys = state ? getSelectableKeys(state) : [];\n  const selectedCount = keys.filter((key) =>\n    selectionManager?.isSelected(key),\n  ).length;\n  const isEverySelected = keys.length > 0 && selectedCount === keys.length;\n  const isIndeterminate = selectedCount > 0 && !isEverySelected;\n\n  selectAll.current = {\n    isEverySelected,\n    toggle: () => {\n      if (!selectionManager) {\n        return;\n      }\n      const keySet = new Set(keys);\n      const otherSelectedKeys = [...selectionManager.selectedKeys].filter(\n        (key) => !keySet.has(key),\n      );\n      selectionManager.setSelectedKeys(\n        isEverySelected ? otherSelectedKeys : [...otherSelectedKeys, ...keys],\n      );\n    },\n  };\n\n  return (\n    <MenuItemContent\n      {...renderProps}\n      selectionMode=\"multiple\"\n      isSelected={isEverySelected}\n      isIndeterminate={isIndeterminate}\n    >\n      <Text>\n        {formatter.format(isEverySelected ? \"deselectAll\" : \"selectAll\")}\n      </Text>\n    </MenuItemContent>\n  );\n};\n\nconst SelectAllMenuItem: FC = () => {\n  const selectAll = useRef<SelectAll>(undefined);\n  const formatter = useLocalizedStringFormatter(locales, \"ContextMenu\");\n\n  return (\n    <Aria.MenuItem\n      id={`${selectAllSectionId}--item`}\n      textValue={formatter.format(\"selectAll\")}\n      shouldCloseOnSelect={false}\n      onAction={() => selectAll.current?.toggle()}\n      className={menuItemStyles.menuItem}\n    >\n      {(renderProps) => (\n        <SelectAllMenuItemContent {...renderProps} selectAll={selectAll} />\n      )}\n    </Aria.MenuItem>\n  );\n};\n\n/**\n * The entry lives in a section without selection, so pressing it runs its\n * action only and sets the whole selection in one change.\n */\nexport const ContextMenuSelectAll: FC = () => (\n  <Aria.MenuSection\n    id={selectAllSectionId}\n    selectionMode=\"none\"\n    className={styles.selectAll}\n  >\n    <SelectAllMenuItem />\n  </Aria.MenuSection>\n);\n\nexport default ContextMenuSelectAll;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,qBAAqB;;;;;AAM3B,IAAM,qBAAqB,UAAqC;CAC9D,MAAM,OAAc,CAAC;CAErB,MAAM,WAAW,UAAmC;EAClD,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,QACZ;OAAA,CAAC,MAAM,iBAAiB,WAAW,KAAK,GAAG,GAC7C,KAAK,KAAK,KAAK,GAAG;EAAA,OAEf,IACL,KAAK,SAAS,aACd,KAAK,QAAQ,sBACb,KAAK,OAAO,kBAAkB,KAAA,GAE9B,QAAQ,MAAM,WAAW,cAAc,KAAK,GAAG,KAAK,KAAK,UAAU;CAGzE;CAEA,QAAQ,MAAM,UAAU;CACxB,OAAO;AACT;;;;;AAWA,IAAM,4BAED,UAAU;CACb,MAAM,EAAE,WAAW,GAAG,gBAAgB;CACtC,MAAM,QAAQ,WAAW,KAAK,gBAAgB;CAC9C,MAAM,YAAY,4BAA4B,kBAAS,aAAa;CAEpE,MAAM,mBAAmB,OAAO;CAChC,MAAM,OAAO,QAAQ,kBAAkB,KAAK,IAAI,CAAC;CACjD,MAAM,gBAAgB,KAAK,QAAQ,QACjC,kBAAkB,WAAW,GAAG,CAClC,CAAC,CAAC;CACF,MAAM,kBAAkB,KAAK,SAAS,KAAK,kBAAkB,KAAK;CAClE,MAAM,kBAAkB,gBAAgB,KAAK,CAAC;CAE9C,UAAU,UAAU;EAClB;EACA,cAAc;GACZ,IAAI,CAAC,kBACH;GAEF,MAAM,SAAS,IAAI,IAAI,IAAI;GAC3B,MAAM,oBAAoB,CAAC,GAAG,iBAAiB,YAAY,CAAC,CAAC,QAC1D,QAAQ,CAAC,OAAO,IAAI,GAAG,CAC1B;GACA,iBAAiB,gBACf,kBAAkB,oBAAoB,CAAC,GAAG,mBAAmB,GAAG,IAAI,CACtE;EACF;CACF;CAEA,OACE,oBAAC,iBAAD;EACE,GAAI;EACJ,eAAc;EACd,YAAY;EACK;EAEjB,UAAA,oBAAC,MAAD,EAAA,UACG,UAAU,OAAO,kBAAkB,gBAAgB,WAAW,EAC3D,CAAA;CACS,CAAA;AAErB;AAEA,IAAM,0BAA8B;CAClC,MAAM,YAAY,OAAkB,KAAA,CAAS;CAC7C,MAAM,YAAY,4BAA4B,kBAAS,aAAa;CAEpE,OACE,oBAAC,KAAK,UAAN;EACE,IAAI,GAAG,mBAAmB;EAC1B,WAAW,UAAU,OAAO,WAAW;EACvC,qBAAqB;EACrB,gBAAgB,UAAU,SAAS,OAAO;EAC1C,WAAW,wBAAe;EAExB,WAAA,gBACA,oBAAC,0BAAD;GAA0B,GAAI;GAAwB;EAAY,CAAA;CAEvD,CAAA;AAEnB;;;;;AAMA,IAAa,6BACX,oBAAC,KAAK,aAAN;CACE,IAAI;CACJ,eAAc;CACd,WAAW,2BAAO;CAElB,UAAA,oBAAC,mBAAD,CAAoB,CAAA;AACJ,CAAA"}

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../_virtual/_13.locale.mjs";
+import __locale_default from "../../../../../_virtual/_14.locale.mjs";
 import OptionView from "../../views/OptionView.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/js/packages/components/src/components/FileCard/components/DeleteButton/DeleteButton.mjs

@@ -3,7 +3,7 @@
 import { IconClose } from "../../../Icon/components/icons/IconClose.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../../../Button/Button.mjs";
-import __locale_default from "../../../../../../../_virtual/_15.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_16.locale.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FileCard/components/DeleteButton/DeleteButton.tsx
 var DeleteButton = (props) => {

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

@@ -6,6 +6,7 @@ import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExi
 import { styleClassname } from "../../lib/scss/selectors.mjs";
 import Heading_module_default from "./Heading.module.mjs";
 import clsx from "clsx";
+import { Children } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Heading/Heading.tsx
@@ -69,14 +70,22 @@ var Heading = flowComponent("Heading", (props) => {
 			...rest,
 			ref,
 			level,
-			children: [/* @__PURE__ */ jsx("span", {
+			children: [/* @__PURE__ */ jsxs("span", {
 				className: Heading_module_default.headingText,
-				children
+				children: [children, /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: "headingContent",
+					component: "Heading",
+					children: (items) => Children.count(items) > 0 && /* @__PURE__ */ jsx("span", { className: Heading_module_default.headingTextSpacer })
+				})]
 			}), /* @__PURE__ */ jsx("span", {
 				className: Heading_module_default.headingContent,
 				children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 					id: "headingContent",
-					component: "Heading"
+					component: "Heading",
+					children: (items) => Children.map(items, (item) => /* @__PURE__ */ jsx("span", {
+						className: Heading_module_default.headingContentItem,
+						children: item
+					}))
 				})
 			})]
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":[],"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 { 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 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 className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>{children}</span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,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,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SAIvB,eAAe,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,WAAW,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,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Heading.mjs","names":[],"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 { 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 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 className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>\n          {children}\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":";;;;;;;;;;;;;;;;;AA8BA,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,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SAIvB,eAAe,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,WAAW,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,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,qBAAC,QAAD;IAAM,WAAW,uBAAO;IAAxB,UAAA,CACG,UACD,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAW,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAW,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -9,6 +9,8 @@ var light = "flow--heading--light";
 var headingText = "flow--heading--heading-text";
 var icon = "flow--heading--icon";
 var headingContent = "flow--heading--heading-content";
+var headingTextSpacer = "flow--heading--heading-text-spacer";
+var headingContentItem = "flow--heading--heading-content-item";
 var h1 = "flow--heading--h1";
 var h2 = "flow--heading--h2";
 var h3 = "flow--heading--h3";
@@ -26,6 +28,8 @@ var Heading_module_default = {
 	headingText,
 	icon,
 	headingContent,
+	headingTextSpacer,
+	headingContentItem,
 	h1,
 	h2,
 	h3,
@@ -42,6 +46,6 @@ var Heading_module_default = {
 	"wrap-balance": "flow--heading--wrap-balance"
 };
 //#endregion
-export { danger, dark, Heading_module_default as default, h1, h2, h3, h4, h5, h6, heading, headingContent, headingText, icon, light, unavailable };
+export { danger, dark, Heading_module_default as default, h1, h2, h3, h4, h5, h6, heading, headingContent, headingContentItem, headingText, headingTextSpacer, icon, light, unavailable };
 
 //# sourceMappingURL=Heading.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n  color: var(--heading--color);\n  font-size: var(--font-size);\n  font-weight: var(--heading--font-weight);\n  text-wrap-style: pretty;\n\n  --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--heading--color-#{$color});\n    }\n  }\n\n  @include color(\"danger\");\n  @include color(\"unavailable\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  .headingText {\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .headingContent {\n    vertical-align: bottom;\n    display: inline-flex;\n    margin-inline-start: var(--heading--icon-to-text-spacing);\n    min-height: var(--heading-line-height);\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    flex-wrap: wrap;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &:where(.h1) {\n    --font-size: var(--font-size-heading--xl);\n  }\n\n  &:where(.h2) {\n    --font-size: var(--font-size-heading--m);\n  }\n\n  &:where(.h3) {\n    --font-size: var(--font-size-heading--s);\n  }\n\n  &:where(.h4),\n  &:where(.h5),\n  &:where(.h6) {\n    --font-size: var(--font-size-heading--xs);\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --font-size: var(--font-size-heading--#{$size});\n    }\n  }\n\n  @include size(\"xs\");\n  @include size(\"s\");\n  @include size(\"m\");\n  @include size(\"l\");\n  @include size(\"xl\");\n  @include size(\"xxl\");\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n}\n\n@media (max-width: 768px) {\n  .heading {\n    &:where(.h1),\n    &.size-xl {\n      --font-size: var(--font-size-heading--l);\n    }\n\n    &.size-l {\n      --font-size: var(--font-size-heading--m);\n    }\n\n    &:where(.h2),\n    &.size-m {\n      --font-size: var(--font-size-heading--s);\n    }\n\n    &:where(.h3),\n    &.size-s {\n      --font-size: var(--font-size-heading--xs);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n  color: var(--heading--color);\n  font-size: var(--font-size);\n  font-weight: var(--heading--font-weight);\n  text-wrap-style: pretty;\n\n  --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--heading--color-#{$color});\n    }\n  }\n\n  @include color(\"danger\");\n  @include color(\"unavailable\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  .headingText {\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .headingContent {\n    &:empty {\n      display: none;\n    }\n  }\n\n  .headingTextSpacer {\n    margin-inline-end: var(--heading--icon-to-text-spacing);\n  }\n\n  .headingContentItem {\n    vertical-align: bottom;\n    display: inline-flex;\n    max-width: 100%;\n    min-height: var(--heading-line-height);\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  &:where(.h1) {\n    --font-size: var(--font-size-heading--xl);\n  }\n\n  &:where(.h2) {\n    --font-size: var(--font-size-heading--m);\n  }\n\n  &:where(.h3) {\n    --font-size: var(--font-size-heading--s);\n  }\n\n  &:where(.h4),\n  &:where(.h5),\n  &:where(.h6) {\n    --font-size: var(--font-size-heading--xs);\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --font-size: var(--font-size-heading--#{$size});\n    }\n  }\n\n  @include size(\"xs\");\n  @include size(\"s\");\n  @include size(\"m\");\n  @include size(\"l\");\n  @include size(\"xl\");\n  @include size(\"xxl\");\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n}\n\n@media (max-width: 768px) {\n  .heading {\n    &:where(.h1),\n    &.size-xl {\n      --font-size: var(--font-size-heading--l);\n    }\n\n    &.size-l {\n      --font-size: var(--font-size-heading--m);\n    }\n\n    &:where(.h2),\n    &.size-m {\n      --font-size: var(--font-size-heading--s);\n    }\n\n    &:where(.h3),\n    &.size-s {\n      --font-size: var(--font-size-heading--xs);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -7,7 +7,7 @@ import { IllustratedMessage } from "../IllustratedMessage/IllustratedMessage.mjs
 import ImageCropper_module_default from "./ImageCropper.module.mjs";
 import { Slider } from "../Slider/Slider.mjs";
 import { getCroppedImageFile } from "./lib/getCroppedImageFile.mjs";
-import __locale_default from "../../../../../_virtual/_19.locale.mjs";
+import __locale_default from "../../../../../_virtual/_20.locale.mjs";
 import { useImageSrc } from "../../lib/hooks/useImageSrc.mjs";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";

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

@@ -2,7 +2,7 @@
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useLocalizedStringFormatter as useLocalizedStringFormatter$1 } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../_virtual/_30.locale.mjs";
+import __locale_default from "../../../../../_virtual/_31.locale.mjs";
 import Kbd_module_default from "./Kbd.module.mjs";
 import clsx from "clsx";
 import { Fragment } from "react";

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

@@ -15,6 +15,8 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var Label = flowComponent("Label", (props) => {
 	const { children, className, optional, isDisabled, ref, unstyled = false, ...rest } = props;
+	const [labelProps, labelRef] = Aria.useContextProps(rest, ref, Aria.LabelContext);
+	const { id, ...rootProps } = labelProps;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Label");
 	const rootClassName = unstyled ? className : clsx(Label_module_default.label, isDisabled && Label_module_default.disabled, className);
 	const optionalMarker = /* @__PURE__ */ jsx("span", {
@@ -42,31 +44,37 @@ var Label = flowComponent("Label", (props) => {
 	};
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
-		children: /* @__PURE__ */ jsxs(Aria.Label, {
-			...rest,
-			className: rootClassName,
-			ref,
-			children: [
-				children,
-				optional && optionalMarker,
-				/* @__PURE__ */ jsx(UiComponentTunnelExit, {
-					id: "contextualHelp",
-					component: "Label",
-					children: (children) => {
-						if (React.Children.count(children) >= 1) return children;
-					}
-				}),
-				/* @__PURE__ */ jsx(UiComponentTunnelExit, {
-					id: "right",
-					component: "Label",
-					children: (children) => {
-						if (React.Children.count(children) >= 1) return /* @__PURE__ */ jsx("div", {
-							className: Label_module_default.right,
-							children
-						});
-					}
-				})
-			]
+		children: /* @__PURE__ */ jsx(Aria.LabelContext.Provider, {
+			value: null,
+			children: /* @__PURE__ */ jsxs(Aria.Label, {
+				...rootProps,
+				className: rootClassName,
+				ref: labelRef,
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						id,
+						className: Label_module_default.text,
+						children: [children, optional && optionalMarker]
+					}),
+					/* @__PURE__ */ jsx(UiComponentTunnelExit, {
+						id: "contextualHelp",
+						component: "Label",
+						children: (children) => {
+							if (React.Children.count(children) >= 1) return children;
+						}
+					}),
+					/* @__PURE__ */ jsx(UiComponentTunnelExit, {
+						id: "right",
+						component: "Label",
+						children: (children) => {
+							if (React.Children.count(children) >= 1) return /* @__PURE__ */ jsx("div", {
+								className: Label_module_default.right,
+								children
+							});
+						}
+					})
+				]
+			})
 		})
 	});
 });