npm - @mittwald/flow-react-components - Versions diffs - 0.2.0-alpha.611 → 0.2.0-alpha.613 - Mend

@mittwald/flow-react-components 0.2.0-alpha.611 → 0.2.0-alpha.613

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 (55) hide show

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

@@ -31,6 +31,7 @@ import '../../lib/controller/overlay/context.mjs';
 import 'remeda';
 import '@react-aria/utils';
 import 'dot-prop';
+import '../../lib/tokens/CategoricalColors.mjs';
 import '../Heading/Heading.mjs';
 import '../Text/Text.mjs';
 import { CartesianGrid } from './components/CartesianGrid/CartesianGrid.mjs';

package/dist/js/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 * as Recharts from \"recharts\";\nimport React, {\n Children,\n useEffect,\n useRef,\n useState,\n type ComponentProps,\n type FC,\n type PropsWithChildren,\n type ReactElement,\n type SVGProps,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport Wrap from \"../Wrap\";\nimport { CartesianGrid } from \"../public\";\n\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof Recharts.ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n extends Pick<\n ComponentProps<typeof Recharts.ComposedChart>,\n \"data\" \| \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n height?: string;\n /** View that is provided when data is empty/undefined /\n emptyView?: React.ComponentType<CartesianChartEmptyViewProps>;\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: EmptyView,\n ...rest\n } = props;\n const rootClassName = clsx(styles.cartesianChart, className);\n\n const otherChildren: ReactElement[] = [];\n const gridChildren: ReactElement[] = [];\n\n Children.forEach(children, (child) => {\n if (!child) return;\n const element = child as ReactElement;\n\n if (element.type === CartesianGrid) {\n gridChildren.push(element);\n } else {\n otherChildren.push(element);\n }\n });\n\n const showEmptyView = (!data \|\| data.length === 0) && EmptyView;\n\n const chartContainerRef = useRef<HTMLDivElement>(null);\n const [viewDimensions, setViewDimensions] = useState<Partial<\n SVGProps<SVGForeignObjectElement>\n > \| null>(null);\n\n // resizing the foreignObject for the EmptyView on size changes\n useEffect(() => {\n if (showEmptyView) {\n const updateDimensions = () => {\n const svg = chartContainerRef.current?.querySelector(\n \"svg\",\n ) as SVGSVGElement \| null;\n if (!svg) return;\n\n const clip = svg.querySelector(\"clipPath rect\");\n if (clip) {\n const x = parseFloat(clip.getAttribute(\"x\") ?? \"0\");\n const y = parseFloat(clip.getAttribute(\"y\") ?? \"0\");\n const width = parseFloat(clip.getAttribute(\"width\") ?? \"0\");\n const height = parseFloat(clip.getAttribute(\"height\") ?? \"0\");\n setViewDimensions({ x, y, width, height });\n }\n };\n\n updateDimensions();\n\n const container = chartContainerRef.current;\n const observer = new ResizeObserver(updateDimensions);\n if (container) observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }\n }, [showEmptyView]);\n\n return (\n <Wrap if={height}>\n <div\n style={{ height, flex: flexGrow ? 1 : undefined }}\n ref={chartContainerRef}\n >\n <Recharts.ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n >\n <Recharts.ComposedChart\n data={data}\n className={rootClassName}\n {...rest}\n >\n {!showEmptyView && gridChildren}\n {otherChildren}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <div className={styles.emptyViewContainer}>\n <EmptyView data={data} />\n </div>\n </foreignObject>\n )}\n </Recharts.ComposedChart>\n </Recharts.ResponsiveContainer>\n </div>\n </Wrap>\n );\n};\n\nexport default CartesianChart;\n"],"names":["height"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport React, {\n Children,\n useEffect,\n useRef,\n useState,\n type ComponentProps,\n type FC,\n type PropsWithChildren,\n type ReactElement,\n type SVGProps,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport Wrap from \"../Wrap\";\nimport { CartesianGrid } from \"../public\";\n\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof Recharts.ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n extends Pick<\n ComponentProps<typeof Recharts.ComposedChart>,\n \"data\" \| \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n height?: string;\n /** View that is provided when data is empty/undefined /\n emptyView?: React.ComponentType<CartesianChartEmptyViewProps>;\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: EmptyView,\n ...rest\n } = props;\n const rootClassName = clsx(styles.cartesianChart, className);\n\n const otherChildren: ReactElement[] = [];\n const gridChildren: ReactElement[] = [];\n\n Children.forEach(children, (child) => {\n if (!child) return;\n const element = child as ReactElement;\n\n if (element.type === CartesianGrid) {\n gridChildren.push(element);\n } else {\n otherChildren.push(element);\n }\n });\n\n const showEmptyView = (!data \|\| data.length === 0) && EmptyView;\n\n const chartContainerRef = useRef<HTMLDivElement>(null);\n const [viewDimensions, setViewDimensions] = useState<Partial<\n SVGProps<SVGForeignObjectElement>\n > \| null>(null);\n\n // resizing the foreignObject for the EmptyView on size changes\n useEffect(() => {\n if (showEmptyView) {\n const updateDimensions = () => {\n const svg = chartContainerRef.current?.querySelector(\n \"svg\",\n ) as SVGSVGElement \| null;\n if (!svg) return;\n\n const clip = svg.querySelector(\"clipPath rect\");\n if (clip) {\n const x = parseFloat(clip.getAttribute(\"x\") ?? \"0\");\n const y = parseFloat(clip.getAttribute(\"y\") ?? \"0\");\n const width = parseFloat(clip.getAttribute(\"width\") ?? \"0\");\n const height = parseFloat(clip.getAttribute(\"height\") ?? \"0\");\n setViewDimensions({ x, y, width, height });\n }\n };\n\n updateDimensions();\n\n const container = chartContainerRef.current;\n const observer = new ResizeObserver(updateDimensions);\n if (container) observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }\n }, [showEmptyView]);\n\n return (\n <Wrap if={height}>\n <div\n style={{ height, flex: flexGrow ? 1 : undefined }}\n ref={chartContainerRef}\n >\n <Recharts.ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n >\n <Recharts.ComposedChart\n data={data}\n className={rootClassName}\n {...rest}\n >\n {!showEmptyView && gridChildren}\n {otherChildren}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <div className={styles.emptyViewContainer}>\n <EmptyView data={data} />\n </div>\n </foreignObject>\n )}\n </Recharts.ComposedChart>\n </Recharts.ResponsiveContainer>\n </div>\n </Wrap>\n );\n};\n\nexport default CartesianChart;\n"],"names":["height"],"mappings":"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"}

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

@@ -5,17 +5,24 @@ import 'react';
 import * as Recharts from 'recharts';
 import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
 import { AreaDot } from '../AreaDot/AreaDot.mjs';
