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

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

@@ -7,14 +7,14 @@ var __locale_default = {
 		"unsavedChangesConfirmationModal.close": "Schließen",
 		"unsavedChangesConfirmationModal.heading": "Ungespeicherte Änderungen",
 		"unsavedChangesConfirmationModal.keepOpen": "Weiter bearbeiten",
-		"unsavedChangesConfirmationModal.text": "Du hast ungespeicherte Änderungen. Möchtest du das Modal wirklich schließen? Alle Änderungen gehen dabei verloren."
+		"unsavedChangesConfirmationModal.text": "Du hast ungespeicherte Änderungen. Möchtest du wirklich schließen? Alle Änderungen gehen dabei verloren."
 	},
 	"en-US": {
 		"close": "Close",
 		"unsavedChangesConfirmationModal.close": "Close",
 		"unsavedChangesConfirmationModal.heading": "Unsaved changes",
 		"unsavedChangesConfirmationModal.keepOpen": "Keep editing",
-		"unsavedChangesConfirmationModal.text": "You have unsaved changes. Are you sure you want to close the modal? All changes will be lost."
+		"unsavedChangesConfirmationModal.text": "You have unsaved changes. Are you sure you want to close? All changes will be lost."
 	}
 };
 //#endregion

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

@@ -1,15 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@926b2109eb7c356d3d5e61c950de4c00
+//#region \0.locale.json@2afcd5ef8c1b0149e7cf01ad82b85360
 var __locale_default = {
-	"de-DE": {
-		"fallbackTab.heading": "Tab nicht gefunden",
-		"fallbackTab.text": "Das Tab das du aufrufen wolltest gibt es nicht mehr oder du hast keinen Zugriff darauf."
-	},
-	"en-US": {
-		"fallbackTab.heading": "Tab not found",
-		"fallbackTab.text": "The tab you tried to access no longer exists or you do not have permission to view it."
-	}
+	"de-DE": { "loading": "Inhalt wird geladen" },
+	"en-US": { "loading": "Loading content" }
 };
 //#endregion
 export { __locale_default as default };

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

@@ -1,16 +1,14 @@
 "use client"
 /* */
-//#region \0.locale.json@16189d7d260d7331b0e0a1936d5c7c52
+//#region \0.locale.json@926b2109eb7c356d3d5e61c950de4c00
 var __locale_default = {
 	"de-DE": {
-		"characters": "{maxCount, select, 0 {{count}} other {{count}/{maxCount}}} Zeichen",
-		"password.hide": "Passwort verbergen",
-		"password.show": "Passwort anzeigen"
+		"fallbackTab.heading": "Tab nicht gefunden",
+		"fallbackTab.text": "Das Tab das du aufrufen wolltest gibt es nicht mehr oder du hast keinen Zugriff darauf."
 	},
 	"en-US": {
-		"characters": "{maxCount, select, 0 {{count}} other {{count}/{maxCount}}} characters",
-		"password.hide": "Show password",
-		"password.show": "Hide password"
+		"fallbackTab.heading": "Tab not found",
+		"fallbackTab.text": "The tab you tried to access no longer exists or you do not have permission to view it."
 	}
 };
 //#endregion

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

@@ -1,22 +1,16 @@
 "use client"
 /* */
-//#region \0.locale.json@72ba2ce40f190df671686fec50c04ddf
+//#region \0.locale.json@16189d7d260d7331b0e0a1936d5c7c52
 var __locale_default = {
 	"de-DE": {
-		"validation.max": "Maximale Anzahl von {number} erreicht",
-		"validation.maxLength": "Bitte gib höchstens {number} Zeichen ein",
-		"validation.min": "Minimale Anzahl von {number} noch nicht erreicht",
-		"validation.minLength": "Bitte gib mindestens {number} Zeichen ein",
-		"validation.pattern": "Entspricht nicht dem erwarteten Format: {pattern}",
-		"validation.required": "Dieses Feld ist erforderlich"
+		"characters": "{maxCount, select, 0 {{count}} other {{count}/{maxCount}}} Zeichen",
+		"password.hide": "Passwort verbergen",
+		"password.show": "Passwort anzeigen"
 	},
 	"en-US": {
-		"validation.max": "Maximum number of {number} reached",
-		"validation.maxLength": "Please enter at most {number} characters",
-		"validation.min": "Minimum number of {number} has not yet been reached",
-		"validation.minLength": "Please enter at least {number} characters",
-		"validation.pattern": "Does not match the expected format: {pattern}",
-		"validation.required": "This field is required"
+		"characters": "{maxCount, select, 0 {{count}} other {{count}/{maxCount}}} characters",
+		"password.hide": "Show password",
+		"password.show": "Hide password"
 	}
 };
 //#endregion

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

@@ -0,0 +1,23 @@
+"use client"
+/* */
+//#region \0.locale.json@72ba2ce40f190df671686fec50c04ddf
+var __locale_default = {
+	"de-DE": {
+		"validation.max": "Maximale Anzahl von {number} erreicht",
+		"validation.maxLength": "Bitte gib höchstens {number} Zeichen ein",
+		"validation.min": "Minimale Anzahl von {number} noch nicht erreicht",
+		"validation.minLength": "Bitte gib mindestens {number} Zeichen ein",
+		"validation.pattern": "Entspricht nicht dem erwarteten Format: {pattern}",
+		"validation.required": "Dieses Feld ist erforderlich"
+	},
+	"en-US": {
+		"validation.max": "Maximum number of {number} reached",
+		"validation.maxLength": "Please enter at most {number} characters",
+		"validation.min": "Minimum number of {number} has not yet been reached",
+		"validation.minLength": "Please enter at least {number} characters",
+		"validation.pattern": "Does not match the expected format: {pattern}",
+		"validation.required": "This field is required"
+	}
+};
+//#endregion
+export { __locale_default as default };

package/dist/js/default.mjs

@@ -175,6 +175,7 @@ import { ActionBatch } from "./packages/components/src/components/Action/ActionB
 import { ActionGroup } from "./packages/components/src/components/ActionGroup/ActionGroup.mjs";
 import { AlertIcon } from "./packages/components/src/components/AlertIcon/AlertIcon.mjs";
 import { Alert } from "./packages/components/src/components/Alert/Alert.mjs";
+import { SkeletonText } from "./packages/components/src/components/SkeletonText/SkeletonText.mjs";
 import { Text } from "./packages/components/src/components/Text/Text.mjs";
 import { AlertBadge } from "./packages/components/src/components/AlertBadge/AlertBadge.mjs";
 import { AlertText } from "./packages/components/src/components/AlertText/AlertText.mjs";
@@ -212,7 +213,6 @@ import { Legend } from "./packages/components/src/components/Legend/Legend.mjs";
 import { LegendItem } from "./packages/components/src/components/Legend/components/LegendItem/LegendItem.mjs";
 import { ChartLegend, TypedChartLegend } from "./packages/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs";
 import { Heading } from "./packages/components/src/components/Heading/Heading.mjs";
-import { SkeletonText } from "./packages/components/src/components/SkeletonText/SkeletonText.mjs";
 import { ProgressBar } from "./packages/components/src/components/ProgressBar/ProgressBar.mjs";
 import { Label } from "./packages/components/src/components/Label/Label.mjs";
 import { Flex } from "./packages/components/src/components/Flex/Flex.mjs";
