@mittwald/flow-react-components 1.5.0-next.30 → 1.5.0-next.32

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

@@ -3,23 +3,30 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.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":["styles","_Fragment"],"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,KAAKA,yBAAO,WAAWA,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,WAAWA,yBAAO;GAAO,CAAA;EAChC,CAAA,GAEtB,oBAAAC,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipLegendItem.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\n/** @internal */\nexport type TooltipPayloadItem = NonNullable<\n  DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal */\ninterface LegendItemLabelProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<WithTooltipFormatters<TData, TTooltipLabelValue>, \"formatter\"> {\n  item: TooltipPayloadItem;\n  index: number;\n}\n\n/** @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n  formatter,\n  item,\n  index,\n}) => {\n  const { value, dataKey, unit, fill, name } = item;\n\n  const formattedLabel = usePromise(\n    (value, dataKey, index, unit, formatter, name) =>\n      formatter\n        ? formatter(value, String(name), index, unit)\n        : `${name ?? \"\"} (${value ?? \"\"}${unit ? unit : \"\"})`,\n    [value, dataKey, index, unit, formatter, name] as const,\n  );\n\n  return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"mappings":";;;;;;;AA2BA,IAAa,qBAA+C,EAC1D,WACA,MACA,YACI;CACJ,MAAM,EAAE,OAAO,SAAS,MAAM,MAAM,SAAS;CAE7C,MAAM,iBAAiB,YACpB,OAAO,SAAS,OAAO,MAAM,WAAW,SACvC,YACI,UAAU,OAAO,OAAO,IAAI,GAAG,OAAO,IAAI,IAC1C,GAAG,QAAQ,GAAG,IAAI,SAAS,KAAK,OAAO,OAAO,GAAG,IACvD;EAAC;EAAO;EAAS;EAAO;EAAM;EAAW;CAAI,CAC/C;CAEA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAO,UAAA;CAA2B,CAAA;AAC9D"}
+{"version":3,"file":"TooltipLegendItem.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\nexport type TooltipPayloadItem = NonNullable<\n  DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal */\ninterface LegendItemLabelProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<WithTooltipFormatters<TData, TTooltipLabelValue>, \"formatter\"> {\n  item: TooltipPayloadItem;\n  index: number;\n}\n\n/** @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n  formatter,\n  item,\n  index,\n}) => {\n  const { value, dataKey, unit, fill, name } = item;\n\n  const formattedLabel = usePromise(\n    (value, dataKey, index, unit, formatter, name) =>\n      formatter\n        ? formatter(value, String(name), index, unit)\n        : `${name ?? \"\"} (${value ?? \"\"}${unit ? unit : \"\"})`,\n    [value, dataKey, index, unit, formatter, name] as const,\n  );\n\n  return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"mappings":";;;;;;;AA0BA,IAAa,qBAA+C,EAC1D,WACA,MACA,YACI;CACJ,MAAM,EAAE,OAAO,SAAS,MAAM,MAAM,SAAS;CAE7C,MAAM,iBAAiB,YACpB,OAAO,SAAS,OAAO,MAAM,WAAW,SACvC,YACI,UAAU,OAAO,OAAO,IAAI,GAAG,OAAO,IAAI,IAC1C,GAAG,QAAQ,GAAG,IAAI,SAAS,KAAK,OAAO,OAAO,GAAG,IACvD;EAAC;EAAO;EAAS;EAAO;EAAM;EAAW;CAAI,CAC/C;CAEA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAO,UAAA;CAA2B,CAAA;AAC9D"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useCallback, useId, useState } from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n  type CodeEditorSetup,\n  useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  /** The initial code of an uncontrolled editor. */\n  defaultValue?: string;\n  /**\n   * Whether the code can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Whether the editor is disabled. The code can neither be edited, focused nor\n   * copied.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the editor is displayed as invalid.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n  /** The elements class name. */\n  className?: string;\n  /** The language the code is highlighted as. */\n  language?: CodeEditorLanguage;\n  /**\n   * Whether a button to copy the code to the clipboard is shown.\n   *\n   * @default true\n   */\n  copyable?: boolean;\n  /**\n   * Whether the field must be filled in. Only marks the editor as required for\n   * assistive technology — the editor does not validate itself.\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * @internal Set by `<Field />` on every form field. The editor has no\n   * react-aria validation to forward it to and drops it.\n   */\n  validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isDisabled,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n    ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  return (\n    <div className={rootClassName} data-disabled={isDisabled || undefined}>\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          <CodeMirror\n            {...rest}\n            value={value}\n            basicSetup={{\n              highlightActiveLine: showActiveLineMarker && !isDisabled,\n              highlightActiveLineGutter: showActiveLineMarker && !isDisabled,\n              autocompletion: false,\n              lineNumbers: false,\n              foldGutter: false,\n              highlightSelectionMatches: false,\n            }}\n            theme={defaultLightTheme}\n            data-invalid={isInvalid || undefined}\n            data-disabled={isDisabled || undefined}\n            readOnly={isReadOnly || isDisabled}\n            editable={!isDisabled}\n            className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n            ref={(codeMirrorRef) => {\n              if (codeMirrorRef?.editor) {\n                localRef.current = codeMirrorRef.editor;\n              }\n            }}\n            extensions={[...enabledExtensions, contentAttributes]}\n            height={height ?? minHeight}\n          >\n            {copyable && (\n              <CopyButton\n                className={styles.copyButton}\n                size=\"s\"\n                variant=\"soft\"\n                text={value}\n                isDisabled={isDisabled}\n              />\n            )}\n            {children}\n          </CodeMirror>\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":"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"}
+{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useCallback, useId, useState } from \"react\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n  type CodeEditorSetup,\n  useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n  extends\n    Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n    CodeEditorSetup,\n    FlowComponentProps {\n  /** The initial code of an uncontrolled editor. */\n  defaultValue?: string;\n  /**\n   * Whether the code can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Whether the editor is disabled. The code can neither be edited, focused nor\n   * copied.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the editor is displayed as invalid.\n   *\n   * @default false\n   */\n  isInvalid?: boolean;\n  /** The elements class name. */\n  className?: string;\n  /**\n   * The language the code is highlighted as. A language the editor does not\n   * know is shown as plain text.\n   */\n  language?: CodeEditorLanguage | (string & {});\n  /**\n   * Whether a button to copy the code to the clipboard is shown.\n   *\n   * @default true\n   */\n  copyable?: boolean;\n  /**\n   * Whether the field must be filled in. Only marks the editor as required for\n   * assistive technology — the editor does not validate itself.\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * @internal Set by `<Field />` on every form field. The editor has no\n   * react-aria validation to forward it to and drops it.\n   */\n  validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n  const {\n    ref,\n    children,\n    className,\n    language,\n    extensions,\n    isReadOnly,\n    isDisabled,\n    isInvalid,\n    isRequired,\n    validationBehavior: _ignoredValidationBehavior,\n    value,\n    showLineNumbers = true,\n    showCodeFolding = true,\n    showCodeIndentationMakers = true,\n    showLinterMarkers = true,\n    showActiveLineMarker = true,\n    copyable = true,\n    height,\n    minHeight,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"CodeEditor\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.codeEditor,\n    className,\n  );\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  /**\n   * Both are optional. Their refs tell whether they are rendered, so the editor\n   * never references an element that does not exist – a dangling id fails HTML\n   * validators and a11y checks. The callbacks are stable: a new one per render\n   * would detach and re-attach on every render.\n   */\n  const [hasLabel, setHasLabel] = useState(false);\n  const [hasDescription, setHasDescription] = useState(false);\n  const labelRef = useCallback((element: Element | null) => {\n    setHasLabel(!!element);\n  }, []);\n  const descriptionRef = useCallback((element: Element | null) => {\n    setHasDescription(!!element);\n  }, []);\n\n  /**\n   * The label and the field description are declared as children of the code\n   * editor, but must be rendered outside of the editor itself. They are\n   * tunneled out of the editor – just like the field error. Their ids are the\n   * ones the editor references.\n   */\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      id: labelId,\n      ref: labelRef,\n      tunnel: { id: \"label\", component: \"CodeEditor\" },\n    },\n    FieldDescription: {\n      ...fieldPropsContext.FieldDescription,\n      id: descriptionId,\n      ref: descriptionRef,\n      tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n    },\n  };\n\n  const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n    showLineNumbers: showLineNumbers,\n    showCodeIndentationMakers: showCodeIndentationMakers,\n    showCodeFolding: showCodeFolding,\n    showLinterMarkers: showLinterMarkers,\n  });\n\n  /**\n   * The editable element of CodeMirror is the `.cm-content` element – not the\n   * root element the props are applied to. Its ARIA attributes are set through\n   * the content attributes facet.\n   *\n   * Without a label, an `aria-label` names the editor instead.\n   */\n  const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n  const describedBy = joinIds(\n    hasDescription && descriptionId,\n    controlProps[\"aria-describedby\"],\n  );\n\n  const contentAttributes = EditorView.contentAttributes.of({\n    ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n    ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n    ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n    ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n    ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n    ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n  });\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  return (\n    <div className={rootClassName} data-disabled={isDisabled || undefined}>\n      <PropsContextProvider props={propsContext}>\n        <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n        <FieldErrorCaptureContext>\n          <CodeMirror\n            {...rest}\n            value={value}\n            basicSetup={{\n              highlightActiveLine: showActiveLineMarker && !isDisabled,\n              highlightActiveLineGutter: showActiveLineMarker && !isDisabled,\n              autocompletion: false,\n              lineNumbers: false,\n              foldGutter: false,\n              highlightSelectionMatches: false,\n            }}\n            theme={defaultLightTheme}\n            data-invalid={isInvalid || undefined}\n            data-disabled={isDisabled || undefined}\n            readOnly={isReadOnly || isDisabled}\n            editable={!isDisabled}\n            className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n            ref={(codeMirrorRef) => {\n              if (codeMirrorRef?.editor) {\n                localRef.current = codeMirrorRef.editor;\n              }\n            }}\n            extensions={[...enabledExtensions, contentAttributes]}\n            height={height ?? minHeight}\n          >\n            {copyable && (\n              <CopyButton\n                className={styles.copyButton}\n                size=\"s\"\n                variant=\"soft\"\n                text={value}\n                isDisabled={isDisabled}\n              />\n            )}\n            {children}\n          </CodeMirror>\n        </FieldErrorCaptureContext>\n        <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n        <FieldErrorView />\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgFA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EACJ,KACA,UACA,WACA,UACA,YACA,YACA,YACA,WACA,YACA,oBAAoB,4BACpB,OACA,kBAAkB,MAClB,kBAAkB,MAClB,4BAA4B,MAC5B,oBAAoB,MACpB,uBAAuB,MACvB,WAAW,MACX,QACA,WACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KACpB,aAAa,WACbA,0BAAO,YACP,SACF;CAEA,MAAM,UAAU,MAAM;CACtB,MAAM,gBAAgB,MAAM;;;;;;;CAQ5B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,WAAW,aAAa,YAA4B;EACxD,YAAY,CAAC,CAAC,OAAO;CACvB,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,aAAa,YAA4B;EAC9D,kBAAkB,CAAC,CAAC,OAAO;CAC7B,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAS,WAAW;GAAa;EACjD;EACA,kBAAkB;GAChB,GAAG,kBAAkB;GACrB,IAAI;GACJ,KAAK;GACL,QAAQ;IAAE,IAAI;IAAoB,WAAW;GAAa;EAC5D;CACF;CAEA,MAAM,oBAAoB,wBAAwB,UAAU,YAAY;EACrD;EACU;EACV;EACE;CACrB,CAAC;;;;;;;;CASD,MAAM,aAAa,QAAQ,gBAAgB,YAAY,OAAO;CAC9D,MAAM,cAAc,QAClB,kBAAkB,eAClB,aAAa,mBACf;CAEA,MAAM,oBAAoB,WAAW,kBAAkB,GAAG;EACxD,GAAI,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;EACtD,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;EAC/C,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;EACzD,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;EAChD,GAAI,YAAY,EAAE,gBAAgB,OAAO,IAAI,CAAC;EAC9C,GAAI,aAAa,EAAE,iBAAiB,OAAO,IAAI,CAAC;CAClD,CAAC;CAED,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,iBAAe,cAAc,KAAA;EAC1D,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,uBAAD;KAAuB,IAAG;KAAQ,WAAU;IAAc,CAAA;IAC1D,oBAAC,0BAAD,EAAA,UACE,qBAAC,YAAD;KACE,GAAI;KACG;KACP,YAAY;MACV,qBAAqB,wBAAwB,CAAC;MAC9C,2BAA2B,wBAAwB,CAAC;MACpD,gBAAgB;MAChB,aAAa;MACb,YAAY;MACZ,2BAA2B;KAC7B;KACA,OAAO;KACP,gBAAc,aAAa,KAAA;KAC3B,iBAAe,cAAc,KAAA;KAC7B,UAAU,cAAc;KACxB,UAAU,CAAC;KACX,WAAW,KAAKA,0BAAO,YAAY,cAAcA,0BAAO,QAAQ;KAChE,MAAM,kBAAkB;MACtB,IAAI,eAAe,QACjB,SAAS,UAAU,cAAc;KAErC;KACA,YAAY,CAAC,GAAG,mBAAmB,iBAAiB;KACpD,QAAQ,UAAU;KAvBpB,UAAA,CAyBG,YACC,oBAAC,YAAD;MACE,WAAWA,0BAAO;MAClB,MAAK;MACL,SAAQ;MACR,MAAM;MACM;KACb,CAAA,GAEF,QACS;IACY,CAAA,EAAA,CAAA;IAC1B,oBAAC,uBAAD;KAAuB,IAAG;KAAmB,WAAU;IAAc,CAAA;IACrE,oBAAC,gBAAD,CAAiB,CAAA;GACG;;CACnB,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/CodeEditor/hooks/useCodeEditorExtensions.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import supportedCodeEditorLanguages from "../languages/index.mjs";
+import supportedCodeEditorLanguages, { isCodeEditorLanguage } from "../languages/index.mjs";
 import { gutterSpacer } from "../extensions/gutterSpacer.mjs";
 import { lineNumbers } from "@uiw/react-codemirror";
 import { foldGutter } from "@codemirror/language";
@@ -32,7 +32,7 @@ var useCodeEditorExtensions = (language, extensions = [], options = {
 	if (options.showLinterMarkers) extensions.push(lintGutter());
 	if (options.showLineNumbers && (!options.showCodeFolding || !options.showLinterMarkers)) extensions.push(gutterSpacer());
 	if (options.showCodeIndentationMakers) extensions.push(indentationMarkers({ colors: indentationMarkerColors }));
-	if (language) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
+	if (language && isCodeEditorLanguage(language)) supportedCodeEditorLanguages[language]?.map((loader) => extensions.push(loader()));
 	return extensions;
 };
 //#endregion

package/dist/js/packages/components/src/components/CodeEditor/hooks/useCodeEditorExtensions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCodeEditorExtensions.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n  type CodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/*\n * Every slot gets the same color: the library picks between its light and dark\n * one by CodeMirror's dark theme flag, which Flow's theme never sets, and the\n * active block needs no color of its own.\n */\nconst markerColor = \"var(--code-editor--indentation-marker-color)\";\nconst indentationMarkerColors = {\n  light: markerColor,\n  dark: markerColor,\n  activeLight: markerColor,\n  activeDark: markerColor,\n};\n\n/** @internal */\nexport interface CodeEditorSetup {\n  /**\n   * Whether the line the cursor is on is highlighted.\n   *\n   * @default true\n   */\n  showActiveLineMarker?: boolean;\n  /**\n   * Whether the gutter offers controls to fold and unfold code blocks.\n   *\n   * @default true\n   */\n  showCodeFolding?: boolean;\n  /**\n   * Whether indentation levels are visualized with guide lines.\n   *\n   * @default true\n   */\n  showCodeIndentationMakers?: boolean;\n  /**\n   * Whether line numbers are shown in the gutter.\n   *\n   * @default true\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Whether linter results are shown in the gutter.\n   *\n   * @default true\n   */\n  showLinterMarkers?: boolean;\n}\n\n/** @internal */\nexport const useCodeEditorExtensions = (\n  language?: CodeEditorLanguage,\n  extensions: Extension[] = [],\n  options: CodeEditorSetup = {\n    showCodeFolding: true,\n    showCodeIndentationMakers: true,\n    showLineNumbers: true,\n    showLinterMarkers: true,\n  },\n) => {\n  if (options.showLineNumbers) {\n    extensions.push(lineNumbers());\n  }\n\n  if (options.showCodeFolding) {\n    extensions.push(\n      foldGutter({\n        markerDOM: (open) => {\n          const element = document.createElement(\"span\");\n          element.classList.add(\"cm-foldGutter\");\n          element.classList.add(\n            open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n          );\n          element.innerText = open ? \"⌄\" : \"›\";\n          return element;\n        },\n      }),\n    );\n  }\n\n  if (options.showLinterMarkers) {\n    extensions.push(lintGutter());\n  }\n\n  if (\n    options.showLineNumbers &&\n    (!options.showCodeFolding || !options.showLinterMarkers)\n  ) {\n    extensions.push(gutterSpacer());\n  }\n\n  if (options.showCodeIndentationMakers) {\n    extensions.push(indentationMarkers({ colors: indentationMarkerColors }));\n  }\n\n  if (language) {\n    supportedCodeEditorLanguages[language]?.map((loader) =>\n      extensions.push(loader()),\n    );\n  }\n\n  return extensions;\n};\n"],"mappings":";;;;;;;;;AAcA,IAAM,cAAc;AACpB,IAAM,0BAA0B;CAC9B,OAAO;CACP,MAAM;CACN,aAAa;CACb,YAAY;AACd;;AAqCA,IAAa,2BACX,UACA,aAA0B,CAAC,GAC3B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACG;CACH,IAAI,QAAQ,iBACV,WAAW,KAAK,YAAY,CAAC;CAG/B,IAAI,QAAQ,iBACV,WAAW,KACT,WAAW,EACT,YAAY,SAAS;EACnB,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,UAAU,IAAI,eAAe;EACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;EACA,QAAQ,YAAY,OAAO,MAAM;EACjC,OAAO;CACT,EACF,CAAC,CACH;CAGF,IAAI,QAAQ,mBACV,WAAW,KAAK,WAAW,CAAC;CAG9B,IACE,QAAQ,oBACP,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,oBAEtC,WAAW,KAAK,aAAa,CAAC;CAGhC,IAAI,QAAQ,2BACV,WAAW,KAAK,mBAAmB,EAAE,QAAQ,wBAAwB,CAAC,CAAC;CAGzE,IAAI,UACF,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;AACT"}
+{"version":3,"file":"useCodeEditorExtensions.mjs","names":[],"sources":["../../../../../../../../src/components/CodeEditor/hooks/useCodeEditorExtensions.tsx"],"sourcesContent":["import { type Extension, lineNumbers } from \"@uiw/react-codemirror\";\nimport { lintGutter } from \"@codemirror/lint\";\nimport supportedCodeEditorLanguages, {\n  isCodeEditorLanguage,\n} from \"@/components/CodeEditor/languages\";\nimport { indentationMarkers } from \"@replit/codemirror-indentation-markers\";\nimport { foldGutter } from \"@codemirror/language\";\nimport { gutterSpacer } from \"@/components/CodeEditor/extensions/gutterSpacer\";\n\n/*\n * Every slot gets the same color: the library picks between its light and dark\n * one by CodeMirror's dark theme flag, which Flow's theme never sets, and the\n * active block needs no color of its own.\n */\nconst markerColor = \"var(--code-editor--indentation-marker-color)\";\nconst indentationMarkerColors = {\n  light: markerColor,\n  dark: markerColor,\n  activeLight: markerColor,\n  activeDark: markerColor,\n};\n\nexport interface CodeEditorSetup {\n  /**\n   * Whether the line the cursor is on is highlighted.\n   *\n   * @default true\n   */\n  showActiveLineMarker?: boolean;\n  /**\n   * Whether the gutter offers controls to fold and unfold code blocks.\n   *\n   * @default true\n   */\n  showCodeFolding?: boolean;\n  /**\n   * Whether indentation levels are visualized with guide lines.\n   *\n   * @default true\n   */\n  showCodeIndentationMakers?: boolean;\n  /**\n   * Whether line numbers are shown in the gutter.\n   *\n   * @default true\n   */\n  showLineNumbers?: boolean;\n  /**\n   * Whether linter results are shown in the gutter.\n   *\n   * @default true\n   */\n  showLinterMarkers?: boolean;\n}\n\n/** @internal */\nexport const useCodeEditorExtensions = (\n  language?: string,\n  extensions: Extension[] = [],\n  options: CodeEditorSetup = {\n    showCodeFolding: true,\n    showCodeIndentationMakers: true,\n    showLineNumbers: true,\n    showLinterMarkers: true,\n  },\n) => {\n  if (options.showLineNumbers) {\n    extensions.push(lineNumbers());\n  }\n\n  if (options.showCodeFolding) {\n    extensions.push(\n      foldGutter({\n        markerDOM: (open) => {\n          const element = document.createElement(\"span\");\n          element.classList.add(\"cm-foldGutter\");\n          element.classList.add(\n            open ? \"cm-foldGutter-open\" : \"cm-foldGutter-closed\",\n          );\n          element.innerText = open ? \"⌄\" : \"›\";\n          return element;\n        },\n      }),\n    );\n  }\n\n  if (options.showLinterMarkers) {\n    extensions.push(lintGutter());\n  }\n\n  if (\n    options.showLineNumbers &&\n    (!options.showCodeFolding || !options.showLinterMarkers)\n  ) {\n    extensions.push(gutterSpacer());\n  }\n\n  if (options.showCodeIndentationMakers) {\n    extensions.push(indentationMarkers({ colors: indentationMarkerColors }));\n  }\n\n  if (language && isCodeEditorLanguage(language)) {\n    supportedCodeEditorLanguages[language]?.map((loader) =>\n      extensions.push(loader()),\n    );\n  }\n\n  return extensions;\n};\n"],"mappings":";;;;;;;;;AAcA,IAAM,cAAc;AACpB,IAAM,0BAA0B;CAC9B,OAAO;CACP,MAAM;CACN,aAAa;CACb,YAAY;AACd;;AAoCA,IAAa,2BACX,UACA,aAA0B,CAAC,GAC3B,UAA2B;CACzB,iBAAiB;CACjB,2BAA2B;CAC3B,iBAAiB;CACjB,mBAAmB;AACrB,MACG;CACH,IAAI,QAAQ,iBACV,WAAW,KAAK,YAAY,CAAC;CAG/B,IAAI,QAAQ,iBACV,WAAW,KACT,WAAW,EACT,YAAY,SAAS;EACnB,MAAM,UAAU,SAAS,cAAc,MAAM;EAC7C,QAAQ,UAAU,IAAI,eAAe;EACrC,QAAQ,UAAU,IAChB,OAAO,uBAAuB,sBAChC;EACA,QAAQ,YAAY,OAAO,MAAM;EACjC,OAAO;CACT,EACF,CAAC,CACH;CAGF,IAAI,QAAQ,mBACV,WAAW,KAAK,WAAW,CAAC;CAG9B,IACE,QAAQ,oBACP,CAAC,QAAQ,mBAAmB,CAAC,QAAQ,oBAEtC,WAAW,KAAK,aAAa,CAAC;CAGhC,IAAI,QAAQ,2BACV,WAAW,KAAK,mBAAmB,EAAE,QAAQ,wBAAwB,CAAC,CAAC;CAGzE,IAAI,YAAY,qBAAqB,QAAQ,GAC3C,6BAA6B,SAAS,EAAE,KAAK,WAC3C,WAAW,KAAK,OAAO,CAAC,CAC1B;CAGF,OAAO;AACT"}

