npm - @mittwald/flow-react-components - Versions diffs - 0.2.0-alpha.797 → 0.2.0-alpha.799 - Mend

@mittwald/flow-react-components 0.2.0-alpha.797 → 0.2.0-alpha.799

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

Files changed (77) hide show

package/dist/js/_virtual/_.locale.json@774f50b2495c87d6d13911bcd596e720.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 "use client"
 /* */
 const locales = {"de-DE":{
-  "cartesianChart.total": "Gesamt"
+  "tooltip.progressBar.total": "Gesamt"
 }
 ,"en-US":{
-  "cartesianChart.total": "Total"
+  "tooltip.progressBar.total": "Total"
 }
 };

package/dist/js/default.mjs CHANGED Viewed

@@ -24,12 +24,14 @@ export { BrowserOnly } from './packages/components/src/components/BrowserOnly/Br
 export { Button } from './packages/components/src/components/Button/Button.mjs';
 export { RangeCalendar } from './packages/components/src/components/Calendar/components/RangeCalendar/RangeCalendar.mjs';
 export { isDateRangeValue } from './packages/components/src/components/Calendar/components/RangeCalendar/types.mjs';
-export { CartesianChart } from './packages/components/src/components/CartesianChart/CartesianChart.mjs';
-export { Area } from './packages/components/src/components/CartesianChart/components/Area/Area.mjs';
-export { Line } from './packages/components/src/components/CartesianChart/components/Line/Line.mjs';
-export { ChartTooltip } from './packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs';
+export { CartesianChart, typedCartesianChart } from './packages/components/src/components/CartesianChart/CartesianChart.mjs';
+export { Area, TypedArea } from './packages/components/src/components/CartesianChart/components/Area/Area.mjs';
+export { AreaDot } from './packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs';
+export { Line, TypedLine } from './packages/components/src/components/CartesianChart/components/Line/Line.mjs';
+export { ChartTooltip, TypedChartTooltip } from './packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs';
+export { ChartGrid, TypedChartGrid } from './packages/components/src/components/CartesianChart/components/ChartGrid/ChartGrid.mjs';
 export { CartesianGrid } from './packages/components/src/components/CartesianChart/components/CartesianGrid/CartesianGrid.mjs';
-export { ChartLegend } from './packages/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs';
+export { ChartLegend, TypedChartLegend } from './packages/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs';
 export { YAxis } from './packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs';
 export { XAxis } from './packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs';
 export { Chat } from './packages/components/src/components/Chat/Chat.mjs';
@@ -308,4 +310,6 @@ export { propsContext } from './packages/components/src/lib/propsContext/propsCo
 export { PropsContextProvider } from './packages/components/src/lib/propsContext/components/PropsContextProvider.mjs';
 export { eventHandlerContext, getRemoteEvent } from './packages/components/src/lib/remote/eventHandlerContext.mjs';
 export { useControlledRemoteValueProps } from './packages/components/src/lib/remote/useControlledRemoteValueProps.mjs';
+export { TypedXAxis } from './packages/components/src/components/CartesianChart/components/XAxis/types.mjs';
+export { TypedYAxis } from './packages/components/src/components/CartesianChart/components/YAxis/types.mjs';
 //# sourceMappingURL=default.mjs.map

package/dist/js/default.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/flr-universal.mjs CHANGED Viewed

@@ -168,7 +168,6 @@ import './packages/components/src/components/Heading/Heading.mjs';
 import './packages/components/src/views/SkeletonTextView.mjs';
 import './packages/components/src/components/ProgressBar/ProgressBar.mjs';
 import './packages/components/src/components/Label/Label.mjs';
-import 'react-aria';
 import './packages/components/src/views/LoadingSpinnerView.mjs';
 import './packages/components/src/components/Checkbox/Checkbox.mjs';
 import './packages/components/src/components/CheckboxButton/CheckboxButton.mjs';
@@ -190,6 +189,7 @@ import './packages/components/src/components/CounterBadge/CounterBadge.mjs';
 export { CountryOptions } from './packages/components/src/components/CountryOptions/CountryOptions.mjs';
 import './packages/components/src/components/DatePicker/DatePicker.mjs';
 import './packages/components/src/components/DateRangePicker/DateRangePicker.mjs';
+import 'react-aria';
 import './packages/components/src/components/FieldDescription/FieldDescription.mjs';
 import './packages/components/src/components/FieldError/FieldError.mjs';
 import './packages/components/src/components/FileCard/FileCard.mjs';

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

@@ -8,6 +8,13 @@ import styles from './CartesianChart.module.scss.mjs';
 import { useChartClipRect } from './hooks/useChartClipRect.mjs';
 import DivView from '../../views/DivView.mjs';
 import { Wrap } from '../Wrap/Wrap.mjs';
+import { TypedArea } from './components/Area/Area.mjs';
+import { TypedChartGrid } from './components/ChartGrid/ChartGrid.mjs';
+import { TypedYAxis } from './components/YAxis/types.mjs';
+import { TypedChartLegend } from './components/ChartLegend/ChartLegend.mjs';
+import { TypedChartTooltip } from './components/ChartTooltip/ChartTooltip.mjs';
+import { TypedXAxis } from './components/XAxis/types.mjs';
+import { TypedLine } from './components/Line/Line.mjs';
 const CartesianChart = (props) => {
   const { children, data, className, height, flexGrow, emptyView, ...rest } = props;
@@ -48,6 +55,16 @@ const CartesianChart = (props) => {
     }
   ) }) });
 };
