@mittwald/flow-react-components 1.3.4 → 1.4.0-next.0

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

@@ -5,6 +5,7 @@ var __locale_default = {
 	"de-DE": {
 		"mode.editor": "Vorschau beenden",
 		"mode.preview": "Vorschau",
+		"toolbar.attachment": "Datei anhängen",
 		"toolbar.bold": "Fett",
 		"toolbar.code": "Code",
 		"toolbar.italic": "Kursiv",
@@ -12,11 +13,15 @@ var __locale_default = {
 		"toolbar.orderedList": "Sortierte Liste",
 		"toolbar.quote": "Zitat",
 		"toolbar.strikeThrough": "Durchgestrichen",
-		"toolbar.unorderedList": "Liste"
+		"toolbar.unorderedList": "Liste",
+		"upload.failed": "{name} konnte nicht hochgeladen werden",
+		"upload.pending": "{name} wird hochgeladen",
+		"upload.succeeded": "{name} wurde hochgeladen"
 	},
 	"en-US": {
 		"mode.editor": "Exit Preview",
 		"mode.preview": "Preview",
+		"toolbar.attachment": "Attach file",
 		"toolbar.bold": "Bold",
 		"toolbar.code": "Code",
 		"toolbar.italic": "Italic",
@@ -24,7 +29,10 @@ var __locale_default = {
 		"toolbar.orderedList": "Ordered List",
 		"toolbar.quote": "Quote",
 		"toolbar.strikeThrough": "Strike through",
-		"toolbar.unorderedList": "List"
+		"toolbar.unorderedList": "List",
+		"upload.failed": "Could not upload {name}",
+		"upload.pending": "Uploading {name}",
+		"upload.succeeded": "Uploaded {name}"
 	}
 };
 //#endregion

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";
@@ -159,4 +160,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, ComponentDefaultsProvider, 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, ComponentDefaultsProvider, 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/CheckboxButton/CheckboxButton.mjs

@@ -22,7 +22,6 @@ var CheckboxButton = flowComponent("CheckboxButton", (props) => {
 		className: clsx(fieldProps.className, CheckboxButton_module_default.checkboxButton, className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Checkbox, {
 			...rest,
-			className: CheckboxButton_module_default.checkbox,
 			inputClassName: clsx(inputClassName, CheckboxButton_module_default.input),
 			children: /* @__PURE__ */ jsx(PropsContextProvider, {
 				props: mergedPropsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox\n          {...rest}\n          className={styles.checkbox}\n          inputClassName={clsx(inputClassName, styles.input)}\n        >\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,YACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,8BAAO,gBAAgB,SAAS;EAFxE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,8BAAO;GAClB,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GAEjD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox {...rest} inputClassName={clsx(inputClassName, styles.input)}>\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,YACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,8BAAO,gBAAgB,SAAS;EAFxE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GAAU,GAAI;GAAM,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GACnE,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

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

@@ -6,16 +6,14 @@ var input = "flow--checkbox-button--input";
 var readonly = "flow--checkbox-button--readonly";
 var content = "flow--checkbox-button--content";
 var label = "flow--checkbox-button--label";
-var checkbox = "flow--checkbox-button--checkbox";
 var CheckboxButton_module_default = {
 	checkboxButton,
 	input,
 	readonly,
 	content,
-	label,
-	checkbox
+	label
 };
 //#endregion
-export { checkbox, checkboxButton, content, CheckboxButton_module_default as default, input, label, readonly };
+export { checkboxButton, content, CheckboxButton_module_default as default, input, label, readonly };
 
 //# sourceMappingURL=CheckboxButton.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.checkboxButton {\n  @include formControl.formHiddenInputScrollBehaviorFix;\n\n  align-self: normal;\n  width: fit-content;\n\n  .input {\n    @include formControl.formControl();\n\n    & {\n      order: unset;\n      height: 100%;\n    }\n\n    /* With content */\n    &:focus-within:not([data-selected], [data-focus-visible]) {\n      border-color: var(--form-control--border-color--default);\n    }\n\n    &[data-invalid]:not([data-selected]) {\n      border-color: var(--form-control--border-color--invalid);\n      background-color: var(--form-control--background-color--invalid);\n    }\n\n    &:has(.content) {\n      display: grid;\n      grid-template:\n        \"icon label\" auto\n        \".    content\" 1fr\n        / auto 1fr;\n\n      .label {\n        font-weight: var(--font-weight--bold);\n      }\n    }\n  }\n\n  /* Elements */\n  .checkbox {\n    flex-grow: 1;\n  }\n\n  .label {\n    grid-area: label;\n  }\n\n  .content {\n    grid-area: content;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CheckboxButton.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.checkboxButton {\n  @include formControl.formHiddenInputScrollBehaviorFix;\n\n  align-self: normal;\n  width: fit-content;\n\n  .input {\n    @include formControl.formControl();\n\n    & {\n      order: unset;\n    }\n\n    /* With content */\n    &:focus-within:not([data-selected], [data-focus-visible]) {\n      border-color: var(--form-control--border-color--default);\n    }\n\n    &[data-invalid]:not([data-selected]) {\n      border-color: var(--form-control--border-color--invalid);\n      background-color: var(--form-control--background-color--invalid);\n    }\n\n    &:has(.content) {\n      display: grid;\n      grid-template-areas:\n        \"icon label\"\n        \".    content\";\n      grid-template-rows: auto 1fr;\n\n      .label {\n        font-weight: var(--font-weight--bold);\n      }\n    }\n  }\n\n  /* Elements */\n  .label {\n    grid-area: label;\n  }\n\n  .content {\n    grid-area: content;\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/CopyButton/CopyButton.mjs

@@ -14,10 +14,11 @@ import { onlyText } from "react-children-utilities";
 //#region src/components/CopyButton/CopyButton.tsx
 /** @flr-generate all */
 var CopyButton = flowComponent("CopyButton", (props) => {
-	const { text = "", ref, variant = "plain", color = "secondary", ...buttonProps } = props;
+	const { text = "", ref, variant = "plain", color = "secondary", onCopy, ...buttonProps } = props;
 	const tooltip = useLocalizedStringFormatter(__locale_default, "CopyButton").format("copy");
-	const copyValue = () => {
-		copy(onlyText(text));
+	const copyValue = async () => {
+		const copiedText = onlyText(text);
+		if (await copy(copiedText)) onCopy?.(copiedText);
 	};
 	return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(Action, {
 		onAction: copyValue,

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.mjs","names":[],"sources":["../../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n  extends\n    Omit<ButtonProps, \"onPress\" | \"aria-label\" | \"render\">,\n    FlowComponentProps<HTMLButtonElement> {\n  /** The text to copy. */\n  text?: string;\n}\n\n/** @flr-generate all */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n  const {\n    text = \"\",\n    ref,\n    variant = \"plain\",\n    color = \"secondary\",\n    ...buttonProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CopyButton\");\n\n  const tooltip = stringFormatter.format(\"copy\");\n\n  const copyValue = () => {\n    copy(onlyText(text));\n  };\n\n  return (\n    <TooltipTrigger>\n      <Action onAction={copyValue} showFeedback>\n        <Button\n          aria-label={tooltip}\n          {...buttonProps}\n          ref={ref}\n          variant={variant}\n          color={color}\n        >\n          <IconCopy />\n        </Button>\n      </Action>\n      <Tooltip>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n});\n\nexport default CopyButton;\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,OAAO,IACP,KACA,UAAU,SACV,QAAQ,aACR,GAAG,gBACD;CAIJ,MAAM,UAFkB,4BAA4B,kBAAS,YAE7C,CAAA,CAAgB,OAAO,MAAM;CAE7C,MAAM,kBAAkB;EACtB,KAAK,SAAS,IAAI,CAAC;CACrB;CAEA,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAQ,UAAU;EAAW,cAAA;EAC3B,UAAA,oBAAC,QAAD;GACE,cAAY;GACZ,GAAI;GACC;GACI;GACF;GAEP,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA;CACF,CAAA,GACR,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CACb,EAAA,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"CopyButton.mjs","names":[],"sources":["../../../../../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import copy from \"copy-to-clipboard\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { Button } from \"@/components/Button\";\nimport { IconCopy } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport { onlyText } from \"react-children-utilities\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Action } from \"@/components/Action\";\n\nexport interface CopyButtonProps\n  extends\n    Omit<ButtonProps, \"onPress\" | \"aria-label\" | \"render\">,\n    FlowComponentProps<HTMLButtonElement> {\n  /** The text to copy. */\n  text?: string;\n  /**\n   * Called with the copied text once it has been written to the clipboard. Not\n   * called when copying fails.\n   */\n  onCopy?: (text: string) => void;\n}\n\n/** @flr-generate all */\nexport const CopyButton = flowComponent(\"CopyButton\", (props) => {\n  const {\n    text = \"\",\n    ref,\n    variant = \"plain\",\n    color = \"secondary\",\n    onCopy,\n    ...buttonProps\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"CopyButton\");\n\n  const tooltip = stringFormatter.format(\"copy\");\n\n  const copyValue = async () => {\n    const copiedText = onlyText(text);\n    if (await copy(copiedText)) {\n      onCopy?.(copiedText);\n    }\n  };\n\n  return (\n    <TooltipTrigger>\n      <Action onAction={copyValue} showFeedback>\n        <Button\n          aria-label={tooltip}\n          {...buttonProps}\n          ref={ref}\n          variant={variant}\n          color={color}\n        >\n          <IconCopy />\n        </Button>\n      </Action>\n      <Tooltip>{tooltip}</Tooltip>\n    </TooltipTrigger>\n  );\n});\n\nexport default CopyButton;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,OAAO,IACP,KACA,UAAU,SACV,QAAQ,aACR,QACA,GAAG,gBACD;CAIJ,MAAM,UAFkB,4BAA4B,kBAAS,YAE7C,CAAA,CAAgB,OAAO,MAAM;CAE7C,MAAM,YAAY,YAAY;EAC5B,MAAM,aAAa,SAAS,IAAI;EAChC,IAAI,MAAM,KAAK,UAAU,GACvB,SAAS,UAAU;CAEvB;CAEA,OACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAQ,UAAU;EAAW,cAAA;EAC3B,UAAA,oBAAC,QAAD;GACE,cAAY;GACZ,GAAI;GACC;GACI;GACF;GAEP,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA;CACF,CAAA,GACR,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA,CACb,EAAA,CAAA;AAEpB,CAAC"}

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/Image/Image.mjs

@@ -7,8 +7,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Image/Image.tsx
 /** @flr-generate all */
 var Image = flowComponent("Image", (props) => {
-	const { className, withBorder, style, aspectRatio, width, height, ref, ...rest } = props;
-	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, aspectRatio && Image_module_default.aspectRatio, className);
+	const { className, withBorder, withRoundedCorners = true, style, aspectRatio, width, height, ref, ...rest } = props;
+	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, withRoundedCorners && Image_module_default.roundedCorners, aspectRatio && Image_module_default.aspectRatio, className);
 	return /* @__PURE__ */ jsx("img", {
 		ref,
 		className: rootClassName,

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

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n  extends\n    Omit<ComponentProps<\"img\">, \"ref\">,\n    FlowComponentProps<HTMLImageElement> {\n  /** Display the image with border and rounded edges. */\n  withBorder?: boolean;\n  /**\n   * The aspect ratio of the images container. Larger images will be centered\n   * and their overflow will be hidden.\n   */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const {\n    className,\n    withBorder,\n    style,\n    aspectRatio,\n    width,\n    height,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{\n        ...style,\n        ...(aspectRatio !== undefined && { aspectRatio }),\n        ...(width !== undefined && { width }),\n        ...(height !== undefined && { height }),\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AAoBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n  extends\n    Omit<ComponentProps<\"img\">, \"ref\">,\n    FlowComponentProps<HTMLImageElement> {\n  /** Display the image with a border. */\n  withBorder?: boolean;\n  /**\n   * Display the image with rounded corners.\n   *\n   * @default true\n   */\n  withRoundedCorners?: boolean;\n  /**\n   * The aspect ratio of the images container. Larger images will be centered\n   * and their overflow will be hidden.\n   */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const {\n    className,\n    withBorder,\n    withRoundedCorners = true,\n    style,\n    aspectRatio,\n    width,\n    height,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    withRoundedCorners && styles.roundedCorners,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{\n        ...style,\n        ...(aspectRatio !== undefined && { aspectRatio }),\n        ...(width !== undefined && { width }),\n        ...(height !== undefined && { height }),\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AA0BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,qBAAqB,MACrB,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,sBAAsB,qBAAO,gBAC7B,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

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

@@ -3,13 +3,15 @@
 //#region src/components/Image/Image.module.scss
 var image = "flow--image";
 var border = "flow--image--border";
+var roundedCorners = "flow--image--rounded-corners";
 var aspectRatio = "flow--image--aspect-ratio";
 var Image_module_default = {
 	image,
 	border,
+	roundedCorners,
 	aspectRatio
 };
 //#endregion
-export { aspectRatio, border, Image_module_default as default, image };
+export { aspectRatio, border, Image_module_default as default, image, roundedCorners };
 
 //# sourceMappingURL=Image.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  max-width: 100%;\n\n  &.border {\n    border-width: var(--image--border-width);\n    border-style: var(--image--border-style);\n    border-radius: var(--image--corner-radius);\n    border-color: var(--image--border-color);\n    overflow: hidden;\n  }\n\n  &:where(.aspectRatio) {\n    overflow-clip-margin: unset;\n    object-fit: cover;\n    width: fit-content;\n    overflow: hidden;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  max-width: 100%;\n\n  &.border {\n    border-width: var(--image--border-width);\n    border-style: var(--image--border-style);\n    border-color: var(--image--border-color);\n  }\n\n  &.roundedCorners {\n    border-radius: var(--image--corner-radius);\n    overflow: hidden;\n  }\n\n  &:where(.aspectRatio) {\n    overflow-clip-margin: unset;\n    object-fit: cover;\n    width: fit-content;\n    overflow: hidden;\n  }\n}\n"],"mappings":""}

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

@@ -10,6 +10,7 @@ import { TextArea } from "../TextArea/TextArea.mjs";
 import { modifyValueByType } from "./lib/modifyValueByType.mjs";
 import { Toolbar } from "./components/Toolbar.mjs";
 import { modifyValueByMarkdownSyntax, scrollToCursor } from "./lib/modifyValueByMarkdownSyntax.mjs";
+import { useFileUpload } from "./lib/useFileUpload.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,11 +22,19 @@ var toolbarActionsTunnel = {
 };
 /** @flr-generate all */
 var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
-	const { isDisabled, isReadOnly, children, className, rows = 5, autoResizeMaxRows, headingOffset, markdownComponent: MarkdownComponent = Markdown, value, onChange, ref, ...rest } = useControlledHostValueProps(props, "");
+	const { isDisabled, isReadOnly, children, className, rows = 5, autoResizeMaxRows, headingOffset, markdownComponent: MarkdownComponent = Markdown, value, onChange, uploadFile, accept, ref, ...rest } = useControlledHostValueProps(props, "");
 	const inputRef = useObjectRef(ref);
 	const [mode, setMode] = useState("editor");
 	const toolbarActionsDisabled = isDisabled || mode === "preview";
-	const rootClassName = clsx(MarkdownEditor_module_default.markdownEditor, MarkdownEditor_module_default[`mode-${mode}`], className);
+	const { dropProps, isDropTarget, uploadFiles } = useFileUpload({
+		accept,
+		uploadFile,
+		isDisabled: isDisabled || isReadOnly || mode === "preview",
+		value,
+		onChange,
+		textAreaRef: inputRef
+	});
+	const rootClassName = clsx(MarkdownEditor_module_default.markdownEditor, MarkdownEditor_module_default[`mode-${mode}`], isDropTarget && MarkdownEditor_module_default.dropTarget, className);
 	const toolbarActionsPropsContext = {
 		...overlayTriggersTunneledTo(toolbarActionsTunnel),
 		Button: {
@@ -63,6 +72,7 @@ var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
 		onChange(newValue);
 	};
 	return /* @__PURE__ */ jsx("div", {
+		...dropProps,
 		className: rootClassName,
 		children: /* @__PURE__ */ jsx(TextArea, {
 			...rest,
@@ -90,7 +100,10 @@ var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
 						currentMode: mode,
 						isDisabled,
 						onModeChange: setMode,
-						onToolPressed: handleToolButtonPressed
+						onToolPressed: handleToolButtonPressed,
+						accept,
+						isReadOnly,
+						onFilesSelected: uploadFiles
 					})
 				]
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type ComponentType, type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport {\n  Markdown as DefaultMarkdown,\n  type MarkdownProps,\n} from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nconst toolbarActionsTunnel = {\n  id: \"toolbarActions\",\n  component: \"MarkdownEditor\",\n} as const;\n\nexport interface MarkdownEditorProps\n  extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {\n  /**\n   * Allows replacing the markdown preview renderer implementation. Defaults to\n   * the internal `Markdown` component.\n   */\n  markdownComponent?: ComponentType<MarkdownProps>;\n}\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n  const {\n    isDisabled,\n    isReadOnly,\n    children,\n    className,\n    rows = 5,\n    autoResizeMaxRows,\n    headingOffset,\n    markdownComponent: MarkdownComponent = DefaultMarkdown,\n    value,\n    onChange,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const inputRef = useObjectRef(ref);\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n  const toolbarActionsDisabled = isDisabled || mode === \"preview\";\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    styles[`mode-${mode}`],\n    className,\n  );\n\n  const toolbarActionsPropsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(toolbarActionsTunnel),\n    Button: {\n      tunnel: toolbarActionsTunnel,\n      size: \"s\",\n      variant: \"plain\",\n      color: \"dark\",\n      isDisabled: toolbarActionsDisabled,\n    },\n  };\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n        scrollToCursor(newValue, inputRef.current);\n      }\n    });\n\n    event.preventDefault();\n    onChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      inputRef,\n    );\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n        inputRef.current.focus();\n      }\n    });\n\n    onChange(newValue);\n  };\n\n  return (\n    <div className={rootClassName}>\n      <TextArea\n        {...rest}\n        aria-hidden={mode === \"preview\"}\n        isReadOnly={isReadOnly || mode === \"preview\"}\n        isDisabled={isDisabled}\n        ref={inputRef}\n        value={value}\n        rows={rows}\n        autoResizeMaxRows={autoResizeMaxRows}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n      >\n        <PropsContextProvider\n          props={toolbarActionsPropsContext}\n          dependencies={[toolbarActionsDisabled]}\n        >\n          {children}\n          {mode === \"preview\" && (\n            <MarkdownComponent\n              headingOffset={headingOffset}\n              className={styles.markdown}\n              style={{\n                height: inputRef.current?.offsetHeight,\n              }}\n            >\n              {value}\n            </MarkdownComponent>\n          )}\n          <Toolbar\n            currentMode={mode}\n            isDisabled={isDisabled}\n            onModeChange={setMode}\n            onToolPressed={handleToolButtonPressed}\n          />\n        </PropsContextProvider>\n      </TextArea>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAYA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,YACA,YACA,UACA,WACA,OAAO,GACP,mBACA,eACA,mBAAmB,oBAAoB,UACvC,OACA,UACA,KACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,CAAC,MAAM,WAAW,SAA6B,QAAQ;CAC7D,MAAM,yBAAyB,cAAc,SAAS;CAEtD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,8BAAO,QAAQ,SACf,SACF;CAEA,MAAM,6BAA2C;EAC/C,GAAG,0BAA0B,oBAAoB;EACjD,QAAQ;GACN,QAAQ;GACR,MAAM;GACN,SAAS;GACT,OAAO;GACP,YAAY;EACd;CACF;CAEA,MAAM,iBAAuC,UAAU;EACrD,IAAI,MAAM,QAAQ,SAChB;EAGF,MAAM,eAAe,4BAA4B,OAAO,QAAQ;EAChE,IAAI,CAAC,cACH;EAGF,MAAM,EAAE,UAAU,mBAAmB,oBAAoB;EAEzD,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,SAAS,kBAAkB,mBAAmB,eAAe;IACtE,eAAe,UAAU,SAAS,OAAO;GAC3C;EACF,CAAC;EAED,MAAM,eAAe;EACrB,SAAS,QAAQ;CACnB;CAEA,MAAM,2BAA2B,SAAqB;EACpD,MAAM,EAAE,UAAU,mBAAmB,oBAAoB,kBACvD,OACA,MACA,QACF;EAEA,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,QAAQ,kBAAkB,mBAAmB,eAAe;IACrE,SAAS,QAAQ,MAAM;GACzB;EACF,CAAC;EAED,SAAS,QAAQ;CACnB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EACd,UAAA,oBAAC,UAAD;GACE,GAAI;GACJ,eAAa,SAAS;GACtB,YAAY,cAAc,SAAS;GACvB;GACZ,KAAK;GACE;GACD;GACa;GACT;GACV,WAAW;GAEX,UAAA,qBAAC,sBAAD;IACE,OAAO;IACP,cAAc,CAAC,sBAAsB;IAFvC,UAAA;KAIG;KACA,SAAS,aACR,oBAAC,mBAAD;MACiB;MACf,WAAW,8BAAO;MAClB,OAAO,EACL,QAAQ,SAAS,SAAS,aAC5B;MAEC,UAAA;KACgB,CAAA;KAErB,oBAAC,SAAD;MACE,aAAa;MACD;MACZ,cAAc;MACd,eAAe;KAChB,CAAA;IACmB;;EACd,CAAA;CACP,CAAA;AAET,CAAC"}
+{"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type ComponentType, type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport {\n  Markdown as DefaultMarkdown,\n  type MarkdownProps,\n} from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport type { MarkdownEditorUpload } from \"@/components/MarkdownEditor/lib/fileUpload\";\nimport { useFileUpload } from \"@/components/MarkdownEditor/lib/useFileUpload\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type { MarkdownEditorUpload };\n\nconst toolbarActionsTunnel = {\n  id: \"toolbarActions\",\n  component: \"MarkdownEditor\",\n} as const;\n\nexport interface MarkdownEditorProps\n  extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {\n  /**\n   * Allows replacing the markdown preview renderer implementation. Defaults to\n   * the internal `Markdown` component.\n   */\n  markdownComponent?: ComponentType<MarkdownProps>;\n  /**\n   * Uploads a file the user dropped onto the editor, pasted into it or picked\n   * with its attachment button. A placeholder comment sits at the cursor while\n   * the returned promise is pending: resolving replaces it with markdown\n   * linking to the file — an image embed for an image — and rejecting takes it\n   * back out. Without this prop the editor takes no files at all.\n   *\n   * Named without an `on` prefix on purpose: the remote generator turns an\n   * `on*` prop into a fire-and-forget event, and this one has to hand a result\n   * back.\n   */\n  uploadFile?: (file: File) => Promise<MarkdownEditorUpload>;\n  /**\n   * Which file types the editor takes, as the `accept` attribute of a file\n   * input: a comma separated list of MIME types (`image/png`), MIME wildcards\n   * (`image/*`) and file extensions (`.png`). Defaults to every type.\n   */\n  accept?: string;\n}\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n  const {\n    isDisabled,\n    isReadOnly,\n    children,\n    className,\n    rows = 5,\n    autoResizeMaxRows,\n    headingOffset,\n    markdownComponent: MarkdownComponent = DefaultMarkdown,\n    value,\n    onChange,\n    uploadFile,\n    accept,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const inputRef = useObjectRef(ref);\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n  const toolbarActionsDisabled = isDisabled || mode === \"preview\";\n\n  const { dropProps, isDropTarget, uploadFiles } = useFileUpload({\n    accept,\n    uploadFile,\n    isDisabled: isDisabled || isReadOnly || mode === \"preview\",\n    value,\n    onChange,\n    textAreaRef: inputRef,\n  });\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    styles[`mode-${mode}`],\n    isDropTarget && styles.dropTarget,\n    className,\n  );\n\n  const toolbarActionsPropsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(toolbarActionsTunnel),\n    Button: {\n      tunnel: toolbarActionsTunnel,\n      size: \"s\",\n      variant: \"plain\",\n      color: \"dark\",\n      isDisabled: toolbarActionsDisabled,\n    },\n  };\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n        scrollToCursor(newValue, inputRef.current);\n      }\n    });\n\n    event.preventDefault();\n    onChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      inputRef,\n    );\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n        inputRef.current.focus();\n      }\n    });\n\n    onChange(newValue);\n  };\n\n  return (\n    <div {...dropProps} className={rootClassName}>\n      <TextArea\n        {...rest}\n        aria-hidden={mode === \"preview\"}\n        isReadOnly={isReadOnly || mode === \"preview\"}\n        isDisabled={isDisabled}\n        ref={inputRef}\n        value={value}\n        rows={rows}\n        autoResizeMaxRows={autoResizeMaxRows}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n      >\n        <PropsContextProvider\n          props={toolbarActionsPropsContext}\n          dependencies={[toolbarActionsDisabled]}\n        >\n          {children}\n          {mode === \"preview\" && (\n            <MarkdownComponent\n              headingOffset={headingOffset}\n              className={styles.markdown}\n              style={{\n                height: inputRef.current?.offsetHeight,\n              }}\n            >\n              {value}\n            </MarkdownComponent>\n          )}\n          <Toolbar\n            currentMode={mode}\n            isDisabled={isDisabled}\n            onModeChange={setMode}\n            onToolPressed={handleToolButtonPressed}\n            accept={accept}\n            isReadOnly={isReadOnly}\n            onFilesSelected={uploadFiles}\n          />\n        </PropsContextProvider>\n      </TextArea>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AA8BA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,YACA,YACA,UACA,WACA,OAAO,GACP,mBACA,eACA,mBAAmB,oBAAoB,UACvC,OACA,UACA,YACA,QACA,KACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,CAAC,MAAM,WAAW,SAA6B,QAAQ;CAC7D,MAAM,yBAAyB,cAAc,SAAS;CAEtD,MAAM,EAAE,WAAW,cAAc,gBAAgB,cAAc;EAC7D;EACA;EACA,YAAY,cAAc,cAAc,SAAS;EACjD;EACA;EACA,aAAa;CACf,CAAC;CAED,MAAM,gBAAgB,KACpB,8BAAO,gBACP,8BAAO,QAAQ,SACf,gBAAgB,8BAAO,YACvB,SACF;CAEA,MAAM,6BAA2C;EAC/C,GAAG,0BAA0B,oBAAoB;EACjD,QAAQ;GACN,QAAQ;GACR,MAAM;GACN,SAAS;GACT,OAAO;GACP,YAAY;EACd;CACF;CAEA,MAAM,iBAAuC,UAAU;EACrD,IAAI,MAAM,QAAQ,SAChB;EAGF,MAAM,eAAe,4BAA4B,OAAO,QAAQ;EAChE,IAAI,CAAC,cACH;EAGF,MAAM,EAAE,UAAU,mBAAmB,oBAAoB;EAEzD,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,SAAS,kBAAkB,mBAAmB,eAAe;IACtE,eAAe,UAAU,SAAS,OAAO;GAC3C;EACF,CAAC;EAED,MAAM,eAAe;EACrB,SAAS,QAAQ;CACnB;CAEA,MAAM,2BAA2B,SAAqB;EACpD,MAAM,EAAE,UAAU,mBAAmB,oBAAoB,kBACvD,OACA,MACA,QACF;EAEA,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,QAAQ,kBAAkB,mBAAmB,eAAe;IACrE,SAAS,QAAQ,MAAM;GACzB;EACF,CAAC;EAED,SAAS,QAAQ;CACnB;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAC7B,UAAA,oBAAC,UAAD;GACE,GAAI;GACJ,eAAa,SAAS;GACtB,YAAY,cAAc,SAAS;GACvB;GACZ,KAAK;GACE;GACD;GACa;GACT;GACV,WAAW;GAEX,UAAA,qBAAC,sBAAD;IACE,OAAO;IACP,cAAc,CAAC,sBAAsB;IAFvC,UAAA;KAIG;KACA,SAAS,aACR,oBAAC,mBAAD;MACiB;MACf,WAAW,8BAAO;MAClB,OAAO,EACL,QAAQ,SAAS,SAAS,aAC5B;MAEC,UAAA;KACgB,CAAA;KAErB,oBAAC,SAAD;MACE,aAAa;MACD;MACZ,cAAc;MACd,eAAe;MACP;MACI;MACZ,iBAAiB;KAClB,CAAA;IACmB;;EACd,CAAA;CACP,CAAA;AAET,CAAC"}

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

@@ -6,6 +6,7 @@ var toolbar = "flow--markdown-editor--toolbar";
 var toolbarButtons = "flow--markdown-editor--toolbar-buttons";
 var modeButton = "flow--markdown-editor--mode-button";
 var markdown = "flow--markdown-editor--markdown";
+var dropTarget = "flow--markdown-editor--drop-target";
 var MarkdownEditor_module_default = {
 	markdownEditor,
 	toolbar,
@@ -13,9 +14,10 @@ var MarkdownEditor_module_default = {
 	modeButton,
 	markdown,
 	"mode-editor": "flow--markdown-editor--mode-editor",
-	"mode-preview": "flow--markdown-editor--mode-preview"
+	"mode-preview": "flow--markdown-editor--mode-preview",
+	dropTarget
 };
 //#endregion
-export { MarkdownEditor_module_default as default, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };
+export { MarkdownEditor_module_default as default, dropTarget, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };
 
 //# sourceMappingURL=MarkdownEditor.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  /* The inner text-area element is react-aria's, but Flow's TextArea puts a\n     class on it — select through that class instead of the element type. */\n  :global(.flow--text-area--input),\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    :global(.flow--text-area--input) {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(:global(.flow--text-area--input:hover)) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(:global(.flow--text-area--input[data-invalid])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-invalid])) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(:global(.flow--text-area--input[data-disabled])).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  /* The inner text-area element is react-aria's, but Flow's TextArea puts a\n     class on it — select through that class instead of the element type. */\n  :global(.flow--text-area--input),\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    :global(.flow--text-area--input) {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(:global(.flow--text-area--input:hover)) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(:global(.flow--text-area--input[data-invalid])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-invalid])) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(:global(.flow--text-area--input[data-disabled])).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n\n  /* A drag over the editor reads as its focused state -- dropping focuses it. */\n  &.dropTarget {\n    .toolbar,\n    .markdown,\n    :global(.flow--text-area--input) {\n      background-color: var(--form-control--background-color--focused);\n      border-color: var(--form-control--border-color--focused);\n    }\n  }\n}\n"],"mappings":""}