npm - @mittwald/flow-react-components - Versions diffs - 1.3.0-next.9 → 1.3.1 - Mend

@mittwald/flow-react-components 1.3.0-next.9 → 1.3.1

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 (199) hide show

package/dist/js/packages/components/src/components/CartesianChart/components/Line/Line.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Line.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Line/Line.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport type {\n ChartDataValue,\n DataKey,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LineProps<\n TData extends ChartDataValue = ChartDataValue,\n> extends Pick<\n Recharts.LineProps,\n \"className\" \| \"key\" \| \"xAxisId\" \| \"yAxisId\" \| \"type\" \| \"unit\"\n> {\n dataKey?: DataKey<TData>;\n /** The color of the line. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n const tokens = useDesignTokens();\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Line\n {...rest}\n fill={color}\n activeDot={<AreaDot color={color} />}\n dot={false}\n stroke={color}\n strokeWidth={tokens.line[\"border-width\"].value}\n />\n );\n};\n\nexport const TypedLine = <T extends ChartDataValue = ChartDataValue>() =>\n Line as ComponentType<LineProps<T>>;\n\nexport default Line;\n"],"mappings":"~~;;;;;;;;;;AAuBA~~,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;~~CAE~~/B,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,GAAI;EACJ,MAAM;EACN,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,KAAK;EACL,QAAQ;EACR,aAAa,OAAO,KAAK,eAAe,CAAC;~~CAC1C~~,CAAA;AAEL;AAEA,IAAa,kBACX"}
1	+ {"version":3,"file":"Line.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Line/Line.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport type {\n ChartDataValue,\n DataKey,\n} from \"@/components/CartesianChart/types\";\nimport { useChartAnimation } from \"@/components/CartesianChart/hooks/useChartAnimation\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LineProps<\n TData extends ChartDataValue = ChartDataValue,\n> extends Pick<\n Recharts.LineProps,\n \"className\" \| \"key\" \| \"xAxisId\" \| \"yAxisId\" \| \"type\" \| \"unit\"\n> {\n dataKey?: DataKey<TData>;\n /** The color of the line. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n const tokens = useDesignTokens();\n const animation = useChartAnimation();\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Line\n {...rest}\n fill={color}\n activeDot={<AreaDot color={color} />}\n dot={false}\n stroke={color}\n strokeWidth={tokens.line[\"border-width\"].value}\n {...animation}\n />\n );\n};\n\nexport const TypedLine = <T extends ChartDataValue = ChartDataValue>() =>\n Line as ComponentType<LineProps<T>>;\n\nexport default Line;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,YAAY,kBAAkB;CAEpC,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,GAAI;EACJ,MAAM;EACN,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,KAAK;EACL,QAAQ;EACR,aAAa,OAAO,KAAK,eAAe,CAAC;EACzC,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBACX"}

package/dist/js/packages/components/src/components/CartesianChart/hooks/useChartAnimation.mjs ADDED Viewed

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { useDesignTokens } from "../../../lib/theming/hooks/useDesignTokens.mjs";
+import { useReducedMotion } from "framer-motion";
+//#region src/components/CartesianChart/hooks/useChartAnimation.ts
+/**
+* Animation props for the chart's graphical items. Recharts animates on mount
+* by default and does not look at the user's motion preference on its own.
+*
+* Replaces recharts' default `"auto"`, which means "not during SSR" – moot
+* here, since `ResponsiveContainer` renders nothing on the server.
+*
+* @internal
+*/
+var useChartAnimation = () => {
+	const prefersReducedMotion = useReducedMotion();
+	const tokens = useDesignTokens();
+	return {
+		isAnimationActive: !prefersReducedMotion,
+		animationDuration: parseInt(tokens["cartesian-chart"]["transition-duration"].value),
+		animationEasing: "ease"
+	};
+};
+//#endregion
+export { useChartAnimation };
+//# sourceMappingURL=useChartAnimation.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useChartAnimation.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useChartAnimation.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useChartAnimation.ts"],"sourcesContent":["import { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\n/**\n * Animation props for the chart's graphical items. Recharts animates on mount\n * by default and does not look at the user's motion preference on its own.\n *\n * Replaces recharts' default `\"auto\"`, which means \"not during SSR\" – moot\n * here, since `ResponsiveContainer` renders nothing on the server.\n *\n * @internal\n */\nexport const useChartAnimation = () => {\n const prefersReducedMotion = useReducedMotion();\n const tokens = useDesignTokens();\n\n return {\n isAnimationActive: !prefersReducedMotion,\n animationDuration: parseInt(\n tokens[\"cartesian-chart\"][\"transition-duration\"].value,\n ),\n // Recharts' own default, pinned to match the CSS `ease` of the DonutChart\n // and the ProgressBar.\n animationEasing: \"ease\" as const,\n };\n};\n"],"mappings":";;;;;;;;;;;;;;AAYA,IAAa,0BAA0B;CACrC,MAAM,uBAAuB,iBAAiB;CAC9C,MAAM,SAAS,gBAAgB;CAE/B,OAAO;EACL,mBAAmB,CAAC;EACpB,mBAAmB,SACjB,OAAO,kBAAkB,CAAC,sBAAsB,CAAC,KACnD;EAGA,iBAAiB;CACnB;AACF"}