+import { isCategoricalColor } from '../../../../lib/tokens/isCategoricalColor.mjs';
 const Area = (props) => {
-  const { color = "sea-green", stackId = 1, fillOpacity = 1, ...rest } = props;
+  const {
+    color: colorFromProps = "sea-green",
+    stackId = 1,
+    fillOpacity = 1,
+    ...rest
+  } = props;
+  const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
   return /* @__PURE__ */ jsx(
     Recharts.Area,
     {
       stackId,
       fillOpacity,
       ...rest,
-      activeDot: /* @__PURE__ */ jsx(AreaDot, { color: `var(--color--categorical--${color})` }),
-      fill: `var(--color--categorical--${color})`,
+      activeDot: /* @__PURE__ */ jsx(AreaDot, { color }),
+      fill: color,
       stroke: tokens.area["border-color"].value,
       strokeWidth: tokens.area["border-width"].value
     }

package/dist/js/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 { ~~CategoricalColor~~ } from \"@/lib/tokens/CategoricalColors\";\n\nexport interface AreaProps\n 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?: ~~CategoricalColor~~;\n}\n\n/* @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const { color = \"sea-green\", stackId = 1, fillOpacity = 1, ...rest } = props;\n\n return (\n <Recharts.Area\n stackId={stackId}\n fillOpacity={fillOpacity}\n {...rest}\n activeDot={<AreaDot color={~~`var(--~~color~~--categorical--${color~~}~~)`}~~ />}\n fill={~~`var(--~~color~~--categorical--${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,~~EAAE~~,~~QAAQ~~,WAAA,~~EAAa~~,OAAA,GAAU,~~GAAG~~,WAAA,GAAc,CAAA,~~EAAG~~,GAAG,~~IAAA~~,~~EAAK,~~GAAI,KAAA;~~AAEvE~~,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,~~2BAAW~~,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,~~EAAO~~,CAAA~~,0BAAA,EAA6B,KAAK,CAAA,CAAA,CAAA,EAAK,CAAA~~;AAAA,~~MAClE~~,IAAA,EAAM,~~6BAA6B,KAAK,CAAA,CAAA,CAAA~~;AAAA,~~MACxC~~,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 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\n 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":";;;;;;;AAyBO,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;;;;"}

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

@@ -9,14 +9,9 @@ const LegendContent = (props) => {
   return /* @__PURE__ */ jsx(Legend, { children: payload?.filter(
     (entry) => entry.payload && "fill" in entry.payload && entry.payload?.fill !== "none"
   ).map((entry, index) => {
-    return /* @__PURE__ */ jsx(
-      LegendItem,
-      {
-        color: entry.payload && "fill" in entry.payload && typeof entry.payload.fill === "string" ? entry.payload?.fill.replace("var(--color--categorical--", "").replace(")", "") : void 0,
-        children: entry.dataKey ? formatter ? formatter(entry.dataKey?.toString()) : entry.dataKey.toString() : ""
-      },
-      `legendItem-${index}`
-    );
+    const { payload: payload2, dataKey } = entry;
+    const fill = payload2 && "fill" in payload2 && typeof payload2.fill === "string" ? payload2.fill : void 0;
+    return /* @__PURE__ */ jsx(LegendItem, { color: fill, children: dataKey ? formatter ? formatter(dataKey?.toString()) : dataKey.toString() : "" }, `legendItem-${index}`);
   }) });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LegendContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartLegend/LegendContent.tsx"],"sourcesContent":["import type { Props } from \"recharts/types/component/DefaultLegendContent\";\nimport type { WithChartLegendFormatters } from \"./ChartLegend\";\nimport type { FC } from \"react\";\nimport Legend, { LegendItem } from \"@/components/Legend\";\~~nimport type { CategoricalColor } from \"@/lib/tokens/CategoricalColors\";\~~n\ntype LegendContentType = Omit<Props, \"formatter\"> & WithChartLegendFormatters;\n\nconst LegendContent: FC<LegendContentType> = (props) => {\n const { formatter, payload } = props;\n\n return (\n <Legend>\n {payload\n ?.filter(\n (entry) =>\n entry.payload &&\n \"fill\" in entry.payload &&\n entry.payload?.fill !== \"none\",\n )\n .map((entry, index) => {\n ~~return~~ ~~(\n <LegendItem\n key=~~{~~`legendItem-${index~~}~~`}\n color~~={\n ~~entry.~~payload ~~&&\n~~ \"fill\" in ~~entry.~~payload ~~&&\n~~ typeof ~~entry.~~payload.fill === \"string\"\n ? ~~(entry~~.~~payload?.~~fill\n ~~.replace(\"var(--color--categorical--\",~~ \~~"\")\~~n ~~.replace~~(\~~")\", \"\") as CategoricalColor)\~~n : ~~undefined\n~~ }\n >\n {~~entry.~~dataKey\n ? formatter\n ? formatter(~~entry.~~dataKey?.toString())\n : ~~entry.~~dataKey.toString()\n : \"\"}\n </LegendItem>\n );\n })}\n </Legend>\n );\n};\n\nexport default LegendContent;\n"],"names":[],"mappings":";;;;~~AAQA~~,MAAM,aAAA,GAAuC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAQ,GAAI,KAAA;AAE/B,EAAA,uBACE,GAAA,CAAC,UACE,QAAA,EAAA,OAAA,EACG,MAAA;AAAA,IACA,CAAC,UACC,KAAA,CAAM,OAAA,IACN,UAAU,KAAA,CAAM,OAAA,IAChB,KAAA,CAAM,OAAA,EAAS,IAAA,KAAS;AAAA,GAC5B,CACC,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AACrB,IAAA,~~uBACE~~,~~GAAA;AAAA~~,~~MAAC~~,~~UAAA;AAAA~~,~~MAAA;AAAA~~,~~QAEC~~,KAAA,~~EACE~~,MAAM,~~OAAA~~,~~IACN~~,MAAA,~~IAAU~~,~~MAAM~~,~~OAAA~~,~~IAChB~~,~~OAAO~~,~~MAAM,OAAA,~~CAAQ,IAAA,KAAS,~~WACzB~~,~~KAAA~~,~~CAAM~~,~~OAAA,EAAS,KACb,OAAA,~~CAAQ,~~4BAAA~~,~~EAA8B~~,~~EAAE~~,~~CAAA~~,~~CACxC~~,~~OAAA~~,~~CAAQ~~,~~GAAA~~,~~EAAK~~,~~EAAE~~,~~CAAA~~,~~GAClB~~,~~MAAA;AAAA,QAGL,~~QAAA,EAAA,~~KAAA,CAAM,~~OAAA,~~GACH~~,~~SAAA~~,~~GACE,~~SAAA,CAAU,~~KAAA,CAAM,~~OAAA,EAAS,QAAA,EAAU,~~CAAA~~,~~GACnC,KAAA,CAAM,~~OAAA,CAAQ,QAAA,~~EAAS~~,~~GACzB;AAAA~~,~~OAAA;AAAA~~,~~MAfC~~,~~cAAc~~,KAAK,CAAA~~;AAAA~~,~~KAgB1B~~;AAAA,EAEJ,CAAC,CAAA,EACL,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"LegendContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartLegend/LegendContent.tsx"],"sourcesContent":["import type { Props } from \"recharts/types/component/DefaultLegendContent\";\nimport type { WithChartLegendFormatters } from \"./ChartLegend\";\nimport type { FC } from \"react\";\nimport Legend, { LegendItem } from \"@/components/Legend\";\n\ntype LegendContentType = Omit<Props, \"formatter\"> & WithChartLegendFormatters;\n\nconst LegendContent: FC<LegendContentType> = (props) => {\n const { formatter, payload } = props;\n\n return (\n <Legend>\n {payload\n ?.filter(\n (entry) =>\n entry.payload &&\n \"fill\" in entry.payload &&\n entry.payload?.fill !== \"none\",\n )\n .map((entry, index) => {\n const { payload, dataKey } = entry;\n const fill =\n payload && \"fill\" in payload && typeof payload.fill === \"string\"\n ? payload.fill\n : undefined;\n\n return (\n <LegendItem key={`legendItem-${index}`} color={fill}>\n {dataKey\n ? formatter\n ? formatter(dataKey?.toString())\n : dataKey.toString()\n : \"\"}\n </LegendItem>\n );\n })}\n </Legend>\n );\n};\n\nexport default LegendContent;\n"],"names":["payload"],"mappings":";;;;AAOA,MAAM,aAAA,GAAuC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAQ,GAAI,KAAA;AAE/B,EAAA,uBACE,GAAA,CAAC,UACE,QAAA,EAAA,OAAA,EACG,MAAA;AAAA,IACA,CAAC,UACC,KAAA,CAAM,OAAA,IACN,UAAU,KAAA,CAAM,OAAA,IAChB,KAAA,CAAM,OAAA,EAAS,IAAA,KAAS;AAAA,GAC5B,CACC,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AACrB,IAAA,MAAM,EAAE,OAAA,EAAAA,QAAAA,EAAS,OAAA,EAAQ,GAAI,KAAA;AAC7B,IAAA,MAAM,IAAA,GACJA,YAAW,MAAA,IAAUA,QAAAA,IAAW,OAAOA,QAAAA,CAAQ,IAAA,KAAS,QAAA,GACpDA,QAAAA,CAAQ,IAAA,GACR,MAAA;AAEN,IAAA,2BACG,UAAA,EAAA,EAAuC,KAAA,EAAO,IAAA,EAC5C,QAAA,EAAA,OAAA,GACG,YACE,SAAA,CAAU,OAAA,EAAS,QAAA,EAAU,IAC7B,OAAA,CAAQ,QAAA,KACV,EAAA,EAAA,EALW,CAAA,WAAA,EAAc,KAAK,CAAA,CAMpC,CAAA;AAAA,EAEJ,CAAC,CAAA,EACL,CAAA;AAEJ;;;;"}

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