+const typedCartesianChart = () => ({
+  Chart: CartesianChart,
+  Area: TypedArea(),
+  XAxis: TypedXAxis(),
+  YAxis: TypedYAxis(),
+  Grid: TypedChartGrid(),
+  Legend: TypedChartLegend(),
+  Tooltip: TypedChartTooltip(),
+  Line: TypedLine()
+});
-export { CartesianChart };
+export { CartesianChart, typedCartesianChart };
 //# sourceMappingURL=CartesianChart.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport React, {\n type ComponentProps,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\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\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"~~data\" \| \"~~className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n height?: string;\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 { children, data, className, height, flexGrow, emptyView, ...rest } =\n props;\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n className,\n showEmptyView && styles.emptyView,\n );\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n console.warn(\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 return null;\n }, [emptyView]);\n\n return (\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 data={data} className={rootClassName} {...rest}>\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 );\n};\n\nexport default CartesianChart;\n"],"names":[],"mappings":"~~;;;;;;;;;AAwCO~~,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,UAAU,IAAA,EAAM,SAAA,EAAW,QAAQ,QAAA,EAAU,SAAA,EAAW,GAAG,IAAA,EAAK,GACtE,KAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAA,EAAK,YAAA,KAAiB,gBAAA,EAAiB;AAE/D,EAAA,MAAM,gBAAgB,CAAC,EAAA,CAAG,CAAC,IAAA,IAAQ,IAAA,CAAK,WAAW,CAAA,KAAM,SAAA,CAAA;AACzD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,iBAAiB,MAAA,CAAO;AAAA,GAC1B;AAEA,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,IAAI,cAAA,CAAe,SAAS,CAAA,EAAG;AAC7B,MAAA,OAAO,SAAA;AAAA,IACT;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,MAAA,EACR,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAQ,IAAA,EAAM,QAAA,GAAW,CAAA,GAAI,QAAU,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAkB;AAAA;AAAA,QAEhB,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO,SAAS,MAAA,GAAY,MAAA;AAAA,MAC5B,MAAA,EAAQ,SAAS,MAAA,GAAY,CAAA;AAAA,MAC7B,GAAA,EAAK,YAAA;AAAA,MAEL,+BAAC,aAAA,EAAA,EAAc,IAAA,EAAY,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EACtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,aAAA,IAAiB,cAAA,oBAChB,GAAA,CAAC,eAAA,EAAA,EAAe,GAAG,cAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,kBAAA,EACxB,QAAA,EAAA,YAAA,EACH,CAAA,EACF;AAAA,OAAA,EAEJ;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport React, {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\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\";\n\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport type ChartDataValue = Record<string, unknown>;\nexport type DataKey<TData> = keyof TData \| (() => keyof TData) \| number;\nexport type DataKeyValue<\n TData,\n TDataKey extends DataKey<TData>,\n> = TDataKey extends keyof TData\n ? TData[TDataKey]\n : TDataKey extends () => infer K\n ? K extends keyof TData\n ? TData[K]\n : TData[keyof TData]\n : TData[keyof TData];\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n data?: TData[];\n\n height?: string;\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 { children, data, className, height, flexGrow, emptyView, ...rest } =\n props;\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n className,\n showEmptyView && styles.emptyView,\n );\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n console.warn(\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 return null;\n }, [emptyView]);\n\n return (\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 data={data} className={rootClassName} {...rest}>\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 );\n};\n\nexport const typedCartesianChart = <TData = ChartDataValue,>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n XAxis: TypedXAxis<TData>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgEO,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,UAAU,IAAA,EAAM,SAAA,EAAW,QAAQ,QAAA,EAAU,SAAA,EAAW,GAAG,IAAA,EAAK,GACtE,KAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAA,EAAK,YAAA,KAAiB,gBAAA,EAAiB;AAE/D,EAAA,MAAM,gBAAgB,CAAC,EAAA,CAAG,CAAC,IAAA,IAAQ,IAAA,CAAK,WAAW,CAAA,KAAM,SAAA,CAAA;AACzD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,iBAAiB,MAAA,CAAO;AAAA,GAC1B;AAEA,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,IAAI,cAAA,CAAe,SAAS,CAAA,EAAG;AAC7B,MAAA,OAAO,SAAA;AAAA,IACT;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,MAAA,EACR,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAQ,IAAA,EAAM,QAAA,GAAW,CAAA,GAAI,QAAU,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAkB;AAAA;AAAA,QAEhB,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO,SAAS,MAAA,GAAY,MAAA;AAAA,MAC5B,MAAA,EAAQ,SAAS,MAAA,GAAY,CAAA;AAAA,MAC7B,GAAA,EAAK,YAAA;AAAA,MAEL,+BAAC,aAAA,EAAA,EAAc,IAAA,EAAY,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EACtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,aAAA,IAAiB,cAAA,oBAChB,GAAA,CAAC,eAAA,EAAA,EAAe,GAAG,cAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,kBAAA,EACxB,QAAA,EAAA,YAAA,EACH,CAAA,EACF;AAAA,OAAA,EAEJ;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ;AAEO,MAAM,sBAAsB,OAAgC;AAAA,EACjE,KAAA,EAAO,cAAA;AAAA,EACP,MAAM,SAAA,EAAiB;AAAA,EACvB,OAAO,UAAA,EAAkB;AAAA,EACzB,OAAO,UAAA,EAAkB;AAAA,EACzB,MAAM,cAAA,EAAe;AAAA,EACrB,QAAQ,gBAAA,EAAiB;AAAA,EACzB,SAAS,iBAAA,EAAyB;AAAA,EAClC,MAAM,SAAA;AACR,CAAA;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/Area/Area.mjs CHANGED Viewed

@@ -28,6 +28,7 @@ const Area = (props) => {
     }
   );
 };
+const TypedArea = () => Area;
-export { Area };
+export { Area, TypedArea };
 //# sourceMappingURL=Area.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Area.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\nexport interface AreaProps extends Pick<\n Recharts.AreaProps,\n \| \"className\"\n \| \"~~dataKey\"\n \| \"~~stackId\"\n \| \"fillOpacity\"\n \| \"key\"\n \| \"xAxisId\"\n \| \"yAxisId\"\n \| \"type\"\n \| \"unit\"\n> {\n /** The color of the area. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const {\n color: colorFromProps = \"sea-green\",\n stackId = 1,\n fillOpacity = 1,\n ...rest\n } = props;\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Area\n stackId={stackId}\n fillOpacity={fillOpacity}\n {...rest}\n activeDot={<AreaDot color={color} />}\n fill={color}\n stroke={tokens.area[\"border-color\"].value}\n strokeWidth={tokens.area[\"border-width\"].value}\n />\n );\n};\n\nexport default Area;\n"],"names":[],"mappings":";;;;;;;~~AAwBO~~,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM;AAAA,IACJ,OAAO,cAAA,GAAiB,WAAA;AAAA,IACxB,OAAA,GAAU,CAAA;AAAA,IACV,WAAA,GAAc,CAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAQ,kBAAA,CAAmB,cAAc,CAAA,GAC3C,CAAA,0BAAA,EAA6B,cAAc,CAAA,CAAA,CAAA,GAC3C,cAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA,kBAAW,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAc,CAAA;AAAA,MAClC,IAAA,EAAM,KAAA;AAAA,MACN,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE,KAAA;AAAA,MACpC,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE;AAAA;AAAA,GAC3C;AAEJ;;;;"}
1	+ {"version":3,"file":"Area.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport type {\n ChartDataValue,\n DataKey,\n} from \"@/components/CartesianChart/CartesianChart\";\n\nexport interface AreaProps<TData = ChartDataValue> extends Pick<\n Recharts.AreaProps,\n \| \"className\"\n \| \"stackId\"\n \| \"fillOpacity\"\n \| \"key\"\n \| \"xAxisId\"\n \| \"yAxisId\"\n \| \"type\"\n \| \"unit\"\n> {\n dataKey: DataKey<TData>;\n /** The color of the area. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const {\n color: colorFromProps = \"sea-green\",\n stackId = 1,\n fillOpacity = 1,\n ...rest\n } = props;\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Area\n stackId={stackId}\n fillOpacity={fillOpacity}\n {...rest}\n activeDot={<AreaDot color={color} />}\n fill={color}\n stroke={tokens.area[\"border-color\"].value}\n strokeWidth={tokens.area[\"border-width\"].value}\n />\n );\n};\n\nexport const TypedArea = <T = ChartDataValue,>() =>\n Area as ComponentType<AreaProps<T>>;\n\nexport default Area;\n"],"names":[],"mappings":";;;;;;;AA4BO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM;AAAA,IACJ,OAAO,cAAA,GAAiB,WAAA;AAAA,IACxB,OAAA,GAAU,CAAA;AAAA,IACV,WAAA,GAAc,CAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAQ,kBAAA,CAAmB,cAAc,CAAA,GAC3C,CAAA,0BAAA,EAA6B,cAAc,CAAA,CAAA,CAAA,GAC3C,cAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA,kBAAW,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAc,CAAA;AAAA,MAClC,IAAA,EAAM,KAAA;AAAA,MACN,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE,KAAA;AAAA,MACpC,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE;AAAA;AAAA,GAC3C;AAEJ;AAEO,MAAM,YAAY,MACvB;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs CHANGED Viewed

