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

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

@@ -5,6 +5,8 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import Link_module_default from "./Link.module.mjs";
 import { linkContext } from "./context.mjs";
 import { LinkIcon } from "./components/LinkIcon/LinkIcon.mjs";
@@ -18,6 +20,7 @@ import * as Aria from "react-aria-components";
 var Link = flowComponent("Link", (props) => {
 	const { children, className, inline, linkComponent: linkComponentFromProps, color = "default", unstyled = false, "aria-current": ariaCurrent, ref, slot: ignoredSlotProp, style, whiteSpace, size = "m", onClickCapture: onClickCaptureFromProps, target, download, ...rest } = props;
 	const { linkComponent: linkComponentFromContext } = useContext(linkContext);
+	const isSkeleton = useSkeletonMode();
 	const Link = linkComponentFromProps ? linkComponentFromProps : props.href && linkComponentFromContext ? linkComponentFromContext : Aria.Link;
 	const router = useRouter();
 	/**
@@ -57,8 +60,34 @@ var Link = flowComponent("Link", (props) => {
 			})] }))
 		}
 	};
+	const unsupportedTypingsLinkProps = ariaCurrent ? { "aria-current": true } : {};
+	const content = /* @__PURE__ */ jsxs(PropsContextProvider, {
+		props: propsContext,
+		children: [/* @__PURE__ */ jsx(SkeletonTextContent, {
+			defaultWidth: "6em",
+			children
+		}), /* @__PURE__ */ jsx(LinkIcon, {
+			withZeroWidthJoiner: true,
+			unstyled,
+			target,
+			download,
+			children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+				id: "icon",
+				component: "Link"
+			})
+		})]
+	});
+	if (isSkeleton) return /* @__PURE__ */ jsx("span", {
+		className: rootClassName,
+		style: {
+			...style,
+			whiteSpace
+		},
+		inert: true,
+		children: content
+	});
 	return /* @__PURE__ */ jsx(Link, {
-		...ariaCurrent ? { "aria-current": true } : {},
+		...unsupportedTypingsLinkProps,
 		...rest,
 		target,
 		download,
@@ -69,19 +98,7 @@ var Link = flowComponent("Link", (props) => {
 			...style,
 			whiteSpace
 		},
-		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
-			props: propsContext,
-			children: [children, /* @__PURE__ */ jsx(LinkIcon, {
-				withZeroWidthJoiner: true,
-				unstyled,
-				target,
-				download,
-				children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
-					id: "icon",
-					component: "Link"
-				})
-			})]
-		})
+		children: content
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /**\n   * The name of the slot the link is placed in. In action groups: `primary` (at\n   * the end), `secondary` (before the primary action) or `abort` (at the\n   * start).\n   */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    target,\n    download,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      tunnel: {\n        component: \"Link\",\n        id: \"icon\",\n      },\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          {buttonProps.children}\n          <LinkIcon download={download} target={target} unstyled={unstyled} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      target={target}\n      download={download}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <LinkIcon\n          withZeroWidthJoiner\n          unstyled={unstyled}\n          target={target}\n          download={download}\n        >\n          <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n        </LinkIcon>\n      </PropsContextProvider>\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACEA,oBAAO,MACP,UAAUA,oBAAO,QACjB,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAAS,OAAOA,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAWA,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAWA,oBAAO,UACpB;EACA,WAAW,EAAE,WAAWA,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAWA,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAWA,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAAC,YAAA,EAAA,UAAA,CACG,YAAY,UACb,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD;IACE,qBAAA;IACU;IACF;IACE;IAEV,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAQ,WAAW;IAAS,CAAA;GAC/C,CAAA,CACU;;CAClB,CAAA;AAEV,CAAC"}
+{"version":3,"file":"Link.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /**\n   * The name of the slot the link is placed in. In action groups: `primary` (at\n   * the end), `secondary` (before the primary action) or `abort` (at the\n   * start).\n   */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    target,\n    download,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const isSkeleton = useSkeletonMode();\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      tunnel: {\n        component: \"Link\",\n        id: \"icon\",\n      },\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          {buttonProps.children}\n          <LinkIcon download={download} target={target} unstyled={unstyled} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  const content = (\n    <PropsContextProvider props={propsContext}>\n      <SkeletonTextContent defaultWidth=\"6em\">{children}</SkeletonTextContent>\n      <LinkIcon\n        withZeroWidthJoiner\n        unstyled={unstyled}\n        target={target}\n        download={download}\n      >\n        <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n      </LinkIcon>\n    </PropsContextProvider>\n  );\n\n  /* react-aria's Link drops `inert`, and a skeleton needs no anchor. */\n  if (isSkeleton) {\n    return (\n      <span className={rootClassName} style={{ ...style, whiteSpace }} inert>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      target={target}\n      download={download}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      {content}\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,aAAa,gBAAgB;CACnC,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACEA,oBAAO,MACP,UAAUA,oBAAO,QACjB,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAAS,OAAOA,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAWA,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAWA,oBAAO,UACpB;EACA,WAAW,EAAE,WAAWA,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAWA,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAWA,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAAC,YAAA,EAAA,UAAA,CACG,YAAY,UACb,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAEA,MAAM,8BAA8B,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;CAEL,MAAM,UACJ,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACE,oBAAC,qBAAD;GAAqB,cAAa;GAAO;EAA8B,CAAA,GACvE,oBAAC,UAAD;GACE,qBAAA;GACU;GACF;GACE;GAEV,UAAA,oBAAC,uBAAD;IAAuB,IAAI;IAAQ,WAAW;GAAS,CAAA;EAC/C,CAAA,CACU;;CAIxB,IAAI,YACF,OACE,oBAAC,QAAD;EAAM,WAAW;EAAe,OAAO;GAAE,GAAG;GAAO;EAAW;EAAG,OAAA;EAC9D,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE7B,UAAA;CACG,CAAA;AAEV,CAAC"}

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