@@ -330,6 +330,7 @@ import { SegmentedControl } from "./packages/components/src/components/Segmented
 import { Segment } from "./packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs";
 import { Select } from "./packages/components/src/components/Select/Select.mjs";
 import { Kbd } from "./packages/components/src/components/Kbd/Kbd.mjs";
+import { SkeletonMode } from "./packages/components/src/components/SkeletonMode/SkeletonMode.mjs";
 import { TableFooterRow } from "./packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.mjs";
 import { Tabs } from "./packages/components/src/components/Tabs/Tabs.mjs";
 import { TabTitle } from "./packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs";
@@ -338,4 +339,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, 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 };
+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, SkeletonMode, 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/packages/components/src/components/AccentBox/AccentBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccentBox.mjs","names":[],"sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  AccentBoxBackgroundColor | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The background color of the accent box. @default \"neutral\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"neutral\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n    className,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element className={rootClassName} style={style}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"mappings":";;;;;;;;AAcA,IAAM,4BAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,SAAS,YACP,WACuC;CAGvC,OACE,OAAO,cAAc,YACrB,0BAA6B,SAAS,SAAS;AAEnD;;;;;AAsBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,OAAO,gBACP,kBAAkB,WAClB,iBACA,UACA,cAAc,OACd,WACA,OAAO,gBACP,gBACE;CAQJ,MAAM,QAAQ,mBALX,mBAAyC,cAC1C,oBAAoB,aAChB,SACA;CAIN,MAAM,eAAe,YAAY,eAAe;CAGhD,MAAM,2BACH,mBAAyC,aACzC,mBAAyC,cACzC,mBAAyC,UACrC,iBACD,KAAA;CAEN,MAAM,QAAQ;EACZ,iBAAiB,eAAe,KAAA,IAAY;EAC5C,iBAAiB,kBAAkB,OAAO,gBAAgB,KAAK,KAAA;EAC/D;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,KACpB,yBAAO,WACP,2BACI,yBAAO,4BACP,eACE,yBAAO,mBACP,KAAA,GACN,SACF;CAEA,MAAM,UAAU;CAEhB,MAAM,eAAe,UAAU,YAAY,KAAA,IAAY;CAEvD,MAAM,eAA6B;EACjC,MAAM,EACJ,OAAO,aACT;EACA,MAAM,EACJ,OAAO,aACT;EACA,SAAS,EACP,OAAO,aACT;EACA,MAAM,EACJ,WAAW,yBAAO,KACpB;CACF;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAsB;EACxC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,CAAC"}
+{"version":3,"file":"AccentBox.mjs","names":["anyAccentBoxBackgroundColors","styles"],"sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  AccentBoxBackgroundColor | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The background color of the accent box. @default \"neutral\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"neutral\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n    className,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element className={rootClassName} style={style}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"mappings":";;;;;;;;AAcA,IAAM,4BAA4B;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,SAAS,YACP,WACuC;CAGvC,OACE,OAAO,cAAc,YACrBA,0BAA6B,SAAS,SAAS;AAEnD;;;;;AAsBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,OAAO,gBACP,kBAAkB,WAClB,iBACA,UACA,cAAc,OACd,WACA,OAAO,gBACP,gBACE;CAQJ,MAAM,QAAQ,mBALX,mBAAyC,cAC1C,oBAAoB,aAChB,SACA;CAIN,MAAM,eAAe,YAAY,eAAe;CAGhD,MAAM,2BACH,mBAAyC,aACzC,mBAAyC,cACzC,mBAAyC,UACrC,iBACD,KAAA;CAEN,MAAM,QAAQ;EACZ,iBAAiB,eAAe,KAAA,IAAY;EAC5C,iBAAiB,kBAAkB,OAAO,gBAAgB,KAAK,KAAA;EAC/D;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,KACpBC,yBAAO,WACP,2BACIA,yBAAO,4BACP,eACEA,yBAAO,mBACP,KAAA,GACN,SACF;CAEA,MAAM,UAAU;CAEhB,MAAM,eAAe,UAAU,YAAY,KAAA,IAAY;CAEvD,MAAM,eAA6B;EACjC,MAAM,EACJ,OAAO,aACT;EACA,MAAM,EACJ,OAAO,aACT;EACA,SAAS,EACP,OAAO,aACT;EACA,MAAM,EACJ,WAAWA,yBAAO,KACpB;CACF;CAEA,OACE,oBAAC,SAAD;EAAS,WAAW;EAAsB;EACxC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/focus\";\n\n.accordion {\n  display: flex;\n  flex-direction: column;\n\n  /* Elements */\n\n  .header {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .headerButton {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    text-align: start;\n    flex-grow: 1;\n    padding-inline: var(--accordion--padding-x);\n    padding-block: var(--accordion--padding-y);\n    border-radius: var(--accordion--corner-radius);\n    column-gap: var(--accordion--spacing);\n    border: none;\n    background: none;\n    width: 100%;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--fast);\n\n    @include focus.focus;\n\n    &:hover {\n      background-color: var(--accordion--background-color--hover);\n    }\n  }\n\n  .content {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition-property: grid-template-rows, visibility;\n    visibility: hidden;\n\n    @include expandTransition.expandTransition;\n  }\n\n  .contentInner {\n    overflow: hidden;\n    padding-inline: var(--accordion--padding-x);\n    transition-property: padding;\n\n    @include expandTransition.expandTransition;\n  }\n\n  .chevron {\n    transition-property: transform;\n\n    @include expandTransition.expandTransition;\n  }\n\n  &.outline {\n    border-color: var(--accordion--border-color);\n    border-width: var(--accordion--border-width);\n    border-style: var(--accordion--border-style);\n    border-radius: var(--accordion--corner-radius);\n  }\n\n  &.expanded {\n    .content {\n      grid-template-rows: 1fr;\n      visibility: visible;\n    }\n\n    .contentInner {\n      padding-block: var(--accordion--padding-y);\n    }\n\n    .chevron {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/focus\";\n\n.accordion {\n  display: flex;\n  flex-direction: column;\n\n  /* Elements */\n\n  .header {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .headerButton {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    text-align: start;\n    flex-grow: 1;\n    padding-inline: var(--accordion--padding-x);\n    padding-block: var(--accordion--padding-y);\n    border-radius: var(--accordion--corner-radius);\n    column-gap: var(--accordion--spacing);\n    border: none;\n    background: none;\n    width: 100%;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--fast);\n\n    @include focus.focus;\n\n    &:hover {\n      background-color: var(--accordion--background-color--hover);\n    }\n  }\n\n  /* Animates `height` to `auto` instead of the `grid-template-rows: 0fr/1fr`\n     trick: in Chromium, hover backgrounds inside a grid row sporadically\n     drop out for a frame. Browsers without `interpolate-size` expand without\n     animation. `display: block` overrides the `hidden` attribute. */\n  .content {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    interpolate-size: allow-keywords;\n    transition-property: height, visibility;\n    visibility: hidden;\n\n    @include expandTransition.expandTransition;\n  }\n\n  .contentInner {\n    overflow: hidden;\n    padding-inline: var(--accordion--padding-x);\n    transition-property: padding;\n\n    @include expandTransition.expandTransition;\n  }\n\n  .chevron {\n    transition-property: transform;\n\n    @include expandTransition.expandTransition;\n  }\n\n  &.outline {\n    border-color: var(--accordion--border-color);\n    border-width: var(--accordion--border-width);\n    border-style: var(--accordion--border-style);\n    border-radius: var(--accordion--corner-radius);\n  }\n\n  &.expanded {\n    .content {\n      height: auto;\n      visibility: visible;\n    }\n\n    .contentInner {\n      padding-block: var(--accordion--padding-y);\n    }\n\n    .chevron {\n      transform: rotate(180deg);\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Action/lib/ariaLive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ariaLive.mjs","names":[],"sources":["../../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n  isPendingText?: string;\n  isSucceededText?: string;\n  isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n  actionState: ActionStateValue,\n  options: Options = {},\n): void => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  const {\n    isPendingText = formatter.format(\"action.isPending\"),\n    isSucceededText = formatter.format(\"action.isSucceeded\"),\n    isFailedText = formatter.format(\"action.isFailed\"),\n  } = options;\n\n  useEffect(() => {\n    if (actionState === \"isPending\") {\n      announce(isPendingText, \"polite\");\n    } else if (actionState === \"isSucceeded\") {\n      announce(isSucceededText, \"polite\");\n    } else if (actionState === \"isFailed\") {\n      announce(isFailedText, \"polite\");\n    }\n  }, [actionState]);\n};\n\nexport const useAriaAnnounceSuspense = () => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      const isPendingText = formatter.format(\"suspense.isPending\");\n      announce(isPendingText, \"polite\");\n    }, 750);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;AAYA,IAAa,8BACX,aACA,UAAmB,CAAC,MACX;CACT,MAAM,YAAY,4BAA4B,kBAAS,cAAc;CAErE,MAAM,EACJ,gBAAgB,UAAU,OAAO,kBAAkB,GACnD,kBAAkB,UAAU,OAAO,oBAAoB,GACvD,eAAe,UAAU,OAAO,iBAAiB,MAC/C;CAEJ,gBAAgB;EACd,IAAI,gBAAgB,aAClB,SAAS,eAAe,QAAQ;OAC3B,IAAI,gBAAgB,eACzB,SAAS,iBAAiB,QAAQ;OAC7B,IAAI,gBAAgB,YACzB,SAAS,cAAc,QAAQ;CAEnC,GAAG,CAAC,WAAW,CAAC;AAClB;AAEA,IAAa,gCAAgC;CAC3C,MAAM,YAAY,4BAA4B,kBAAS,cAAc;CAErE,gBAAgB;EACd,MAAM,UAAU,iBAAiB;GAC/B,MAAM,gBAAgB,UAAU,OAAO,oBAAoB;GAC3D,SAAS,eAAe,QAAQ;EAClC,GAAG,GAAG;EAEN,aAAa;GACX,aAAa,OAAO;EACtB;CACF,GAAG,CAAC,CAAC;AACP"}
+{"version":3,"file":"ariaLive.mjs","names":["locales"],"sources":["../../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n  isPendingText?: string;\n  isSucceededText?: string;\n  isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n  actionState: ActionStateValue,\n  options: Options = {},\n): void => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  const {\n    isPendingText = formatter.format(\"action.isPending\"),\n    isSucceededText = formatter.format(\"action.isSucceeded\"),\n    isFailedText = formatter.format(\"action.isFailed\"),\n  } = options;\n\n  useEffect(() => {\n    if (actionState === \"isPending\") {\n      announce(isPendingText, \"polite\");\n    } else if (actionState === \"isSucceeded\") {\n      announce(isSucceededText, \"polite\");\n    } else if (actionState === \"isFailed\") {\n      announce(isFailedText, \"polite\");\n    }\n  }, [actionState]);\n};\n\nexport const useAriaAnnounceSuspense = () => {\n  const formatter = useLocalizedStringFormatter(locales, \"AriaAnnounce\");\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      const isPendingText = formatter.format(\"suspense.isPending\");\n      announce(isPendingText, \"polite\");\n    }, 750);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, []);\n};\n"],"mappings":";;;;;;;AAYA,IAAa,8BACX,aACA,UAAmB,CAAC,MACX;CACT,MAAM,YAAY,4BAA4BA,kBAAS,cAAc;CAErE,MAAM,EACJ,gBAAgB,UAAU,OAAO,kBAAkB,GACnD,kBAAkB,UAAU,OAAO,oBAAoB,GACvD,eAAe,UAAU,OAAO,iBAAiB,MAC/C;CAEJ,gBAAgB;EACd,IAAI,gBAAgB,aAClB,SAAS,eAAe,QAAQ;OAC3B,IAAI,gBAAgB,eACzB,SAAS,iBAAiB,QAAQ;OAC7B,IAAI,gBAAgB,YACzB,SAAS,cAAc,QAAQ;CAEnC,GAAG,CAAC,WAAW,CAAC;AAClB;AAEA,IAAa,gCAAgC;CAC3C,MAAM,YAAY,4BAA4BA,kBAAS,cAAc;CAErE,gBAAgB;EACd,MAAM,UAAU,iBAAiB;GAC/B,MAAM,gBAAgB,UAAU,OAAO,oBAAoB;GAC3D,SAAS,eAAe,QAAQ;EAClC,GAAG,GAAG;EAEN,aAAa;GACX,aAAa,OAAO;EACtB;CACF,GAAG,CAAC,CAAC;AACP"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionState.mjs","names":[],"sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  action as mobxAction,\n  computed,\n  makeObservable,\n  observable,\n} from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { sleep } from \"@/lib/promises/sleep\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type ActionStateValue =\n  \"isIdle\" | \"isSucceeded\" | \"isPending\" | \"isExecuting\" | \"isFailed\";\n\nexport const duration = {\n  pending: 1000,\n  succeeded: 800,\n  failed: 2000,\n};\n\nexport class ActionState {\n  private showFeedback?: boolean;\n  public state: ActionStateValue = \"isIdle\";\n  private setPendingTimeout: number | undefined;\n  public error: unknown;\n  private isAsync = false;\n\n  public constructor() {\n    makeObservable(this, {\n      state: observable,\n      updateState: mobxAction,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public updateState(newState: ActionStateValue): void {\n    this.state = newState;\n  }\n\n  public useValue(): ActionStateValue {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n\n  public get isBusy(): boolean {\n    return this.state !== \"isIdle\";\n  }\n\n  public onAsyncStart(): void {\n    this.clearPendingTimeout();\n    this.isAsync = true;\n    this.updateState(\"isExecuting\");\n    this.setPendingTimeout = window.setTimeout(\n      () => this.startPending(),\n      duration.pending,\n    );\n  }\n\n  public async onSucceeded(): Promise<void> {\n    await this.onDone();\n  }\n\n  public async onFailed(error?: unknown): Promise<void> {\n    this.error = error ?? new Error(\"Unknown error\");\n    await this.onDone();\n  }\n\n  public withFeedback(feedback?: boolean): ActionState {\n    this.showFeedback = feedback;\n    return this;\n  }\n\n  private async startFailedFeedback(): Promise<void> {\n    this.updateState(\"isFailed\");\n    await sleep(duration.failed);\n    this.resetAfterDone();\n  }\n\n  private async startSucceededFeedback(): Promise<void> {\n    this.updateState(\"isSucceeded\");\n    await sleep(duration.succeeded);\n    this.resetAfterDone();\n  }\n\n  private resetAfterDone(): void {\n    this.updateState(\"isIdle\");\n    this.isAsync = false;\n    this.error = undefined;\n  }\n\n  private clearPendingTimeout(): void {\n    if (this.setPendingTimeout) {\n      window.clearTimeout(this.setPendingTimeout);\n    }\n  }\n\n  private onDone(): Promise<void> | void {\n    this.clearPendingTimeout();\n    if (this.error) {\n      return this.startFailedFeedback();\n    } else if (\n      this.showFeedback !== false &&\n      (this.showFeedback || this.isAsync)\n    ) {\n      return this.startSucceededFeedback();\n    } else {\n      this.resetAfterDone();\n    }\n  }\n\n  private startPending(): void {\n    this.updateState(\"isPending\");\n  }\n}\n"],"mappings":";;;;;;;AAaA,IAAa,WAAW;CACtB,SAAS;CACT,WAAW;CACX,QAAQ;AACV;AAEA,IAAa,cAAb,MAAa,YAAY;CACvB;CACA,QAAiC;CACjC;CACA;CACA,UAAkB;CAElB,cAAqB;EACnB,eAAe,MAAM;GACnB,OAAO;GACP,aAAa;GACb,QAAQ;EACV,CAAC;CACH;CAEA,OAAc,SAAsB;EAClC,OAAO,gBAAgB,IAAI,YAAY,CAAC;CAC1C;CAEA,YAAmB,UAAkC;EACnD,KAAK,QAAQ;CACf;CAEA,WAAoC;EAClC,OAAO,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC;CAC7C;CAEA,YAA4B;EAC1B,OAAO,kBAAkB,KAAK,QAAQ,CAAC,IAAI,CAAC;CAC9C;CAEA,IAAW,SAAkB;EAC3B,OAAO,KAAK,UAAU;CACxB;CAEA,eAA4B;EAC1B,KAAK,oBAAoB;EACzB,KAAK,UAAU;EACf,KAAK,YAAY,aAAa;EAC9B,KAAK,oBAAoB,OAAO,iBACxB,KAAK,aAAa,GACxB,SAAS,OACX;CACF;CAEA,MAAa,cAA6B;EACxC,MAAM,KAAK,OAAO;CACpB;CAEA,MAAa,SAAS,OAAgC;EACpD,KAAK,QAAQ,yBAAS,IAAI,MAAM,eAAe;EAC/C,MAAM,KAAK,OAAO;CACpB;CAEA,aAAoB,UAAiC;EACnD,KAAK,eAAe;EACpB,OAAO;CACT;CAEA,MAAc,sBAAqC;EACjD,KAAK,YAAY,UAAU;EAC3B,MAAM,MAAM,SAAS,MAAM;EAC3B,KAAK,eAAe;CACtB;CAEA,MAAc,yBAAwC;EACpD,KAAK,YAAY,aAAa;EAC9B,MAAM,MAAM,SAAS,SAAS;EAC9B,KAAK,eAAe;CACtB;CAEA,iBAA+B;EAC7B,KAAK,YAAY,QAAQ;EACzB,KAAK,UAAU;EACf,KAAK,QAAQ,KAAA;CACf;CAEA,sBAAoC;EAClC,IAAI,KAAK,mBACP,OAAO,aAAa,KAAK,iBAAiB;CAE9C;CAEA,SAAuC;EACrC,KAAK,oBAAoB;EACzB,IAAI,KAAK,OACP,OAAO,KAAK,oBAAoB;OAC3B,IACL,KAAK,iBAAiB,UACrB,KAAK,gBAAgB,KAAK,UAE3B,OAAO,KAAK,uBAAuB;OAEnC,KAAK,eAAe;CAExB;CAEA,eAA6B;EAC3B,KAAK,YAAY,WAAW;CAC9B;AACF"}
+{"version":3,"file":"ActionState.mjs","names":["mobxAction"],"sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  action as mobxAction,\n  computed,\n  makeObservable,\n  observable,\n} from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { sleep } from \"@/lib/promises/sleep\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type ActionStateValue =\n  \"isIdle\" | \"isSucceeded\" | \"isPending\" | \"isExecuting\" | \"isFailed\";\n\nexport const duration = {\n  pending: 1000,\n  succeeded: 800,\n  failed: 2000,\n};\n\nexport class ActionState {\n  private showFeedback?: boolean;\n  public state: ActionStateValue = \"isIdle\";\n  private setPendingTimeout: number | undefined;\n  public error: unknown;\n  private isAsync = false;\n\n  public constructor() {\n    makeObservable(this, {\n      state: observable,\n      updateState: mobxAction,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public updateState(newState: ActionStateValue): void {\n    this.state = newState;\n  }\n\n  public useValue(): ActionStateValue {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n\n  public get isBusy(): boolean {\n    return this.state !== \"isIdle\";\n  }\n\n  public onAsyncStart(): void {\n    this.clearPendingTimeout();\n    this.isAsync = true;\n    this.updateState(\"isExecuting\");\n    this.setPendingTimeout = window.setTimeout(\n      () => this.startPending(),\n      duration.pending,\n    );\n  }\n\n  public async onSucceeded(): Promise<void> {\n    await this.onDone();\n  }\n\n  public async onFailed(error?: unknown): Promise<void> {\n    this.error = error ?? new Error(\"Unknown error\");\n    await this.onDone();\n  }\n\n  public withFeedback(feedback?: boolean): ActionState {\n    this.showFeedback = feedback;\n    return this;\n  }\n\n  private async startFailedFeedback(): Promise<void> {\n    this.updateState(\"isFailed\");\n    await sleep(duration.failed);\n    this.resetAfterDone();\n  }\n\n  private async startSucceededFeedback(): Promise<void> {\n    this.updateState(\"isSucceeded\");\n    await sleep(duration.succeeded);\n    this.resetAfterDone();\n  }\n\n  private resetAfterDone(): void {\n    this.updateState(\"isIdle\");\n    this.isAsync = false;\n    this.error = undefined;\n  }\n\n  private clearPendingTimeout(): void {\n    if (this.setPendingTimeout) {\n      window.clearTimeout(this.setPendingTimeout);\n    }\n  }\n\n  private onDone(): Promise<void> | void {\n    this.clearPendingTimeout();\n    if (this.error) {\n      return this.startFailedFeedback();\n    } else if (\n      this.showFeedback !== false &&\n      (this.showFeedback || this.isAsync)\n    ) {\n      return this.startSucceededFeedback();\n    } else {\n      this.resetAfterDone();\n    }\n  }\n\n  private startPending(): void {\n    this.updateState(\"isPending\");\n  }\n}\n"],"mappings":";;;;;;;AAaA,IAAa,WAAW;CACtB,SAAS;CACT,WAAW;CACX,QAAQ;AACV;AAEA,IAAa,cAAb,MAAa,YAAY;CACvB;CACA,QAAiC;CACjC;CACA;CACA,UAAkB;CAElB,cAAqB;EACnB,eAAe,MAAM;GACnB,OAAO;GACP,aAAaA;GACb,QAAQ;EACV,CAAC;CACH;CAEA,OAAc,SAAsB;EAClC,OAAO,gBAAgB,IAAI,YAAY,CAAC;CAC1C;CAEA,YAAmB,UAAkC;EACnD,KAAK,QAAQ;CACf;CAEA,WAAoC;EAClC,OAAO,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC;CAC7C;CAEA,YAA4B;EAC1B,OAAO,kBAAkB,KAAK,QAAQ,CAAC,IAAI,CAAC;CAC9C;CAEA,IAAW,SAAkB;EAC3B,OAAO,KAAK,UAAU;CACxB;CAEA,eAA4B;EAC1B,KAAK,oBAAoB;EACzB,KAAK,UAAU;EACf,KAAK,YAAY,aAAa;EAC9B,KAAK,oBAAoB,OAAO,iBACxB,KAAK,aAAa,GACxB,SAAS,OACX;CACF;CAEA,MAAa,cAA6B;EACxC,MAAM,KAAK,OAAO;CACpB;CAEA,MAAa,SAAS,OAAgC;EACpD,KAAK,QAAQ,yBAAS,IAAI,MAAM,eAAe;EAC/C,MAAM,KAAK,OAAO;CACpB;CAEA,aAAoB,UAAiC;EACnD,KAAK,eAAe;EACpB,OAAO;CACT;CAEA,MAAc,sBAAqC;EACjD,KAAK,YAAY,UAAU;EAC3B,MAAM,MAAM,SAAS,MAAM;EAC3B,KAAK,eAAe;CACtB;CAEA,MAAc,yBAAwC;EACpD,KAAK,YAAY,aAAa;EAC9B,MAAM,MAAM,SAAS,SAAS;EAC9B,KAAK,eAAe;CACtB;CAEA,iBAA+B;EAC7B,KAAK,YAAY,QAAQ;EACzB,KAAK,UAAU;EACf,KAAK,QAAQ,KAAA;CACf;CAEA,sBAAoC;EAClC,IAAI,KAAK,mBACP,OAAO,aAAa,KAAK,iBAAiB;CAE9C;CAEA,SAAuC;EACrC,KAAK,oBAAoB;EACzB,IAAI,KAAK,OACP,OAAO,KAAK,oBAAoB;OAC3B,IACL,KAAK,iBAAiB,UACrB,KAAK,gBAAgB,KAAK,UAE3B,OAAO,KAAK,uBAAuB;OAEnC,KAAK,eAAe;CAExB;CAEA,eAA6B;EAC3B,KAAK,YAAY,WAAW;CAC9B;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\nimport type { ButtonProps } from \"@/components/Button\";\n\nexport interface ActionGroupProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithClassName {\n  /** The spacing between the buttons inside the action group. @default \"s\" */\n  spacing?: \"s\" | \"m\";\n  /** The size of the buttons and links inside the action group. @default \"m\" */\n  size?: ButtonProps[\"size\"];\n  /**\n   * When set, the buttons are not sorted automatically but stay in source\n   * order. @default false\n   */\n  preserveOrder?: boolean;\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n  \"ActionGroup\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      spacing = \"s\",\n      size,\n      preserveOrder = false,\n      ...rest\n    } = props;\n\n    const rootClassName = clsx(\n      styles.actionGroup,\n      styles[spacing],\n      !preserveOrder && styles.sorted,\n      className,\n    );\n\n    const propsContext: PropsContext = preserveOrder\n      ? {\n          Button: { size },\n          Switch: {\n            labelPosition: \"leading\",\n          },\n          Link: { size },\n        }\n      : {\n          Button: {\n            size,\n            slot: dynamic((props) => getActionGroupSlot(props)),\n            className: dynamic((props) => {\n              const slot = getActionGroupSlot(props);\n              return clsx(props.className, styleClassname(styles, slot));\n            }),\n          },\n          Switch: {\n            labelPosition: \"leading\",\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n          Link: {\n            size,\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n        };\n\n    return (\n      <ActionStateContextProvider>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[preserveOrder, size]}\n        >\n          <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n            {children}\n          </div>\n        </PropsContextProvider>\n      </ActionStateContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ActionGroup;\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAa,cAAc,cACzB,gBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,UAAU,KACV,MACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,2BAAO,aACP,2BAAO,UACP,CAAC,iBAAiB,2BAAO,QACzB,SACF;CAEA,MAAM,eAA6B,gBAC/B;EACE,QAAQ,EAAE,KAAK;EACf,QAAQ,EACN,eAAe,UACjB;EACA,MAAM,EAAE,KAAK;CACf,IACA;EACE,QAAQ;GACN;GACA,MAAM,SAAS,UAAU,mBAAmB,KAAK,CAAC;GAClD,WAAW,SAAS,UAAU;IAC5B,MAAM,OAAO,mBAAmB,KAAK;IACrC,OAAO,KAAK,MAAM,WAAW,eAAe,4BAAQ,IAAI,CAAC;GAC3D,CAAC;EACH;EACA,QAAQ;GACN,eAAe;GACf,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAe,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;EACA,MAAM;GACJ;GACA,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAe,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;CACF;CAEJ,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,sBAAD;EACE,OAAO;EACP,cAAc,CAAC,eAAe,IAAI;EAElC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW;GAAoB;GAAK,MAAK;GACrD;EACE,CAAA;CACe,CAAA,EACI,CAAA;AAEhC,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"ActionGroup.mjs","names":["styles"],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\nimport type { ButtonProps } from \"@/components/Button\";\n\nexport interface ActionGroupProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithClassName {\n  /** The spacing between the buttons inside the action group. @default \"s\" */\n  spacing?: \"s\" | \"m\";\n  /** The size of the buttons and links inside the action group. @default \"m\" */\n  size?: ButtonProps[\"size\"];\n  /**\n   * When set, the buttons are not sorted into the slots `primary`, `secondary`\n   * and `abort` but stay in source order. Use it when the actions have no such\n   * hierarchy, e.g. a row of equal actions or icon buttons. @default false\n   */\n  preserveOrder?: boolean;\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n  \"ActionGroup\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      spacing = \"s\",\n      size,\n      preserveOrder = false,\n      ...rest\n    } = props;\n\n    const rootClassName = clsx(\n      styles.actionGroup,\n      styles[spacing],\n      !preserveOrder && styles.sorted,\n      className,\n    );\n\n    const propsContext: PropsContext = preserveOrder\n      ? {\n          Button: { size },\n          Switch: {\n            labelPosition: \"leading\",\n          },\n          Link: { size },\n        }\n      : {\n          Button: {\n            size,\n            slot: dynamic((props) => getActionGroupSlot(props)),\n            className: dynamic((props) => {\n              const slot = getActionGroupSlot(props);\n              return clsx(props.className, styleClassname(styles, slot));\n            }),\n          },\n          Switch: {\n            labelPosition: \"leading\",\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n          Link: {\n            size,\n            className: dynamic((props) => {\n              return clsx(\n                props.className,\n                props.slot && styleClassname(styles, props.slot),\n              );\n            }),\n          },\n        };\n\n    return (\n      <ActionStateContextProvider>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[preserveOrder, size]}\n        >\n          <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n            {children}\n          </div>\n        </PropsContextProvider>\n      </ActionStateContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ActionGroup;\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAa,cAAc,cACzB,gBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,UAAU,KACV,MACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,UACP,CAAC,iBAAiBA,2BAAO,QACzB,SACF;CAEA,MAAM,eAA6B,gBAC/B;EACE,QAAQ,EAAE,KAAK;EACf,QAAQ,EACN,eAAe,UACjB;EACA,MAAM,EAAE,KAAK;CACf,IACA;EACE,QAAQ;GACN;GACA,MAAM,SAAS,UAAU,mBAAmB,KAAK,CAAC;GAClD,WAAW,SAAS,UAAU;IAC5B,MAAM,OAAO,mBAAmB,KAAK;IACrC,OAAO,KAAK,MAAM,WAAW,eAAeA,4BAAQ,IAAI,CAAC;GAC3D,CAAC;EACH;EACA,QAAQ;GACN,eAAe;GACf,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAeA,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;EACA,MAAM;GACJ;GACA,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAeA,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;CACF;CAEJ,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,sBAAD;EACE,OAAO;EACP,cAAc,CAAC,eAAe,IAAI;EAElC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW;GAAoB;GAAK,MAAK;GACrD;EACE,CAAA;CACe,CAAA,EACI,CAAA;AAEhC,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.module.scss"],"sourcesContent":[".actionGroup {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  @mixin spacing($spacing) {\n    &.#{$spacing} {\n      gap: var(--action-group--spacing--#{$spacing});\n    }\n  }\n\n  @include spacing(s);\n  @include spacing(m);\n\n  &.sorted {\n    justify-content: flex-end;\n    flex-grow: 1;\n\n    .primary {\n      order: 3;\n\n      &:only-child {\n        margin-inline-start: auto;\n      }\n    }\n\n    .secondary {\n      order: 2;\n    }\n\n    .abort {\n      order: 1;\n      margin-inline-end: auto;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ActionGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.module.scss"],"sourcesContent":[".actionGroup {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  @mixin spacing($spacing) {\n    &.#{$spacing} {\n      gap: var(--action-group--spacing--#{$spacing});\n    }\n  }\n\n  @include spacing(s);\n  @include spacing(m);\n\n  &.sorted {\n    justify-content: flex-end;\n    flex-grow: 1;\n\n    .primary {\n      order: 3;\n\n      &:only-child {\n        margin-inline-start: auto;\n      }\n    }\n\n    .secondary {\n      order: 2;\n    }\n\n    .abort {\n      order: 1;\n\n      // Only the last abort action pushes the others away, so several abort\n      // actions stay together at the start.\n      &:not(:has(~ .abort)) {\n        margin-inline-end: auto;\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import Alert_module_default from "./Alert.module.mjs";
 import clsx from "clsx";
@@ -11,7 +12,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var Alert = flowComponent("Alert", (props) => {
 	const { children, className, status = "info", ref, ...rest } = props;
-	const rootClassName = clsx(Alert_module_default.alert, Alert_module_default[status], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Alert_module_default.alert, Alert_module_default[status], isSkeleton && Alert_module_default.skeleton, className);
 	const propsContext = {
 		Heading: {
 			className: Alert_module_default.heading,

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","names":[],"sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Alert.module.scss\";\n\nexport interface AlertProps\n  extends\n    PropsWithChildren<ComponentProps<\"aside\">>,\n    PropsWithStatus,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Alert = flowComponent(\"Alert\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.alert, styles[status], className);\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 3,\n      size: \"s\",\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Content: {\n      className: styles.content,\n      Button: {\n        size: \"s\",\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n      },\n    },\n  };\n\n  return (\n    <aside {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext} dependencies={[status]}>\n        {children}\n      </PropsContextProvider>\n    </aside>\n  );\n});\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,gBAAgB,KAAK,qBAAO,OAAO,qBAAO,SAAS,SAAS;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,qBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UACjB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAW,qBAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,SAAS;GACP,WAAW,qBAAO;GAClB,QAAQ,EACN,MAAM,IACR;GACA,aAAa;IACX,eAAe;IACf,MAAM;GACR;EACF;CACF;CAEA,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAAc,cAAc,CAAC,MAAM;GAC7D;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}
+{"version":3,"file":"Alert.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Alert.module.scss\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertProps\n  extends\n    PropsWithChildren<ComponentProps<\"aside\">>,\n    PropsWithStatus,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Alert = flowComponent(\"Alert\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.alert,\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 3,\n      size: \"s\",\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Content: {\n      className: styles.content,\n      Button: {\n        size: \"s\",\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n      },\n    },\n  };\n\n  return (\n    <aside {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext} dependencies={[status]}>\n        {children}\n      </PropsContextProvider>\n    </aside>\n  );\n});\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,qBAAO,OACPA,qBAAO,SACP,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,qBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,qBAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,SAAS;GACP,WAAWA,qBAAO;GAClB,QAAQ,EACN,MAAM,IACR;GACA,aAAa;IACX,eAAe;IACf,MAAM;GACR;EACF;CACF;CAEA,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAAc,cAAc,CAAC,MAAM;GAC7D;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}

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

@@ -10,6 +10,7 @@ var warning = "flow--alert--warning";
 var danger = "flow--alert--danger";
 var success = "flow--alert--success";
 var unavailable = "flow--alert--unavailable";
+var skeleton = "flow--alert--skeleton";
 var Alert_module_default = {
 	alert,
 	icon,
@@ -19,9 +20,10 @@ var Alert_module_default = {
 	warning,
 	danger,
 	success,
-	unavailable
+	unavailable,
+	skeleton
 };
 //#endregion
-export { alert, content, danger, Alert_module_default as default, heading, icon, info, success, unavailable, warning };
+export { alert, content, danger, Alert_module_default as default, heading, icon, info, skeleton, success, unavailable, warning };
 
 //# sourceMappingURL=Alert.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.mjs","names":[],"sources":["../../../../../../../src/components/Alert/Alert.module.scss"],"sourcesContent":[".alert {\n  border-radius: var(--alert--corner-radius);\n  border-width: var(--alert--border-width);\n  border-style: var(--alert--border-style);\n  border-inline-start-width: var(--alert--border-x-start-width);\n  padding: var(--alert--padding);\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--alert--heading-to-content-spacing);\n  width: 100%;\n\n  .icon {\n    height: var(--heading-line-height);\n    width: var(--heading-line-height);\n    vertical-align: bottom;\n    display: inline-block;\n    margin-inline-end: var(--heading--icon-to-text-spacing);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: var(--alert--spacing);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      border-color: var(--alert--#{$status}-border-color);\n\n      .heading {\n        color: var(--alert--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n\n  /* Layout */\n\n  + :global(.flow--section) {\n    margin-block-start: var(--section--section-to-section-spacing);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Alert.module.mjs","names":[],"sources":["../../../../../../../src/components/Alert/Alert.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.alert {\n  border-radius: var(--alert--corner-radius);\n  border-width: var(--alert--border-width);\n  border-style: var(--alert--border-style);\n  border-inline-start-width: var(--alert--border-x-start-width);\n  padding: var(--alert--padding);\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--alert--heading-to-content-spacing);\n  width: 100%;\n\n  .icon {\n    height: var(--heading-line-height);\n    width: var(--heading-line-height);\n    vertical-align: bottom;\n    display: inline-block;\n    margin-inline-end: var(--heading--icon-to-text-spacing);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: var(--alert--spacing);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      border-color: var(--alert--#{$status}-border-color);\n\n      .heading {\n        color: var(--alert--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n\n  /* SkeletonMode: no status color while the content loads */\n  &.skeleton {\n    border-color: skeleton.$background-color;\n  }\n\n  /* Layout */\n\n  + :global(.flow--section) {\n    margin-block-start: var(--section--section-to-section-spacing);\n  }\n}\n"],"mappings":""}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import AlertBadge_module_default from "./AlertBadge.module.mjs";
 import { Text } from "../Text/Text.mjs";
@@ -10,18 +11,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var AlertBadge = flowComponent("AlertBadge", (props) => {
 	const { children, className, status = "info", ref, ...rest } = props;
-	const rootClassName = clsx(AlertBadge_module_default.alertBadge, AlertBadge_module_default[status], className);
-	return /* @__PURE__ */ jsxs("div", {
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(AlertBadge_module_default.alertBadge, AlertBadge_module_default[status], isSkeleton && AlertBadge_module_default.skeleton, className);
+	return /* @__PURE__ */ jsx("div", {
 		className: rootClassName,
 		...rest,
 		ref,
-		children: [/* @__PURE__ */ jsx(AlertIcon, {
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsxs(SkeletonModeReset, { children: [/* @__PURE__ */ jsx(AlertIcon, {
 			size: "s",
 			status
 		}), /* @__PURE__ */ jsx(Text, {
 			className: AlertBadge_module_default.text,
 			children
-		})]
+		})] })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"AlertBadge.mjs","names":[],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./AlertBadge.module.scss\";\nimport clsx from \"clsx\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport { Text } from \"@/components/Text\";\nimport type { PropsWithStatus, PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface AlertBadgeProps\n  extends\n    PropsWithChildren,\n    PropsWithStatus,\n    FlowComponentProps,\n    PropsWithClassName {}\n\n/** @flr-generate all */\nexport const AlertBadge = flowComponent(\"AlertBadge\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.alertBadge, styles[status], className);\n\n  return (\n    <div className={rootClassName} {...rest} ref={ref}>\n      <AlertIcon size=\"s\" status={status} />\n      <Text className={styles.text}>{children}</Text>\n    </div>\n  );\n});\n\nexport default AlertBadge;\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,gBAAgB,KAAK,0BAAO,YAAY,0BAAO,SAAS,SAAS;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,GAAI;EAAW;EAA9C,UAAA,CACE,oBAAC,WAAD;GAAW,MAAK;GAAY;EAAS,CAAA,GACrC,oBAAC,MAAD;GAAM,WAAW,0BAAO;GAAO;EAAe,CAAA,CAC3C;;AAET,CAAC"}
+{"version":3,"file":"AlertBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./AlertBadge.module.scss\";\nimport clsx from \"clsx\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport { Text } from \"@/components/Text\";\nimport type { PropsWithStatus, PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertBadgeProps\n  extends\n    PropsWithChildren,\n    PropsWithStatus,\n    FlowComponentProps,\n    PropsWithClassName {}\n\n/** @flr-generate all */\nexport const AlertBadge = flowComponent(\"AlertBadge\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.alertBadge,\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  return (\n    <div\n      className={rootClassName}\n      {...rest}\n      ref={ref}\n      inert={isSkeleton || undefined}\n    >\n      <SkeletonModeReset>\n        <AlertIcon size=\"s\" status={status} />\n        <Text className={styles.text}>{children}</Text>\n      </SkeletonModeReset>\n    </div>\n  );\n});\n\nexport default AlertBadge;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACPA,0BAAO,SACP,cAAcA,0BAAO,UACrB,SACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW;EACX,GAAI;EACC;EACL,OAAO,cAAc,KAAA;EAErB,UAAA,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,MAAK;GAAY;EAAS,CAAA,GACrC,oBAAC,MAAD;GAAM,WAAWA,0BAAO;GAAO;EAAe,CAAA,CAC7B,EAAA,CAAA;CAChB,CAAA;AAET,CAAC"}

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

@@ -8,6 +8,7 @@ var success = "flow--alert-badge--success";
 var warning = "flow--alert-badge--warning";
 var danger = "flow--alert-badge--danger";
 var unavailable = "flow--alert-badge--unavailable";
+var skeleton = "flow--alert-badge--skeleton";
 var AlertBadge_module_default = {
 	alertBadge,
 	text,
@@ -15,9 +16,12 @@ var AlertBadge_module_default = {
 	success,
 	warning,
 	danger,
-	unavailable
+	unavailable,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--alert-badge--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--alert-badge--skeleton-text-shimmer"
 };
 //#endregion
-export { alertBadge, danger, AlertBadge_module_default as default, info, success, text, unavailable, warning };
+export { alertBadge, danger, AlertBadge_module_default as default, info, skeleton, success, text, unavailable, warning };
 
 //# sourceMappingURL=AlertBadge.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlertBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n\n.alertBadge {\n  font-size: var(--badge--font-size);\n  font-weight: var(--badge--font-weight);\n  line-height: var(--badge--line-height);\n  border-radius: var(--badge--corner-radius);\n  padding-inline: var(--badge--padding-x);\n  padding-block: calc(var(--badge--padding-y) - (var(--badge--border-width)));\n  display: flex;\n  align-items: center;\n  column-gap: var(--badge--spacing);\n  max-width: fit-content;\n  border-style: var(--badge--border-style);\n  border-width: var(--badge--border-width);\n\n  .text {\n    @include ellipsis.ellipsis();\n  }\n\n  @extend .info;\n\n  /* Status */\n  @mixin status($status) {\n    &.#{$status} {\n      color: var(--alert-badge--#{$status}-content-color);\n      background-color: var(--alert-badge--#{$status}-background-color);\n      border-color: var(--alert-badge--#{$status}-border-color);\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(warning);\n  @include status(danger);\n  @include status(unavailable);\n}\n"],"mappings":""}
+{"version":3,"file":"AlertBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.alertBadge {\n  font-size: var(--badge--font-size);\n  font-weight: var(--badge--font-weight);\n  line-height: var(--badge--line-height);\n  border-radius: var(--badge--corner-radius);\n  padding-inline: var(--badge--padding-x);\n  padding-block: calc(var(--badge--padding-y) - (var(--badge--border-width)));\n  display: flex;\n  align-items: center;\n  column-gap: var(--badge--spacing);\n  max-width: fit-content;\n  border-style: var(--badge--border-style);\n  border-width: var(--badge--border-width);\n\n  .text {\n    @include ellipsis.ellipsis();\n  }\n\n  @extend .info;\n\n  /* Status */\n  @mixin status($status) {\n    &.#{$status} {\n      color: var(--alert-badge--#{$status}-content-color);\n      background-color: var(--alert-badge--#{$status}-background-color);\n      border-color: var(--alert-badge--#{$status}-border-color);\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(warning);\n  @include status(danger);\n  @include status(unavailable);\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--badge--corner-radius);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -1,10 +1,12 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconDanger } from "../Icon/components/icons/IconDanger.mjs";
 import { IconInfo } from "../Icon/components/icons/IconInfo.mjs";
 import { IconSuccess } from "../Icon/components/icons/IconSuccess.mjs";
 import { IconUnavailable } from "../Icon/components/icons/IconUnavailable.mjs";
 import { IconWarning } from "../Icon/components/icons/IconWarning.mjs";
+import { SkeletonIconSurface } from "../SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import __locale_default from "../../../../../_virtual/_2.locale.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -20,12 +22,20 @@ var icons = {
 var AlertIcon = (props) => {
 	const { status = "info", ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "AlertIcon");
+	const isSkeleton = useSkeletonMode();
 	const Icon = icons[status];
 	const iconProps = {
 		color: status,
 		"aria-label": stringFormatter.format(`status.${status}`),
 		...rest
 	};
+	if (isSkeleton) {
+		const { className, ...iconPropsWithoutClassName } = iconProps;
+		return /* @__PURE__ */ jsx(SkeletonIconSurface, {
+			className,
+			children: /* @__PURE__ */ jsx(Icon, { ...iconPropsWithoutClassName })
+		});
+	}
 	return /* @__PURE__ */ jsx(Icon, { ...iconProps });
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"AlertIcon.mjs","names":[],"sources":["../../../../../../../src/components/AlertIcon/AlertIcon.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport {\n  IconDanger,\n  IconInfo,\n  IconSuccess,\n  IconUnavailable,\n  IconWarning,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithStatus, Status } from \"@/lib/types/props\";\nimport type { IconProps } from \"@/components/Icon\";\n\nexport type AlertIconProps = Omit<IconProps, \"status\"> & PropsWithStatus;\n\nconst icons: Record<Status, ComponentType> = {\n  danger: IconDanger,\n  info: IconInfo,\n  success: IconSuccess,\n  warning: IconWarning,\n  unavailable: IconUnavailable,\n};\n\n/** @flr-generate all */\nexport const AlertIcon: FC<AlertIconProps> = (props) => {\n  const { status = \"info\", ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"AlertIcon\");\n\n  const Icon = icons[status];\n\n  const iconProps: IconProps = {\n    color: status,\n    \"aria-label\": stringFormatter.format(`status.${status}`),\n    ...rest,\n  };\n\n  return <Icon {...iconProps} />;\n};\n\nexport default AlertIcon;\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,QAAuC;CAC3C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;AACf;;AAGA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,SAAS,QAAQ,GAAG,SAAS;CAErC,MAAM,kBAAkB,4BAA4B,kBAAS,WAAW;CAExE,MAAM,OAAO,MAAM;CAEnB,MAAM,YAAuB;EAC3B,OAAO;EACP,cAAc,gBAAgB,OAAO,UAAU,QAAQ;EACvD,GAAG;CACL;CAEA,OAAO,oBAAC,MAAD,EAAM,GAAI,UAAY,CAAA;AAC/B"}
+{"version":3,"file":"AlertIcon.mjs","names":["locales"],"sources":["../../../../../../../src/components/AlertIcon/AlertIcon.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport {\n  IconDanger,\n  IconInfo,\n  IconSuccess,\n  IconUnavailable,\n  IconWarning,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithStatus, Status } from \"@/lib/types/props\";\nimport type { IconProps } from \"@/components/Icon\";\nimport { SkeletonIconSurface } from \"@/components/SkeletonMode/components/SkeletonIconSurface\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport type AlertIconProps = Omit<IconProps, \"status\"> & PropsWithStatus;\n\nconst icons: Record<Status, ComponentType> = {\n  danger: IconDanger,\n  info: IconInfo,\n  success: IconSuccess,\n  warning: IconWarning,\n  unavailable: IconUnavailable,\n};\n\n/** @flr-generate all */\nexport const AlertIcon: FC<AlertIconProps> = (props) => {\n  const { status = \"info\", ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"AlertIcon\");\n  const isSkeleton = useSkeletonMode();\n\n  const Icon = icons[status];\n\n  const iconProps: IconProps = {\n    color: status,\n    \"aria-label\": stringFormatter.format(`status.${status}`),\n    ...rest,\n  };\n\n  if (isSkeleton) {\n    const { className, ...iconPropsWithoutClassName } = iconProps;\n    return (\n      <SkeletonIconSurface className={className}>\n        <Icon {...iconPropsWithoutClassName} />\n      </SkeletonIconSurface>\n    );\n  }\n\n  return <Icon {...iconProps} />;\n};\n\nexport default AlertIcon;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,QAAuC;CAC3C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;AACf;;AAGA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,SAAS,QAAQ,GAAG,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CACxE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,OAAO,MAAM;CAEnB,MAAM,YAAuB;EAC3B,OAAO;EACP,cAAc,gBAAgB,OAAO,UAAU,QAAQ;EACvD,GAAG;CACL;CAEA,IAAI,YAAY;EACd,MAAM,EAAE,WAAW,GAAG,8BAA8B;EACpD,OACE,oBAAC,qBAAD;GAAgC;GAC9B,UAAA,oBAAC,MAAD,EAAM,GAAI,0BAA4B,CAAA;EACnB,CAAA;CAEzB;CAEA,OAAO,oBAAC,MAAD,EAAM,GAAI,UAAY,CAAA;AAC/B"}

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

@@ -2,24 +2,31 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import AlertText_module_default from "./AlertText.module.mjs";
 import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AlertText/AlertText.tsx
 /** @flr-generate all */
 var AlertText = flowComponent("AlertText", (props) => {
 	const { className, children, status = "info" } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(AlertText_module_default.alertText, AlertText_module_default[status], className);
 	return /* @__PURE__ */ jsxs("span", {
 		className: rootClassName,
+		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: { Icon: { size: "s" } },
 			children: /* @__PURE__ */ jsx(AlertIcon, {
 				status,
 				className: AlertText_module_default.icon
 			})
-		}), /* @__PURE__ */ jsx(Fragment, { children })]
+		}), /* @__PURE__ */ jsx(SkeletonTextContent, {
+			defaultWidth: "8em",
+			children
+		})]
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"AlertText.mjs","names":[],"sources":["../../../../../../../src/components/AlertText/AlertText.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName, PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AlertText.module.scss\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface AlertTextProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithStatus {}\n\n/** @flr-generate all */\nexport const AlertText = flowComponent(\"AlertText\", (props) => {\n  const { className, children, status = \"info\" } = props;\n\n  const rootClassName = clsx(styles.alertText, styles[status], className);\n\n  return (\n    <span className={rootClassName}>\n      <PropsContextProvider props={{ Icon: { size: \"s\" } }}>\n        <AlertIcon status={status} className={styles.icon} />\n      </PropsContextProvider>\n\n      <>{children}</>\n    </span>\n  );\n});\n\nexport default AlertText;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EAAE,WAAW,UAAU,SAAS,WAAW;CAEjD,MAAM,gBAAgB,KAAK,yBAAO,WAAW,yBAAO,SAAS,SAAS;CAEtE,OACE,qBAAC,QAAD;EAAM,WAAW;EAAjB,UAAA,CACE,oBAAC,sBAAD;GAAsB,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE;GACjD,UAAA,oBAAC,WAAD;IAAmB;IAAQ,WAAW,yBAAO;GAAO,CAAA;EAChC,CAAA,GAEtB,oBAAA,UAAA,EAAG,SAAW,CAAA,CACV;;AAEV,CAAC"}
+{"version":3,"file":"AlertText.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertText/AlertText.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName, PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AlertText.module.scss\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertTextProps\n  extends\n    PropsWithClassName,\n    PropsWithChildren,\n    FlowComponentProps,\n    PropsWithStatus {}\n\n/** @flr-generate all */\nexport const AlertText = flowComponent(\"AlertText\", (props) => {\n  const { className, children, status = \"info\" } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(styles.alertText, styles[status], className);\n\n  return (\n    <span className={rootClassName} inert={isSkeleton || undefined}>\n      <PropsContextProvider props={{ Icon: { size: \"s\" } }}>\n        <AlertIcon status={status} className={styles.icon} />\n      </PropsContextProvider>\n\n      <SkeletonTextContent defaultWidth=\"8em\">{children}</SkeletonTextContent>\n    </span>\n  );\n});\n\nexport default AlertText;\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EAAE,WAAW,UAAU,SAAS,WAAW;CAEjD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KAAKA,yBAAO,WAAWA,yBAAO,SAAS,SAAS;CAEtE,OACE,qBAAC,QAAD;EAAM,WAAW;EAAe,OAAO,cAAc,KAAA;EAArD,UAAA,CACE,oBAAC,sBAAD;GAAsB,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE;GACjD,UAAA,oBAAC,WAAD;IAAmB;IAAQ,WAAWA,yBAAO;GAAO,CAAA;EAChC,CAAA,GAEtB,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAAA,CACnE;;AAEV,CAAC"}