@@ -2,11 +2,7 @@
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
-const AreaDot = ({
-  cx,
-  cy,
-  color
-}) => {
+const AreaDot = ({ cx, cy, color }) => {
   if (cx === void 0 || cy === void 0) return null;
   return /* @__PURE__ */ jsxs(
     "svg",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AreaDot.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\n\nexport ~~const~~ ~~AreaDot:~~ ~~FC<~~Recharts.DotProps & { color: string }> = ({\n cx~~,\n~~ cy~~,\n~~ color~~,\n~~}) => {\n if (cx === undefined \|\| cy === undefined) return null;\n\n return (\n <svg\n x={cx - 7}\n y={cy - 7}\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"7\" cy=\"7\" r=\"7\" fill=\"white\" />\n <circle cx=\"7\" cy=\"7\" r=\"4\" stroke={color} strokeWidth=\"2\" fill=\"white\" />\n </svg>\n );\n};\n"],"names":[],"mappings":";;~~AAGO~~,MAAM,~~UAAqD~~,CAAC~~;AAAA~~,~~EACjE~~,EAAA~~;AAAA~~,~~EACA~~,EAAA~~;AAAA~~,~~EACA;AACF~~,~~CAAA~~,KAAM;~~AACJ~~,EAAA,IAAI,EAAA,KAAO,MAAA,IAAa,EAAA,KAAO,MAAA,EAAW,OAAO,IAAA;AAEjD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAG,EAAA,GAAK,CAAA;AAAA,MACR,GAAG,EAAA,GAAK,CAAA;AAAA,MACR,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ,EAAA;AAAA,MACR,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,IAAG,GAAA,EAAI,EAAA,EAAG,KAAI,CAAA,EAAE,GAAA,EAAI,MAAK,OAAA,EAAQ,CAAA;AAAA,wBACzC,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,CAAA,EAAE,GAAA,EAAI,MAAA,EAAQ,KAAA,EAAO,WAAA,EAAY,GAAA,EAAI,MAAK,OAAA,EAAQ;AAAA;AAAA;AAAA,GAC1E;AAEJ;;;;"}
1	+ {"version":3,"file":"AreaDot.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\n\nexport interface AreaDotProps extends Recharts.DotProps {\n color: string;\n}\n\nexport const AreaDot: FC<AreaDotProps> = ({ cx, cy, color }) => {\n if (cx === undefined \|\| cy === undefined) return null;\n\n return (\n <svg\n x={cx - 7}\n y={cy - 7}\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"7\" cy=\"7\" r=\"7\" fill=\"white\" />\n <circle cx=\"7\" cy=\"7\" r=\"4\" stroke={color} strokeWidth=\"2\" fill=\"white\" />\n </svg>\n );\n};\n\nexport default AreaDot;\n"],"names":[],"mappings":";;AAOO,MAAM,UAA4B,CAAC,EAAE,EAAA,EAAI,EAAA,EAAI,OAAM,KAAM;AAC9D,EAAA,IAAI,EAAA,KAAO,MAAA,IAAa,EAAA,KAAO,MAAA,EAAW,OAAO,IAAA;AAEjD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAG,EAAA,GAAK,CAAA;AAAA,MACR,GAAG,EAAA,GAAK,CAAA;AAAA,MACR,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ,EAAA;AAAA,MACR,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,IAAG,GAAA,EAAI,EAAA,EAAG,KAAI,CAAA,EAAE,GAAA,EAAI,MAAK,OAAA,EAAQ,CAAA;AAAA,wBACzC,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,CAAA,EAAE,GAAA,EAAI,MAAA,EAAQ,KAAA,EAAO,WAAA,EAAY,GAAA,EAAI,MAAK,OAAA,EAAQ;AAAA;AAAA;AAAA,GAC1E;AAEJ;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/CartesianGrid/CartesianGrid.mjs CHANGED Viewed

@@ -1,21 +1,27 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import * as Recharts from 'recharts';
-import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import 'react/jsx-runtime';
+import 'recharts';
+import 'react';
+import 'clsx';
+import 'use-callback-ref';
+import '../../../../views/DivView.mjs';
+import '../../../../lib/tokens/CategoricalColors.mjs';
+import { ChartGrid } from '../ChartGrid/ChartGrid.mjs';
+import '../../../Text/Text.mjs';
+import '@mittwald/react-use-promise';
+import '../../../Heading/Heading.mjs';
+import '../../../../views/SkeletonTextView.mjs';
+import '../../../ProgressBar/ProgressBar.mjs';
+import '../../../Label/Label.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
+import 'react-aria';
+import '../../../../views/LoadingSpinnerView.mjs';
-const CartesianGrid = (props) => {
-  const { vertical = false, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    Recharts.CartesianGrid,
-    {
-      vertical,
-      ...rest,
-      stroke: tokens["cartesian-grid"].color.value,
-      strokeWidth: tokens["cartesian-grid"]["stroke-width"].value
-    }
-  );
-};
+const CartesianGrid = ChartGrid;
 export { CartesianGrid };
 //# sourceMappingURL=CartesianGrid.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianGrid.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/CartesianGrid/CartesianGrid.tsx"],"sourcesContent":["import type { FC } from \"~~react~~\";\~~nimport~~ * as ~~Recharts~~ ~~from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\~~nexport type CartesianGridProps = ~~Pick<\~~n ~~Recharts.CartesianGridProps,\~~n ~~\"className\"~~ \| ~~\"vertical\"~~ \| \~~"horizontal\"~~ \| \"strokeDasharray\"\n>;\n\n/** @flr-generate all */\nexport const CartesianGrid: ~~FC<CartesianGridProps>~~ = ~~(props) => {\n const { vertical = false, ...rest } = props~~;\n~~\n return (\n <Recharts.CartesianGrid\n vertical={vertical}\n {...rest}\n stroke={tokens[\~~"~~cartesian-grid\"~~]~~.color.value}\n strokeWidth={tokens[\"cartesian-grid\"][\"stroke-width\"].value}\n />\n );\n};\n\nexport default CartesianGrid;\n"]~~,"names":[],"mappings":"~~;;;;AAUO~~,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM,EAAE,QAAA,GAAW,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,aAAA;AAAA,IAAT;AAAA,MACC,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,MAAA,EAAQ,MAAA,CAAO,gBAAgB,CAAA,CAAE,KAAA,CAAM,KAAA;AAAA,MACvC,WAAA,EAAa,MAAA,CAAO,gBAAgB,CAAA,CAAE,cAAc,CAAA,CAAE;AAAA;AAAA,GACxD;AAEJ;;;;"}
1	+ {"version":3,"file":"CartesianGrid.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/CartesianGrid/CartesianGrid.tsx"],"sourcesContent":["import { ChartGrid, type ChartGridProps } from \"@/components/CartesianChart\";\n\n/** @deprecated Use ChartGridProps /\nexport type CartesianGridProps = ChartGridProps;\n\n/\n @deprecated Use ChartGrid\n * @flr-generate all\n */\nexport const CartesianGrid = ChartGrid;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AASO,MAAM,aAAA,GAAgB;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartGrid/ChartGrid.mjs ADDED Viewed

@@ -0,0 +1,22 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import * as Recharts from 'recharts';
+import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+const ChartGrid = (props) => {
+  const { vertical = false, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Recharts.CartesianGrid,
+    {
+      vertical,
+      ...rest,
+      stroke: tokens["cartesian-grid"].color.value,
+      strokeWidth: tokens["cartesian-grid"]["stroke-width"].value
+    }
+  );
+};
+const TypedChartGrid = () => ChartGrid;
+export { ChartGrid, TypedChartGrid };
+//# sourceMappingURL=ChartGrid.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartGrid/ChartGrid.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ChartGrid.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartGrid/ChartGrid.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type ChartGridProps = Pick<\n Recharts.CartesianGridProps,\n \"className\" | \"vertical\" | \"horizontal\" | \"strokeDasharray\"\n>;\n\n/** @flr-generate all */\nexport const ChartGrid: FC<ChartGridProps> = (props) => {\n const { vertical = false, ...rest } = props;\n\n return (\n <Recharts.CartesianGrid\n vertical={vertical}\n {...rest}\n stroke={tokens[\"cartesian-grid\"].color.value}\n strokeWidth={tokens[\"cartesian-grid\"][\"stroke-width\"].value}\n />\n );\n};\n\nexport const TypedChartGrid = () => ChartGrid as ComponentType<ChartGridProps>;\n\nexport default ChartGrid;\n"],"names":[],"mappings":";;;;AAUO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,QAAA,GAAW,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,aAAA;AAAA,IAAT;AAAA,MACC,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,MAAA,EAAQ,MAAA,CAAO,gBAAgB,CAAA,CAAE,KAAA,CAAM,KAAA;AAAA,MACvC,WAAA,EAAa,MAAA,CAAO,gBAAgB,CAAA,CAAE,cAAc,CAAA,CAAE;AAAA;AAAA,GACxD;AAEJ;AAEO,MAAM,iBAAiB,MAAM;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs CHANGED Viewed

@@ -14,6 +14,7 @@ const ChartLegend = (props) => {
     }
   );
 };
+const TypedChartLegend = () => ChartLegend;
-export { ChartLegend };
+export { ChartLegend, TypedChartLegend };
 //# sourceMappingURL=ChartLegend.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartLegend.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport LegendContent from \"./LegendContent\";\n\nexport type ChartLegendFormatter = (text: string) => string;\n\nexport interface WithChartLegendFormatters {\n /*\n A formatter function for the texts of the Legend. Can be used for purposes\n * like translations.\n /\n formatter?: ChartLegendFormatter;\n}\n\nexport type ChartLegendProps = Pick<\n Recharts.LegendProps,\n \"className\" \| \"verticalAlign\"\n> &\n WithChartLegendFormatters;\n\n/* @flr-generate all */\nexport const ChartLegend: FC<ChartLegendProps> = (props) => {\n const { formatter, ...rest } = props;\n\n return (\n <Recharts.Legend\n {...rest}\n content={<LegendContent formatter={formatter} />}\n />\n );\n};\n\nexport default ChartLegend;\n"],"names":[],"mappings":";;;;AAqBO,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,MAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA,kBAAS,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAsB;AAAA;AAAA,GAChD;AAEJ;;;;"}
1	+ {"version":3,"file":"ChartLegend.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport LegendContent from \"./LegendContent\";\n\nexport type ChartLegendFormatter = (text: string) => string;\n\nexport interface WithChartLegendFormatters {\n /*\n A formatter function for the texts of the Legend. Can be used for purposes\n * like translations.\n /\n formatter?: ChartLegendFormatter;\n}\n\nexport type ChartLegendProps = Pick<\n Recharts.LegendProps,\n \"className\" \| \"verticalAlign\"\n> &\n WithChartLegendFormatters;\n\n/* @flr-generate all */\nexport const ChartLegend: FC<ChartLegendProps> = (props) => {\n const { formatter, ...rest } = props;\n\n return (\n <Recharts.Legend\n {...rest}\n content={<LegendContent formatter={formatter} />}\n />\n );\n};\n\nexport const TypedChartLegend = () =>\n ChartLegend as ComponentType<ChartLegendProps>;\n\nexport default ChartLegend;\n"],"names":[],"mappings":";;;;AAqBO,MAAM,WAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,MAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA,kBAAS,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAsB;AAAA;AAAA,GAChD;AAEJ;AAEO,MAAM,mBAAmB,MAC9B;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs CHANGED Viewed

@@ -41,6 +41,7 @@ const ChartTooltip = (props) => {
     }
   );
 };
