@mittwald/flow-react-components 1.6.0-next.0 → 1.6.0-next.10

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

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

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

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

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

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

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

@@ -1,15 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@df0c8534e2e4f7c6c3d4365218df7347
+//#region \0.locale.json@b20072b12eabc063a1429a48d6b366aa
 var __locale_default = {
-	"de-DE": {
-		"moreInformation": "Weitere Informationen",
-		"moreInformationAbout": "Weitere Informationen zu {subject}"
-	},
-	"en-US": {
-		"moreInformation": "More information",
-		"moreInformationAbout": "More information about {subject}"
-	}
+	"de-DE": { "additionalItems": "{count} weitere" },
+	"en-US": { "additionalItems": "{count} more" }
 };
 //#endregion
 export { __locale_default as default };

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

@@ -1,9 +1,15 @@
 "use client"
 /* */
-//#region \0.locale.json@24d7079ce80a619bbdda6dfcc8289f94
+//#region \0.locale.json@df0c8534e2e4f7c6c3d4365218df7347
 var __locale_default = {
-	"de-DE": { "remove": "Entfernen" },
-	"en-US": { "remove": "Remove" }
+	"de-DE": {
+		"moreInformation": "Weitere Informationen",
+		"moreInformationAbout": "Weitere Informationen zu {subject}"
+	},
+	"en-US": {
+		"moreInformation": "More information",
+		"moreInformationAbout": "More information about {subject}"
+	}
 };
 //#endregion
 export { __locale_default as default };

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

@@ -1,27 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@aaaa2422dd023a875e13abc0d3d178ce
+//#region \0.locale.json@24d7079ce80a619bbdda6dfcc8289f94
 var __locale_default = {
-	"de-DE": {
-		"preset.lastMonth": "Letzten Monat",
-		"preset.lastWeek": "Letzte Woche",
-		"preset.lastYear": "Letztes Jahr",
-		"preset.thisMonth": "Diesen Monat",
-		"preset.thisWeek": "Diese Woche",
-		"preset.thisYear": "Dieses Jahr",
-		"preset.today": "Heute",
-		"preset.yesterday": "Gestern"
-	},
-	"en-US": {
-		"preset.lastMonth": "Last month",
-		"preset.lastWeek": "Last week",
-		"preset.lastYear": "Last year",
-		"preset.thisMonth": "This month",
-		"preset.thisWeek": "This week",
-		"preset.thisYear": "This year",
-		"preset.today": "Today",
-		"preset.yesterday": "Yesterday"
-	}
+	"de-DE": { "remove": "Entfernen" },
+	"en-US": { "remove": "Remove" }
 };
 //#endregion
 export { __locale_default as default };

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

@@ -1,9 +1,27 @@
 "use client"
 /* */
-//#region \0.locale.json@162914df08c90e5e10d2f78b03d9d768
+//#region \0.locale.json@aaaa2422dd023a875e13abc0d3d178ce
 var __locale_default = {
-	"de-DE": { "progressBar.of": "von" },
-	"en-US": { "progressBar.of": "of" }
+	"de-DE": {
+		"preset.lastMonth": "Letzten Monat",
+		"preset.lastWeek": "Letzte Woche",
+		"preset.lastYear": "Letztes Jahr",
+		"preset.thisMonth": "Diesen Monat",
+		"preset.thisWeek": "Diese Woche",
+		"preset.thisYear": "Dieses Jahr",
+		"preset.today": "Heute",
+		"preset.yesterday": "Gestern"
+	},
+	"en-US": {
+		"preset.lastMonth": "Last month",
+		"preset.lastWeek": "Last week",
+		"preset.lastYear": "Last year",
+		"preset.thisMonth": "This month",
+		"preset.thisWeek": "This week",
+		"preset.thisYear": "This year",
+		"preset.today": "Today",
+		"preset.yesterday": "Yesterday"
+	}
 };
 //#endregion
 export { __locale_default as default };

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

@@ -1,9 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@3b9d9e153ad753f427f375d1275fbcad
+//#region \0.locale.json@162914df08c90e5e10d2f78b03d9d768
 var __locale_default = {
-	"de-DE": { "optional": "(optional)" },
-	"en-US": { "optional": "(optional)" }
+	"de-DE": { "progressBar.of": "von" },
+	"en-US": { "progressBar.of": "of" }
 };
 //#endregion
 export { __locale_default as default };

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

@@ -1,9 +1,9 @@
 "use client"
 /* */
