@mittwald/flow-react-components 1.2.0-next.2 → 1.2.0-next.20

package/dist/js/_virtual/_10.locale.mjs

@@ -1,15 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e
+//#region \0.locale.json@51592c7dce2c58889664b6822f25f6d1
 var __locale_default = {
-	"de-DE": {
-		"showLess": "Weniger anzeigen",
-		"showMore": "Mehr anzeigen"
-	},
-	"en-US": {
-		"showLess": "Show less",
-		"showMore": "Show more"
-	}
+	"de-DE": { "copy": "Kopieren" },
+	"en-US": { "copy": "Copy" }
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_11.locale.mjs

@@ -1,9 +1,15 @@
 "use client"
 /* */
-//#region \0.locale.json@51dcf4944c990e2cbe26472300dae78d
+//#region \0.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e
 var __locale_default = {
-	"de-DE": { "showOptions": "Auswahlmöglichkeiten anzeigen" },
-	"en-US": { "showOptions": "Show options" }
+	"de-DE": {
+		"showLess": "Weniger anzeigen",
+		"showMore": "Mehr anzeigen"
+	},
+	"en-US": {
+		"showLess": "Show less",
+		"showMore": "Show more"
+	}
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_12.locale.mjs

@@ -1,15 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@df0c8534e2e4f7c6c3d4365218df7347
+//#region \0.locale.json@51dcf4944c990e2cbe26472300dae78d
 var __locale_default = {
-	"de-DE": {
-		"moreInformation": "Weitere Informationen",
-		"moreInformationAbout": "Weitere Informationen zu {subject}"
-	},
-	"en-US": {
-		"moreInformation": "More information",
-		"moreInformationAbout": "More information about {subject}"
-	}
+	"de-DE": { "showOptions": "Auswahlmöglichkeiten anzeigen" },
+	"en-US": { "showOptions": "Show options" }
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_4.locale.mjs

@@ -1,9 +1,15 @@
 "use client"
 /* */
-//#region \0.locale.json@24d7079ce80a619bbdda6dfcc8289f94
+//#region \0.locale.json@df0c8534e2e4f7c6c3d4365218df7347
 var __locale_default = {
-	"de-DE": { "remove": "Entfernen" },
-	"en-US": { "remove": "Remove" }
+	"de-DE": {
+		"moreInformation": "Weitere Informationen",
+		"moreInformationAbout": "Weitere Informationen zu {subject}"
+	},
+	"en-US": {
+		"moreInformation": "More information",
+		"moreInformationAbout": "More information about {subject}"
+	}
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_5.locale.mjs

@@ -1,27 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@aaaa2422dd023a875e13abc0d3d178ce
+//#region \0.locale.json@24d7079ce80a619bbdda6dfcc8289f94
 var __locale_default = {
-	"de-DE": {
-		"preset.lastMonth": "Letzten Monat",
-		"preset.lastWeek": "Letzte Woche",
-		"preset.lastYear": "Letztes Jahr",
-		"preset.thisMonth": "Diesen Monat",
-		"preset.thisWeek": "Diese Woche",
-		"preset.thisYear": "Dieses Jahr",
-		"preset.today": "Heute",
-		"preset.yesterday": "Gestern"
-	},
-	"en-US": {
-		"preset.lastMonth": "Last month",
-		"preset.lastWeek": "Last week",
-		"preset.lastYear": "Last year",
-		"preset.thisMonth": "This month",
-		"preset.thisWeek": "This week",
-		"preset.thisYear": "This year",
-		"preset.today": "Today",
-		"preset.yesterday": "Yesterday"
-	}
+	"de-DE": { "remove": "Entfernen" },
+	"en-US": { "remove": "Remove" }
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_6.locale.mjs

@@ -1,9 +1,27 @@
 "use client"
 /* */
-//#region \0.locale.json@162914df08c90e5e10d2f78b03d9d768
+//#region \0.locale.json@aaaa2422dd023a875e13abc0d3d178ce
 var __locale_default = {
-	"de-DE": { "progressBar.of": "von" },
-	"en-US": { "progressBar.of": "of" }
+	"de-DE": {
+		"preset.lastMonth": "Letzten Monat",
+		"preset.lastWeek": "Letzte Woche",
+		"preset.lastYear": "Letztes Jahr",
+		"preset.thisMonth": "Diesen Monat",
+		"preset.thisWeek": "Diese Woche",
+		"preset.thisYear": "Dieses Jahr",
+		"preset.today": "Heute",
+		"preset.yesterday": "Gestern"
+	},
+	"en-US": {
+		"preset.lastMonth": "Last month",
+		"preset.lastWeek": "Last week",
+		"preset.lastYear": "Last year",
+		"preset.thisMonth": "This month",
+		"preset.thisWeek": "This week",
+		"preset.thisYear": "This year",
+		"preset.today": "Today",
+		"preset.yesterday": "Yesterday"
+	}
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_7.locale.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@3b9d9e153ad753f427f375d1275fbcad
+//#region \0.locale.json@162914df08c90e5e10d2f78b03d9d768
 var __locale_default = {
-	"de-DE": { "optional": "(optional)" },
-	"en-US": { "optional": "(optional)" }
+	"de-DE": { "progressBar.of": "von" },
+	"en-US": { "progressBar.of": "of" }
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_8.locale.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@774f50b2495c87d6d13911bcd596e720
+//#region \0.locale.json@3b9d9e153ad753f427f375d1275fbcad
 var __locale_default = {
-	"de-DE": { "tooltip.progressBar.total": "Gesamt" },
-	"en-US": { "tooltip.progressBar.total": "Total" }
+	"de-DE": { "optional": "(optional)" },
+	"en-US": { "optional": "(optional)" }
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/_virtual/_9.locale.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@51592c7dce2c58889664b6822f25f6d1
+//#region \0.locale.json@774f50b2495c87d6d13911bcd596e720
 var __locale_default = {
-	"de-DE": { "copy": "Kopieren" },
-	"en-US": { "copy": "Copy" }
+	"de-DE": { "tooltip.progressBar.total": "Gesamt" },
+	"en-US": { "tooltip.progressBar.total": "Total" }
 };
 //#endregion
 export { __locale_default as default };

package/dist/js/default.mjs

@@ -183,6 +183,10 @@ import { Popover } from "./packages/components/src/components/Popover/Popover.mj
 import { Autocomplete } from "./packages/components/src/components/Autocomplete/Autocomplete.mjs";
 import { Avatar } from "./packages/components/src/components/Avatar/Avatar.mjs";
 import { AvatarStack } from "./packages/components/src/components/AvatarStack/AvatarStack.mjs";
+import { DialogTrigger } from "./packages/components/src/components/OverlayTrigger/components/DialogTrigger/DialogTrigger.mjs";
+import { MenuTrigger } from "./packages/components/src/components/OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs";
+import { OverlayTrigger } from "./packages/components/src/components/OverlayTrigger/OverlayTrigger.mjs";
+import { ContextualHelpTrigger } from "./packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs";
 import { Badge } from "./packages/components/src/components/Badge/Badge.mjs";
 import { BigNumber } from "./packages/components/src/components/BigNumber/BigNumber.mjs";
 import { Breadcrumb } from "./packages/components/src/components/Breadcrumb/Breadcrumb.mjs";
@@ -195,6 +199,7 @@ import { isDateRangeValue } from "./packages/components/src/components/Calendar/
 import { Div } from "./packages/components/src/components/Div/Div.mjs";
 import { AreaDot } from "./packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs";
 import { Area, TypedArea } from "./packages/components/src/components/CartesianChart/components/Area/Area.mjs";
+import { Bar, TypedBar } from "./packages/components/src/components/CartesianChart/components/Bar/Bar.mjs";
 import { TypedXAxis } from "./packages/components/src/components/CartesianChart/components/XAxis/types.mjs";
 import { XAxis } from "./packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs";
 import { TypedYAxis } from "./packages/components/src/components/CartesianChart/components/YAxis/types.mjs";
@@ -233,13 +238,9 @@ import { ComponentDefaultsContext, ComponentDefaultsProvider, useComponentDefaul
 import { Content } from "./packages/components/src/components/Content/Content.mjs";
 import { ContextMenuContent } from "./packages/components/src/components/ContextMenu/components/ContextMenuContent/ContextMenuContent.mjs";
 import { ContextMenu } from "./packages/components/src/components/ContextMenu/ContextMenu.mjs";
-import { DialogTrigger } from "./packages/components/src/components/OverlayTrigger/components/DialogTrigger/DialogTrigger.mjs";
-import { MenuTrigger } from "./packages/components/src/components/OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs";
-import { OverlayTrigger } from "./packages/components/src/components/OverlayTrigger/OverlayTrigger.mjs";
 import { ContextMenuTrigger } from "./packages/components/src/components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs";
 import { ContextMenuSection } from "./packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs";
 import { ContextualHelp } from "./packages/components/src/components/ContextualHelp/ContextualHelp.mjs";
-import { ContextualHelpTrigger } from "./packages/components/src/components/ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs";
 import { CounterBadge } from "./packages/components/src/components/CounterBadge/CounterBadge.mjs";
 import { Option } from "./packages/components/src/components/Option/Option.mjs";
 import { CountryOptions } from "./packages/components/src/components/CountryOptions/CountryOptions.mjs";
@@ -334,4 +335,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, BigNumber, Breadcrumb, BrowserOnly, Button, CartesianChart, CartesianGrid, ChartGrid, ChartLegend, ChartTooltip, Chat, Checkbox, CheckboxButton, CheckboxGroup, ClearPropsContext, 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, 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, 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, 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, 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/packages/components/src/components/Badge/Badge.mjs

@@ -6,16 +6,23 @@ import { alphaColors, isAlphaColor } from "../../lib/types/props.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import Badge_module_default from "./Badge.module.mjs";
-import __locale_default from "../../../../../_virtual/_4.locale.mjs";
+import { ContextualHelpButton } from "./components/ContextualHelpButton/ContextualHelpButton.mjs";
+import __locale_default from "../../../../../_virtual/_5.locale.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 [...alphaColors];
+var contextualHelpTunnel = {
+	id: "contextualHelp",
+	component: "Badge"
+};
 /** @flr-generate all */
 var Badge = flowComponent("Badge", (props) => {
 	const { children, className, color = "neutral", ref, onPress, onClose, isDisabled, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Badge");
 	const rootClassName = clsx(Badge_module_default.badge, Badge_module_default[color], isDisabled && Badge_module_default.disabled, className);
+	const buttonColor = isAlphaColor(color) ? color : "dark";
 	const propsContext = {
 		Label: {
 			elementType: "span",
@@ -36,6 +43,14 @@ var Badge = flowComponent("Badge", (props) => {
 				elementType: "span",
 				className: Badge_module_default.value
 			}
+		},
+		ContextualHelp: {
+			tunnel: contextualHelpTunnel,
+			wrapWith: /* @__PURE__ */ jsx(ContextualHelpButton, {
+				className: Badge_module_default.action,
+				color: buttonColor,
+				isDisabled
+			})
 		}
 	};
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
@@ -56,10 +71,14 @@ var Badge = flowComponent("Badge", (props) => {
 					onPress,
 					children
 				}),
+				/* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: contextualHelpTunnel.id,
+					component: "Badge"
+				}),
 				onClose && /* @__PURE__ */ jsx(Button, {
 					className: Badge_module_default.close,
 					size: "s",
-					color: isAlphaColor(color) ? color : "dark",
+					color: buttonColor,
 					variant: "plain",
 					onPress: onClose,
 					isDisabled,

package/dist/js/packages/components/src/components/Badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  alphaColors,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\n\nexport const badgeColors = [\n  \"neutral\",\n  \"blue\",\n  \"navy\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"orange\",\n  \"red\",\n  ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** Handler that is called when the badge is pressed. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when the badges close icon is pressed. */\n  onClose?: (e: PressEvent) => void;\n  /** The color of the badge. @default \"neutral\" */\n  color?: BadgeColors;\n  /** Whether the badge is disabled. */\n  isDisabled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n  const {\n    children,\n    className,\n    color = \"neutral\",\n    ref,\n    onPress,\n    onClose,\n    isDisabled,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Badge\");\n\n  const rootClassName = clsx(\n    styles.badge,\n    styles[color],\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      elementType: \"span\",\n      className: styles.scope,\n      unstyled: true,\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.value,\n    },\n    Button: {\n      Label: {\n        elementType: \"span\",\n        className: styles.scope,\n        unstyled: true,\n      },\n      Text: {\n        elementType: \"span\",\n        className: styles.value,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName} {...rest} ref={ref}>\n        {!onPress && <div className={styles.content}>{children}</div>}\n        {onPress && (\n          <Button\n            isDisabled={isDisabled}\n            unstyled\n            className={styles.button}\n            onPress={onPress}\n          >\n            {children}\n          </Button>\n        )}\n\n        {onClose && (\n          <Button\n            className={styles.close}\n            size=\"s\"\n            color={isAlphaColor(color) ? color : \"dark\"}\n            variant=\"plain\"\n            onPress={onClose}\n            isDisabled={isDisabled}\n            aria-label={stringFormatter.format(\"remove\")}\n          >\n            <IconClose />\n          </Button>\n        )}\n      </div>\n    </PropsContextProvider>\n  );\n});\n\nexport default Badge;\n"],"mappings":";;;;;;;;;;;;AAiB2B,CAUzB,GAAG,WACL;;AAgBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,KACA,SACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CAEpE,MAAM,gBAAgB,KACpB,qBAAO,OACP,qBAAO,QACP,cAAc,qBAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,OAAO;GACL,aAAa;GACb,WAAW,qBAAO;GAClB,UAAU;EACZ;EACA,MAAM;GACJ,aAAa;GACb,WAAW,qBAAO;EACpB;EACA,QAAQ;GACN,OAAO;IACL,aAAa;IACb,WAAW,qBAAO;IAClB,UAAU;GACZ;GACA,MAAM;IACJ,aAAa;IACb,WAAW,qBAAO;GACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,GAAI;GAAW;GAA9C,UAAA;IACG,CAAC,WAAW,oBAAC,OAAD;KAAK,WAAW,qBAAO;KAAU;IAAc,CAAA;IAC3D,WACC,oBAAC,QAAD;KACc;KACZ,UAAA;KACA,WAAW,qBAAO;KACT;KAER;IACK,CAAA;IAGT,WACC,oBAAC,QAAD;KACE,WAAW,qBAAO;KAClB,MAAK;KACL,OAAO,aAAa,KAAK,IAAI,QAAQ;KACrC,SAAQ;KACR,SAAS;KACG;KACZ,cAAY,gBAAgB,OAAO,QAAQ;KAE3C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GAEP;;CACe,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  alphaColors,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { ContextualHelpButton } from \"@/components/Badge/components/ContextualHelpButton\";\nimport locales from \"./locales/*.locale.json\";\n\nexport const badgeColors = [\n  \"neutral\",\n  \"blue\",\n  \"navy\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"orange\",\n  \"red\",\n  ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** Handler that is called when the badge is pressed. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when the badges close icon is pressed. */\n  onClose?: (e: PressEvent) => void;\n  /** The color of the badge. @default \"neutral\" */\n  color?: BadgeColors;\n  /** Whether the badge is disabled. */\n  isDisabled?: boolean;\n}\n\nconst contextualHelpTunnel = {\n  id: \"contextualHelp\",\n  component: \"Badge\",\n} as const;\n\n/** @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n  const {\n    children,\n    className,\n    color = \"neutral\",\n    ref,\n    onPress,\n    onClose,\n    isDisabled,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Badge\");\n\n  const rootClassName = clsx(\n    styles.badge,\n    styles[color],\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const buttonColor = isAlphaColor(color) ? color : \"dark\";\n\n  const propsContext: PropsContext = {\n    Label: {\n      elementType: \"span\",\n      className: styles.scope,\n      unstyled: true,\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.value,\n    },\n    Button: {\n      Label: {\n        elementType: \"span\",\n        className: styles.scope,\n        unstyled: true,\n      },\n      Text: {\n        elementType: \"span\",\n        className: styles.value,\n      },\n    },\n    ContextualHelp: {\n      tunnel: contextualHelpTunnel,\n      wrapWith: (\n        <ContextualHelpButton\n          className={styles.action}\n          color={buttonColor}\n          isDisabled={isDisabled}\n        />\n      ),\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName} {...rest} ref={ref}>\n        {!onPress && <div className={styles.content}>{children}</div>}\n        {onPress && (\n          <Button\n            isDisabled={isDisabled}\n            unstyled\n            className={styles.button}\n            onPress={onPress}\n          >\n            {children}\n          </Button>\n        )}\n\n        <UiComponentTunnelExit id={contextualHelpTunnel.id} component=\"Badge\" />\n\n        {onClose && (\n          <Button\n            className={styles.close}\n            size=\"s\"\n            color={buttonColor}\n            variant=\"plain\"\n            onPress={onClose}\n            isDisabled={isDisabled}\n            aria-label={stringFormatter.format(\"remove\")}\n          >\n            <IconClose />\n          </Button>\n        )}\n      </div>\n    </PropsContextProvider>\n  );\n});\n\nexport default Badge;\n"],"mappings":";;;;;;;;;;;;;;AAmB2B,CAUzB,GAAG,WACL;AAeA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAGA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,KACA,SACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4B,kBAAS,OAAO;CAEpE,MAAM,gBAAgB,KACpB,qBAAO,OACP,qBAAO,QACP,cAAc,qBAAO,UACrB,SACF;CAEA,MAAM,cAAc,aAAa,KAAK,IAAI,QAAQ;CAElD,MAAM,eAA6B;EACjC,OAAO;GACL,aAAa;GACb,WAAW,qBAAO;GAClB,UAAU;EACZ;EACA,MAAM;GACJ,aAAa;GACb,WAAW,qBAAO;EACpB;EACA,QAAQ;GACN,OAAO;IACL,aAAa;IACb,WAAW,qBAAO;IAClB,UAAU;GACZ;GACA,MAAM;IACJ,aAAa;IACb,WAAW,qBAAO;GACpB;EACF;EACA,gBAAgB;GACd,QAAQ;GACR,UACE,oBAAC,sBAAD;IACE,WAAW,qBAAO;IAClB,OAAO;IACK;GACb,CAAA;EAEL;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,GAAI;GAAW;GAA9C,UAAA;IACG,CAAC,WAAW,oBAAC,OAAD;KAAK,WAAW,qBAAO;KAAU;IAAc,CAAA;IAC3D,WACC,oBAAC,QAAD;KACc;KACZ,UAAA;KACA,WAAW,qBAAO;KACT;KAER;IACK,CAAA;IAGV,oBAAC,uBAAD;KAAuB,IAAI,qBAAqB;KAAI,WAAU;IAAS,CAAA;IAEtE,WACC,oBAAC,QAAD;KACE,WAAW,qBAAO;KAClB,MAAK;KACL,OAAO;KACP,SAAQ;KACR,SAAS;KACG;KACZ,cAAY,gBAAgB,OAAO,QAAQ;KAE3C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GAEP;;CACe,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Badge/Badge.module.mjs

@@ -4,6 +4,7 @@
 var badge = "flow--badge";
 var content = "flow--badge--content";
 var button = "flow--badge--button";
+var action = "flow--badge--action";
 var close = "flow--badge--close";
 var scope = "flow--badge--scope";
 var value = "flow--badge--value";
@@ -23,6 +24,7 @@ var Badge_module_default = {
 	badge,
 	content,
 	button,
+	action,
 	close,
 	scope,
 	value,
@@ -42,6 +44,6 @@ var Badge_module_default = {
 	"light-static": "flow--badge--light-static"
 };
 //#endregion
-export { badge, blue, button, close, content, dark, Badge_module_default as default, disabled, green, light, lilac, navy, neutral, orange, red, scope, teal, value, violet };
+export { action, badge, blue, button, close, content, dark, Badge_module_default as default, disabled, green, light, lilac, navy, neutral, orange, red, scope, teal, value, violet };
 
 //# sourceMappingURL=Badge.module.mjs.map

package/dist/js/packages/components/src/components/Badge/Badge.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n  }\n\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n    margin-inline-start: calc(\n      (var(--badge-size) - var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .action,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close),\n  &:has(.action) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.action):has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close),\n    &:has(.action) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n\n    &:has(.action):has(.close) {\n      .button,\n      .content {\n        padding-inline-end: calc(var(--content-size) * 2);\n      }\n    }\n  }\n\n  .action,\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    margin-inline-start: calc(\n      (var(--content-size) + var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* The trailing button rounds off the badge */\n  .close,\n  &:not(:has(.close)) .action {\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n  }\n\n  &:has(.action):has(.close) {\n    .action {\n      margin-inline-start: calc(\n        (var(--content-size) * 2 + var(--badge--border-width)) * -1\n      );\n    }\n\n    .close {\n      margin-inline-start: 0;\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .action,\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .action,\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.mjs

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import ButtonView from "../../../../views/ButtonView.mjs";
+import ContextualHelpTriggerView from "../../../../views/ContextualHelpTriggerView.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.tsx
+/**
+* Supplies the trigger button for a contextual help placed in a badge, so the
+* consumer only writes the <ContextualHelp>. Icon and accessibility label come
+* from the trigger.
+*/
+var ContextualHelpButton = (props) => {
+	const { className, color, isDisabled, children } = props;
+	return /* @__PURE__ */ jsxs(ContextualHelpTriggerView, { children: [/* @__PURE__ */ jsx(ButtonView, {
+		className,
+		color,
+		variant: "plain",
+		size: "s",
+		isDisabled
+	}), children] });
+};
+//#endregion
+export { ContextualHelpButton, ContextualHelpButton as default };
+
+//# sourceMappingURL=ContextualHelpButton.mjs.map

package/dist/js/packages/components/src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextualHelpButton.mjs","names":[],"sources":["../../../../../../../../../src/components/Badge/components/ContextualHelpButton/ContextualHelpButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextualHelpTriggerView from \"@/views/ContextualHelpTriggerView\";\n\ninterface Props extends PropsWithChildren, PropsWithClassName {\n  color: AlphaColor;\n  isDisabled?: boolean;\n}\n\n/**\n * Supplies the trigger button for a contextual help placed in a badge, so the\n * consumer only writes the <ContextualHelp>. Icon and accessibility label come\n * from the trigger.\n */\nexport const ContextualHelpButton: FC<Props> = (props) => {\n  const { className, color, isDisabled, children } = props;\n\n  return (\n    <ContextualHelpTriggerView>\n      <ButtonView\n        className={className}\n        color={color}\n        variant=\"plain\"\n        size=\"s\"\n        isDisabled={isDisabled}\n      />\n      {children}\n    </ContextualHelpTriggerView>\n  );\n};\n\nexport default ContextualHelpButton;\n"],"mappings":";;;;;;;;;;;AAeA,IAAa,wBAAmC,UAAU;CACxD,MAAM,EAAE,WAAW,OAAO,YAAY,aAAa;CAEnD,OACE,qBAAC,2BAAD,EAAA,UAAA,CACE,oBAAC,YAAD;EACa;EACJ;EACP,SAAQ;EACR,MAAK;EACO;CACb,CAAA,GACA,QACwB,EAAA,CAAA;AAE/B"}

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../_virtual/_5.locale.mjs";
+import __locale_default from "../../../../../../../../_virtual/_6.locale.mjs";
 import { useContext, useMemo } from "react";
 import { RangeCalendarStateContext } from "react-aria-components";
 import invariant from "invariant";

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

@@ -5,7 +5,9 @@ import { Wrap } from "../Wrap/Wrap.mjs";
 import CartesianChart_module_default from "./CartesianChart.module.mjs";
 import { useChartClipRect } from "./hooks/useChartClipRect.mjs";
 import DivView from "../../views/DivView.mjs";
+import { CartesianChartContextProvider } from "./context.mjs";
 import { TypedArea } from "./components/Area/Area.mjs";
+import { TypedBar } from "./components/Bar/Bar.mjs";
 import { TypedXAxis } from "./components/XAxis/types.mjs";
 import { TypedYAxis } from "./components/YAxis/types.mjs";
 import { TypedChartGrid } from "./components/ChartGrid/ChartGrid.mjs";
@@ -19,7 +21,7 @@ import { ComposedChart, ResponsiveContainer } from "recharts";
 //#region src/components/CartesianChart/CartesianChart.tsx
 /** @flr-generate all */
 var CartesianChart = (props) => {
-	const { children, data, className, height, flexGrow, emptyView, ...rest } = props;
+	const { children, data, className, height, flexGrow, emptyView, layout = "horizontal", ...rest } = props;
 	const warnDeprecation = useWarnDeprecation();
 	const { viewDimensions, ref: containerRef } = useChartClipRect();
 	const showEmptyView = !!((!data || data.length === 0) && emptyView);
@@ -30,32 +32,37 @@ var CartesianChart = (props) => {
 		if (!emptyView) return;
 		return null;
 	}, [emptyView]);
-	return /* @__PURE__ */ jsx(Wrap, {
-		if: height,
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				height,
-				flex: flexGrow ? 1 : void 0
-			},
-			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
-				initialDimension: {
-					width: 1,
-					height: 1
+	const contextValue = useMemo(() => ({ layout }), [layout]);
+	return /* @__PURE__ */ jsx(CartesianChartContextProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Wrap, {
+			if: height,
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					height,
+					flex: flexGrow ? 1 : void 0
 				},
-				width: height ? void 0 : "100%",
-				aspect: height ? void 0 : 3,
-				ref: containerRef,
-				children: /* @__PURE__ */ jsxs(ComposedChart, {
-					data,
-					className: rootClassName,
-					...rest,
-					children: [children, showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", {
-						...viewDimensions,
-						children: /* @__PURE__ */ jsx(DivView, {
-							className: CartesianChart_module_default.emptyViewContainer,
-							children: emptyElement
-						})
-					})]
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					initialDimension: {
+						width: 1,
+						height: 1
+					},
+					width: height ? void 0 : "100%",
+					aspect: height ? void 0 : 3,
+					ref: containerRef,
+					children: /* @__PURE__ */ jsxs(ComposedChart, {
+						data,
+						className: rootClassName,
+						layout,
+						...rest,
+						children: [children, showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", {
+							...viewDimensions,
+							children: /* @__PURE__ */ jsx(DivView, {
+								className: CartesianChart_module_default.emptyViewContainer,
+								children: emptyElement
+							})
+						})]
+					})
 				})
 			})
 		})
@@ -64,6 +71,7 @@ var CartesianChart = (props) => {
 var typedCartesianChart = () => ({
 	Chart: CartesianChart,
 	Area: TypedArea(),
+	Bar: TypedBar(),
 	XAxis: TypedXAxis(),
 	YAxis: TypedYAxis(),
 	Grid: TypedChartGrid(),

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

@@ -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  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\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  /** 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 { children, data, className, height, flexGrow, emptyView, ...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  return (\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 data={data} className={rootClassName} {...rest}>\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  );\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  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":";;;;;;;;;;;;;;;;;;;;AAyDA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,UAAU,MAAM,WAAW,QAAQ,UAAU,WAAW,GAAG,SACjE;CACF,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,OACE,oBAAC,MAAD;EAAM,IAAI;EACR,UAAA,oBAAC,OAAD;GAAK,OAAO;IAAE;IAAQ,MAAM,WAAW,IAAI,KAAA;GAAU;GACnD,UAAA,oBAAC,qBAAD;IACE,kBAAkB;KAEhB,OAAO;KACP,QAAQ;IACV;IACA,OAAO,SAAS,KAAA,IAAY;IAC5B,QAAQ,SAAS,KAAA,IAAY;IAC7B,KAAK;IAEL,UAAA,qBAAC,eAAD;KAAqB;KAAM,WAAW;KAAe,GAAI;KAAzD,UAAA,CACG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;MAAe,GAAI;MACjB,UAAA,oBAAC,SAAD;OAAS,WAAW,8BAAO;OACxB,UAAA;MACM,CAAA;KACI,CAAA,CAEJ;;GACI,CAAA;EAClB,CAAA;CACD,CAAA;AAEV;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
+{"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"}

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

@@ -0,0 +1,40 @@
+"use client"
+/* */
+import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
+import { useCartesianChartContext } from "../../context.mjs";
+import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
+import { isDataKeyWithLabel } from "../../types.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import * as Recharts from "recharts";
+//#region src/components/CartesianChart/components/Bar/Bar.tsx
+/** @flr-generate all */
+var Bar = (props) => {
+	const { color: colorFromProps = "sea-green", ...rest } = props;
+	const tokens = useDesignTokens();
+	const { layout } = useCartesianChartContext();
+	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" ? [
+		0,
+		cornerRadius,
+		cornerRadius,
+		0
+	] : [
+		cornerRadius,
+		cornerRadius,
+		0,
+		0
+	];
+	return /* @__PURE__ */ jsx(Recharts.Bar, {
+		name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,
+		...rest,
+		fill: color,
+		radius
+	});
+};
+var TypedBar = () => Bar;
+//#endregion
+export { Bar, Bar as default, TypedBar };
+
+//# sourceMappingURL=Bar.mjs.map

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

@@ -0,0 +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"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { ProgressBar } from "../../../ProgressBar/ProgressBar.mjs";
 import { Label } from "../../../Label/Label.mjs";
-import __locale_default from "../../../../../../../_virtual/_8.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_9.locale.mjs";
 import ChartTooltip_module_default from "./ChartTooltip.module.mjs";
 import { jsx } from "react/jsx-runtime";
 import { usePromise } from "@mittwald/react-use-promise";