@@ -19,14 +19,7 @@ const TooltipContent = (props) => {
   if (active && payload && payload.length) {
     return /* @__PURE__ */ jsxs("div", { className, children: [
       /* @__PURE__ */ jsx(Heading, { level: 4, children: headingFormatter ? headingFormatter(label) : label }),
-      payload.filter((i) => i.fill !== "none").map((i, index) => /* @__PURE__ */ jsx(
-        LegendItem,
-        {
-          color: i.fill.replace("var(--color--categorical--", "").replace(")", ""),
-          children: formatter ? formatter(i.value, i.dataKey, index, i.unit) : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : ""}`
-        },
-        i.dataKey
-      ))
+      payload.filter((i) => i.fill !== "none").map((i, index) => /* @__PURE__ */ jsx(LegendItem, { color: i.fill, children: formatter ? formatter(i.value, i.dataKey, index, i.unit) : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : ""}` }, i.dataKey))
     ] });
   }
   return null;

package/dist/js/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 clsx from \"clsx\";\nimport Heading from \"@/components/Heading\";\nimport { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type * as Recharts from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport styles from \"./ChartTooltip.module.scss\";\n\ninterface TooltipContentProps\n extends Pick<\n Recharts.TooltipContentProps<ValueType, NameType>,\n \"active\" \| \"payload\" \| \"label\" \| \"wrapperClassName\"\n >,\n WithTooltipFormatters {}\n\nexport const TooltipContent = (props: TooltipContentProps) => {\n const {\n active,\n payload,\n formatter,\n headingFormatter,\n label,\n wrapperClassName,\n } = props;\n const className = clsx(wrapperClassName, styles.tooltip);\n\n if (active && payload && payload.length) {\n return (\n <div className={className}>\n <Heading level={4}>\n {headingFormatter ? headingFormatter(label) : label}\n </Heading>\n {payload\n .filter((i) => i.fill !== \"none\")\n .map((i, index) => (\n <LegendItem\n color={i.fill~~\n .replace(\"var(--color--categorical--\",~~ ~~\"\")\n .replace(\")\", \"\")}\n~~ key={i.dataKey}\n >\n {formatter\n ? formatter(i.value, i.dataKey, index, i.unit)\n : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : \"\"}`}\n </LegendItem>\n ))}\n </div>\n );\n }\n\n return null;\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,gBAAA,EAAkB,MAAA,CAAO,OAAO,CAAA;AAEvD,EAAA,IAAI,MAAA,IAAU,OAAA,IAAW,OAAA,CAAQ,MAAA,EAAQ;AACvC,IAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EACH,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAQ,KAAA,EAAO,CAAA,EACb,6BAAmB,gBAAA,CAAiB,KAAK,IAAI,KAAA,EAChD,CAAA;AAAA,MACC,OAAA,CACE,~~MAAA~~,~~CAAO,~~CAAC,CAAA,KAAM,~~CAAA~~,~~CAAE,~~IAAA,KAAS,MAAM,~~CAAA,CAC~~/B,GAAA,CAAI,CAAC,~~CAAA~~,~~EAAG,~~KAAA,qBACP,GAAA~~;AAAA~~,~~QAAC~~,~~UAAA;AAAA~~,~~QAAA;AAAA,UACC,~~KAAA,EAAO,~~EAAE,IAAA,CACN,OAAA,CAAQ,8BAA8B,EAAE,~~CAAA,~~CACxC~~,~~OAAA~~,~~CAAQ,GAAA,EAAK,EAAE,CAAA;AAAA,UAGjB,~~QAAA,EAAA,SAAA,GACG,~~UAAU~~,~~CAAA~~,~~CAAE~~,KAAA,EAAO,~~EAAE~~,~~OAAA~~,~~EAAS~~,KAAA,EAAO,CAAA,CAAE,IAAI,CAAA,GAC3C,CAAA,EAAG,EAAE,OAAO,CAAA,EAAA,EAAK,~~CAAA~~,~~CAAE,~~KAAK,CAAA,CAAA,EAAI,~~CAAA~~,~~CAAE~~,~~OAAO~~,CAAA,CAAA,EAAI,~~CAAA~~,~~CAAE,~~IAAI,CAAA,CAAA,GAAK,EAAE,CAAA~~;AAAA~~,~~SAAA;AAAA~~,~~QAJrD~~,CAAA,CAAE~~;AAAA~~,~~OAMV~~;AAAA,KAAA,EACL,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA;AACT;;;;"}
1	+ {"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport Heading from \"@/components/Heading\";\nimport { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type * as Recharts from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport styles from \"./ChartTooltip.module.scss\";\n\ninterface TooltipContentProps\n extends Pick<\n Recharts.TooltipContentProps<ValueType, NameType>,\n \"active\" \| \"payload\" \| \"label\" \| \"wrapperClassName\"\n >,\n WithTooltipFormatters {}\n\nexport const TooltipContent = (props: TooltipContentProps) => {\n const {\n active,\n payload,\n formatter,\n headingFormatter,\n label,\n wrapperClassName,\n } = props;\n const className = clsx(wrapperClassName, styles.tooltip);\n\n if (active && payload && payload.length) {\n return (\n <div className={className}>\n <Heading level={4}>\n {headingFormatter ? headingFormatter(label) : label}\n </Heading>\n {payload\n .filter((i) => i.fill !== \"none\")\n .map((i, index) => (\n <LegendItem color={i.fill} key={i.dataKey}>\n {formatter\n ? formatter(i.value, i.dataKey, index, i.unit)\n : `${i.dataKey}: ${i.value} ${i.unit ? ` ${i.unit}` : \"\"}`}\n </LegendItem>\n ))}\n </div>\n );\n }\n\n return null;\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,gBAAA,EAAkB,MAAA,CAAO,OAAO,CAAA;AAEvD,EAAA,IAAI,MAAA,IAAU,OAAA,IAAW,OAAA,CAAQ,MAAA,EAAQ;AACvC,IAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EACH,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAQ,KAAA,EAAO,CAAA,EACb,6BAAmB,gBAAA,CAAiB,KAAK,IAAI,KAAA,EAChD,CAAA;AAAA,MACC,OAAA,CACE,OAAO,CAAC,CAAA,KAAM,EAAE,IAAA,KAAS,MAAM,EAC/B,GAAA,CAAI,CAAC,GAAG,KAAA,qBACP,GAAA,CAAC,cAAW,KAAA,EAAO,CAAA,CAAE,MAClB,QAAA,EAAA,SAAA,GACG,SAAA,CAAU,EAAE,KAAA,EAAO,CAAA,CAAE,SAAS,KAAA,EAAO,CAAA,CAAE,IAAI,CAAA,GAC3C,CAAA,EAAG,EAAE,OAAO,CAAA,EAAA,EAAK,EAAE,KAAK,CAAA,CAAA,EAAI,EAAE,IAAA,GAAO,CAAA,CAAA,EAAI,EAAE,IAAI,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA,EAAA,EAH5B,CAAA,CAAE,OAIlC,CACD;AAAA,KAAA,EACL,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,IAAA;AACT;;;;"}

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

