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

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

@@ -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,7 +10,7 @@ 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";
@@ -40,6 +41,7 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
 		if (inputRef.current) emitElementValueChange(inputRef.current, value);
 		optionsOverlayController.close();
 	};
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Autocomplete");
 	const inputProps = {
 		onKeyDown: (e) => {
 			if (e.key === "Enter" && optionsOverlayController.isOpen) e.preventDefault();
@@ -47,21 +49,26 @@ 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,
 		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

@@ -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"}
+{"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  } = 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 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,iBACE,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,WAAW;EAAhB,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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .action,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close),\n  &:has(.action) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.action):has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close),\n    &:has(.action) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n\n    &:has(.action):has(.close) {\n      .button,\n      .content {\n        padding-inline-end: calc(var(--content-size) * 2);\n      }\n    }\n  }\n\n  .action,\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    margin-inline-start: calc(\n      (var(--content-size) + var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* The trailing button rounds off the badge */\n  .close,\n  &:not(:has(.close)) .action {\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n  }\n\n  &:has(.action):has(.close) {\n    .action {\n      margin-inline-start: calc(\n        (var(--content-size) * 2 + var(--badge--border-width)) * -1\n      );\n    }\n\n    .close {\n      margin-inline-start: 0;\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .action,\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .action,\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .action,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close),\n  &:has(.action) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.action):has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close),\n    &:has(.action) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n\n    &:has(.action):has(.close) {\n      .button,\n      .content {\n        padding-inline-end: calc(var(--content-size) * 2);\n      }\n    }\n  }\n\n  .action,\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    margin-inline-start: calc(\n      (var(--content-size) + var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* The trailing button rounds off the badge */\n  .close,\n  &:not(:has(.close)) .action {\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n  }\n\n  &:has(.action):has(.close) {\n    .action {\n      margin-inline-start: calc(\n        (var(--content-size) * 2 + var(--badge--border-width)) * -1\n      );\n    }\n\n    .close {\n      margin-inline-start: 0;\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .action,\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .action,\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\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/BigNumber/BigNumber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BigNumber.mjs","names":[],"sources":["../../../../../../../src/components/BigNumber/BigNumber.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./BigNumber.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type BigNumberProps = PropsWithChildren & PropsWithClassName;\n\n/** @flr-generate all */\nexport const BigNumber: FC<BigNumberProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.bigNumber, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <span className={rootClassName}>{children}</span>\n    </PropsContextProvider>\n  );\n};\n\nexport default BigNumber;\n"],"mappings":";;;;;;;;AASA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,yBAAO,WAAW,SAAS;CAEtD,MAAM,eAA6B,EACjC,MAAM,EACJ,WAAW,yBAAO,KACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,QAAD;GAAM,WAAW;GAAgB;EAAe,CAAA;CAC5B,CAAA;AAE1B"}
+{"version":3,"file":"BigNumber.mjs","names":["styles"],"sources":["../../../../../../../src/components/BigNumber/BigNumber.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./BigNumber.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type BigNumberProps = PropsWithChildren & PropsWithClassName;\n\n/** @flr-generate all */\nexport const BigNumber: FC<BigNumberProps> = (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.bigNumber, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <span className={rootClassName}>{children}</span>\n    </PropsContextProvider>\n  );\n};\n\nexport default BigNumber;\n"],"mappings":";;;;;;;;AASA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,yBAAO,WAAW,SAAS;CAEtD,MAAM,eAA6B,EACjC,MAAM,EACJ,WAAWA,yBAAO,KACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,QAAD;GAAM,WAAW;GAAgB;EAAe,CAAA;CAC5B,CAAA;AAE1B"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import Breadcrumb_module_default from "./Breadcrumb.module.mjs";
 import { BreadcrumbItem } from "./components/BreadcrumbItem/BreadcrumbItem.mjs";
 import clsx from "clsx";
@@ -11,7 +12,8 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var Breadcrumb = (props) => {
 	const { children, className, color = "default", size = "m", ...rest } = props;
-	const rootClassName = clsx(Breadcrumb_module_default.breadcrumb, isAlphaColor(color) && Breadcrumb_module_default[color], size === "s" && Breadcrumb_module_default["size-s"], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Breadcrumb_module_default.breadcrumb, isAlphaColor(color) && Breadcrumb_module_default[color], size === "s" && Breadcrumb_module_default["size-s"], isSkeleton && Breadcrumb_module_default.skeleton, className);
 	const propsContext = { Link: {
 		unstyled: true,
 		className: Breadcrumb_module_default.link,

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface BreadcrumbProps\n  extends\n    Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n    PropsWithChildren {\n  /** The color of the breadcrumb. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n  const { children, className, color = \"default\", size = \"m\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.breadcrumb,\n    isAlphaColor(color) && styles[color],\n    size === \"s\" && styles[\"size-s\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      unstyled: true,\n      className: styles.link,\n      wrapWith: <BreadcrumbItem />,\n    },\n  };\n\n  return (\n    <Aria.Breadcrumbs {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Breadcrumbs>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,KAAK,GAAG,SAAS;CAExE,MAAM,gBAAgB,KACpB,0BAAO,YACP,aAAa,KAAK,KAAK,0BAAO,QAC9B,SAAS,OAAO,0BAAO,WACvB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU;EACV,WAAW,0BAAO;EAClB,UAAU,oBAAC,gBAAD,CAAiB,CAAA;CAC7B,EACF;CAEA,OACE,oBAAC,KAAK,aAAN;EAAkB,GAAI;EAAM,WAAW;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACN,CAAA;AAEtB"}
+{"version":3,"file":"Breadcrumb.mjs","names":["styles"],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface BreadcrumbProps\n  extends\n    Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n    PropsWithChildren {\n  /** The color of the breadcrumb. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n  const { children, className, color = \"default\", size = \"m\", ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.breadcrumb,\n    isAlphaColor(color) && styles[color],\n    size === \"s\" && styles[\"size-s\"],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      unstyled: true,\n      className: styles.link,\n      wrapWith: <BreadcrumbItem />,\n    },\n  };\n\n  return (\n    <Aria.Breadcrumbs {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Breadcrumbs>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,KAAK,GAAG,SAAS;CAExE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACP,aAAa,KAAK,KAAKA,0BAAO,QAC9B,SAAS,OAAOA,0BAAO,WACvB,cAAcA,0BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU;EACV,WAAWA,0BAAO;EAClB,UAAU,oBAAC,gBAAD,CAAiB,CAAA;CAC7B,EACF;CAEA,OACE,oBAAC,KAAK,aAAN;EAAkB,GAAI;EAAM,WAAW;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACN,CAAA;AAEtB"}

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

@@ -5,6 +5,7 @@ var breadcrumb = "flow--breadcrumb";
 var link = "flow--breadcrumb--link";
 var breadcrumbItem = "flow--breadcrumb--breadcrumb-item";
 var icon = "flow--breadcrumb--icon";
+var skeleton = "flow--breadcrumb--skeleton";
 var dark = "flow--breadcrumb--dark";
 var light = "flow--breadcrumb--light";
 var Breadcrumb_module_default = {
@@ -12,6 +13,7 @@ var Breadcrumb_module_default = {
 	link,
 	breadcrumbItem,
 	icon,
+	skeleton,
 	"size-s": "flow--breadcrumb--size-s",
 	dark,
 	light,
@@ -19,6 +21,6 @@ var Breadcrumb_module_default = {
 	"light-static": "flow--breadcrumb--light-static"
 };
 //#endregion
-export { breadcrumb, breadcrumbItem, dark, Breadcrumb_module_default as default, icon, light, link };
+export { breadcrumb, breadcrumbItem, dark, Breadcrumb_module_default as default, icon, light, link, skeleton };
 
 //# sourceMappingURL=Breadcrumb.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  align-items: center;\n\n  .link {\n    padding-inline: var(--breadcrumb--spacing);\n    font-weight: var(--breadcrumb--font-weight--default);\n    text-decoration: underline;\n    cursor: pointer;\n\n    @include focus.focus;\n\n    & {\n      @include ellipsis.ellipsis;\n    }\n  }\n\n  .breadcrumbItem {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    color: var(--breadcrumb--color--default);\n\n    &:last-child {\n      .icon {\n        display: none;\n      }\n\n      .link {\n        text-decoration: none;\n        font-weight: var(--breadcrumb--font-weight--current);\n      }\n    }\n\n    &:first-child .link {\n      padding-inline-start: 0;\n    }\n\n    &[data-disabled=\"true\"] {\n      .link {\n        cursor: unset;\n      }\n    }\n\n    &:not([data-disabled=\"true\"]) {\n      .link {\n        &:hover {\n          color: var(--breadcrumb--color--hover);\n        }\n\n        &[data-pressed] {\n          color: var(--breadcrumb--color--pressed);\n        }\n      }\n    }\n  }\n\n  /* Size s */\n\n  &.size-s {\n    .link {\n      font-size: var(--font-size-text--s);\n    }\n\n    .icon {\n      width: var(--font-size-text--s);\n      height: var(--font-size-text--s);\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .breadcrumbItem {\n        color: var(--breadcrumb--color-#{$color}--default);\n\n        &:not([data-disabled=\"true\"]) {\n          .link {\n            &:hover {\n              color: var(--breadcrumb--color-#{$color}--hover);\n            }\n\n            &[data-pressed] {\n              color: var(--breadcrumb--color-#{$color}--pressed);\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}
+{"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  align-items: center;\n\n  .link {\n    padding-inline: var(--breadcrumb--spacing);\n    font-weight: var(--breadcrumb--font-weight--default);\n    text-decoration: underline;\n    cursor: pointer;\n\n    @include focus.focus;\n\n    & {\n      @include ellipsis.ellipsis;\n    }\n  }\n\n  .breadcrumbItem {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    color: var(--breadcrumb--color--default);\n\n    &:last-child {\n      .icon {\n        display: none;\n      }\n\n      .link {\n        text-decoration: none;\n        font-weight: var(--breadcrumb--font-weight--current);\n      }\n    }\n\n    &:first-child .link {\n      padding-inline-start: 0;\n    }\n\n    &[data-disabled=\"true\"] {\n      .link {\n        cursor: unset;\n      }\n    }\n\n    &:not([data-disabled=\"true\"]) {\n      .link {\n        &:hover {\n          color: var(--breadcrumb--color--hover);\n        }\n\n        &[data-pressed] {\n          color: var(--breadcrumb--color--pressed);\n        }\n      }\n    }\n  }\n\n  /* SkeletonMode: no underline over the bars, no current item */\n  &.skeleton .breadcrumbItem .link {\n    text-decoration: none;\n    font-weight: var(--breadcrumb--font-weight--default);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    .link {\n      font-size: var(--font-size-text--s);\n    }\n\n    .icon {\n      width: var(--font-size-text--s);\n      height: var(--font-size-text--s);\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .breadcrumbItem {\n        color: var(--breadcrumb--color-#{$color}--default);\n\n        &:not([data-disabled=\"true\"]) {\n          .link {\n            &:hover {\n              color: var(--breadcrumb--color-#{$color}--hover);\n            }\n\n            &[data-pressed] {\n              color: var(--breadcrumb--color-#{$color}--pressed);\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.mjs","names":[],"sources":["../../../../../../../../../src/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronRight } from \"@/components/Icon/components/icons\";\n\nexport type BreadcrumbItemProps = PropsWithChildren;\n\nexport const BreadcrumbItem: FC<BreadcrumbItemProps> = (props) => {\n  const { children } = props;\n\n  const rootClassName = clsx(styles.breadcrumbItem);\n\n  return (\n    <Aria.Breadcrumb className={rootClassName}>\n      {children}\n      <IconChevronRight size=\"s\" className={styles.icon} />\n    </Aria.Breadcrumb>\n  );\n};\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;;;;AAQA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,aAAa;CAErB,MAAM,gBAAgB,KAAK,0BAAO,cAAc;CAEhD,OACE,qBAAC,KAAK,YAAN;EAAiB,WAAW;EAA5B,UAAA,CACG,UACD,oBAAC,kBAAD;GAAkB,MAAK;GAAI,WAAW,0BAAO;EAAO,CAAA,CACrC;;AAErB"}
+{"version":3,"file":"BreadcrumbItem.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Breadcrumb/components/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronRight } from \"@/components/Icon/components/icons\";\n\nexport type BreadcrumbItemProps = PropsWithChildren;\n\nexport const BreadcrumbItem: FC<BreadcrumbItemProps> = (props) => {\n  const { children } = props;\n\n  const rootClassName = clsx(styles.breadcrumbItem);\n\n  return (\n    <Aria.Breadcrumb className={rootClassName}>\n      {children}\n      <IconChevronRight size=\"s\" className={styles.icon} />\n    </Aria.Breadcrumb>\n  );\n};\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;;;;AAQA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,aAAa;CAErB,MAAM,gBAAgB,KAAKA,0BAAO,cAAc;CAEhD,OACE,qBAAC,KAAK,YAAN;EAAiB,WAAW;EAA5B,UAAA,CACG,UACD,oBAAC,kBAAD;GAAkB,MAAK;GAAI,WAAWA,0BAAO;EAAO,CAAA,CACrC;;AAErB"}

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

@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import Button_module_default from "./Button.module.mjs";
 import { containsTextChild } from "../../lib/react/remote.mjs";
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconFailed } from "../Icon/components/icons/IconFailed.mjs";
 import { IconSucceeded } from "../Icon/components/icons/IconSucceeded.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
@@ -15,8 +16,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { filterDOMProps } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
 //#region src/components/Button/Button.tsx
+var isMuted = (props) => !!(props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly);
 var disablePendingProps = (props) => {
-	if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly) {
+	if (isMuted(props)) {
 		props = { ...props };
 		const mutedActionHandler = (e) => {
 			if (e && typeof e === "object") {
@@ -38,8 +40,10 @@ var disablePendingProps = (props) => {
 };
 /** @flr-generate all */
 var Button = flowComponent("Button", (props) => {
+	const muted = isMuted(props);
 	props = disablePendingProps(props);
 	const warnDeprecation = useWarnDeprecation();
+	const isSkeleton = useSkeletonMode();
 	const { color: colorFromProps = "primary", variant = "solid", children, className, size = "m", isPending, isSucceeded, isFailed, "aria-disabled": ariaDisabled, ref, slot: ignoredSlotProp, ariaSlot: slot, unstyled, isReadOnly, elementType, ...restProps } = props;
 	if (colorFromProps === "accent") warnDeprecation("The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.");
 	const color = colorFromProps === "accent" ? "success" : colorFromProps;
@@ -48,22 +52,7 @@ var Button = flowComponent("Button", (props) => {
 	* carries the marker. An explicit `Text` child is matched by `:has(.text)`.
 	*/
 	const hasText = containsTextChild(children);
-	const rootClassName = unstyled ? className : clsx(
-		Button_module_default.button,
-		isPending && Button_module_default.isPending,
-		isSucceeded && Button_module_default.isSucceeded,
-		isFailed && Button_module_default.isFailed,
-		size === "s" && Button_module_default["size-s"],
-		Button_module_default[color],
-		Button_module_default[variant],
-		/**
-		* Workaround warning: The Aria.Button does not support "aria-disabled"
-		* by now, so this Button will be visually disabled via CSS.
-		*/
-		ariaDisabled && Button_module_default.ariaDisabled,
-		hasText && Button_module_default.hasText,
-		className
-	);
+	const rootClassName = unstyled ? className : clsx(Button_module_default.button, isPending && Button_module_default.isPending, isSucceeded && Button_module_default.isSucceeded, isFailed && Button_module_default.isFailed, size === "s" && Button_module_default["size-s"], Button_module_default[color], Button_module_default[variant], ariaDisabled && Button_module_default.ariaDisabled, hasText && Button_module_default.hasText, isSkeleton && Button_module_default.skeleton, className);
 	useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
 	const propsContext = {
 		Icon: {
@@ -88,7 +77,7 @@ var Button = flowComponent("Button", (props) => {
 		size,
 		className: Button_module_default.stateIcon
 	}) : void 0;
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
+	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Wrap, {
 			if: !unstyled,
@@ -98,10 +87,15 @@ var Button = flowComponent("Button", (props) => {
 			})
 		})
 	}), stateIcon] });
+	const content = /* @__PURE__ */ jsx(Wrap, {
+		if: !unstyled,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: buttonContent })
+	});
 	if (elementType === "span") {
 		const spanProps = filterDOMProps(restProps, { global: true });
 		return /* @__PURE__ */ jsx("span", {
 			...spanProps,
+			inert: isSkeleton || void 0,
 			"data-disabled": restProps.isDisabled || void 0,
 			className: typeof rootClassName === "string" ? rootClassName : void 0,
 			children: content
@@ -113,6 +107,8 @@ var Button = flowComponent("Button", (props) => {
 		slot,
 		...isReadOnly === true ? { "data-readonly": true } : {},
 		...restProps,
+		"aria-disabled": muted || void 0,
+		inert: isSkeleton || void 0,
 		children: content
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /** Slot for button placement in action groups. */\n  slot?: string;\n  /**\n   * The color of the button.\n   *\n   * @default \"primary\"\n   * @deprecatedValues accent\n   */\n  color?:\n    \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n  /** @internal */\n  elementType?: \"button\" | \"span\";\n}\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  ) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  props = disablePendingProps(props);\n\n  const warnDeprecation = useWarnDeprecation();\n\n  const {\n    color: colorFromProps = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    elementType,\n    ...restProps\n  } = props;\n\n  if (colorFromProps === \"accent\") {\n    warnDeprecation(\n      \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n    );\n  }\n\n  const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n  /**\n   * A string child renders no element the CSS could match, so the button itself\n   * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n   */\n  const hasText = containsTextChild(children);\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        /**\n         * Workaround warning: The Aria.Button does not support \"aria-disabled\"\n         * by now, so this Button will be visually disabled via CSS.\n         */\n        ariaDisabled && styles.ariaDisabled,\n        hasText && styles.hasText,\n        className,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const stateIcon = isSucceeded ? (\n    <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner size={size} className={styles.stateIcon} />\n  ) : undefined;\n\n  const content = (\n    <>\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>{children}</span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </>\n  );\n\n  if (elementType === \"span\") {\n    const spanProps = filterDOMProps(restProps, { global: true });\n\n    return (\n      <span\n        {...spanProps}\n        data-disabled={restProps.isDisabled || undefined}\n        className={\n          typeof rootClassName === \"string\" ? rootClassName : undefined\n        }\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n    >\n      {content}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,IAAM,uBAAuB,UAAuB;CAClD,IACE,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,oBACN,MAAM,YACN;EACA,QAAQ,EAAE,GAAG,MAAM;EAEnB,MAAM,sBAAsB,MAAe;GACzC,IAAI,KAAK,OAAO,MAAM,UAAU;IAM9B,IACE,EAJA,yBAAyB,KACzB,OAAO,EAAE,wBAAwB,eAIjC,qBAAqB,KACrB,OAAO,EAAE,oBAAoB,YAE7B,EAAE,gBAAgB;IAEpB,IAAI,oBAAoB,KAAK,OAAO,EAAE,mBAAmB,YACvD,EAAE,eAAe;GAErB;GAEA,OAAO;EACT;EAEA,MAAM,UAAU;EAChB,MAAM,UAAU;EAChB,MAAM,eAAe;EACrB,MAAM,aAAa;EACnB,MAAM,gBAAgB;EACtB,MAAM,YAAY;EAClB,MAAM,YAAY;EAClB,MAAM,UAAU;CAClB;CAEA,OAAO;AACT;;AAGA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EACJ,OAAO,iBAAiB,WACxB,UAAU,SACV,UACA,WACA,OAAO,KACP,WACA,aACA,UACA,iBAAiB,cACjB,KACA,MAAM,iBACN,UAAU,MACV,UACA,YACA,aACA,GAAG,cACD;CAEJ,IAAI,mBAAmB,UACrB,gBACE,kGACF;CAGF,MAAM,QAAQ,mBAAmB,WAAW,YAAY;;;;;CAMxD,MAAM,UAAU,kBAAkB,QAAQ;CAE1C,MAAM,gBAAgB,WAClB,YACA;EACE,sBAAO;EACP,aAAa,sBAAO;EACpB,eAAe,sBAAO;EACtB,YAAY,sBAAO;EACnB,SAAS,OAAO,sBAAO;EACvB,sBAAO;EACP,sBAAO;;;;;EAKP,gBAAgB,sBAAO;EACvB,WAAW,sBAAO;EAClB;CACF;CAEJ,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAW,sBAAO;GAClB,eAAe;GACf;EACF;EACA,MAAM,EACJ,WAAW,sBAAO,KACpB;EACA,QAAQ,EACN,WAAW,sBAAO,OACpB;EACA,cAAc,EACZ,WAAW,sBAAO,aACpB;EACA,OAAO,EACL,WAAW,sBAAO,MACpB;CACF;CAEA,MAAM,YAAY,cAChB,oBAAC,eAAD;EAAqB;EAAM,WAAW,sBAAO;EAAW,OAAM;CAAW,CAAA,IACvE,WACF,oBAAC,YAAD;EAAkB;EAAM,WAAW,sBAAO;EAAW,OAAM;CAAU,CAAA,IACnE,YACF,oBAAC,gBAAD;EAAsB;EAAM,WAAW,sBAAO;CAAY,CAAA,IACxD,KAAA;CAEJ,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI,CAAC;GACT,UAAA,oBAAC,QAAD;IAAM,WAAW,sBAAO;IAAU;GAAe,CAAA;EAC7C,CAAA;CACc,CAAA,GACrB,SACD,EAAA,CAAA;CAGJ,IAAI,gBAAgB,QAAQ;EAC1B,MAAM,YAAY,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC;EAE5D,OACE,oBAAC,QAAD;GACE,GAAI;GACJ,iBAAe,UAAU,cAAc,KAAA;GACvC,WACE,OAAO,kBAAkB,WAAW,gBAAgB,KAAA;GAGrD,UAAA;EACG,CAAA;CAEV;CAEA,OACE,oBAAC,KAAK,QAAN;EACE,WAAW;EACN;EACC;EACN,GAAK,eAAe,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;EACxD,GAAI;EAEH,UAAA;CACU,CAAA;AAEjB,CAAC"}
+{"version":3,"file":"Button.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /**\n   * Slot for button placement in action groups: `primary` (at the end),\n   * `secondary` (before the primary action) or `abort` (at the start). Without\n   * a slot, an action group places the colors primary, success and danger in\n   * `primary` and every other color in `abort`. A secondary-colored button that\n   * does not abort therefore needs `slot=\"secondary\"`.\n   */\n  slot?: string;\n  /**\n   * The color of the button.\n   *\n   * @default \"primary\"\n   * @deprecatedValues accent\n   */\n  color?:\n    \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n  /** @internal */\n  elementType?: \"button\" | \"span\";\n}\n\nconst isMuted = (props: ButtonProps) =>\n  !!(\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  );\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (isMuted(props)) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  const muted = isMuted(props);\n  props = disablePendingProps(props);\n\n  const warnDeprecation = useWarnDeprecation();\n  const isSkeleton = useSkeletonMode();\n\n  const {\n    color: colorFromProps = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    elementType,\n    ...restProps\n  } = props;\n\n  if (colorFromProps === \"accent\") {\n    warnDeprecation(\n      \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n    );\n  }\n\n  const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n  /**\n   * A string child renders no element the CSS could match, so the button itself\n   * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n   */\n  const hasText = containsTextChild(children);\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        ariaDisabled && styles.ariaDisabled,\n        hasText && styles.hasText,\n        isSkeleton && styles.skeleton,\n        className,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const stateIcon = isSucceeded ? (\n    <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner size={size} className={styles.stateIcon} />\n  ) : undefined;\n\n  const buttonContent = (\n    <>\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>{children}</span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </>\n  );\n\n  /* A styled button is one skeleton surface, so its content draws no skeleton\n     of its own. An unstyled button draws no surface, so its content does. */\n  const content = (\n    <Wrap if={!unstyled}>\n      <SkeletonModeReset>{buttonContent}</SkeletonModeReset>\n    </Wrap>\n  );\n\n  if (elementType === \"span\") {\n    const spanProps = filterDOMProps(restProps, { global: true });\n\n    return (\n      <span\n        {...spanProps}\n        inert={isSkeleton || undefined}\n        data-disabled={restProps.isDisabled || undefined}\n        className={\n          typeof rootClassName === \"string\" ? rootClassName : undefined\n        }\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n      aria-disabled={muted || undefined}\n      inert={isSkeleton || undefined}\n    >\n      {content}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+DA,IAAM,WAAW,UACf,CAAC,EACC,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,oBACN,MAAM;AAGV,IAAM,uBAAuB,UAAuB;CAClD,IAAI,QAAQ,KAAK,GAAG;EAClB,QAAQ,EAAE,GAAG,MAAM;EAEnB,MAAM,sBAAsB,MAAe;GACzC,IAAI,KAAK,OAAO,MAAM,UAAU;IAM9B,IACE,EAJA,yBAAyB,KACzB,OAAO,EAAE,wBAAwB,eAIjC,qBAAqB,KACrB,OAAO,EAAE,oBAAoB,YAE7B,EAAE,gBAAgB;IAEpB,IAAI,oBAAoB,KAAK,OAAO,EAAE,mBAAmB,YACvD,EAAE,eAAe;GAErB;GAEA,OAAO;EACT;EAEA,MAAM,UAAU;EAChB,MAAM,UAAU;EAChB,MAAM,eAAe;EACrB,MAAM,aAAa;EACnB,MAAM,gBAAgB;EACtB,MAAM,YAAY;EAClB,MAAM,YAAY;EAClB,MAAM,UAAU;CAClB;CAEA,OAAO;AACT;;AAGA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,QAAQ,QAAQ,KAAK;CAC3B,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,EACJ,OAAO,iBAAiB,WACxB,UAAU,SACV,UACA,WACA,OAAO,KACP,WACA,aACA,UACA,iBAAiB,cACjB,KACA,MAAM,iBACN,UAAU,MACV,UACA,YACA,aACA,GAAG,cACD;CAEJ,IAAI,mBAAmB,UACrB,gBACE,kGACF;CAGF,MAAM,QAAQ,mBAAmB,WAAW,YAAY;;;;;CAMxD,MAAM,UAAU,kBAAkB,QAAQ;CAE1C,MAAM,gBAAgB,WAClB,YACA,KACEA,sBAAO,QACP,aAAaA,sBAAO,WACpB,eAAeA,sBAAO,aACtB,YAAYA,sBAAO,UACnB,SAAS,OAAOA,sBAAO,WACvBA,sBAAO,QACPA,sBAAO,UACP,gBAAgBA,sBAAO,cACvB,WAAWA,sBAAO,SAClB,cAAcA,sBAAO,UACrB,SACF;CAEJ,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,WAAWA,sBAAO;GAClB,eAAe;GACf;EACF;EACA,MAAM,EACJ,WAAWA,sBAAO,KACpB;EACA,QAAQ,EACN,WAAWA,sBAAO,OACpB;EACA,cAAc,EACZ,WAAWA,sBAAO,aACpB;EACA,OAAO,EACL,WAAWA,sBAAO,MACpB;CACF;CAEA,MAAM,YAAY,cAChB,oBAAC,eAAD;EAAqB;EAAM,WAAWA,sBAAO;EAAW,OAAM;CAAW,CAAA,IACvE,WACF,oBAAC,YAAD;EAAkB;EAAM,WAAWA,sBAAO;EAAW,OAAM;CAAU,CAAA,IACnE,YACF,oBAAC,gBAAD;EAAsB;EAAM,WAAWA,sBAAO;CAAY,CAAA,IACxD,KAAA;CAEJ,MAAM,gBACJ,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI,CAAC;GACT,UAAA,oBAAC,QAAD;IAAM,WAAWD,sBAAO;IAAU;GAAe,CAAA;EAC7C,CAAA;CACc,CAAA,GACrB,SACD,EAAA,CAAA;CAKJ,MAAM,UACJ,oBAAC,MAAD;EAAM,IAAI,CAAC;EACT,UAAA,oBAAC,mBAAD,EAAA,UAAoB,cAAiC,CAAA;CACjD,CAAA;CAGR,IAAI,gBAAgB,QAAQ;EAC1B,MAAM,YAAY,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC;EAE5D,OACE,oBAAC,QAAD;GACE,GAAI;GACJ,OAAO,cAAc,KAAA;GACrB,iBAAe,UAAU,cAAc,KAAA;GACvC,WACE,OAAO,kBAAkB,WAAW,gBAAgB,KAAA;GAGrD,UAAA;EACG,CAAA;CAEV;CAEA,OACE,oBAAC,KAAK,QAAN;EACE,WAAW;EACN;EACC;EACN,GAAK,eAAe,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;EACxD,GAAI;EACJ,iBAAe,SAAS,KAAA;EACxB,OAAO,cAAc,KAAA;EAEpB,UAAA;CACU,CAAA;AAEjB,CAAC"}