+const TypedChartTooltip = () => ChartTooltip;
-export { ChartTooltip };
+export { ChartTooltip, TypedChartTooltip };
 //# sourceMappingURL=ChartTooltip.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { type TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\n\nexport type TooltipLineFormatter = (\n value: ~~TooltipPayloadItem~~[~~\"value\"~~],\n name: ~~TooltipPayloadItem[\"dataKey\"]~~,\n index: number,\n unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> \| string;\n\nexport type TooltipHeadingFormatter = (\n title: string \| ~~number~~ \| ~~undefined~~,\n) => Promise<string> \| string;\n\nexport interface WithTooltipFormatters {\n /*\n A formatter function for the lines in the tooltip. Can be used for purposes\n * like translations.\n /\n formatter?: TooltipLineFormatter;\n /\n A formatter function for the heading of the tooltip. Can be used for\n * purposes like translations.\n /\n headingFormatter?: TooltipHeadingFormatter;\n}\n\nexport interface ChartTooltipProps\n extends\n Pick<\n TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" \| \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters {\n /* Show progress bar for stacked areas @default \"true\" /\n showProgressBar?: boolean;\n}\n\n/* @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const {\n headingFormatter,\n formatter,\n showProgressBar = true,\n ...rest\n } = props;\n\n return (\n <Tooltip\n {...rest}\n cursor={false}\n content={(props) => {\n if (!props.active \|\| !props.payload \|\| props.payload.length === 0) {\n return null;\n }\n\n const className = clsx(props.wrapperClassName, styles.tooltip);\n return (\n <div className={className}>\n <Suspense fallback={<LoadingSpinnerView />}>\n <TooltipContent\n {...props}\n headingFormatter={headingFormatter}\n formatter={formatter}\n showProgressBar={showProgressBar}\n />\n </Suspense>\n </div>\n );\n }}\n />\n );\n};\n\nexport default ChartTooltip;\n"],"names":["props"],"mappings":";;;;;;;;;;;~~AAgDO~~,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,MAAA,EAAQ,KAAA;AAAA,MACR,OAAA,EAAS,CAACA,MAAAA,KAAU;AAClB,QAAA,IAAI,CAACA,OAAM,MAAA,IAAU,CAACA,OAAM,OAAA,IAAWA,MAAAA,CAAM,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG;AACjE,UAAA,OAAO,IAAA;AAAA,QACT;AAEA,QAAA,MAAM,SAAA,GAAY,IAAA,CAAKA,MAAAA,CAAM,gBAAA,EAAkB,OAAO,OAAO,CAAA;AAC7D,QAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EACH,QAAA,kBAAA,GAAA,CAAC,YAAS,QAAA,kBAAU,GAAA,CAAC,sBAAmB,CAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACE,GAAGA,MAAAA;AAAA,YACJ,gBAAA;AAAA,YACA,SAAA;AAAA,YACA;AAAA;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,MAEJ;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import React, { type ComponentType, type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { type TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/CartesianChart\";\n\nexport type TooltipLineFormatter<TData> = (\n value: TData[keyof TData],\n name: keyof TData,\n index: number,\n unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> \| string;\n\nexport type TooltipHeadingFormatter<TData> = (\n title: TData[keyof TData],\n) => Promise<string> \| string;\n\nexport type TooltipLProgressBarFormatter<TData> = (\n value: TData[keyof TData],\n unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> \| string;\n\nexport interface WithTooltipFormatters<TData> {\n /*\n A formatter function for the lines in the tooltip. Can be used for purposes\n * like translations.\n /\n formatter?: TooltipLineFormatter<TData>;\n /\n A formatter function for the heading of the tooltip. Can be used for\n * purposes like translations.\n /\n headingFormatter?: TooltipHeadingFormatter<TData>;\n /\n A formatter function for the progressBar of the tooltip. Can be used for\n * purposes like translations.\n /\n progressBarFormatter?: TooltipLProgressBarFormatter<TData>;\n}\n\nexport interface ChartTooltipProps<TData = ChartDataValue>\n extends\n Pick<\n TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" \| \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters<TData> {\n /* Show progress bar for stacked areas @default \"true\" /\n showProgressBar?: boolean;\n}\n\n/* @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const {\n headingFormatter,\n formatter,\n showProgressBar = true,\n ...rest\n } = props;\n\n return (\n <Tooltip\n {...rest}\n cursor={false}\n content={(props) => {\n if (!props.active \|\| !props.payload \|\| props.payload.length === 0) {\n return null;\n }\n\n const className = clsx(props.wrapperClassName, styles.tooltip);\n return (\n <div className={className}>\n <Suspense fallback={<LoadingSpinnerView />}>\n <TooltipContent\n {...props}\n headingFormatter={headingFormatter}\n formatter={formatter}\n showProgressBar={showProgressBar}\n />\n </Suspense>\n </div>\n );\n }}\n />\n );\n};\n\nexport const TypedChartTooltip = <T = ChartDataValue,>() =>\n ChartTooltip as ComponentType<ChartTooltipProps<T>>;\n\nexport default ChartTooltip;\n"],"names":["props"],"mappings":";;;;;;;;;;;AA2DO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,MAAA,EAAQ,KAAA;AAAA,MACR,OAAA,EAAS,CAACA,MAAAA,KAAU;AAClB,QAAA,IAAI,CAACA,OAAM,MAAA,IAAU,CAACA,OAAM,OAAA,IAAWA,MAAAA,CAAM,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG;AACjE,UAAA,OAAO,IAAA;AAAA,QACT;AAEA,QAAA,MAAM,SAAA,GAAY,IAAA,CAAKA,MAAAA,CAAM,gBAAA,EAAkB,OAAO,OAAO,CAAA;AAC7D,QAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EACH,QAAA,kBAAA,GAAA,CAAC,YAAS,QAAA,kBAAU,GAAA,CAAC,sBAAmB,CAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACE,GAAGA,MAAAA;AAAA,YACJ,gBAAA;AAAA,YACA,SAAA;AAAA,YACA;AAAA;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,MAEJ;AAAA;AAAA,GACF;AAEJ;AAEO,MAAM,oBAAoB,MAC/B;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs CHANGED Viewed

