@mittwald/flow-react-components 1.2.0-next.4 → 1.2.0-next.40

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

@@ -144,7 +144,6 @@ import { IconSuccess } from "./packages/components/src/components/Icon/component
 import { IconUnavailable } from "./packages/components/src/components/Icon/components/icons/IconUnavailable.mjs";
 import { IconWarning } from "./packages/components/src/components/Icon/components/icons/IconWarning.mjs";
 import { Wrap } from "./packages/components/src/components/Wrap/Wrap.mjs";
-import { Text } from "./packages/components/src/components/Text/Text.mjs";
 import { themeHtmlAttribute } from "./packages/components/src/lib/theming/lib/keys.mjs";
 import { ThemedHtml } from "./packages/components/src/lib/theming/components/ThemedHtml.mjs";
 import { getTheme } from "./packages/components/src/lib/theming/lib/getTheme.mjs";
@@ -174,15 +173,21 @@ import { ActionBatch } from "./packages/components/src/components/Action/ActionB
 import { ActionGroup } from "./packages/components/src/components/ActionGroup/ActionGroup.mjs";
 import { AlertIcon } from "./packages/components/src/components/AlertIcon/AlertIcon.mjs";
 import { Alert } from "./packages/components/src/components/Alert/Alert.mjs";
+import { Text } from "./packages/components/src/components/Text/Text.mjs";
 import { AlertBadge } from "./packages/components/src/components/AlertBadge/AlertBadge.mjs";
 import { AlertText } from "./packages/components/src/components/AlertText/AlertText.mjs";
 import { Combine } from "./packages/components/src/components/Combine/Combine.mjs";
 import { Align } from "./packages/components/src/components/Align/Align.mjs";
+import { Option } from "./packages/components/src/components/Option/Option.mjs";
 import { PopoverContent } from "./packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs";
 import { Popover } from "./packages/components/src/components/Popover/Popover.mjs";
 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 +200,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,15 +239,10 @@ 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";
 import { sortByDachFirst } from "./packages/components/src/components/CountryOptions/lib/sortBy.mjs";
 import { DatePicker } from "./packages/components/src/components/DatePicker/DatePicker.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/Activity/Activity.mjs

@@ -1,7 +1,8 @@
 "use client"
 /* */
 import { SuspenseTrigger } from "../SuspenseTrigger/SuspenseTrigger.mjs";
-import React, { Suspense, useEffect, useState } from "react";
+import { ActivityContextProvider, useIsActivityActive } from "./context.mjs";
+import React, { Suspense, useEffect, useLayoutEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIsSSR } from "react-aria";
 //#region src/components/Activity/Activity.tsx