-//#region \0.locale.json@774f50b2495c87d6d13911bcd596e720
+//#region \0.locale.json@3b9d9e153ad753f427f375d1275fbcad
 var __locale_default = {
-	"de-DE": { "tooltip.progressBar.total": "Gesamt" },
-	"en-US": { "tooltip.progressBar.total": "Total" }
+	"de-DE": { "optional": "(optional)" },
+	"en-US": { "optional": "(optional)" }
 };
 //#endregion
 export { __locale_default as default };

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

@@ -3,6 +3,7 @@
 import AccentBox_module_default from "./AccentBox.module.mjs";
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/AccentBox/AccentBox.tsx
@@ -46,10 +47,10 @@ var AccentBox = flowComponent("AccentBox", (props) => {
 	return /* @__PURE__ */ jsx(Element, {
 		className: rootClassName,
 		style,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			children
-		})
+		}) })
 	});
 });
 //#endregion

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

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

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import Accordion_module_default from "./Accordion.module.mjs";
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
 import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
@@ -101,7 +102,7 @@ var Accordion = flowComponent("Accordion", (props) => {
 		...rest,
 		id,
 		className: rootClassName,
-		children: /* @__PURE__ */ jsx(TriggerContext, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(TriggerContext, {
 			value: triggerProps,
 			children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 				props: propsContext,
@@ -118,7 +119,7 @@ var Accordion = flowComponent("Accordion", (props) => {
 					})
 				})]
 			})
