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/ProgressBar/ProgressBar.module.mjs CHANGED Viewed

@@ -18,6 +18,7 @@ var ProgressBar_module_default = {
 	value,
 	bar,
 	fill,
+	"progress-bar-fill": "flow--progress-bar--progress-bar-fill",
 	"size-s": "flow--progress-bar--size-s",
 	"size-m": "flow--progress-bar--size-m",
 	"size-l": "flow--progress-bar--size-l",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements /\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n display: flex;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n / Size /\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n / Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n / Variants */\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$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"],"mappings":""}
1	+ {"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements /\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n display: flex;\n animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n / Size /\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n / Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n / Variants /\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$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/ The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n from {\n width: 0%;\n }\n}\n"],"mappings":""}

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

@@ -6,16 +6,16 @@ var clearButton = "flow--search-field--clear-button";
 var searchIcon = "flow--search-field--search-icon";
 var kbd = "flow--search-field--kbd";
 var inputContainer = "flow--search-field--input-container";
-var readonly = "flow--search-field--readonly";
 var input = "flow--search-field--input";
+var readonly = "flow--search-field--readonly";
 var SearchField_module_default = {
 	searchField,
 	clearButton,
 	searchIcon,
 	kbd,
 	inputContainer,
-	readonly,
-	input
+	input,
+	readonly
 };
 //#endregion
 export { clearButton, SearchField_module_default as default, input, inputContainer, kbd, readonly, searchField, searchIcon };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.searchField {\n &[data-empty] .clearButton {\n display: none;\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--default);\n margin-inline: var(--size-px--s);\n }\n\n .kbd {\n margin-inline-end: var(--size-px--m);\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .inputContainer {\n background-color: var(--form-control--background-color--disabled);\n border-color: var(--form-control--border-color--disabled);\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--disabled);\n }\n\n input::placeholder {\n color: var(--form-control--placeholder-color--disabled);\n }\n }\n}\n\n.inputContainer {\n order: 2;\n display: flex;\n position: relative;\n align-items: center;\n\n @include formControl.formControl();\n\n & {\n padding: 0;\n }\n\n .input {\n border: none;\n background: none;\n padding-block: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n flex-grow: 1;\n min-width: 0;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--form-control--placeholder-color--default);\n }\n\n &[data-focused],\n &:focus-visible {\n outline: none;\n }\n }\n\n .clearButton {\n padding-block: initial;\n align-self: stretch;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.searchField {\n &[data-empty] .clearButton {\n display: none;\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--default);\n margin-inline: var(--size-px--s);\n }\n\n .kbd {\n margin-inline-end: var(--size-px--m);\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .inputContainer {\n background-color: var(--form-control--background-color--disabled);\n border-color: var(--form-control--border-color--disabled);\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--disabled);\n }\n\n .input::placeholder {\n color: var(--form-control--placeholder-color--disabled);\n }\n }\n}\n\n.inputContainer {\n order: 2;\n display: flex;\n position: relative;\n align-items: center;\n\n @include formControl.formControl();\n\n & {\n padding: 0;\n }\n\n .input {\n border: none;\n background: none;\n padding-block: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n flex-grow: 1;\n min-width: 0;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--form-control--placeholder-color--default);\n }\n\n &[data-focused],\n &:focus-visible {\n outline: none;\n }\n }\n\n .clearButton {\n padding-block: initial;\n align-self: stretch;\n }\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n ~~container-type~~: ~~inline-size;\~~n width: ~~100%;\~~n\n > form {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n }\n\n /* Children that render nothing still leave the element behind — the guard in\n Section.tsx only sees the child, not its output (a boundary returning null,\n an empty fragment, a map over an empty array). Collapse it so it neither\n draws its own separator nor claims section-to-section spacing, while\n staying in the sibling chain so the next section keeps exactly one\n separator. */\n &:empty {\n display: none;\n }\n\n + .section {\n margin-block-start: var(--section--section-to-section-spacing);\n }\n\n &:not(.hideSeparator) + .section {\n border-block-start: var(--separator--height) var(--border-style--default)\n var(--separator--color);\n padding-block-start: var(--section--section-to-section-spacing);\n }\n\n h2.heading:not(:first-child),\n h3.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n h4.heading:not(:first-child),\n h5.heading:not(:first-child),\n h6.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n width: 100%;\n min-width: 0;\n\n // A consumer `Form` wrapping the section content. `Form` is a plain FC, so\n // the props context cannot give it a class.\n // stylelint-disable-next-line selector-max-type -- consumer form, no class\n > form {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n }\n\n /* Children that render nothing still leave the element behind — the guard in\n Section.tsx only sees the child, not its output (a boundary returning null,\n an empty fragment, a map over an empty array). Collapse it so it neither\n draws its own separator nor claims section-to-section spacing, while\n staying in the sibling chain so the next section keeps exactly one\n separator. /\n &:empty {\n display: none;\n }\n\n + .section {\n margin-block-start: var(--section--section-to-section-spacing);\n }\n\n &:not(.hideSeparator) + .section {\n border-block-start: var(--separator--height) var(--border-style--default)\n var(--separator--color);\n padding-block-start: var(--section--section-to-section-spacing);\n }\n\n / Keys on the heading's rendered element, not on `Heading`'s level class: a\n `Heading` with `elementType` renders a span/p that carries the level class\n but must not claim heading-to-content spacing. */\n // stylelint-disable selector-max-type -- element type is the signal, see above\n h2.heading:not(:first-child),\n h3.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n h4.heading:not(:first-child),\n h5.heading:not(:first-child),\n h6.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n // stylelint-enable selector-max-type\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionHeader.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.module.scss"],"sourcesContent":[".sectionHeader {\n display: flex;\n gap: var(--section-header--heading-to-action-spacing);\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n\n .actions {\n display: flex;\n gap: var(--section-header--action-to-action-spacing);\n margin-inline-start: auto;\n flex-wrap: wrap;\n align-items: center;\n }\n\n &:not(:first-child):has(h2),\n &:not(:first-child):has(h3) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n &:not(:first-child):has(h4),\n &:not(:first-child):has(h5),\n &:not(:first-child):has(h6) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SectionHeader.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.module.scss"],"sourcesContent":[".sectionHeader {\n display: flex;\n gap: var(--section-header--heading-to-action-spacing);\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n\n .actions {\n display: flex;\n gap: var(--section-header--action-to-action-spacing);\n margin-inline-start: auto;\n flex-wrap: wrap;\n align-items: center;\n }\n\n /* Keys on the heading's rendered element, not on `Heading`'s level class: a\n `Heading` with `elementType` renders a span/p that carries the level class\n but must not claim heading-to-content spacing. */\n // stylelint-disable selector-max-type -- element type is the signal, see above\n &:not(:first-child):has(h2),\n &:not(:first-child):has(h3) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n &:not(:first-child):has(h4),\n &:not(:first-child):has(h5),\n &:not(:first-child):has(h6) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n // stylelint-enable selector-max-type\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n ~~label {\n margin: 0;\n }\n\n~~ .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n}\n\n/\n.slider {\n\n\n\n\n\n\n\n\n\n}\n/\n"],"mappings":""}