@@ -5,17 +5,19 @@ import 'react';
 import * as Recharts from 'recharts';
 import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
 import { AreaDot } from '../AreaDot/AreaDot.mjs';
+import { isCategoricalColor } from '../../../../lib/tokens/isCategoricalColor.mjs';
 const Line = (props) => {
-  const { color = "sea-green", ...rest } = props;
+  const { color: colorFromProps = "sea-green", ...rest } = props;
+  const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
   return /* @__PURE__ */ jsx(
     Recharts.Line,
     {
       ...rest,
-      fill: `var(--color--categorical--${color})`,
-      activeDot: /* @__PURE__ */ jsx(AreaDot, { color: `var(--color--categorical--${color})` }),
+      fill: color,
+      activeDot: /* @__PURE__ */ jsx(AreaDot, { color }),
       dot: false,
-      stroke: `var(--color--categorical--${color})`,
+      stroke: color,
       strokeWidth: tokens.line["border-width"].value
     }
   );

package/dist/js/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 { ~~CategoricalColor~~ } from \"@/lib/tokens/CategoricalColors\";\n\nexport interface LineProps\n 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?: ~~CategoricalColor~~;\n}\n\n/* @flr-generate all */\nexport const Line: FC<LineProps> = (props) => {\n const { color = \"sea-green\", ...rest } = props;\n\n return (\n <Recharts.Line\n {...rest}\n fill={~~`var(--~~color~~--categorical--${color~~}~~)`}~~\n activeDot={<AreaDot color={~~`var(--~~color~~--categorical--${color~~}~~)`}~~ />}\n dot={false}\n stroke={~~`var(--~~color~~--categorical--${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,~~GAAQ~~,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;~~AAEzC~~,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,IAAA,EAAM,~~6BAA6B,KAAK,CAAA,CAAA,CAAA~~;AAAA,~~MACxC~~,~~2BAAW~~,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,~~EAAO~~,CAAA~~,0BAAA,EAA6B,KAAK,CAAA,CAAA,CAAA,EAAK,CAAA~~;AAAA,~~MAClE~~,GAAA,EAAK,KAAA;AAAA,MACL,MAAA,EAAQ,~~6BAA6B,KAAK,CAAA,CAAA,CAAA~~;AAAA,~~MAC1C~~,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 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\n 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":";;;;;;;AAiBO,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;;;;"}