@@ -17,6 +18,7 @@ var Activity = (props) => {
 	const { isActive: isActiveFromProps = true, inactiveDelay, forceCustomActivity = false, children } = props;
 	const [isActiveState, setIsActiveState] = useState(isActiveFromProps);
 	const isSsr = useIsSSR();
+	const isParentActive = useIsActivityActive();
 	useEffect(() => {
 		if (!inactiveDelay) return;
 		if (isActiveFromProps) setIsActiveState(true);
@@ -30,14 +32,23 @@ var Activity = (props) => {
 		}
 	}, [isActiveFromProps, inactiveDelay]);
 	const isActive = inactiveDelay ? isActiveState : isActiveFromProps;
+	const [isHiddenState, setIsHiddenState] = useState(!isActive);
+	useLayoutEffect(() => {
+		setIsHiddenState(!isActive);
+	}, [isActive]);
+	const isHidden = isHiddenState && !isActive;
 	if (isSsr) return isActive ? children : null;
-	if (isActivitySupported && !forceCustomActivity) return /* @__PURE__ */ jsx(React.Activity, {
-		mode: isActive ? "visible" : "hidden",
+	const content = /* @__PURE__ */ jsx(ActivityContextProvider, {
+		value: isParentActive && isActive,
 		children
 	});
+	if (isActivitySupported && !forceCustomActivity) return /* @__PURE__ */ jsx(React.Activity, {
+		mode: isHidden ? "hidden" : "visible",
+		children: content
+	});
 	return /* @__PURE__ */ jsx(CustomActivity, {
-		isActive,
-		children
+		isActive: !isHidden,
+		children: content
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Activity.mjs","names":[],"sources":["../../../../../../../src/components/Activity/Activity.tsx"],"sourcesContent":["import SuspenseTrigger from \"@/components/SuspenseTrigger\";\nimport React, { useEffect, useState } from \"react\";\nimport { type FC, type PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface ActivityProps extends PropsWithChildren {\n  isActive?: boolean;\n  inactiveDelay?: number;\n  /** @internal */\n  forceCustomActivity?: boolean;\n}\n\nconst isActivitySupported = React.version.startsWith(\"19.2\");\n\nconst CustomActivity: FC<ActivityProps> = (props) => {\n  const { children, isActive: isActive = true } = props;\n\n  return (\n    <Suspense fallback={null}>\n      <SuspenseTrigger show={!isActive} />\n      {children}\n    </Suspense>\n  );\n};\n\nexport const Activity: FC<ActivityProps> = (props) => {\n  const {\n    isActive: isActiveFromProps = true,\n    inactiveDelay,\n    forceCustomActivity = false,\n    children,\n  } = props;\n\n  const [isActiveState, setIsActiveState] = useState(isActiveFromProps);\n  const isSsr = useIsSSR();\n\n  useEffect(() => {\n    if (!inactiveDelay) {\n      return;\n    }\n\n    if (isActiveFromProps) {\n      setIsActiveState(true);\n    } else {\n      const timeout = setTimeout(() => {\n        setIsActiveState(false);\n      }, inactiveDelay);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [isActiveFromProps, inactiveDelay]);\n\n  const isActive = inactiveDelay ? isActiveState : isActiveFromProps;\n\n  if (isSsr) {\n    return isActive ? children : null;\n  }\n\n  if (isActivitySupported && !forceCustomActivity) {\n    return (\n      <React.Activity mode={isActive ? \"visible\" : \"hidden\"}>\n        {children}\n      </React.Activity>\n    );\n  }\n\n  return <CustomActivity isActive={isActive}>{children}</CustomActivity>;\n};\n\nexport default Activity;\n"],"mappings":";;;;;;;AAaA,IAAM,sBAAsB,MAAM,QAAQ,WAAW,MAAM;AAE3D,IAAM,kBAAqC,UAAU;CACnD,MAAM,EAAE,UAAoB,WAAW,SAAS;CAEhD,OACE,qBAAC,UAAD;EAAU,UAAU;EAApB,UAAA,CACE,oBAAC,iBAAD,EAAiB,MAAM,CAAC,SAAW,CAAA,GAClC,QACO;;AAEd;AAEA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UAAU,oBAAoB,MAC9B,eACA,sBAAsB,OACtB,aACE;CAEJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,iBAAiB;CACpE,MAAM,QAAQ,SAAS;CAEvB,gBAAgB;EACd,IAAI,CAAC,eACH;EAGF,IAAI,mBACF,iBAAiB,IAAI;OAChB;GACL,MAAM,UAAU,iBAAiB;IAC/B,iBAAiB,KAAK;GACxB,GAAG,aAAa;GAEhB,aAAa;IACX,aAAa,OAAO;GACtB;EACF;CACF,GAAG,CAAC,mBAAmB,aAAa,CAAC;CAErC,MAAM,WAAW,gBAAgB,gBAAgB;CAEjD,IAAI,OACF,OAAO,WAAW,WAAW;CAG/B,IAAI,uBAAuB,CAAC,qBAC1B,OACE,oBAAC,MAAM,UAAP;EAAgB,MAAM,WAAW,YAAY;EAC1C;CACa,CAAA;CAIpB,OAAO,oBAAC,gBAAD;EAA0B;EAAW;CAAyB,CAAA;AACvE"}
+{"version":3,"file":"Activity.mjs","names":[],"sources":["../../../../../../../src/components/Activity/Activity.tsx"],"sourcesContent":["import SuspenseTrigger from \"@/components/SuspenseTrigger\";\nimport React, { useEffect, useLayoutEffect, useState } from \"react\";\nimport { type FC, type PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport { useIsSSR } from \"react-aria\";\nimport {\n  ActivityContextProvider,\n  useIsActivityActive,\n} from \"@/components/Activity/context\";\n\nexport interface ActivityProps extends PropsWithChildren {\n  isActive?: boolean;\n  inactiveDelay?: number;\n  /** @internal */\n  forceCustomActivity?: boolean;\n}\n\nconst isActivitySupported = React.version.startsWith(\"19.2\");\n\nconst CustomActivity: FC<ActivityProps> = (props) => {\n  const { children, isActive: isActive = true } = props;\n\n  return (\n    <Suspense fallback={null}>\n      <SuspenseTrigger show={!isActive} />\n      {children}\n    </Suspense>\n  );\n};\n\nexport const Activity: FC<ActivityProps> = (props) => {\n  const {\n    isActive: isActiveFromProps = true,\n    inactiveDelay,\n    forceCustomActivity = false,\n    children,\n  } = props;\n\n  const [isActiveState, setIsActiveState] = useState(isActiveFromProps);\n  const isSsr = useIsSSR();\n  const isParentActive = useIsActivityActive();\n\n  useEffect(() => {\n    if (!inactiveDelay) {\n      return;\n    }\n\n    if (isActiveFromProps) {\n      setIsActiveState(true);\n    } else {\n      const timeout = setTimeout(() => {\n        setIsActiveState(false);\n      }, inactiveDelay);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }\n  }, [isActiveFromProps, inactiveDelay]);\n\n  const isActive = inactiveDelay ? isActiveState : isActiveFromProps;\n\n  /*\n   * A hidden subtree keeps rendering, but React commits none of those renders —\n   * that holds for React's own `Activity` as much as for the suspended one. Its\n   * inline DOM is hidden along with it, yet anything it portalled elsewhere\n   * stays on screen, frozen at the last commit: the open Select popover of the\n   * tab you just left. So hide one commit after deactivating, which is the\n   * commit the subtree needs to unmount its overlays. Setting the state from a\n   * layout effect keeps that intermediate commit off the screen.\n   */\n  const [isHiddenState, setIsHiddenState] = useState(!isActive);\n\n  useLayoutEffect(() => {\n    setIsHiddenState(!isActive);\n  }, [isActive]);\n\n  const isHidden = isHiddenState && !isActive;\n\n  if (isSsr) {\n    return isActive ? children : null;\n  }\n\n  const content = (\n    <ActivityContextProvider value={isParentActive && isActive}>\n      {children}\n    </ActivityContextProvider>\n  );\n\n  if (isActivitySupported && !forceCustomActivity) {\n    return (\n      <React.Activity mode={isHidden ? \"hidden\" : \"visible\"}>\n        {content}\n      </React.Activity>\n    );\n  }\n\n  return <CustomActivity isActive={!isHidden}>{content}</CustomActivity>;\n};\n\nexport default Activity;\n"],"mappings":";;;;;;;;AAiBA,IAAM,sBAAsB,MAAM,QAAQ,WAAW,MAAM;AAE3D,IAAM,kBAAqC,UAAU;CACnD,MAAM,EAAE,UAAoB,WAAW,SAAS;CAEhD,OACE,qBAAC,UAAD;EAAU,UAAU;EAApB,UAAA,CACE,oBAAC,iBAAD,EAAiB,MAAM,CAAC,SAAW,CAAA,GAClC,QACO;;AAEd;AAEA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UAAU,oBAAoB,MAC9B,eACA,sBAAsB,OACtB,aACE;CAEJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,iBAAiB;CACpE,MAAM,QAAQ,SAAS;CACvB,MAAM,iBAAiB,oBAAoB;CAE3C,gBAAgB;EACd,IAAI,CAAC,eACH;EAGF,IAAI,mBACF,iBAAiB,IAAI;OAChB;GACL,MAAM,UAAU,iBAAiB;IAC/B,iBAAiB,KAAK;GACxB,GAAG,aAAa;GAEhB,aAAa;IACX,aAAa,OAAO;GACtB;EACF;CACF,GAAG,CAAC,mBAAmB,aAAa,CAAC;CAErC,MAAM,WAAW,gBAAgB,gBAAgB;CAWjD,MAAM,CAAC,eAAe,oBAAoB,SAAS,CAAC,QAAQ;CAE5D,sBAAsB;EACpB,iBAAiB,CAAC,QAAQ;CAC5B,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,iBAAiB,CAAC;CAEnC,IAAI,OACF,OAAO,WAAW,WAAW;CAG/B,MAAM,UACJ,oBAAC,yBAAD;EAAyB,OAAO,kBAAkB;EAC/C;CACsB,CAAA;CAG3B,IAAI,uBAAuB,CAAC,qBAC1B,OACE,oBAAC,MAAM,UAAP;EAAgB,MAAM,WAAW,WAAW;EACzC,UAAA;CACa,CAAA;CAIpB,OAAO,oBAAC,gBAAD;EAAgB,UAAU,CAAC;EAAW,UAAA;CAAwB,CAAA;AACvE"}

package/dist/js/packages/components/src/components/Activity/context.mjs

@@ -0,0 +1,20 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+//#region src/components/Activity/context.ts
+var activityContext = createContext(true);
+/**
+* Whether the surrounding `Activity` is active.
+*
+* A deactivated `Activity` hides its subtree by suspending it (or by React's
+* own `Activity`). Either way React stops committing that subtree's renders, so
+* everything it portalled out of its own DOM — an open popover, a modal — stays
+* on screen, frozen. Content that renders outside the subtree must therefore
+* unmount itself while this is `false`.
+*/
+var useIsActivityActive = () => useContext(activityContext);
+var ActivityContextProvider = activityContext.Provider;
+//#endregion
+export { ActivityContextProvider, useIsActivityActive };
+
+//# sourceMappingURL=context.mjs.map

package/dist/js/packages/components/src/components/Activity/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/Activity/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nconst activityContext = createContext(true);\n\n/**\n * Whether the surrounding `Activity` is active.\n *\n * A deactivated `Activity` hides its subtree by suspending it (or by React's\n * own `Activity`). Either way React stops committing that subtree's renders, so\n * everything it portalled out of its own DOM — an open popover, a modal — stays\n * on screen, frozen. Content that renders outside the subtree must therefore\n * unmount itself while this is `false`.\n */\nexport const useIsActivityActive = (): boolean => useContext(activityContext);\n\nexport const ActivityContextProvider = activityContext.Provider;\n"],"mappings":";;;;AAEA,IAAM,kBAAkB,cAAc,IAAI;;;;;;;;;;AAW1C,IAAa,4BAAqC,WAAW,eAAe;AAE5E,IAAa,0BAA0B,gBAAgB"}

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

@@ -1,9 +1,9 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import { Text } from "../Text/Text.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import AlertBadge_module_default from "./AlertBadge.module.mjs";
+import { Text } from "../Text/Text.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AlertBadge/AlertBadge.tsx

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

@@ -2,9 +2,10 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import { Text } from "../Text/Text.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
+import { Text } from "../Text/Text.mjs";
+import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
 import { Options } from "../Options/Options.mjs";
 import __locale_default from "../../../../../_virtual/_3.locale.mjs";
 import Autocomplete_module_default from "./Autocomplete.module.mjs";
@@ -51,10 +52,7 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
 	const propsContext = {
 		SearchField: inputProps,
 		TextField: inputProps,
-		Option: { tunnel: {
-			id: "options",
-			component: "Autocomplete"
-		} },
+		Option: { tunnel: getOptionsTunnelProps("Autocomplete") },
 		Popover: { className: Autocomplete_module_default.popover },
 		...fieldPropsContext
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n  useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport clsx from \"clsx\";\n\nexport interface AutocompleteProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps<HTMLInputElement>,\n    Omit<\n      Aria.AutocompleteProps,\n      \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n    > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const inputRef = useObjectRef(ref);\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n\n  const optionsOverlayController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: () => optionsOverlayController.close(),\n  });\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleInputChange = (value: string) => {\n    if (value === \"\") {\n      optionsOverlayController.close();\n    } else if (isFocused(inputRef.current)) {\n      optionsOverlayController.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const value = String(key);\n    if (inputRef.current) {\n      emitElementValueChange(inputRef.current, value);\n    }\n    optionsOverlayController.close();\n  };\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n        e.preventDefault();\n      }\n    },\n    ref: inputRef,\n    onChange: handleInputChange,\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Autocomplete\");\n\n  const rootClassName = clsx(\n    styles.autocomplete,\n    fieldProps.className,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnel: {\n        id: \"options\",\n        component: \"Autocomplete\",\n      },\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div {...fieldProps} className={rootClassName}>\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[optionsOverlayController]}\n        >\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={container}\n                  controller={optionsOverlayController}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <UiComponentTunnelExit\n                    id=\"options\"\n                    component=\"Autocomplete\"\n                  />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsCA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,EAAE,aAAa,KAAK,UAAU,EAAE,aAAa,OAAO,CAAC;CAC3D,MAAM,kBAAkB,4BAA4B,gBAAO;CAC3D,MAAM,YAAY,OAAO,IAAI;CAE7B,MAAM,2BAA2B,qBAAqB,WAAW,EAC/D,4BAA4B,MAC9B,CAAC;CAED,MAAM,cAAc,eAAe,EACjC,oBAAoB,yBAAyB,MAAM,EACrD,CAAC;CAED,MAAM,yBACJ,oBAAC,MAAD;EAAM,WAAW,4BAAO;EACrB,UAAA,gBAAgB,OAAO,oBAAoB;CACxC,CAAA;CAGR,MAAM,qBAAqB,UAAkB;EAC3C,IAAI,UAAU,IACZ,yBAAyB,MAAM;OAC1B,IAAI,UAAU,SAAS,OAAO,GACnC,yBAAyB,KAAK;CAElC;CAEA,MAAM,sBAAsB,QAAkB;EAC5C,MAAM,QAAQ,OAAO,GAAG;EACxB,IAAI,SAAS,SACX,uBAAuB,SAAS,SAAS,KAAK;EAEhD,yBAAyB,MAAM;CACjC;CAEA,MAAM,aAAgD;EACpD,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,yBAAyB,QAChD,EAAE,eAAe;EAErB;EACA,KAAK;EACL,UAAU;CACZ;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,gBAAgB,KACpB,4BAAO,cACP,WAAW,WACX,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;EACb,WAAW;EACX,QAAQ,EACN,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,SAAS,EACP,WAAW,4BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAhC,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,wBAAwB;GAEvC,UAAA,oBAAC,OAAD;IAAK,GAAI,YAAY;IAAkB,KAAK;IAC1C,UAAA,oBAAC,uBAAD;KAAuB,oBAAoB,UAAU;KACnD,UAAA,qBAAC,KAAK,cAAN;MACE,QAAQ;MACR,uBAAA;MACA,GAAI;MAHN,UAAA,CAKG,UACD,oBAAC,SAAD;OACE,UAAU;OACV,YAAY;OACZ,YAAY;OACM;OAClB,YAAA;OACA,WAAU;OAEV,UAAA,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA;MACM,CAAA,CACQ;;IACE,CAAA;GACpB,CAAA;EACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n  useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport clsx from \"clsx\";\n\nexport interface AutocompleteProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps<HTMLInputElement>,\n    Omit<\n      Aria.AutocompleteProps,\n      \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n    > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const inputRef = useObjectRef(ref);\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n\n  const optionsOverlayController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: () => optionsOverlayController.close(),\n  });\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleInputChange = (value: string) => {\n    if (value === \"\") {\n      optionsOverlayController.close();\n    } else if (isFocused(inputRef.current)) {\n      optionsOverlayController.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const value = String(key);\n    if (inputRef.current) {\n      emitElementValueChange(inputRef.current, value);\n    }\n    optionsOverlayController.close();\n  };\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n        e.preventDefault();\n      }\n    },\n    ref: inputRef,\n    onChange: handleInputChange,\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Autocomplete\");\n\n  const rootClassName = clsx(\n    styles.autocomplete,\n    fieldProps.className,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Autocomplete\"),\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div {...fieldProps} className={rootClassName}>\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[optionsOverlayController]}\n        >\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={container}\n                  controller={optionsOverlayController}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <UiComponentTunnelExit\n                    id=\"options\"\n                    component=\"Autocomplete\"\n                  />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,EAAE,aAAa,KAAK,UAAU,EAAE,aAAa,OAAO,CAAC;CAC3D,MAAM,kBAAkB,4BAA4B,gBAAO;CAC3D,MAAM,YAAY,OAAO,IAAI;CAE7B,MAAM,2BAA2B,qBAAqB,WAAW,EAC/D,4BAA4B,MAC9B,CAAC;CAED,MAAM,cAAc,eAAe,EACjC,oBAAoB,yBAAyB,MAAM,EACrD,CAAC;CAED,MAAM,yBACJ,oBAAC,MAAD;EAAM,WAAW,4BAAO;EACrB,UAAA,gBAAgB,OAAO,oBAAoB;CACxC,CAAA;CAGR,MAAM,qBAAqB,UAAkB;EAC3C,IAAI,UAAU,IACZ,yBAAyB,MAAM;OAC1B,IAAI,UAAU,SAAS,OAAO,GACnC,yBAAyB,KAAK;CAElC;CAEA,MAAM,sBAAsB,QAAkB;EAC5C,MAAM,QAAQ,OAAO,GAAG;EACxB,IAAI,SAAS,SACX,uBAAuB,SAAS,SAAS,KAAK;EAEhD,yBAAyB,MAAM;CACjC;CAEA,MAAM,aAAgD;EACpD,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,yBAAyB,QAChD,EAAE,eAAe;EAErB;EACA,KAAK;EACL,UAAU;CACZ;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,gBAAgB,KACpB,4BAAO,cACP,WAAW,WACX,SACF;CAEA,MAAM,eAA6B;EACjC,aAAa;EACb,WAAW;EACX,QAAQ,EACN,QAAQ,sBAAsB,cAAc,EAC9C;EACA,SAAS,EACP,WAAW,4BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAhC,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,wBAAwB;GAEvC,UAAA,oBAAC,OAAD;IAAK,GAAI,YAAY;IAAkB,KAAK;IAC1C,UAAA,oBAAC,uBAAD;KAAuB,oBAAoB,UAAU;KACnD,UAAA,qBAAC,KAAK,cAAN;MACE,QAAQ;MACR,uBAAA;MACA,GAAI;MAHN,UAAA,CAKG,UACD,oBAAC,SAAD;OACE,UAAU;OACV,YAAY;OACZ,YAAY;OACM;OAClB,YAAA;OACA,WAAU;OAEV,UAAA,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA;MACM,CAAA,CACQ;;IACE,CAAA;GACpB,CAAA;EACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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"}