package/dist/js/packages/components/src/components/Chat/Chat.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n .messageThreadContainer {\n @include scrollbar.scrollbar;\n\n overflow: auto;\n padding-bottom: var(--chat--spacing);\n padding-inline-end: var(--size-px--m);\n margin-inline-end: calc(var(--size-px--m) * -1);\n flex-grow: 1;\n display: flex;\n flex-direction: column-reverse;\n }\n\n .fileCardList {\n margin-top: var(--chat--spacing);\n }\n\n .controls:not(:has(form)),\n .controls form {\n display: flex;\n align-items: flex-start;\n gap: var(--chat--spacing);\n flex-wrap: wrap;\n padding-top: var(--chat--spacing);\n\n > :first-child {\n order: 0;\n width: 100%;\n }\n\n .successButton,\n .button {\n order: 1;\n }\n\n .successButton {\n margin-inline-start: auto;\n }\n }\n}\n\n@media (max-width: 550px) {\n .successButton,\n .button {\n flex-grow: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Chat.module.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.chat {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n .messageThreadContainer {\n @include scrollbar.scrollbar;\n\n overflow: auto;\n padding-bottom: var(--chat--spacing);\n padding-inline-end: var(--size-px--m);\n margin-inline-end: calc(var(--size-px--m) * -1);\n flex-grow: 1;\n display: flex;\n flex-direction: column-reverse;\n }\n\n .fileCardList {\n margin-top: var(--chat--spacing);\n }\n\n /* The `<form>` comes from the consumer wrapping the controls in the\n react-hook-form `Form` (or its own `formComponent`). `Form` is a plain FC,\n not a flowComponent, so Chat's props context cannot give it a class. */\n // stylelint-disable selector-max-type -- consumer-supplied form, no class\n .controls:not(:has(form)),\n .controls form {\n display: flex;\n align-items: flex-start;\n gap: var(--chat--spacing);\n flex-wrap: wrap;\n padding-top: var(--chat--spacing);\n\n > :first-child {\n order: 0;\n width: 100%;\n }\n\n .successButton,\n .button {\n order: 1;\n }\n\n .successButton {\n margin-inline-start: auto;\n }\n }\n // stylelint-enable selector-max-type\n}\n\n@media (max-width: 550px) {\n .successButton,\n .button {\n flex-grow: 1;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Checkbox/Checkbox.module.mjs CHANGED Viewed

@@ -7,7 +7,8 @@ var icon = "flow--checkbox--icon";
 var Checkbox_module_default = {
 	checkbox,
 	input,
-	icon
+	icon,
+	"check-pop": "flow--checkbox--check-pop"
 };
 //#endregion
 export { checkbox, Checkbox_module_default as default, icon, input };

package/dist/js/packages/components/src/components/Checkbox/Checkbox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.module.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.checkbox {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n .input {\n display: flex;\n flex-direction: row;\n column-gap: var(--form-control--spacing-x);\n\n @include focus.focus;\n\n &[data-selected],\n &[data-indeterminate] {\n .icon {\n color: var(--choice--icon-color--selected);\n }\n }\n\n &[data-disabled] {\n color: var(--text--color--disabled);\n\n .icon {\n color: var(--choice--icon-color--disabled);\n }\n }\n\n &[data-invalid]:not([data-selected]) {\n .icon {\n color: var(--form-control--border-color--invalid);\n }\n }\n }\n\n .icon {\n color: var(--choice--icon-color--default);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Checkbox.module.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.checkbox {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n .input {\n display: flex;\n flex-direction: row;\n column-gap: var(--form-control--spacing-x);\n\n @include focus.focus;\n\n &[data-selected],\n &[data-indeterminate] {\n .icon {\n color: var(--choice--icon-color--selected);\n }\n }\n\n &[data-disabled] {\n color: var(--text--color--disabled);\n\n .icon {\n color: var(--choice--icon-color--disabled);\n }\n }\n\n &[data-invalid]:not([data-selected]) {\n .icon {\n color: var(--form-control--border-color--invalid);\n }\n }\n }\n\n .icon {\n color: var(--choice--icon-color--default);\n }\n\n /* When the box becomes checked/indeterminate, React mounts the checked icon.\n It settles in softly from a slightly smaller, half-faded state; the box\n never fully disappears, so the swap does not flicker. Unchecking\n mounts the empty icon, which is intentionally left un-animated. */\n .input[data-selected] .icon,\n .input[data-indeterminate] .icon {\n animation: check-pop var(--transition--duration--fast)\n cubic-bezier(0.2, 0, 0, 1);\n }\n}\n\n@keyframes check-pop {\n from {\n transform: scale(0.9);\n opacity: 0.5;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.module.scss"],"sourcesContent":[".checkboxGroup {\n order: 2;\n display: flex;\n flex-direction: column;\n row-gap: var(--form-control--spacing-y);\n\n .checkboxButton {\n width: auto;\n\n &[data-invalid]:not([data-selected]) {\n border-color: var(--form-control--border-color--default);\n background-color: var(--form-control--background-color--default);\n }\n }\n\n .checkbox,\n .checkboxButton {\n :global(.flow--form-field) {\n display: block;\n }\n\n &[data-invalid]:not([data-selected]) {\n svg {\n color: var(--form-control--border-color--default);\n }\n }\n }\n\n &:empty {\n display: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CheckboxGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.module.scss"],"sourcesContent":[".checkboxGroup {\n order: 2;\n display: flex;\n flex-direction: column;\n row-gap: var(--form-control--spacing-y);\n\n .checkboxButton {\n width: auto;\n\n &[data-invalid]:not([data-selected]) {\n border-color: var(--form-control--border-color--default);\n background-color: var(--form-control--background-color--default);\n }\n }\n\n .checkbox,\n .checkboxButton {\n :global(.flow--form-field) {\n display: block;\n }\n\n &[data-invalid]:not([data-selected]) {\n // Every icon in the checkbox, consumer icons in the label included —\n // the indicator's own `flow--checkbox--icon` would narrow the match.\n // stylelint-disable-next-line selector-max-type -- see above\n svg {\n color: var(--form-control--border-color--default);\n }\n }\n }\n\n &:empty {\n display: none;\n }\n}\n"],"mappings":""}

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

@@ -6,14 +6,17 @@ import CodeBlock_module_default from "./CodeBlock.module.mjs";
 import { CodeEditor } from "../CodeEditor/CodeEditor.mjs";
 import __locale_default from "../../../../../_virtual/_11.locale.mjs";
 import clsx from "clsx";
-import { useId, useState } from "react";
+import { useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
 //#region src/components/CodeBlock/CodeBlock.tsx
 /** @flr-generate all */
 var CodeBlock = (props) => {
 	const { code, className, copyable = false, showLineNumbers = false, children, truncateLines = false, ...rest } = props;
 	const [folded, setFolded] = useState(truncateLines !== false);
 	const [maxHeight, setMaxHeight] = useState();
+	const [expandedHeight, setExpandedHeight] = useState();
+	const editorRef = useRef(null);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "CodeBlock");
 	const rootClassName = clsx(CodeBlock_module_default.codeBlock, className);
 	const id = useId();
@@ -21,10 +24,32 @@ var CodeBlock = (props) => {
 		className: clsx(rootClassName, CodeBlock_module_default.withChildren),
 		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) })
 	});
-	const maxHeightVariable = maxHeight ? { "--max-height": `${maxHeight}px` } : void 0;
+	const heightVariables = {
+		...maxHeight ? { "--max-height": `${maxHeight}px` } : {},
+		...expandedHeight ? { "--expanded-max-height": `${expandedHeight}px` } : {}
+	};
+	const toggleFolded = () => {
+		const editor = editorRef.current;
+		if (!editor) {
+			setFolded((folded) => !folded);
+			return;
+		}
+		const animates = getComputedStyle(editor).transitionDuration.split(",").some((duration) => parseFloat(duration) > 0);
+		if (folded) {
+			setExpandedHeight(animates ? editor.scrollHeight : void 0);
+			setFolded(false);
+		} else {
+			flushSync(() => setExpandedHeight(editor.scrollHeight));
+			editor.getBoundingClientRect();
+			setFolded(true);
+		}
+	};
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx(rootClassName, folded ? CodeBlock_module_default.folded : void 0),
-		style: maxHeightVariable,
+		className: clsx(rootClassName, maxHeight && CodeBlock_module_default.truncated, folded && CodeBlock_module_default.folded),
+		style: heightVariables,
+		onTransitionEnd: (event) => {
+			if (event.propertyName === "max-height") setExpandedHeight(void 0);
+		},
 		children: /* @__PURE__ */ jsx(CodeEditor, {
 			...rest,
 			value: code,
@@ -36,6 +61,7 @@ var CodeBlock = (props) => {
 			showActiveLineMarker: false,
 			isReadOnly: true,
 			onCreateEditor: (view) => {
+				editorRef.current = view.dom;
 				if (!truncateLines) return;
 				const lineHeight = 20;
 				const padding = 12;
@@ -49,7 +75,7 @@ var CodeBlock = (props) => {
 					variant: "plain",
 					color: "secondary",
 					size: "s",
-					onPress: () => setFolded((folded) => !folded),
+					onPress: toggleFolded,
 					"aria-expanded": !folded,
 					"aria-controls": id,
 					children: stringFormatter.format(folded ? "showMore" : "showLess")

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useId, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" \| \"showLineNumbers\" \| \"copyable\">\n > {\n /* The code displayed in the block. /\n code?: string;\n /\n Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n \n @default: false\n /\n truncateLines?: boolean \| number;\n}\n\n/* @flr-generate all /\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n const ~~maxHeightVariable~~ = ~~maxHeight~~\n ? ({ \"--max-height\": `${maxHeight}px` } as React.CSSProperties)\n : undefined;\n\n return (\n <div\n className={clsx(rootClassName, folded ? styles.folded ~~: undefined~~)}\n style={~~maxHeightVariable~~}\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={~~() => setFolded((folded) => !folded)~~}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"mappings":"~~;;;;;;;;;;;;AA4BA~~,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAe,yBAAO,YAAY;~~EACrD~~,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,~~oBAAoB~~,~~YACrB~~,EAAE,gBAAgB,GAAG,UAAU,IAAI,~~IACpC~~,KAAA;~~CAEJ~~,OACE,oBAAC,OAAD;EACE,WAAW,~~KAAK~~,~~eAAe~~,~~SAAS~~,yBAAO,~~SAAS~~,~~KAAA~~,~~CAAS~~;~~EACjE~~,OAAO;~~EAEP~~,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAK,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,~~eAAe,WAAW,WAAW,CAAC,MAAM~~;~~KAC5C~~,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}
1	+ {"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n type FC,\n type PropsWithChildren,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" \| \"showLineNumbers\" \| \"copyable\">\n > {\n /* The code displayed in the block. /\n code?: string;\n /\n Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n \n @default: false\n /\n truncateLines?: boolean \| number;\n}\n\n/* @flr-generate all /\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n / The full height, only while the toggle animates to or from it. /\n const [expandedHeight, setExpandedHeight] = useState<number>();\n const editorRef = useRef<HTMLElement>(null);\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n {/ Deliberately class-less: a `flow--` class would make the global\n reset's `font: inherit` apply and replace the UA monospace\n metrics. See CodeBlock.module.scss. /}\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n const heightVariables = {\n ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n ...(expandedHeight\n ? { \"--expanded-max-height\": `${expandedHeight}px` }\n : {}),\n } as React.CSSProperties;\n\n / A height transition needs a length on both ends – `none` does not\n interpolate. So the full height is measured for the transition and\n released once it ended, and code that changes later is not clipped. /\n const toggleFolded = () => {\n const editor = editorRef.current;\n\n if (!editor) {\n setFolded((folded) => !folded);\n return;\n }\n\n const animates = getComputedStyle(editor)\n .transitionDuration.split(\",\")\n .some((duration) => parseFloat(duration) > 0);\n\n if (folded) {\n setExpandedHeight(animates ? editor.scrollHeight : undefined);\n setFolded(false);\n } else {\n flushSync(() => setExpandedHeight(editor.scrollHeight));\n // Applies the start height before the folded one replaces it.\n editor.getBoundingClientRect();\n setFolded(true);\n }\n };\n\n return (\n <div\n className={clsx(\n rootClassName,\n maxHeight && styles.truncated,\n folded && styles.folded,\n )}\n style={heightVariables}\n onTransitionEnd={(event) => {\n if (event.propertyName === \"max-height\") {\n setExpandedHeight(undefined);\n }\n }}\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n editorRef.current = view.dom;\n\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={toggleFolded}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;AAmCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,eAAe,yBAAO,YAAY;EAIrD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAO,SAAe,CAAA,EACnB,CAAA;CACF,CAAA;CAIT,MAAM,kBAAkB;EACtB,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAa,yBAAO,WACpB,UAAU,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EAEA,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAK,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;CACT,CAAA;AAET"}

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.mjs CHANGED Viewed

@@ -3,15 +3,17 @@
 //#region src/components/CodeBlock/CodeBlock.module.scss
 var codeBlock = "flow--code-block";
 var withChildren = "flow--code-block--with-children";
-var folded = "flow--code-block--folded";
+var truncated = "flow--code-block--truncated";
 var buttonContainer = "flow--code-block--button-container";
+var folded = "flow--code-block--folded";
 var CodeBlock_module_default = {
 	codeBlock,
 	withChildren,
-	folded,
-	buttonContainer
+	truncated,
+	buttonContainer,
+	folded
 };
 //#endregion
-export { buttonContainer, codeBlock, CodeBlock_module_default as default, folded, withChildren };
+export { buttonContainer, codeBlock, CodeBlock_module_default as default, folded, truncated, withChildren };
 //# sourceMappingURL=CodeBlock.module.mjs.map

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n }\n\n &.~~folded~~ {\n :global(.cm-~~content~~) {\n max-height: var(--max-height);\n overflow: hidden;\n\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: ~~50%;\~~n pointer-events: none;\n background: linear-gradient(\n to bottom,\n transparent,\n ~~var~~(--code-block--~~background~~-~~color~~)\n );\n }\n }\n }\n\n /* A code block is not an input – both axes use its own padding. /\n &.codeBlock ~~div~~:global(.flow--code-editor--code-mirror) {\n --form-control--padding-y: var(--code-block--padding);\n --form-control--padding-x: var(--code-block--padding);\n\n border-color: var(--code-block--border-color);\n }\n\n .buttonContainer {\n position: relative;\n margin-top: calc(var(--code-block--show-more-padding) -1);\n display: flex;\n justify-content: center;\n padding-block: var(--code-block--show-more-padding);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/scrollbar\";\n\n/* The show-more strip: a size-s button plus the container's padding. /\n$button-height-s: calc(\n var(--button--line-height-s) + 2 var(--button--padding-s-y)\n);\n$show-more-height: calc(\n #{$button-height-s} + 2 * var(--code-block--show-more-padding)\n);\n$inner-corner-radius: calc(\n var(--code-block--corner-radius) - var(--form-control--border-width)\n);\n\n@function fade-color($amount) {\n @return color-mix(\n in srgb,\n var(--code-block--background-color) $amount,\n transparent\n );\n}\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n /* These stay element selectors on purpose. Classing them would give them a\n `flow--` class, and the global reset's\n `:where([class=\"flow--\"] [class=\"flow--\"]) { font: inherit }` would\n then replace the UA monospace metrics — the code text visibly reflows.\n Fixing that is a design decision for UX, not a lint cleanup. /\n // stylelint-disable selector-max-type -- see above\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n // stylelint-enable selector-max-type\n }\n\n /* Truncatable: collapsed, the show-more button lies over the code, which\n runs down to the border and fades out behind it. Toggling animates the\n height, the fade and the button's position together. /\n &.truncated {\n :global(.flow--code-editor--code-mirror) {\n transition-property:\n color, background-color, border-color, padding-block-end;\n\n @include expandTransition.expandTransition;\n }\n\n / The editor holds the code and the line numbers, so both are clipped\n and fade out together. /\n :global(.cm-editor) {\n max-height: var(--expanded-max-height, none);\n overflow: hidden;\n border-end-start-radius: $inner-corner-radius;\n border-end-end-radius: $inner-corner-radius;\n transition-property: max-height;\n\n @include expandTransition.expandTransition;\n\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: min(calc(var(--size-px--xxl) + #{$show-more-height}), 75%);\n pointer-events: none;\n opacity: 0;\n transition-property: opacity;\n\n @include expandTransition.expandTransition;\n\n / Eased stops: no visible edge on top, the code only shimmers through\n behind the button. /\n background: linear-gradient(\n to bottom,\n transparent,\n fade-color(10%) 15%,\n fade-color(30%) 30%,\n fade-color(60%) 45%,\n fade-color(82%) 58%,\n fade-color(92%) 68%,\n fade-color(95%) 85%,\n fade-color(96%)\n );\n }\n }\n\n / Keeps its full height instead of shrinking into the editor, so the\n editor clips it rather than the scroller scrolling within. The\n scroller's own z-index (CodeMirror's) keeps the line numbers under the\n fade. /\n :global(.cm-scroller) {\n flex-shrink: 0;\n }\n\n .buttonContainer {\n transition-property: margin-top, margin-bottom;\n\n @include expandTransition.expandTransition;\n }\n }\n\n &.folded {\n :global(.flow--code-editor--code-mirror) {\n padding-block-end: 0;\n }\n\n / Grows by the button strip, so the button covers none of the lines. /\n :global(.cm-editor) {\n max-height: calc(var(--max-height) + #{$show-more-height});\n\n &::after {\n opacity: 1;\n }\n }\n\n .buttonContainer {\n margin-top: calc(#{$show-more-height} -1);\n margin-bottom: 0;\n }\n }\n\n /* A code block is not an input – both axes use its own padding. The repeated\n root class only buys specificity over CodeEditor's own `.codeMirror` rules\n (incl. `.readonly`); it identifies nothing. /\n &.codeBlock.codeBlock :global(.flow--code-editor--code-mirror) {\n --form-control--padding-y: var(--code-block--padding);\n --form-control--padding-x: var(--code-block--padding);\n\n border-color: var(--code-block--border-color);\n }\n\n .buttonContainer {\n position: relative;\n margin-top: calc(var(--code-block--show-more-padding) -1);\n\n /* Covers the editor's bottom padding – the container brings its own. */\n margin-bottom: calc(\n var(--form-control--border-width) - var(--form-control--padding-y)\n );\n display: flex;\n justify-content: center;\n padding-block: var(--code-block--show-more-padding);\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Combine/Combine.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n &:has(.avatar):has(.text) {\n display: flex;\n gap: var(--combine--avatar-text--spacing);\n height: fit-content;\n\n --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n min-height: var(--first-two-lines-height);\n\n .text {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-self: center;\n font-size: var(--font-size-text--s);\n }\n\n .avatar {\n margin-top: calc(\n (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n );\n }\n }\n\n &:has(:global(.flow--form-field)):has(.button) {\n display: flex;\n align-items: flex-start;\n column-gap: var(--combine--input-button--spacing);\n\n :global(.flow--form-field) {\n flex-grow: 1;\n }\n\n &:has(label) {\n .button {\n margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n }\n }\n }\n\n &:has(.text):has(.contextualHelpTriggerButton),\n &:has(.text):has(.copyButton) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--text-button--spacing);\n }\n\n &:has(> .text):has(> .icon) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--icon-text--spacing);\n }\n}\n\n@media (max-width: 550px) {\n .combine:has(:global(.flow--form-field)):has(.button) {\n flex-direction: column;\n row-gap: var(--section--spacing);\n align-items: stretch;\n\n .button {\n width: 100%;\n }\n\n &:has(label) {\n .button {\n margin-top: 0;\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n &:has(.avatar):has(.text) {\n display: flex;\n gap: var(--combine--avatar-text--spacing);\n height: fit-content;\n\n --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n min-height: var(--first-two-lines-height);\n\n .text {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-self: center;\n font-size: var(--font-size-text--s);\n }\n\n .avatar {\n margin-top: calc(\n (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n );\n }\n }\n\n &:has(:global(.flow--form-field)):has(.button) {\n display: flex;\n align-items: flex-start;\n column-gap: var(--combine--input-button--spacing);\n\n :global(.flow--form-field) {\n flex-grow: 1;\n }\n\n // `<label>` is also the root element react-aria renders for Checkbox and\n // Switch, so `Label`'s class would not match the same set of children.\n // stylelint-disable-next-line selector-max-type -- see above\n &:has(label) {\n .button {\n margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n }\n }\n }\n\n &:has(.text):has(.contextualHelpTriggerButton),\n &:has(.text):has(.copyButton) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--text-button--spacing);\n }\n\n &:has(> .text):has(> .icon) {\n display: inline-flex;\n align-items: center;\n column-gap: var(--combine--icon-text--spacing);\n }\n}\n\n@media (max-width: 550px) {\n .combine:has(:global(.flow--form-field)):has(.button) {\n flex-direction: column;\n row-gap: var(--section--spacing);\n align-items: stretch;\n\n .button {\n width: 100%;\n }\n\n // stylelint-disable-next-line selector-max-type -- see the `:has(label)` above\n &:has(label) {\n .button {\n margin-top: 0;\n }\n }\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ComboBox/ComboBox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.module.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.comboBox {\n .input {\n order: 2;\n display: grid;\n grid-template-areas: \"input\";\n\n ~~input~~ {\n @include formControl.formControl();\n\n grid-area: input;\n padding-inline-end: calc(\n var(--button--padding-icon-only) * 2 + var(--icon--size--s)\n );\n }\n\n .toggle {\n grid-area: input;\n justify-self: end;\n margin: var(--form-control--border-width);\n padding: calc(\n var(--button--padding-icon-only) - var(--form-control--border-width)\n );\n\n &:hover {\n background-color: transparent;\n }\n\n &[data-pressed] {\n background-color: transparent;\n }\n }\n }\n\n &:not([data-disabled=\"true\"]):hover {\n ~~input~~:not(:read-only),\n .toggle:not([data-disabled=\"true\"]) {\n background-color: var(--form-control--background-color--hover);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ComboBox.module.mjs","names":[],"sources":["../../../../../../../src/components/ComboBox/ComboBox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.comboBox {\n .input {\n order: 2;\n display: grid;\n grid-template-areas: \"input\";\n\n /* react-aria's Input — ComboBox passes no className, so its default\n class is the handle. /\n :global(.react-aria-Input) {\n @include formControl.formControl();\n\n grid-area: input;\n padding-inline-end: calc(\n var(--button--padding-icon-only) 2 + var(--icon--size--s)\n );\n }\n\n .toggle {\n grid-area: input;\n justify-self: end;\n margin: var(--form-control--border-width);\n padding: calc(\n var(--button--padding-icon-only) - var(--form-control--border-width)\n );\n\n &:hover {\n background-color: transparent;\n }\n\n &[data-pressed] {\n background-color: transparent;\n }\n }\n }\n\n &:not([data-disabled=\"true\"]):hover {\n :global(.react-aria-Input):not(:read-only),\n .toggle:not([data-disabled=\"true\"]) {\n background-color: var(--form-control--background-color--hover);\n }\n }\n}\n"],"mappings":""}

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

@@ -6,7 +6,7 @@ import { useOverlayController } from "../../lib/controller/overlay/useOverlayCon
 import { Action } from "../Action/Action.mjs";
 import { OverlayContextProvider } from "../../lib/controller/overlay/OverlayContextProvider.mjs";
 import { Popover } from "../Popover/Popover.mjs";
-import { closesOnSelect, getAriaSelectionMode, getMenuItemSelectionVariant } from "./lib.mjs";
+import { getAriaSelectionMode, getCloseOverlayType, getMenuItemSelectionVariant } from "./lib.mjs";
 import ContextMenuContentView from "../../views/ContextMenuContentView.mjs";
 import ContextMenu_module_default from "./ContextMenu.module.mjs";
 import { OverlayContentSuspendWatcher } from "../../lib/controller/overlay/OverlayContentSuspendWatcher.mjs";
@@ -51,7 +51,7 @@ var ContextMenu = flowComponent("ContextMenu", (props) => {
 					children: /* @__PURE__ */ jsx(PropsContextProvider, {
 						props: propsContext,
 						children: /* @__PURE__ */ jsx(Action, {
-							closeOverlay: closesOnSelect(selectionMode),
+							closeOverlay: getCloseOverlayType(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 getCloseOverlayType,\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={getCloseOverlayType(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,oBAAoB,aAAa;OACpD;MACK,CAAA;KACY,CAAA;IACA,CAAA;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}

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 > 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"],"mappings":""}

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs CHANGED Viewed

@@ -3,7 +3,7 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
 import { Action } from "../../../Action/Action.mjs";
-import { closesOnSelect, getAriaSelectionMode, getMenuItemSelectionVariant } from "../../lib.mjs";
+import { getAriaSelectionMode, getCloseOverlayType, getMenuItemSelectionVariant } from "../../lib.mjs";
 import ContextMenu_module_default from "../../ContextMenu.module.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
@@ -29,7 +29,7 @@ var ContextMenuSection = flowComponent("ContextMenuSection", (props) => {
 			children: /* @__PURE__ */ jsx(Action, {
 				skip: true,
 				children: /* @__PURE__ */ jsx(Action, {
-					closeOverlay: closesOnSelect(selectionMode),
+					closeOverlay: getCloseOverlayType(selectionMode),
 					children
 				})
 			})

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuSection.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\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 styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n ~~closesOnSelect~~,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<\n Aria.MenuSectionProps<MenuItemProps>,\n \"defaultSelectedKeys\" \| \"selectedKeys\"\n > & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext}>\n <Action skip>\n <Action closeOverlay={~~closesOnSelect~~(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,WAAW,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,~~eAAe~~,aAAa;~~KAC/C~~;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}
1	+ {"version":3,"file":"ContextMenuSection.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\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 styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n getCloseOverlayType,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<\n Aria.MenuSectionProps<MenuItemProps>,\n \"defaultSelectedKeys\" \| \"selectedKeys\"\n > & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext}>\n <Action skip>\n <Action closeOverlay={getCloseOverlayType(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,WAAW,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,oBAAoB,aAAa;KACpD;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}

package/dist/js/packages/components/src/components/ContextMenu/lib.mjs CHANGED Viewed

@@ -7,14 +7,10 @@ var getAriaSelectionMode = (selectionMode) => {
 var getMenuItemSelectionVariant = (selectionMode) => {
 	return selectionMode === "single" || selectionMode === "multiple" ? "control" : selectionMode;
 };
-/**
-* Whether selecting an item closes the menu. A mode that collects several
-* selections keeps it open.
-*/
-var closesOnSelect = (selectionMode) => {
-	return selectionMode !== "multiple" && selectionMode !== "switch";
+var getCloseOverlayType = (selectionMode) => {
+	return selectionMode === "multiple" || selectionMode === "switch" ? void 0 : "ContextMenu";
 };
 //#endregion
-export { closesOnSelect, getAriaSelectionMode, getMenuItemSelectionVariant };
+export { getAriaSelectionMode, getCloseOverlayType, getMenuItemSelectionVariant };
 //# sourceMappingURL=lib.mjs.map

package/dist/js/packages/components/src/components/ContextMenu/lib.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lib.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/lib.ts"],"sourcesContent":["export type ContextMenuSelectionMode =\n \"single\" \| \"multiple\" \| \"navigation\" \| \"switch\";\n\nexport const getAriaSelectionMode = (\n selectionMode?: ContextMenuSelectionMode,\n) => {\n return selectionMode === \"navigation\"\n ? \"none\"\n : selectionMode === \"switch\"\n ? \"multiple\"\n : selectionMode;\n};\n\nexport const getMenuItemSelectionVariant = (\n selectionMode?: ContextMenuSelectionMode,\n) => {\n return selectionMode === \"single\" \|\| selectionMode === \"multiple\"\n ? \"control\"\n : selectionMode;\n};\n\~~n/*\n Whether selecting an item closes the menu. A mode that collects several\n * selections keeps it open.\n */\~~nexport const ~~closesOnSelect~~ = (selectionMode?: ContextMenuSelectionMode) => {\n return selectionMode ~~!==~~ \"multiple\" && selectionMode ~~!==~~ \"switch\";\n};\n"],"mappings":";;;AAGA,IAAa,wBACX,kBACG;CACH,OAAO,kBAAkB,eACrB,SACA,kBAAkB,WAChB,aACA;AACR;AAEA,IAAa,+BACX,kBACG;CACH,OAAO,kBAAkB,YAAY,kBAAkB,aACnD,YACA;AACN~~;;;;;AAMA~~,IAAa,~~kBAAkB~~,~~kBAA6C~~;~~CAC1E~~,OAAO,kBAAkB,cAAc,kBAAkB;~~AAC3D~~"}
1	+ {"version":3,"file":"lib.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/lib.ts"],"sourcesContent":["export type ContextMenuSelectionMode =\n \"single\" \| \"multiple\" \| \"navigation\" \| \"switch\";\n\nexport const getAriaSelectionMode = (\n selectionMode?: ContextMenuSelectionMode,\n) => {\n return selectionMode === \"navigation\"\n ? \"none\"\n : selectionMode === \"switch\"\n ? \"multiple\"\n : selectionMode;\n};\n\nexport const getMenuItemSelectionVariant = (\n selectionMode?: ContextMenuSelectionMode,\n) => {\n return selectionMode === \"single\" \|\| selectionMode === \"multiple\"\n ? \"control\"\n : selectionMode;\n};\n\nexport const getCloseOverlayType = (\n selectionMode?: ContextMenuSelectionMode,\n) => {\n return selectionMode === \"multiple\" \|\| selectionMode === \"switch\"\n ? undefined\n : \"ContextMenu\";\n};\n"],"mappings":";;;AAGA,IAAa,wBACX,kBACG;CACH,OAAO,kBAAkB,eACrB,SACA,kBAAkB,WAChB,aACA;AACR;AAEA,IAAa,+BACX,kBACG;CACH,OAAO,kBAAkB,YAAY,kBAAkB,aACnD,YACA;AACN;AAEA,IAAa,uBACX,kBACG;CACH,OAAO,kBAAkB,cAAc,kBAAkB,WACrD,KAAA,IACA;AACN"}

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs CHANGED Viewed

@@ -11,17 +11,20 @@ var DateRangeInput = (props) => {
 	const { isDisabled, ref } = props;
 	return /* @__PURE__ */ jsxs(Aria.Group, {
 		className: DateRangeInput_module_default.dateRangeInput,
-		children: [/* @__PURE__ */ jsxs("div", { children: [
-			/* @__PURE__ */ jsx(DateInput, {
-				slot: "start",
-				ref
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "–"
-			}),
-			/* @__PURE__ */ jsx(DateInput, { slot: "end" })
-		] }), /* @__PURE__ */ jsx(Button, {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: DateRangeInput_module_default.inputs,
+			children: [
+				/* @__PURE__ */ jsx(DateInput, {
+					slot: "start",
+					ref
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "–"
+				}),
+				/* @__PURE__ */ jsx(DateInput, { slot: "end" })
+			]
+		}), /* @__PURE__ */ jsx(Button, {
 			variant: "plain",
 			color: "secondary",
 			isDisabled,

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangeInput.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n isDisabled?: boolean;\n ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n const { isDisabled, ref } = props;\n\n return (\n <Aria.Group className={styles.dateRangeInput}>\n <div>\n <DateInput slot=\"start\" ref={ref} />\n <span aria-hidden=\"true\">–</span>\n <DateInput slot=\"end\" />\n </div>\n <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n <IconDate />\n </Button>\n </Aria.Group>\n );\n};\n\nexport default DateRangeInput;\n"],"mappings":";;;;;;;;;AAaA,IAAa,kBAAsC,UAAU;CAC3D,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAW,8BAAO;EAA9B,UAAA,CACE,qBAAC,OAAD,~~EAAA~~,UAAA;~~GACE~~,oBAAC,WAAD;~~IAAW~~,MAAK;~~IAAa~~;~~GAAM~~,CAAA;~~GACnC~~,oBAAC,QAAD;~~IAAM~~,eAAY;~~IAAO~~,UAAA;~~GAAO~~,CAAA;~~GAChC~~,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;~~EACpB~~,~~EAAA,~~CAAA,~~GACL~~,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}
1	+ {"version":3,"file":"DateRangeInput.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type React from \"react\";\nimport styles from \"./DateRangeInput.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconDate } from \"@/components/Icon/components/icons\";\nimport DateInput from \"@/components/DateInput\";\n\nexport interface DateInputProps {\n isDisabled?: boolean;\n ref?: React.Ref<HTMLSpanElement>;\n}\n\nexport const DateRangeInput: FC<DateInputProps> = (props) => {\n const { isDisabled, ref } = props;\n\n return (\n <Aria.Group className={styles.dateRangeInput}>\n <div className={styles.inputs}>\n <DateInput slot=\"start\" ref={ref} />\n <span aria-hidden=\"true\">–</span>\n <DateInput slot=\"end\" />\n </div>\n <Button variant=\"plain\" color=\"secondary\" isDisabled={isDisabled}>\n <IconDate />\n </Button>\n </Aria.Group>\n );\n};\n\nexport default DateRangeInput;\n"],"mappings":";;;;;;;;;AAaA,IAAa,kBAAsC,UAAU;CAC3D,MAAM,EAAE,YAAY,QAAQ;CAE5B,OACE,qBAAC,KAAK,OAAN;EAAY,WAAW,8BAAO;EAA9B,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,8BAAO;GAAvB,UAAA;IACE,oBAAC,WAAD;KAAW,MAAK;KAAa;IAAM,CAAA;IACnC,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAO,CAAA;IAChC,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;GACpB;EACL,CAAA,GAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAwB;GACpD,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACE;;AAEhB"}

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.mjs CHANGED Viewed

@@ -3,11 +3,13 @@
 //#region src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss
 var dateRangeInput = "flow--date-range-picker--date-range-input";
 var readonly = "flow--date-range-picker--date-range-input--readonly";
+var inputs = "flow--date-range-picker--date-range-input--inputs";
 var DateRangeInput_module_default = {
 	dateRangeInput,
-	readonly
+	readonly,
+	inputs
 };
 //#endregion
-export { dateRangeInput, DateRangeInput_module_default as default, readonly };
+export { dateRangeInput, DateRangeInput_module_default as default, inputs, readonly };
 //# sourceMappingURL=DateRangeInput.module.mjs.map

package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangeInput.module.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.dateRangeInput {\n display: flex;\n justify-content: space-between;\n\n @include formControl.formControl();\n\n > ~~div~~ {\n display: flex;\n align-items: center;\n }\n\n :global(.react-aria-DateInput) {\n display: flex;\n }\n\n :global(.react-aria-DateSegment) {\n border-radius: var(--date-picker--date-segment-corner-radius);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &:focus {\n background: var(--date-picker--date-segment-background-color--focused);\n outline: none;\n }\n }\n\n ~~> span {\n display~~: ~~flex;\n align-items: center;\n }\n\n :~~global(.react-aria-DateInput):first-of-type {\n padding-inline-end: var(--size-px--xxs);\n }\n\n :global(.react-aria-DateInput):last-of-type {\n padding-inline-start: var(--size-px--xxs);\n }\n\n :global(.flow--button) {\n margin-block: calc((var(--form-control--padding-y) - 1px) * -1);\n margin-inline-end: calc(var(--form-control--padding-x) * -1);\n padding: calc(\n var(--button--padding-icon-only) - var(--form-control--border-width)\n );\n outline-offset: calc(var(--size-px--xxxs) * -1);\n }\n\n [data-placeholder=\"true\"] ~ * {\n color: var(--form-control--placeholder-color--default);\n }\n\n [data-disabled=\"true\"] ~ * {\n color: var(--form-control--placeholder-color--disabled);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DateRangeInput.module.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.dateRangeInput {\n display: flex;\n justify-content: space-between;\n\n @include formControl.formControl();\n\n > .inputs {\n display: flex;\n align-items: center;\n }\n\n :global(.react-aria-DateInput) {\n display: flex;\n }\n\n :global(.react-aria-DateSegment) {\n border-radius: var(--date-picker--date-segment-corner-radius);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &:focus {\n background: var(--date-picker--date-segment-background-color--focused);\n outline: none;\n }\n }\n\n :global(.react-aria-DateInput):first-of-type {\n padding-inline-end: var(--size-px--xxs);\n }\n\n :global(.react-aria-DateInput):last-of-type {\n padding-inline-start: var(--size-px--xxs);\n }\n\n :global(.flow--button) {\n margin-block: calc((var(--form-control--padding-y) - 1px) * -1);\n margin-inline-end: calc(var(--form-control--padding-x) * -1);\n padding: calc(\n var(--button--padding-icon-only) - var(--form-control--border-width)\n );\n outline-offset: calc(var(--size-px--xxxs) * -1);\n }\n\n [data-placeholder=\"true\"] ~ * {\n color: var(--form-control--placeholder-color--default);\n }\n\n [data-disabled=\"true\"] ~ * {\n color: var(--form-control--placeholder-color--disabled);\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/DonutChart/DonutChart.module.mjs CHANGED Viewed

@@ -4,9 +4,10 @@
 var donutChart = "flow--donut-chart";
 var border = "flow--donut-chart--border";
 var background = "flow--donut-chart--background";
+var fill = "flow--donut-chart--fill";
+var segment = "flow--donut-chart--segment";
 var value = "flow--donut-chart--value";
 var info = "flow--donut-chart--info";
-var fill = "flow--donut-chart--fill";
 var success = "flow--donut-chart--success";
 var danger = "flow--donut-chart--danger";
 var warning = "flow--donut-chart--warning";
@@ -20,10 +21,12 @@ var DonutChart_module_default = {
 	donutChart,
 	border,
 	background,
+	fill,
+	segment,
+	"donut-chart-fill": "flow--donut-chart--donut-chart-fill",
 	value,
 	"size-l": "flow--donut-chart--size-l",
 	info,
-	fill,
 	success,
 	danger,
 	warning,
@@ -35,6 +38,6 @@ var DonutChart_module_default = {
 	left
 };
 //#endregion
-export { background, border, bottom, danger, DonutChart_module_default as default, donutChart, donutChartContainer, fill, info, left, legend, right, success, top, value, warning };
+export { background, border, bottom, danger, DonutChart_module_default as default, donutChart, donutChartContainer, fill, info, left, legend, right, segment, success, top, value, warning };
 //# sourceMappingURL=DonutChart.module.mjs.map

package/dist/js/packages/components/src/components/DonutChart/DonutChart.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n position: relative;\n width: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .value {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: anywhere;\n padding: var(--donut-chart--padding--m);\n }\n\n &.size-l {\n .value {\n font-size: var(--font-size-heading--xl);\n padding: var(--donut-chart--padding--l);\n\n small {\n font-size: var(--font-size-heading--l);\n }\n }\n }\n\n /* Variants */\n @mixin status($status) {\n &.#{$status} {\n .fill {\n stroke: var(--donut-chart--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n.donutChartContainer {\n display: flex;\n gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n align-items: center;\n\n &.bottom {\n flex-direction: column;\n }\n\n &.top {\n flex-direction: column-reverse;\n }\n\n &.right {\n .legend {\n justify-content: start;\n }\n }\n\n &.left {\n flex-direction: row-reverse;\n\n .legend {\n justify-content: start;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n position: relative;\n width: fit-content;\n height: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .fill,\n .segment {\n transform: rotate(var(--donut-chart--fill-rotation));\n transform-box: fill-box;\n transform-origin: center;\n animation: donut-chart-fill var(--donut-chart--transition-duration) ease;\n }\n\n .value {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: anywhere;\n padding: var(--donut-chart--padding--m);\n }\n\n &.size-l {\n .value {\n font-size: var(--font-size-heading--xl);\n padding: var(--donut-chart--padding--l);\n\n // Raw consumer markup inside the value slot — nothing to class.\n // stylelint-disable-next-line selector-max-type -- consumer markup\n small {\n font-size: var(--font-size-heading--l);\n }\n }\n }\n\n /* Variants /\n @mixin status($status) {\n &.#{$status} {\n .fill {\n stroke: var(--donut-chart--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n.donutChartContainer {\n display: flex;\n gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n align-items: center;\n\n &.bottom {\n flex-direction: column;\n }\n\n &.top {\n flex-direction: column-reverse;\n }\n\n &.right {\n .legend {\n justify-content: start;\n }\n }\n\n &.left {\n flex-direction: row-reverse;\n\n .legend {\n justify-content: start;\n }\n }\n}\n\n/ The implicit \"to\" keyframe picks up the fill's own offset and rotation. */\n@keyframes donut-chart-fill {\n from {\n stroke-dashoffset: var(--donut-chart--circumference);\n transform: rotate(-90deg);\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/DonutChart/components/DonutChartFill.mjs CHANGED Viewed

@@ -5,6 +5,16 @@ import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalCo
 import DonutChart_module_default from "../DonutChart.module.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DonutChart/components/DonutChartFill.tsx
+/**
+* The rotation is a custom property instead of a `transform` attribute so that
+* the load-in keyframes can animate it – growing every segment out of 12
+* o'clock instead of leaving gaps between them. They need the circumference,
+* too, to animate out of an empty circle.
+*/
+var fillStyle = (rotation, circumference) => ({
+	"--donut-chart--fill-rotation": `${rotation}deg`,
+	"--donut-chart--circumference": circumference
+});
 var DonutChartFill = (props) => {
 	const { center, value = 0, radius, segments, maxValue } = props;
 	const circumference = 2 * radius * Math.PI;
@@ -16,7 +26,7 @@ var DonutChartFill = (props) => {
 		r: radius,
 		strokeDasharray: `${circumference} ${circumference}`,
 		strokeDashoffset: circumference - percent / 100 * circumference,
-		transform: `rotate(-90 ${center} ${center})`
+		style: fillStyle(-90, circumference)
 	});
 	let rotationOffset = 0;
 	return segments.map((s, i) => {
@@ -25,13 +35,14 @@ var DonutChartFill = (props) => {
 		rotationOffset = rotationOffset + 360 / 100 * segmentPercent;
 		const color = !s.color || isCategoricalColor(s.color) ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})` : s.color;
 		return /* @__PURE__ */ jsx("circle", {
+			className: DonutChart_module_default.segment,
 			cx: center,
 			cy: center,
 			r: radius,
 			strokeDasharray: `${circumference} ${circumference}`,
 			strokeDashoffset: circumference - segmentPercent / 100 * circumference,
 			stroke: color,
-			transform: `rotate(${-90 + currentRotationOffset} ${center} ${center})`
+			style: fillStyle(-90 + currentRotationOffset, circumference)
 		}, i);
 	});
 };

package/dist/js/packages/components/src/components/DonutChart/components/DonutChartFill.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChartFill.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n center: number;\n value?: number;\n radius: number;\n maxValue: number;\n}\n\nexport const DonutChartFill: FC<Props> = (props) => {\n const { center, value = 0, radius, segments, maxValue } = props;\n\n const circumference = 2 * radius * Math.PI;\n\n const percent = (100 / maxValue) * value;\n\n if (!segments) {\n return (\n <circle\n className={styles.fill}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={circumference - (percent / 100) * circumference}\n ~~transform~~={~~`rotate~~(-90 ~~${center} ${center}~~)`}\n />\n );\n }\n\n let rotationOffset = 0;\n\n return segments.map((s, i) => {\n const segmentPercent = (100 / maxValue) * s.value;\n\n const currentRotationOffset = rotationOffset;\n\n rotationOffset = rotationOffset + (360 / 100) * segmentPercent;\n\n const color =\n !s.color \|\| isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`\n : s.color;\n\n return (\n <circle\n key={i}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={\n circumference - (segmentPercent / 100) * circumference\n }\n stroke={color}\n ~~transform~~={~~`rotate~~(${-90 + currentRotationOffset} ~~${center} ${center}~~)`}\n />\n );\n });\n};\n"],"mappings":"~~;;;;;;;AAaA~~,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,QAAQ,QAAQ,GAAG,QAAQ,UAAU,aAAa;CAE1D,MAAM,gBAAgB,IAAI,SAAS,KAAK;CAExC,MAAM,UAAW,MAAM,WAAY;CAEnC,IAAI,CAAC,UACH,OACE,oBAAC,UAAD;EACE,WAAW,0BAAO;EAClB,IAAI;EACJ,IAAI;EACJ,GAAG;EACH,iBAAiB,GAAG,cAAc,GAAG;EACrC,kBAAkB,gBAAiB,UAAU,MAAO;EACpD,~~WAAW~~,~~cAAc~~,~~OAAO~~,~~GAAG,OAAO~~;~~CAC3C~~,CAAA;CAIL,IAAI,iBAAiB;CAErB,OAAO,SAAS,KAAK,GAAG,MAAM;EAC5B,MAAM,iBAAkB,MAAM,WAAY,EAAE;EAE5C,MAAM,wBAAwB;EAE9B,iBAAiB,iBAAkB,MAAM,MAAO;EAEhD,MAAM,QACJ,CAAC,EAAE,SAAS,mBAAmB,EAAE,KAAK,IAClC,6BAA6B,EAAE,SAAS,2BAA2B,CAAC,EAAE,KACtE,EAAE;~~EAER~~,OACE,oBAAC,UAAD;GAEE,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,iBAAiB,GAAG,cAAc,GAAG;GACrC,kBACE,gBAAiB,iBAAiB,MAAO;GAE3C,QAAQ;GACR,~~WAAW~~,UAAU,MAAM,~~sBAAsB~~,~~GAAG,OAAO,GAAG,OAAO~~;~~EACtE~~,~~GAVM~~,~~CAUN~~;CAEL,CAAC;AACH"}
1	+ {"version":3,"file":"DonutChartFill.mjs","names":[],"sources":["../../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { CSSProperties, FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n center: number;\n value?: number;\n radius: number;\n maxValue: number;\n}\n\n/*\n The rotation is a custom property instead of a `transform` attribute so that\n * the load-in keyframes can animate it – growing every segment out of 12\n * o'clock instead of leaving gaps between them. They need the circumference,\n * too, to animate out of an empty circle.\n /\nconst fillStyle = (rotation: number, circumference: number) =>\n ({\n \"--donut-chart--fill-rotation\": `${rotation}deg`,\n \"--donut-chart--circumference\": circumference,\n }) as CSSProperties;\n\nexport const DonutChartFill: FC<Props> = (props) => {\n const { center, value = 0, radius, segments, maxValue } = props;\n\n const circumference = 2 radius * Math.PI;\n\n const percent = (100 / maxValue) * value;\n\n if (!segments) {\n return (\n <circle\n className={styles.fill}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={circumference - (percent / 100) * circumference}\n style={fillStyle(-90, circumference)}\n />\n );\n }\n\n let rotationOffset = 0;\n\n return segments.map((s, i) => {\n const segmentPercent = (100 / maxValue) * s.value;\n\n const currentRotationOffset = rotationOffset;\n\n rotationOffset = rotationOffset + (360 / 100) * segmentPercent;\n\n const color =\n !s.color \|\| isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`\n : s.color;\n\n // Index keys: a segment added after mount animates alone out of 12 o'clock,\n // over the segments already there.\n return (\n <circle\n key={i}\n className={styles.segment}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={\n circumference - (segmentPercent / 100) * circumference\n }\n stroke={color}\n style={fillStyle(-90 + currentRotationOffset, circumference)}\n />\n );\n });\n};\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,aAAa,UAAkB,mBAClC;CACC,gCAAgC,GAAG,SAAS;CAC5C,gCAAgC;AAClC;AAEF,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,QAAQ,QAAQ,GAAG,QAAQ,UAAU,aAAa;CAE1D,MAAM,gBAAgB,IAAI,SAAS,KAAK;CAExC,MAAM,UAAW,MAAM,WAAY;CAEnC,IAAI,CAAC,UACH,OACE,oBAAC,UAAD;EACE,WAAW,0BAAO;EAClB,IAAI;EACJ,IAAI;EACJ,GAAG;EACH,iBAAiB,GAAG,cAAc,GAAG;EACrC,kBAAkB,gBAAiB,UAAU,MAAO;EACpD,OAAO,UAAU,KAAK,aAAa;CACpC,CAAA;CAIL,IAAI,iBAAiB;CAErB,OAAO,SAAS,KAAK,GAAG,MAAM;EAC5B,MAAM,iBAAkB,MAAM,WAAY,EAAE;EAE5C,MAAM,wBAAwB;EAE9B,iBAAiB,iBAAkB,MAAM,MAAO;EAEhD,MAAM,QACJ,CAAC,EAAE,SAAS,mBAAmB,EAAE,KAAK,IAClC,6BAA6B,EAAE,SAAS,2BAA2B,CAAC,EAAE,KACtE,EAAE;EAIR,OACE,oBAAC,UAAD;GAEE,WAAW,0BAAO;GAClB,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,iBAAiB,GAAG,cAAc,GAAG;GACrC,kBACE,gBAAiB,iBAAiB,MAAO;GAE3C,QAAQ;GACR,OAAO,UAAU,MAAM,uBAAuB,aAAa;EAC5D,GAXM,CAWN;CAEL,CAAC;AACH"}

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

@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { IllustratedMessage } from "../IllustratedMessage/IllustratedMessage.mjs";
 import FileDropZone_module_default from "./FileDropZone.module.mjs";
+import { getAcceptedFiles } from "../../lib/files/acceptedFiles.mjs";
 import clsx from "clsx";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -39,8 +40,7 @@ var FileDropZone = flowComponent("FileDropZone", (props) => {
 	};
 	const onDropHandler = async (event) => {
 		if (isReadOnly) return;
-		const fileDropItems = event.items.filter((file) => file.kind === "file");
-		const files = await Promise.all(fileDropItems.filter((f) => !accept || accept?.includes(f.type)).map(async (f) => await f.getFile()));
+		const files = await getAcceptedFiles(event.items, accept);
 		if (files.length > 0) {
 			const fileTransfer = new DataTransfer();
 			for (const file of multiple ? files : [files[0]]) if (file) fileTransfer.items.add(file);