@@ -10,7 +10,14 @@ import { TooltipProgressBar } from './TooltipProgressBar.mjs';
 import { Flex } from '../../../Flex/Flex.mjs';
 const TooltipContent = (props) => {
-  const { headingFormatter, formatter, label, payload, showProgressBar } = props;
+  const {
+    headingFormatter,
+    formatter,
+    progressBarFormatter,
+    label,
+    payload,
+    showProgressBar
+  } = props;
   const formattedHeading = usePromise(
     async (label2, formatter2) => {
       if (!formatter2) {
@@ -26,7 +33,13 @@ const TooltipContent = (props) => {
   });
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "s", children: [
     /* @__PURE__ */ jsx(Heading, { level: 4, children: formattedHeading }),
-    showProgressBar && /* @__PURE__ */ jsx(TooltipProgressBar, { items: filteredPayload }),
+    showProgressBar && /* @__PURE__ */ jsx(
+      TooltipProgressBar,
+      {
+        progressBarFormatter,
+        items: filteredPayload
+      }
+    ),
     /* @__PURE__ */ jsx("div", { children: items })
   ] });
 };

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport type { TooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport Heading from \"@/components/Heading\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { TooltipLegendItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { TooltipProgressBar } from \"@/components/CartesianChart/components/ChartTooltip/TooltipProgressBar\";\nimport { Flex } from \"@/components/Flex\";\n\n/** ~~@internal~~ */\nexport ~~const~~ ~~TooltipContent: FC<\~~n WithTooltipFormatters &\n Omit<~~TooltipContentProps~~<ValueType, NameType>, \"formatter\"> & {\n showProgressBar?: boolean;\n }\n> = (props) => {\n const { headingFormatter, formatter, label, payload, showProgressBar } ~~=\n~~ props;\n\n const formattedHeading = usePromise(\n async (label, formatter) => {\n if (!formatter) {\n return label;\n }\n\n return formatter(label);\n },\n [label, headingFormatter] as const,\n );\n\n const filteredPayload = payload.filter((item) => item.fill !== \"none\");\n\n const items = filteredPayload.map((item, index) => {\n return (\n <Suspense key={item.dataKey} fallback={<SkeletonTextView />}>\n <TooltipLegendItem formatter={formatter} item={item} index={index} />\n </Suspense>\n );\n });\n\n return (\n <Flex direction=\"column\" gap=\"s\">\n <Heading level={4}>{formattedHeading}</Heading>\n {showProgressBar && <TooltipProgressBar items={filteredPayload} />}\n <div>{items}</div>\n </Flex>\n );\n};\n"],"names":["label","formatter"],"mappings":";;;;;;;;;~~AAeO~~,MAAM,cAAA,~~GAKT~~,CAAC,KAAA,KAAU;~~AACb~~,EAAA,MAAM,~~EAAE~~,gBAAA,~~EAAkB~~,SAAA,~~EAAW~~,KAAA,~~EAAO~~,OAAA,~~EAAS~~,~~iBAAgB~~,~~GACnE~~,KAAA;~~AAEF~~,EAAA,MAAM,gBAAA,GAAmB,UAAA;AAAA,IACvB,OAAOA,QAAOC,UAAAA,KAAc;AAC1B,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAOD,MAAAA;AAAA,MACT;AAEA,MAAA,OAAOC,WAAUD,MAAK,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,OAAO,gBAAgB;AAAA,GAC1B;AAEA,EAAA,MAAM,kBAAkB,OAAA,CAAQ,MAAA,CAAO,CAAC,IAAA,KAAS,IAAA,CAAK,SAAS,MAAM,CAAA;AAErE,EAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,GAAA,CAAI,CAAC,MAAM,KAAA,KAAU;AACjD,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAA4B,QAAA,kBAAU,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,EACvD,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,SAAA,EAAsB,IAAA,EAAY,KAAA,EAAc,CAAA,EAAA,EADtD,KAAK,OAEpB,CAAA;AAAA,EAEJ,CAAC,CAAA;AAED,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,EAAI,QAAA,EAAA,gBAAA,EAAiB,CAAA;AAAA,IACpC,eAAA,~~oBAAmB~~,GAAA,~~CAAC~~,kBAAA,~~EAAA~~,~~EAAmB~~,KAAA,EAAO,~~eAAA,EAAiB,CAAA~~;AAAA,~~oBAChE~~,GAAA,CAAC,SAAK,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACd,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport type { TooltipContentProps as RechartTooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport Heading from \"@/components/Heading\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { TooltipLegendItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { TooltipProgressBar } from \"@/components/CartesianChart/components/ChartTooltip/TooltipProgressBar\";\nimport { Flex } from \"@/components/Flex\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/CartesianChart\";\n\nexport interface TooltipContentProps<TData = ChartDataValue>\n extends\n WithTooltipFormatters<TData>,\n Omit<RechartTooltipContentProps<ValueType, NameType>, \"formatter\"> {\n showProgressBar?: boolean;\n}\n\n/** @internal */\nexport const TooltipContent: FC<TooltipContentProps> = (props) => {\n const {\n headingFormatter,\n formatter,\n progressBarFormatter,\n label,\n payload,\n showProgressBar,\n } = props;\n\n const formattedHeading = usePromise(\n async (label, formatter) => {\n if (!formatter) {\n return label;\n }\n\n return formatter(label);\n },\n [label, headingFormatter] as const,\n );\n\n const filteredPayload = payload.filter((item) => item.fill !== \"none\");\n\n const items = filteredPayload.map((item, index) => {\n return (\n <Suspense key={item.dataKey} fallback={<SkeletonTextView />}>\n <TooltipLegendItem formatter={formatter} item={item} index={index} />\n </Suspense>\n );\n });\n\n return (\n <Flex direction=\"column\" gap=\"s\">\n <Heading level={4}>{formattedHeading}</Heading>\n {showProgressBar && (\n <TooltipProgressBar\n progressBarFormatter={progressBarFormatter}\n items={filteredPayload}\n />\n )}\n <div>{items}</div>\n </Flex>\n );\n};\n"],"names":["label","formatter"],"mappings":";;;;;;;;;AAuBO,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM;AAAA,IACJ,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,oBAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,gBAAA,GAAmB,UAAA;AAAA,IACvB,OAAOA,QAAOC,UAAAA,KAAc;AAC1B,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAOD,MAAAA;AAAA,MACT;AAEA,MAAA,OAAOC,WAAUD,MAAK,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,OAAO,gBAAgB;AAAA,GAC1B;AAEA,EAAA,MAAM,kBAAkB,OAAA,CAAQ,MAAA,CAAO,CAAC,IAAA,KAAS,IAAA,CAAK,SAAS,MAAM,CAAA;AAErE,EAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,GAAA,CAAI,CAAC,MAAM,KAAA,KAAU;AACjD,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAA4B,QAAA,kBAAU,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,EACvD,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,SAAA,EAAsB,IAAA,EAAY,KAAA,EAAc,CAAA,EAAA,EADtD,KAAK,OAEpB,CAAA;AAAA,EAEJ,CAAC,CAAA;AAED,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,EAAI,QAAA,EAAA,gBAAA,EAAiB,CAAA;AAAA,IACpC,eAAA,oBACC,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,oBAAA;AAAA,QACA,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,oBAEF,GAAA,CAAC,SAAK,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACd,CAAA;AAEJ;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipLegendItem.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\n/** @internal /\nexport type TooltipPayloadItem = NonNullable<\n DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/* @internal /\ninterface LegendItemLabelProps extends Pick<\n WithTooltipFormatters,\n \"formatter\"\n> {\n item: TooltipPayloadItem;\n index: number;\n}\n\n/* @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n formatter,\n item,\n index,\n}) => {\n const { value, dataKey, unit, fill } = item;\n\n const formattedLabel = usePromise(\n async (value, dataKey, index, unit, formatter) => {\n if (!formatter) {\n return `${dataKey} (${value}${unit ? ` ${unit}` : \"\"})`;\n }\n\n return formatter(value, dataKey, index, unit);\n },\n [value, dataKey, index, unit, formatter] as const,\n );\n\n return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"names":["value","dataKey","index","unit","formatter"],"mappings":";;;;~~AAyBO~~,MAAM,oBAA8C,CAAC;AAAA,EAC1D,SAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,IAAA,EAAM,MAAK,GAAI,IAAA;AAEvC,EAAA,MAAM,cAAA,GAAiB,UAAA;AAAA,IACrB,OAAOA,MAAAA,EAAOC,QAAAA,EAASC,MAAAA,EAAOC,OAAMC,UAAAA,KAAc;AAChD,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAO,CAAA,EAAGH,QAAO,CAAA,EAAA,EAAKD,MAAK,GAAGG,KAAAA,GAAO,CAAA,CAAA,EAAIA,KAAI,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA,CAAA;AAAA,MACtD;AAEA,MAAA,OAAOC,UAAAA,CAAUJ,MAAAA,EAAOC,QAAAA,~~EAASC~~,MAAAA,EAAOC,KAAI,CAAA;AAAA,~~IAC9C~~,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,MAAM,SAAS;AAAA,GACzC;AAEA,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAO,QAAA,EAAA,cAAA,EAAe,CAAA;AAClD;;;;"}
1	+ {"version":3,"file":"TooltipLegendItem.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/CartesianChart\";\n\n/** @internal /\nexport type TooltipPayloadItem = NonNullable<\n DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/* @internal /\ninterface LegendItemLabelProps<TData = ChartDataValue> extends Pick<\n WithTooltipFormatters<TData>,\n \"formatter\"\n> {\n item: TooltipPayloadItem;\n index: number;\n}\n\n/* @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n formatter,\n item,\n index,\n}) => {\n const { value, dataKey, unit, fill } = item;\n\n const formattedLabel = usePromise(\n async (value, dataKey, index, unit, formatter) => {\n if (!formatter) {\n return `${dataKey} (${value}${unit ? ` ${unit}` : \"\"})`;\n }\n\n return formatter(value, dataKey as never, index, unit);\n },\n [value, dataKey, index, unit, formatter] as const,\n );\n\n return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"names":["value","dataKey","index","unit","formatter"],"mappings":";;;;AA0BO,MAAM,oBAA8C,CAAC;AAAA,EAC1D,SAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,IAAA,EAAM,MAAK,GAAI,IAAA;AAEvC,EAAA,MAAM,cAAA,GAAiB,UAAA;AAAA,IACrB,OAAOA,MAAAA,EAAOC,QAAAA,EAASC,MAAAA,EAAOC,OAAMC,UAAAA,KAAc;AAChD,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAO,CAAA,EAAGH,QAAO,CAAA,EAAA,EAAKD,MAAK,GAAGG,KAAAA,GAAO,CAAA,CAAA,EAAIA,KAAI,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA,CAAA;AAAA,MACtD;AAEA,MAAA,OAAOC,UAAAA,CAAUJ,MAAAA,EAAOC,QAAAA,EAAkBC,MAAAA,EAAOC,KAAI,CAAA;AAAA,IACvD,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,MAAM,SAAS;AAAA,GACzC;AAEA,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAO,QAAA,EAAA,cAAA,EAAe,CAAA;AAClD;;;;"}

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

@@ -3,16 +3,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { ProgressBar } from '../../../ProgressBar/ProgressBar.mjs';
 import { Label } from '../../../Label/Label.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
 import locales from '../../../../../../../_virtual/_.locale.json@774f50b2495c87d6d13911bcd596e720.mjs';
 import styles from './ChartTooltip.module.scss.mjs';
+import { usePromise } from '@mittwald/react-use-promise';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import { useLocalizedStringFormatter } from '../../../TranslationProvider/useLocalizedStringFormatter.mjs';
 const TooltipProgressBar = (props) => {
-  const { items } = props;
+  const { items, progressBarFormatter } = props;
   const areaItems = items.filter(
     (item) => item.fill !== "none" && item.graphicalItemId.includes("area")
   );
-  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stringFormatter = useLocalizedStringFormatter(
+    locales,
+    "CartesianChart"
+  );
   const unit = areaItems[0]?.unit;
   const segments = areaItems.map((i) => ({
     title: i.dataKey,
@@ -20,6 +25,15 @@ const TooltipProgressBar = (props) => {
     color: i.fill
   }));
   const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+  const formattedLabel = usePromise(
+    async (value, unit2, formatter) => {
+      if (!formatter) {
+        return `${value}${unit2 ? ` ${unit2}` : ""}`;
+      }
+      return formatter(value, unit2);
+    },
+    [total, unit, progressBarFormatter]
+  );
   if (areaItems.length < 2) {
     return null;
   }
@@ -29,9 +43,9 @@ const TooltipProgressBar = (props) => {
       className: styles.progressBar,
       showLegend: false,
       segments,
-      valueLabel: unit ? `${total} ${unit}` : total,
+      valueLabel: formattedLabel,
       maxValue: unit === "%" ? void 0 : total,
-      children: /* @__PURE__ */ jsx(Label, { children: stringFormatter.format("cartesianChart.total") })
+      children: /* @__PURE__ */ jsx(Label, { children: stringFormatter.format("tooltip.progressBar.total") })
     }
   );
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipProgressBar.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { ~~useLocalizedStringFormatter~~ } from \"react-~~aria~~\";\nimport ~~locales~~ from \"~~../../locales/*.locale.json~~\";\nimport ~~styles~~ from \"~~./ChartTooltip.module.scss~~\";\n\ninterface TooltipProgressBarProps {\n items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n const { items } = props;\n\n const areaItems = items.filter(\n (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const unit = areaItems[0]?.unit;\n\n const segments = areaItems.map((i) => ({\n title: i.dataKey as string,\n value: i.value as number,\n color: i.fill,\n }));\n\n const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n\n if (areaItems.length < 2) {\n return null;\n }\n\n return (\n <ProgressBar\n className={styles.progressBar}\n showLegend={false}\n segments={segments}\n valueLabel={~~unit ? `${total~~} ~~${unit}` : total}~~\n maxValue={unit === \"%\" ? undefined : total}\n >\n <Label>{stringFormatter.format(\"~~cartesianChart~~.total\")}</Label>\n </ProgressBar>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;AAYO~~,MAAM,kBAAA,GAAkD,CAAC,KAAA,KAAU;AACxE,EAAA,MAAM,EAAE,~~OAAM~~,GAAI,KAAA;~~AAElB~~,EAAA,MAAM,YAAY,KAAA,CAAM,MAAA;AAAA,IACtB,CAAC,SAAS,IAAA,CAAK,IAAA,KAAS,UAAU,IAAA,CAAK,eAAA,CAAgB,SAAS,MAAM;AAAA,GACxE;AAEA,EAAA,MAAM,eAAA,GAAkB,~~4BAA4B~~,~~OAAO~~,~~CAAA~~;~~AAE3D~~,EAAA,MAAM,IAAA,GAAO,SAAA,CAAU,CAAC,CAAA,EAAG,IAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,SAAA,CAAU,GAAA,CAAI,CAAC,CAAA,MAAO;AAAA,IACrC,OAAO,CAAA,CAAE,OAAA;AAAA,IACT,OAAO,CAAA,CAAE,KAAA;AAAA,IACT,OAAO,CAAA,CAAE;AAAA,GACX,CAAE,CAAA;AAEF,EAAA,MAAM,KAAA,GAAQ,SAAS,MAAA,CAAO,CAAC,KAAK,OAAA,KAAY,GAAA,GAAM,OAAA,CAAQ,KAAA,EAAO,CAAC,CAAA;AAEtE,EAAA,IAAI,SAAA,CAAU,SAAS,CAAA,EAAG;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,UAAA,EAAY,KAAA;AAAA,MACZ,QAAA;AAAA,MACA,~~YAAY~~,~~IAAA~~,~~GAAO,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,GAAK,KAAA~~;AAAA,~~MACxC~~,QAAA,EAAU,IAAA,KAAS,GAAA,GAAM,MAAA,GAAY,KAAA;AAAA,MAErC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAO,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,~~sBAAsB~~,CAAA,EAAE;AAAA;AAAA,~~GACzD~~;AAEJ;;;;"}
1	+ {"version":3,"file":"TooltipProgressBar.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/CartesianChart\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\n\ninterface TooltipProgressBarProps<TData = ChartDataValue> extends Pick<\n WithTooltipFormatters<TData>,\n \"progressBarFormatter\"\n> {\n items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n const { items, progressBarFormatter } = props;\n\n const areaItems = items.filter(\n (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n );\n\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"CartesianChart\",\n );\n\n const unit = areaItems[0]?.unit;\n\n const segments = areaItems.map((i) => ({\n title: i.dataKey as string,\n value: i.value as number,\n color: i.fill,\n }));\n\n const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n\n const formattedLabel = usePromise(\n async (value, unit, formatter) => {\n if (!formatter) {\n return `${value}${unit ? ` ${unit}` : \"\"}`;\n }\n\n return formatter(value, unit);\n },\n [total, unit, progressBarFormatter] as const,\n );\n\n if (areaItems.length < 2) {\n return null;\n }\n\n return (\n <ProgressBar\n className={styles.progressBar}\n showLegend={false}\n segments={segments}\n valueLabel={formattedLabel}\n maxValue={unit === \"%\" ? undefined : total}\n >\n <Label>{stringFormatter.format(\"tooltip.progressBar.total\")}</Label>\n </ProgressBar>\n );\n};\n"],"names":["unit"],"mappings":";;;;;;;;;AAkBO,MAAM,kBAAA,GAAkD,CAAC,KAAA,KAAU;AACxE,EAAA,MAAM,EAAE,KAAA,EAAO,oBAAA,EAAqB,GAAI,KAAA;AAExC,EAAA,MAAM,YAAY,KAAA,CAAM,MAAA;AAAA,IACtB,CAAC,SAAS,IAAA,CAAK,IAAA,KAAS,UAAU,IAAA,CAAK,eAAA,CAAgB,SAAS,MAAM;AAAA,GACxE;AAEA,EAAA,MAAM,eAAA,GAAkB,2BAAA;AAAA,IACtB,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,IAAA,GAAO,SAAA,CAAU,CAAC,CAAA,EAAG,IAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,SAAA,CAAU,GAAA,CAAI,CAAC,CAAA,MAAO;AAAA,IACrC,OAAO,CAAA,CAAE,OAAA;AAAA,IACT,OAAO,CAAA,CAAE,KAAA;AAAA,IACT,OAAO,CAAA,CAAE;AAAA,GACX,CAAE,CAAA;AAEF,EAAA,MAAM,KAAA,GAAQ,SAAS,MAAA,CAAO,CAAC,KAAK,OAAA,KAAY,GAAA,GAAM,OAAA,CAAQ,KAAA,EAAO,CAAC,CAAA;AAEtE,EAAA,MAAM,cAAA,GAAiB,UAAA;AAAA,IACrB,OAAO,KAAA,EAAOA,KAAAA,EAAM,SAAA,KAAc;AAChC,MAAA,IAAI,CAAC,SAAA,EAAW;AACd,QAAA,OAAO,GAAG,KAAK,CAAA,EAAGA,QAAO,CAAA,CAAA,EAAIA,KAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MAC1C;AAEA,MAAA,OAAO,SAAA,CAAU,OAAOA,KAAI,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,IAAA,EAAM,oBAAoB;AAAA,GACpC;AAEA,EAAA,IAAI,SAAA,CAAU,SAAS,CAAA,EAAG;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,UAAA,EAAY,KAAA;AAAA,MACZ,QAAA;AAAA,MACA,UAAA,EAAY,cAAA;AAAA,MACZ,QAAA,EAAU,IAAA,KAAS,GAAA,GAAM,MAAA,GAAY,KAAA;AAAA,MAErC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAO,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,2BAA2B,CAAA,EAAE;AAAA;AAAA,GAC9D;AAEJ;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/Line/Line.mjs CHANGED Viewed

@@ -22,6 +22,7 @@ const Line = (props) => {
     }
   );
 };