@@ -2,12 +2,12 @@
 /* */
 //#region src/components/Skeleton/Skeleton.module.scss
 var skeleton = "flow--skeleton";
-var shimmer = "flow--skeleton--shimmer";
 var Skeleton_module_default = {
 	skeleton,
-	shimmer
+	"skeleton-surface-shimmer": "flow--skeleton--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--skeleton--skeleton-text-shimmer"
 };
 //#endregion
-export { Skeleton_module_default as default, shimmer, skeleton };
+export { Skeleton_module_default as default, skeleton };
 
 //# sourceMappingURL=Skeleton.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.module.mjs","names":[],"sources":["../../../../../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  position: relative;\n  overflow: hidden;\n  background-color: rgba(183, 201, 219, 0.5);\n  border-radius: var(--corner-radius--m);\n  width: 100%;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n\n  &::after {\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0.4) 60%,\n      rgba(255, 255, 255, 0)\n    );\n    animation: shimmer 3s infinite;\n    content: \"\";\n  }\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Skeleton.module.mjs","names":[],"sources":["../../../../../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeleton {\n  @include skeleton.surface;\n\n  width: 100%;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -0,0 +1,35 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { skeletonModeContext } from "./skeletonModeContext.mjs";
+import __locale_default from "../../../../../_virtual/_32.locale.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/SkeletonMode/SkeletonMode.tsx
+/**
+* @flr-generate all
+* @flowStatus beta, new
+*/
+var SkeletonMode = (props) => {
+	const { children, isEnabled = true } = props;
+	const parent = useContext(skeletonModeContext);
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "SkeletonMode");
+	const announces = isEnabled && !parent.isAnnounced;
+	const state = {
+		isEnabled,
+		isAnnounced: parent.isAnnounced || isEnabled
+	};
+	const announcement = announces && /* @__PURE__ */ jsx(Aria.VisuallyHidden, {
+		role: "status",
+		children: stringFormatter.format("loading")
+	});
+	return /* @__PURE__ */ jsxs(skeletonModeContext.Provider, {
+		value: state,
+		children: [announcement, children]
+	});
+};
+//#endregion
+export { SkeletonMode, SkeletonMode as default };
+
+//# sourceMappingURL=SkeletonMode.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonMode.mjs","names":["locales"],"sources":["../../../../../../../src/components/SkeletonMode/SkeletonMode.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\nimport {\n  skeletonModeContext,\n  type SkeletonModeState,\n} from \"./skeletonModeContext\";\n\nexport interface SkeletonModeProps extends PropsWithChildren {\n  /**\n   * Whether the components inside render as skeleton. A nested `SkeletonMode`\n   * with `isEnabled={false}` renders its content as real UI.\n   *\n   * @default true\n   */\n  isEnabled?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta, new\n */\nexport const SkeletonMode: FC<SkeletonModeProps> = (props) => {\n  const { children, isEnabled = true } = props;\n\n  const parent = useContext(skeletonModeContext);\n  const stringFormatter = useLocalizedStringFormatter(locales, \"SkeletonMode\");\n\n  const announces = isEnabled && !parent.isAnnounced;\n\n  const state: SkeletonModeState = {\n    isEnabled,\n    isAnnounced: parent.isAnnounced || isEnabled,\n  };\n\n  const announcement = announces && (\n    <Aria.VisuallyHidden role=\"status\">\n      {stringFormatter.format(\"loading\")}\n    </Aria.VisuallyHidden>\n  );\n\n  return (\n    <skeletonModeContext.Provider value={state}>\n      {announcement}\n      {children}\n    </skeletonModeContext.Provider>\n  );\n};\n\nexport default SkeletonMode;\n"],"mappings":";;;;;;;;;;;;;AAuBA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,UAAU,YAAY,SAAS;CAEvC,MAAM,SAAS,WAAW,mBAAmB;CAC7C,MAAM,kBAAkB,4BAA4BA,kBAAS,cAAc;CAE3E,MAAM,YAAY,aAAa,CAAC,OAAO;CAEvC,MAAM,QAA2B;EAC/B;EACA,aAAa,OAAO,eAAe;CACrC;CAEA,MAAM,eAAe,aACnB,oBAAC,KAAK,gBAAN;EAAqB,MAAK;EACvB,UAAA,gBAAgB,OAAO,SAAS;CACd,CAAA;CAGvB,OACE,qBAAC,oBAAoB,UAArB;EAA8B,OAAO;EAArC,UAAA,CACG,cACA,QAC2B;;AAElC"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { getTextOfChild, isTextChild } from "../../lib/isTextChild.mjs";
+import { useSkeletonMode } from "../../skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonTextContent/SkeletonTextContent.mjs";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.tsx
+/**
+* The text rule for containers: turns raw string and number children into bars
+* and leaves every element child to its own skeleton rendering. Outside an
+* enabled `SkeletonMode` it renders its children unchanged.
+*/
+var SkeletonRawText = (props) => {
+	const { children } = props;
+	if (!useSkeletonMode()) return children;
+	return Children.map(children, (child) => isTextChild(child) && getTextOfChild(child) !== "" ? /* @__PURE__ */ jsx(SkeletonTextContent, {
+		defaultWidth: "8em",
+		children: child
+	}) : child);
+};
+//#endregion
+export { SkeletonRawText, SkeletonRawText as default };
+
+//# sourceMappingURL=SkeletonRawText.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonRawText.mjs","names":[],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.tsx"],"sourcesContent":["import { Children, type FC, type PropsWithChildren } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport {\n  getTextOfChild,\n  isTextChild,\n} from \"@/components/SkeletonMode/lib/isTextChild\";\n\n/**\n * The text rule for containers: turns raw string and number children into bars\n * and leaves every element child to its own skeleton rendering. Outside an\n * enabled `SkeletonMode` it renders its children unchanged.\n */\nexport const SkeletonRawText: FC<PropsWithChildren> = (props) => {\n  const { children } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  if (!isSkeleton) {\n    return children;\n  }\n\n  return Children.map(children, (child) =>\n    isTextChild(child) && getTextOfChild(child) !== \"\" ? (\n      <SkeletonTextContent defaultWidth=\"8em\">{child}</SkeletonTextContent>\n    ) : (\n      child\n    ),\n  );\n};\n\nexport default SkeletonRawText;\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,mBAA0C,UAAU;CAC/D,MAAM,EAAE,aAAa;CAIrB,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,OAAO,SAAS,IAAI,WAAW,UAC7B,YAAY,KAAK,KAAK,eAAe,KAAK,MAAM,KAC9C,oBAAC,qBAAD;EAAqB,cAAa;EAAO,UAAA;CAA2B,CAAA,IAEpE,KAEJ;AACF"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { SkeletonText } from "../../../SkeletonText/SkeletonText.mjs";
+import { hasContent } from "../../lib/hasContent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../../skeletonModeContext.mjs";
+import SkeletonTextContent_module_default from "./SkeletonTextContent.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.tsx
+/**
+* The text rule of `SkeletonMode`: content becomes one bar per line in the
+* width of that line, no content becomes a `SkeletonText` in `defaultWidth`.
+* Outside an enabled `SkeletonMode` it renders its children unchanged.
+*/
+var SkeletonTextContent = (props) => {
+	const { children, defaultWidth } = props;
+	if (!useSkeletonMode()) return children;
+	if (!hasContent(children)) return /* @__PURE__ */ jsx(SkeletonText, { width: defaultWidth });
+	return /* @__PURE__ */ jsx("span", {
+		className: SkeletonTextContent_module_default.skeletonTextContent,
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children })
+	});
+};
+//#endregion
+export { SkeletonTextContent, SkeletonTextContent as default };
+
+//# sourceMappingURL=SkeletonTextContent.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTextContent.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { hasContent } from \"@/components/SkeletonMode/lib/hasContent\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\nimport styles from \"./SkeletonTextContent.module.scss\";\n\nexport interface SkeletonTextContentProps extends PropsWithChildren {\n  /** Width of the bar when there is no content to take the width from. */\n  defaultWidth: CSSProperties[\"width\"];\n}\n\n/**\n * The text rule of `SkeletonMode`: content becomes one bar per line in the\n * width of that line, no content becomes a `SkeletonText` in `defaultWidth`.\n * Outside an enabled `SkeletonMode` it renders its children unchanged.\n */\nexport const SkeletonTextContent: FC<SkeletonTextContentProps> = (props) => {\n  const { children, defaultWidth } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  if (!isSkeleton) {\n    return children;\n  }\n\n  if (!hasContent(children)) {\n    return <SkeletonText width={defaultWidth} />;\n  }\n\n  return (\n    <span className={styles.skeletonTextContent} aria-hidden>\n      <SkeletonModeReset>{children}</SkeletonModeReset>\n    </span>\n  );\n};\n\nexport default SkeletonTextContent;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EAAE,UAAU,iBAAiB;CAInC,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,IAAI,CAAC,WAAW,QAAQ,GACtB,OAAO,oBAAC,cAAD,EAAc,OAAO,aAAe,CAAA;CAG7C,OACE,oBAAC,QAAD;EAAM,WAAWA,mCAAO;EAAqB,eAAA;EAC3C,UAAA,oBAAC,mBAAD,EAAoB,SAA4B,CAAA;CAC5C,CAAA;AAEV"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.scss
+var skeletonTextContent = "flow--skeleton-mode--skeleton-text-content";
+var SkeletonTextContent_module_default = {
+	skeletonTextContent,
+	"skeleton-text-shimmer": "flow--skeleton-mode--skeleton-text-content--skeleton-text-shimmer",
+	"skeleton-surface-shimmer": "flow--skeleton-mode--skeleton-text-content--skeleton-surface-shimmer"
+};
+//#endregion
+export { SkeletonTextContent_module_default as default, skeletonTextContent };
+
+//# sourceMappingURL=SkeletonTextContent.module.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTextContent.module.mjs","names":[],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeletonTextContent {\n  @include skeleton.text;\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/SkeletonMode/lib/hasContent.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+import { getTextOfChild } from "./isTextChild.mjs";
+import { Children } from "react";
+//#region src/components/SkeletonMode/lib/hasContent.ts
+/** Whether `children` renders anything — `null`, booleans and empty text do not. */
+var hasContent = (children) => Children.toArray(children).some((child) => getTextOfChild(child) !== "");
+//#endregion
+export { hasContent };
+
+//# sourceMappingURL=hasContent.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/lib/hasContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasContent.mjs","names":[],"sources":["../../../../../../../../src/components/SkeletonMode/lib/hasContent.ts"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\nimport { getTextOfChild } from \"./isTextChild\";\n\n/** Whether `children` renders anything — `null`, booleans and empty text do not. */\nexport const hasContent = (children: ReactNode): boolean =>\n  Children.toArray(children).some((child) => getTextOfChild(child) !== \"\");\n"],"mappings":";;;;;;AAIA,IAAa,cAAc,aACzB,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,UAAU,eAAe,KAAK,MAAM,EAAE"}