package/dist/js/packages/components/src/components/CodeEditor/languages/index.mjs

@@ -9,7 +9,8 @@ Object.keys(langs).forEach((key) => {
 	supportedCodeEditorLanguages[languageKey] = [langs[languageKey]];
 });
 supportedCodeEditorLanguages.dotEnv = language;
+var isCodeEditorLanguage = (language) => Object.hasOwn(supportedCodeEditorLanguages, language);
 //#endregion
-export { supportedCodeEditorLanguages as default };
+export { supportedCodeEditorLanguages as default, isCodeEditorLanguage };
 
 //# sourceMappingURL=index.mjs.map

package/dist/js/packages/components/src/components/CodeEditor/languages/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["DotEnvLanguage"],"sources":["../../../../../../../../src/components/CodeEditor/languages/index.ts"],"sourcesContent":["import { langs, type LanguageName } from \"@uiw/codemirror-extensions-langs\";\nimport {\n  type LanguageSupport,\n  type StreamLanguage,\n} from \"@codemirror/language\";\nimport type { linter } from \"@codemirror/lint\";\nimport type { Extension } from \"@uiw/react-codemirror\";\nimport DotEnvLanguage from \"@/components/CodeEditor/languages/dotEnv\";\nimport type { ALL_LANGUAGES } from \"@/components/CodeEditor/languages/all\";\n\nexport type CodeEditorLanguage = (typeof ALL_LANGUAGES)[number];\n\nexport type LanguageFactory = Record<\n  CodeEditorLanguage,\n  (() =>\n    | StreamLanguage<unknown>\n    | LanguageSupport\n    | Extension\n    | ReturnType<typeof linter>)[]\n>;\n\nexport type LanguageContainer = [\n  () => Extension,\n  () => LanguageSupport,\n  () => ReturnType<typeof linter>,\n];\n\nconst supportedCodeEditorLanguages: LanguageFactory = {} as never;\nObject.keys(langs).forEach((key) => {\n  const languageKey = key as CodeEditorLanguage;\n  supportedCodeEditorLanguages[languageKey] = [\n    langs[languageKey as LanguageName],\n  ];\n});\n\nsupportedCodeEditorLanguages.dotEnv = DotEnvLanguage;\n\nexport default supportedCodeEditorLanguages;\n"],"mappings":";;;;;AA2BA,IAAM,+BAAgD,CAAC;AACvD,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,QAAQ;CAClC,MAAM,cAAc;CACpB,6BAA6B,eAAe,CAC1C,MAAM,YACR;AACF,CAAC;AAED,6BAA6B,SAASA"}
+{"version":3,"file":"index.mjs","names":["DotEnvLanguage"],"sources":["../../../../../../../../src/components/CodeEditor/languages/index.ts"],"sourcesContent":["import { langs, type LanguageName } from \"@uiw/codemirror-extensions-langs\";\nimport {\n  type LanguageSupport,\n  type StreamLanguage,\n} from \"@codemirror/language\";\nimport type { linter } from \"@codemirror/lint\";\nimport type { Extension } from \"@uiw/react-codemirror\";\nimport DotEnvLanguage from \"@/components/CodeEditor/languages/dotEnv\";\nimport type { ALL_LANGUAGES } from \"@/components/CodeEditor/languages/all\";\n\nexport type CodeEditorLanguage = (typeof ALL_LANGUAGES)[number];\n\nexport type LanguageFactory = Record<\n  CodeEditorLanguage,\n  (() =>\n    | StreamLanguage<unknown>\n    | LanguageSupport\n    | Extension\n    | ReturnType<typeof linter>)[]\n>;\n\nexport type LanguageContainer = [\n  () => Extension,\n  () => LanguageSupport,\n  () => ReturnType<typeof linter>,\n];\n\nconst supportedCodeEditorLanguages: LanguageFactory = {} as never;\nObject.keys(langs).forEach((key) => {\n  const languageKey = key as CodeEditorLanguage;\n  supportedCodeEditorLanguages[languageKey] = [\n    langs[languageKey as LanguageName],\n  ];\n});\n\nsupportedCodeEditorLanguages.dotEnv = DotEnvLanguage;\n\nexport const isCodeEditorLanguage = (\n  language: string,\n): language is CodeEditorLanguage =>\n  Object.hasOwn(supportedCodeEditorLanguages, language);\n\nexport default supportedCodeEditorLanguages;\n"],"mappings":";;;;;AA2BA,IAAM,+BAAgD,CAAC;AACvD,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,QAAQ;CAClC,MAAM,cAAc;CACpB,6BAA6B,eAAe,CAC1C,MAAM,YACR;AACF,CAAC;AAED,6BAA6B,SAASA;AAEtC,IAAa,wBACX,aAEA,OAAO,OAAO,8BAA8B,QAAQ"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonRawText } from "../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Content/Content.tsx
 /** @flr-generate all */