-		})
+		}) })
 	});
 }, { type: "layout" });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":["styles"],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useId, useRef } from \"react\";\nimport { useDisclosure } from \"react-aria\";\nimport { useDisclosureState } from \"react-stately\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n  AccordionGroupContext,\n  useAccordionGroupContext,\n} from \"@/components/AccordionGroup/context\";\n\nexport interface AccordionProps extends PropsWithChildren<\n  ComponentProps<\"div\">\n> {\n  /**\n   * The key of the accordion inside an `AccordionGroup`, used by its\n   * `expandedKeys`. Also set as the DOM id.\n   */\n  id?: string;\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /**\n   * The visual variant of the accordion. Has no effect.\n   *\n   * @deprecated Use `AccordionGroup` or a `LayoutCard` to set accordions apart.\n   */\n  variant?: \"default\" | \"outline\";\n}\n\n/*\n * The header button is rendered by the `Heading`, `Text` or `Label` the\n * consumer wrote, through a memoized props context. It reads the disclosure\n * state from a React context instead, so it always gets the current one.\n */\ntype TriggerProps = Pick<\n  ButtonProps,\n  \"id\" | \"aria-expanded\" | \"aria-controls\" | \"onPress\" | \"onPressStart\"\n>;\n\nconst TriggerContext = createContext<TriggerProps | null>(null);\n\ninterface HeaderButtonProps extends PropsWithChildren {\n  /** Text and label headers are smaller than headings, so is their chevron. */\n  isCompact?: boolean;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n  const { children, isCompact } = props;\n  const buttonProps = useContext(TriggerContext);\n\n  return (\n    <Button\n      tunnel={null}\n      unstyled\n      className={styles.headerButton}\n      {...buttonProps}\n    >\n      <span className={styles.headerContent}>{children}</span>\n      <IconChevronDown\n        className={styles.chevron}\n        size={isCompact ? \"s\" : \"m\"}\n      />\n    </Button>\n  );\n};\n\n/* Text and label headers render the same compact toggle. */\nconst compactHeader = {\n  className: clsx(styles.header, styles.textHeader),\n  children: dynamic((props: PropsWithChildren) => (\n    <HeaderButton isCompact>{props.children}</HeaderButton>\n  )),\n};\n\nconst propsContext: PropsContext = {\n  Content: {\n    className: styles.contentInner,\n    tunnel: {\n      id: \"content\",\n      component: \"Accordion\",\n    },\n  },\n  Heading: {\n    className: styles.header,\n    level: 3,\n    children: dynamic((props) => <HeaderButton>{props.children}</HeaderButton>),\n    Button: { size: \"m\" },\n  },\n  Text: {\n    ...compactHeader,\n    elementType: \"div\",\n  },\n  Label: {\n    ...compactHeader,\n    /*\n     * A <label> names the first labelable element below it — here the toggle,\n     * whose own text is the label's only content. The name computation walks\n     * into the label, meets the button it started from and stops, so the\n     * toggle ends up with an empty name. A <span> names nothing and the name\n     * comes from the toggle's content again.\n     */\n    elementType: \"span\",\n  },\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      id,\n      defaultExpanded = false,\n      variant,\n      ...rest\n    } = props;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (variant !== undefined) {\n      warnDeprecation(\n        \"The 'variant' prop of the 'Accordion' component is deprecated and will be removed in a future release. Use 'AccordionGroup' or a 'LayoutCard' to set accordions apart instead.\",\n      );\n    }\n\n    const generatedKey = useId();\n    const key = id ?? generatedKey;\n    const group = useAccordionGroupContext();\n    const register = group?.register;\n\n    /* `onExpandedChange` reports only keys the consumer gave. */\n    useEffect(\n      () => (id === undefined ? undefined : register?.(id, defaultExpanded)),\n      [register, id, defaultExpanded],\n    );\n\n    const state = useDisclosureState({\n      defaultExpanded,\n      ...(group && {\n        isExpanded: group.isExpanded(key, defaultExpanded),\n        onExpandedChange: (isExpanded) => group.setExpanded(key, isExpanded),\n      }),\n    });\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const { buttonProps, panelProps } = useDisclosure({}, state, panelRef);\n    const triggerProps: TriggerProps = {\n      id: buttonProps.id,\n      \"aria-expanded\": state.isExpanded,\n      \"aria-controls\": buttonProps[\"aria-controls\"],\n      onPress: buttonProps.onPress,\n      onPressStart: buttonProps.onPressStart,\n    };\n\n    const rootClassName = clsx(\n      styles.accordion,\n      state.isExpanded && styles.expanded,\n      group && styles.grouped,\n      className,\n    );\n\n    return (\n      <div {...rest} id={id} className={rootClassName}>\n        <TriggerContext value={triggerProps}>\n          <PropsContextProvider props={propsContext}>\n            {children}\n            <div {...panelProps} ref={panelRef} className={styles.content}>\n              {/* An accordion inside the content is not part of this group. */}\n              <AccordionGroupContext value={null}>\n                <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n              </AccordionGroupContext>\n            </div>\n          </PropsContextProvider>\n        </TriggerContext>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,IAAM,iBAAiB,cAAmC,IAAI;AAY9D,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,cAAc,WAAW,cAAc;CAE7C,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACA,WAAWA,yBAAO;EAClB,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAWA,yBAAO;GAAgB;EAAe,CAAA,GACvD,oBAAC,iBAAD;GACE,WAAWA,yBAAO;GAClB,MAAM,YAAY,MAAM;EACzB,CAAA,CACK;;AAEZ;AAGA,IAAM,gBAAgB;CACpB,WAAW,KAAKA,yBAAO,QAAQA,yBAAO,UAAU;CAChD,UAAU,SAAS,UACjB,oBAAC,cAAD;EAAc,WAAA;EAAW,UAAA,MAAM;CAAuB,CAAA,CACvD;AACH;AAEA,IAAM,eAA6B;CACjC,SAAS;EACP,WAAWA,yBAAO;EAClB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb;CACF;CACA,SAAS;EACP,WAAWA,yBAAO;EAClB,OAAO;EACP,UAAU,SAAS,UAAU,oBAAC,cAAD,EAAA,UAAe,MAAM,SAAuB,CAAA,CAAC;EAC1E,QAAQ,EAAE,MAAM,IAAI;CACtB;CACA,MAAM;EACJ,GAAG;EACH,aAAa;CACf;CACA,OAAO;EACL,GAAG;EAQH,aAAa;CACf;AACF;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,IACA,kBAAkB,OAClB,SACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,YAAY,KAAA,GACd,gBACE,gLACF;CAGF,MAAM,eAAe,MAAM;CAC3B,MAAM,MAAM,MAAM;CAClB,MAAM,QAAQ,yBAAyB;CACvC,MAAM,WAAW,OAAO;CAGxB,gBACS,OAAO,KAAA,IAAY,KAAA,IAAY,WAAW,IAAI,eAAe,GACpE;EAAC;EAAU;EAAI;CAAe,CAChC;CAEA,MAAM,QAAQ,mBAAmB;EAC/B;EACA,GAAI,SAAS;GACX,YAAY,MAAM,WAAW,KAAK,eAAe;GACjD,mBAAmB,eAAe,MAAM,YAAY,KAAK,UAAU;EACrE;CACF,CAAC;CAED,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,EAAE,aAAa,eAAe,cAAc,CAAC,GAAG,OAAO,QAAQ;CACrE,MAAM,eAA6B;EACjC,IAAI,YAAY;EAChB,iBAAiB,MAAM;EACvB,iBAAiB,YAAY;EAC7B,SAAS,YAAY;EACrB,cAAc,YAAY;CAC5B;CAEA,MAAM,gBAAgB,KACpBA,yBAAO,WACP,MAAM,cAAcA,yBAAO,UAC3B,SAASA,yBAAO,SAChB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAU;EAAI,WAAW;EAChC,UAAA,oBAAC,gBAAD;GAAgB,OAAO;GACrB,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,UACD,oBAAC,OAAD;KAAK,GAAI;KAAY,KAAK;KAAU,WAAWA,yBAAO;KAEpD,UAAA,oBAAC,uBAAD;MAAuB,OAAO;MAC5B,UAAA,oBAAC,uBAAD;OAAuB,IAAG;OAAU,WAAU;MAAa,CAAA;KACtC,CAAA;IACpB,CAAA,CACe;;EACR,CAAA;CACb,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Accordion.mjs","names":["styles"],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useId, useRef } from \"react\";\nimport { useDisclosure } from \"react-aria\";\nimport { useDisclosureState } from \"react-stately\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n  AccordionGroupContext,\n  useAccordionGroupContext,\n} from \"@/components/AccordionGroup/context\";\nimport { SectionHeadingReset } from \"@/components/Section/context\";\n\nexport interface AccordionProps extends PropsWithChildren<\n  ComponentProps<\"div\">\n> {\n  /**\n   * The key of the accordion inside an `AccordionGroup`, used by its\n   * `expandedKeys`. Also set as the DOM id.\n   */\n  id?: string;\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /**\n   * The visual variant of the accordion. Has no effect.\n   *\n   * @deprecated Use `AccordionGroup` or a `LayoutCard` to set accordions apart.\n   */\n  variant?: \"default\" | \"outline\";\n}\n\n/*\n * The header button is rendered by the `Heading`, `Text` or `Label` the\n * consumer wrote, through a memoized props context. It reads the disclosure\n * state from a React context instead, so it always gets the current one.\n */\ntype TriggerProps = Pick<\n  ButtonProps,\n  \"id\" | \"aria-expanded\" | \"aria-controls\" | \"onPress\" | \"onPressStart\"\n>;\n\nconst TriggerContext = createContext<TriggerProps | null>(null);\n\ninterface HeaderButtonProps extends PropsWithChildren {\n  /** Text and label headers are smaller than headings, so is their chevron. */\n  isCompact?: boolean;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n  const { children, isCompact } = props;\n  const buttonProps = useContext(TriggerContext);\n\n  return (\n    <Button\n      tunnel={null}\n      unstyled\n      className={styles.headerButton}\n      {...buttonProps}\n    >\n      <span className={styles.headerContent}>{children}</span>\n      <IconChevronDown\n        className={styles.chevron}\n        size={isCompact ? \"s\" : \"m\"}\n      />\n    </Button>\n  );\n};\n\n/* Text and label headers render the same compact toggle. */\nconst compactHeader = {\n  className: clsx(styles.header, styles.textHeader),\n  children: dynamic((props: PropsWithChildren) => (\n    <HeaderButton isCompact>{props.children}</HeaderButton>\n  )),\n};\n\nconst propsContext: PropsContext = {\n  Content: {\n    className: styles.contentInner,\n    tunnel: {\n      id: \"content\",\n      component: \"Accordion\",\n    },\n  },\n  Heading: {\n    className: styles.header,\n    level: 3,\n    children: dynamic((props) => <HeaderButton>{props.children}</HeaderButton>),\n    Button: { size: \"m\" },\n  },\n  Text: {\n    ...compactHeader,\n    elementType: \"div\",\n  },\n  Label: {\n    ...compactHeader,\n    /*\n     * A <label> names the first labelable element below it — here the toggle,\n     * whose own text is the label's only content. The name computation walks\n     * into the label, meets the button it started from and stops, so the\n     * toggle ends up with an empty name. A <span> names nothing and the name\n     * comes from the toggle's content again.\n     */\n    elementType: \"span\",\n  },\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n  \"Accordion\",\n  (props) => {\n    const {\n      children,\n      className,\n      id,\n      defaultExpanded = false,\n      variant,\n      ...rest\n    } = props;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (variant !== undefined) {\n      warnDeprecation(\n        \"The 'variant' prop of the 'Accordion' component is deprecated and will be removed in a future release. Use 'AccordionGroup' or a 'LayoutCard' to set accordions apart instead.\",\n      );\n    }\n\n    const generatedKey = useId();\n    const key = id ?? generatedKey;\n    const group = useAccordionGroupContext();\n    const register = group?.register;\n\n    /* `onExpandedChange` reports only keys the consumer gave. */\n    useEffect(\n      () => (id === undefined ? undefined : register?.(id, defaultExpanded)),\n      [register, id, defaultExpanded],\n    );\n\n    const state = useDisclosureState({\n      defaultExpanded,\n      ...(group && {\n        isExpanded: group.isExpanded(key, defaultExpanded),\n        onExpandedChange: (isExpanded) => group.setExpanded(key, isExpanded),\n      }),\n    });\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const { buttonProps, panelProps } = useDisclosure({}, state, panelRef);\n    const triggerProps: TriggerProps = {\n      id: buttonProps.id,\n      \"aria-expanded\": state.isExpanded,\n      \"aria-controls\": buttonProps[\"aria-controls\"],\n      onPress: buttonProps.onPress,\n      onPressStart: buttonProps.onPressStart,\n    };\n\n    const rootClassName = clsx(\n      styles.accordion,\n      state.isExpanded && styles.expanded,\n      group && styles.grouped,\n      className,\n    );\n\n    return (\n      <div {...rest} id={id} className={rootClassName}>\n        <SectionHeadingReset>\n          <TriggerContext value={triggerProps}>\n            <PropsContextProvider props={propsContext}>\n              {children}\n              <div {...panelProps} ref={panelRef} className={styles.content}>\n                {/* An accordion inside the content is not part of this group. */}\n                <AccordionGroupContext value={null}>\n                  <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n                </AccordionGroupContext>\n              </div>\n            </PropsContextProvider>\n          </TriggerContext>\n        </SectionHeadingReset>\n      </div>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+CA,IAAM,iBAAiB,cAAmC,IAAI;AAY9D,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,cAAc,WAAW,cAAc;CAE7C,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACA,WAAWA,yBAAO;EAClB,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAWA,yBAAO;GAAgB;EAAe,CAAA,GACvD,oBAAC,iBAAD;GACE,WAAWA,yBAAO;GAClB,MAAM,YAAY,MAAM;EACzB,CAAA,CACK;;AAEZ;AAGA,IAAM,gBAAgB;CACpB,WAAW,KAAKA,yBAAO,QAAQA,yBAAO,UAAU;CAChD,UAAU,SAAS,UACjB,oBAAC,cAAD;EAAc,WAAA;EAAW,UAAA,MAAM;CAAuB,CAAA,CACvD;AACH;AAEA,IAAM,eAA6B;CACjC,SAAS;EACP,WAAWA,yBAAO;EAClB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb;CACF;CACA,SAAS;EACP,WAAWA,yBAAO;EAClB,OAAO;EACP,UAAU,SAAS,UAAU,oBAAC,cAAD,EAAA,UAAe,MAAM,SAAuB,CAAA,CAAC;EAC1E,QAAQ,EAAE,MAAM,IAAI;CACtB;CACA,MAAM;EACJ,GAAG;EACH,aAAa;CACf;CACA,OAAO;EACL,GAAG;EAQH,aAAa;CACf;AACF;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,IACA,kBAAkB,OAClB,SACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,YAAY,KAAA,GACd,gBACE,gLACF;CAGF,MAAM,eAAe,MAAM;CAC3B,MAAM,MAAM,MAAM;CAClB,MAAM,QAAQ,yBAAyB;CACvC,MAAM,WAAW,OAAO;CAGxB,gBACS,OAAO,KAAA,IAAY,KAAA,IAAY,WAAW,IAAI,eAAe,GACpE;EAAC;EAAU;EAAI;CAAe,CAChC;CAEA,MAAM,QAAQ,mBAAmB;EAC/B;EACA,GAAI,SAAS;GACX,YAAY,MAAM,WAAW,KAAK,eAAe;GACjD,mBAAmB,eAAe,MAAM,YAAY,KAAK,UAAU;EACrE;CACF,CAAC;CAED,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,EAAE,aAAa,eAAe,cAAc,CAAC,GAAG,OAAO,QAAQ;CACrE,MAAM,eAA6B;EACjC,IAAI,YAAY;EAChB,iBAAiB,MAAM;EACvB,iBAAiB,YAAY;EAC7B,SAAS,YAAY;EACrB,cAAc,YAAY;CAC5B;CAEA,MAAM,gBAAgB,KACpBA,yBAAO,WACP,MAAM,cAAcA,yBAAO,UAC3B,SAASA,yBAAO,SAChB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAU;EAAI,WAAW;EAChC,UAAA,oBAAC,qBAAD,EAAA,UACE,oBAAC,gBAAD;GAAgB,OAAO;GACrB,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,UACD,oBAAC,OAAD;KAAK,GAAI;KAAY,KAAK;KAAU,WAAWA,yBAAO;KAEpD,UAAA,oBAAC,uBAAD;MAAuB,OAAO;MAC5B,UAAA,oBAAC,uBAAD;OAAuB,IAAG;OAAU,WAAU;MAAa,CAAA;KACtC,CAAA;IACpB,CAAA,CACe;;EACR,CAAA,EACG,CAAA;CAClB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { SectionHeadingReset } from "../Section/context.mjs";
 import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import Alert_module_default from "./Alert.module.mjs";