package/dist/js/packages/components/src/components/SkeletonMode/lib/isTextChild.mjs

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { isRemoteTextRenderProps } from "../../../lib/react/remote.mjs";
+import { isValidElement } from "react";
+//#region src/components/SkeletonMode/lib/isTextChild.ts
+/**
+* Whether `child` is a text node — locally a string or number, remotely a
+* `RemoteTextRenderer` element.
+*/
+var isTextChild = (child) => typeof child === "string" || typeof child === "number" || isValidElement(child) && isRemoteTextRenderProps(child.props);
+/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */
+var getTextOfChild = (child) => {
+	if (typeof child === "string" || typeof child === "number") return String(child);
+	return isValidElement(child) && isRemoteTextRenderProps(child.props) ? child.props.remote.data : void 0;
+};
+//#endregion
+export { getTextOfChild, isTextChild };
+
+//# sourceMappingURL=isTextChild.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/lib/isTextChild.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isTextChild.mjs","names":[],"sources":["../../../../../../../../src/components/SkeletonMode/lib/isTextChild.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { isRemoteTextRenderProps } from \"@/lib/react/remote\";\n\n/**\n * Whether `child` is a text node — locally a string or number, remotely a\n * `RemoteTextRenderer` element.\n */\nexport const isTextChild = (child: ReactNode): boolean =>\n  typeof child === \"string\" ||\n  typeof child === \"number\" ||\n  (isValidElement(child) && isRemoteTextRenderProps(child.props));\n\n/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */\nexport const getTextOfChild = (child: ReactNode): string | undefined => {\n  if (typeof child === \"string\" || typeof child === \"number\") {\n    return String(child);\n  }\n\n  return isValidElement(child) && isRemoteTextRenderProps(child.props)\n    ? child.props.remote.data\n    : undefined;\n};\n"],"mappings":";;;;;;;;;AAOA,IAAa,eAAe,UAC1B,OAAO,UAAU,YACjB,OAAO,UAAU,YAChB,eAAe,KAAK,KAAK,wBAAwB,MAAM,KAAK;;AAG/D,IAAa,kBAAkB,UAAyC;CACtE,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,OAAO,KAAK;CAGrB,OAAO,eAAe,KAAK,KAAK,wBAAwB,MAAM,KAAK,IAC/D,MAAM,MAAM,OAAO,OACnB,KAAA;AACN"}

