npm - @mittwald/flow-react-components - Versions diffs - 1.3.0-next.2 → 1.3.0-next.21 - Mend

@mittwald/flow-react-components 1.3.0-next.2 → 1.3.0-next.21

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

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

@@ -4,9 +4,14 @@
 var __locale_default = {
 	"de-DE": {
 		"button.generate": "Generieren",
+		"button.generate.label": "Passwort generieren",
 		"button.generate.tooltip.hide": "Passwort verbergen",
 		"button.generate.tooltip.show": "Passwort anzeigen",
+		"password.announce.hidden": "Passwort wird verborgen",
+		"password.announce.revealed": "Passwort wird angezeigt",
 		"password.requirements.heading": "Anforderungen an dein Passwort",
+		"password.requirements.rule.fulfilled": "Erfüllt",
+		"password.requirements.rule.unfulfilled": "Nicht erfüllt",
 		"password.requirements.subject": "den Anforderungen an dein Passwort",
 		"validation.allowedSpecialCharacters": "Erlaubte Sonderzeichen: #!~%^*_+-=?()<>|.,;$:/",
 		"validation.atLeastOneCapitalLetter": "Mindestens ein Großbuchstabe",
@@ -45,9 +50,14 @@ var __locale_default = {
 	},
 	"en-US": {
 		"button.generate": "Generate",
+		"button.generate.label": "Generate password",
 		"button.generate.tooltip.hide": "Hide password",
 		"button.generate.tooltip.show": "Show password",
+		"password.announce.hidden": "Password is hidden",
+		"password.announce.revealed": "Password is shown",
 		"password.requirements.heading": "Requirements for your password",
+		"password.requirements.rule.fulfilled": "Fulfilled",
+		"password.requirements.rule.unfulfilled": "Not fulfilled",
 		"password.requirements.subject": "your password requirements",
 		"validation.allowedSpecialCharacters": "Allowed special characters: #!~%^*_+-=?()<>|.,;$:/",
 		"validation.atLeastOneCapitalLetter": "At least one capital letter",

package/dist/js/default.mjs CHANGED Viewed

@@ -68,6 +68,7 @@ import { IconUnorderedList } from "./packages/components/src/components/Icon/com
 import { IconUpload } from "./packages/components/src/components/Icon/components/icons/IconUpload.mjs";
 import { IconView } from "./packages/components/src/components/Icon/components/icons/IconView.mjs";
 import { IconAI } from "./packages/components/src/components/Icon/components/icons/IconAI.mjs";
+import { IconAIHosting } from "./packages/components/src/components/Icon/components/icons/IconAIHosting.mjs";
 import { IconAnalytics } from "./packages/components/src/components/Icon/components/icons/IconAnalytics.mjs";
 import { IconApp } from "./packages/components/src/components/Icon/components/icons/IconApp.mjs";
 import { IconAutoresponder } from "./packages/components/src/components/Icon/components/icons/IconAutoresponder.mjs";
@@ -337,4 +338,4 @@ import { TextField } from "./packages/components/src/components/TextField/TextFi
 import { TimeField } from "./packages/components/src/components/TimeField/TimeField.mjs";
 import { Truncate } from "./packages/components/src/components/Truncate/Truncate.mjs";
 import { TunnelEntry } from "./packages/components/src/components/TunnelEntry/TunnelEntry.mjs";
-export { AbortActionError, AccentBox, Accordion, Action, ActionBatch, ActionGroup, Activity, Alert, AlertBadge, AlertIcon, AlertText, Align, Area, AreaDot, Autocomplete, Avatar, AvatarStack, Badge, Bar, BigNumber, Breadcrumb, BrowserOnly, Button, CartesianChart, CartesianGrid, ChartGrid, ChartLegend, ChartTooltip, Chat, Checkbox, CheckboxButton, CheckboxGroup, ClearPropsContext, CoachMark, CodeBlock, CodeEditor, Color, ColumnLayout, Combine, ComboBox, ComponentDefaultsContext, ComponentDefaultsProvider, ComponentPropsContextProvider, Content, ContextMenu, ContextMenuContent, ContextMenuSection, ContextMenuTrigger, ContextualHelp, ContextualHelpTrigger, CopyButton, CounterBadge, CountryOptions, DatePicker, DateRangePicker, DeprecationWarningContext, DeprecationWarningProvider, DialogTrigger, Div, DonutChart, EmptyView, EmptyViewContainer, FieldDescription, FieldError, FileCard, FileCardList, FileDropZone, FileField, Flex, GridList, GridListItem, Header, HeaderNavigation, Heading, Icon, IconAI, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSetProvider, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IllustratedMessage, Image, ImageCropper, Initials, InlineCode, IntlProvider, Kbd, Label, LabeledValue, LayoutCard, Legend, LegendItem, LightBox, LightBoxGallery, LightBoxGalleryItem, LightBoxTrigger, Line, Link, List, ListFilter, ListItem, ListItemView, ListItemViewContent, ListLoaderAsync, ListSorting, ListStaticData, ListSummary, LoadingSpinner, Markdown, MarkdownEditor, MenuItem, MenuTrigger, Message, MessageSeparator, MessageThread, Modal, ModalTrigger, Navigation, NavigationGroup, Notification, NotificationController, NotificationProvider, NumberField, Option, Overlay, OverlayContent, OverlayController, OverlayTrigger, PasswordCreationField, Popover, PopoverContent, PopoverTrigger, ProgressBar, PropsContextProvider, Radio, RadioButton, RadioGroup, RangeCalendar, Rating, RatingSegment, Render, RouterProvider, SearchField, Section, Segment, SegmentedControl, Select, Separator, SettingsProvider, Skeleton, SkeletonText, Slider, SortingFunctions, SuspenseTrigger, Switch, Tab, TabNavigation, TabTitle, Table, TableBody, TableCell, TableColumn, TableFooterRow, TableHeader, TableRow, Tabs, Text, TextArea, TextField, ThemedHtml, TimeField, Tooltip, TooltipTrigger, TranslationProvider, Truncate, TunnelEntry, TypedArea, TypedBar, TypedChartGrid, TypedChartLegend, TypedChartTooltip, TypedLine, TypedList, TypedListFilter, TypedListItem, TypedListLoaderAsync, TypedListSorting, TypedListStaticData, TypedXAxis, TypedYAxis, Wrap, XAxis, YAxis, abortAction, builtInComponentDefaults, dynamic, eventHandlerContext, flags, getRemoteEvent, getResolvedTheme, getTheme, iconCategories, isDateRangeValue, overlayTriggersTunneledTo, propsContext, setTheme, sortByDachFirst, themeHtmlAttribute, typedCartesianChart, typedList, useAriaAnnounceSuspense, useComponentDefaults, useControlledRemoteValueProps, useDesignTokens, useIsMounted, useLanguage, useList, useListMetadata, useLocalizedStringFormatter, useModalController, useNotificationController, useOnChange, useOverlayController, useProps, useTheme as useStoredTheme, useResolvedTheme as useTheme, useTranslationProvider, useWarnDeprecation };
+export { AbortActionError, AccentBox, Accordion, Action, ActionBatch, ActionGroup, Activity, Alert, AlertBadge, AlertIcon, AlertText, Align, Area, AreaDot, Autocomplete, Avatar, AvatarStack, Badge, Bar, BigNumber, Breadcrumb, BrowserOnly, Button, CartesianChart, CartesianGrid, ChartGrid, ChartLegend, ChartTooltip, Chat, Checkbox, CheckboxButton, CheckboxGroup, ClearPropsContext, CoachMark, CodeBlock, CodeEditor, Color, ColumnLayout, Combine, ComboBox, ComponentDefaultsContext, ComponentDefaultsProvider, ComponentPropsContextProvider, Content, ContextMenu, ContextMenuContent, ContextMenuSection, ContextMenuTrigger, ContextualHelp, ContextualHelpTrigger, CopyButton, CounterBadge, CountryOptions, DatePicker, DateRangePicker, DeprecationWarningContext, DeprecationWarningProvider, DialogTrigger, Div, DonutChart, EmptyView, EmptyViewContainer, FieldDescription, FieldError, FileCard, FileCardList, FileDropZone, FileField, Flex, GridList, GridListItem, Header, HeaderNavigation, Heading, Icon, IconAI, IconAIHosting, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSetProvider, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IllustratedMessage, Image, ImageCropper, Initials, InlineCode, IntlProvider, Kbd, Label, LabeledValue, LayoutCard, Legend, LegendItem, LightBox, LightBoxGallery, LightBoxGalleryItem, LightBoxTrigger, Line, Link, List, ListFilter, ListItem, ListItemView, ListItemViewContent, ListLoaderAsync, ListSorting, ListStaticData, ListSummary, LoadingSpinner, Markdown, MarkdownEditor, MenuItem, MenuTrigger, Message, MessageSeparator, MessageThread, Modal, ModalTrigger, Navigation, NavigationGroup, Notification, NotificationController, NotificationProvider, NumberField, Option, Overlay, OverlayContent, OverlayController, OverlayTrigger, PasswordCreationField, Popover, PopoverContent, PopoverTrigger, ProgressBar, PropsContextProvider, Radio, RadioButton, RadioGroup, RangeCalendar, Rating, RatingSegment, Render, RouterProvider, SearchField, Section, Segment, SegmentedControl, Select, Separator, SettingsProvider, Skeleton, SkeletonText, Slider, SortingFunctions, SuspenseTrigger, Switch, Tab, TabNavigation, TabTitle, Table, TableBody, TableCell, TableColumn, TableFooterRow, TableHeader, TableRow, Tabs, Text, TextArea, TextField, ThemedHtml, TimeField, Tooltip, TooltipTrigger, TranslationProvider, Truncate, TunnelEntry, TypedArea, TypedBar, TypedChartGrid, TypedChartLegend, TypedChartTooltip, TypedLine, TypedList, TypedListFilter, TypedListItem, TypedListLoaderAsync, TypedListSorting, TypedListStaticData, TypedXAxis, TypedYAxis, Wrap, XAxis, YAxis, abortAction, builtInComponentDefaults, dynamic, eventHandlerContext, flags, getRemoteEvent, getResolvedTheme, getTheme, iconCategories, isDateRangeValue, overlayTriggersTunneledTo, propsContext, setTheme, sortByDachFirst, themeHtmlAttribute, typedCartesianChart, typedList, useAriaAnnounceSuspense, useComponentDefaults, useControlledRemoteValueProps, useDesignTokens, useIsMounted, useLanguage, useList, useListMetadata, useLocalizedStringFormatter, useModalController, useNotificationController, useOnChange, useOverlayController, useProps, useTheme as useStoredTheme, useResolvedTheme as useTheme, useTranslationProvider, useWarnDeprecation };

package/dist/js/flr-universal.mjs CHANGED Viewed

@@ -58,6 +58,7 @@ import { IconUnorderedList } from "./packages/components/src/components/Icon/com
 import { IconUpload } from "./packages/components/src/components/Icon/components/icons/IconUpload.mjs";
 import { IconView } from "./packages/components/src/components/Icon/components/icons/IconView.mjs";
 import { IconAI } from "./packages/components/src/components/Icon/components/icons/IconAI.mjs";
+import { IconAIHosting } from "./packages/components/src/components/Icon/components/icons/IconAIHosting.mjs";
 import { IconAnalytics } from "./packages/components/src/components/Icon/components/icons/IconAnalytics.mjs";
 import { IconApp } from "./packages/components/src/components/Icon/components/icons/IconApp.mjs";
 import { IconAutoresponder } from "./packages/components/src/components/Icon/components/icons/IconAutoresponder.mjs";
@@ -158,4 +159,4 @@ import { SettingsProvider } from "./packages/components/src/components/SettingsP
 import { List } from "./packages/components/src/components/List/List.mjs";
 import { typedList } from "./packages/components/src/components/List/typedList.mjs";
 import { NotificationProvider, useNotificationController } from "./packages/components/src/components/NotificationProvider/NotificationProvider.mjs";
-export { Action, ActionBatch, BrowserOnly, CountryOptions, DeprecationWarningProvider, IconAI, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IntlProvider, LightBox, LightBoxTrigger, List, ListItemView, Modal, ModalTrigger, NotificationProvider, OverlayController, Popover, PopoverTrigger, SettingsProvider, Wrap, typedList, useControlledRemoteValueProps, useIsMounted, useLanguage, useModalController, useNotificationController, useOnChange, useOverlayController, useProps };
+export { Action, ActionBatch, BrowserOnly, CountryOptions, DeprecationWarningProvider, IconAI, IconAIHosting, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IntlProvider, LightBox, LightBoxTrigger, List, ListItemView, Modal, ModalTrigger, NotificationProvider, OverlayController, Popover, PopoverTrigger, SettingsProvider, Wrap, typedList, useControlledRemoteValueProps, useIsMounted, useLanguage, useModalController, useNotificationController, useOnChange, useOverlayController, useProps };

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

@@ -9,9 +9,21 @@ import { Button } from "../Button/Button.mjs";
 import { Activity } from "../Activity/Activity.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import clsx from "clsx";
-import { useId, useState } from "react";
+import { useCallback, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Accordion/Accordion.tsx
+var HeaderButton = (props) => {
+	const { children, contentId, isExpanded, onToggle } = props;
+	return /* @__PURE__ */ jsxs(Button, {
+		tunnel: null,
+		unstyled: true,
+		"aria-expanded": isExpanded,
+		className: Accordion_module_default.headerButton,
+		onPress: onToggle,
+		"aria-controls": contentId,
+		children: [children, /* @__PURE__ */ jsx(IconChevronDown, { className: Accordion_module_default.chevron })]
+	});
+};
 /**
 * @flr-generate all
 * @flowStatus beta
@@ -22,18 +34,13 @@ var Accordion = flowComponent("Accordion", (props) => {
 	const rootClassName = clsx(Accordion_module_default.accordion, expanded && Accordion_module_default.expanded, variant === "outline" && Accordion_module_default.outline, className);
 	const headerId = useId();
 	const contentId = useId();
-	const HeaderButton = (props) => {
-		const { children } = props;
-		return /* @__PURE__ */ jsxs(Button, {
-			tunnel: null,
-			unstyled: true,
-			"aria-expanded": expanded,
-			className: Accordion_module_default.headerButton,
-			onPress: () => setExpanded((expanded) => !expanded),
-			"aria-controls": contentId,
-			children: [children, /* @__PURE__ */ jsx(IconChevronDown, { className: Accordion_module_default.chevron })]
-		});
-	};
+	const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);
+	const renderHeaderButton = (children) => /* @__PURE__ */ jsx(HeaderButton, {
+		contentId,
+		isExpanded: expanded,
+		onToggle: toggle,
+		children
+	});
 	const propsContext = {
 		Content: {
 			className: Accordion_module_default.contentInner,
@@ -46,18 +53,19 @@ var Accordion = flowComponent("Accordion", (props) => {
 			className: Accordion_module_default.header,
 			level: 4,
 			size: "xs",
-			children: dynamic((props) => /* @__PURE__ */ jsx(HeaderButton, { children: props.children })),
+			children: dynamic((props) => renderHeaderButton(props.children)),
 			Button: { size: "m" }
 		},
 		Label: {
 			className: Accordion_module_default.header,
-			children: dynamic((props) => /* @__PURE__ */ jsx(HeaderButton, { children: props.children }))
+			children: dynamic((props) => renderHeaderButton(props.children))
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		className: rootClassName,
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			dependencies: [expanded],
 			props: propsContext,
 			children: [children, /* @__PURE__ */ jsx("div", {
 				"aria-labelledby": headerId,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n ComponentProps<\"div\">\n> {\n /** Whether the accordion should be initially expanded. /\n defaultExpanded?: boolean;\n /* The visual variant of the accordion. @default \"default\" /\n variant?: \"default\" \| \"outline\";\n}\n\n/\n @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n \"Accordion\",\n (props) => {\n const {\n children,\n className,\n defaultExpanded = false,\n variant = \"default\",\n ...rest\n } = props;\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n const rootClassName = clsx(\n styles.accordion,\n expanded && styles.expanded,\n variant === \"outline\" && styles.outline,\n className,\n );\n\n const headerId = useId();\n\n const contentId = useId();\n\n const ~~HeaderButton:~~ ~~FC<PropsWithChildren>~~ = (~~props~~) => {\n const { children } = ~~props;\n return~~ (\n <~~Button~~\n ~~tunnel~~={~~null~~}\n ~~unstyled\n aria-expanded~~={expanded}\n ~~className~~={~~styles.headerButton~~}\n ~~onPress={() => setExpanded((expanded) => !expanded)}\~~n ~~aria-controls={contentId}\n~~ ~~>\n~~ {children}\n ~~<IconChevronDown className={styles.chevron} />\n~~ </~~Button~~>\n );\n ~~};\n~~\n const propsContext: PropsContext = {\n Content: {\n className: styles.contentInner,\n tunnel: {\n id: \"content\",\n component: \"Accordion\",\n },\n },\n Heading: {\n className: styles.header,\n level: 4,\n size: \"xs\",\n children: dynamic((props) => (~~\n <HeaderButton>{~~props.children~~}</HeaderButton>\n~~ )),\n Button: { size: \"m\" },\n },\n Label: {\n className: styles.header,\n children: dynamic((props) => (~~\n <HeaderButton>{~~props.children~~}</HeaderButton>\n~~ )),\n },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n <div\n aria-labelledby={headerId}\n id={contentId}\n role=\"region\"\n hidden={!expanded}\n className={styles.content}\n >\n <Activity isActive={expanded} inactiveDelay={1000}>\n <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n </Activity>\n </div>\n </PropsContextProvider>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Accordion;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAyBA~~,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,UAAU,WACV,GAAG,SACD;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,eAAe;CAExD,MAAM,gBAAgB,KACpB,yBAAO,WACP,YAAY,yBAAO,UACnB,YAAY,aAAa,yBAAO,SAChC,SACF;CAEA,MAAM,WAAW,MAAM;CAEvB,MAAM,YAAY,MAAM;CAExB,MAAM,~~gBAAuC~~,~~UAAU;EACrD~~,~~MAAM~~,~~EAAE,~~aAAa~~;EACrB~~,~~OACE~~,~~qBAAC,QAAD;GACE,~~QAAQ~~;GACR~~,~~UAAA;GACA~~,~~iBAAe;GACf~~,~~WAAW,yBAAO~~;~~GAClB~~,~~eAAe~~,~~aAAa~~,~~aAAa~~,~~CAAC~~,~~QAAQ~~;~~GAClD~~,~~iBAAe~~;~~GANjB~~,~~UAAA~~,~~CAQG,UACD,oBAAC,iBAAD,EAAiB,WAAW,yBAAO,QAAU,~~CAAA~~,CACvC;;CAEZ~~;~~CAEA~~,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,SAAS;GACP,WAAW,yBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,~~UACjB~~,~~oBAAC~~,~~cAAD,EAAA,UAAe,~~MAAM,~~SAAuB~~,~~CAAA,CAC7C~~;~~GACD~~,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,OAAO;GACL,WAAW,yBAAO;GAClB,UAAU,SAAS,~~UACjB~~,~~oBAAC~~,~~cAAD,EAAA,UAAe,~~MAAM,~~SAAuB~~,~~CAAA,CAC7C~~;~~EACH~~;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;~~EACxB~~,UAAA,qBAAC,sBAAD;GAAsB,OAAO;~~GAA7B~~,UAAA,CACG,UACD,oBAAC,OAAD;IACE,mBAAiB;IACjB,IAAI;IACJ,MAAK;IACL,QAAQ,CAAC;IACT,WAAW,yBAAO;IAElB,UAAA,oBAAC,UAAD;KAAU,UAAU;KAAU,eAAe;KAC3C,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAa,CAAA;IACnD,CAAA;GACP,CAAA,CACe;;CACnB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
1	+ {"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useCallback, useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n ComponentProps<\"div\">\n> {\n /** Whether the accordion should be initially expanded. /\n defaultExpanded?: boolean;\n /* The visual variant of the accordion. @default \"default\" /\n variant?: \"default\" \| \"outline\";\n}\n\ninterface HeaderButtonProps extends PropsWithChildren {\n contentId: string;\n isExpanded: boolean;\n onToggle: () => void;\n}\n\n/\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n /\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n const { children, contentId, isExpanded, onToggle } = props;\n\n return (\n <Button\n tunnel={null}\n unstyled\n aria-expanded={isExpanded}\n className={styles.headerButton}\n onPress={onToggle}\n aria-controls={contentId}\n >\n {children}\n <IconChevronDown className={styles.chevron} />\n </Button>\n );\n};\n\n/\n @flr-generate all\n * @flowStatus beta\n /\nexport const Accordion: FC<AccordionProps> = flowComponent(\n \"Accordion\",\n (props) => {\n const {\n children,\n className,\n defaultExpanded = false,\n variant = \"default\",\n ...rest\n } = props;\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n const rootClassName = clsx(\n styles.accordion,\n expanded && styles.expanded,\n variant === \"outline\" && styles.outline,\n className,\n );\n\n const headerId = useId();\n\n const contentId = useId();\n\n const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);\n\n const renderHeaderButton = (children: ReactNode) => (\n <HeaderButton\n contentId={contentId}\n isExpanded={expanded}\n onToggle={toggle}\n >\n {children}\n </HeaderButton>\n );\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.contentInner,\n tunnel: {\n id: \"content\",\n component: \"Accordion\",\n },\n },\n Heading: {\n className: styles.header,\n level: 4,\n size: \"xs\",\n children: dynamic((props) => renderHeaderButton(props.children)),\n Button: { size: \"m\" },\n },\n Label: {\n className: styles.header,\n children: dynamic((props) => renderHeaderButton(props.children)),\n },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n {/\n * The props context is memoized, and the header button reads `expanded`\n * from it – without the dependency the toggle keeps announcing the state\n * it was first rendered with.\n /}\n {/\n * The props context is memoized, and the header button takes `expanded`\n * from it – without the dependency the toggle keeps announcing the\n * state it was first rendered with.\n */}\n <PropsContextProvider dependencies={[expanded]} props={propsContext}>\n {children}\n <div\n aria-labelledby={headerId}\n id={contentId}\n role=\"region\"\n hidden={!expanded}\n className={styles.content}\n >\n <Activity isActive={expanded} inactiveDelay={1000}>\n <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n </Activity>\n </div>\n </PropsContextProvider>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;AAgCA,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,YAAY,aAAa;CAEtD,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACA,iBAAe;EACf,WAAW,yBAAO;EAClB,SAAS;EACT,iBAAe;EANjB,UAAA,CAQG,UACD,oBAAC,iBAAD,EAAiB,WAAW,yBAAO,QAAU,CAAA,CACvC;;AAEZ;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,UAAU,WACV,GAAG,SACD;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,eAAe;CAExD,MAAM,gBAAgB,KACpB,yBAAO,WACP,YAAY,yBAAO,UACnB,YAAY,aAAa,yBAAO,SAChC,SACF;CAEA,MAAM,WAAW,MAAM;CAEvB,MAAM,YAAY,MAAM;CAExB,MAAM,SAAS,kBAAkB,aAAa,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC;CAEzE,MAAM,sBAAsB,aAC1B,oBAAC,cAAD;EACa;EACX,YAAY;EACZ,UAAU;EAET;CACW,CAAA;CAGhB,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,SAAS;GACP,WAAW,yBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;GAC/D,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,OAAO;GACL,WAAW,yBAAO;GAClB,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;EACjE;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EAWxB,UAAA,qBAAC,sBAAD;GAAsB,cAAc,CAAC,QAAQ;GAAG,OAAO;GAAvD,UAAA,CACG,UACD,oBAAC,OAAD;IACE,mBAAiB;IACjB,IAAI;IACJ,MAAK;IACL,QAAQ,CAAC;IACT,WAAW,yBAAO;IAElB,UAAA,oBAAC,UAAD;KAAU,UAAU;KAAU,eAAe;KAC3C,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAa,CAAA;IACnD,CAAA;GACP,CAAA,CACe;;CACnB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n border-radius: var(--corner-radius--round);\n width: var(--avatar-size);\n height: var(--avatar-size);\n overflow: hidden;\n flex-shrink: 0;\n font-weight: var(--font-weight--bold);\n font-size: calc(var(--avatar-size) * 0.35);\n background-color: var(--background-color);\n color: var(--content-color);\n display: flex;\n align-items: center;\n justify-content: center;\n\n /* Elements /\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .icon {\n width: calc(var(--avatar-size) 0.7);\n height: calc(var(--avatar-size) * 0.7);\n }\n\n .initials {\n font-size: calc(var(--avatar-size) * 0.4);\n }\n\n @extend .size-m;\n @extend .blue;\n\n /* Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n --avatar-size: var(--avatar--size--#{$size});\n }\n }\n\n @include size(m);\n @include size(xs);\n @include size(s);\n @include size(l);\n\n / Colors /\n\n @mixin color($color) {\n &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n &.#{$color} {\n --background-color: var(--decorative--#{$color}-background-color);\n --content-color: var(--decorative--#{$color}-content-color);\n --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n }\n }\n\n @include color(\"blue\");\n @include color(\"teal\");\n @include color(\"green\");\n @include color(\"violet\");\n @include color(\"lilac\");\n\n / Status */\n\n @mixin status($status) {\n &.#{$status} {\n --background-color: var(--avatar--#{$status}-status-background-color);\n }\n }\n\n @include status(\"info\");\n @include status(\"success\");\n @include status(\"warning\");\n @include status(\"danger\");\n @include status(\"unavailable\");\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n border-radius: var(--corner-radius--round);\n width: var(--avatar-size);\n height: var(--avatar-size);\n overflow: hidden;\n flex-shrink: 0;\n font-weight: var(--font-weight--bold);\n font-size: calc(var(--avatar-size) * 0.35);\n background-color: var(--background-color);\n color: var(--content-color);\n display: flex;\n align-items: center;\n justify-content: center;\n\n /* Elements /\n\n // The image is a child the consumer passes — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .icon {\n width: calc(var(--avatar-size) 0.7);\n height: calc(var(--avatar-size) * 0.7);\n }\n\n .initials {\n font-size: calc(var(--avatar-size) * 0.4);\n }\n\n @extend .size-m;\n @extend .blue;\n\n /* Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n --avatar-size: var(--avatar--size--#{$size});\n }\n }\n\n @include size(m);\n @include size(xs);\n @include size(s);\n @include size(l);\n\n / Colors /\n\n @mixin color($color) {\n &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n &.#{$color} {\n --background-color: var(--decorative--#{$color}-background-color);\n --content-color: var(--decorative--#{$color}-content-color);\n --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n }\n }\n\n @include color(\"blue\");\n @include color(\"teal\");\n @include color(\"green\");\n @include color(\"violet\");\n @include color(\"lilac\");\n\n / Status */\n\n @mixin status($status) {\n &.#{$status} {\n --background-color: var(--avatar--#{$status}-status-background-color);\n }\n }\n\n @include status(\"info\");\n @include status(\"success\");\n @include status(\"warning\");\n @include status(\"danger\");\n @include status(\"unavailable\");\n}\n"],"mappings":""}

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

@@ -2,16 +2,18 @@
 /* */
 //#region src/components/Calendar/Calendar.module.scss
 var calendar = "flow--calendar";
+var calendarHeader = "flow--calendar--calendar-header";
 var container = "flow--calendar--container";
 var presetMenu = "flow--calendar--preset-menu";
 var range = "flow--calendar--range";
 var Calendar_module_default = {
 	calendar,
+	calendarHeader,
 	container,
 	presetMenu,
 	range
 };
 //#endregion
-export { calendar, container, Calendar_module_default as default, presetMenu, range };
+export { calendar, calendarHeader, container, Calendar_module_default as default, presetMenu, range };
 //# sourceMappingURL=Calendar.module.mjs.map

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

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

package/dist/js/packages/components/src/components/Calendar/components/CalendarHeader/CalendarHeader.mjs CHANGED Viewed

@@ -3,25 +3,29 @@
 import { IconChevronLeft } from "../../../Icon/components/icons/IconChevronLeft.mjs";
 import { IconChevronRight } from "../../../Icon/components/icons/IconChevronRight.mjs";
 import { Button } from "../../../Button/Button.mjs";
+import Calendar_module_default from "../../Calendar.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx
 var CalendarHeader = () => {
-	return /* @__PURE__ */ jsxs("header", { children: [
-		/* @__PURE__ */ jsx(Button, {
-			ariaSlot: "previous",
-			variant: "plain",
-			color: "secondary",
-			children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-		}),
-		/* @__PURE__ */ jsx(Aria.Heading, {}),
-		/* @__PURE__ */ jsx(Button, {
-			ariaSlot: "next",
-			variant: "plain",
-			color: "secondary",
-			children: /* @__PURE__ */ jsx(IconChevronRight, {})
-		})
-	] });
+	return /* @__PURE__ */ jsxs("header", {
+		className: Calendar_module_default.calendarHeader,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				ariaSlot: "previous",
+				variant: "plain",
+				color: "secondary",
+				children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+			}),
+			/* @__PURE__ */ jsx(Aria.Heading, {}),
+			/* @__PURE__ */ jsx(Button, {
+				ariaSlot: "next",
+				variant: "plain",
+				color: "secondary",
+				children: /* @__PURE__ */ jsx(IconChevronRight, {})
+			})
+		]
+	});
 };
 //#endregion
 export { CalendarHeader, CalendarHeader as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n IconChevronLeft,\n IconChevronRight,\n} from \"@/components/Icon/components/icons\";\n\nexport const CalendarHeader: FC = () => {\n return (\n <header>\n <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n <IconChevronLeft />\n </Button>\n <Aria.Heading />\n <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n <IconChevronRight />\n </Button>\n </header>\n );\n};\n\nexport default CalendarHeader;\n"],"mappings":"~~;;;;;;;;AAQA~~,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD,~~EAAA~~,UAAA;~~EACE~~,oBAAC,QAAD;~~GAAQ~~,UAAS;~~GAAW~~,SAAQ;~~GAAQ~~,OAAM;~~GAChD~~,UAAA,oBAAC,iBAAD,CAAkB,CAAA;~~EACZ~~,CAAA;~~EACR~~,oBAAC,KAAK,SAAN,CAAe,CAAA;~~EACf~~,oBAAC,QAAD;~~GAAQ~~,UAAS;~~GAAO~~,SAAQ;~~GAAQ~~,OAAM;~~GAC5C~~,UAAA,oBAAC,kBAAD,CAAmB,CAAA;~~EACb~~,CAAA;~~CACF,EAAA,CAAA;~~AAEZ"}
1	+ {"version":3,"file":"CalendarHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Calendar/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport * as Aria from \"react-aria-components\";\nimport {\n IconChevronLeft,\n IconChevronRight,\n} from \"@/components/Icon/components/icons\";\nimport styles from \"../../Calendar.module.scss\";\n\nexport const CalendarHeader: FC = () => {\n return (\n <header className={styles.calendarHeader}>\n <Button ariaSlot=\"previous\" variant=\"plain\" color=\"secondary\">\n <IconChevronLeft />\n </Button>\n <Aria.Heading />\n <Button ariaSlot=\"next\" variant=\"plain\" color=\"secondary\">\n <IconChevronRight />\n </Button>\n </header>\n );\n};\n\nexport default CalendarHeader;\n"],"mappings":";;;;;;;;;AASA,IAAa,uBAA2B;CACtC,OACE,qBAAC,UAAD;EAAQ,WAAW,wBAAO;EAA1B,UAAA;GACE,oBAAC,QAAD;IAAQ,UAAS;IAAW,SAAQ;IAAQ,OAAM;IAChD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GACZ,CAAA;GACR,oBAAC,KAAK,SAAN,CAAe,CAAA;GACf,oBAAC,QAAD;IAAQ,UAAS;IAAO,SAAQ;IAAQ,OAAM;IAC5C,UAAA,oBAAC,kBAAD,CAAmB,CAAA;GACb,CAAA;EACF;;AAEZ"}

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

@@ -15,7 +15,7 @@ import { TypedChartLegend } from "./components/ChartLegend/ChartLegend.mjs";
 import { TypedChartTooltip } from "./components/ChartTooltip/types.mjs";
 import { TypedLine } from "./components/Line/Line.mjs";
 import clsx from "clsx";
-import { isValidElement, useMemo } from "react";
+import { isValidElement, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ComposedChart, ResponsiveContainer } from "recharts";
 //#region src/components/CartesianChart/CartesianChart.tsx
@@ -32,7 +32,11 @@ var CartesianChart = (props) => {
 		if (!emptyView) return;
 		return null;
 	}, [emptyView]);
-	const contextValue = useMemo(() => ({ layout }), [layout]);
+	const chartId = useId().replaceAll(/[^\w-]/g, "");
+	const contextValue = useMemo(() => ({
+		layout,
+		stackIdPrefix: `${chartId}-`
+	}), [layout, chartId]);
 	return /* @__PURE__ */ jsx(CartesianChartContextProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Wrap, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n CartesianChartLayout,\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n /* The data points rendered by the chart. /\n data?: TData[];\n\n /* The height of the chart. /\n height?: string;\n\n /\n The orientation of the axes and graphical items. `\"horizontal\"` puts the\n * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n * on their own; only the `dataKey` moves to whichever axis is the categorical\n * one.\n \n @default \"horizontal\"\n /\n layout?: CartesianChartLayout;\n\n /* View that is provided when data is empty/undefined /\n emptyView?: ReactNode;\n\n /\n Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n /\n flexGrow?: boolean;\n}\n\n/* @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const {\n children,\n data,\n className,\n height,\n flexGrow,\n emptyView,\n layout = \"horizontal\",\n ...rest\n } = props;\n const warnDeprecation = useWarnDeprecation();\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n showEmptyView && styles.emptyView,\n className,\n );\n const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n if (usesDeprecatedEmptyView) {\n warnDeprecation(\n \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n );\n }\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n return null;\n }, [emptyView]);\n\n const contextValue = useMemo(() => ({ layout }), ~~[layout~~]);\n\n return (\n <CartesianChartContextProvider value={contextValue}>\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart\n data={data}\n className={rootClassName}\n layout={layout}\n {...rest}\n >\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {emptyElement}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n </CartesianChartContextProvider>\n );\n};\n\nexport const typedCartesianChart = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n TData extends ChartDataValue<any> = ChartDataValue<any>,\n XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n Bar: TypedBar<TData>(),\n XAxis: TypedXAxis<TData, XAxisDataKey>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;~~AAuEA~~,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,~~eAAe~~,eAAe,EAAE,~~OAAO~~,~~IAAI~~,CAAC,~~MAAM~~,~~CAAC~~;~~CAEzD~~,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
1	+ {"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useId,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n CartesianChartLayout,\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n /* The data points rendered by the chart. /\n data?: TData[];\n\n /* The height of the chart. /\n height?: string;\n\n /\n The orientation of the axes and graphical items. `\"horizontal\"` puts the\n * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n * on their own; only the `dataKey` moves to whichever axis is the categorical\n * one.\n \n @default \"horizontal\"\n /\n layout?: CartesianChartLayout;\n\n /* View that is provided when data is empty/undefined /\n emptyView?: ReactNode;\n\n /\n Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n /\n flexGrow?: boolean;\n}\n\n/* @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const {\n children,\n data,\n className,\n height,\n flexGrow,\n emptyView,\n layout = \"horizontal\",\n ...rest\n } = props;\n const warnDeprecation = useWarnDeprecation();\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n showEmptyView && styles.emptyView,\n className,\n );\n const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n if (usesDeprecatedEmptyView) {\n warnDeprecation(\n \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n );\n }\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n return null;\n }, [emptyView]);\n\n const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n const contextValue = useMemo(\n () => ({ layout, stackIdPrefix: `${chartId}-` }),\n [layout, chartId],\n );\n\n return (\n <CartesianChartContextProvider value={contextValue}>\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart\n data={data}\n className={rootClassName}\n layout={layout}\n {...rest}\n >\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {emptyElement}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n </CartesianChartContextProvider>\n );\n};\n\nexport const typedCartesianChart = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n TData extends ChartDataValue<any> = ChartDataValue<any>,\n XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n Bar: TypedBar<TData>(),\n XAxis: TypedXAxis<TData, XAxisDataKey>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAEA,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":[".cartesianChart {\n font-family: Inter, sans-serif;\n isolation: isolate;\n\n *:focus:not(:focus-visible) {\n outline: none !important;\n }\n\n ~~:global(~~.~~flow--illustrated-message--illustrated-message-container) {\n container-type: normal;\n display: flex;\n height: 100%;\n justify-content: center;\n align-items: center;\n }\n\n .~~emptyViewContainer {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n &.emptyView {\n :global(.recharts-cartesian-grid) {\n display: none;\n }\n }\n\n svg {\n overflow: visible;\n }\n\n :global(.recharts-tooltip-wrapper) {\n z-index: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":[".cartesianChart {\n font-family: Inter, sans-serif;\n isolation: isolate;\n\n *:focus:not(:focus-visible) {\n outline: none !important;\n }\n\n .emptyViewContainer {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n &.emptyView {\n :global(.recharts-cartesian-grid) {\n display: none;\n }\n }\n\n // recharts renders every svg here; only its outermost surface is classed.\n // stylelint-disable-next-line selector-max-type -- third-party svgs\n svg {\n overflow: visible;\n }\n\n :global(.recharts-tooltip-wrapper) {\n z-index: 1;\n }\n}\n"],"mappings":""}

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

@@ -4,14 +4,16 @@ import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.m
 import { AreaDot } from "../AreaDot/AreaDot.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import { isDataKeyWithLabel } from "../../types.mjs";
+import { useScopedStackId } from "../../hooks/useScopedStackId.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
 //#region src/components/CartesianChart/components/Area/Area.tsx
 /** @flr-generate all */
 var Area = (props) => {
-	const { color: colorFromProps = "sea-green", stackId = 1, fillOpacity = 1, ...rest } = props;
+	const { color: colorFromProps = "sea-green", stackId: stackIdFromProps = 1, fillOpacity = 1, ...rest } = props;
 	const tokens = useDesignTokens();
+	const stackId = useScopedStackId(stackIdFromProps);
 	const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
 	return /* @__PURE__ */ jsx(Recharts.Area, {
 		name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Area.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n type ChartDataValue,\n type DataKeyProp,\n type DataKeyWithLabel,\n isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype AreaBaseProps = Pick<\n Recharts.AreaProps,\n \| \"className\"\n \| \"stackId\"\n \| \"fillOpacity\"\n \| \"key\"\n \| \"xAxisId\"\n \| \"yAxisId\"\n \| \"type\"\n \| \"unit\"\n> & {\n /** The color of the area. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n};\n\nexport interface AreaPropsByDataKeyProp<\n TData extends ChartDataValue = ChartDataValue,\n> extends AreaBaseProps {\n dataKey: DataKeyProp<TData>;\n}\n\nexport interface AreaPropsByDataKey<\n TData extends ChartDataValue = ChartDataValue,\n>\n extends AreaBaseProps, DataKeyWithLabel<TData> {}\n\nexport type AreaProps<TData extends ChartDataValue = ChartDataValue> =\n AreaPropsByDataKey<TData> \| AreaPropsByDataKeyProp<TData>;\n\n/* @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const {\n color: colorFromProps = \"sea-green\",\n stackId = 1,\n fillOpacity = 1,\n ...rest\n } = props;\n\n const tokens = useDesignTokens();\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Area\n name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n stackId={stackId}\n fillOpacity={fillOpacity}\n {...rest}\n activeDot={<AreaDot color={color} />}\n fill={color}\n stroke={tokens.area[\"border-color\"].value}\n strokeWidth={tokens.area[\"border-width\"].value}\n />\n );\n};\n\nexport const TypedArea = <TData extends ChartDataValue = ChartDataValue>() =>\n Area as ComponentType<AreaPropsByDataKeyProp<TData>>;\n\nexport default Area;\n"],"mappings":"~~;;;;;;;;;;;AA2CA~~,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,OAAO,iBAAiB,aACxB,~~UAAU~~,~~GACV~~,cAAc,GACd,GAAG,SACD;CAEJ,MAAM,SAAS,gBAAgB;~~CAE~~/B,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EACpD;EACI;EACb,GAAI;EACJ,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,MAAM;EACN,QAAQ,OAAO,KAAK,eAAe,CAAC;EACpC,aAAa,OAAO,KAAK,eAAe,CAAC;CAC1C,CAAA;AAEL;AAEA,IAAa,kBACX"}
1	+ {"version":3,"file":"Area.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n type ChartDataValue,\n type DataKeyProp,\n type DataKeyWithLabel,\n isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useScopedStackId } from \"@/components/CartesianChart/hooks/useScopedStackId\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype AreaBaseProps = Pick<\n Recharts.AreaProps,\n \| \"className\"\n \| \"stackId\"\n \| \"fillOpacity\"\n \| \"key\"\n \| \"xAxisId\"\n \| \"yAxisId\"\n \| \"type\"\n \| \"unit\"\n> & {\n /** The color of the area. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n};\n\nexport interface AreaPropsByDataKeyProp<\n TData extends ChartDataValue = ChartDataValue,\n> extends AreaBaseProps {\n dataKey: DataKeyProp<TData>;\n}\n\nexport interface AreaPropsByDataKey<\n TData extends ChartDataValue = ChartDataValue,\n>\n extends AreaBaseProps, DataKeyWithLabel<TData> {}\n\nexport type AreaProps<TData extends ChartDataValue = ChartDataValue> =\n AreaPropsByDataKey<TData> \| AreaPropsByDataKeyProp<TData>;\n\n/* @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const {\n color: colorFromProps = \"sea-green\",\n stackId: stackIdFromProps = 1,\n fillOpacity = 1,\n ...rest\n } = props;\n\n const tokens = useDesignTokens();\n const stackId = useScopedStackId(stackIdFromProps);\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Area\n name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n stackId={stackId}\n fillOpacity={fillOpacity}\n {...rest}\n activeDot={<AreaDot color={color} />}\n fill={color}\n stroke={tokens.area[\"border-color\"].value}\n strokeWidth={tokens.area[\"border-width\"].value}\n />\n );\n};\n\nexport const TypedArea = <TData extends ChartDataValue = ChartDataValue>() =>\n Area as ComponentType<AreaPropsByDataKeyProp<TData>>;\n\nexport default Area;\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,OAAO,iBAAiB,aACxB,SAAS,mBAAmB,GAC5B,cAAc,GACd,GAAG,SACD;CAEJ,MAAM,SAAS,gBAAgB;CAC/B,MAAM,UAAU,iBAAiB,gBAAgB;CAEjD,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EACpD;EACI;EACb,GAAI;EACJ,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,MAAM;EACN,QAAQ,OAAO,KAAK,eAAe,CAAC;EACpC,aAAa,OAAO,KAAK,eAAe,CAAC;CAC1C,CAAA;AAEL;AAEA,IAAa,kBACX"}

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

@@ -4,6 +4,7 @@ import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.m
 import { useCartesianChartContext } from "../../context.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import { isDataKeyWithLabel } from "../../types.mjs";
+import { useScopedStackId } from "../../hooks/useScopedStackId.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -13,9 +14,10 @@ var Bar = (props) => {
 	const { color: colorFromProps = "sea-green", ...rest } = props;
 	const tokens = useDesignTokens();
 	const { layout } = useCartesianChartContext();
+	const stackId = useScopedStackId(props.stackId);
 	const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
 	const cornerRadius = parseInt(tokens.bar["corner-radius"].value);
-	const radius = props.stackId !== void 0 ? 0 : layout === "vertical" ? [
+	const radius = layout === "vertical" ? [
 		0,
 		cornerRadius,
 		cornerRadius,
@@ -26,11 +28,18 @@ var Bar = (props) => {
 		0,
 		0
 	];
-	return /* @__PURE__ */ jsx(Recharts.Bar, {
+	const bar = /* @__PURE__ */ jsx(Recharts.Bar, {
 		name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,
 		...rest,
+		stackId,
 		fill: color,
-		radius
+		radius: stackId === void 0 ? radius : 0
+	});
+	if (stackId === void 0) return bar;
+	return /* @__PURE__ */ jsx(Recharts.BarStack, {
+		stackId,
+		radius,
+		children: bar
 	});
 };
 var TypedBar = () => Bar;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Bar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Bar/Bar.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n type ChartDataValue,\n type DataKeyProp,\n type DataKeyWithLabel,\n isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype BarBaseProps = Pick<\n Recharts.BarProps,\n \| \"className\"\n \| \"stackId\"\n \| \"key\"\n \| \"xAxisId\"\n \| \"yAxisId\"\n \| \"unit\"\n \| \"barSize\"\n \| \"maxBarSize\"\n \| \"minPointSize\"\n> & {\n /** The color of the bar. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n};\n\nexport interface BarPropsByDataKeyProp<\n TData extends ChartDataValue = ChartDataValue,\n> extends BarBaseProps {\n dataKey: DataKeyProp<TData>;\n}\n\nexport interface BarPropsByDataKey<\n TData extends ChartDataValue = ChartDataValue,\n>\n extends BarBaseProps, DataKeyWithLabel<TData> {}\n\nexport type BarProps<TData extends ChartDataValue = ChartDataValue> =\n BarPropsByDataKey<TData> \| BarPropsByDataKeyProp<TData>;\n\n/* @flr-generate all */\nexport const Bar: FC<BarProps> = (props) => {\n const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n const tokens = useDesignTokens();\n const { layout } = useCartesianChartContext();\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n const cornerRadius = parseInt(tokens.bar[\"corner-radius\"].value);\n const radius: Recharts.BarProps[\"radius\"] =\n ~~props.stackId !== undefined\n ? 0\n :~~ layout === \"vertical\"\n ? [0, cornerRadius, cornerRadius, 0]\n : [cornerRadius, cornerRadius, 0, 0];\n\n ~~return~~ (\n <Recharts.Bar\n name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n {...rest}\n fill={color}\n radius={radius}\n />\n );\n};\n\nexport const TypedBar = <TData extends ChartDataValue = ChartDataValue>() =>\n Bar as ComponentType<BarPropsByDataKeyProp<TData>>;\n\nexport default Bar;\n"],"mappings":"~~;;;;;;;;;;;AA4CA~~,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;~~CAE5C~~,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,MAAM,eAAe,SAAS,OAAO,IAAI,gBAAgB,CAAC,KAAK;CAC/D,MAAM,SACJ,~~MAAM,YAAY,KAAA,IACd,IACA,~~WAAW,~~aACT~~;EAAC;EAAG;EAAc;EAAc;CAAC,IACjC;EAAC;EAAc;EAAc;EAAG;CAAC;~~CAEzC~~,~~OACE~~,oBAAC,SAAS,KAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EAC7D,GAAI;~~EACJ~~,MAAM;~~EACE~~;~~CACT~~,CAAA;~~AAEL~~;AAEA,IAAa,iBACX"}
1	+ {"version":3,"file":"Bar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Bar/Bar.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n type ChartDataValue,\n type DataKeyProp,\n type DataKeyWithLabel,\n isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useScopedStackId } from \"@/components/CartesianChart/hooks/useScopedStackId\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype BarBaseProps = Pick<\n Recharts.BarProps,\n \| \"className\"\n \| \"stackId\"\n \| \"key\"\n \| \"xAxisId\"\n \| \"yAxisId\"\n \| \"unit\"\n \| \"barSize\"\n \| \"maxBarSize\"\n \| \"minPointSize\"\n> & {\n /** The color of the bar. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n};\n\nexport interface BarPropsByDataKeyProp<\n TData extends ChartDataValue = ChartDataValue,\n> extends BarBaseProps {\n dataKey: DataKeyProp<TData>;\n}\n\nexport interface BarPropsByDataKey<\n TData extends ChartDataValue = ChartDataValue,\n>\n extends BarBaseProps, DataKeyWithLabel<TData> {}\n\nexport type BarProps<TData extends ChartDataValue = ChartDataValue> =\n BarPropsByDataKey<TData> \| BarPropsByDataKeyProp<TData>;\n\n/* @flr-generate all */\nexport const Bar: FC<BarProps> = (props) => {\n const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n const tokens = useDesignTokens();\n const { layout } = useCartesianChartContext();\n const stackId = useScopedStackId(props.stackId);\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n const cornerRadius = parseInt(tokens.bar[\"corner-radius\"].value);\n const radius: Recharts.BarProps[\"radius\"] =\n layout === \"vertical\"\n ? [0, cornerRadius, cornerRadius, 0]\n : [cornerRadius, cornerRadius, 0, 0];\n\n const bar = (\n <Recharts.Bar\n name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n {...rest}\n stackId={stackId}\n fill={color}\n radius={stackId === undefined ? radius : 0}\n />\n );\n\n if (stackId === undefined) {\n return bar;\n }\n\n // Every Bar of a stack renders its own BarStack, because a Bar cannot know\n // its siblings — they all describe the same clip path, so the duplicates are\n // redundant rather than conflicting.\n return (\n <Recharts.BarStack stackId={stackId} radius={radius}>\n {bar}\n </Recharts.BarStack>\n );\n};\n\nexport const TypedBar = <TData extends ChartDataValue = ChartDataValue>() =>\n Bar as ComponentType<BarPropsByDataKeyProp<TData>>;\n\nexport default Bar;\n"],"mappings":";;;;;;;;;;;;AA6CA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,UAAU,iBAAiB,MAAM,OAAO;CAE9C,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,MAAM,eAAe,SAAS,OAAO,IAAI,gBAAgB,CAAC,KAAK;CAC/D,MAAM,SACJ,WAAW,aACP;EAAC;EAAG;EAAc;EAAc;CAAC,IACjC;EAAC;EAAc;EAAc;EAAG;CAAC;CAEvC,MAAM,MACJ,oBAAC,SAAS,KAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EAC7D,GAAI;EACK;EACT,MAAM;EACN,QAAQ,YAAY,KAAA,IAAY,SAAS;CAC1C,CAAA;CAGH,IAAI,YAAY,KAAA,GACd,OAAO;CAMT,OACE,oBAAC,SAAS,UAAV;EAA4B;EAAiB;EAC1C,UAAA;CACgB,CAAA;AAEvB;AAEA,IAAa,iBACX"}

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

@@ -2,7 +2,10 @@
 /* */
 import { createContext, useContext } from "react";
 //#region src/components/CartesianChart/context.ts
-var cartesianChartContext = createContext({ layout: "horizontal" });
+var cartesianChartContext = createContext({
+	layout: "horizontal",
+	stackIdPrefix: ""
+});
 var useCartesianChartContext = () => useContext(cartesianChartContext);
 var CartesianChartContextProvider = cartesianChartContext.Provider;
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CartesianChartLayout } from \"@/components/CartesianChart/types\";\n\ninterface CartesianChartContext {\n layout: CartesianChartLayout;\n}\n\nconst cartesianChartContext = createContext<CartesianChartContext>({\n layout: \"horizontal\",\n});\n\nexport const useCartesianChartContext = (): CartesianChartContext =>\n useContext(cartesianChartContext);\n\nexport const CartesianChartContextProvider = cartesianChartContext.Provider;\n"],"mappings":";;;;~~AAOA~~,IAAM,wBAAwB,cAAqC,~~EACjE,~~QAAQ,~~aACV~~,CAAC;AAED,IAAa,iCACX,WAAW,qBAAqB;AAElC,IAAa,gCAAgC,sBAAsB"}
1	+ {"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CartesianChartLayout } from \"@/components/CartesianChart/types\";\n\ninterface CartesianChartContext {\n layout: CartesianChartLayout;\n /*\n Prefix that scopes a stack ID to this chart. Recharts derives DOM IDs from\n * the stack ID, so two charts on one page sharing a stack ID would otherwise\n * share their clip paths.\n */\n stackIdPrefix: string;\n}\n\nconst cartesianChartContext = createContext<CartesianChartContext>({\n layout: \"horizontal\",\n stackIdPrefix: \"\",\n});\n\nexport const useCartesianChartContext = (): CartesianChartContext =>\n useContext(cartesianChartContext);\n\nexport const CartesianChartContextProvider = cartesianChartContext.Provider;\n"],"mappings":";;;;AAaA,IAAM,wBAAwB,cAAqC;CACjE,QAAQ;CACR,eAAe;AACjB,CAAC;AAED,IAAa,iCACX,WAAW,qBAAqB;AAElC,IAAa,gCAAgC,sBAAsB"}

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

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { useCartesianChartContext } from "../context.mjs";
+//#region src/components/CartesianChart/hooks/useScopedStackId.ts
+/**
+* Scopes a stack ID to the surrounding chart, so that charts on the same page
+* using the same stack ID do not share the DOM IDs Recharts derives from it.
+*/
+var useScopedStackId = (stackId) => {
+	const { stackIdPrefix } = useCartesianChartContext();
+	return stackId === void 0 ? void 0 : `${stackIdPrefix}${stackId}`;
+};
+//#endregion
+export { useScopedStackId };
+//# sourceMappingURL=useScopedStackId.mjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"useScopedStackId.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useScopedStackId.ts"],"sourcesContent":["import type { StackId } from \"recharts/types/util/ChartUtils\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\n\n/**\n * Scopes a stack ID to the surrounding chart, so that charts on the same page\n * using the same stack ID do not share the DOM IDs Recharts derives from it.\n */\nexport const useScopedStackId = (\n stackId: StackId | undefined,\n): string | undefined => {\n const { stackIdPrefix } = useCartesianChartContext();\n return stackId === undefined ? undefined : `${stackIdPrefix}${stackId}`;\n};\n"],"mappings":";;;;;;;;AAOA,IAAa,oBACX,YACuB;CACvB,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,OAAO,YAAY,KAAA,IAAY,KAAA,IAAY,GAAG,gBAAgB;AAChE"}

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

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

package/dist/js/packages/components/src/components/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":""}