@@ -37,11 +38,11 @@ var Alert = flowComponent("Alert", (props) => {
 		...rest,
 		className: rootClassName,
 		ref,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		children: /* @__PURE__ */ jsx(SectionHeadingReset, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			dependencies: [status],
 			children
-		})
+		}) })
 	});
 });
 //#endregion

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

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

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

@@ -2,9 +2,11 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Avatar } from "../Avatar/Avatar.mjs";
 import AvatarStack_module_default from "./AvatarStack.module.mjs";
+import __locale_default from "../../../../../_virtual/_4.locale.mjs";
 import clsx from "clsx";
 import { Children } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,6 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var AvatarStack = (props) => {
 	const { className, children, totalCount = 0, size = "m", onCountPress } = props;
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "AvatarStack");
 	const additionalItemsCount = totalCount - Children.toArray(children).length;
 	const rootClassName = clsx(AvatarStack_module_default.avatarStack, AvatarStack_module_default[`size-${size}`], className);
 	const propsContext = {
@@ -31,6 +34,7 @@ var AvatarStack = (props) => {
 					onPress: onCountPress,
 					children: /* @__PURE__ */ jsxs(Avatar, {
 						size,
+						label: stringFormatter.format("additionalItems", { count: additionalItemsCount }),
 						children: ["+", additionalItemsCount]
 					})
 				})

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

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

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