package/dist/js/packages/components/src/components/SkeletonMode/skeletonModeContext.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var skeletonModeContext = createContext({
+	isEnabled: false,
+	isAnnounced: false
+});
+/** Whether the calling component renders as skeleton. */
+var useSkeletonMode = () => useContext(skeletonModeContext).isEnabled;
+var resetState = {
+	isEnabled: false,
+	isAnnounced: true
+};
+/**
+* Renders its children as real UI below a component that already draws the
+* skeleton for them — the Text inside a text bar or a button surface must not
+* draw a second bar on top.
+*/
+var SkeletonModeReset = (props) => /* @__PURE__ */ jsx(skeletonModeContext.Provider, {
+	value: resetState,
+	children: props.children
+});
+//#endregion
+export { SkeletonModeReset, skeletonModeContext, useSkeletonMode };
+
+//# sourceMappingURL=skeletonModeContext.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/skeletonModeContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeletonModeContext.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonMode/skeletonModeContext.tsx"],"sourcesContent":["import {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n} from \"react\";\n\nexport interface SkeletonModeState {\n  /** Whether components render as skeleton. */\n  isEnabled: boolean;\n  /** Whether an enabled `SkeletonMode` above already announces the loading. */\n  isAnnounced: boolean;\n}\n\nconst disabledState: SkeletonModeState = {\n  isEnabled: false,\n  isAnnounced: false,\n};\n\nexport const skeletonModeContext =\n  createContext<SkeletonModeState>(disabledState);\n\n/** Whether the calling component renders as skeleton. */\nexport const useSkeletonMode = (): boolean =>\n  useContext(skeletonModeContext).isEnabled;\n\nconst resetState: SkeletonModeState = {\n  isEnabled: false,\n  isAnnounced: true,\n};\n\n/**\n * Renders its children as real UI below a component that already draws the\n * skeleton for them — the Text inside a text bar or a button surface must not\n * draw a second bar on top.\n */\nexport const SkeletonModeReset: FC<PropsWithChildren> = (props) => (\n  <skeletonModeContext.Provider value={resetState}>\n    {props.children}\n  </skeletonModeContext.Provider>\n);\n"],"mappings":";;;;AAmBA,IAAa,sBACX,cAAiC;CALjC,WAAW;CACX,aAAa;AAIoB,CAAa;;AAGhD,IAAa,wBACX,WAAW,mBAAmB,CAAC,CAAC;AAElC,IAAM,aAAgC;CACpC,WAAW;CACX,aAAa;AACf;;;;;;AAOA,IAAa,qBAA4C,UACvD,oBAAC,oBAAoB,UAArB;CAA8B,OAAO;CAClC,UAAA,MAAM;AACqB,CAAA"}

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

