npm - @mittwald/flow-react-components - Versions diffs - 1.3.0-next.3 → 1.3.0-next.30 - Mend

@mittwald/flow-react-components 1.3.0-next.3 → 1.3.0-next.30

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

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.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 { 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 {/ 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 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;EAIrD,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"}

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/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 /* 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 &.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. 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 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.mjs CHANGED Viewed

@@ -29,7 +29,10 @@ var CombineImplementation = (props) => {
 			className: Combine_module_default.icon,
 			color: "neutral"
 		},
-		ContextualHelpTrigger: { Button: { className: Combine_module_default.contextualHelpTriggerButton } }
+		ContextualHelpTrigger: { Button: {
+			className: Combine_module_default.contextualHelpTriggerButton,
+			color: "secondary"
+		} }
 	};
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Combine.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Combine.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CombineProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {}\n\n/*\n The arrangement itself, shared with the deprecated `Align` alias so both\n * names render the exact same output.\n /\nexport const CombineImplementation: FC<CombineProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.combine, className);\n\n const propsContext: PropsContext = {\n Text: { className: styles.text },\n Button: { className: styles.button },\n Avatar: { className: styles.avatar, size: \"m\" },\n CopyButton: { size: \"s\", className: styles.copyButton },\n Icon: { size: \"s\", className: styles.icon, color: \"neutral\" },\n ContextualHelpTrigger: {\n Button: {\n className: styles.contextualHelpTriggerButton,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName}>{children}</div>\n </PropsContextProvider>\n );\n};\n\n/\n @flowStatus new\n * @flr-generate all\n */\nexport const Combine = flowComponent(\"Combine\", CombineImplementation, {\n type: \"layout\",\n});\n\nexport default Combine;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,MAAM,eAA6B;EACjC,MAAM,EAAE,WAAW,uBAAO,KAAK;EAC/B,QAAQ,EAAE,WAAW,uBAAO,OAAO;EACnC,QAAQ;GAAE,WAAW,uBAAO;GAAQ,MAAM;EAAI;EAC9C,YAAY;GAAE,MAAM;GAAK,WAAW,uBAAO;EAAW;EACtD,MAAM;GAAE,MAAM;GAAK,WAAW,uBAAO;GAAM,OAAO;EAAU;EAC5D,uBAAuB,EACrB,QAAQ,~~EACN,~~WAAW,uBAAO,~~4BACpB~~,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAC1B,CAAA;AAE1B;;;;;AAMA,IAAa,UAAU,cAAc,WAAW,uBAAuB,EACrE,MAAM,SACR,CAAC"}
1	+ {"version":3,"file":"Combine.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Combine.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CombineProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {}\n\n/*\n The arrangement itself, shared with the deprecated `Align` alias so both\n * names render the exact same output.\n /\nexport const CombineImplementation: FC<CombineProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.combine, className);\n\n const propsContext: PropsContext = {\n Text: { className: styles.text },\n Button: { className: styles.button },\n Avatar: { className: styles.avatar, size: \"m\" },\n CopyButton: { size: \"s\", className: styles.copyButton },\n Icon: { size: \"s\", className: styles.icon, color: \"neutral\" },\n ContextualHelpTrigger: {\n Button: {\n className: styles.contextualHelpTriggerButton,\n color: \"secondary\",\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName}>{children}</div>\n </PropsContextProvider>\n );\n};\n\n/\n @flowStatus new\n * @flr-generate all\n */\nexport const Combine = flowComponent(\"Combine\", CombineImplementation, {\n type: \"layout\",\n});\n\nexport default Combine;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,MAAM,eAA6B;EACjC,MAAM,EAAE,WAAW,uBAAO,KAAK;EAC/B,QAAQ,EAAE,WAAW,uBAAO,OAAO;EACnC,QAAQ;GAAE,WAAW,uBAAO;GAAQ,MAAM;EAAI;EAC9C,YAAY;GAAE,MAAM;GAAK,WAAW,uBAAO;EAAW;EACtD,MAAM;GAAE,MAAM;GAAK,WAAW,uBAAO;GAAM,OAAO;EAAU;EAC5D,uBAAuB,EACrB,QAAQ;GACN,WAAW,uBAAO;GAClB,OAAO;EACT,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAgB;EAAc,CAAA;CAC1B,CAAA;AAE1B;;;;;AAMA,IAAa,UAAU,cAAc,WAAW,uBAAuB,EACrE,MAAM,SACR,CAAC"}

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: flex;\n align-items: center;\n column-gap: var(--combine--text-button--spacing);\n }\n\n &:has(> .text):has(> .icon) {\n display: 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.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/CopyButton/CopyButton.mjs CHANGED Viewed

@@ -14,10 +14,11 @@ import { onlyText } from "react-children-utilities";
 //#region src/components/CopyButton/CopyButton.tsx
 /** @flr-generate all */
 var CopyButton = flowComponent("CopyButton", (props) => {
-	const { text = "", ref, variant = "plain", color = "secondary", ...buttonProps } = props;
+	const { text = "", ref, variant = "plain", color = "secondary", onCopy, ...buttonProps } = props;
 	const tooltip = useLocalizedStringFormatter(__locale_default, "CopyButton").format("copy");
-	const copyValue = () => {
-		copy(onlyText(text));
+	const copyValue = async () => {
+		const copiedText = onlyText(text);
+		if (await copy(copiedText)) onCopy?.(copiedText);
 	};
 	return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(Action, {
 		onAction: copyValue,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyButton.mjs","names":[],"sources":["../../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n extends\n Omit<ButtonProps, \"onPress\" \| \"aria-label\" \| \"render\">,\n FlowComponentProps<HTMLButtonElement> {\n /* The text to copy. /\n text?: string;\n}\n\n/* @flr-generate all */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n const {\n text = \"\",\n ref,\n variant = \"plain\",\n color = \"secondary\",\n ...buttonProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CopyButton\");\n\n const tooltip = stringFormatter.format(\"copy\");\n\n const copyValue = () => {\n ~~copy(~~onlyText(text));\n };\n\n return (\n <TooltipTrigger>\n <Action onAction={copyValue} showFeedback>\n <Button\n aria-label={tooltip}\n {...buttonProps}\n ref={ref}\n variant={variant}\n color={color}\n >\n <IconCopy />\n </Button>\n </Action>\n <Tooltip>{tooltip}</Tooltip>\n </TooltipTrigger>\n );\n});\n\nexport default CopyButton;\n"],"mappings":";;;;;;;;;;;;;;;~~AAqBA~~,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,OAAO,IACP,KACA,UAAU,SACV,QAAQ,aACR,GAAG,gBACD;CAIJ,MAAM,UAFkB,4BAA4B,kBAAS,YAE7C,CAAA,CAAgB,OAAO,MAAM;CAE7C,MAAM,~~kBAAkB~~;~~EACtB~~,~~KAAK~~,SAAS,IAAI,~~CAAC~~;~~CACrB~~;CAEA,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAQ,UAAU;EAAW,cAAA;EAC3B,UAAA,oBAAC,QAAD;GACE,cAAY;GACZ,GAAI;GACC;GACI;GACF;GAEP,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA;CACF,CAAA,GACR,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CACb,EAAA,CAAA;AAEpB,CAAC"}
1	+ {"version":3,"file":"CopyButton.mjs","names":[],"sources":["../../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n extends\n Omit<ButtonProps, \"onPress\" \| \"aria-label\" \| \"render\">,\n FlowComponentProps<HTMLButtonElement> {\n /* The text to copy. /\n text?: string;\n /\n Called with the copied text once it has been written to the clipboard. Not\n * called when copying fails.\n /\n onCopy?: (text: string) => void;\n}\n\n/* @flr-generate all */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n const {\n text = \"\",\n ref,\n variant = \"plain\",\n color = \"secondary\",\n onCopy,\n ...buttonProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CopyButton\");\n\n const tooltip = stringFormatter.format(\"copy\");\n\n const copyValue = async () => {\n const copiedText = onlyText(text);\n if (await copy(copiedText)) {\n onCopy?.(copiedText);\n }\n };\n\n return (\n <TooltipTrigger>\n <Action onAction={copyValue} showFeedback>\n <Button\n aria-label={tooltip}\n {...buttonProps}\n ref={ref}\n variant={variant}\n color={color}\n >\n <IconCopy />\n </Button>\n </Action>\n <Tooltip>{tooltip}</Tooltip>\n </TooltipTrigger>\n );\n});\n\nexport default CopyButton;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,OAAO,IACP,KACA,UAAU,SACV,QAAQ,aACR,QACA,GAAG,gBACD;CAIJ,MAAM,UAFkB,4BAA4B,kBAAS,YAE7C,CAAA,CAAgB,OAAO,MAAM;CAE7C,MAAM,YAAY,YAAY;EAC5B,MAAM,aAAa,SAAS,IAAI;EAChC,IAAI,MAAM,KAAK,UAAU,GACvB,SAAS,UAAU;CAEvB;CAEA,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAQ,UAAU;EAAW,cAAA;EAC3B,UAAA,oBAAC,QAAD;GACE,cAAY;GACZ,GAAI;GACC;GACI;GACF;GAEP,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA;CACF,CAAA,GACR,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CACb,EAAA,CAAA;AAEpB,CAAC"}

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);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDropZone.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n extends\n PropsWithClassName,\n FlowComponentProps<FocusableElement>,\n PropsWithChildren,\n Pick<Aria.InputProps, \"accept\" \| \"multiple\" \| \"name\">,\n Pick<Aria.DropZoneProps, \"isDisabled\"> {\n /** Called with the dropped or selected files whenever the selection changes. /\n onChange?: FileInputOnChangeHandler;\n /* Whether the component is read only. /\n isReadOnly?: boolean;\n}\n\n/* @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n \"FileDropZone\",\n (props) => {\n const {\n multiple,\n accept,\n className,\n onChange: onChangeDropZone,\n children,\n name,\n isDisabled,\n isReadOnly,\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"FileDropZone\");\n\n const fileFieldRef = useRef<HTMLInputElement>(null);\n const rootClassName = clsx(\n styles.fileDropZone,\n isDisabled && styles.disabled,\n className,\n );\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n IllustratedMessage: {\n FileField: {\n name,\n onChange: onChangeDropZone,\n ref: fileFieldRef,\n accept: accept,\n multiple: multiple,\n Button: { variant: \"outline\", color: \"dark\" },\n isDisabled,\n isReadOnly,\n },\n Heading: {\n className: styles.heading,\n },\n Icon: { className: styles.icon },\n Text: { className: styles.text },\n },\n };\n\n const onDropHandler = async (event: DropEvent) => {\n if (isReadOnly) {\n return;\n }\n\n const ~~fileDropItems = event.items.filter(\n (file) => file.kind === \"file\",\n ) as Aria.FileDropItem[];\n\n const~~ files = await ~~Promise.all~~(~~\n fileDropItems\n~~ .~~filter((f)~~ ~~=> !~~accept ~~\|\| accept?.includes(f.type~~)~~)\n .map(async (f) => await f.getFile()),\n )~~;\n\n if (files.length > 0) {\n const fileTransfer = new DataTransfer();\n for (const file of multiple ? files : [files[0]]) {\n if (file) {\n fileTransfer.items.add(file);\n }\n }\n\n onChangeDropZone?.(fileTransfer.files);\n if (fileFieldRef.current) {\n fileFieldRef.current.files = fileTransfer.files;\n }\n }\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <Aria.DropZone\n className={rootClassName}\n onDrop={onDropHandler}\n isDisabled={isDisabled}\n data-readonly={isReadOnly}\n >\n <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n </Aria.DropZone>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n },\n);\n\nexport default FileDropZone;\n"],"mappings":"~~;;;;;;;;;;;;;AA8BA~~,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;GACF;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,~~gBAAgB,MAAM,MAAM,QAC/B,SAAS,KAAK,SAAS,MAC1B;EAEA,MAAM,~~QAAQ,MAAM,~~QAAQ~~,~~IAC1B,cACG,QAAQ,~~MAAM,~~CAAC,UAAU,QAAQ,SAAS,EAAE,IAAI,CAAC,CAAC,CAClD,IAAI,~~OAAO,MAAM~~,MAAM,EAAE,QAAQ,CAAC,CACvC~~;~~EAEA~~,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAAQ;IAA6B,CAAA;GAClD,CAAA;EACK,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}
1	+ {"version":3,"file":"FileDropZone.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\n\nexport interface FileDropZoneProps\n extends\n PropsWithClassName,\n FlowComponentProps<FocusableElement>,\n PropsWithChildren,\n Pick<Aria.InputProps, \"accept\" \| \"multiple\" \| \"name\">,\n Pick<Aria.DropZoneProps, \"isDisabled\"> {\n /** Called with the dropped or selected files whenever the selection changes. /\n onChange?: FileInputOnChangeHandler;\n /* Whether the component is read only. /\n isReadOnly?: boolean;\n}\n\n/* @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n \"FileDropZone\",\n (props) => {\n const {\n multiple,\n accept,\n className,\n onChange: onChangeDropZone,\n children,\n name,\n isDisabled,\n isReadOnly,\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"FileDropZone\");\n\n const fileFieldRef = useRef<HTMLInputElement>(null);\n const rootClassName = clsx(\n styles.fileDropZone,\n isDisabled && styles.disabled,\n className,\n );\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n IllustratedMessage: {\n FileField: {\n name,\n onChange: onChangeDropZone,\n ref: fileFieldRef,\n accept: accept,\n multiple: multiple,\n Button: { variant: \"outline\", color: \"dark\" },\n isDisabled,\n isReadOnly,\n },\n Heading: {\n className: styles.heading,\n },\n Icon: { className: styles.icon },\n Text: { className: styles.text },\n },\n };\n\n const onDropHandler = async (event: DropEvent) => {\n if (isReadOnly) {\n return;\n }\n\n const files = await getAcceptedFiles(event.items, accept);\n\n if (files.length > 0) {\n const fileTransfer = new DataTransfer();\n for (const file of multiple ? files : [files[0]]) {\n if (file) {\n fileTransfer.items.add(file);\n }\n }\n\n onChangeDropZone?.(fileTransfer.files);\n if (fileFieldRef.current) {\n fileFieldRef.current.files = fileTransfer.files;\n }\n }\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n <Aria.DropZone\n className={rootClassName}\n onDrop={onDropHandler}\n isDisabled={isDisabled}\n data-readonly={isReadOnly}\n >\n <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n </Aria.DropZone>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;GACF;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAAQ;IAA6B,CAAA;GAClD,CAAA;EACK,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}

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

@@ -14,7 +14,7 @@ var HeaderNavigation = (props) => {
 	const rootClassName = clsx(HeaderNavigation_module_default.headerNavigation, isAlphaColor(color) && HeaderNavigation_module_default[color], className);
 	const propsContext = {
 		Link: {
-			wrapWith: /* @__PURE__ */ jsx("li", {}),
+			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item }),
 			className: HeaderNavigation_module_default.link,
 			unstyled: true,
 			children: dynamic((props) => /* @__PURE__ */ jsx(Text, {
@@ -26,17 +26,20 @@ var HeaderNavigation = (props) => {
 			className: HeaderNavigation_module_default.button,
 			color: isAlphaColor(color) ? color : "secondary",
 			variant: "plain",
-			wrapWith: /* @__PURE__ */ jsx("li", {})
+			wrapWith: /* @__PURE__ */ jsx("li", { className: HeaderNavigation_module_default.item })
 		}
 	};
 	return /* @__PURE__ */ jsx("nav", {
 		className: rootClassName,
 		role: "navigation",
 		...rest,
-		children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
-			children
-		}) })
+		children: /* @__PURE__ */ jsx("ul", {
+			className: HeaderNavigation_module_default.list,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children
+			})
+		})
 	});
 };
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderNavigation.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n}\n\n/* @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props) => (\n <Text emulateBoldWidth>{props.children}</Text>\n )),\n },\n Button: {\n className: styles.button,\n color: isAlphaColor(color) ? color : \"secondary\",\n variant: \"plain\",\n wrapWith: <li />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,~~CAAK~~,CAAA;~~GACf~~,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,~~CAAK~~,CAAA;~~EACjB~~;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD,~~EAAA~~,~~UACE~~,oBAAC,sBAAD;~~GAAsB~~,OAAO;~~GAC1B~~;~~EACmB~~,CAAA,EACpB,CAAA;CACD,CAAA;AAET"}
1	+ {"version":3,"file":"HeaderNavigation.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n}\n\n/* @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li className={styles.item} />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props) => (\n <Text emulateBoldWidth>{props.children}</Text>\n )),\n },\n Button: {\n className: styles.button,\n color: isAlphaColor(color) ? color : \"secondary\",\n variant: \"plain\",\n wrapWith: <li className={styles.item} />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul className={styles.list}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;GACvC,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,EAAI,WAAW,gCAAO,KAAO,CAAA;EACzC;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD;GAAI,WAAW,gCAAO;GACpB,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA;CACD,CAAA;AAET"}

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

@@ -2,12 +2,16 @@
 /* */
 //#region src/components/HeaderNavigation/HeaderNavigation.module.scss
 var headerNavigation = "flow--header-navigation";