+const TypedLine = () => Line;
-export { Line };
+export { Line, TypedLine };
 //# sourceMappingURL=Line.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Line.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/Line/Line.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\nexport interface LineProps extends Pick<\n Recharts.LineProps,\n \"className\" \| \"~~dataKey\" \| \"~~key\" \| \"xAxisId\" \| \"yAxisId\" \| \"type\" \| \"unit\"\n> {\n /** The color of the line. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Line\n {...rest}\n fill={color}\n activeDot={<AreaDot color={color} />}\n dot={false}\n stroke={color}\n strokeWidth={tokens.line[\"border-width\"].value}\n />\n );\n};\n\nexport default Line;\n"],"names":[],"mappings":";;;;;;;~~AAgBO~~,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM,EAAE,KAAA,EAAO,cAAA,GAAiB,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAEzD,EAAA,MAAM,QAAQ,kBAAA,CAAmB,cAAc,CAAA,GAC3C,CAAA,0BAAA,EAA6B,cAAc,CAAA,CAAA,CAAA,GAC3C,cAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,IAAA,EAAM,KAAA;AAAA,MACN,SAAA,kBAAW,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAc,CAAA;AAAA,MAClC,GAAA,EAAK,KAAA;AAAA,MACL,MAAA,EAAQ,KAAA;AAAA,MACR,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE;AAAA;AAAA,GAC3C;AAEJ;;;;"}