1	+ {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n row-gap: var(--slider--spacing-y);\n\n --button-size: calc(\n var(--button--line-height-s) + var(--button--padding-s-y) * 2\n );\n\n .text {\n text-align: center;\n align-items: end;\n padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n padding-top: calc(var(--slider--spacing-y) / 2);\n\n .value {\n font-size: var(--font-size-text--s);\n font-weight: var(--slider--value-font-weight);\n }\n\n .label {\n margin: 0;\n display: inline-flex;\n column-gap: var(--label--spacing);\n }\n }\n\n .track {\n grid-area: track;\n position: relative;\n height: var(--slider--track-height);\n background-color: var(--slider--track-color--default);\n width: 100%;\n border-radius: var(--slider--corner-radius);\n border: var(--slider--track-border-width) var(--slider--track-border-style)\n var(--slider--track-border-color--default);\n }\n\n .fill {\n position: absolute;\n height: var(--slider--track-height);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--track-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .initialMarker {\n position: absolute;\n height: var(--slider--initial-marker-height);\n width: var(--slider--initial-marker-border-width);\n background-color: var(--slider--color--default);\n top: calc(50% - var(--slider--initial-marker-height) / 2);\n border-radius: var(--slider--corner-radius);\n }\n\n .handle {\n width: var(--slider--handle-size);\n height: var(--slider--handle-size);\n border-radius: var(--slider--handle-corner-radius);\n background-color: var(--slider--handle-fill-color);\n border: var(--slider--handle-border-width) var(--slider--track-border-style)\n var(--slider--color--default);\n forced-color-adjust: none;\n top: 50%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &[data-dragging],\n &[data-focus-visible] {\n background-color: var(--slider--color--default);\n }\n\n &[data-focus-visible] {\n @include focus.focus;\n\n & {\n outline-offset: var(--size-px--xs);\n }\n }\n }\n\n .increment,\n .decrement {\n position: absolute;\n top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n }\n\n .increment {\n inset-inline-end: 0;\n }\n\n .decrement {\n inset-inline-start: 0;\n }\n\n &.disabled {\n .track {\n background-color: var(--slider--track-color--disabled);\n border-color: var(--slider--track-border-color--disabled);\n }\n\n .fill {\n background-color: var(--slider--color--disabled);\n }\n\n .handle {\n border-color: var(--slider--color--disabled);\n }\n\n .text {\n color: var(--text--color--disabled);\n }\n }\n}\n\n/\n.slider {\n\n\n\n\n\n\n\n\n\n}\n/\n"],"mappings":""}

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

@@ -27,7 +27,7 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 	const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
 	const rootClassName = clsx(TabNavigation_module_default.tabNavigation, hasOverflow && TabNavigation_module_default.collapsed, className);
 	const propsContext = { Link: {
-		wrapWith: /* @__PURE__ */ jsx("li", {}),
+		wrapWith: /* @__PURE__ */ jsx("li", { className: TabNavigation_module_default.item }),
 		className: TabNavigation_module_default.link,
 		unstyled: true,
 		children: dynamic((linkProps) => /* @__PURE__ */ jsx(LinkContent, { linkProps }))
@@ -38,6 +38,7 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 		...rest,
 		ref,
 		children: [/* @__PURE__ */ jsx("ul", {
+			className: TabNavigation_module_default.list,
 			ref: listRef,
 			children: /* @__PURE__ */ jsx(PropsContextProvider, {
 				props: propsContext,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNavigation.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/\n @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n useCollapsingItems();\n\n const rootClassName = clsx(\n styles.tabNavigation,\n hasOverflow && styles.collapsed,\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <ul ref={listRef}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n <div className={styles.more} ref={moreRef}>\n <ContextMenuTriggerView>\n <Button\n unstyled\n className={clsx(\n styles.moreButton,\n menuHasCurrentItem && styles.current,\n )}\n >\n <Text emulateBoldWidth>\n {stringFormatter.format(\"moreButton.title\")}\n </Text>\n <IconChevronDown />\n </Button>\n <ContextMenuView placement=\"bottom end\">\n <UiComponentTunnelExit\n id=\"menuItems\"\n component=\"TabNavigation\"\n children={(menuItems) =>\n Array.isArray(menuItems)\n ? menuItems.slice(visibleCount ?? menuItems.length)\n : menuItems\n }\n />\n </ContextMenuView>\n </ContextMenuTriggerView>\n </div>\n </nav>\n );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4B,kBAAS,eAAe;CAE5E,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpB,6BAAO,eACP,eAAe,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,~~CAAK~~,CAAA;~~EACf~~,WAAW,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,KAAK;~~GACP~~,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAW,6BAAO;GAAM,KAAK;GAChC,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACT,6BAAO,YACP,sBAAsB,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}
1	+ {"version":3,"file":"TabNavigation.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/\n @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n useCollapsingItems();\n\n const rootClassName = clsx(\n styles.tabNavigation,\n hasOverflow && styles.collapsed,\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((linkProps) => <LinkContent linkProps={linkProps} />),\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <ul className={styles.list} ref={listRef}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n <div className={styles.more} ref={moreRef}>\n <ContextMenuTriggerView>\n <Button\n unstyled\n className={clsx(\n styles.moreButton,\n menuHasCurrentItem && styles.current,\n )}\n >\n <Text emulateBoldWidth>\n {stringFormatter.format(\"moreButton.title\")}\n </Text>\n <IconChevronDown />\n </Button>\n <ContextMenuView placement=\"bottom end\">\n <UiComponentTunnelExit\n id=\"menuItems\"\n component=\"TabNavigation\"\n children={(menuItems) =>\n Array.isArray(menuItems)\n ? menuItems.slice(visibleCount ?? menuItems.length)\n : menuItems\n }\n />\n </ContextMenuView>\n </ContextMenuTriggerView>\n </div>\n </nav>\n );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4B,kBAAS,eAAe;CAE5E,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpB,6BAAO,eACP,eAAe,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,WAAW,6BAAO,KAAO,CAAA;EACvC,WAAW,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,WAAW,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAW,6BAAO;GAAM,KAAK;GAChC,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACT,6BAAO,YACP,sBAAsB,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}

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

@@ -2,6 +2,8 @@
 /* */
 //#region src/components/TabNavigation/TabNavigation.module.scss
 var tabNavigation = "flow--tab-navigation";
+var list = "flow--tab-navigation--list";
+var item = "flow--tab-navigation--item";
 var link = "flow--tab-navigation--link";
 var text = "flow--tab-navigation--text";
 var more = "flow--tab-navigation--more";
@@ -10,6 +12,8 @@ var current = "flow--tab-navigation--current";
 var collapsed = "flow--tab-navigation--collapsed";
 var TabNavigation_module_default = {
 	tabNavigation,
+	list,
+	item,
 	link,
 	text,
 	more,
@@ -18,6 +22,6 @@ var TabNavigation_module_default = {
 	collapsed
 };
 //#endregion
-export { collapsed, current, TabNavigation_module_default as default, link, more, moreButton, tabNavigation, text };
+export { collapsed, current, TabNavigation_module_default as default, item, link, list, more, moreButton, tabNavigation, text };
 //# sourceMappingURL=TabNavigation.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabNavigation {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n background-color: var(--tab-navigation--background-color--default);\n\n ul {\n display: flex;\n flex-direction: row;\n flex: 1 1 auto;\n min-width: 0;\n overflow-x: clip;\n }\n\n li {\n display: flex;\n list-style: none;\n }\n\n /* Elements /\n\n .link {\n display: flex;\n align-items: center;\n column-gap: var(--tab-navigation--spacing);\n padding: var(--tab-navigation--padding);\n background-color: var(--tab-navigation--background-color--default);\n color: var(--tab-navigation--color);\n white-space: nowrap;\n transition-property: background-color;\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) -1);\n }\n\n &:hover {\n background-color: var(--tab-navigation--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tab-navigation--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n\n &[aria-current] {\n background-color: var(--tab-navigation--background-color--current);\n font-weight: var(--tab-navigation--font-weight--current);\n }\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tab-navigation--spacing);\n }\n\n .more {\n display: flex;\n align-items: stretch;\n\n /* Rendered (but hidden) when there is no overflow, so its width can be\n reserved before items are collapsed. /\n visibility: hidden;\n position: absolute;\n inset-inline-end: 0;\n }\n\n .moreButton {\n display: flex;\n align-items: center;\n column-gap: var(--tab-navigation--spacing);\n padding: var(--tab-navigation--padding);\n border: none;\n border-radius: 0;\n background-color: var(--tab-navigation--background-color--default);\n color: var(--tab-navigation--color);\n cursor: pointer;\n white-space: nowrap;\n transition-property: background-color;\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) -1);\n }\n\n &:hover {\n background-color: var(--tab-navigation--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tab-navigation--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n\n &.current,\n &.current:hover {\n background-color: var(--tab-navigation--background-color--current);\n font-weight: var(--tab-navigation--font-weight--current);\n }\n }\n\n /* States */\n\n &.collapsed {\n .more {\n visibility: visible;\n position: static;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"TabNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabNavigation {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n background-color: var(--tab-navigation--background-color--default);\n\n .list {\n display: flex;\n flex-direction: row;\n flex: 1 1 auto;\n min-width: 0;\n overflow-x: clip;\n }\n\n .item {\n display: flex;\n list-style: none;\n }\n\n /* Elements /\n\n .link {\n display: flex;\n align-items: center;\n column-gap: var(--tab-navigation--spacing);\n padding: var(--tab-navigation--padding);\n background-color: var(--tab-navigation--background-color--default);\n color: var(--tab-navigation--color);\n white-space: nowrap;\n transition-property: background-color;\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) -1);\n }\n\n &:hover {\n background-color: var(--tab-navigation--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tab-navigation--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n\n &[aria-current] {\n background-color: var(--tab-navigation--background-color--current);\n font-weight: var(--tab-navigation--font-weight--current);\n }\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tab-navigation--spacing);\n }\n\n .more {\n display: flex;\n align-items: stretch;\n\n /* Rendered (but hidden) when there is no overflow, so its width can be\n reserved before items are collapsed. /\n visibility: hidden;\n position: absolute;\n inset-inline-end: 0;\n }\n\n .moreButton {\n display: flex;\n align-items: center;\n column-gap: var(--tab-navigation--spacing);\n padding: var(--tab-navigation--padding);\n border: none;\n border-radius: 0;\n background-color: var(--tab-navigation--background-color--default);\n color: var(--tab-navigation--color);\n cursor: pointer;\n white-space: nowrap;\n transition-property: background-color;\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) -1);\n }\n\n &:hover {\n background-color: var(--tab-navigation--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tab-navigation--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n\n &.current,\n &.current:hover {\n background-color: var(--tab-navigation--background-color--current);\n font-weight: var(--tab-navigation--font-weight--current);\n }\n }\n\n /* States */\n\n &.collapsed {\n .more {\n visibility: visible;\n position: static;\n }\n }\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n @include scrollbar.scrollbar;\n\n width: 100%;\n overflow-x: auto;\n}\n\n.tableScrollArea {\n width: 100%;\n}\n\n.table {\n border-radius: var(--table--corner-radius);\n overflow: hidden;\n width: 100%;\n border-width: var(--table--border-width);\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-spacing: 0;\n background-color: var(--table--background-color);\n\n .column {\n font-weight: var(--table--header-font-weight);\n\n &:empty {\n display: none;\n }\n }\n\n .cell,\n .column {\n padding-inline: var(--table--padding-x);\n padding-block: var(--table--padding-y);\n text-align: start;\n vertical-align: top;\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-width: 0;\n\n > svg {\n vertical-align: bottom;\n }\n\n &.horizontal-align-center {\n text-align: center;\n }\n\n &.horizontal-align-end {\n text-align: end;\n }\n }\n\n .header {\n .column {\n border-block-end-width: var(--table--header-border-width);\n }\n\n &:empty {\n display: none;\n }\n }\n\n :where(.body) {\n :where(.row) {\n &:where(:nth-of-type(odd):not(.footer)) {\n background-color: var(--table--background-color-accent);\n }\n\n &:not(:last-child) {\n .cell {\n border-block-end-width: var(--table--border-width);\n }\n }\n\n &.footer .cell {\n border-block-start-width: var(--table--border-width);\n }\n }\n }\n\n &.vertical-align-middle {\n .cell,\n .column {\n vertical-align: middle;\n }\n }\n\n &.layout-auto {\n table-layout: auto;\n }\n\n &.layout-fixed {\n table-layout: fixed;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n @include scrollbar.scrollbar;\n\n width: 100%;\n overflow-x: auto;\n}\n\n.tableScrollArea {\n width: 100%;\n}\n\n.table {\n border-radius: var(--table--corner-radius);\n overflow: hidden;\n width: 100%;\n border-width: var(--table--border-width);\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-spacing: 0;\n background-color: var(--table--background-color);\n\n .column {\n font-weight: var(--table--header-font-weight);\n\n &:empty {\n display: none;\n }\n }\n\n .cell,\n .column {\n padding-inline: var(--table--padding-x);\n padding-block: var(--table--padding-y);\n text-align: start;\n vertical-align: top;\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-width: 0;\n\n // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n // stylelint-disable-next-line selector-max-type -- consumer content\n > svg {\n vertical-align: bottom;\n }\n\n &.horizontal-align-center {\n text-align: center;\n }\n\n &.horizontal-align-end {\n text-align: end;\n }\n }\n\n .header {\n .column {\n border-block-end-width: var(--table--header-border-width);\n }\n\n &:empty {\n display: none;\n }\n }\n\n :where(.body) {\n :where(.row) {\n &:where(:nth-of-type(odd):not(.footer)) {\n background-color: var(--table--background-color-accent);\n }\n\n &:not(:last-child) {\n .cell {\n border-block-end-width: var(--table--border-width);\n }\n }\n\n &.footer .cell {\n border-block-start-width: var(--table--border-width);\n }\n }\n }\n\n &.vertical-align-middle {\n .cell,\n .column {\n vertical-align: middle;\n }\n }\n\n &.layout-auto {\n table-layout: auto;\n }\n\n &.layout-fixed {\n table-layout: fixed;\n }\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n position: relative;\n padding-block: var(--tabs--padding-y);\n padding-inline: var(--tabs--padding-x);\n color: var(--tabs--color--default);\n cursor: default;\n white-space: nowrap;\n transition-property: background-color;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n column-gap: var(--tabs--spacing);\n border-radius: var(--tabs--corner-radius);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) * -1);\n }\n\n /* The active indicator is painted below the titles (it precedes them in the\n tab list), so the selected title must not paint a background over it. /\n &:not([data-selected]) {\n &:hover {\n background-color: var(--tabs--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tabs--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--tabs--color--disabled);\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tabs--spacing);\n }\n}\n\n/ selected tab */\n.tabTitle[data-selected] {\n font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n > span {\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: var(--tabs--spacing);\n flex-grow: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n position: relative;\n padding-block: var(--tabs--padding-y);\n padding-inline: var(--tabs--padding-x);\n color: var(--tabs--color--default);\n cursor: default;\n white-space: nowrap;\n transition-property: background-color;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n column-gap: var(--tabs--spacing);\n border-radius: var(--tabs--corner-radius);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) * -1);\n }\n\n /* The active indicator is painted below the titles (it precedes them in the\n tab list), so the selected title must not paint a background over it. /\n &:not([data-selected]) {\n &:hover {\n background-color: var(--tabs--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tabs--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--tabs--color--disabled);\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tabs--spacing);\n }\n}\n\n/ selected tab */\n.tabTitle[data-selected] {\n font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n // The tab's children are the consumer's; a `Text` child renders this span.\n // stylelint-disable-next-line selector-max-type -- consumer children\n > span {\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: var(--tabs--spacing);\n flex-grow: 1;\n }\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n color: inherit;\n text-wrap-style: pretty;\n\n /* Alpha Colors */\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--text--color--#{$color});\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n\n ul,\n ol {\n padding-inline-start: var(--text--list-padding);\n }\n\n ul {\n li {\n list-style: initial;\n }\n }\n\n small {\n font-size: var(--font-size-text--s);\n }\n\n blockquote {\n border-inline-start: var(--text--blockquote-border-width)\n var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n padding-inline-start: var(--text--blockquote-padding);\n }\n\n .icon {\n vertical-align: text-bottom;\n }\n\n small {\n .icon {\n width: var(--line-height-s);\n height: var(--line-height-s);\n }\n }\n\n &:where(.align-start) {\n text-align: start;\n }\n\n &:where(.align-center) {\n text-align: center;\n }\n\n &:where(.align-end) {\n text-align: end;\n }\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n\n &:where(.wrap-pretty) {\n text-wrap: pretty;\n }\n\n &:where(.no-ligatures) {\n font-variant-ligatures: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n color: inherit;\n text-wrap-style: pretty;\n\n /* Alpha Colors /\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--text--color--#{$color});\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n\n / `Text` styles raw HTML that its children bring along — `Markdown` nests\n bare `<ul>`/`<ol>`/`<blockquote>` inside a `Text`, and consumers write the\n same markup by hand. None of it is authored here, so none of it is classed. */\n // stylelint-disable selector-max-type -- children's raw HTML, see above\n ul,\n ol {\n padding-inline-start: var(--text--list-padding);\n }\n\n ul {\n li {\n list-style: initial;\n }\n }\n\n small {\n font-size: var(--font-size-text--s);\n }\n\n blockquote {\n border-inline-start: var(--text--blockquote-border-width)\n var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n padding-inline-start: var(--text--blockquote-padding);\n }\n\n .icon {\n vertical-align: text-bottom;\n }\n\n small {\n .icon {\n width: var(--line-height-s);\n height: var(--line-height-s);\n }\n }\n // stylelint-enable selector-max-type\n\n &:where(.align-start) {\n text-align: start;\n }\n\n &:where(.align-center) {\n text-align: center;\n }\n\n &:where(.align-end) {\n text-align: end;\n }\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n\n &:where(.wrap-pretty) {\n text-wrap: pretty;\n }\n\n &:where(.no-ligatures) {\n font-variant-ligatures: none;\n }\n}\n"],"mappings":""}

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

@@ -10,7 +10,7 @@ import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import TextArea_module_default from "./TextArea.module.mjs";
 import __locale_default from "../../../../../_virtual/_23.locale.mjs";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
@@ -18,8 +18,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var TextArea = flowComponent("TextArea", (props) => {
 	const warnDeprecation = useWarnDeprecation();
-	const { children, placeholder, rows = 5, autoResizeMaxRows = rows, ref, allowVerticalResize, allowHorizontalResize, showCharacterCount, className, onChange, isReadOnly, ...rest } = useControlledHostValueProps(props, "");
-	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
+	const { children, placeholder, rows = 5, autoResizeMaxRows = rows, ref, allowVerticalResize, allowHorizontalResize, showCharacterCount, className, onChange, isReadOnly, value, ...rest } = useControlledHostValueProps(props, "");
 	if (allowHorizontalResize !== void 0) warnDeprecation("The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
 	if (allowVerticalResize !== void 0) warnDeprecation("The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.");
 	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "TextArea");
@@ -30,11 +29,10 @@ var TextArea = flowComponent("TextArea", (props) => {
 	const inputClassName = clsx(TextArea_module_default.input, typeof allowResize === "boolean" && allowResize ? TextArea_module_default.resize : null, allowResize === "horizontal" ? TextArea_module_default.horizontalResize : allowResize === "vertical" ? TextArea_module_default.verticalResize : null);
 	const handleChange = (v) => {
 		if (isReadOnly) return;
-		if (showCharacterCount) setCharactersCount(v.length);
 		if (onChange) onChange(v);
 	};
 	const charactersCountDescription = useLocalizedStringFormatter(__locale_default, "TextArea").format("characters", {
-		count: charactersCount,
+		count: value.length,
 		maxCount: props.maxLength ?? 0
 	});
 	const localRef = useObjectRef(ref);
@@ -71,16 +69,20 @@ var TextArea = flowComponent("TextArea", (props) => {
 			window.removeEventListener("mouseup", handleMouseUp);
 		};
 	}, [resized]);
-	const updateHeight = () => {
-		if (localRef.current && autoResizable && !verticallyResizable) {
-			localRef.current.style.height = "0px";
-			const scrollHeight = localRef.current.scrollHeight;
-			localRef.current.style.height = scrollHeight + 2 + "px";
-		}
-	};
+	useLayoutEffect(() => {
+		const textArea = localRef.current;
+		if (!textArea || !autoResizable || verticallyResizable) return;
+		textArea.style.height = "0px";
+		textArea.style.height = `${textArea.scrollHeight + 2}px`;
+	}, [
+		value,
+		autoResizable,
+		verticallyResizable
+	]);
 	return /* @__PURE__ */ jsx(Aria.TextField, {
 		...rest,
 		...fieldProps,
+		value,
 		className: rootClassName,
 		onChange: handleChange,
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
@@ -95,7 +97,6 @@ var TextArea = flowComponent("TextArea", (props) => {
 					placeholder,
 					className: inputClassName,
 					ref: localRef,
-					onChange: updateHeight,
 					style: {
 						caretColor: isReadOnly ? "transparent" : void 0,
 						minHeight: getHeight(rows),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { type PropsWithChildren, useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" \| \"rows\" \| \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /* Whether a character count should be displayed inside the field description. /\n showCharacterCount?: boolean;\n /\n Whether the text area should grow if its content gets longer than its\n * initial height.\n /\n autoResizeMaxRows?: number;\n /* Allows the user to manually resize the textArea horizontally. /\n allowResize?: boolean \| \"horizontal\" \| \"vertical\";\n /* @deprecated Use `allowResize` instead. /\n allowHorizontalResize?: boolean;\n /* @deprecated Use `allowResize` instead. /\n allowVerticalResize?: boolean;\n}\n\n/* @flr-generate all /\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n ~~const [charactersCount, setCharactersCount] = useState(\n props.defaultValue?.length ?? props.value?.length ?? 0,\n );\n\n~~ if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (~~showCharacterCount) {\n setCharactersCount(v.length);\n }\n if (~~onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n const charactersCountDescription = translation.format(\"characters\", {\n count: ~~charactersCount~~,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const getHeight = (rows: number) => {\n return `calc(var(--line-height-m) ${rows} + (var(--form-control--padding-y) * 2))`;\n };\n\n const [resized, setResized] = useState(false);\n\n const autoResizable = rows !== autoResizeMaxRows;\n\n const verticallyResizable =\n allowResize && (!autoResizable \|\| (autoResizable && resized));\n\n useEffect(() => {\n const textarea = localRef.current;\n if (!textarea) return;\n\n const startHeight = textarea.offsetHeight;\n let tracking = false;\n\n const handleMouseDown = () => {\n tracking = true;\n };\n\n const handleMouseMove = () => {\n if (!tracking \|\| resized) return;\n\n const currentHeight = textarea.offsetHeight;\n\n if (currentHeight !== startHeight) {\n setResized(true);\n tracking = false;\n }\n };\n\n const handleMouseUp = () => {\n tracking = false;\n };\n\n window.addEventListener(\"mousedown\", handleMouseDown);\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [resized]);\n\n ~~const~~ ~~updateHeight~~ = () => {\n if (localRef.current && autoResizable && !verticallyResizable) {\n // https://stackoverflow.com/a/60795884\n ~~localRef~~.~~current.~~style.height = \"0px\";\n ~~const scrollHeight = localRef.current.scrollHeight;\n~~ // + 2 to add border height\n ~~localRef~~.~~current.~~style.height = scrollHeight + 2 ~~+ \"~~px~~\";\~~n ~~}\n~~ };\n\n return (\n <Aria.TextField\n {...rest}\n {...fieldProps}\n className={rootClassName}\n onChange={handleChange}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <Aria.TextArea\n rows={rows}\n {...(isReadOnly ? { \"data-readonly\": true } : {})}\n aria-readonly={isReadOnly}\n aria-hidden={props[\"aria-hidden\"]}\n placeholder={placeholder}\n className={inputClassName}\n ref={localRef}\n ~~onChange={updateHeight}\n~~ style={{\n caretColor: isReadOnly ? \"transparent\" : undefined,\n minHeight: getHeight(rows),\n maxHeight: verticallyResizable\n ? undefined\n : getHeight(autoResizeMaxRows),\n }}\n />\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;;~~AAoCA~~,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,YACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,~~MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,~~IAAI,0BAA0B,KAAA,GAC5B,gBACE,oHACF;CAEF,IAAI,wBAAwB,KAAA,GAC1B,gBACE,kHACF;CAGF,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,UAAU;CAEvC,IAAI,EAAE,gBAAgB;CACtB,IAAI,qBACF,cAAc;MACT,IAAI,uBACT,cAAc;CAGhB,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,IACR;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,YACF;EAGF,IAAI,~~oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,~~UACF,SAAS,CAAC;CAEd;~~CAIA~~,MAAM,~~6BAFc~~,4BAA4B,kBAAS,~~UAEtB~~,CAAA,CAAY,OAAO,cAAc;EAClE,OAAO;~~EACP~~,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,aAAa,SAAiB;EAClC,OAAO,+BAA+B,KAAK;CAC7C;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;CAEtD,gBAAgB;EACd,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;GAC5B,WAAW;EACb;EAEA,MAAM,wBAAwB;GAC5B,IAAI,CAAC,YAAY,SAAS;GAI1B,IAFsB,SAAS,iBAET,aAAa;IACjC,WAAW,IAAI;IACf,WAAW;GACb;EACF;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,WAAW,aAAa;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,WAAW,aAAa;EACrD;CACF,GAAG,CAAC,OAAO,CAAC;~~CAEZ~~,MAAM,~~qBAAqB~~;~~EACzB~~,IAAI,~~SAAS~~,~~WAAW~~,iBAAiB,~~CAAC,qBAAqB~~;~~GAE7D~~,SAAS,~~QAAQ,~~MAAM,SAAS;~~GAChC~~,~~MAAM,eAAe,~~SAAS,~~QAAQ;GAEtC~~,SAAS,~~QAAQ~~,~~MAAM,~~SAAS,eAAe,~~IAAI~~;~~EACrD~~;~~CACF~~;~~CAEA~~,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;~~EACJ~~,WAAW;EACX,UAAU;EAEV,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC9D,oBAAC,KAAK,UAAN;KACQ;KACN,GAAK,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC/C,iBAAe;KACf,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,~~UAAU;KACV,~~OAAO;MACL,YAAY,aAAa,gBAAgB,KAAA;MACzC,WAAW,UAAU,IAAI;MACzB,WAAW,sBACP,KAAA,IACA,UAAU,iBAAiB;KACjC;IACD,CAAA;IACA,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;IAElE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACR,CAAA;AAEpB,CAAC"}
1	+ {"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport {\n type PropsWithChildren,\n useEffect,\n useLayoutEffect,\n useState,\n} from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface TextAreaProps\n extends\n PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n Pick<Aria.TextAreaProps, \"placeholder\" \| \"rows\" \| \"aria-hidden\">,\n FlowComponentProps<HTMLTextAreaElement> {\n /* Whether a character count should be displayed inside the field description. /\n showCharacterCount?: boolean;\n /\n Whether the text area should grow if its content gets longer than its\n * initial height.\n /\n autoResizeMaxRows?: number;\n /* Allows the user to manually resize the textArea horizontally. /\n allowResize?: boolean \| \"horizontal\" \| \"vertical\";\n /* @deprecated Use `allowResize` instead. /\n allowHorizontalResize?: boolean;\n /* @deprecated Use `allowResize` instead. /\n allowVerticalResize?: boolean;\n}\n\n/* @flr-generate all /\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n const warnDeprecation = useWarnDeprecation();\n const {\n children,\n placeholder,\n rows = 5,\n autoResizeMaxRows = rows,\n ref,\n allowVerticalResize,\n allowHorizontalResize,\n showCharacterCount,\n className,\n onChange,\n isReadOnly,\n value,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n if (allowHorizontalResize !== undefined) {\n warnDeprecation(\n \"The 'allowHorizontalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n if (allowVerticalResize !== undefined) {\n warnDeprecation(\n \"The 'allowVerticalResize' prop is deprecated and will be removed in a future release. Use 'allowResize' instead.\",\n );\n }\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"TextArea\");\n\n let { allowResize } = props;\n if (allowVerticalResize) {\n allowResize = \"vertical\";\n } else if (allowHorizontalResize) {\n allowResize = \"horizontal\";\n }\n\n const rootClassName = clsx(fieldProps.className, className);\n\n const inputClassName = clsx(\n styles.input,\n typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n allowResize === \"horizontal\"\n ? styles.horizontalResize\n : allowResize === \"vertical\"\n ? styles.verticalResize\n : null,\n );\n\n const handleChange = (v: string) => {\n if (isReadOnly) {\n return;\n }\n\n if (onChange) {\n onChange(v);\n }\n };\n\n const translation = useLocalizedStringFormatter(locales, \"TextArea\");\n\n // Derived, so that a value the field never saw typed is counted as well.\n const charactersCountDescription = translation.format(\"characters\", {\n count: value.length,\n maxCount: props.maxLength ?? 0,\n });\n\n const localRef = useObjectRef(ref);\n\n const getHeight = (rows: number) => {\n return `calc(var(--line-height-m) ${rows} + (var(--form-control--padding-y) * 2))`;\n };\n\n const [resized, setResized] = useState(false);\n\n const autoResizable = rows !== autoResizeMaxRows;\n\n const verticallyResizable =\n allowResize && (!autoResizable \|\| (autoResizable && resized));\n\n useEffect(() => {\n const textarea = localRef.current;\n if (!textarea) return;\n\n const startHeight = textarea.offsetHeight;\n let tracking = false;\n\n const handleMouseDown = () => {\n tracking = true;\n };\n\n const handleMouseMove = () => {\n if (!tracking \|\| resized) return;\n\n const currentHeight = textarea.offsetHeight;\n\n if (currentHeight !== startHeight) {\n setResized(true);\n tracking = false;\n }\n };\n\n const handleMouseUp = () => {\n tracking = false;\n };\n\n window.addEventListener(\"mousedown\", handleMouseDown);\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n\n return () => {\n window.removeEventListener(\"mousedown\", handleMouseDown);\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [resized]);\n\n /\n The height depends on the rendered content, so it cannot be a style. It is\n * synced to the value instead of to the `change` event, because a value the\n * field never saw typed — an initial value, or a draft loaded into a\n * controlled field — has to resize it just the same.\n */\n useLayoutEffect(() => {\n const textArea = localRef.current;\n if (!textArea \|\| !autoResizable \|\| verticallyResizable) {\n return;\n }\n // https://stackoverflow.com/a/60795884\n textArea.style.height = \"0px\";\n // + 2 to add border height\n textArea.style.height = `${textArea.scrollHeight + 2}px`;\n }, [value, autoResizable, verticallyResizable]);\n\n return (\n <Aria.TextField\n {...rest}\n {...fieldProps}\n value={value}\n className={rootClassName}\n onChange={handleChange}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n <Aria.TextArea\n rows={rows}\n {...(isReadOnly ? { \"data-readonly\": true } : {})}\n aria-readonly={isReadOnly}\n aria-hidden={props[\"aria-hidden\"]}\n placeholder={placeholder}\n className={inputClassName}\n ref={localRef}\n style={{\n caretColor: isReadOnly ? \"transparent\" : undefined,\n minHeight: getHeight(rows),\n maxHeight: verticallyResizable\n ? undefined\n : getHeight(autoResizeMaxRows),\n }}\n />\n {showCharacterCount && (\n <FieldDescription>{charactersCountDescription}</FieldDescription>\n )}\n <FieldErrorView />\n </PropsContextProvider>\n </Aria.TextField>\n );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,YACA,OACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,IAAI,0BAA0B,KAAA,GAC5B,gBACE,oHACF;CAEF,IAAI,wBAAwB,KAAA,GAC1B,gBACE,kHACF;CAGF,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,UAAU;CAEvC,IAAI,EAAE,gBAAgB;CACtB,IAAI,qBACF,cAAc;MACT,IAAI,uBACT,cAAc;CAGhB,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,IACR;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,YACF;EAGF,IAAI,UACF,SAAS,CAAC;CAEd;CAKA,MAAM,6BAHc,4BAA4B,kBAAS,UAGtB,CAAA,CAAY,OAAO,cAAc;EAClE,OAAO,MAAM;EACb,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,aAAa,SAAiB;EAClC,OAAO,+BAA+B,KAAK;CAC7C;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;CAEtD,gBAAgB;EACd,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,UAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;GAC5B,WAAW;EACb;EAEA,MAAM,wBAAwB;GAC5B,IAAI,CAAC,YAAY,SAAS;GAI1B,IAFsB,SAAS,iBAET,aAAa;IACjC,WAAW,IAAI;IACf,WAAW;GACb;EACF;EAEA,MAAM,sBAAsB;GAC1B,WAAW;EACb;EAEA,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,aAAa,eAAe;EACpD,OAAO,iBAAiB,WAAW,aAAa;EAEhD,aAAa;GACX,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,aAAa,eAAe;GACvD,OAAO,oBAAoB,WAAW,aAAa;EACrD;CACF,GAAG,CAAC,OAAO,CAAC;CAQZ,sBAAsB;EACpB,MAAM,WAAW,SAAS;EAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,qBACjC;EAGF,SAAS,MAAM,SAAS;EAExB,SAAS,MAAM,SAAS,GAAG,SAAS,eAAe,EAAE;CACvD,GAAG;EAAC;EAAO;EAAe;CAAmB,CAAC;CAE9C,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACG;EACP,WAAW;EACX,UAAU;EAEV,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC9D,oBAAC,KAAK,UAAN;KACQ;KACN,GAAK,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC/C,iBAAe;KACf,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,OAAO;MACL,YAAY,aAAa,gBAAgB,KAAA;MACzC,WAAW,UAAU,IAAI;MACzB,WAAW,sBACP,KAAA,IACA,UAAU,iBAAiB;KACjC;IACD,CAAA;IACA,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;IAElE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACR,CAAA;AAEpB,CAAC"}

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

@@ -19,6 +19,7 @@ var Tooltip = (props) => {
 		children: [/* @__PURE__ */ jsx(Aria.OverlayArrow, {
 			className: Tooltip_module_default.tip,
 			children: /* @__PURE__ */ jsx("svg", {
+				className: Tooltip_module_default.tipIcon,
 				viewBox: "0 0 8 8",
 				children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })
 			})

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport type TooltipProps = PropsWithChildren<\n Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const rootClassName = clsx(styles.tooltip, className);\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <ClearPropsContext>\n <Aria.Tooltip {...rest} className={rootClassName}>\n <Aria.OverlayArrow className={styles.tip}>\n <svg viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </Aria.OverlayArrow>\n {children}\n </Aria.Tooltip>\n </ClearPropsContext>\n );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,WAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,WAAW;EAAnC,UAAA,CACE,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,SAAQ;~~IACX~~,UAAA,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;GACvB,CAAA;EACY,CAAA,GAClB,QACW;CACG,CAAA,EAAA,CAAA;AAEvB"}
1	+ {"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport type TooltipProps = PropsWithChildren<\n Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const rootClassName = clsx(styles.tooltip, className);\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <ClearPropsContext>\n <Aria.Tooltip {...rest} className={rootClassName}>\n <Aria.OverlayArrow className={styles.tip}>\n <svg className={styles.tipIcon} viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </Aria.OverlayArrow>\n {children}\n </Aria.Tooltip>\n </ClearPropsContext>\n );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,WAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,WAAW;EAAnC,UAAA,CACE,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,WAAW,uBAAO;IAAS,SAAQ;IACtC,UAAA,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;GACvB,CAAA;EACY,CAAA,GAClB,QACW;CACG,CAAA,EAAA,CAAA;AAEvB"}

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

@@ -3,13 +3,15 @@
 //#region src/components/Tooltip/Tooltip.module.scss
 var tooltip = "flow--tooltip";
 var tip = "flow--tooltip--tip";
+var tipIcon = "flow--tooltip--tip-icon";
 var slide = "flow--tooltip--slide";
 var Tooltip_module_default = {
 	tooltip,
 	tip,
+	tipIcon,
 	slide
 };
 //#endregion
-export { Tooltip_module_default as default, slide, tip, tooltip };
+export { Tooltip_module_default as default, slide, tip, tipIcon, tooltip };
 //# sourceMappingURL=Tooltip.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n border-radius: var(--tooltip--corner-radius);\n background-color: var(--tooltip--background-color);\n color: var(--tooltip--color);\n font-size: var(--tooltip--font-size);\n padding-block: var(--tooltip--padding-y);\n padding-inline: var(--tooltip--padding-x);\n max-width: var(--tooltip--max-width);\n transform: translate3d(0, 0, 0);\n box-shadow: var(--tooltip--box-shadow);\n\n --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n /* Placement /\n &[data-placement=\"top\"] {\n margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length));\n }\n\n &[data-placement=\"bottom\"] {\n margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length) -1);\n\n .tip ~~svg~~ {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement=\"right\"] {\n margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n .tip ~~svg~~ {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement=\"left\"] {\n margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length));\n\n .tip ~~svg~~ {\n transform: rotate(-90deg);\n }\n }\n\n /* Animation */\n\n &[data-entering] {\n animation: slide 200ms;\n }\n\n &[data-exiting] {\n animation: slide 200ms reverse ease-in;\n }\n\n .tip {\n width: var(--tooltip--tip-size);\n height: var(--tooltip--tip-size);\n\n ~~svg~~ {\n display: block;\n fill: var(--tooltip--background-color);\n }\n }\n}\n\n@keyframes slide {\n from {\n transform: var(--translate-origin);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n border-radius: var(--tooltip--corner-radius);\n background-color: var(--tooltip--background-color);\n color: var(--tooltip--color);\n font-size: var(--tooltip--font-size);\n padding-block: var(--tooltip--padding-y);\n padding-inline: var(--tooltip--padding-x);\n max-width: var(--tooltip--max-width);\n transform: translate3d(0, 0, 0);\n box-shadow: var(--tooltip--box-shadow);\n\n --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n /*\n React Aria sets `data-placement` once it has computed a position, and\n * renders the overlay at `top: 0; left: 0` of the viewport until then. It\n * skips computing one when the tooltip mounts for its exit animation alone –\n * swapping quickly between neighbouring triggers does that – and never\n * retries afterwards, so such a tooltip stays parked in the corner for its\n * whole lifetime. Keep it out of sight instead. `visibility` rather than\n * `display`, so the overlay stays measurable for the positioning pass.\n /\n &:not([data-placement]) {\n visibility: hidden;\n }\n\n / Placement /\n &[data-placement=\"top\"] {\n margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length));\n }\n\n &[data-placement=\"bottom\"] {\n margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length) -1);\n\n .tip .tipIcon {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement=\"right\"] {\n margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n .tip .tipIcon {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement=\"left\"] {\n margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length));\n\n .tip .tipIcon {\n transform: rotate(-90deg);\n }\n }\n\n /* Animation */\n\n &[data-entering] {\n animation: slide 200ms;\n }\n\n &[data-exiting] {\n animation: slide 200ms reverse ease-in;\n }\n\n .tip {\n width: var(--tooltip--tip-size);\n height: var(--tooltip--tip-size);\n\n .tipIcon {\n display: block;\n fill: var(--tooltip--background-color);\n }\n }\n}\n\n@keyframes slide {\n from {\n transform: var(--translate-origin);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/lib/files/acceptedFiles.mjs ADDED Viewed

@@ -0,0 +1,34 @@
+"use client"
+/* */
+//#region src/lib/files/acceptedFiles.ts
+/**
+* Whether a file matches an `accept` attribute value — a comma separated list
+* of MIME types (`image/png`), MIME wildcards (`image/*`) and file extensions
+* (`.png`). A missing or empty list matches everything, the way the attribute
+* itself does.
+*
+* @internal
+*/
+var matchesAccept = (file, accept) => {
+	const tokens = accept?.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean) ?? [];
+	if (tokens.length === 0) return true;
+	const type = file.type.toLowerCase();
+	const name = file.name.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+};
+/**
+* The files of a drop event that match `accept`. Non-file items (dragged text,
+* directories) are skipped, and the filter runs on the drop item — so a file
+* `accept` rejects is never read from disk.
+*
+* @internal
+*/
+var getAcceptedFiles = async (items, accept) => await Promise.all(items.filter((item) => item.kind === "file").filter((item) => matchesAccept(item, accept)).map(async (item) => await item.getFile()));
+//#endregion
+export { getAcceptedFiles, matchesAccept };
+//# sourceMappingURL=acceptedFiles.mjs.map

package/dist/js/packages/components/src/lib/files/acceptedFiles.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"acceptedFiles.mjs","names":[],"sources":["../../../../../../../src/lib/files/acceptedFiles.ts"],"sourcesContent":["import type { DropItem } from \"@react-types/shared\";\n\n/**\n * Whether a file matches an `accept` attribute value — a comma separated list\n * of MIME types (`image/png`), MIME wildcards (`image/*`) and file extensions\n * (`.png`). A missing or empty list matches everything, the way the attribute\n * itself does.\n *\n * @internal\n */\nexport const matchesAccept = (\n file: Pick<File, \"name\" | \"type\">,\n accept?: string,\n): boolean => {\n const tokens =\n accept\n ?.split(\",\")\n .map((token) => token.trim().toLowerCase())\n .filter(Boolean) ?? [];\n\n if (tokens.length === 0) {\n return true;\n }\n\n const type = file.type.toLowerCase();\n const name = file.name.toLowerCase();\n\n return tokens.some((token) => {\n if (token.startsWith(\".\")) {\n return name.endsWith(token);\n }\n if (token.endsWith(\"/*\")) {\n return type.startsWith(token.slice(0, -1));\n }\n return type === token;\n });\n};\n\n/**\n * The files of a drop event that match `accept`. Non-file items (dragged text,\n * directories) are skipped, and the filter runs on the drop item — so a file\n * `accept` rejects is never read from disk.\n *\n * @internal\n */\nexport const getAcceptedFiles = async (\n items: readonly DropItem[],\n accept?: string,\n): Promise<File[]> =>\n await Promise.all(\n items\n .filter((item) => item.kind === \"file\")\n .filter((item) => matchesAccept(item, accept))\n .map(async (item) => await item.getFile()),\n );\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,iBACX,MACA,WACY;CACZ,MAAM,SACJ,QACI,MAAM,GAAG,CAAC,CACX,KAAK,UAAU,MAAM,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAC1C,OAAO,OAAO,KAAK,CAAC;CAEzB,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,MAAM,OAAO,KAAK,KAAK,YAAY;CACnC,MAAM,OAAO,KAAK,KAAK,YAAY;CAEnC,OAAO,OAAO,MAAM,UAAU;EAC5B,IAAI,MAAM,WAAW,GAAG,GACtB,OAAO,KAAK,SAAS,KAAK;EAE5B,IAAI,MAAM,SAAS,IAAI,GACrB,OAAO,KAAK,WAAW,MAAM,MAAM,GAAG,EAAE,CAAC;EAE3C,OAAO,SAAS;CAClB,CAAC;AACH;;;;;;;;AASA,IAAa,mBAAmB,OAC9B,OACA,WAEA,MAAM,QAAQ,IACZ,MACG,QAAQ,SAAS,KAAK,SAAS,MAAM,CAAC,CACtC,QAAQ,SAAS,cAAc,MAAM,MAAM,CAAC,CAAC,CAC7C,IAAI,OAAO,SAAS,MAAM,KAAK,QAAQ,CAAC,CAC7C"}

package/dist/js/packages/components/src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.mjs CHANGED Viewed

@@ -59,6 +59,6 @@ var useKeepBrowserExtensionsInteractive = (isActive) => {
 	}, [isActive]);
 };
 //#endregion
-export { useKeepBrowserExtensionsInteractive as default, useKeepBrowserExtensionsInteractive };
+export { useKeepBrowserExtensionsInteractive as default, useKeepBrowserExtensionsInteractive, isBrowserExtensionNode };
 //# sourceMappingURL=useKeepBrowserExtensionsInteractive.mjs.map

package/dist/js/packages/components/src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useKeepBrowserExtensionsInteractive.mjs","names":[],"sources":["../../../../../../../../src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\n/*\n Attribute react-aria checks to keep a node out of the `inert` / `aria-hidden`\n * isolation it applies to everything outside an open modal overlay.\n \n @see `isAlwaysVisibleNode` in `@react-aria/overlays` (`ariaHideOutside`)\n /\nconst keepInteractiveAttribute = \"data-react-aria-top-layer\";\n\nconst extensionUrlSchemes = [\n \"chrome-extension:\",\n \"moz-extension:\",\n \"safari-web-extension:\",\n \"safari-extension:\",\n];\n\~~nconst~~ isBrowserExtensionNode = (element: Element): boolean => {\n if (element.tagName.includes(\"-\")) {\n return true;\n }\n if (element.shadowRoot !== null) {\n return true;\n }\n if (element instanceof HTMLIFrameElement) {\n const source = element.getAttribute(\"src\") ?? \"\";\n return extensionUrlSchemes.some((scheme) => source.startsWith(scheme));\n }\n return false;\n};\n\nconst keepInteractive = (element: Element): void => {\n if (!element.hasAttribute(keepInteractiveAttribute)) {\n element.setAttribute(keepInteractiveAttribute, \"\");\n }\n if (element instanceof HTMLElement && element.inert) {\n element.inert = false;\n }\n if (element.getAttribute(\"aria-hidden\") === \"true\") {\n element.removeAttribute(\"aria-hidden\");\n }\n};\n\n/\n While a modal overlay is open, react-aria isolates the rest of the document\n * by setting `inert` on every sibling of the modal (see `ariaHideOutside`) —\n * and it keeps doing so for nodes that appear afterwards via a\n * `MutationObserver`. That also catches UI a browser extension injects while\n * the modal is open, e.g. a password manager's autofill dropdown on a field, or\n * its \"save credentials\" popover. An `inert` node stays visible but cannot be\n * clicked, so the user sees the extension UI but cannot interact with it.\n \n This hook watches the document while `isActive` and re-enables such\n * extension-injected, document-level nodes, so browser extensions keep working\n * on top of modals. It targets the structural fingerprint of extension UI (see\n * {@link isBrowserExtensionNode}) rather than a fixed list of vendors.\n */\nexport const useKeepBrowserExtensionsInteractive = (\n isActive: boolean,\n): void => {\n useEffect(() => {\n if (!isActive \|\| typeof MutationObserver === \"undefined\") {\n return;\n }\n\n const root = document.body;\n\n const process = (node: Node): void => {\n if (node instanceof Element && isBrowserExtensionNode(node)) {\n keepInteractive(node);\n }\n };\n\n for (const child of Array.from(root.children)) {\n process(child);\n }\n\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of Array.from(mutation.addedNodes)) {\n process(node);\n }\n }\n });\n observer.observe(root, { childList: true });\n\n return () => observer.disconnect();\n }, [isActive]);\n};\n\nexport default useKeepBrowserExtensionsInteractive;\n"],"mappings":";;;;;;;;;;AAQA,IAAM,2BAA2B;AAEjC,IAAM,sBAAsB;CAC1B;CACA;CACA;CACA;AACF;AAEA,~~IAAM~~,0BAA0B,YAA8B;~~CAC5D~~,IAAI,QAAQ,QAAQ,SAAS,GAAG,GAC9B,OAAO;CAET,IAAI,QAAQ,eAAe,MACzB,OAAO;CAET,IAAI,mBAAmB,mBAAmB;EACxC,MAAM,SAAS,QAAQ,aAAa,KAAK,KAAK;EAC9C,OAAO,oBAAoB,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;CACvE;CACA,OAAO;AACT;AAEA,IAAM,mBAAmB,YAA2B;CAClD,IAAI,CAAC,QAAQ,aAAa,wBAAwB,GAChD,QAAQ,aAAa,0BAA0B,EAAE;CAEnD,IAAI,mBAAmB,eAAe,QAAQ,OAC5C,QAAQ,QAAQ;CAElB,IAAI,QAAQ,aAAa,aAAa,MAAM,QAC1C,QAAQ,gBAAgB,aAAa;AAEzC;;;;;;;;;;;;;;;AAgBA,IAAa,uCACX,aACS;CACT,gBAAgB;EACd,IAAI,CAAC,YAAY,OAAO,qBAAqB,aAC3C;EAGF,MAAM,OAAO,SAAS;EAEtB,MAAM,WAAW,SAAqB;GACpC,IAAI,gBAAgB,WAAW,uBAAuB,IAAI,GACxD,gBAAgB,IAAI;EAExB;EAEA,KAAK,MAAM,SAAS,MAAM,KAAK,KAAK,QAAQ,GAC1C,QAAQ,KAAK;EAGf,MAAM,WAAW,IAAI,kBAAkB,cAAc;GACnD,KAAK,MAAM,YAAY,WACrB,KAAK,MAAM,QAAQ,MAAM,KAAK,SAAS,UAAU,GAC/C,QAAQ,IAAI;EAGlB,CAAC;EACD,SAAS,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;EAE1C,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,QAAQ,CAAC;AACf"}
1	+ {"version":3,"file":"useKeepBrowserExtensionsInteractive.mjs","names":[],"sources":["../../../../../../../../src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\n/*\n Attribute react-aria checks to keep a node out of the `inert` / `aria-hidden`\n * isolation it applies to everything outside an open modal overlay.\n \n @see `isAlwaysVisibleNode` in `@react-aria/overlays` (`ariaHideOutside`)\n /\nconst keepInteractiveAttribute = \"data-react-aria-top-layer\";\n\nconst extensionUrlSchemes = [\n \"chrome-extension:\",\n \"moz-extension:\",\n \"safari-web-extension:\",\n \"safari-extension:\",\n];\n\nexport const isBrowserExtensionNode = (element: Element): boolean => {\n if (element.tagName.includes(\"-\")) {\n return true;\n }\n if (element.shadowRoot !== null) {\n return true;\n }\n if (element instanceof HTMLIFrameElement) {\n const source = element.getAttribute(\"src\") ?? \"\";\n return extensionUrlSchemes.some((scheme) => source.startsWith(scheme));\n }\n return false;\n};\n\nconst keepInteractive = (element: Element): void => {\n if (!element.hasAttribute(keepInteractiveAttribute)) {\n element.setAttribute(keepInteractiveAttribute, \"\");\n }\n if (element instanceof HTMLElement && element.inert) {\n element.inert = false;\n }\n if (element.getAttribute(\"aria-hidden\") === \"true\") {\n element.removeAttribute(\"aria-hidden\");\n }\n};\n\n/\n While a modal overlay is open, react-aria isolates the rest of the document\n * by setting `inert` on every sibling of the modal (see `ariaHideOutside`) —\n * and it keeps doing so for nodes that appear afterwards via a\n * `MutationObserver`. That also catches UI a browser extension injects while\n * the modal is open, e.g. a password manager's autofill dropdown on a field, or\n * its \"save credentials\" popover. An `inert` node stays visible but cannot be\n * clicked, so the user sees the extension UI but cannot interact with it.\n \n This hook watches the document while `isActive` and re-enables such\n * extension-injected, document-level nodes, so browser extensions keep working\n * on top of modals. It targets the structural fingerprint of extension UI (see\n * {@link isBrowserExtensionNode}) rather than a fixed list of vendors.\n */\nexport const useKeepBrowserExtensionsInteractive = (\n isActive: boolean,\n): void => {\n useEffect(() => {\n if (!isActive \|\| typeof MutationObserver === \"undefined\") {\n return;\n }\n\n const root = document.body;\n\n const process = (node: Node): void => {\n if (node instanceof Element && isBrowserExtensionNode(node)) {\n keepInteractive(node);\n }\n };\n\n for (const child of Array.from(root.children)) {\n process(child);\n }\n\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of Array.from(mutation.addedNodes)) {\n process(node);\n }\n }\n });\n observer.observe(root, { childList: true });\n\n return () => observer.disconnect();\n }, [isActive]);\n};\n\nexport default useKeepBrowserExtensionsInteractive;\n"],"mappings":";;;;;;;;;;AAQA,IAAM,2BAA2B;AAEjC,IAAM,sBAAsB;CAC1B;CACA;CACA;CACA;AACF;AAEA,IAAa,0BAA0B,YAA8B;CACnE,IAAI,QAAQ,QAAQ,SAAS,GAAG,GAC9B,OAAO;CAET,IAAI,QAAQ,eAAe,MACzB,OAAO;CAET,IAAI,mBAAmB,mBAAmB;EACxC,MAAM,SAAS,QAAQ,aAAa,KAAK,KAAK;EAC9C,OAAO,oBAAoB,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;CACvE;CACA,OAAO;AACT;AAEA,IAAM,mBAAmB,YAA2B;CAClD,IAAI,CAAC,QAAQ,aAAa,wBAAwB,GAChD,QAAQ,aAAa,0BAA0B,EAAE;CAEnD,IAAI,mBAAmB,eAAe,QAAQ,OAC5C,QAAQ,QAAQ;CAElB,IAAI,QAAQ,aAAa,aAAa,MAAM,QAC1C,QAAQ,gBAAgB,aAAa;AAEzC;;;;;;;;;;;;;;;AAgBA,IAAa,uCACX,aACS;CACT,gBAAgB;EACd,IAAI,CAAC,YAAY,OAAO,qBAAqB,aAC3C;EAGF,MAAM,OAAO,SAAS;EAEtB,MAAM,WAAW,SAAqB;GACpC,IAAI,gBAAgB,WAAW,uBAAuB,IAAI,GACxD,gBAAgB,IAAI;EAExB;EAEA,KAAK,MAAM,SAAS,MAAM,KAAK,KAAK,QAAQ,GAC1C,QAAQ,KAAK;EAGf,MAAM,WAAW,IAAI,kBAAkB,cAAc;GACnD,KAAK,MAAM,YAAY,WACrB,KAAK,MAAM,QAAQ,MAAM,KAAK,SAAS,UAAU,GAC/C,QAAQ,IAAI;EAGlB,CAAC;EACD,SAAS,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;EAE1C,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,QAAQ,CAAC;AACf"}

package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs CHANGED Viewed

@@ -1099,7 +1099,7 @@ var image = {
 		"path": ["image", "border-style"]
 	},
 	"border-color": {
-		"value": "#DCE9F7",
+		"value": "#8FA1B4",
 		"path": ["image", "border-color"]
 	}
 };
@@ -4326,6 +4326,10 @@ var all_dark_default = {
 			"path": ["big-number", "font-weight"]
 		}
 	},
+	"cartesian-chart": { "transition-duration": {
+		"value": "800ms",
+		"path": ["cartesian-chart", "transition-duration"]
+	} },
 	"cartesian-grid": {
 		"color": {
 			"value": "#E5EFF8",
@@ -4341,6 +4345,10 @@ var all_dark_default = {
 		"path": ["chart-tooltip", "spacing"]
 	} },
 	"donut-chart": {
+		"transition-duration": {
+			"value": "800ms",
+			"path": ["donut-chart", "transition-duration"]
+		},
 		"border-color": {
 			"value": "#DCE9F7",
 			"path": ["donut-chart", "border-color"]
@@ -5302,6 +5310,10 @@ var all_dark_default = {
 		"path": ["password-creation-field", "rule-to-rule-spacing"]
 	} },
 	"progress-bar": {
+		"transition-duration": {
+			"value": "800ms",
+			"path": ["progress-bar", "transition-duration"]
+		},
 		"font-size": {
 			"value": "1rem",
 			"path": ["progress-bar", "font-size"]