@@ -2,12 +2,12 @@
 /* */
 //#region src/components/SkeletonText/SkeletonText.module.scss
 var skeletonText = "flow--skeleton-text";
-var shimmer = "flow--skeleton-text--shimmer";
 var SkeletonText_module_default = {
 	skeletonText,
-	shimmer
+	"skeleton-surface-shimmer": "flow--skeleton-text--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--skeleton-text--skeleton-text-shimmer"
 };
 //#endregion
-export { SkeletonText_module_default as default, shimmer, skeletonText };
+export { SkeletonText_module_default as default, skeletonText };
 
 //# sourceMappingURL=SkeletonText.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.module.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.module.scss"],"sourcesContent":[".skeletonText {\n  position: relative;\n  overflow: hidden;\n  background-color: rgba(183, 201, 219, 0.5);\n  border-radius: var(--corner-radius--m);\n  width: 100%;\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  height: 1em;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n\n  &::after {\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0.4) 60%,\n      rgba(255, 255, 255, 0)\n    );\n    animation: shimmer 3s infinite;\n    content: \"\";\n  }\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SkeletonText.module.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeletonText {\n  @include skeleton.surface;\n\n  width: 100%;\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  height: 1em;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/Tabs/components/FallbackTab/FallbackTab.mjs

@@ -6,7 +6,7 @@ import { Text } from "../../../Text/Text.mjs";
 import { Heading } from "../../../Heading/Heading.mjs";
 import { IllustratedMessage } from "../../../IllustratedMessage/IllustratedMessage.mjs";
 import Tabs_module_default from "../../Tabs.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_32.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_33.locale.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tabs/components/FallbackTab/FallbackTab.tsx
 var FallbackTab = (props) => {

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

@@ -6,6 +6,8 @@ import { isAlphaColor } from "../../lib/types/props.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
 import { EmulatedBoldText } from "../EmulatedBoldText/EmulatedBoldText.mjs";
 import Text_module_default from "./Text.module.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
@@ -14,10 +16,12 @@ import invariant from "invariant";
 /** @flr-generate all */
 var Text = flowComponent("Text", (props) => {
 	const { children, className, elementType = "span", emulateBoldWidth, ref, color = "default", align = "start", wrap, style: styleFromProps, whiteSpace, wordBreak, noLigatures, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(Text_module_default.text, isAlphaColor(color) && Text_module_default[color], align && Text_module_default[`align-${align}`], wrap && Text_module_default[`wrap-${wrap}`], noLigatures && Text_module_default[`no-ligatures`], className);
 	const textProps = {
 		...rest,
-		className: rootClassName
+		className: rootClassName,
+		inert: isSkeleton || void 0
 	};
 	const propsContext = {
 		Link: {
@@ -36,7 +40,10 @@ var Text = flowComponent("Text", (props) => {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Wrap, {
 			if: emulateBoldWidth,
-			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children })
+			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children: /* @__PURE__ */ jsx(SkeletonTextContent, {
+				defaultWidth: "8em",
+				children
+			}) })
 		})
 	});
 	if (!props.slot) return /* @__PURE__ */ jsx(elementType, {

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

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /**\n   * Whether the elements width should match the width it would have with bold\n   * text.\n   */\n  emulateBoldWidth?: boolean;\n  /** The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The text-wrap property of the text. */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /** The white-space property of the text. */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /** The word-break property of the text. */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n  /**\n   * Disables standard and contextual ligatures for predictable, literal text\n   * rendering.\n   */\n  noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    noLigatures,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    noLigatures && styles[`no-ligatures`],\n    className,\n  );\n\n  const textProps = { ...rest, className: rootClassName };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n      color: isAlphaColor(color) ? color : undefined,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = {\n    whiteSpace,\n    wordBreak,\n    ...styleFromProps,\n  };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>{children}</EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,oBAAO,MACP,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAASA,oBAAO,SAAS,UACzB,QAAQA,oBAAO,QAAQ,SACvB,eAAeA,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;EAAE,GAAG;EAAM,WAAW;CAAc;CAEtD,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAWA,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;EAC1C,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAACC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}
+{"version":3,"file":"Text.mjs","names":["styles","Element"],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /**\n   * Whether the elements width should match the width it would have with bold\n   * text.\n   */\n  emulateBoldWidth?: boolean;\n  /** The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The text-wrap property of the text. */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /** The white-space property of the text. */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /** The word-break property of the text. */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n  /**\n   * Disables standard and contextual ligatures for predictable, literal text\n   * rendering.\n   */\n  noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    noLigatures,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    noLigatures && styles[`no-ligatures`],\n    className,\n  );\n\n  const textProps = {\n    ...rest,\n    className: rootClassName,\n    inert: isSkeleton || undefined,\n  };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n      color: isAlphaColor(color) ? color : undefined,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = {\n    whiteSpace,\n    wordBreak,\n    ...styleFromProps,\n  };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>\n          <SkeletonTextContent defaultWidth=\"8em\">\n            {children}\n          </SkeletonTextContent>\n        </EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;;;AAiDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,oBAAO,MACP,aAAa,KAAK,KAAKA,oBAAO,QAC9B,SAASA,oBAAO,SAAS,UACzB,QAAQA,oBAAO,QAAQ,SACvB,eAAeA,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;EAChB,GAAG;EACH,WAAW;EACX,OAAO,cAAc,KAAA;CACvB;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAWA,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,EAAA,UACE,oBAAC,qBAAD;IAAqB,cAAa;IAC/B;GACkB,CAAA,EACL,CAAA;EACd,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAACC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}

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

@@ -11,7 +11,7 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import TextField_module_default from "./TextField.module.mjs";
-import __locale_default from "../../../../../_virtual/_33.locale.mjs";
+import __locale_default from "../../../../../_virtual/_34.locale.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs

@@ -4,7 +4,7 @@ import { PropsContextProvider } from "../../../../lib/propsContext/components/Pr
 import dynamic from "../../../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../../../../components/TranslationProvider/useLocalizedStringFormatter.mjs";
 import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
-import __locale_default from "../../../../../../../_virtual/_34.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_35.locale.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useUpdateFormDefaultValue } from "./hooks/useUpdateFormDefaultValue.mjs";
 import "react";

package/dist/js/packages/components/src/lib/propsContext/nestedPropsContext/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","names":[],"sources":["../../../../../../../../src/lib/propsContext/nestedPropsContext/types.ts"],"sourcesContent":["export const nestingLevelKey = \"___nestingLevel\" as const;\n\nexport type NestingLevelKey = typeof nestingLevelKey;\n\n/** @internal */\nexport interface NestingLevelProps {\n  [nestingLevelKey]?: number;\n}\n"],"mappings":";;;AAAA,IAAa,kBAAkB"}
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../../../../../../src/lib/propsContext/nestedPropsContext/types.ts"],"sourcesContent":["export const nestingLevelKey = \"___nestingLevel\" as const;\n\nexport type NestingLevelKey = typeof nestingLevelKey;\n\nexport interface NestingLevelProps {\n  [nestingLevelKey]?: number;\n}\n"],"mappings":";;;AAAA,IAAa,kBAAkB"}

