@mittwald/flow-react-components 1.3.0-next.1 → 1.3.0-next.10

package/dist/js/default.mjs

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

package/dist/js/flr-universal.mjs

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

package/dist/js/packages/components/src/components/Action/models/ActionModel.mjs

@@ -57,15 +57,32 @@ var ActionModel = class ActionModel {
 			parentAction: ActionModel.useNew({ closeOverlay: action.confirmationModalController }, { parentAction: action.parentAction })
 		});
 	}
+	/**
+	* Resolves an overlay reference against this action's overlay context.
+	*
+	* Returns `undefined` unless the action carries one of the overlay props –
+	* `Action` relies on that to tell whether it owns a surrounding `Modal`'s
+	* controller.
+	*/
 	getOverlayController(from) {
-		const getController = (controller) => {
-			if (controller === void 0) return;
-			if (from instanceof OverlayController) return from;
-			if (typeof from === "string") return this.overlayContext[from];
-			if ("overlay" in from) return this.getOverlayController(from.overlay);
-			return this.getOverlayController("Modal");
-		};
-		return getController(this.actionProps.openOverlay) ?? getController(this.actionProps.closeOverlay) ?? getController(this.actionProps.toggleOverlay) ?? getController(this.actionProps.openModal ? "Modal" : void 0) ?? getController(this.actionProps.closeModal ? "Modal" : void 0) ?? getController(this.actionProps.toggleModal ? "Modal" : void 0);
+		return this.hasOverlayProps ? this.resolveOverlayReference(from) : void 0;
+	}
+	get hasOverlayProps() {
+		const { openOverlay, closeOverlay, toggleOverlay, openModal, closeModal, toggleModal } = this.actionProps;
+		return [
+			openOverlay,
+			closeOverlay,
+			toggleOverlay,
+			openModal,
+			closeModal,
+			toggleModal
+		].some(Boolean);
+	}
+	resolveOverlayReference(from) {
+		if (from instanceof OverlayController) return from;
+		if (typeof from === "string") return this.overlayContext.byType[from];
+		if (from === true || !("overlay" in from) || from.overlay === void 0) return this.overlayContext.nearest;
+		return this.resolveOverlayReference(from.overlay);
 	}
 	static getCloseOverlayOptions = (options) => {
 		if (options === void 0 || options instanceof OverlayController || typeof options === "string" || options === true) return;

package/dist/js/packages/components/src/components/Action/models/ActionModel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionModel.mjs","names":[],"sources":["../../../../../../../../src/components/Action/models/ActionModel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { OverlayController } from \"@/lib/controller\";\nimport invariant from \"invariant\";\nimport { type ActionProps } from \"@/components/Action/types\";\nimport { actionContext } from \"@/components/Action/context\";\nimport { ActionState } from \"@/components/Action/models/ActionState\";\nimport { ActionExecution } from \"@/components/Action/models/ActionExecution\";\nimport { ActionStateContext } from \"@/components/Action/models/ActionStateContext\";\nimport type { OverlayContext } from \"@/lib/controller/overlay/context\";\nimport { useOverlayContext } from \"@/lib/controller/overlay/context\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport type {\n  CloseModalOptions,\n  CloseOverlayOptions,\n} from \"@/lib/controller/overlay/OverlayController\";\n\ninterface InitObject {\n  actionProps: ActionProps;\n  parentAction?: ActionModel;\n  confirmationModalController: OverlayController;\n  needsConfirmation: boolean;\n  overlayContext: OverlayContext;\n  state: ActionState;\n}\n\nexport class ActionModel {\n  public state: ActionState;\n  public needsConfirmation: boolean;\n  public readonly actionProps: ActionProps;\n  public readonly parentAction?: ActionModel;\n  public readonly confirmationModalController: OverlayController;\n  public readonly overlayContext: OverlayContext;\n\n  private constructor(init: InitObject) {\n    const {\n      actionProps,\n      needsConfirmation,\n      parentAction,\n      overlayContext,\n      confirmationModalController,\n      state,\n    } = init;\n\n    this.actionProps = actionProps;\n    this.parentAction = parentAction;\n    this.confirmationModalController = confirmationModalController;\n    this.needsConfirmation = needsConfirmation;\n    this.overlayContext = overlayContext;\n    this.state = state;\n  }\n\n  public static useNew(\n    actionProps: ActionProps,\n    init: Partial<InitObject> = {},\n  ): ActionModel {\n    const parentAction = useContext(actionContext);\n    const overlayContext = useOverlayContext();\n    const confirmationModalController = OverlayController.useNew();\n    const state = ActionState.useNew();\n\n    return new ActionModel({\n      parentAction,\n      overlayContext,\n      confirmationModalController,\n      needsConfirmation: false,\n      actionProps,\n      state,\n      ...init,\n    });\n  }\n\n  public static use(): ActionModel {\n    const c = useContext(actionContext);\n    invariant(!!c, \"Action context is not defined\");\n    ActionStateContext.useRegisterState(c.state);\n    return c;\n  }\n\n  public static useConfirmationAction(): ActionModel {\n    const action = ActionModel.use();\n\n    return new ActionModel({\n      actionProps: action.actionProps,\n      confirmationModalController: action.confirmationModalController,\n      overlayContext: action.overlayContext,\n      state: action.state,\n      needsConfirmation: false,\n      parentAction: ActionModel.useNew(\n        {\n          closeOverlay: action.confirmationModalController,\n        },\n        {\n          parentAction: action.parentAction,\n        },\n      ),\n    });\n  }\n\n  public getOverlayController(\n    from:\n      | FlowComponentName\n      | OverlayController\n      | CloseOverlayOptions\n      | CloseModalOptions,\n  ): OverlayController | undefined {\n    const getController = (\n      controller?:\n        | OverlayController\n        | FlowComponentName\n        | CloseOverlayOptions\n        | CloseModalOptions,\n    ): OverlayController | undefined => {\n      if (controller === undefined) {\n        return undefined;\n      }\n      if (from instanceof OverlayController) {\n        return from;\n      }\n      if (typeof from === \"string\") {\n        return this.overlayContext[from];\n      }\n      if (\"overlay\" in from) {\n        return this.getOverlayController(from.overlay);\n      }\n      return this.getOverlayController(\"Modal\");\n    };\n\n    return (\n      getController(this.actionProps.openOverlay) ??\n      getController(this.actionProps.closeOverlay) ??\n      getController(this.actionProps.toggleOverlay) ??\n      getController(this.actionProps.openModal ? \"Modal\" : undefined) ??\n      getController(this.actionProps.closeModal ? \"Modal\" : undefined) ??\n      getController(this.actionProps.toggleModal ? \"Modal\" : undefined)\n    );\n  }\n\n  public static getCloseOverlayOptions = (\n    options?:\n      | OverlayController\n      | FlowComponentName\n      | CloseOverlayOptions\n      | CloseModalOptions\n      | true,\n  ) => {\n    if (\n      options === undefined ||\n      options instanceof OverlayController ||\n      typeof options === \"string\" ||\n      options === true\n    ) {\n      return undefined;\n    }\n    return options;\n  };\n\n  public execute = (...args: unknown[]): void => {\n    new ActionExecution(this).execute(...args);\n  };\n}\n"],"mappings":";;;;;;;;;;;AAyBA,IAAa,cAAb,MAAa,YAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CAEA,YAAoB,MAAkB;EACpC,MAAM,EACJ,aACA,mBACA,cACA,gBACA,6BACA,UACE;EAEJ,KAAK,cAAc;EACnB,KAAK,eAAe;EACpB,KAAK,8BAA8B;EACnC,KAAK,oBAAoB;EACzB,KAAK,iBAAiB;EACtB,KAAK,QAAQ;CACf;CAEA,OAAc,OACZ,aACA,OAA4B,CAAC,GAChB;EACb,MAAM,eAAe,WAAW,aAAa;EAC7C,MAAM,iBAAiB,kBAAkB;EACzC,MAAM,8BAA8B,kBAAkB,OAAO;EAC7D,MAAM,QAAQ,YAAY,OAAO;EAEjC,OAAO,IAAI,YAAY;GACrB;GACA;GACA;GACA,mBAAmB;GACnB;GACA;GACA,GAAG;EACL,CAAC;CACH;CAEA,OAAc,MAAmB;EAC/B,MAAM,IAAI,WAAW,aAAa;EAClC,UAAU,CAAC,CAAC,GAAG,+BAA+B;EAC9C,mBAAmB,iBAAiB,EAAE,KAAK;EAC3C,OAAO;CACT;CAEA,OAAc,wBAAqC;EACjD,MAAM,SAAS,YAAY,IAAI;EAE/B,OAAO,IAAI,YAAY;GACrB,aAAa,OAAO;GACpB,6BAA6B,OAAO;GACpC,gBAAgB,OAAO;GACvB,OAAO,OAAO;GACd,mBAAmB;GACnB,cAAc,YAAY,OACxB,EACE,cAAc,OAAO,4BACvB,GACA,EACE,cAAc,OAAO,aACvB,CACF;EACF,CAAC;CACH;CAEA,qBACE,MAK+B;EAC/B,MAAM,iBACJ,eAKkC;GAClC,IAAI,eAAe,KAAA,GACjB;GAEF,IAAI,gBAAgB,mBAClB,OAAO;GAET,IAAI,OAAO,SAAS,UAClB,OAAO,KAAK,eAAe;GAE7B,IAAI,aAAa,MACf,OAAO,KAAK,qBAAqB,KAAK,OAAO;GAE/C,OAAO,KAAK,qBAAqB,OAAO;EAC1C;EAEA,OACE,cAAc,KAAK,YAAY,WAAW,KAC1C,cAAc,KAAK,YAAY,YAAY,KAC3C,cAAc,KAAK,YAAY,aAAa,KAC5C,cAAc,KAAK,YAAY,YAAY,UAAU,KAAA,CAAS,KAC9D,cAAc,KAAK,YAAY,aAAa,UAAU,KAAA,CAAS,KAC/D,cAAc,KAAK,YAAY,cAAc,UAAU,KAAA,CAAS;CAEpE;CAEA,OAAc,0BACZ,YAMG;EACH,IACE,YAAY,KAAA,KACZ,mBAAmB,qBACnB,OAAO,YAAY,YACnB,YAAY,MAEZ;EAEF,OAAO;CACT;CAEA,WAAkB,GAAG,SAA0B;EAC7C,IAAI,gBAAgB,IAAI,CAAC,CAAC,QAAQ,GAAG,IAAI;CAC3C;AACF"}
+{"version":3,"file":"ActionModel.mjs","names":[],"sources":["../../../../../../../../src/components/Action/models/ActionModel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { OverlayController } from \"@/lib/controller\";\nimport invariant from \"invariant\";\nimport { type ActionProps } from \"@/components/Action/types\";\nimport { actionContext } from \"@/components/Action/context\";\nimport { ActionState } from \"@/components/Action/models/ActionState\";\nimport { ActionExecution } from \"@/components/Action/models/ActionExecution\";\nimport { ActionStateContext } from \"@/components/Action/models/ActionStateContext\";\nimport type { OverlayContext } from \"@/lib/controller/overlay/context\";\nimport { useOverlayContext } from \"@/lib/controller/overlay/context\";\nimport type { OverlayReference } from \"@/lib/controller/overlay/OverlayController\";\n\ninterface InitObject {\n  actionProps: ActionProps;\n  parentAction?: ActionModel;\n  confirmationModalController: OverlayController;\n  needsConfirmation: boolean;\n  overlayContext: OverlayContext;\n  state: ActionState;\n}\n\nexport class ActionModel {\n  public state: ActionState;\n  public needsConfirmation: boolean;\n  public readonly actionProps: ActionProps;\n  public readonly parentAction?: ActionModel;\n  public readonly confirmationModalController: OverlayController;\n  public readonly overlayContext: OverlayContext;\n\n  private constructor(init: InitObject) {\n    const {\n      actionProps,\n      needsConfirmation,\n      parentAction,\n      overlayContext,\n      confirmationModalController,\n      state,\n    } = init;\n\n    this.actionProps = actionProps;\n    this.parentAction = parentAction;\n    this.confirmationModalController = confirmationModalController;\n    this.needsConfirmation = needsConfirmation;\n    this.overlayContext = overlayContext;\n    this.state = state;\n  }\n\n  public static useNew(\n    actionProps: ActionProps,\n    init: Partial<InitObject> = {},\n  ): ActionModel {\n    const parentAction = useContext(actionContext);\n    const overlayContext = useOverlayContext();\n    const confirmationModalController = OverlayController.useNew();\n    const state = ActionState.useNew();\n\n    return new ActionModel({\n      parentAction,\n      overlayContext,\n      confirmationModalController,\n      needsConfirmation: false,\n      actionProps,\n      state,\n      ...init,\n    });\n  }\n\n  public static use(): ActionModel {\n    const c = useContext(actionContext);\n    invariant(!!c, \"Action context is not defined\");\n    ActionStateContext.useRegisterState(c.state);\n    return c;\n  }\n\n  public static useConfirmationAction(): ActionModel {\n    const action = ActionModel.use();\n\n    return new ActionModel({\n      actionProps: action.actionProps,\n      confirmationModalController: action.confirmationModalController,\n      overlayContext: action.overlayContext,\n      state: action.state,\n      needsConfirmation: false,\n      parentAction: ActionModel.useNew(\n        {\n          closeOverlay: action.confirmationModalController,\n        },\n        {\n          parentAction: action.parentAction,\n        },\n      ),\n    });\n  }\n\n  /**\n   * Resolves an overlay reference against this action's overlay context.\n   *\n   * Returns `undefined` unless the action carries one of the overlay props –\n   * `Action` relies on that to tell whether it owns a surrounding `Modal`'s\n   * controller.\n   */\n  public getOverlayController(\n    from: OverlayReference,\n  ): OverlayController | undefined {\n    return this.hasOverlayProps\n      ? this.resolveOverlayReference(from)\n      : undefined;\n  }\n\n  private get hasOverlayProps(): boolean {\n    const {\n      openOverlay,\n      closeOverlay,\n      toggleOverlay,\n      openModal,\n      closeModal,\n      toggleModal,\n    } = this.actionProps;\n\n    return [\n      openOverlay,\n      closeOverlay,\n      toggleOverlay,\n      openModal,\n      closeModal,\n      toggleModal,\n    ].some(Boolean);\n  }\n\n  private resolveOverlayReference(\n    from: OverlayReference,\n  ): OverlayController | undefined {\n    if (from instanceof OverlayController) {\n      return from;\n    }\n    if (typeof from === \"string\") {\n      return this.overlayContext.byType[from];\n    }\n    // `true` and options without an `overlay` both mean \"the nearest one\".\n    if (from === true || !(\"overlay\" in from) || from.overlay === undefined) {\n      return this.overlayContext.nearest;\n    }\n    return this.resolveOverlayReference(from.overlay);\n  }\n\n  public static getCloseOverlayOptions = (options?: OverlayReference) => {\n    if (\n      options === undefined ||\n      options instanceof OverlayController ||\n      typeof options === \"string\" ||\n      options === true\n    ) {\n      return undefined;\n    }\n    return options;\n  };\n\n  public execute = (...args: unknown[]): void => {\n    new ActionExecution(this).execute(...args);\n  };\n}\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,cAAb,MAAa,YAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CAEA,YAAoB,MAAkB;EACpC,MAAM,EACJ,aACA,mBACA,cACA,gBACA,6BACA,UACE;EAEJ,KAAK,cAAc;EACnB,KAAK,eAAe;EACpB,KAAK,8BAA8B;EACnC,KAAK,oBAAoB;EACzB,KAAK,iBAAiB;EACtB,KAAK,QAAQ;CACf;CAEA,OAAc,OACZ,aACA,OAA4B,CAAC,GAChB;EACb,MAAM,eAAe,WAAW,aAAa;EAC7C,MAAM,iBAAiB,kBAAkB;EACzC,MAAM,8BAA8B,kBAAkB,OAAO;EAC7D,MAAM,QAAQ,YAAY,OAAO;EAEjC,OAAO,IAAI,YAAY;GACrB;GACA;GACA;GACA,mBAAmB;GACnB;GACA;GACA,GAAG;EACL,CAAC;CACH;CAEA,OAAc,MAAmB;EAC/B,MAAM,IAAI,WAAW,aAAa;EAClC,UAAU,CAAC,CAAC,GAAG,+BAA+B;EAC9C,mBAAmB,iBAAiB,EAAE,KAAK;EAC3C,OAAO;CACT;CAEA,OAAc,wBAAqC;EACjD,MAAM,SAAS,YAAY,IAAI;EAE/B,OAAO,IAAI,YAAY;GACrB,aAAa,OAAO;GACpB,6BAA6B,OAAO;GACpC,gBAAgB,OAAO;GACvB,OAAO,OAAO;GACd,mBAAmB;GACnB,cAAc,YAAY,OACxB,EACE,cAAc,OAAO,4BACvB,GACA,EACE,cAAc,OAAO,aACvB,CACF;EACF,CAAC;CACH;;;;;;;;CASA,qBACE,MAC+B;EAC/B,OAAO,KAAK,kBACR,KAAK,wBAAwB,IAAI,IACjC,KAAA;CACN;CAEA,IAAY,kBAA2B;EACrC,MAAM,EACJ,aACA,cACA,eACA,WACA,YACA,gBACE,KAAK;EAET,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,OAAO;CAChB;CAEA,wBACE,MAC+B;EAC/B,IAAI,gBAAgB,mBAClB,OAAO;EAET,IAAI,OAAO,SAAS,UAClB,OAAO,KAAK,eAAe,OAAO;EAGpC,IAAI,SAAS,QAAQ,EAAE,aAAa,SAAS,KAAK,YAAY,KAAA,GAC5D,OAAO,KAAK,eAAe;EAE7B,OAAO,KAAK,wBAAwB,KAAK,OAAO;CAClD;CAEA,OAAc,0BAA0B,YAA+B;EACrE,IACE,YAAY,KAAA,KACZ,mBAAmB,qBACnB,OAAO,YAAY,YACnB,YAAY,MAEZ;EAEF,OAAO;CACT;CAEA,WAAkB,GAAG,SAA0B;EAC7C,IAAI,gBAAgB,IAAI,CAAC,CAAC,QAAQ,GAAG,IAAI;CAC3C;AACF"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n  &:has(.avatar):has(.text) {\n    display: flex;\n    gap: var(--combine--avatar-text--spacing);\n    height: fit-content;\n\n    --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n    min-height: var(--first-two-lines-height);\n\n    .text {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      align-self: center;\n      font-size: var(--font-size-text--s);\n    }\n\n    .avatar {\n      margin-top: calc(\n        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n      );\n    }\n  }\n\n  &:has(:global(.flow--form-field)):has(.button) {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--combine--input-button--spacing);\n\n    :global(.flow--form-field) {\n      flex-grow: 1;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n      }\n    }\n  }\n\n  &:has(.text):has(.contextualHelpTriggerButton),\n  &:has(.text):has(.copyButton) {\n    display: flex;\n    align-items: center;\n    column-gap: var(--combine--text-button--spacing);\n  }\n\n  &:has(> .text):has(> .icon) {\n    display: flex;\n    align-items: center;\n    column-gap: var(--combine--icon-text--spacing);\n  }\n}\n\n@media (max-width: 550px) {\n  .combine:has(:global(.flow--form-field)):has(.button) {\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n    align-items: stretch;\n\n    .button {\n      width: 100%;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Combine.module.mjs","names":[],"sources":["../../../../../../../src/components/Combine/Combine.module.scss"],"sourcesContent":[".combine {\n  &:has(.avatar):has(.text) {\n    display: flex;\n    gap: var(--combine--avatar-text--spacing);\n    height: fit-content;\n\n    --first-two-lines-height: calc(var(--line-height-s) * 2);\n\n    min-height: var(--first-two-lines-height);\n\n    .text {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      align-self: center;\n      font-size: var(--font-size-text--s);\n    }\n\n    .avatar {\n      margin-top: calc(\n        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2\n      );\n    }\n  }\n\n  &:has(:global(.flow--form-field)):has(.button) {\n    display: flex;\n    align-items: flex-start;\n    column-gap: var(--combine--input-button--spacing);\n\n    :global(.flow--form-field) {\n      flex-grow: 1;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: calc(var(--line-height-s) + var(--form-control--spacing-y));\n      }\n    }\n  }\n\n  &:has(.text):has(.contextualHelpTriggerButton),\n  &:has(.text):has(.copyButton) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--text-button--spacing);\n  }\n\n  &:has(> .text):has(> .icon) {\n    display: inline-flex;\n    align-items: center;\n    column-gap: var(--combine--icon-text--spacing);\n  }\n}\n\n@media (max-width: 550px) {\n  .combine:has(:global(.flow--form-field)):has(.button) {\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n    align-items: stretch;\n\n    .button {\n      width: 100%;\n    }\n\n    &:has(label) {\n      .button {\n        margin-top: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -6,7 +6,7 @@ import { useOverlayController } from "../../lib/controller/overlay/useOverlayCon
 import { Action } from "../Action/Action.mjs";
 import { OverlayContextProvider } from "../../lib/controller/overlay/OverlayContextProvider.mjs";
 import { Popover } from "../Popover/Popover.mjs";
-import { getAriaSelectionMode, getCloseOverlayType, getMenuItemSelectionVariant } from "./lib.mjs";
+import { closesOnSelect, getAriaSelectionMode, getMenuItemSelectionVariant } from "./lib.mjs";
 import ContextMenuContentView from "../../views/ContextMenuContentView.mjs";
 import ContextMenu_module_default from "./ContextMenu.module.mjs";
 import { OverlayContentSuspendWatcher } from "../../lib/controller/overlay/OverlayContentSuspendWatcher.mjs";
@@ -51,7 +51,7 @@ var ContextMenu = flowComponent("ContextMenu", (props) => {
 					children: /* @__PURE__ */ jsx(PropsContextProvider, {
 						props: propsContext,
 						children: /* @__PURE__ */ jsx(Action, {
-							closeOverlay: getCloseOverlayType(selectionMode),
+							closeOverlay: closesOnSelect(selectionMode),
 							children
 						})
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  getCloseOverlayType,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\n\nexport interface ContextMenuProps\n  extends\n    Omit<PopoverProps, \"withTip\" | \"modality\">,\n    Pick<\n      Aria.MenuProps<MenuItemProps>,\n      | \"onAction\"\n      | \"selectedKeys\"\n      | \"defaultSelectedKeys\"\n      | \"onSelectionChange\"\n      | \"disabledKeys\"\n      | \"renderEmptyState\"\n    >,\n    FlowComponentProps {\n  /** The type of selection that is allowed in the context menu. */\n  selectionMode?: ContextMenuSelectionMode;\n  /** Sets the context menu to a fixed width. */\n  width?: string | number;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n  const {\n    children,\n    onAction,\n    selectionMode,\n    selectedKeys,\n    defaultSelectedKeys,\n    disabledKeys,\n    onSelectionChange,\n    renderEmptyState,\n    ref,\n    controller: overlayControllerFromProps,\n    ...rest\n  } = props;\n\n  const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n    reuseControllerFromContext: true,\n  });\n\n  const overlayController =\n    overlayControllerFromProps ?? overlayControllerFromContext;\n\n  const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n  const propsContext: PropsContext = {\n    MenuItem: {\n      selectionVariant,\n      Avatar: {\n        size: \"l\",\n      },\n    },\n\n    Section: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n      renderContextMenuSection: true,\n    },\n\n    ContextMenuSection: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n    },\n  };\n\n  return (\n    <OverlayContentSuspendWatcher overlayController={overlayController}>\n      <Popover\n        {...rest}\n        className={styles.popover}\n        controller={overlayController}\n        isDialogContent={false}\n      >\n        <OverlayContextProvider\n          type=\"ContextMenu\"\n          controller={overlayController}\n        >\n          <ContextMenuContentView\n            className={styles.contextMenu}\n            onAction={onAction}\n            selectionMode={getAriaSelectionMode(selectionMode)}\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n            disabledKeys={disabledKeys}\n            onSelectionChange={onSelectionChange}\n            renderEmptyState={renderEmptyState}\n            ref={ref}\n          >\n            <PropsContextProvider props={propsContext}>\n              <Action closeOverlay={getCloseOverlayType(selectionMode)}>\n                {children}\n              </Action>\n            </PropsContextProvider>\n          </ContextMenuContentView>\n        </OverlayContextProvider>\n      </Popover>\n    </OverlayContentSuspendWatcher>\n  );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAwCA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,KACA,YAAY,4BACZ,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAIhC,MAAM,eAA6B;EACjC,UAAU;GACR,kBAJqB,4BAA4B,aAIjD;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAW,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,oBAAC,wBAAD;KACE,WAAW,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KACb;KAEL,UAAA,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,oBAAoB,aAAa;OACpD;MACK,CAAA;KACY,CAAA;IACA,CAAA;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}
+{"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  closesOnSelect,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\n\nexport interface ContextMenuProps\n  extends\n    Omit<PopoverProps, \"withTip\" | \"modality\">,\n    Pick<\n      Aria.MenuProps<MenuItemProps>,\n      | \"onAction\"\n      | \"selectedKeys\"\n      | \"defaultSelectedKeys\"\n      | \"onSelectionChange\"\n      | \"disabledKeys\"\n      | \"renderEmptyState\"\n    >,\n    FlowComponentProps {\n  /** The type of selection that is allowed in the context menu. */\n  selectionMode?: ContextMenuSelectionMode;\n  /** Sets the context menu to a fixed width. */\n  width?: string | number;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n  const {\n    children,\n    onAction,\n    selectionMode,\n    selectedKeys,\n    defaultSelectedKeys,\n    disabledKeys,\n    onSelectionChange,\n    renderEmptyState,\n    ref,\n    controller: overlayControllerFromProps,\n    ...rest\n  } = props;\n\n  const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n    reuseControllerFromContext: true,\n  });\n\n  const overlayController =\n    overlayControllerFromProps ?? overlayControllerFromContext;\n\n  const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n  const propsContext: PropsContext = {\n    MenuItem: {\n      selectionVariant,\n      Avatar: {\n        size: \"l\",\n      },\n    },\n\n    Section: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n      renderContextMenuSection: true,\n    },\n\n    ContextMenuSection: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n    },\n  };\n\n  return (\n    <OverlayContentSuspendWatcher overlayController={overlayController}>\n      <Popover\n        {...rest}\n        className={styles.popover}\n        controller={overlayController}\n        isDialogContent={false}\n      >\n        <OverlayContextProvider\n          type=\"ContextMenu\"\n          controller={overlayController}\n        >\n          <ContextMenuContentView\n            className={styles.contextMenu}\n            onAction={onAction}\n            selectionMode={getAriaSelectionMode(selectionMode)}\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n            disabledKeys={disabledKeys}\n            onSelectionChange={onSelectionChange}\n            renderEmptyState={renderEmptyState}\n            ref={ref}\n          >\n            <PropsContextProvider props={propsContext}>\n              <Action closeOverlay={closesOnSelect(selectionMode)}>\n                {children}\n              </Action>\n            </PropsContextProvider>\n          </ContextMenuContentView>\n        </OverlayContextProvider>\n      </Popover>\n    </OverlayContentSuspendWatcher>\n  );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAwCA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,KACA,YAAY,4BACZ,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAIhC,MAAM,eAA6B;EACjC,UAAU;GACR,kBAJqB,4BAA4B,aAIjD;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAW,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,oBAAC,wBAAD;KACE,WAAW,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KACb;KAEL,UAAA,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA;IACA,CAAA;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs

@@ -3,7 +3,7 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
 import { Action } from "../../../Action/Action.mjs";
-import { getAriaSelectionMode, getCloseOverlayType, getMenuItemSelectionVariant } from "../../lib.mjs";
+import { closesOnSelect, getAriaSelectionMode, getMenuItemSelectionVariant } from "../../lib.mjs";
 import ContextMenu_module_default from "../../ContextMenu.module.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
@@ -29,7 +29,7 @@ var ContextMenuSection = flowComponent("ContextMenuSection", (props) => {
 			children: /* @__PURE__ */ jsx(Action, {
 				skip: true,
 				children: /* @__PURE__ */ jsx(Action, {
-					closeOverlay: getCloseOverlayType(selectionMode),
+					closeOverlay: closesOnSelect(selectionMode),
 					children
 				})
 			})

package/dist/js/packages/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuSection.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  getCloseOverlayType,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n  FlowComponentProps &\n  Pick<\n    Aria.MenuSectionProps<MenuItemProps>,\n    \"defaultSelectedKeys\" | \"selectedKeys\"\n  > & {\n    selectionMode?: ContextMenuSelectionMode;\n  };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n  \"ContextMenuSection\",\n  (props) => {\n    const { children, selectionMode, ref, ...rest } = props;\n\n    const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 5,\n        wrapWith: <Aria.Header />,\n      },\n      MenuItem: {\n        selectionVariant,\n      },\n    };\n\n    return (\n      <Aria.MenuSection\n        ref={ref}\n        {...rest}\n        selectionMode={getAriaSelectionMode(selectionMode)}\n        className={styles.section}\n      >\n        <PropsContextProvider props={propsContext}>\n          <Action skip>\n            <Action closeOverlay={getCloseOverlayType(selectionMode)}>\n              {children}\n            </Action>\n          </Action>\n        </PropsContextProvider>\n      </Aria.MenuSection>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,WAAW,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,oBAAoB,aAAa;KACpD;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}
+{"version":3,"file":"ContextMenuSection.mjs","names":[],"sources":["../../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  closesOnSelect,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n  FlowComponentProps &\n  Pick<\n    Aria.MenuSectionProps<MenuItemProps>,\n    \"defaultSelectedKeys\" | \"selectedKeys\"\n  > & {\n    selectionMode?: ContextMenuSelectionMode;\n  };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n  \"ContextMenuSection\",\n  (props) => {\n    const { children, selectionMode, ref, ...rest } = props;\n\n    const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 5,\n        wrapWith: <Aria.Header />,\n      },\n      MenuItem: {\n        selectionVariant,\n      },\n    };\n\n    return (\n      <Aria.MenuSection\n        ref={ref}\n        {...rest}\n        selectionMode={getAriaSelectionMode(selectionMode)}\n        className={styles.section}\n      >\n        <PropsContextProvider props={propsContext}>\n          <Action skip>\n            <Action closeOverlay={closesOnSelect(selectionMode)}>\n              {children}\n            </Action>\n          </Action>\n        </PropsContextProvider>\n      </Aria.MenuSection>\n    );\n  },\n  { type: \"layout\" },\n);\n\nexport default ContextMenuSection;\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,qBAAqB,cAChC,uBACC,UAAU;CACT,MAAM,EAAE,UAAU,eAAe,KAAK,GAAG,SAAS;CAElD,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,UAAU,oBAAC,KAAK,QAAN,CAAc,CAAA;EAC1B;EACA,UAAU,EACR,iBACF;CACF;CAEA,OACE,oBAAC,KAAK,aAAN;EACO;EACL,GAAI;EACJ,eAAe,qBAAqB,aAAa;EACjD,WAAW,2BAAO;EAElB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,QAAD;IAAQ,MAAA;IACN,UAAA,oBAAC,QAAD;KAAQ,cAAc,eAAe,aAAa;KAC/C;IACK,CAAA;GACF,CAAA;EACY,CAAA;CACN,CAAA;AAEtB,GACA,EAAE,MAAM,SAAS,CACnB"}

package/dist/js/packages/components/src/components/ContextMenu/lib.mjs

@@ -7,10 +7,14 @@ var getAriaSelectionMode = (selectionMode) => {
 var getMenuItemSelectionVariant = (selectionMode) => {
 	return selectionMode === "single" || selectionMode === "multiple" ? "control" : selectionMode;
 };
-var getCloseOverlayType = (selectionMode) => {
-	return selectionMode === "multiple" || selectionMode === "switch" ? void 0 : "ContextMenu";
+/**
+* Whether selecting an item closes the menu. A mode that collects several
+* selections keeps it open.
+*/
+var closesOnSelect = (selectionMode) => {
+	return selectionMode !== "multiple" && selectionMode !== "switch";
 };
 //#endregion
-export { getAriaSelectionMode, getCloseOverlayType, getMenuItemSelectionVariant };
+export { closesOnSelect, getAriaSelectionMode, getMenuItemSelectionVariant };
 
 //# sourceMappingURL=lib.mjs.map

package/dist/js/packages/components/src/components/ContextMenu/lib.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lib.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/lib.ts"],"sourcesContent":["export type ContextMenuSelectionMode =\n  \"single\" | \"multiple\" | \"navigation\" | \"switch\";\n\nexport const getAriaSelectionMode = (\n  selectionMode?: ContextMenuSelectionMode,\n) => {\n  return selectionMode === \"navigation\"\n    ? \"none\"\n    : selectionMode === \"switch\"\n      ? \"multiple\"\n      : selectionMode;\n};\n\nexport const getMenuItemSelectionVariant = (\n  selectionMode?: ContextMenuSelectionMode,\n) => {\n  return selectionMode === \"single\" || selectionMode === \"multiple\"\n    ? \"control\"\n    : selectionMode;\n};\n\nexport const getCloseOverlayType = (\n  selectionMode?: ContextMenuSelectionMode,\n) => {\n  return selectionMode === \"multiple\" || selectionMode === \"switch\"\n    ? undefined\n    : \"ContextMenu\";\n};\n"],"mappings":";;;AAGA,IAAa,wBACX,kBACG;CACH,OAAO,kBAAkB,eACrB,SACA,kBAAkB,WAChB,aACA;AACR;AAEA,IAAa,+BACX,kBACG;CACH,OAAO,kBAAkB,YAAY,kBAAkB,aACnD,YACA;AACN;AAEA,IAAa,uBACX,kBACG;CACH,OAAO,kBAAkB,cAAc,kBAAkB,WACrD,KAAA,IACA;AACN"}
+{"version":3,"file":"lib.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/lib.ts"],"sourcesContent":["export type ContextMenuSelectionMode =\n  \"single\" | \"multiple\" | \"navigation\" | \"switch\";\n\nexport const getAriaSelectionMode = (\n  selectionMode?: ContextMenuSelectionMode,\n) => {\n  return selectionMode === \"navigation\"\n    ? \"none\"\n    : selectionMode === \"switch\"\n      ? \"multiple\"\n      : selectionMode;\n};\n\nexport const getMenuItemSelectionVariant = (\n  selectionMode?: ContextMenuSelectionMode,\n) => {\n  return selectionMode === \"single\" || selectionMode === \"multiple\"\n    ? \"control\"\n    : selectionMode;\n};\n\n/**\n * Whether selecting an item closes the menu. A mode that collects several\n * selections keeps it open.\n */\nexport const closesOnSelect = (selectionMode?: ContextMenuSelectionMode) => {\n  return selectionMode !== \"multiple\" && selectionMode !== \"switch\";\n};\n"],"mappings":";;;AAGA,IAAa,wBACX,kBACG;CACH,OAAO,kBAAkB,eACrB,SACA,kBAAkB,WAChB,aACA;AACR;AAEA,IAAa,+BACX,kBACG;CACH,OAAO,kBAAkB,YAAY,kBAAkB,aACnD,YACA;AACN;;;;;AAMA,IAAa,kBAAkB,kBAA6C;CAC1E,OAAO,kBAAkB,cAAc,kBAAkB;AAC3D"}

package/dist/js/packages/components/src/components/Icon/components/icons/IconAIHosting.mjs

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { useContextIcon } from "../IconSetProvider.mjs";
+import IconView$1 from "../../../../views/IconView.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { IconAIHosting } from "@mittwald/flow-icons";
+//#region src/components/Icon/components/icons/IconAIHosting.tsx
+var IconAIHosting$1 = (props) => {
+	const Icon = useContextIcon("AIHosting") ?? IconAIHosting;
+	return /* @__PURE__ */ jsx(IconView$1, {
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+};
+//#endregion
+export { IconAIHosting$1 as IconAIHosting, IconAIHosting$1 as default };
+
+//# sourceMappingURL=IconAIHosting.mjs.map

package/dist/js/packages/components/src/components/Icon/components/icons/IconAIHosting.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAIHosting.mjs","names":[],"sources":["../../../../../../../../../src/components/Icon/components/icons/IconAIHosting.tsx"],"sourcesContent":["/* auto-generated file */\nimport React, { type ComponentProps, type FC } from \"react\";\nimport { IconAIHosting as IconImport } from \"@mittwald/flow-icons\";\nimport { type Icon } from \"@/components/Icon\";\nimport View from \"@/views/IconView\";\nimport { useContextIcon } from \"../IconSetProvider\";\n\nexport const IconAIHosting: FC<\n  Omit<ComponentProps<typeof Icon>, \"children\">\n> = (props) => {\n  const fromContext = useContextIcon(\"AIHosting\");\n  const Icon = fromContext ?? IconImport;\n  return (\n    <View {...props}>\n      <Icon />\n    </View>\n  );\n};\n\nexport default IconAIHosting;\n"],"mappings":";;;;;;;;AAOA,IAAa,mBAER,UAAU;CAEb,MAAM,OADc,eAAe,WACtB,KAAe;CAC5B,OACE,oBAAC,YAAD;EAAM,GAAI;EACR,UAAA,oBAAC,MAAD,CAAO,CAAA;CACH,CAAA;AAEV"}

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

@@ -86,14 +86,16 @@ var Modal = flowComponent("Modal", (props) => {
 					};
 				}),
 				closeOverlay: dynamic((props) => {
-					if (props.closeOverlay === void 0) return;
-					if (props.closeOverlay instanceof OverlayController || typeof props.closeOverlay === "string") return {
+					const { closeOverlay } = props;
+					if (closeOverlay === void 0 || closeOverlay === false) return closeOverlay;
+					if (closeOverlay === true) return { bypassConfirmation: true };
+					if (closeOverlay instanceof OverlayController || typeof closeOverlay === "string") return {
 						bypassConfirmation: true,
-						overlay: props.closeOverlay
+						overlay: closeOverlay
 					};
 					return {
 						bypassConfirmation: true,
-						...props.closeOverlay
+						...closeOverlay
 					};
 				})
 			}