1	+ {"version":3,"file":"Line.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/Line/Line.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport type {\n ChartDataValue,\n DataKey,\n} from \"@/components/CartesianChart/CartesianChart\";\n\nexport interface LineProps<TData = ChartDataValue> extends Pick<\n Recharts.LineProps,\n \"className\" \| \"key\" \| \"xAxisId\" \| \"yAxisId\" \| \"type\" \| \"unit\"\n> {\n dataKey?: DataKey<TData>;\n /** The color of the line. @default \"sea-green\" /\n color?: CategoricalWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n return (\n <Recharts.Line\n {...rest}\n fill={color}\n activeDot={<AreaDot color={color} />}\n dot={false}\n stroke={color}\n strokeWidth={tokens.line[\"border-width\"].value}\n />\n );\n};\n\nexport const TypedLine = <T = ChartDataValue,>() =>\n Line as ComponentType<LineProps<T>>;\n\nexport default Line;\n"],"names":[],"mappings":";;;;;;;AAqBO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM,EAAE,KAAA,EAAO,cAAA,GAAiB,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAEzD,EAAA,MAAM,QAAQ,kBAAA,CAAmB,cAAc,CAAA,GAC3C,CAAA,0BAAA,EAA6B,cAAc,CAAA,CAAA,CAAA,GAC3C,cAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,IAAA,EAAM,KAAA;AAAA,MACN,SAAA,kBAAW,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAc,CAAA;AAAA,MAClC,GAAA,EAAK,KAAA;AAAA,MACL,MAAA,EAAQ,KAAA;AAAA,MACR,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE;AAAA;AAAA,GAC3C;AAEJ;AAEO,MAAM,YAAY,MACvB;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs CHANGED Viewed