package/dist/js/components/src/components/Color/Color.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Color.mjs","sources":["../../../../../../src/components/Color/Color.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Color.module.scss\";\n\nconst flowColors = [\n \"blue\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"danger\",\n \"warning\",\n \"info\",\n \"success\",\n] as const;\n\ntype FlowColor = (typeof flowColors)[number];\n\nfunction isFlowColor(something: unknown): something is FlowColor {\n const anyFlowColors = flowColors as readonly string[];\n return typeof something === \"string\" && anyFlowColors.includes(something);\n}\n\nexport interface ColorProps extends PropsWithChildren {\n /** The color of the element. @default \"blue\" /\n color?: ~~FlowColor \| (string & {})~~;\n}\n\n/* @flr-generate all */\nexport const Color: FC<ColorProps> = (props) => {\n const { children, color = \"blue\" } = props;\n\n const isAFlowColor = isFlowColor(color);\n const className = isAFlowColor ? styles[color] : undefined;\n const style = !isAFlowColor ? { color } : undefined;\n\n return (\n <span className={className} style={style}>\n {children}\n </span>\n );\n};\n\nexport default Color;\n"],"names":[],"mappings":";;;AAGA,MAAM,UAAA,GAAa;AAAA,EACjB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA;~~AAIA~~,SAAS,YAAY,SAAA,EAA4C;AAC/D,EAAA,MAAM,aAAA,GAAgB,UAAA;AACtB,EAAA,OAAO,OAAO,SAAA,KAAc,QAAA,IAAY,aAAA,CAAc,SAAS,SAAS,CAAA;AAC1E;AAQO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,GAAQ,MAAA,EAAO,GAAI,KAAA;AAErC,EAAA,MAAM,YAAA,GAAe,YAAY,KAAK,CAAA;AACtC,EAAA,MAAM,SAAA,GAAY,YAAA,GAAe,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA;AACjD,EAAA,MAAM,KAAA,GAAQ,CAAC,YAAA,GAAe,EAAE,OAAM,GAAI,MAAA;AAE1C,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAsB,KAAA,EACzB,QAAA,EACH,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Color.mjs","sources":["../../../../../../src/components/Color/Color.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Color.module.scss\";\n\nconst flowColors = [\n \"blue\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"danger\",\n \"warning\",\n \"info\",\n \"success\",\n] as const;\n\ntype FlowColor = (typeof flowColors)[number];\ntype FlowWithCustomColor = FlowColor \| (string & {});\n\nfunction isFlowColor(something: unknown): something is FlowColor {\n const anyFlowColors = flowColors as readonly string[];\n return typeof something === \"string\" && anyFlowColors.includes(something);\n}\n\nexport interface ColorProps extends PropsWithChildren {\n /** The color of the element. @default \"blue\" /\n color?: FlowWithCustomColor;\n}\n\n/* @flr-generate all */\nexport const Color: FC<ColorProps> = (props) => {\n const { children, color = \"blue\" } = props;\n\n const isAFlowColor = isFlowColor(color);\n const className = isAFlowColor ? styles[color] : undefined;\n const style = !isAFlowColor ? { color } : undefined;\n\n return (\n <span className={className} style={style}>\n {children}\n </span>\n );\n};\n\nexport default Color;\n"],"names":[],"mappings":";;;AAGA,MAAM,UAAA,GAAa;AAAA,EACjB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA;AAKA,SAAS,YAAY,SAAA,EAA4C;AAC/D,EAAA,MAAM,aAAA,GAAgB,UAAA;AACtB,EAAA,OAAO,OAAO,SAAA,KAAc,QAAA,IAAY,aAAA,CAAc,SAAS,SAAS,CAAA;AAC1E;AAQO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,GAAQ,MAAA,EAAO,GAAI,KAAA;AAErC,EAAA,MAAM,YAAA,GAAe,YAAY,KAAK,CAAA;AACtC,EAAA,MAAM,SAAA,GAAY,YAAA,GAAe,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA;AACjD,EAAA,MAAM,KAAA,GAAQ,CAAC,YAAA,GAAe,EAAE,OAAM,GAAI,MAAA;AAE1C,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAsB,KAAA,EACzB,QAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/DonutChart/DonutChart.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.mjs","sources":["../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport type { ~~CategoricalColor~~ } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\n\nexport interface DonutChartSegment {\n value: number;\n title: string;\n color?: ~~CategoricalColor~~;\n valueText?: string;\n}\n\nexport interface DonutChartProps\n extends Omit<Aria.ProgressBarProps, \"children\" \| \"valueLabel\">,\n PropsWithStatus,\n PropsWithChildren {\n /** The size variant of the donut chart. @default \"m\" /\n size?: \"m\" \| \"l\";\n /* Divides the fill of the donut chart into segments /\n segments?: DonutChartSegment[];\n /\n Whether the legend component is shown when segments are used. @default:\n * true\n /\n showLegend?: boolean;\n /* The position of the legend. @default \"right\" /\n legendPosition?: \"top\" \| \"left\" \| \"bottom\" \| \"right\";\n}\n\n/* @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n const {\n size = \"m\",\n status = \"info\",\n className,\n value,\n segments,\n maxValue,\n formatOptions,\n showLegend = true,\n legendPosition = \"right\",\n children,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.donutChart,\n size === \"l\" && styles[\"size-l\"],\n styles[status],\n className,\n );\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <Wrap if={showLegend && segments}>\n <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n {...rest}\n >\n <Donut\n value={segmentsTotalValue ?? value}\n segments={segments}\n size={size}\n maxValue={maxValue}\n />\n <DonutChartValue\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n >\n {children}\n </DonutChartValue>\n </Aria.ProgressBar>\n\n {showLegend && segments && (\n <DonutChartLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n )}\n </div>\n </Wrap>\n );\n};\n\nexport default DonutChart;\n"],"names":[],"mappings":";;;;;;;;;AAoCO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM;AAAA,IACJ,IAAA,GAAO,GAAA;AAAA,IACP,MAAA,GAAS,MAAA;AAAA,IACT,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA,GAAa,IAAA;AAAA,IACb,cAAA,GAAiB,OAAA;AAAA,IACjB,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,IAAA,KAAS,GAAA,IAAO,MAAA,CAAO,QAAQ,CAAA;AAAA,IAC/B,OAAO,MAAM,CAAA;AAAA,IACb;AAAA,GACF;AAEA,EAAA,MAAM,qBAAqB,QAAA,GACvB,QAAA,CAAS,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,KAAK,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAC,CAAA,GACtD,MAAA;AAEJ,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,UAAA,IAAc,UACtB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,mBAAA,EAAqB,MAAA,CAAO,cAAc,CAAC,CAAA,EACrE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,IAAA,CAAK,WAAA;AAAA,MAAL;AAAA,QACC,SAAA,EAAW,aAAA;AAAA,QACX,OAAO,kBAAA,IAAsB,KAAA;AAAA,QAC5B,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,OAAO,kBAAA,IAAsB,KAAA;AAAA,cAC7B,QAAA;AAAA,cACA,IAAA;AAAA,cACA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,OAAO,kBAAA,IAAsB,KAAA;AAAA,cAC7B,aAAA;AAAA,cAEC;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,IAEC,cAAc,QAAA,oBACb,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"DonutChart.mjs","sources":["../../../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./DonutChart.module.scss\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { DonutChartValue } from \"@/components/DonutChart/components/DonutChartValue\";\nimport { Donut } from \"@/components/DonutChart/components/Donut\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { DonutChartLegend } from \"@/components/DonutChart/components/DonutChartLegend\";\n\nexport interface DonutChartSegment {\n value: number;\n title: string;\n color?: CategoricalWithCustomColor;\n valueText?: string;\n}\n\nexport interface DonutChartProps\n extends Omit<Aria.ProgressBarProps, \"children\" \| \"valueLabel\">,\n PropsWithStatus,\n PropsWithChildren {\n /** The size variant of the donut chart. @default \"m\" /\n size?: \"m\" \| \"l\";\n /* Divides the fill of the donut chart into segments /\n segments?: DonutChartSegment[];\n /\n Whether the legend component is shown when segments are used. @default:\n * true\n /\n showLegend?: boolean;\n /* The position of the legend. @default \"right\" /\n legendPosition?: \"top\" \| \"left\" \| \"bottom\" \| \"right\";\n}\n\n/* @flr-generate all */\nexport const DonutChart: FC<DonutChartProps> = (props) => {\n const {\n size = \"m\",\n status = \"info\",\n className,\n value,\n segments,\n maxValue,\n formatOptions,\n showLegend = true,\n legendPosition = \"right\",\n children,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.donutChart,\n size === \"l\" && styles[\"size-l\"],\n styles[status],\n className,\n );\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <Wrap if={showLegend && segments}>\n <div className={clsx(styles.donutChartContainer, styles[legendPosition])}>\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n {...rest}\n >\n <Donut\n value={segmentsTotalValue ?? value}\n segments={segments}\n size={size}\n maxValue={maxValue}\n />\n <DonutChartValue\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n >\n {children}\n </DonutChartValue>\n </Aria.ProgressBar>\n\n {showLegend && segments && (\n <DonutChartLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n )}\n </div>\n </Wrap>\n );\n};\n\nexport default DonutChart;\n"],"names":[],"mappings":";;;;;;;;;AAoCO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM;AAAA,IACJ,IAAA,GAAO,GAAA;AAAA,IACP,MAAA,GAAS,MAAA;AAAA,IACT,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA,GAAa,IAAA;AAAA,IACb,cAAA,GAAiB,OAAA;AAAA,IACjB,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,IAAA,KAAS,GAAA,IAAO,MAAA,CAAO,QAAQ,CAAA;AAAA,IAC/B,OAAO,MAAM,CAAA;AAAA,IACb;AAAA,GACF;AAEA,EAAA,MAAM,qBAAqB,QAAA,GACvB,QAAA,CAAS,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,KAAK,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAC,CAAA,GACtD,MAAA;AAEJ,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,UAAA,IAAc,UACtB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,mBAAA,EAAqB,MAAA,CAAO,cAAc,CAAC,CAAA,EACrE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,IAAA,CAAK,WAAA;AAAA,MAAL;AAAA,QACC,SAAA,EAAW,aAAA;AAAA,QACX,OAAO,kBAAA,IAAsB,KAAA;AAAA,QAC5B,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,OAAO,kBAAA,IAAsB,KAAA;AAAA,cAC7B,QAAA;AAAA,cACA,IAAA;AAAA,cACA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,OAAO,kBAAA,IAAsB,KAAA;AAAA,cAC7B,aAAA;AAAA,cAEC;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,IAEC,cAAc,QAAA,oBACb,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/DonutChart/components/DonutChartFill.mjs CHANGED Viewed

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import styles from '../DonutChart.module.scss.mjs';
 import { getCategoricalColorByIndex } from '../../../lib/tokens/getCategoricalColorByIndex.mjs';
