npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.8 → 1.5.0 - Mend

@mittwald/flow-react-components 1.5.0-next.8 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertText.mjs","names":[],"sources":["../../../../../../../src/components/AlertText/AlertText.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName, PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AlertText.module.scss\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface AlertTextProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n FlowComponentProps,\n PropsWithStatus {}\n\n/** @flr-generate all */\nexport const AlertText = flowComponent(\"AlertText\", (props) => {\n const { className, children, status = \"info\" } = props;\n\n const rootClassName = clsx(styles.alertText, styles[status], className);\n\n return (\n <span className={rootClassName}>\n <PropsContextProvider props={{ Icon: { size: \"s\" } }}>\n <AlertIcon status={status} className={styles.icon} />\n </PropsContextProvider>\n\n <>{children}~~</>\~~n </span>\n );\n});\n\nexport default AlertText;\n"],"mappings":"~~;;;;;;;;;;AAmBA~~,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EAAE,WAAW,UAAU,SAAS,WAAW;CAEjD,MAAM,gBAAgB,~~KAAK~~,yBAAO,~~WAAW~~,yBAAO,SAAS,SAAS;CAEtE,OACE,qBAAC,QAAD;EAAM,WAAW;~~EAAjB~~,UAAA,CACE,oBAAC,sBAAD;GAAsB,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE;GACjD,UAAA,oBAAC,WAAD;IAAmB;IAAQ,~~WAAW~~,yBAAO;GAAO,CAAA;EAChC,CAAA,GAEtB,~~oBAAA~~,~~UAAA~~,~~EAAG~~,~~SAAW,~~CAAA,~~CACV~~;;AAEV,CAAC"}
1	+ {"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/Autocomplete/Autocomplete.mjs CHANGED Viewed

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
 import { Text } from "../Text/Text.mjs";
@@ -9,14 +10,14 @@ import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
 import { Options } from "../Options/Options.mjs";
 import __locale_default from "../../../../../_virtual/_3.locale.mjs";
 import Autocomplete_module_default from "./Autocomplete.module.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { isFocused } from "../../lib/form/isFocused.mjs";
 import { emitElementValueChange } from "../../lib/react/emitElementValueChange.mjs";
 import clsx from "clsx";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Aria from "react-aria-components";
 import { UNSAFE_PortalProvider, useFocusWithin, useLocalizedStringFormatter, useObjectRef } from "react-aria";
+import * as Aria from "react-aria-components";
 //#region src/components/Autocomplete/Autocomplete.tsx
 /** @flr-generate all */
 var Autocomplete = flowComponent("Autocomplete", (props) => {
@@ -40,6 +41,7 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
 		if (inputRef.current) emitElementValueChange(inputRef.current, value);
 		optionsOverlayController.close();
 	};
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps, skeletonProps } = useFieldComponent(props, "Autocomplete");
 	const inputProps = {
 		onKeyDown: (e) => {
 			if (e.key === "Enter" && optionsOverlayController.isOpen) e.preventDefault();
@@ -47,21 +49,27 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
 		ref: inputRef,
 		onChange: handleInputChange
 	};
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Autocomplete");
-	const rootClassName = clsx(Autocomplete_module_default.autocomplete, fieldProps.className, className);
+	const errorDescribedBy = controlProps["aria-describedby"];
+	const rootClassName = clsx(Autocomplete_module_default.autocomplete, wrapperProps.className, className);
 	const propsContext = {
-		SearchField: inputProps,
-		TextField: inputProps,
+		SearchField: {
+			...inputProps,
+			"aria-describedby": dynamic((p) => joinIds(errorDescribedBy, p["aria-describedby"]))
+		},
+		TextField: {
+			...inputProps,
+			"aria-describedby": dynamic((p) => joinIds(errorDescribedBy, p["aria-describedby"]))
+		},
 		Option: { tunnel: getOptionsTunnelProps("Autocomplete") },
 		Popover: { className: Autocomplete_module_default.popover },
 		...fieldPropsContext
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
+		...skeletonProps,
 		className: rootClassName,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
-			dependencies: [optionsOverlayController],
+			dependencies: [optionsOverlayController, errorDescribedBy],
 			children: /* @__PURE__ */ jsx("div", {
 				...focusWithin.focusWithinProps,
 				ref: container,

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

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

package/dist/js/packages/components/src/components/Avatar/Avatar.mjs CHANGED Viewed

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import Avatar_module_default from "./Avatar.module.mjs";
 import clsx from "clsx";
@@ -10,7 +11,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var Avatar = flowComponent("Avatar", (props) => {
 	const { children, className, color, size = "m", status, label, ref } = props;
-	const rootClassName = clsx(Avatar_module_default.avatar, Avatar_module_default[`size-${size}`], !status && Avatar_module_default[color ?? "blue"], status && Avatar_module_default[status], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Avatar_module_default.avatar, Avatar_module_default[`size-${size}`], !status && Avatar_module_default[color ?? "blue"], status && Avatar_module_default[status], isSkeleton && Avatar_module_default.skeleton, className);
 	const useDynamicColor = color === void 0 && status === void 0;
 	const propsContext = {
 		Initials: {
@@ -22,11 +24,18 @@ var Avatar = flowComponent("Avatar", (props) => {
 		Image: { "aria-hidden": true }
 	};
 	const isMeaningful = label !== void 0;
+	const isDecorative = !isMeaningful && !status;
+	if (isSkeleton) return /* @__PURE__ */ jsx("div", {
+		className: rootClassName,
+		ref,
+		"aria-hidden": true,
+		inert: true
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: rootClassName,
 		role: isMeaningful ? "img" : void 0,
 		"aria-label": label,
-		"aria-hidden": !isMeaningful && !status || void 0,
+		"aria-hidden": isDecorative || void 0,
 		ref,
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

package/dist/js/packages/components/src/components/Avatar/Avatar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Avatar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName, Status } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { avatarColors } from \"@/components/Avatar/avatarColors\";\n\nexport type AvatarColors = (typeof avatarColors)[number];\n\nexport interface AvatarProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n /** The size of the avatar. @default \"m\" /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\";\n /* The color of icons and initials inside the avatar. /\n color?: AvatarColors;\n /\n Adds status icon and color to the avatar. May only be used if the status is\n * explained by an element (like text or label) nearby.\n /\n status?: Status;\n /\n A descriptive label that assistive technology announces for the avatar\n * (e.g. the name of the represented person or entity). When set, the avatar\n * is exposed as a single image with this label. When omitted, the avatar is\n * treated as purely decorative and hidden from assistive technology.\n /\n label?: string;\n}\n\n/* @flr-generate all */\nexport const Avatar = flowComponent(\"Avatar\", (props) => {\n const { children, className, color, size = \"m\", status, label, ref } = props;\n\n const rootClassName = clsx(\n styles.avatar,\n styles[`size-${size}`],\n !status && styles[color ?? \"blue\"],\n status && styles[status],\n className,\n );\n\n const useDynamicColor = color === undefined && status === undefined;\n\n const propsContext: PropsContext = {\n Initials: {\n className: styles.initials,\n useDynamicColor,\n \"aria-hidden\": true,\n },\n Icon: {\n className: styles.icon,\n },\n Image: {\n \"aria-hidden\": true,\n },\n };\n\n const isMeaningful = label !== undefined;\n const isDecorative = !isMeaningful && !status;\n\n return (\n <div\n className={rootClassName}\n role={isMeaningful ? \"img\" : undefined}\n aria-label={label}\n aria-hidden={isDecorative \|\| undefined}\n ref={ref}\n >\n <PropsContextProvider props={propsContext}>\n {!status && children}\n {status && <AlertIcon className={styles.icon} status={status} />}\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default Avatar;\n"],"mappings":"~~;;;;;;;;;;AAkCA~~,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EAAE,UAAU,WAAW,OAAO,OAAO,KAAK,QAAQ,OAAO,QAAQ;CAEvE,MAAM,gBAAgB,~~KACpB~~,sBAAO,~~QACP~~,sBAAO,QAAQ,SACf,CAAC,~~UAAU~~,sBAAO,SAAS,SAC3B,~~UAAU~~,sBAAO,SACjB,SACF;CAEA,MAAM,kBAAkB,UAAU,KAAA,KAAa,WAAW,KAAA;CAE1D,MAAM,eAA6B;EACjC,UAAU;GACR,~~WAAW~~,sBAAO;GAClB;GACA,eAAe;EACjB;EACA,MAAM,EACJ,~~WAAW~~,sBAAO,KACpB;EACA,OAAO,EACL,eAAe,KACjB;CACF;CAEA,MAAM,eAAe,UAAU,KAAA;~~CAG~~/B,OACE,oBAAC,OAAD;EACE,WAAW;EACX,MAAM,eAAe,QAAQ,KAAA;EAC7B,cAAY;EACZ,~~eAPiB~~,~~CAAC,~~gBAAgB,~~CAAC,UAON,~~KAAA;EACxB;EAEL,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,CAAC,UAAU,UACX,UAAU,oBAAC,WAAD;IAAW,~~WAAW~~,sBAAO;IAAc;GAAS,CAAA,CAC3C;;CACnB,CAAA;AAET,CAAC"}
1	+ {"version":3,"file":"Avatar.mjs","names":["styles"],"sources":["../../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Avatar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName, Status } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { avatarColors } from \"@/components/Avatar/avatarColors\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport type AvatarColors = (typeof avatarColors)[number];\n\nexport interface AvatarProps\n extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n /** The size of the avatar. @default \"m\" /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\";\n /* The color of icons and initials inside the avatar. /\n color?: AvatarColors;\n /\n Adds status icon and color to the avatar. May only be used if the status is\n * explained by an element (like text or label) nearby.\n /\n status?: Status;\n /\n A descriptive label that assistive technology announces for the avatar\n * (e.g. the name of the represented person or entity). When set, the avatar\n * is exposed as a single image with this label. When omitted, the avatar is\n * treated as purely decorative and hidden from assistive technology.\n /\n label?: string;\n}\n\n/* @flr-generate all /\nexport const Avatar = flowComponent(\"Avatar\", (props) => {\n const { children, className, color, size = \"m\", status, label, ref } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.avatar,\n styles[`size-${size}`],\n !status && styles[color ?? \"blue\"],\n status && styles[status],\n isSkeleton && styles.skeleton,\n className,\n );\n\n const useDynamicColor = color === undefined && status === undefined;\n\n const propsContext: PropsContext = {\n Initials: {\n className: styles.initials,\n useDynamicColor,\n \"aria-hidden\": true,\n },\n Icon: {\n className: styles.icon,\n },\n Image: {\n \"aria-hidden\": true,\n },\n };\n\n const isMeaningful = label !== undefined;\n const isDecorative = !isMeaningful && !status;\n\n / The size does not depend on the content, and an `Image` inside would\n issue its request. */\n if (isSkeleton) {\n return <div className={rootClassName} ref={ref} aria-hidden inert />;\n }\n\n return (\n <div\n className={rootClassName}\n role={isMeaningful ? \"img\" : undefined}\n aria-label={label}\n aria-hidden={isDecorative \|\| undefined}\n ref={ref}\n >\n <PropsContextProvider props={propsContext}>\n {!status && children}\n {status && <AlertIcon className={styles.icon} status={status} />}\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;AAmCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EAAE,UAAU,WAAW,OAAO,OAAO,KAAK,QAAQ,OAAO,QAAQ;CAEvE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACf,CAAC,UAAUA,sBAAO,SAAS,SAC3B,UAAUA,sBAAO,SACjB,cAAcA,sBAAO,UACrB,SACF;CAEA,MAAM,kBAAkB,UAAU,KAAA,KAAa,WAAW,KAAA;CAE1D,MAAM,eAA6B;EACjC,UAAU;GACR,WAAWA,sBAAO;GAClB;GACA,eAAe;EACjB;EACA,MAAM,EACJ,WAAWA,sBAAO,KACpB;EACA,OAAO,EACL,eAAe,KACjB;CACF;CAEA,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,eAAe,CAAC,gBAAgB,CAAC;CAIvC,IAAI,YACF,OAAO,oBAAC,OAAD;EAAK,WAAW;EAAoB;EAAK,eAAA;EAAY,OAAA;CAAO,CAAA;CAGrE,OACE,oBAAC,OAAD;EACE,WAAW;EACX,MAAM,eAAe,QAAQ,KAAA;EAC7B,cAAY;EACZ,eAAa,gBAAgB,KAAA;EACxB;EAEL,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,CAAC,UAAU,UACX,UAAU,oBAAC,WAAD;IAAW,WAAWA,sBAAO;IAAc;GAAS,CAAA,CAC3C;;CACnB,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/Avatar/Avatar.module.mjs CHANGED Viewed

@@ -14,6 +14,7 @@ var success = "flow--avatar--success";
 var warning = "flow--avatar--warning";
 var danger = "flow--avatar--danger";
 var unavailable = "flow--avatar--unavailable";
+var skeleton = "flow--avatar--skeleton";
 var Avatar_module_default = {
 	avatar,
 	icon,
@@ -31,9 +32,12 @@ var Avatar_module_default = {
 	success,
 	warning,
 	danger,
-	unavailable
+	unavailable,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--avatar--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--avatar--skeleton-text-shimmer"
 };
 //#endregion
-export { avatar, blue, danger, Avatar_module_default as default, green, icon, info, initials, lilac, success, teal, unavailable, violet, warning };
+export { avatar, blue, danger, Avatar_module_default as default, green, icon, info, initials, lilac, skeleton, success, teal, unavailable, violet, warning };
 //# sourceMappingURL=Avatar.module.mjs.map

package/dist/js/packages/components/src/components/Avatar/Avatar.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n border-radius: var(--corner-radius--round);\n width: var(--avatar-size);\n height: var(--avatar-size);\n overflow: hidden;\n flex-shrink: 0;\n font-weight: var(--font-weight--bold);\n font-size: calc(var(--avatar-size) * 0.35);\n background-color: var(--background-color);\n color: var(--content-color);\n display: flex;\n align-items: center;\n justify-content: center;\n\n /* Elements /\n\n // The image is a child the consumer passes — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .icon {\n width: calc(var(--avatar-size) 0.7);\n height: calc(var(--avatar-size) * 0.7);\n }\n\n .initials {\n font-size: calc(var(--avatar-size) * 0.4);\n }\n\n @extend .size-m;\n @extend .blue;\n\n /* Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n --avatar-size: var(--avatar--size--#{$size});\n }\n }\n\n @include size(m);\n @include size(xs);\n @include size(s);\n @include size(l);\n\n / Colors /\n\n @mixin color($color) {\n &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n &.#{$color} {\n --background-color: var(--decorative--#{$color}-background-color);\n --content-color: var(--decorative--#{$color}-content-color);\n --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n }\n }\n\n @include color(\"blue\");\n @include color(\"teal\");\n @include color(\"green\");\n @include color(\"violet\");\n @include color(\"lilac\");\n\n / Status */\n\n @mixin status($status) {\n &.#{$status} {\n --background-color: var(--avatar--#{$status}-status-background-color);\n }\n }\n\n @include status(\"info\");\n @include status(\"success\");\n @include status(\"warning\");\n @include status(\"danger\");\n @include status(\"unavailable\");\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.avatar {\n border-radius: var(--corner-radius--round);\n width: var(--avatar-size);\n height: var(--avatar-size);\n overflow: hidden;\n flex-shrink: 0;\n font-weight: var(--font-weight--bold);\n font-size: calc(var(--avatar-size) * 0.35);\n background-color: var(--background-color);\n color: var(--content-color);\n display: flex;\n align-items: center;\n justify-content: center;\n\n /* Elements /\n\n // The image is a child the consumer passes — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .icon {\n width: calc(var(--avatar-size) 0.7);\n height: calc(var(--avatar-size) * 0.7);\n }\n\n .initials {\n font-size: calc(var(--avatar-size) * 0.4);\n }\n\n @extend .size-m;\n @extend .blue;\n\n /* Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n --avatar-size: var(--avatar--size--#{$size});\n }\n }\n\n @include size(m);\n @include size(xs);\n @include size(s);\n @include size(l);\n\n / Colors /\n\n @mixin color($color) {\n &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n &.#{$color} {\n --background-color: var(--decorative--#{$color}-background-color);\n --content-color: var(--decorative--#{$color}-content-color);\n --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n }\n }\n\n @include color(\"blue\");\n @include color(\"teal\");\n @include color(\"green\");\n @include color(\"violet\");\n @include color(\"lilac\");\n\n / Status /\n\n @mixin status($status) {\n &.#{$status} {\n --background-color: var(--avatar--#{$status}-status-background-color);\n }\n }\n\n @include status(\"info\");\n @include status(\"success\");\n @include status(\"warning\");\n @include status(\"danger\");\n @include status(\"unavailable\");\n\n / SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--corner-radius--round);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/AvatarStack/AvatarStack.mjs CHANGED Viewed

@@ -12,7 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var AvatarStack = (props) => {
 	const { className, children, totalCount = 0, size = "m", onCountPress } = props;
-	const additionalItemsCount = totalCount - Children.count(children);
+	const additionalItemsCount = totalCount - Children.toArray(children).length;
 	const rootClassName = clsx(AvatarStack_module_default.avatarStack, AvatarStack_module_default[`size-${size}`], className);
 	const propsContext = {
 		Avatar: {

package/dist/js/packages/components/src/components/AvatarStack/AvatarStack.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarStack.mjs","names":[],"sources":["../../../../../../../src/components/AvatarStack/AvatarStack.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Children } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./AvatarStack.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { Avatar } from \"@/components/Avatar\";\nimport { Wrap } from \"@/components/Wrap\";\n\nexport interface AvatarStackProps\n extends PropsWithClassName, PropsWithChildren {\n /*\n The total count of items, as avatars should only be displayed for the first\n * view\n /\n totalCount?: number;\n /* The onPress action of the additional items count element /\n onCountPress?: () => void;\n /* The size of the avatars inside the stack. @default \"m\" /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\";\n}\n\n/* @flr-generate all */\nexport const AvatarStack: FC<AvatarStackProps> = (props) => {\n const {\n className,\n children,\n totalCount = 0,\n size = \"m\",\n onCountPress,\n } = props;\n\n const avatarCount = Children.~~count~~(children);\n\n const additionalItemsCount = totalCount - avatarCount;\n\n const rootClassName = clsx(\n styles.avatarStack,\n styles[`size-${size}`],\n className,\n );\n\n const propsContext: PropsContext = {\n Avatar: { className: styles.avatar, size },\n Button: {\n className: styles.avatar,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName}>\n {children}\n {additionalItemsCount > 0 && (\n <Wrap if={onCountPress}>\n <Button onPress={onCountPress}>\n <Avatar size={size}>+{additionalItemsCount}</Avatar>\n </Button>\n </Wrap>\n )}\n </div>\n </PropsContextProvider>\n );\n};\n\nexport default AvatarStack;\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,WACA,UACA,aAAa,GACb,OAAO,KACP,iBACE;CAIJ,MAAM,uBAAuB,aAFT,SAAS,~~MAAM~~,~~QAEO~~;~~CAE1C~~,MAAM,gBAAgB,~~KACpB~~,2BAAO,~~aACP~~,2BAAO,QAAQ,SACf,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ;GAAE,~~WAAW~~,2BAAO;GAAQ;EAAK;EACzC,QAAQ,EACN,~~WAAW~~,2BAAO,OACpB;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACG,UACA,uBAAuB,KACtB,oBAAC,MAAD;IAAM,IAAI;IACR,UAAA,oBAAC,QAAD;KAAQ,SAAS;KACf,UAAA,qBAAC,QAAD;MAAc;MAAd,UAAA,CAAoB,KAAE,oBAA6B;;IAC7C,CAAA;GACJ,CAAA,CAEL;;CACe,CAAA;AAE1B"}
1	+ {"version":3,"file":"AvatarStack.mjs","names":["styles"],"sources":["../../../../../../../src/components/AvatarStack/AvatarStack.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Children } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./AvatarStack.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { Avatar } from \"@/components/Avatar\";\nimport { Wrap } from \"@/components/Wrap\";\n\nexport interface AvatarStackProps\n extends PropsWithClassName, PropsWithChildren {\n /*\n The total count of items, as avatars should only be displayed for the first\n * view\n /\n totalCount?: number;\n /* The onPress action of the additional items count element /\n onCountPress?: () => void;\n /* The size of the avatars inside the stack. @default \"m\" /\n size?: \"xs\" \| \"s\" \| \"m\" \| \"l\";\n}\n\n/* @flr-generate all */\nexport const AvatarStack: FC<AvatarStackProps> = (props) => {\n const {\n className,\n children,\n totalCount = 0,\n size = \"m\",\n onCountPress,\n } = props;\n\n const avatarCount = Children.toArray(children).length;\n\n const additionalItemsCount = totalCount - avatarCount;\n\n const rootClassName = clsx(\n styles.avatarStack,\n styles[`size-${size}`],\n className,\n );\n\n const propsContext: PropsContext = {\n Avatar: { className: styles.avatar, size },\n Button: {\n className: styles.avatar,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName}>\n {children}\n {additionalItemsCount > 0 && (\n <Wrap if={onCountPress}>\n <Button onPress={onCountPress}>\n <Avatar size={size}>+{additionalItemsCount}</Avatar>\n </Button>\n </Wrap>\n )}\n </div>\n </PropsContextProvider>\n );\n};\n\nexport default AvatarStack;\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,WACA,UACA,aAAa,GACb,OAAO,KACP,iBACE;CAIJ,MAAM,uBAAuB,aAFT,SAAS,QAAQ,QAAQ,CAAC,CAAC;CAI/C,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACf,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ;GAAE,WAAWA,2BAAO;GAAQ;EAAK;EACzC,QAAQ,EACN,WAAWA,2BAAO,OACpB;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACG,UACA,uBAAuB,KACtB,oBAAC,MAAD;IAAM,IAAI;IACR,UAAA,oBAAC,QAAD;KAAQ,SAAS;KACf,UAAA,qBAAC,QAAD;MAAc;MAAd,UAAA,CAAoB,KAAE,oBAA6B;;IAC7C,CAAA;GACJ,CAAA,CAEL;;CACe,CAAA;AAE1B"}

package/dist/js/packages/components/src/components/Badge/Badge.mjs CHANGED Viewed

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { alphaColors, isAlphaColor } from "../../lib/types/props.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
@@ -21,7 +22,8 @@ var contextualHelpTunnel = {
 var Badge = flowComponent("Badge", (props) => {
 	const { children, className, color = "neutral", ref, onPress, onClose, isDisabled, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Badge");
-	const rootClassName = clsx(Badge_module_default.badge, Badge_module_default[color], isDisabled && Badge_module_default.disabled, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Badge_module_default.badge, Badge_module_default[color], isDisabled && Badge_module_default.disabled, isSkeleton && Badge_module_default.skeleton, className);
 	const buttonColor = isAlphaColor(color) ? color : "dark";
 	const propsContext = {
 		Label: {
@@ -65,10 +67,11 @@ var Badge = flowComponent("Badge", (props) => {
 	};
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsxs("div", {
 			className: rootClassName,
 			...rest,
 			ref,
+			inert: isSkeleton || void 0,
 			children: [
 				!onPress && /* @__PURE__ */ jsx("div", {
 					className: Badge_module_default.content,
@@ -96,7 +99,7 @@ var Badge = flowComponent("Badge", (props) => {
 					children: /* @__PURE__ */ jsx(IconClose, {})
 				})
 			]
-		})
+		}) })
 	});
 });
 //#endregion

package/dist/js/packages/components/src/components/Badge/Badge.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n alphaColors,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { ContextualHelpButton } from \"@/components/Badge/components/ContextualHelpButton\";\nimport locales from \"./locales/.locale.json\";\n\nexport const badgeColors = [\n \"neutral\",\n \"blue\",\n \"navy\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"orange\",\n \"red\",\n ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n /* Handler that is called when the badge is pressed. /\n onPress?: (e: PressEvent) => void;\n /* Handler that is called when the badges close icon is pressed. /\n onClose?: (e: PressEvent) => void;\n /* The color of the badge. @default \"neutral\" /\n color?: BadgeColors;\n /* Whether the badge is disabled. /\n isDisabled?: boolean;\n}\n\nconst contextualHelpTunnel = {\n id: \"contextualHelp\",\n component: \"Badge\",\n} as const;\n\n/* @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n const {\n children,\n className,\n color = \"neutral\",\n ref,\n onPress,\n onClose,\n isDisabled,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Badge\");\n\n const rootClassName = clsx(\n styles.badge,\n styles[color],\n isDisabled && styles.disabled,\n className,\n );\n\n const buttonColor = isAlphaColor(color) ? color : \"dark\";\n\n const propsContext: PropsContext = {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n Button: {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n },\n ContextualHelp: {\n tunnel: contextualHelpTunnel,\n wrapWith: (\n <ContextualHelpButton\n className={styles.action}\n color={buttonColor}\n isDisabled={isDisabled}\n />\n ),\n },\n // A trigger the consumer wrote brings its own button. It goes to the same\n // place, styled like the one the badge supplies.\n ContextualHelpTrigger: {\n tunnel: contextualHelpTunnel,\n Button: {\n className: styles.action,\n color: buttonColor,\n variant: \"plain\",\n size: \"s\",\n isDisabled,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div className={rootClassName} {...rest} ref={ref}>\n {!onPress && <div className={styles.content}>{children}</div>}\n {onPress && (\n <Button\n isDisabled={isDisabled}\n unstyled\n className={styles.button}\n onPress={onPress}\n >\n {children}\n </Button>\n )}\n\n <UiComponentTunnelExit id={contextualHelpTunnel.id} component=\"Badge\" />\n\n {onClose && (\n <Button\n className={styles.close}\n size=\"s\"\n color={buttonColor}\n variant=\"plain\"\n onPress={onClose}\n isDisabled={isDisabled}\n aria-label={stringFormatter.format(\"remove\")}\n >\n <IconClose />\n </Button>\n )}\n </div>\n </PropsContextProvider>\n );\n});\n\nexport default Badge;\n"],"mappings":"~~;;;;;;;;;;;;;;AAmB2B~~,CAUzB,GAAG,WACL;AAeA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAGA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,KACA,SACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,OAAO;~~CAEpE~~,MAAM,gBAAgB,~~KACpB~~,qBAAO,~~OACP~~,qBAAO,QACP,~~cAAc~~,qBAAO,UACrB,SACF;CAEA,MAAM,cAAc,aAAa,KAAK,IAAI,QAAQ;CAElD,MAAM,eAA6B;EACjC,OAAO;GACL,aAAa;GACb,~~WAAW~~,qBAAO;GAClB,UAAU;EACZ;EACA,MAAM;GACJ,aAAa;GACb,~~WAAW~~,qBAAO;EACpB;EACA,QAAQ;GACN,OAAO;IACL,aAAa;IACb,~~WAAW~~,qBAAO;IAClB,UAAU;GACZ;GACA,MAAM;IACJ,aAAa;IACb,~~WAAW~~,qBAAO;GACpB;EACF;EACA,gBAAgB;GACd,QAAQ;GACR,UACE,oBAAC,sBAAD;IACE,~~WAAW~~,qBAAO;IAClB,OAAO;IACK;GACb,CAAA;EAEL;EAGA,uBAAuB;GACrB,QAAQ;GACR,QAAQ;IACN,~~WAAW~~,qBAAO;IAClB,OAAO;IACP,SAAS;IACT,MAAM;IACN;GACF;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;~~EAC3B~~,UAAA,qBAAC,OAAD;~~GAAK~~,WAAW;~~GAAe~~,GAAI;~~GAAW~~;~~GAA9C~~,UAAA;~~IACG~~,CAAC,WAAW,oBAAC,OAAD;KAAK,~~WAAW~~,qBAAO;KAAU;IAAc,CAAA;IAC3D,WACC,oBAAC,QAAD;KACc;KACZ,UAAA;KACA,~~WAAW~~,qBAAO;KACT;KAER;IACK,CAAA;IAGV,oBAAC,uBAAD;~~KAAuB~~,IAAI,qBAAqB;~~KAAI~~,WAAU;~~IAAS~~,CAAA;~~IAEtE~~,WACC,oBAAC,QAAD;KACE,~~WAAW~~,qBAAO;KAClB,MAAK;KACL,OAAO;KACP,SAAQ;KACR,SAAS;KACG;KACZ,cAAY,gBAAgB,OAAO,QAAQ;KAE3C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GAEP~~;;CACe~~,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"Badge.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n alphaColors,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { ContextualHelpButton } from \"@/components/Badge/components/ContextualHelpButton\";\nimport locales from \"./locales/.locale.json\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport const badgeColors = [\n \"neutral\",\n \"blue\",\n \"navy\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"orange\",\n \"red\",\n ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n /* Handler that is called when the badge is pressed. /\n onPress?: (e: PressEvent) => void;\n /* Handler that is called when the badges close icon is pressed. /\n onClose?: (e: PressEvent) => void;\n /* The color of the badge. @default \"neutral\" /\n color?: BadgeColors;\n /* Whether the badge is disabled. /\n isDisabled?: boolean;\n}\n\nconst contextualHelpTunnel = {\n id: \"contextualHelp\",\n component: \"Badge\",\n} as const;\n\n/* @flr-generate all /\nexport const Badge = flowComponent(\"Badge\", (props) => {\n const {\n children,\n className,\n color = \"neutral\",\n ref,\n onPress,\n onClose,\n isDisabled,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Badge\");\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.badge,\n styles[color],\n isDisabled && styles.disabled,\n isSkeleton && styles.skeleton,\n className,\n );\n\n const buttonColor = isAlphaColor(color) ? color : \"dark\";\n\n const propsContext: PropsContext = {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n Button: {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n },\n ContextualHelp: {\n tunnel: contextualHelpTunnel,\n wrapWith: (\n <ContextualHelpButton\n className={styles.action}\n color={buttonColor}\n isDisabled={isDisabled}\n />\n ),\n },\n // A trigger the consumer wrote brings its own button. It goes to the same\n // place, styled like the one the badge supplies.\n ContextualHelpTrigger: {\n tunnel: contextualHelpTunnel,\n Button: {\n className: styles.action,\n color: buttonColor,\n variant: \"plain\",\n size: \"s\",\n isDisabled,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {/ The badge is one skeleton surface, its content draws none. */}\n <SkeletonModeReset>\n <div\n className={rootClassName}\n {...rest}\n ref={ref}\n inert={isSkeleton \|\| undefined}\n >\n {!onPress && <div className={styles.content}>{children}</div>}\n {onPress && (\n <Button\n isDisabled={isDisabled}\n unstyled\n className={styles.button}\n onPress={onPress}\n >\n {children}\n </Button>\n )}\n\n <UiComponentTunnelExit\n id={contextualHelpTunnel.id}\n component=\"Badge\"\n />\n\n {onClose && (\n <Button\n className={styles.close}\n size=\"s\"\n color={buttonColor}\n variant=\"plain\"\n onPress={onClose}\n isDisabled={isDisabled}\n aria-label={stringFormatter.format(\"remove\")}\n >\n <IconClose />\n </Button>\n )}\n </div>\n </SkeletonModeReset>\n </PropsContextProvider>\n );\n});\n\nexport default Badge;\n"],"mappings":";;;;;;;;;;;;;;;AAuB2B,CAUzB,GAAG,WACL;AAeA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAGA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,KACA,SACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,qBAAO,OACPA,qBAAO,QACP,cAAcA,qBAAO,UACrB,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,cAAc,aAAa,KAAK,IAAI,QAAQ;CAElD,MAAM,eAA6B;EACjC,OAAO;GACL,aAAa;GACb,WAAWA,qBAAO;GAClB,UAAU;EACZ;EACA,MAAM;GACJ,aAAa;GACb,WAAWA,qBAAO;EACpB;EACA,QAAQ;GACN,OAAO;IACL,aAAa;IACb,WAAWA,qBAAO;IAClB,UAAU;GACZ;GACA,MAAM;IACJ,aAAa;IACb,WAAWA,qBAAO;GACpB;EACF;EACA,gBAAgB;GACd,QAAQ;GACR,UACE,oBAAC,sBAAD;IACE,WAAWA,qBAAO;IAClB,OAAO;IACK;GACb,CAAA;EAEL;EAGA,uBAAuB;GACrB,QAAQ;GACR,QAAQ;IACN,WAAWA,qBAAO;IAClB,OAAO;IACP,SAAS;IACT,MAAM;IACN;GACF;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,mBAAD,EAAA,UACE,qBAAC,OAAD;GACE,WAAW;GACX,GAAI;GACC;GACL,OAAO,cAAc,KAAA;GAJvB,UAAA;IAMG,CAAC,WAAW,oBAAC,OAAD;KAAK,WAAWA,qBAAO;KAAU;IAAc,CAAA;IAC3D,WACC,oBAAC,QAAD;KACc;KACZ,UAAA;KACA,WAAWA,qBAAO;KACT;KAER;IACK,CAAA;IAGV,oBAAC,uBAAD;KACE,IAAI,qBAAqB;KACzB,WAAU;IACX,CAAA;IAEA,WACC,oBAAC,QAAD;KACE,WAAWA,qBAAO;KAClB,MAAK;KACL,OAAO;KACP,SAAQ;KACR,SAAS;KACG;KACZ,cAAY,gBAAgB,OAAO,QAAQ;KAE3C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GAEP;EACY,CAAA,EAAA,CAAA;CACC,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Badge/Badge.module.mjs CHANGED Viewed

@@ -20,6 +20,7 @@ var orange = "flow--badge--orange";
 var red = "flow--badge--red";
 var dark = "flow--badge--dark";
 var light = "flow--badge--light";
+var skeleton = "flow--badge--skeleton";
 var Badge_module_default = {
 	badge,
 	content,
@@ -41,9 +42,12 @@ var Badge_module_default = {
 	dark,
 	light,
 	"dark-static": "flow--badge--dark-static",
-	"light-static": "flow--badge--light-static"
+	"light-static": "flow--badge--light-static",
+	skeleton,
+	"skeleton-surface-shimmer": "flow--badge--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--badge--skeleton-text-shimmer"
 };
 //#endregion
-export { action, badge, blue, button, close, content, dark, Badge_module_default as default, disabled, green, light, lilac, navy, neutral, orange, red, scope, teal, value, violet };
+export { action, badge, blue, button, close, content, dark, Badge_module_default as default, disabled, green, light, lilac, navy, neutral, orange, red, scope, skeleton, teal, value, violet };
 //# sourceMappingURL=Badge.module.mjs.map