@@ -9,7 +10,7 @@ var Content = flowComponent("Content", (props) => {
 	return /* @__PURE__ */ jsx(elementType, {
 		ref,
 		...rest,
-		children
+		children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Content.mjs","names":["Element"],"sources":["../../../../../../../src/components/Content/Content.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface ContentProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"span\">,\n    FlowComponentProps {\n  /** @internal */\n  slot?: string;\n}\n\n/** @flr-generate all */\nexport const Content = flowComponent(\"Content\", (props) => {\n  const { children, elementType = \"div\", ref, ...rest } = props;\n\n  const Element = elementType;\n\n  return (\n    <Element ref={ref} {...rest}>\n      {children}\n    </Element>\n  );\n});\n\nexport default Content;\n"],"mappings":";;;;;;AAeA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EAAE,UAAU,cAAc,OAAO,KAAK,GAAG,SAAS;CAIxD,OACE,oBAACA,aAAD;EAAc;EAAK,GAAI;EACpB;CACM,CAAA;AAEb,CAAC"}
+{"version":3,"file":"Content.mjs","names":["Element"],"sources":["../../../../../../../src/components/Content/Content.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface ContentProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"span\">,\n    FlowComponentProps {\n  /** @internal */\n  slot?: string;\n}\n\n/** @flr-generate all */\nexport const Content = flowComponent(\"Content\", (props) => {\n  const { children, elementType = \"div\", ref, ...rest } = props;\n\n  const Element = elementType;\n\n  return (\n    <Element ref={ref} {...rest}>\n      <SkeletonRawText>{children}</SkeletonRawText>\n    </Element>\n  );\n});\n\nexport default Content;\n"],"mappings":";;;;;;;AAgBA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EAAE,UAAU,cAAc,OAAO,KAAK,GAAG,SAAS;CAIxD,OACE,oBAACA,aAAD;EAAc;EAAK,GAAI;EACrB,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;CACrC,CAAA;AAEb,CAAC"}

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

@@ -4,6 +4,8 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { styleClassname } from "../../lib/scss/selectors.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import Heading_module_default from "./Heading.module.mjs";
 import clsx from "clsx";
 import { Children } from "react";
@@ -23,6 +25,7 @@ var sizeByLevel = {
 /** @flr-generate all */
 var Heading = flowComponent("Heading", (props) => {
 	const { children, className, level = 2, color = "default", wrap, size, ref, elementType, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], styleClassname(Heading_module_default, `h${level}`), className);
 	const Element = elementType ?? Aria.Heading;
 	const effectiveSize = size ?? sizeByLevel[level] ?? "xs";
@@ -70,9 +73,13 @@ var Heading = flowComponent("Heading", (props) => {
 			...rest,
 			ref,
 			level,
+			inert: isSkeleton || void 0,
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: Heading_module_default.headingText,
-				children: [children, /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+				children: [/* @__PURE__ */ jsx(SkeletonTextContent, {
+					defaultWidth: "12em",
+					children
+				}), /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 					id: "headingContent",
 					component: "Heading",
 					children: (items) => Children.count(items) > 0 && /* @__PURE__ */ jsx("span", { className: Heading_module_default.headingTextSpacer })

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":["styles"],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    // The level class carries the font size. Emitted for every heading — not\n    // just the `elementType` ones — so the stylesheet can select on the class\n    // instead of the h1–h6 element react-aria renders without one.\n    styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>\n          {children}\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.count(items) > 0 && (\n                <span className={styles.headingTextSpacer} />\n              )\n            }\n          </UiComponentTunnelExit>\n        </span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.map(items, (item) => (\n                <span className={styles.headingContentItem}>{item}</span>\n              ))\n            }\n          </UiComponentTunnelExit>\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,uBAAO,SACP,QAAQA,uBAAO,QAAQ,SACvB,UAAU,aAAaA,uBAAO,QAC9B,QAAQA,uBAAO,QAAQ,SAIvB,eAAeA,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAWA,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAWA,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,qBAAC,QAAD;IAAM,WAAWA,uBAAO;IAAxB,UAAA,CACG,UACD,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAWA,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAWA,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAWA,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Heading.mjs","names":["styles"],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { Children } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/**\n * The font size each heading level renders at — the TypeScript half of the\n * level-based `--font-size` rules in Heading.module.scss. Levels 4 to 6 fall\n * through to the `xs` default.\n */\nconst sizeByLevel: Record<number, NonNullable<HeadingProps[\"size\"]>> = {\n  1: \"xl\",\n  2: \"m\",\n  3: \"s\",\n};\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    // The level class carries the font size. Emitted for every heading — not\n    // just the `elementType` ones — so the stylesheet can select on the class\n    // instead of the h1–h6 element react-aria renders without one.\n    styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const effectiveSize = size ?? sizeByLevel[level] ?? \"xs\";\n  const buttonSize =\n    effectiveSize === \"xl\" || effectiveSize === \"xxl\" ? \"m\" : \"s\";\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Button: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    CopyButton: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      size: buttonSize,\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element\n        className={rootClassName}\n        {...rest}\n        ref={ref}\n        level={level}\n        inert={isSkeleton || undefined}\n      >\n        <span className={styles.headingText}>\n          <SkeletonTextContent defaultWidth=\"12em\">\n            {children}\n          </SkeletonTextContent>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.count(items) > 0 && (\n                <span className={styles.headingTextSpacer} />\n              )\n            }\n          </UiComponentTunnelExit>\n        </span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\">\n            {(items) =>\n              Children.map(items, (item) => (\n                <span className={styles.headingContentItem}>{item}</span>\n              ))\n            }\n          </UiComponentTunnelExit>\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,IAAM,cAAiE;CACrE,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,uBAAO,SACP,QAAQA,uBAAO,QAAQ,SACvB,UAAU,aAAaA,uBAAO,QAC9B,QAAQA,uBAAO,QAAQ,SAIvB,eAAeA,wBAAQ,IAAI,OAAO,GAClC,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,gBAAgB,QAAQ,YAAY,UAAU;CACpD,MAAM,aACJ,kBAAkB,QAAQ,kBAAkB,QAAQ,MAAM;CAE5D,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAWA,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;EACR;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAWA,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GACE,WAAW;GACX,GAAI;GACC;GACE;GACP,OAAO,cAAc,KAAA;GALvB,UAAA,CAOE,qBAAC,QAAD;IAAM,WAAWA,uBAAO;IAAxB,UAAA,CACE,oBAAC,qBAAD;KAAqB,cAAa;KAC/B;IACkB,CAAA,GACrB,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,MAAM,KAAK,IAAI,KACtB,oBAAC,QAAD,EAAM,WAAWA,uBAAO,kBAAoB,CAAA;IAG3B,CAAA,CACnB;GACN,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAWA,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;KACjD,WAAA,UACA,SAAS,IAAI,QAAQ,SACnB,oBAAC,QAAD;MAAM,WAAWA,uBAAO;MAAqB,UAAA;KAAW,CAAA,CACzD;IAEkB,CAAA;GACnB,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -1,6 +1,8 @@
 "use client"
 /* */
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import InlineCode_module_default from "./InlineCode.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -8,6 +10,7 @@ import { jsx } from "react/jsx-runtime";
 /** @flr-generate all */
 var InlineCode = (props) => {
 	const { children, className, color = "default", style: styleFromProps, whiteSpace, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(InlineCode_module_default.inlineCode, isAlphaColor(color) && InlineCode_module_default[color], className);
 	const style = {
 		whiteSpace,
@@ -17,7 +20,11 @@ var InlineCode = (props) => {
 		...rest,
 		style,
 		className: rootClassName,
-		children
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsx(SkeletonTextContent, {
+			defaultWidth: "6em",
+			children
+		})
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"InlineCode.mjs","names":["styles"],"sources":["../../../../../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  CSSProperties,\n  FC,\n  PropsWithChildren,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The white-space property of the inline code component. @default undefined */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const {\n    children,\n    className,\n    color = \"default\",\n    style: styleFromProps,\n    whiteSpace,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const style = {\n    whiteSpace,\n    ...styleFromProps,\n  };\n\n  return (\n    <code {...rest} style={style} className={rootClassName}>\n      {children}\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"mappings":";;;;;;;;AAoBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,OAAO,gBACP,YACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,0BAAO,YACP,aAAa,KAAK,KAAKA,0BAAO,QAC9B,SACF;CAEA,MAAM,QAAQ;EACZ;EACA,GAAG;CACL;CAEA,OACE,oBAAC,QAAD;EAAM,GAAI;EAAa;EAAO,WAAW;EACtC;CACG,CAAA;AAEV"}
+{"version":3,"file":"InlineCode.mjs","names":["styles"],"sources":["../../../../../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  CSSProperties,\n  FC,\n  PropsWithChildren,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./InlineCode.module.scss\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface InlineCodeProps extends PropsWithChildren<\n  ComponentProps<\"code\">\n> {\n  /** The color schema of the inline code component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The white-space property of the inline code component. @default undefined */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n}\n\n/** @flr-generate all */\nexport const InlineCode: FC<InlineCodeProps> = (props) => {\n  const {\n    children,\n    className,\n    color = \"default\",\n    style: styleFromProps,\n    whiteSpace,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.inlineCode,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  const style = {\n    whiteSpace,\n    ...styleFromProps,\n  };\n\n  return (\n    <code\n      {...rest}\n      style={style}\n      className={rootClassName}\n      inert={isSkeleton || undefined}\n    >\n      <SkeletonTextContent defaultWidth=\"6em\">{children}</SkeletonTextContent>\n    </code>\n  );\n};\n\nexport default InlineCode;\n"],"mappings":";;;;;;;;;;AAsBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,OAAO,gBACP,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACP,aAAa,KAAK,KAAKA,0BAAO,QAC9B,SACF;CAEA,MAAM,QAAQ;EACZ;EACA,GAAG;CACL;CAEA,OACE,oBAAC,QAAD;EACE,GAAI;EACG;EACP,WAAW;EACX,OAAO,cAAc,KAAA;EAErB,UAAA,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAAA;CACnE,CAAA;AAEV"}

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

@@ -5,6 +5,8 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import overlayTriggersTunneledTo from "../../lib/propsContext/overlayTriggerTunnel.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import Label_module_default from "./Label.module.mjs";
 import __locale_default from "../../../../../_virtual/_8.locale.mjs";
 import clsx from "clsx";
@@ -18,6 +20,7 @@ var Label = flowComponent("Label", (props) => {
 	const [labelProps, labelRef] = Aria.useContextProps(rest, ref, Aria.LabelContext);
 	const { id, ...rootProps } = labelProps;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Label");
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = unstyled ? className : clsx(Label_module_default.label, isDisabled && Label_module_default.disabled, className);
 	const optionalMarker = /* @__PURE__ */ jsx("span", {
 		className: Label_module_default.optional,
@@ -50,11 +53,15 @@ var Label = flowComponent("Label", (props) => {
 				...rootProps,
 				className: rootClassName,
 				ref: labelRef,
+				inert: isSkeleton || void 0,
 				children: [
-					/* @__PURE__ */ jsxs("span", {
+					/* @__PURE__ */ jsx("span", {
 						id,
 						className: Label_module_default.text,
-						children: [children, optional && optionalMarker]
+						children: /* @__PURE__ */ jsxs(SkeletonTextContent, {
+							defaultWidth: "6em",
+							children: [children, optional && optionalMarker]
+						})
 					}),
 					/* @__PURE__ */ jsx(UiComponentTunnelExit, {
 						id: "contextualHelp",

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

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n    Action: {\n      tunnel: rightTunnel,\n      Button: {\n        tunnel: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label {...rootProps} className={rootClassName} ref={labelRef}>\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            {children}\n            {optional && optionalMarker}\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CAEpE,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IAAY,GAAI;IAAW,WAAW;IAAe,KAAK;IAA1D,UAAA;KAME,qBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAAhC,UAAA,CACG,UACA,YAAY,cACT;;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n    Action: {\n      tunnel: rightTunnel,\n      Button: {\n        tunnel: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}