+import { isCategoricalColor } from '../../../lib/tokens/isCategoricalColor.mjs';
 const DonutChartFill = (props) => {
   const { center, value = 0, radius, segments, maxValue } = props;
@@ -27,6 +28,7 @@ const DonutChartFill = (props) => {
     const segmentPercent = 100 / maxValue * s.value;
     const currentRotationOffset = rotationOffset;
     rotationOffset = rotationOffset + 360 / 100 * segmentPercent;
+    const color = !s.color || isCategoricalColor(s.color) ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})` : s.color;
     return /* @__PURE__ */ jsx(
       "circle",
       {
@@ -35,7 +37,7 @@ const DonutChartFill = (props) => {
         r: radius,
         strokeDasharray: `${circumference} ${circumference}`,
         strokeDashoffset: circumference - segmentPercent / 100 * circumference,
-        stroke: `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`,
+        stroke: color,
         transform: `rotate(${ -90 + currentRotationOffset} ${center} ${center})`
       },
       i

package/dist/js/components/src/components/DonutChart/components/DonutChartFill.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChartFill.mjs","sources":["../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n center: number;\n value?: number;\n radius: number;\n maxValue: number;\n}\n\nexport const DonutChartFill: FC<Props> = (props) => {\n const { center, value = 0, radius, segments, maxValue } = props;\n\n const circumference = 2 * radius * Math.PI;\n\n const percent = (100 / maxValue) * value;\n\n if (!segments) {\n return (\n <circle\n className={styles.fill}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={circumference - (percent / 100) * circumference}\n transform={`rotate(-90 ${center} ${center})`}\n />\n );\n }\n\n let rotationOffset = 0;\n\n return segments.map((s, i) => {\n const segmentPercent = (100 / maxValue) * s.value;\n\n const currentRotationOffset = rotationOffset;\n\n rotationOffset = rotationOffset + (360 / 100) * segmentPercent;\n\n return (\n <circle\n key={i}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={\n circumference - (segmentPercent / 100) * circumference\n }\n stroke={~~`var(--~~color~~--categorical--${s.color ?? getCategoricalColorByIndex(i)~~}~~)`}~~\n transform={`rotate(${-90 + currentRotationOffset} ${center} ${center})`}\n />\n );\n });\n};\n"],"names":[],"mappings":"~~;;;;AAYO~~,MAAM,cAAA,GAA4B,CAAC,KAAA,KAAU;AAClD,EAAA,MAAM,EAAE,MAAA,EAAQ,KAAA,GAAQ,GAAG,MAAA,EAAQ,QAAA,EAAU,UAAS,GAAI,KAAA;AAE1D,EAAA,MAAM,aAAA,GAAgB,CAAA,GAAI,MAAA,GAAS,IAAA,CAAK,EAAA;AAExC,EAAA,MAAM,OAAA,GAAW,MAAM,QAAA,GAAY,KAAA;AAEnC,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,EAAA,EAAI,MAAA;AAAA,QACJ,EAAA,EAAI,MAAA;AAAA,QACJ,CAAA,EAAG,MAAA;AAAA,QACH,eAAA,EAAiB,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA;AAAA,QAClD,gBAAA,EAAkB,aAAA,GAAiB,OAAA,GAAU,GAAA,GAAO,aAAA;AAAA,QACpD,SAAA,EAAW,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA;AAAA;AAAA,KAC3C;AAAA,EAEJ;AAEA,EAAA,IAAI,cAAA,GAAiB,CAAA;AAErB,EAAA,OAAO,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AAC5B,IAAA,MAAM,cAAA,GAAkB,GAAA,GAAM,QAAA,GAAY,CAAA,CAAE,KAAA;AAE5C,IAAA,MAAM,qBAAA,GAAwB,cAAA;AAE9B,IAAA,cAAA,GAAiB,cAAA,GAAkB,MAAM,GAAA,GAAO,cAAA;AAEhD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,EAAA,EAAI,MAAA;AAAA,QACJ,EAAA,EAAI,MAAA;AAAA,QACJ,CAAA,EAAG,MAAA;AAAA,QACH,eAAA,EAAiB,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA;AAAA,QAClD,gBAAA,EACE,aAAA,GAAiB,cAAA,GAAiB,GAAA,GAAO,aAAA;AAAA,QAE3C,~~QAAQ~~,~~CAAA~~,~~0BAAA,EAA6B,CAAA,CAAE,~~KAAA~~,IAAS,0BAAA,CAA2B,CAAC,CAAC,CAAA,CAAA,CAAA~~;AAAA,~~QAC7E~~,WAAW,CAAA,OAAA,EAAU,IAAA,GAAM,qBAAqB,CAAA,CAAA,EAAI,MAAM,IAAI,MAAM,CAAA,CAAA;AAAA,OAAA;AAAA,MAT/D;AAAA,KAUP;AAAA,EAEJ,CAAC,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"DonutChartFill.mjs","sources":["../../../../../../../src/components/DonutChart/components/DonutChartFill.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<DonutChartProps, \"segments\"> {\n center: number;\n value?: number;\n radius: number;\n maxValue: number;\n}\n\nexport const DonutChartFill: FC<Props> = (props) => {\n const { center, value = 0, radius, segments, maxValue } = props;\n\n const circumference = 2 * radius * Math.PI;\n\n const percent = (100 / maxValue) * value;\n\n if (!segments) {\n return (\n <circle\n className={styles.fill}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={circumference - (percent / 100) * circumference}\n transform={`rotate(-90 ${center} ${center})`}\n />\n );\n }\n\n let rotationOffset = 0;\n\n return segments.map((s, i) => {\n const segmentPercent = (100 / maxValue) * s.value;\n\n const currentRotationOffset = rotationOffset;\n\n rotationOffset = rotationOffset + (360 / 100) * segmentPercent;\n\n const color =\n !s.color \|\| isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`\n : s.color;\n\n return (\n <circle\n key={i}\n cx={center}\n cy={center}\n r={radius}\n strokeDasharray={`${circumference} ${circumference}`}\n strokeDashoffset={\n circumference - (segmentPercent / 100) * circumference\n }\n stroke={color}\n transform={`rotate(${-90 + currentRotationOffset} ${center} ${center})`}\n />\n );\n });\n};\n"],"names":[],"mappings":";;;;;AAaO,MAAM,cAAA,GAA4B,CAAC,KAAA,KAAU;AAClD,EAAA,MAAM,EAAE,MAAA,EAAQ,KAAA,GAAQ,GAAG,MAAA,EAAQ,QAAA,EAAU,UAAS,GAAI,KAAA;AAE1D,EAAA,MAAM,aAAA,GAAgB,CAAA,GAAI,MAAA,GAAS,IAAA,CAAK,EAAA;AAExC,EAAA,MAAM,OAAA,GAAW,MAAM,QAAA,GAAY,KAAA;AAEnC,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,EAAA,EAAI,MAAA;AAAA,QACJ,EAAA,EAAI,MAAA;AAAA,QACJ,CAAA,EAAG,MAAA;AAAA,QACH,eAAA,EAAiB,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA;AAAA,QAClD,gBAAA,EAAkB,aAAA,GAAiB,OAAA,GAAU,GAAA,GAAO,aAAA;AAAA,QACpD,SAAA,EAAW,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA;AAAA;AAAA,KAC3C;AAAA,EAEJ;AAEA,EAAA,IAAI,cAAA,GAAiB,CAAA;AAErB,EAAA,OAAO,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AAC5B,IAAA,MAAM,cAAA,GAAkB,GAAA,GAAM,QAAA,GAAY,CAAA,CAAE,KAAA;AAE5C,IAAA,MAAM,qBAAA,GAAwB,cAAA;AAE9B,IAAA,cAAA,GAAiB,cAAA,GAAkB,MAAM,GAAA,GAAO,cAAA;AAEhD,IAAA,MAAM,KAAA,GACJ,CAAC,CAAA,CAAE,KAAA,IAAS,mBAAmB,CAAA,CAAE,KAAK,CAAA,GAClC,CAAA,0BAAA,EAA6B,EAAE,KAAA,IAAS,0BAAA,CAA2B,CAAC,CAAC,MACrE,CAAA,CAAE,KAAA;AAER,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,EAAA,EAAI,MAAA;AAAA,QACJ,EAAA,EAAI,MAAA;AAAA,QACJ,CAAA,EAAG,MAAA;AAAA,QACH,eAAA,EAAiB,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA;AAAA,QAClD,gBAAA,EACE,aAAA,GAAiB,cAAA,GAAiB,GAAA,GAAO,aAAA;AAAA,QAE3C,MAAA,EAAQ,KAAA;AAAA,QACR,WAAW,CAAA,OAAA,EAAU,IAAA,GAAM,qBAAqB,CAAA,CAAA,EAAI,MAAM,IAAI,MAAM,CAAA,CAAA;AAAA,OAAA;AAAA,MAT/D;AAAA,KAUP;AAAA,EAEJ,CAAC,CAAA;AACH;;;;"}