+var list = "flow--header-navigation--list";
+var item = "flow--header-navigation--item";
 var link = "flow--header-navigation--link";
 var button = "flow--header-navigation--button";
 var dark = "flow--header-navigation--dark";
 var light = "flow--header-navigation--light";
 var HeaderNavigation_module_default = {
 	headerNavigation,
+	list,
+	item,
 	link,
 	button,
 	dark,
@@ -16,6 +20,6 @@ var HeaderNavigation_module_default = {
 	"light-static": "flow--header-navigation--light-static"
 };
 //#endregion
-export { button, dark, HeaderNavigation_module_default as default, headerNavigation, light, link };
+export { button, dark, HeaderNavigation_module_default as default, headerNavigation, item, light, link, list };
 //# sourceMappingURL=HeaderNavigation.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n ul {\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n gap: var(--header-navigation--spacing);\n }\n\n li {\n list-style: none;\n }\n\n .link {\n padding: var(--header-navigation--padding);\n border-radius: var(--header-navigation--corner-radius);\n color: var(--header-navigation--color);\n position: relative;\n\n @include focus.focus;\n\n &:hover:not([aria-current]) {\n background-color: var(--header-navigation--background-color--hover);\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(--header-navigation--background-color--pressed);\n }\n\n &[aria-current] {\n font-weight: var(--header-navigation--font-weight-current);\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n background-color: var(--header-navigation--color);\n height: var(--header-navigation--underline-width-current);\n }\n }\n }\n\n .button {\n color: var(--header-navigation--color);\n border-radius: var(--header-navigation--corner-radius-round);\n\n &:hover,\n &[data-pressed] {\n color: var(--header-navigation--color);\n }\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n .link,\n .button {\n color: var(--header-navigation--color-#{$color});\n\n &:hover:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--hover\n );\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--pressed\n );\n }\n\n &[aria-current] {\n &::after {\n background-color: var(--header-navigation--color-#{$color});\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n .list {\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n gap: var(--header-navigation--spacing);\n }\n\n .item {\n list-style: none;\n }\n\n .link {\n padding: var(--header-navigation--padding);\n border-radius: var(--header-navigation--corner-radius);\n color: var(--header-navigation--color);\n position: relative;\n\n @include focus.focus;\n\n &:hover:not([aria-current]) {\n background-color: var(--header-navigation--background-color--hover);\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(--header-navigation--background-color--pressed);\n }\n\n &[aria-current] {\n font-weight: var(--header-navigation--font-weight-current);\n\n &::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n background-color: var(--header-navigation--color);\n height: var(--header-navigation--underline-width-current);\n }\n }\n }\n\n .button {\n color: var(--header-navigation--color);\n border-radius: var(--header-navigation--corner-radius-round);\n\n &:hover,\n &[data-pressed] {\n color: var(--header-navigation--color);\n }\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n .link,\n .button {\n color: var(--header-navigation--color-#{$color});\n\n &:hover:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--hover\n );\n }\n\n &[data-pressed]:not([aria-current]) {\n background-color: var(\n --header-navigation--background-color-#{$color}--pressed\n );\n }\n\n &[aria-current] {\n &::after {\n background-color: var(--header-navigation--color-#{$color});\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}

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

@@ -22,7 +22,7 @@ var sizeByLevel = {
 /** @flr-generate all */
 var Heading = flowComponent("Heading", (props) => {
 	const { children, className, level = 2, color = "default", wrap, size, ref, elementType, ...rest } = props;
-	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], elementType && styleClassname(Heading_module_default, `h${level}`), className);
+	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], styleClassname(Heading_module_default, `h${level}`), className);
 	const Element = elementType ?? Aria.Heading;
 	const effectiveSize = size ?? sizeByLevel[level] ?? "xs";
 	const buttonSize = effectiveSize === "xl" || effectiveSize === "xxl" ? "m" : "s";

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 elementType && 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,~~SACvB~~,eAAe,~~eAAe,~~wBAAQ,IAAI,OAAO,~~GACjD~~,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 { 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"}

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 &:where(~~.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(~~h2),\n &:where(~~.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(~~h3),\n &:where(~~.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(~~h4),\n &:where(~~.h4),\n &:where(~~h5),\n &:where(~~.h5),\n &:where(~~h6),\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 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":""}

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

@@ -7,8 +7,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Image/Image.tsx
 /** @flr-generate all */
 var Image = flowComponent("Image", (props) => {
-	const { className, withBorder, style, aspectRatio, width, height, ref, ...rest } = props;
-	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, aspectRatio && Image_module_default.aspectRatio, className);
+	const { className, withBorder, withRoundedCorners = true, style, aspectRatio, width, height, ref, ...rest } = props;
+	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, withRoundedCorners && Image_module_default.roundedCorners, aspectRatio && Image_module_default.aspectRatio, className);
 	return /* @__PURE__ */ jsx("img", {
 		ref,
 		className: rootClassName,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with border ~~and~~ rounded ~~edges.~~ /\n ~~withBorder~~?: boolean;\n /\n The aspect ratio of the images container. Larger images will be centered\n * and their overflow will be hidden.\n /\n aspectRatio?: number;\n}\n\n/* @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n const {\n className,\n withBorder,\n style,\n aspectRatio,\n width,\n height,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.image,\n withBorder && styles.border,\n aspectRatio && styles.aspectRatio,\n className,\n );\n\n return (\n <img\n ref={ref}\n className={rootClassName}\n style={{\n ...style,\n ...(aspectRatio !== undefined && { aspectRatio }),\n ...(width !== undefined && { width }),\n ...(height !== undefined && { height }),\n }}\n {...rest}\n />\n );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;~~AAoBA~~,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
1	+ {"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with a border. /\n withBorder?: boolean;\n /\n Display the image with rounded corners.\n \n @default true\n /\n withRoundedCorners?: boolean;\n /\n The aspect ratio of the images container. Larger images will be centered\n * and their overflow will be hidden.\n /\n aspectRatio?: number;\n}\n\n/* @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n const {\n className,\n withBorder,\n withRoundedCorners = true,\n style,\n aspectRatio,\n width,\n height,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.image,\n withBorder && styles.border,\n withRoundedCorners && styles.roundedCorners,\n aspectRatio && styles.aspectRatio,\n className,\n );\n\n return (\n <img\n ref={ref}\n className={rootClassName}\n style={{\n ...style,\n ...(aspectRatio !== undefined && { aspectRatio }),\n ...(width !== undefined && { width }),\n ...(height !== undefined && { height }),\n }}\n {...rest}\n />\n );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AA0BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,qBAAqB,MACrB,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,sBAAsB,qBAAO,gBAC7B,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

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

@@ -3,13 +3,15 @@
 //#region src/components/Image/Image.module.scss
 var image = "flow--image";
 var border = "flow--image--border";
+var roundedCorners = "flow--image--rounded-corners";
 var aspectRatio = "flow--image--aspect-ratio";
 var Image_module_default = {
 	image,
 	border,
+	roundedCorners,
 	aspectRatio
 };
 //#endregion
-export { aspectRatio, border, Image_module_default as default, image };
+export { aspectRatio, border, Image_module_default as default, image, roundedCorners };
 //# sourceMappingURL=Image.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n max-width: 100%;\n\n &.border {\n border-width: var(--image--border-width);\n border-style: var(--image--border-style);\n border-~~radius~~: var(--image--~~corner~~-~~radius~~);\n border-~~color~~: var(--image--~~border~~-~~color~~);\n overflow: hidden;\n }\n\n &:where(.aspectRatio) {\n overflow-clip-margin: unset;\n object-fit: cover;\n width: fit-content;\n overflow: hidden;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n max-width: 100%;\n\n &.border {\n border-width: var(--image--border-width);\n border-style: var(--image--border-style);\n border-color: var(--image--border-color);\n }\n\n &.roundedCorners {\n border-radius: var(--image--corner-radius);\n overflow: hidden;\n }\n\n &:where(.aspectRatio) {\n overflow-clip-margin: unset;\n object-fit: cover;\n width: fit-content;\n overflow: hidden;\n }\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n @include scrollbar.scrollbar;\n\n align-self: normal;\n background-color: var(--layout-card--background-color);\n box-shadow: var(--layout-card--box-shadow);\n border-radius: var(--layout-card--corner-radius);\n padding: var(--layout-card--padding);\n display: flex;\n flex-direction: column;\n min-width: 0;\n border: var(--layout-card--border-width) var(--layout-card--border-style)\n var(--layout-card--border-color);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding) * -1);\n margin-inline: calc(var(--layout-card--padding) * -1);\n margin-bottom: var(--layout-card--padding);\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n li:first-child :global(.flow--tab-navigation--link) {\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n\n :global(.flow--tab-navigation--more-button) {\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n border: none;\n\n .accentBox {\n padding: var(--layout-card--padding);\n border-radius: calc(var(--layout-card--corner-radius) - 1px);\n flex-grow: 1;\n }\n }\n}\n\n@media (max-width: 768px) {\n .layoutCard {\n padding: var(--layout-card--padding-mobile);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding-mobile) * -1);\n margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n margin-bottom: var(--layout-card--padding-mobile);\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n\n .accentBox {\n padding: var(--layout-card--padding-mobile);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"LayoutCard.module.mjs","names":[],"sources":["../../../../../../../src/components/LayoutCard/LayoutCard.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.layoutCard {\n @include scrollbar.scrollbar;\n\n align-self: normal;\n background-color: var(--layout-card--background-color);\n box-shadow: var(--layout-card--box-shadow);\n border-radius: var(--layout-card--corner-radius);\n padding: var(--layout-card--padding);\n display: flex;\n flex-direction: column;\n min-width: 0;\n border: var(--layout-card--border-width) var(--layout-card--border-style)\n var(--layout-card--border-color);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding) * -1);\n margin-inline: calc(var(--layout-card--padding) * -1);\n margin-bottom: var(--layout-card--padding);\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n\n :global(.flow--tab-navigation--item):first-child\n :global(.flow--tab-navigation--link) {\n border-start-start-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n\n :global(.flow--tab-navigation--more-button) {\n border-start-end-radius: calc(var(--layout-card--corner-radius) - 1px);\n }\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n border: none;\n\n .accentBox {\n padding: var(--layout-card--padding);\n border-radius: calc(var(--layout-card--corner-radius) - 1px);\n flex-grow: 1;\n }\n }\n}\n\n@media (max-width: 768px) {\n .layoutCard {\n padding: var(--layout-card--padding-mobile);\n\n > .tabNavigation {\n margin-top: calc(var(--layout-card--padding-mobile) * -1);\n margin-inline: calc(var(--layout-card--padding-mobile) * -1);\n margin-bottom: var(--layout-card--padding-mobile);\n }\n\n &:has(> .accentBox:only-child) {\n padding: 0;\n\n .accentBox {\n padding: var(--layout-card--padding-mobile);\n }\n }\n }\n}\n"],"mappings":""}