npm - @mittwald/flow-react-components - Versions diffs - 1.4.0-next.1 → 1.4.0-next.11 - Mend

@mittwald/flow-react-components 1.4.0-next.1 → 1.4.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

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

@@ -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 ADDED Viewed

@@ -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/Calendar/Calendar.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. */\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width: 200px;\n }\n }\n\n @media (max-width: 530px) {\n .container {\n flex-direction: column-reverse;\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n height: var(--calendar--cell-size);\n }\n\n :global(.react-aria-CalendarGrid) {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--range-background-color);\n border-block: var(--calendar--range-border-width)\n var(--calendar--range-border-style)\n var(--calendar--range-border-color);\n width: calc(100% + 0.375rem);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-start-start-radius: var(--calendar--cell-corner-radius);\n border-end-start-radius: var(--calendar--cell-corner-radius);\n inset-inline-start: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-start-end-radius: var(--calendar--cell-corner-radius);\n border-end-end-radius: var(--calendar--cell-corner-radius);\n inset-inline-end: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. /\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width: 200px;\n\n /\n * With an auto width, WebKit resolved the menu one item padding wider on\n * every layout. Each reposition of the popover then resized it again,\n * inside react-aria's resize observer on the popover: a\n * \"ResizeObserver loop\" error per step.\n */\n width: max-content;\n }\n }\n\n @media (max-width: 530px) {\n .container {\n flex-direction: column-reverse;\n\n .presetMenu {\n width: auto;\n }\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n height: var(--calendar--cell-size);\n }\n\n :global(.react-aria-CalendarGrid) {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--range-background-color);\n border-block: var(--calendar--range-border-width)\n var(--calendar--range-border-style)\n var(--calendar--range-border-color);\n width: calc(100% + 0.375rem);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-start-start-radius: var(--calendar--cell-corner-radius);\n border-end-start-radius: var(--calendar--cell-corner-radius);\n inset-inline-start: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-start-end-radius: var(--calendar--cell-corner-radius);\n border-end-end-radius: var(--calendar--cell-corner-radius);\n inset-inline-end: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n}\n\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 = 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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) => `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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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\";\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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\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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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 &: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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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";