package/dist/js/components/src/components/Legend/components/LegendItem/LegendItem.mjs CHANGED Viewed

@@ -4,14 +4,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '../../../Text/Text.mjs';
 import styles from './LegendItem.module.scss.mjs';
 import clsx from 'clsx';
+import { isCategoricalColor } from '../../../../lib/tokens/isCategoricalColor.mjs';
 const LegendItem = (props) => {
-  const { children, color } = props;
+  const { children, color: colorFromProps } = props;
+  const color = colorFromProps ? isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps : void 0;
   return /* @__PURE__ */ jsxs("li", { className: styles.legendItem, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx(styles.colorSquare, color && styles[`color-${color}`])
+        style: colorFromProps ? { backgroundColor: color } : void 0,
+        className: clsx(styles.colorSquare)
       }
     ),
     /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("small", { children }) })

package/dist/js/components/src/components/Legend/components/LegendItem/LegendItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LegendItem.mjs","sources":["../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import Text from \"@/components/Text\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LegendItem.module.scss\";\nimport type { ~~CategoricalColor~~ } from \"@/lib/tokens/CategoricalColors\";\nimport clsx from \"clsx\";\n\nexport interface LegendItemProps extends PropsWithChildren {\n color?: ~~CategoricalColor~~;\n}\n\nexport const LegendItem: FC<LegendItemProps> = (props) => {\n const { children, color } = props;\n\n return (\n <li className={styles.legendItem}>\n <div\n className={clsx(styles.colorSquare~~, color && styles[`color-${color}`]~~)}\n />\n <Text>\n <small>{children}</small>\n </Text>\n </li>\n );\n};\n\nexport default LegendItem;\n"],"names":[],"mappings":"~~;;;;;AAUO~~,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,~~EAAM~~,GAAI,KAAA;~~AAE5B~~,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,MAAA,CAAO,UAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,~~SAAA~~,~~EAAW~~,~~KAAK~~,~~MAAA~~,~~CAAO~~,~~WAAA~~,~~EAAa~~,~~SAAS~~,MAAA,~~CAAO~~,~~CAAA~~,~~MAAA~~,~~EAAS~~,~~KAAK~~,~~CAAA~~,~~CAAE~~,~~CAAC~~;AAAA;AAAA,~~KACvE~~;AAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAO,UAAS,CAAA,EACnB;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"LegendItem.mjs","sources":["../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import Text from \"@/components/Text\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LegendItem.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport clsx from \"clsx\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\nexport interface LegendItemProps extends PropsWithChildren {\n color?: CategoricalWithCustomColor;\n}\n\nexport const LegendItem: FC<LegendItemProps> = (props) => {\n const { children, color: colorFromProps } = props;\n\n const color = colorFromProps\n ? isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps\n : undefined;\n\n return (\n <li className={styles.legendItem}>\n <div\n style={colorFromProps ? { backgroundColor: color } : undefined}\n className={clsx(styles.colorSquare)}\n />\n <Text>\n <small>{children}</small>\n </Text>\n </li>\n );\n};\n\nexport default LegendItem;\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,cAAA,EAAe,GAAI,KAAA;AAE5C,EAAA,MAAM,KAAA,GAAQ,iBACV,kBAAA,CAAmB,cAAc,IAC/B,CAAA,0BAAA,EAA6B,cAAc,MAC3C,cAAA,GACF,MAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,MAAA,CAAO,UAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,cAAA,GAAiB,EAAE,eAAA,EAAiB,OAAM,GAAI,MAAA;AAAA,QACrD,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,WAAW;AAAA;AAAA,KACpC;AAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAO,UAAS,CAAA,EACnB;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Legend/components/LegendItem/LegendItem.module.scss.mjs CHANGED Viewed

@@ -4,19 +4,7 @@ const legendItem = "flow--legend--legend-item";
 const colorSquare = "flow--legend--legend-item--color-square";
 const styles = {
 	legendItem: legendItem,
-	colorSquare: colorSquare,
-	"color-sea-green": "flow--legend--legend-item--color-sea-green",
-	"color-palatinate-blue": "flow--legend--legend-item--color-palatinate-blue",
-	"color-tangerine": "flow--legend--legend-item--color-tangerine",
-	"color-magenta": "flow--legend--legend-item--color-magenta",
-	"color-tropical-indigo": "flow--legend--legend-item--color-tropical-indigo",
-	"color-malachite": "flow--legend--legend-item--color-malachite",
-	"color-azure": "flow--legend--legend-item--color-azure",
-	"color-violet": "flow--legend--legend-item--color-violet",
-	"color-yellow": "flow--legend--legend-item--color-yellow",
-	"color-alloy-orange": "flow--legend--legend-item--color-alloy-orange",
-	"color-green": "flow--legend--legend-item--color-green",
-	"color-lime": "flow--legend--legend-item--color-lime"
+	colorSquare: colorSquare
 };
 export { colorSquare, styles as default, legendItem };

package/dist/js/components/src/components/Legend/components/LegendItem/LegendItem.module.scss.mjs.map CHANGED Viewed

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

package/dist/js/components/src/components/Message/Message.mjs CHANGED Viewed