@@ -3,6 +3,23 @@
 import { jsx } from 'react/jsx-runtime';
 import * as Recharts from 'recharts';
 import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import 'react';
+import 'clsx';
+import 'use-callback-ref';
+import '../../../../views/DivView.mjs';
+import '../../../../lib/tokens/CategoricalColors.mjs';
+import '../../../Text/Text.mjs';
+import '@mittwald/react-use-promise';
+import '../../../Heading/Heading.mjs';
+import '../../../../views/SkeletonTextView.mjs';
+import '../../../ProgressBar/ProgressBar.mjs';
+import '../../../Label/Label.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
+import 'react-aria';
+import '../../../../views/LoadingSpinnerView.mjs';
 const XAxis = (props) => {
   return /* @__PURE__ */ jsx(

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

	@@ -1 +1 @@
1	- {"version":3,"file":"XAxis.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/XAxis/XAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type XAxisProps = Pick<\n Recharts.XAxisProps,\n \| \"className\"\n \| \"~~dataKey\"\n \| \"~~orientation\"\n \| \"allowDecimals\"\n \| \"allowDataOverflow\"\n \| \"interval\"\n \| \"minTickGap\"\n \| \"scale\"\n \| \"type\"\n \| \"domain\"\n \| \"hide\"\n \| \"unit\"\n \| \"tickFormatter~~\"\~~n~~>;\~~n\n/** @flr-generate all */\nexport const XAxis: FC<XAxisProps> = (props) => {\n return (\n <Recharts.XAxis\n {...props}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"text-color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport default XAxis;\n"],"names":[],"mappings":"~~;;;;AAsBO~~,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAA,EAAU,MAAA,CAAO,IAAA,CAAK,WAAW,CAAA,CAAE,KAAA;AAAA,MACnC,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,CAAK,YAAY,CAAA,CAAE;AAAA,OAClC;AAAA,MACA,UAAA,EAAY,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}
1	+ {"version":3,"file":"XAxis.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/XAxis/XAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/CartesianChart\";\n\nexport type XAxisProps<\n TData = ChartDataValue,\n TDataKey extends DataKey<TData> = DataKey<TData>,\n TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n Recharts.XAxisProps,\n \| \"className\"\n \| \"orientation\"\n \| \"allowDecimals\"\n \| \"allowDataOverflow\"\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\n/** @flr-generate all */\nexport const XAxis: FC<XAxisProps> = (props) => {\n return (\n <Recharts.XAxis\n {...props}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"text-color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport { TypedXAxis } from \"./types\";\n\nexport default XAxis;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAA,EAAU,MAAA,CAAO,IAAA,CAAK,WAAW,CAAA,CAAE,KAAA;AAAA,MACnC,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,CAAK,YAAY,CAAA,CAAE;AAAA,OAClC;AAAA,MACA,UAAA,EAAY,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}

package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/types.mjs ADDED Viewed

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import 'react/jsx-runtime';
+import 'recharts';
+import 'react';
+import 'clsx';
+import 'use-callback-ref';
+import '../../../../views/DivView.mjs';
+import '../../../../lib/tokens/CategoricalColors.mjs';
+import '../../../Text/Text.mjs';
+import '@mittwald/react-use-promise';
+import '../../../Heading/Heading.mjs';
+import '../../../../views/SkeletonTextView.mjs';
+import '../../../ProgressBar/ProgressBar.mjs';
+import '../../../Label/Label.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
+import 'react-aria';
+import '../../../../views/LoadingSpinnerView.mjs';
+import { XAxis } from './XAxis.mjs';
+const TypedXAxis = () => XAxis;
+export { TypedXAxis };
+//# sourceMappingURL=types.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/types.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"types.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/XAxis/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type {\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/CartesianChart\";\n\nimport { XAxis, type XAxisProps } from \"@/components/CartesianChart\";\n\nexport const TypedXAxis = <TData>() =>\n XAxis as <\n const TProp extends DataKey<TData>,\n TMatcherValue = DataKeyValue<TData, TProp>,\n >(\n props: XAxisProps<TData, TProp, TMatcherValue>,\n ) => ReactNode;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,aAAa,MACxB;;;;"}

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

@@ -3,6 +3,23 @@
 import { jsx } from 'react/jsx-runtime';
 import * as Recharts from 'recharts';
 import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import 'react';
+import 'clsx';
+import 'use-callback-ref';
+import '../../../../views/DivView.mjs';
+import '../../../../lib/tokens/CategoricalColors.mjs';
+import '../../../Text/Text.mjs';
+import '@mittwald/react-use-promise';
+import '../../../Heading/Heading.mjs';
+import '../../../../views/SkeletonTextView.mjs';
+import '../../../ProgressBar/ProgressBar.mjs';
+import '../../../Label/Label.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
+import 'react-aria';
+import '../../../../views/LoadingSpinnerView.mjs';
 const YAxis = (props) => {
   const { domain, ...rest } = props;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"YAxis.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type YAxisProps = Pick<\n Recharts.YAxisProps,\n \| \"className\"\n \| \"~~dataKey\"\n \| \"~~orientation\"\n \| \"allowDecimals\"\n \| \"interval\"\n \| \"minTickGap\"\n \| \"scale\"\n \| \"type\"\n \| \"domain\"\n \| \"hide\"\n \| \"unit\"\n \| \"tickFormatter~~\"\~~n~~>;\~~n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain, ...rest } = props;\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"text-color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport default YAxis;\n"],"names":[],"mappings":"~~;;;;AAqBO~~,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,IAAA,EAAK,GAAI,KAAA;AAE5B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAiB,IAAA;AAAA,MACjB,MAAA;AAAA,MACA,QAAA,EAAU,MAAA,CAAO,IAAA,CAAK,WAAW,CAAA,CAAE,KAAA;AAAA,MACnC,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,CAAK,YAAY,CAAA,CAAE;AAAA,OAClC;AAAA,MACA,UAAA,EAAY,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}
1	+ {"version":3,"file":"YAxis.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/CartesianChart\";\n\nexport type YAxisProps<\n TData = 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\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain, ...rest } = props;\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"text-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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,IAAA,EAAK,GAAI,KAAA;AAE5B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAiB,IAAA;AAAA,MACjB,MAAA;AAAA,MACA,QAAA,EAAU,MAAA,CAAO,IAAA,CAAK,WAAW,CAAA,CAAE,KAAA;AAAA,MACnC,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,CAAK,YAAY,CAAA,CAAE;AAAA,OAClC;AAAA,MACA,UAAA,EAAY,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}