@@ -10,7 +10,7 @@ import { Button } from "../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import Badge_module_default from "./Badge.module.mjs";
 import { ContextualHelpButton } from "./components/ContextualHelpButton/ContextualHelpButton.mjs";
-import __locale_default from "../../../../../_virtual/_5.locale.mjs";
+import __locale_default from "../../../../../_virtual/_6.locale.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 [...alphaColors];

package/dist/js/packages/components/src/components/Calendar/components/RangeCalendar/helpers/useCalendarDateRangePresets.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../_virtual/_6.locale.mjs";
+import __locale_default from "../../../../../../../../_virtual/_7.locale.mjs";
 import { useContext, useMemo } from "react";
 import { RangeCalendarStateContext } from "react-aria-components";
 import invariant from "invariant";

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

@@ -16,10 +16,12 @@ import { TypedChartLegend } from "./components/ChartLegend/ChartLegend.mjs";
 import { TypedChartTooltip } from "./components/ChartTooltip/types.mjs";
 import { TypedLine } from "./components/Line/Line.mjs";
 import clsx from "clsx";
-import { isValidElement, useId, useMemo } from "react";
+import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ComposedChart, ResponsiveContainer } from "recharts";
 //#region src/components/CartesianChart/CartesianChart.tsx
+var reactComponentTypes = [Symbol.for("react.memo"), Symbol.for("react.forward_ref")];
+var isEmptyViewComponent = (value) => typeof value === "function" || typeof value === "object" && value !== null && "$$typeof" in value && reactComponentTypes.includes(value.$$typeof);
 /** @flr-generate all */
 var CartesianChart = (props) => {
 	const { children, data, className, height, flexGrow, emptyView, layout = "horizontal", ...rest } = props;
@@ -27,12 +29,8 @@ var CartesianChart = (props) => {
 	const { viewDimensions, ref: containerRef } = useChartClipRect();
 	const showEmptyView = !!((!data || data.length === 0) && emptyView);
 	const rootClassName = clsx(CartesianChart_module_default.cartesianChart, showEmptyView && CartesianChart_module_default.emptyView, className);
-	if (!!emptyView && !isValidElement(emptyView)) warnDeprecation("CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.");
-	const emptyElement = useMemo(() => {
-		if (isValidElement(emptyView)) return emptyView;
-		if (!emptyView) return;
-		return null;
-	}, [emptyView]);
+	const EmptyViewComponent = isEmptyViewComponent(emptyView) ? emptyView : void 0;
+	if (EmptyViewComponent) warnDeprecation("Passing a component to the 'emptyView' prop is deprecated and will be removed in a future release. Use 'emptyView={<Element />}' instead.");
 	const chartId = useId().replaceAll(/[^\w-]/g, "");
 	const contextValue = useMemo(() => ({
 		layout,
@@ -74,7 +72,7 @@ var CartesianChart = (props) => {
 							...viewDimensions,
 							children: /* @__PURE__ */ jsx(DivView, {
 								className: CartesianChart_module_default.emptyViewContainer,
-								children: emptyElement
+								children: EmptyViewComponent ? /* @__PURE__ */ jsx(EmptyViewComponent, { data }) : emptyView
 							})
 						})]
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No recharts and no svg: one surface in the size the chart would take. */\n  if (isSkeleton) {\n    return (\n      <div\n        className={styles.skeleton}\n        style={{\n          height,\n          aspectRatio: height ? undefined : 3,\n          flex: flexGrow ? 1 : undefined,\n        }}\n        aria-hidden\n        inert\n      />\n    );\n  }\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,iBAAiBA,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAKA,IAHmB,gBAGf,GACF,OACE,oBAAC,OAAD;EACE,WAAWA,8BAAO;EAClB,OAAO;GACL;GACA,aAAa,SAAS,KAAA,IAAY;GAClC,MAAM,WAAW,IAAI,KAAA;EACvB;EACA,eAAA;EACA,OAAA;CACD,CAAA;CAIL,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAWA,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
+{"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\nconst reactComponentTypes = [\n  Symbol.for(\"react.memo\"),\n  Symbol.for(\"react.forward_ref\"),\n];\n\nconst isEmptyViewComponent = (\n  value: unknown,\n): value is ComponentType<CartesianChartEmptyViewProps> =>\n  typeof value === \"function\" ||\n  (typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    reactComponentTypes.includes(value.$$typeof as symbol));\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const EmptyViewComponent = isEmptyViewComponent(emptyView)\n    ? emptyView\n    : undefined;\n\n  if (EmptyViewComponent) {\n    warnDeprecation(\n      \"Passing a component to the 'emptyView' prop is deprecated and will be removed in a future release. Use 'emptyView={<Element />}' instead.\",\n    );\n  }\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  const isSkeleton = useSkeletonMode();\n\n  /* No recharts and no svg: one surface in the size the chart would take. */\n  if (isSkeleton) {\n    return (\n      <div\n        className={styles.skeleton}\n        style={{\n          height,\n          aspectRatio: height ? undefined : 3,\n          flex: flexGrow ? 1 : undefined,\n        }}\n        aria-hidden\n        inert\n      />\n    );\n  }\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {EmptyViewComponent ? (\n                      <EmptyViewComponent data={data} />\n                    ) : (\n                      emptyView\n                    )}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAM,sBAAsB,CAC1B,OAAO,IAAI,YAAY,GACvB,OAAO,IAAI,mBAAmB,CAChC;AAEA,IAAM,wBACJ,UAEA,OAAO,UAAU,cAChB,OAAO,UAAU,YAChB,UAAU,QACV,cAAc,SACd,oBAAoB,SAAS,MAAM,QAAkB;;AAGzD,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,iBAAiBA,8BAAO,WACxB,SACF;CACA,MAAM,qBAAqB,qBAAqB,SAAS,IACrD,YACA,KAAA;CAEJ,IAAI,oBACF,gBACE,2IACF;CAGF,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAKA,IAHmB,gBAGf,GACF,OACE,oBAAC,OAAD;EACE,WAAWA,8BAAO;EAClB,OAAO;GACL;GACA,aAAa,SAAS,KAAA,IAAY;GAClC,MAAM,WAAW,IAAI,KAAA;EACvB;EACA,eAAA;EACA,OAAA;CACD,CAAA;CAIL,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAWA,8BAAO;QACxB,UAAA,qBACC,oBAAC,oBAAD,EAA0B,KAAO,CAAA,IAEjC;OAEK,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { ProgressBar } from "../../../ProgressBar/ProgressBar.mjs";
 import { Label } from "../../../Label/Label.mjs";
-import __locale_default from "../../../../../../../_virtual/_9.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_10.locale.mjs";
 import ChartTooltip_module_default from "./ChartTooltip.module.mjs";
 import { jsx } from "react/jsx-runtime";
 import { usePromise } from "@mittwald/react-use-promise";

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs

@@ -2,6 +2,7 @@
 /* */
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
 import { useCartesianChartContext } from "../../context.mjs";
+import { useTickLabelWidth } from "../../hooks/useTickLabelWidth.mjs";
 import { TypedYAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -20,17 +21,34 @@ var YAxis = (props) => {
 	const { domain, type = "auto", width, ...rest } = props;
 	const tokens = useDesignTokens();
 	const { layout } = useCartesianChartContext();
-	const isCategoryAxis = type === "category" || type === "auto" && layout === "vertical";
+	const tickLabels = useTickLabelWidth();
+	const isAutoWidth = (width ?? (type === "category" || type === "auto" && layout === "vertical" ? "auto" : void 0)) === "auto";
+	const tickMargin = parseInt(tokens.axis.spacing.value);
+	const tickSize = parseInt(tokens.axis["tick-size"].value);
+	const tickFill = tokens.axis["color"].value;
+	const autoWidth = tickLabels.width === void 0 ? "auto" : tickLabels.width + tickSize + tickMargin;
+	const measuredTick = (tickProps) => {
+		const { payload, index, tickFormatter } = tickProps;
+		const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? ""}`;
+		return /* @__PURE__ */ jsx(Recharts.Text, {
+			...tickProps,
+			ref: tickLabels.labelRef,
+			className: "recharts-cartesian-axis-tick-value",
+			fill: tickFill,
+			width: void 0,
+			children: value
+		});
+	};
 	return /* @__PURE__ */ jsx(Recharts.YAxis, {
 		...rest,
 		allowDataOverflow: true,
 		domain,
 		type,
-		width: width ?? (isCategoryAxis ? "auto" : void 0),
+		width: isAutoWidth ? autoWidth : width,
 		fontSize: tokens.axis["font-size"].value,
-		tick: { fill: tokens.axis["color"].value },
-		tickMargin: parseInt(tokens.axis.spacing.value),
-		tickSize: parseInt(tokens.axis["tick-size"].value)
+		tick: isAutoWidth ? measuredTick : { fill: tickFill },
+		tickMargin,
+		tickSize
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={width ?? (isCategoryAxis ? \"auto\" : undefined)}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,iBACJ,SAAS,cAAe,SAAS,UAAU,WAAW;CAExD,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,UAAU,iBAAiB,SAAS,KAAA;EAC3C,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
+{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { useTickLabelWidth } from \"@/components/CartesianChart/hooks/useTickLabelWidth\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n  const tickLabels = useTickLabelWidth();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n  const isAutoWidth =\n    (width ?? (isCategoryAxis ? \"auto\" : undefined)) === \"auto\";\n\n  const tickMargin = parseInt(tokens.axis.spacing.value);\n  const tickSize = parseInt(tokens.axis[\"tick-size\"].value);\n  const tickFill = tokens.axis[\"color\"].value;\n\n  /*\n   * Recharts' own `\"auto\"` stays in charge until the labels are measured, so\n   * the first frame is close already.\n   */\n  const autoWidth =\n    tickLabels.width === undefined\n      ? \"auto\"\n      : tickLabels.width + tickSize + tickMargin;\n\n  /*\n   * Recharts' default tick label, plus the measuring ref. Recharts passes a\n   * numeric axis width on to the label, which wraps once the text is wider —\n   * so the label drops it, as it does with `\"auto\"`.\n   */\n  const measuredTick = (tickProps: Recharts.YAxisTickContentProps) => {\n    const { payload, index, tickFormatter } = tickProps;\n    const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? \"\"}`;\n    return (\n      <Recharts.Text\n        {...tickProps}\n        ref={tickLabels.labelRef}\n        className=\"recharts-cartesian-axis-tick-value\"\n        fill={tickFill}\n        width={undefined}\n      >\n        {value}\n      </Recharts.Text>\n    );\n  };\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={isAutoWidth ? autoWidth : width}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={isAutoWidth ? measuredTick : { fill: tickFill }}\n      tickMargin={tickMargin}\n      tickSize={tickSize}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,aAAa,kBAAkB;CAIrC,MAAM,eACH,UAFD,SAAS,cAAe,SAAS,UAAU,WAAW,aAE1B,SAAS,KAAA,QAAgB;CAEvD,MAAM,aAAa,SAAS,OAAO,KAAK,QAAQ,KAAK;CACrD,MAAM,WAAW,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CACxD,MAAM,WAAW,OAAO,KAAK,QAAQ,CAAC;CAMtC,MAAM,YACJ,WAAW,UAAU,KAAA,IACjB,SACA,WAAW,QAAQ,WAAW;CAOpC,MAAM,gBAAgB,cAA8C;EAClE,MAAM,EAAE,SAAS,OAAO,kBAAkB;EAC1C,MAAM,QAAQ,GAAG,gBAAgB,cAAc,QAAQ,OAAO,KAAK,IAAI,QAAQ,QAAQ,KAAK,QAAQ;EACpG,OACE,oBAAC,SAAS,MAAV;GACE,GAAI;GACJ,KAAK,WAAW;GAChB,WAAU;GACV,MAAM;GACN,OAAO,KAAA;GAEN,UAAA;EACY,CAAA;CAEnB;CAEA,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,cAAc,YAAY;EACjC,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,cAAc,eAAe,EAAE,MAAM,SAAS;EACxC;EACF;CACX,CAAA;AAEL"}