@@ -31,14 +31,14 @@ const Message = flowComponent("Message", (props) => {
     Header: {
       className: styles.header,
       Button: {
-        className: styles.action,
+        className: styles.headerAction,
         size: "s",
         variant: "plain",
         color: "secondary"
       },
       ContextMenuTrigger: {
         Button: {
-          className: styles.action,
+          className: styles.headerAction,
           size: "s",
           variant: "plain",
           color: "secondary",
@@ -50,6 +50,17 @@ const Message = flowComponent("Message", (props) => {
         wrapWith: /* @__PURE__ */ jsx(ClearPropsContext, {}),
         className: styles.user
       }
+    },
+    Button: {
+      size: "s",
+      className: styles.action
+    },
+    ActionGroup: {
+      className: styles.actionGroup,
+      Button: {
+        size: "s",
+        className: styles.actionGroupAction
+      }
     }
   };
   return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("article", { className: rootClassName, style, children }) });

package/dist/js/components/src/components/Message/Message.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Message.mjs","sources":["../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\n\nexport interface MessageProps\n extends PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps {\n /** Determines the color and orientation of the message. @default \"responder\" /\n type?: \"responder\" \| \"sender\";\n color?: string;\n}\n\n/* @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n const { type = \"responder\", children, className, color } = props;\n\n const rootClassName = clsx(styles.message, styles[type], className);\n\n const style = color\n ? ({ \"--message-background\": color } as CSSProperties)\n : undefined;\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.content,\n children: dynamic((props) => {\n return (\n <>\n <div className={styles.tip} />\n {props.children}\n </>\n );\n }),\n },\n Header: {\n className: styles.header,\n Button: {\n className: styles.~~action~~,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n },\n ContextMenuTrigger: {\n Button: {\n className: styles.~~action~~,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n children: <IconContextMenu />,\n },\n },\n Text: { className: styles.date },\n Align: {\n wrapWith: <ClearPropsContext />,\n className: styles.user,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <article className={rootClassName} style={style}>\n {children}\n </article>\n </PropsContextProvider>\n );\n});\n\nexport default Message;\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,IAAA,GAAO,WAAA,EAAa,QAAA,EAAU,SAAA,EAAW,OAAM,GAAI,KAAA;AAE3D,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,SAAS,MAAA,CAAO,IAAI,GAAG,SAAS,CAAA;AAElE,EAAA,MAAM,KAAA,GAAQ,KAAA,GACT,EAAE,sBAAA,EAAwB,OAAM,GACjC,MAAA;AAEJ,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC3B,QAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EAAK,CAAA;AAAA,UAC3BA,MAAAA,CAAM;AAAA,SAAA,EACT,CAAA;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,WAAW,MAAA,CAAO,~~MAAA~~;AAAA,QAClB,IAAA,EAAM,GAAA;AAAA,QACN,OAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,WAAW,MAAA,CAAO,~~MAAA~~;AAAA,UAClB,IAAA,EAAM,GAAA;AAAA,UACN,OAAA,EAAS,OAAA;AAAA,UACT,KAAA,EAAO,WAAA;AAAA,UACP,QAAA,sBAAW,eAAA,EAAA,EAAgB;AAAA;AAC7B,OACF;AAAA,MACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,MAC/B,KAAA,EAAO;AAAA,QACL,QAAA,sBAAW,iBAAA,EAAA,EAAkB,CAAA;AAAA,QAC7B,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,aAAQ,SAAA,EAAW,aAAA,EAAe,KAAA,EAChC,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"Message.mjs","sources":["../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\n\nexport interface MessageProps\n extends PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps {\n /** Determines the color and orientation of the message. @default \"responder\" /\n type?: \"responder\" \| \"sender\";\n color?: string;\n}\n\n/* @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n const { type = \"responder\", children, className, color } = props;\n\n const rootClassName = clsx(styles.message, styles[type], className);\n\n const style = color\n ? ({ \"--message-background\": color } as CSSProperties)\n : undefined;\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.content,\n children: dynamic((props) => {\n return (\n <>\n <div className={styles.tip} />\n {props.children}\n </>\n );\n }),\n },\n Header: {\n className: styles.header,\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n },\n ContextMenuTrigger: {\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n children: <IconContextMenu />,\n },\n },\n Text: { className: styles.date },\n Align: {\n wrapWith: <ClearPropsContext />,\n className: styles.user,\n },\n },\n\n Button: {\n size: \"s\",\n className: styles.action,\n },\n ActionGroup: {\n className: styles.actionGroup,\n Button: {\n size: \"s\",\n className: styles.actionGroupAction,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <article className={rootClassName} style={style}>\n {children}\n </article>\n </PropsContextProvider>\n );\n});\n\nexport default Message;\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,IAAA,GAAO,WAAA,EAAa,QAAA,EAAU,SAAA,EAAW,OAAM,GAAI,KAAA;AAE3D,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,SAAS,MAAA,CAAO,IAAI,GAAG,SAAS,CAAA;AAElE,EAAA,MAAM,KAAA,GAAQ,KAAA,GACT,EAAE,sBAAA,EAAwB,OAAM,GACjC,MAAA;AAEJ,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC3B,QAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EAAK,CAAA;AAAA,UAC3BA,MAAAA,CAAM;AAAA,SAAA,EACT,CAAA;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,WAAW,MAAA,CAAO,YAAA;AAAA,QAClB,IAAA,EAAM,GAAA;AAAA,QACN,OAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,WAAW,MAAA,CAAO,YAAA;AAAA,UAClB,IAAA,EAAM,GAAA;AAAA,UACN,OAAA,EAAS,OAAA;AAAA,UACT,KAAA,EAAO,WAAA;AAAA,UACP,QAAA,sBAAW,eAAA,EAAA,EAAgB;AAAA;AAC7B,OACF;AAAA,MACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,MAC/B,KAAA,EAAO;AAAA,QACL,QAAA,sBAAW,iBAAA,EAAA,EAAkB,CAAA;AAAA,QAC7B,WAAW,MAAA,CAAO;AAAA;AACpB,KACF;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,GAAA;AAAA,MACN,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,WAAA,EAAa;AAAA,MACX,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,GAAA;AAAA,QACN,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,aAAQ,SAAA,EAAW,aAAA,EAAe,KAAA,EAChC,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Message/Message.module.scss.mjs CHANGED Viewed

@@ -3,23 +3,29 @@
 const message = "flow--message";
 const content = "flow--message--content";
 const tip = "flow--message--tip";
+const actionGroup = "flow--message--action-group";
+const actionGroupAction = "flow--message--action-group-action";
 const sender = "flow--message--sender";
 const header = "flow--message--header";
 const user = "flow--message--user";
+const action = "flow--message--action";
 const responder = "flow--message--responder";
 const date = "flow--message--date";
-const action = "flow--message--action";
+const headerAction = "flow--message--header-action";
 const styles = {
 	message: message,
 	content: content,
 	tip: tip,
+	actionGroup: actionGroup,
+	actionGroupAction: actionGroupAction,
 	sender: sender,
 	header: header,
 	user: user,
+	action: action,
 	responder: responder,
 	date: date,
-	action: action
+	headerAction: headerAction
 };
-export { action, content, date, styles as default, header, message, responder, sender, tip, user };
+export { action, actionGroup, actionGroupAction, content, date, styles as default, header, headerAction, message, responder, sender, tip, user };
 //# sourceMappingURL=Message.module.scss.mjs.map

package/dist/js/components/src/components/Message/Message.module.scss.mjs.map CHANGED Viewed

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

package/dist/js/components/src/lib/tokens/CategoricalColors.mjs ADDED Viewed

@@ -0,0 +1,10 @@
+"use client"
+/* */
+import tokens from '../../../../design-tokens/dist/variables.json.mjs';
+const categoricalColors = Object.keys(
+  tokens.color.categorical
+);
+export { categoricalColors };
+//# sourceMappingURL=CategoricalColors.mjs.map

package/dist/js/components/src/lib/tokens/CategoricalColors.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CategoricalColors.mjs","sources":["../../../../../../src/lib/tokens/CategoricalColors.ts"],"sourcesContent":["import tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport const categoricalColors = Object.keys(\n tokens.color.categorical,\n) as (keyof typeof tokens.color.categorical)[];\n\nexport type CategoricalColor = (typeof categoricalColors)[number];\nexport type CategoricalWithCustomColor = CategoricalColor | (string & {});\n"],"names":[],"mappings":";;AAEO,MAAM,oBAAoB,MAAA,CAAO,IAAA;AAAA,EACtC,OAAO,KAAA,CAAM;AACf;;;;"}

package/dist/js/components/src/lib/tokens/isCategoricalColor.mjs ADDED Viewed

@@ -0,0 +1,11 @@
+"use client"
+/* */
+import { categoricalColors } from './CategoricalColors.mjs';
+function isCategoricalColor(something) {
+  const anyCategoricalColors = categoricalColors;
+  return typeof something === "string" && anyCategoricalColors.includes(something);
+}
+export { isCategoricalColor };
+//# sourceMappingURL=isCategoricalColor.mjs.map

package/dist/js/components/src/lib/tokens/isCategoricalColor.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"isCategoricalColor.mjs","sources":["../../../../../../src/lib/tokens/isCategoricalColor.ts"],"sourcesContent":["import {\n type CategoricalColor,\n categoricalColors,\n} from \"@/lib/tokens/CategoricalColors\";\n\nexport function isCategoricalColor(\n something: unknown,\n): something is CategoricalColor {\n const anyCategoricalColors = categoricalColors as readonly string[];\n return (\n typeof something === \"string\" && anyCategoricalColors.includes(something)\n );\n}\n"],"names":[],"mappings":";;AAKO,SAAS,mBACd,SAAA,EAC+B;AAC/B,EAAA,MAAM,oBAAA,GAAuB,iBAAA;AAC7B,EAAA,OACE,OAAO,SAAA,KAAc,QAAA,IAAY,oBAAA,CAAqB,SAAS,SAAS,CAAA;AAE5E;;;;"}