package/dist/js/packages/components/src/lib/propsContext/overlayTriggerTunnel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"overlayTriggerTunnel.mjs","names":[],"sources":["../../../../../../../src/lib/propsContext/overlayTriggerTunnel.ts"],"sourcesContent":["import type { PropsContext } from \"@/lib/propsContext/types\";\nimport type { PropsWithTunnel } from \"@/lib/types/props\";\n\n/**\n * Props context entries that send every overlay trigger into `tunnel`.\n *\n * A props context that tunnels `Button` has to tunnel the overlay triggers as a\n * whole, not their buttons: `OverlayTrigger` pins its trigger button in place\n * (`tunnel: null`), because react-aria wires the press handling, the trigger\n * ref and `aria-haspopup`/`aria-expanded`/`aria-controls` through a\n * `PressResponder` that only reaches its own subtree. Tunnelling the button\n * alone lifts it out of that subtree and silently drops all of it.\n *\n * `DialogTrigger` is in the list because it is the host-side identity of the\n * triggers that are not `@flr-generate` — `ModalTrigger`, `PopoverTrigger` and\n * `LightBoxTrigger` all render through its view, so a remote tree only ever\n * reaches the host as a `DialogTrigger`. `OverlayTrigger` pins it with `tunnel:\n * null` in turn, so the local tree tunnels the trigger the author wrote and\n * never the `DialogTrigger` inside it.\n *\n * Spread the entries before the context's own, so a single trigger can still be\n * sent somewhere else (see `Label`).\n */\nexport const overlayTriggersTunneledTo = (\n  tunnel: PropsWithTunnel[\"tunnel\"],\n): PropsContext => ({\n  ContextMenuTrigger: { tunnel },\n  ContextualHelpTrigger: { tunnel },\n  DialogTrigger: { tunnel },\n  ModalTrigger: { tunnel },\n  PopoverTrigger: { tunnel },\n});\n\nexport default overlayTriggersTunneledTo;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,6BACX,YACkB;CAClB,oBAAoB,EAAE,OAAO;CAC7B,uBAAuB,EAAE,OAAO;CAChC,eAAe,EAAE,OAAO;CACxB,cAAc,EAAE,OAAO;CACvB,gBAAgB,EAAE,OAAO;AAC3B"}
+{"version":3,"file":"overlayTriggerTunnel.mjs","names":[],"sources":["../../../../../../../src/lib/propsContext/overlayTriggerTunnel.ts"],"sourcesContent":["import type { PropsContext } from \"@/lib/propsContext/types\";\nimport type { TunnelTarget } from \"@/lib/types/props\";\n\n/**\n * Props context entries that send every overlay trigger into `tunnel`.\n *\n * A props context that tunnels `Button` has to tunnel the overlay triggers as a\n * whole, not their buttons: `OverlayTrigger` pins its trigger button in place\n * (`tunnel: null`), because react-aria wires the press handling, the trigger\n * ref and `aria-haspopup`/`aria-expanded`/`aria-controls` through a\n * `PressResponder` that only reaches its own subtree. Tunnelling the button\n * alone lifts it out of that subtree and silently drops all of it.\n *\n * `DialogTrigger` is in the list because it is the host-side identity of the\n * triggers that are not `@flr-generate` — `ModalTrigger`, `PopoverTrigger` and\n * `LightBoxTrigger` all render through its view, so a remote tree only ever\n * reaches the host as a `DialogTrigger`. `OverlayTrigger` pins it with `tunnel:\n * null` in turn, so the local tree tunnels the trigger the author wrote and\n * never the `DialogTrigger` inside it.\n *\n * Spread the entries before the context's own, so a single trigger can still be\n * sent somewhere else (see `Label`).\n */\nexport const overlayTriggersTunneledTo = (\n  tunnel: TunnelTarget,\n): PropsContext => ({\n  ContextMenuTrigger: { tunnel },\n  ContextualHelpTrigger: { tunnel },\n  DialogTrigger: { tunnel },\n  ModalTrigger: { tunnel },\n  PopoverTrigger: { tunnel },\n});\n\nexport default overlayTriggersTunneledTo;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,6BACX,YACkB;CAClB,oBAAoB,EAAE,OAAO;CAC7B,uBAAuB,EAAE,OAAO;CAChC,eAAe,EAAE,OAAO;CACxB,cAAc,EAAE,OAAO;CACvB,gBAAgB,EAAE,OAAO;AAC3B"}

package/dist/js/packages/components/src/lib/types/props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","names":[],"sources":["../../../../../../../src/lib/types/props.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport type { ExoticComponent, HTMLAttributes } from \"react\";\n\nexport const statusTypes = [\n  \"info\",\n  \"success\",\n  \"warning\",\n  \"danger\",\n  \"unavailable\",\n] as const;\n\nexport type Status = (typeof statusTypes)[number];\n\nexport type PropsWithStatus<T extends Status = Status, P = unknown> = P & {\n  /** The elements status */\n  status?: T;\n};\n\nexport interface PropsWithTunnel {\n  /** @internal */\n  tunnel?: {\n    id: string;\n    component: FlowComponentName;\n    /**\n     * A stable entry id instead of a generated one. Needed wherever the same\n     * component is rendered more than once for a single logical element:\n     * react-aria renders collection children twice — once into its hidden\n     * collection document, once for real — and a generated id would register\n     * each render as its own entry, so the tunnel exit renders every element\n     * twice. Must be unique among the siblings of one tunnel.\n     */\n    staticEntryId?: string;\n  } | null;\n}\n\nexport interface PropsWithClassName {\n  /** The elements class name. */\n  className?: string;\n}\n\nexport type PropsWithElementType<\n  T extends keyof HTMLElementTagNameMap = never,\n> = HTMLAttributes<HTMLElement> & {\n  /** The HTML element or React component rendered as the elements root. */\n  elementType?: T | ExoticComponent;\n};\n\nexport type ContainerBreakpointSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface PropsWithContainerBreakpointSize {\n  /**\n   * The breakpoint at which the element switches to its compact layout.\n   * Evaluated as a container query against the surrounding container, not\n   * against the viewport.\n   */\n  containerBreakpointSize?: ContainerBreakpointSize;\n}\n\nexport const alphaColors = [\n  \"dark\",\n  \"light\",\n  \"dark-static\",\n  \"light-static\",\n] as const;\n\nexport type AlphaColor = (typeof alphaColors)[number];\n\nexport function isAlphaColor(color: string): color is AlphaColor {\n  return alphaColors.includes(color as AlphaColor);\n}\n"],"mappings":";;;AAGA,IAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;AACF;AAiDA,IAAa,cAAc;CACzB;CACA;CACA;CACA;AACF;AAIA,SAAgB,aAAa,OAAoC;CAC/D,OAAO,YAAY,SAAS,KAAmB;AACjD"}
+{"version":3,"file":"props.mjs","names":[],"sources":["../../../../../../../src/lib/types/props.ts"],"sourcesContent":["import type { FlowComponentName } from \"@/components/propTypes\";\nimport type { ExoticComponent, HTMLAttributes } from \"react\";\n\nexport const statusTypes = [\n  \"info\",\n  \"success\",\n  \"warning\",\n  \"danger\",\n  \"unavailable\",\n] as const;\n\nexport type Status = (typeof statusTypes)[number];\n\nexport type PropsWithStatus<T extends Status = Status, P = unknown> = P & {\n  /** The elements status */\n  status?: T;\n};\n\nexport type TunnelTarget = {\n  id: string;\n  component: FlowComponentName;\n  /**\n   * A stable entry id instead of a generated one. Needed wherever the same\n   * component is rendered more than once for a single logical element:\n   * react-aria renders collection children twice — once into its hidden\n   * collection document, once for real — and a generated id would register each\n   * render as its own entry, so the tunnel exit renders every element twice.\n   * Must be unique among the siblings of one tunnel.\n   */\n  staticEntryId?: string;\n} | null;\n\nexport interface PropsWithTunnel {\n  /** @internal */\n  tunnel?: TunnelTarget;\n}\n\nexport interface PropsWithClassName {\n  /** The elements class name. */\n  className?: string;\n}\n\nexport type PropsWithElementType<\n  T extends keyof HTMLElementTagNameMap = never,\n> = HTMLAttributes<HTMLElement> & {\n  /** The HTML element or React component rendered as the elements root. */\n  elementType?: T | ExoticComponent;\n};\n\nexport type ContainerBreakpointSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface PropsWithContainerBreakpointSize {\n  /**\n   * The breakpoint at which the element switches to its compact layout.\n   * Evaluated as a container query against the surrounding container, not\n   * against the viewport.\n   */\n  containerBreakpointSize?: ContainerBreakpointSize;\n}\n\nexport const alphaColors = [\n  \"dark\",\n  \"light\",\n  \"dark-static\",\n  \"light-static\",\n] as const;\n\nexport type AlphaColor = (typeof alphaColors)[number];\n\nexport function isAlphaColor(color: string): color is AlphaColor {\n  return alphaColors.includes(color as AlphaColor);\n}\n"],"mappings":";;;AAGA,IAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;AACF;AAmDA,IAAa,cAAc;CACzB;CACA;CACA;CACA;AACF;AAIA,SAAgB,aAAa,OAAoC;CAC/D,OAAO,YAAY,SAAS,KAAmB;AACjD"}

package/dist/js/packages/components/src/status/component-status.mjs

@@ -384,6 +384,10 @@ var component_status_default = {
 		"level": "stable",
 		"isNew": false
 	},
+	"@mittwald/flow-react-components#SkeletonMode": {
+		"level": "beta",
+		"isNew": true
+	},
 	"@mittwald/flow-react-components#SkeletonText": {
 		"level": "stable",
 		"isNew": false