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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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;;;;"}

package/dist/js/design-tokens/dist/variables.json.mjs

@@ -1,13 +1,15 @@
 "use client"
 /* */
+const color = /* #__PURE__ */ JSON.parse("{\"gray\":{\"100\":{\"key\":\"{color.gray.100}\",\"value\":\"#FFFFFF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FFFFFF\",\"key\":\"{color.gray.100}\"},\"name\":\"ColorGray100\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"100\"},\"path\":[\"color\",\"gray\",\"100\"]},\"200\":{\"key\":\"{color.gray.200}\",\"value\":\"#FDFDFD\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FDFDFD\",\"key\":\"{color.gray.200}\"},\"name\":\"ColorGray200\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"200\"},\"path\":[\"color\",\"gray\",\"200\"]},\"300\":{\"key\":\"{color.gray.300}\",\"value\":\"#F8F8F8\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#F8F8F8\",\"key\":\"{color.gray.300}\"},\"name\":\"ColorGray300\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"300\"},\"path\":[\"color\",\"gray\",\"300\"]},\"400\":{\"key\":\"{color.gray.400}\",\"value\":\"#E6E6E6\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#E6E6E6\",\"key\":\"{color.gray.400}\"},\"name\":\"ColorGray400\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"400\"},\"path\":[\"color\",\"gray\",\"400\"]},\"500\":{\"key\":\"{color.gray.500}\",\"value\":\"#D5D5D5\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#D5D5D5\",\"key\":\"{color.gray.500}\"},\"name\":\"ColorGray500\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"500\"},\"path\":[\"color\",\"gray\",\"500\"]},\"600\":{\"key\":\"{color.gray.600}\",\"value\":\"#B1B1B1\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#B1B1B1\",\"key\":\"{color.gray.600}\"},\"name\":\"ColorGray600\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"600\"},\"path\":[\"color\",\"gray\",\"600\"]},\"700\":{\"key\":\"{color.gray.700}\",\"value\":\"#909090\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#909090\",\"key\":\"{color.gray.700}\"},\"name\":\"ColorGray700\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"700\"},\"path\":[\"color\",\"gray\",\"700\"]},\"800\":{\"key\":\"{color.gray.800}\",\"value\":\"#6D6D6D\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#6D6D6D\",\"key\":\"{color.gray.800}\"},\"name\":\"ColorGray800\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"800\"},\"path\":[\"color\",\"gray\",\"800\"]},\"900\":{\"key\":\"{color.gray.900}\",\"value\":\"#464646\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#464646\",\"key\":\"{color.gray.900}\"},\"name\":\"ColorGray900\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"900\"},\"path\":[\"color\",\"gray\",\"900\"]},\"1000\":{\"key\":\"{color.gray.1000}\",\"value\":\"#222222\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#222222\",\"key\":\"{color.gray.1000}\"},\"name\":\"ColorGray1000\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"1000\"},\"path\":[\"color\",\"gray\",\"1000\"]},\"1100\":{\"key\":\"{color.gray.1100}\",\"value\":\"#000000\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#000000\",\"key\":\"{color.gray.1100}\"},\"name\":\"ColorGray1100\",\"attributes\":{\"category\":\"color\",\"type\":\"gray\",\"item\":\"1100\"},\"path\":[\"color\",\"gray\",\"1100\"]}},\"hosting-blue\":{\"100\":{\"key\":\"{color.hosting-blue.100}\",\"value\":\"#F0F5FF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#F0F5FF\",\"key\":\"{color.hosting-blue.100}\"},\"name\":\"ColorHostingBlue100\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"100\"},\"path\":[\"color\",\"hosting-blue\",\"100\"]},\"200\":{\"key\":\"{color.hosting-blue.200}\",\"value\":\"#E0EBFF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#E0EBFF\",\"key\":\"{color.hosting-blue.200}\"},\"name\":\"ColorHostingBlue200\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"200\"},\"path\":[\"color\",\"hosting-blue\",\"200\"]},\"300\":{\"key\":\"{color.hosting-blue.300}\",\"value\":\"#ABC6FF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#ABC6FF\",\"key\":\"{color.hosting-blue.300}\"},\"name\":\"ColorHostingBlue300\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"300\"},\"path\":[\"color\",\"hosting-blue\",\"300\"]},\"400\":{\"key\":\"{color.hosting-blue.400}\",\"value\":\"#85AFFF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#85AFFF\",\"key\":\"{color.hosting-blue.400}\"},\"name\":\"ColorHostingBlue400\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"400\"},\"path\":[\"color\",\"hosting-blue\",\"400\"]},\"500\":{\"key\":\"{color.hosting-blue.500}\",\"value\":\"#6197FF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#6197FF\",\"key\":\"{color.hosting-blue.500}\"},\"name\":\"ColorHostingBlue500\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"500\"},\"path\":[\"color\",\"hosting-blue\",\"500\"]},\"600\":{\"key\":\"{color.hosting-blue.600}\",\"value\":\"#3D80FF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#3D80FF\",\"key\":\"{color.hosting-blue.600}\"},\"name\":\"ColorHostingBlue600\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"600\"},\"path\":[\"color\",\"hosting-blue\",\"600\"]},\"700\":{\"key\":\"{color.hosting-blue.700}\",\"value\":\"#1A68FF\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#1A68FF\",\"key\":\"{color.hosting-blue.700}\"},\"name\":\"ColorHostingBlue700\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"700\"},\"path\":[\"color\",\"hosting-blue\",\"700\"]},\"800\":{\"key\":\"{color.hosting-blue.800}\",\"value\":\"#0054F5\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#0054F5\",\"key\":\"{color.hosting-blue.800}\"},\"name\":\"ColorHostingBlue800\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"800\"},\"path\":[\"color\",\"hosting-blue\",\"800\"]},\"900\":{\"key\":\"{color.hosting-blue.900}\",\"value\":\"#003FB8\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#003FB8\",\"key\":\"{color.hosting-blue.900}\"},\"name\":\"ColorHostingBlue900\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"900\"},\"path\":[\"color\",\"hosting-blue\",\"900\"]},\"1000\":{\"key\":\"{color.hosting-blue.1000}\",\"value\":\"#002A7B\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#002A7B\",\"key\":\"{color.hosting-blue.1000}\"},\"name\":\"ColorHostingBlue1000\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"1000\"},\"path\":[\"color\",\"hosting-blue\",\"1000\"]},\"1100\":{\"key\":\"{color.hosting-blue.1100}\",\"value\":\"#00205C\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00205C\",\"key\":\"{color.hosting-blue.1100}\"},\"name\":\"ColorHostingBlue1100\",\"attributes\":{\"category\":\"color\",\"type\":\"hosting-blue\",\"item\":\"1100\"},\"path\":[\"color\",\"hosting-blue\",\"1100\"]}},\"amaranth-red\":{\"100\":{\"key\":\"{color.amaranth-red.100}\",\"value\":\"#FDF0F3\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FDF0F3\",\"key\":\"{color.amaranth-red.100}\"},\"name\":\"ColorAmaranthRed100\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"100\"},\"path\":[\"color\",\"amaranth-red\",\"100\"]},\"200\":{\"key\":\"{color.amaranth-red.200}\",\"value\":\"#FBE0E6\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FBE0E6\",\"key\":\"{color.amaranth-red.200}\"},\"name\":\"ColorAmaranthRed200\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"200\"},\"path\":[\"color\",\"amaranth-red\",\"200\"]},\"300\":{\"key\":\"{color.amaranth-red.300}\",\"value\":\"#F7C1CC\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#F7C1CC\",\"key\":\"{color.amaranth-red.300}\"},\"name\":\"ColorAmaranthRed300\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"300\"},\"path\":[\"color\",\"amaranth-red\",\"300\"]},\"400\":{\"key\":\"{color.amaranth-red.400}\",\"value\":\"#F2A2B3\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#F2A2B3\",\"key\":\"{color.amaranth-red.400}\"},\"name\":\"ColorAmaranthRed400\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"400\"},\"path\":[\"color\",\"amaranth-red\",\"400\"]},\"500\":{\"key\":\"{color.amaranth-red.500}\",\"value\":\"#EE8299\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#EE8299\",\"key\":\"{color.amaranth-red.500}\"},\"name\":\"ColorAmaranthRed500\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"500\"},\"path\":[\"color\",\"amaranth-red\",\"500\"]},\"600\":{\"key\":\"{color.amaranth-red.600}\",\"value\":\"#EA637F\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#EA637F\",\"key\":\"{color.amaranth-red.600}\"},\"name\":\"ColorAmaranthRed600\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"600\"},\"path\":[\"color\",\"amaranth-red\",\"600\"]},\"700\":{\"key\":\"{color.amaranth-red.700}\",\"value\":\"#E54366\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#E54366\",\"key\":\"{color.amaranth-red.700}\"},\"name\":\"ColorAmaranthRed700\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"700\"},\"path\":[\"color\",\"amaranth-red\",\"700\"]},\"800\":{\"key\":\"{color.amaranth-red.800}\",\"value\":\"#E1244C\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#E1244C\",\"key\":\"{color.amaranth-red.800}\"},\"name\":\"ColorAmaranthRed800\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"800\"},\"path\":[\"color\",\"amaranth-red\",\"800\"]},\"900\":{\"key\":\"{color.amaranth-red.900}\",\"value\":\"#B4193A\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#B4193A\",\"key\":\"{color.amaranth-red.900}\"},\"name\":\"ColorAmaranthRed900\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"900\"},\"path\":[\"color\",\"amaranth-red\",\"900\"]},\"1000\":{\"key\":\"{color.amaranth-red.1000}\",\"value\":\"#83122A\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#83122A\",\"key\":\"{color.amaranth-red.1000}\"},\"name\":\"ColorAmaranthRed1000\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"1000\"},\"path\":[\"color\",\"amaranth-red\",\"1000\"]},\"1100\":{\"key\":\"{color.amaranth-red.1100}\",\"value\":\"#6A0F22\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#6A0F22\",\"key\":\"{color.amaranth-red.1100}\"},\"name\":\"ColorAmaranthRed1100\",\"attributes\":{\"category\":\"color\",\"type\":\"amaranth-red\",\"item\":\"1100\"},\"path\":[\"color\",\"amaranth-red\",\"1100\"]}},\"royal-orange\":{\"100\":{\"key\":\"{color.royal-orange.100}\",\"value\":\"#FFF4EB\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FFF4EB\",\"key\":\"{color.royal-orange.100}\"},\"name\":\"ColorRoyalOrange100\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"100\"},\"path\":[\"color\",\"royal-orange\",\"100\"]},\"200\":{\"key\":\"{color.royal-orange.200}\",\"value\":\"#FFEBDC\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FFEBDC\",\"key\":\"{color.royal-orange.200}\"},\"name\":\"ColorRoyalOrange200\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"200\"},\"path\":[\"color\",\"royal-orange\",\"200\"]},\"300\":{\"key\":\"{color.royal-orange.300}\",\"value\":\"#FFD9BD\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FFD9BD\",\"key\":\"{color.royal-orange.300}\"},\"name\":\"ColorRoyalOrange300\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"300\"},\"path\":[\"color\",\"royal-orange\",\"300\"]},\"400\":{\"key\":\"{color.royal-orange.400}\",\"value\":\"#FFC89F\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FFC89F\",\"key\":\"{color.royal-orange.400}\"},\"name\":\"ColorRoyalOrange400\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"400\"},\"path\":[\"color\",\"royal-orange\",\"400\"]},\"500\":{\"key\":\"{color.royal-orange.500}\",\"value\":\"#FFA562\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FFA562\",\"key\":\"{color.royal-orange.500}\"},\"name\":\"ColorRoyalOrange500\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"500\"},\"path\":[\"color\",\"royal-orange\",\"500\"]},\"600\":{\"key\":\"{color.royal-orange.600}\",\"value\":\"#FF9343\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FF9343\",\"key\":\"{color.royal-orange.600}\"},\"name\":\"ColorRoyalOrange600\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"600\"},\"path\":[\"color\",\"royal-orange\",\"600\"]},\"700\":{\"key\":\"{color.royal-orange.700}\",\"value\":\"#FF8225\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#FF8225\",\"key\":\"{color.royal-orange.700}\"},\"name\":\"ColorRoyalOrange700\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"700\"},\"path\":[\"color\",\"royal-orange\",\"700\"]},\"800\":{\"key\":\"{color.royal-orange.800}\",\"value\":\"#F56800\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#F56800\",\"key\":\"{color.royal-orange.800}\"},\"name\":\"ColorRoyalOrange800\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"800\"},\"path\":[\"color\",\"royal-orange\",\"800\"]},\"900\":{\"key\":\"{color.royal-orange.900}\",\"value\":\"#C25200\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#C25200\",\"key\":\"{color.royal-orange.900}\"},\"name\":\"ColorRoyalOrange900\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"900\"},\"path\":[\"color\",\"royal-orange\",\"900\"]},\"1000\":{\"key\":\"{color.royal-orange.1000}\",\"value\":\"#8F3D00\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#8F3D00\",\"key\":\"{color.royal-orange.1000}\"},\"name\":\"ColorRoyalOrange1000\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"1000\"},\"path\":[\"color\",\"royal-orange\",\"1000\"]},\"1100\":{\"key\":\"{color.royal-orange.1100}\",\"value\":\"#763200\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#763200\",\"key\":\"{color.royal-orange.1100}\"},\"name\":\"ColorRoyalOrange1100\",\"attributes\":{\"category\":\"color\",\"type\":\"royal-orange\",\"item\":\"1100\"},\"path\":[\"color\",\"royal-orange\",\"1100\"]}},\"espelkamp-green\":{\"100\":{\"key\":\"{color.espelkamp-green.100}\",\"value\":\"#DCFFF4\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#DCFFF4\",\"key\":\"{color.espelkamp-green.100}\"},\"name\":\"ColorEspelkampGreen100\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"100\"},\"path\":[\"color\",\"espelkamp-green\",\"100\"]},\"200\":{\"key\":\"{color.espelkamp-green.200}\",\"value\":\"#C0FFEB\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#C0FFEB\",\"key\":\"{color.espelkamp-green.200}\"},\"name\":\"ColorEspelkampGreen200\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"200\"},\"path\":[\"color\",\"espelkamp-green\",\"200\"]},\"300\":{\"key\":\"{color.espelkamp-green.300}\",\"value\":\"#87FFDA\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#87FFDA\",\"key\":\"{color.espelkamp-green.300}\"},\"name\":\"ColorEspelkampGreen300\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"300\"},\"path\":[\"color\",\"espelkamp-green\",\"300\"]},\"400\":{\"key\":\"{color.espelkamp-green.400}\",\"value\":\"#4FFFC9\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#4FFFC9\",\"key\":\"{color.espelkamp-green.400}\"},\"name\":\"ColorEspelkampGreen400\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"400\"},\"path\":[\"color\",\"espelkamp-green\",\"400\"]},\"500\":{\"key\":\"{color.espelkamp-green.500}\",\"value\":\"#17FFB8\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#17FFB8\",\"key\":\"{color.espelkamp-green.500}\"},\"name\":\"ColorEspelkampGreen500\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"500\"},\"path\":[\"color\",\"espelkamp-green\",\"500\"]},\"600\":{\"key\":\"{color.espelkamp-green.600}\",\"value\":\"#00DE9A\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00DE9A\",\"key\":\"{color.espelkamp-green.600}\"},\"name\":\"ColorEspelkampGreen600\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"600\"},\"path\":[\"color\",\"espelkamp-green\",\"600\"]},\"700\":{\"key\":\"{color.espelkamp-green.700}\",\"value\":\"#00A673\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00A673\",\"key\":\"{color.espelkamp-green.700}\"},\"name\":\"ColorEspelkampGreen700\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"700\"},\"path\":[\"color\",\"espelkamp-green\",\"700\"]},\"800\":{\"key\":\"{color.espelkamp-green.800}\",\"value\":\"#00825B\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00825B\",\"key\":\"{color.espelkamp-green.800}\"},\"name\":\"ColorEspelkampGreen800\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"800\"},\"path\":[\"color\",\"espelkamp-green\",\"800\"]},\"900\":{\"key\":\"{color.espelkamp-green.900}\",\"value\":\"#005F42\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#005F42\",\"key\":\"{color.espelkamp-green.900}\"},\"name\":\"ColorEspelkampGreen900\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"900\"},\"path\":[\"color\",\"espelkamp-green\",\"900\"]},\"1000\":{\"key\":\"{color.espelkamp-green.1000}\",\"value\":\"#003B29\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#003B29\",\"key\":\"{color.espelkamp-green.1000}\"},\"name\":\"ColorEspelkampGreen1000\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"1000\"},\"path\":[\"color\",\"espelkamp-green\",\"1000\"]},\"1100\":{\"key\":\"{color.espelkamp-green.1100}\",\"value\":\"#00291C\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00291C\",\"key\":\"{color.espelkamp-green.1100}\"},\"name\":\"ColorEspelkampGreen1100\",\"attributes\":{\"category\":\"color\",\"type\":\"espelkamp-green\",\"item\":\"1100\"},\"path\":[\"color\",\"espelkamp-green\",\"1100\"]}},\"soft-contrast-violet\":{\"100\":{\"key\":\"{color.soft-contrast-violet.100}\",\"value\":\"#F4F3FE\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#F4F3FE\",\"key\":\"{color.soft-contrast-violet.100}\"},\"name\":\"ColorSoftContrastViolet100\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"100\"},\"path\":[\"color\",\"soft-contrast-violet\",\"100\"]},\"200\":{\"key\":\"{color.soft-contrast-violet.200}\",\"value\":\"#EAE7FD\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#EAE7FD\",\"key\":\"{color.soft-contrast-violet.200}\"},\"name\":\"ColorSoftContrastViolet200\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"200\"},\"path\":[\"color\",\"soft-contrast-violet\",\"200\"]},\"300\":{\"key\":\"{color.soft-contrast-violet.300}\",\"value\":\"#D6D0FA\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#D6D0FA\",\"key\":\"{color.soft-contrast-violet.300}\"},\"name\":\"ColorSoftContrastViolet300\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"300\"},\"path\":[\"color\",\"soft-contrast-violet\",\"300\"]},\"400\":{\"key\":\"{color.soft-contrast-violet.400}\",\"value\":\"#C2B9F8\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#C2B9F8\",\"key\":\"{color.soft-contrast-violet.400}\"},\"name\":\"ColorSoftContrastViolet400\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"400\"},\"path\":[\"color\",\"soft-contrast-violet\",\"400\"]},\"500\":{\"key\":\"{color.soft-contrast-violet.500}\",\"value\":\"#AEA2F5\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#AEA2F5\",\"key\":\"{color.soft-contrast-violet.500}\"},\"name\":\"ColorSoftContrastViolet500\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"500\"},\"path\":[\"color\",\"soft-contrast-violet\",\"500\"]},\"600\":{\"key\":\"{color.soft-contrast-violet.600}\",\"value\":\"#998BF3\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#998BF3\",\"key\":\"{color.soft-contrast-violet.600}\"},\"name\":\"ColorSoftContrastViolet600\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"600\"},\"path\":[\"color\",\"soft-contrast-violet\",\"600\"]},\"700\":{\"key\":\"{color.soft-contrast-violet.700}\",\"value\":\"#8574F0\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#8574F0\",\"key\":\"{color.soft-contrast-violet.700}\"},\"name\":\"ColorSoftContrastViolet700\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"700\"},\"path\":[\"color\",\"soft-contrast-violet\",\"700\"]},\"800\":{\"key\":\"{color.soft-contrast-violet.800}\",\"value\":\"#715DEE\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#715DEE\",\"key\":\"{color.soft-contrast-violet.800}\"},\"name\":\"ColorSoftContrastViolet800\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"800\"},\"path\":[\"color\",\"soft-contrast-violet\",\"800\"]},\"900\":{\"key\":\"{color.soft-contrast-violet.900}\",\"value\":\"#5d4abf\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#5d4abf\",\"key\":\"{color.soft-contrast-violet.900}\"},\"name\":\"ColorSoftContrastViolet900\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"900\"},\"path\":[\"color\",\"soft-contrast-violet\",\"900\"]},\"1000\":{\"key\":\"{color.soft-contrast-violet.1000}\",\"value\":\"#483b9f\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#483b9f\",\"key\":\"{color.soft-contrast-violet.1000}\"},\"name\":\"ColorSoftContrastViolet1000\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"1000\"},\"path\":[\"color\",\"soft-contrast-violet\",\"1000\"]},\"1100\":{\"key\":\"{color.soft-contrast-violet.1100}\",\"value\":\"#302a6f\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#302a6f\",\"key\":\"{color.soft-contrast-violet.1100}\"},\"name\":\"ColorSoftContrastViolet1100\",\"attributes\":{\"category\":\"color\",\"type\":\"soft-contrast-violet\",\"item\":\"1100\"},\"path\":[\"color\",\"soft-contrast-violet\",\"1100\"]}},\"mittwald-navy\":{\"100\":{\"key\":\"{color.mittwald-navy.100}\",\"value\":\"#E4E7F6\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#E4E7F6\",\"key\":\"{color.mittwald-navy.100}\"},\"name\":\"ColorMittwaldNavy100\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"100\"},\"path\":[\"color\",\"mittwald-navy\",\"100\"]},\"200\":{\"key\":\"{color.mittwald-navy.200}\",\"value\":\"#C8CFEE\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#C8CFEE\",\"key\":\"{color.mittwald-navy.200}\"},\"name\":\"ColorMittwaldNavy200\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"200\"},\"path\":[\"color\",\"mittwald-navy\",\"200\"]},\"300\":{\"key\":\"{color.mittwald-navy.300}\",\"value\":\"#A5B0E2\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#A5B0E2\",\"key\":\"{color.mittwald-navy.300}\"},\"name\":\"ColorMittwaldNavy300\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"300\"},\"path\":[\"color\",\"mittwald-navy\",\"300\"]},\"400\":{\"key\":\"{color.mittwald-navy.400}\",\"value\":\"#8291D7\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#8291D7\",\"key\":\"{color.mittwald-navy.400}\"},\"name\":\"ColorMittwaldNavy400\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"400\"},\"path\":[\"color\",\"mittwald-navy\",\"400\"]},\"500\":{\"key\":\"{color.mittwald-navy.500}\",\"value\":\"#5F73CC\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#5F73CC\",\"key\":\"{color.mittwald-navy.500}\"},\"name\":\"ColorMittwaldNavy500\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"500\"},\"path\":[\"color\",\"mittwald-navy\",\"500\"]},\"600\":{\"key\":\"{color.mittwald-navy.600}\",\"value\":\"#3D55C1\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#3D55C1\",\"key\":\"{color.mittwald-navy.600}\"},\"name\":\"ColorMittwaldNavy600\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"600\"},\"path\":[\"color\",\"mittwald-navy\",\"600\"]},\"700\":{\"key\":\"{color.mittwald-navy.700}\",\"value\":\"#32459E\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#32459E\",\"key\":\"{color.mittwald-navy.700}\"},\"name\":\"ColorMittwaldNavy700\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"700\"},\"path\":[\"color\",\"mittwald-navy\",\"700\"]},\"800\":{\"key\":\"{color.mittwald-navy.800}\",\"value\":\"#27367B\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#27367B\",\"key\":\"{color.mittwald-navy.800}\"},\"name\":\"ColorMittwaldNavy800\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"800\"},\"path\":[\"color\",\"mittwald-navy\",\"800\"]},\"900\":{\"key\":\"{color.mittwald-navy.900}\",\"value\":\"#1D285C\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#1D285C\",\"key\":\"{color.mittwald-navy.900}\"},\"name\":\"ColorMittwaldNavy900\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"900\"},\"path\":[\"color\",\"mittwald-navy\",\"900\"]},\"1000\":{\"key\":\"{color.mittwald-navy.1000}\",\"value\":\"#131B3D\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#131B3D\",\"key\":\"{color.mittwald-navy.1000}\"},\"name\":\"ColorMittwaldNavy1000\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"1000\"},\"path\":[\"color\",\"mittwald-navy\",\"1000\"]},\"1100\":{\"key\":\"{color.mittwald-navy.1100}\",\"value\":\"#0E142E\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#0E142E\",\"key\":\"{color.mittwald-navy.1100}\"},\"name\":\"ColorMittwaldNavy1100\",\"attributes\":{\"category\":\"color\",\"type\":\"mittwald-navy\",\"item\":\"1100\"},\"path\":[\"color\",\"mittwald-navy\",\"1100\"]}},\"bright-lilac\":{\"100\":{\"key\":\"{color.bright-lilac.100}\",\"value\":\"#f9e9ff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#f9e9ff\",\"key\":\"{color.bright-lilac.100}\"},\"name\":\"ColorBrightLilac100\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"100\"},\"path\":[\"color\",\"bright-lilac\",\"100\"]},\"200\":{\"key\":\"{color.bright-lilac.200}\",\"value\":\"#f6dfff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#f6dfff\",\"key\":\"{color.bright-lilac.200}\"},\"name\":\"ColorBrightLilac200\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"200\"},\"path\":[\"color\",\"bright-lilac\",\"200\"]},\"300\":{\"key\":\"{color.bright-lilac.300}\",\"value\":\"#f1caff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#f1caff\",\"key\":\"{color.bright-lilac.300}\"},\"name\":\"ColorBrightLilac300\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"300\"},\"path\":[\"color\",\"bright-lilac\",\"300\"]},\"400\":{\"key\":\"{color.bright-lilac.400}\",\"value\":\"#ebb6ff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#ebb6ff\",\"key\":\"{color.bright-lilac.400}\"},\"name\":\"ColorBrightLilac400\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"400\"},\"path\":[\"color\",\"bright-lilac\",\"400\"]},\"500\":{\"key\":\"{color.bright-lilac.500}\",\"value\":\"#e6a1ff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#e6a1ff\",\"key\":\"{color.bright-lilac.500}\"},\"name\":\"ColorBrightLilac500\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"500\"},\"path\":[\"color\",\"bright-lilac\",\"500\"]},\"600\":{\"key\":\"{color.bright-lilac.600}\",\"value\":\"#e08dff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#e08dff\",\"key\":\"{color.bright-lilac.600}\"},\"name\":\"ColorBrightLilac600\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"600\"},\"path\":[\"color\",\"bright-lilac\",\"600\"]},\"700\":{\"key\":\"{color.bright-lilac.700}\",\"value\":\"#ce4bff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#ce4bff\",\"key\":\"{color.bright-lilac.700}\"},\"name\":\"ColorBrightLilac700\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"700\"},\"path\":[\"color\",\"bright-lilac\",\"700\"]},\"800\":{\"key\":\"{color.bright-lilac.800}\",\"value\":\"#bc08ff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#bc08ff\",\"key\":\"{color.bright-lilac.800}\"},\"name\":\"ColorBrightLilac800\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"800\"},\"path\":[\"color\",\"bright-lilac\",\"800\"]},\"900\":{\"key\":\"{color.bright-lilac.900}\",\"value\":\"#9000c5\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#9000c5\",\"key\":\"{color.bright-lilac.900}\"},\"name\":\"ColorBrightLilac900\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"900\"},\"path\":[\"color\",\"bright-lilac\",\"900\"]},\"1000\":{\"key\":\"{color.bright-lilac.1000}\",\"value\":\"#5f0083\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#5f0083\",\"key\":\"{color.bright-lilac.1000}\"},\"name\":\"ColorBrightLilac1000\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"1000\"},\"path\":[\"color\",\"bright-lilac\",\"1000\"]},\"1100\":{\"key\":\"{color.bright-lilac.1100}\",\"value\":\"#470062\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#470062\",\"key\":\"{color.bright-lilac.1100}\"},\"name\":\"ColorBrightLilac1100\",\"attributes\":{\"category\":\"color\",\"type\":\"bright-lilac\",\"item\":\"1100\"},\"path\":[\"color\",\"bright-lilac\",\"1100\"]}},\"super-teal\":{\"100\":{\"key\":\"{color.super-teal.100}\",\"value\":\"#ebfdff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#ebfdff\",\"key\":\"{color.super-teal.100}\"},\"name\":\"ColorSuperTeal100\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"100\"},\"path\":[\"color\",\"super-teal\",\"100\"]},\"200\":{\"key\":\"{color.super-teal.200}\",\"value\":\"#cffaff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#cffaff\",\"key\":\"{color.super-teal.200}\"},\"name\":\"ColorSuperTeal200\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"200\"},\"path\":[\"color\",\"super-teal\",\"200\"]},\"300\":{\"key\":\"{color.super-teal.300}\",\"value\":\"#96f3ff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#96f3ff\",\"key\":\"{color.super-teal.300}\"},\"name\":\"ColorSuperTeal300\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"300\"},\"path\":[\"color\",\"super-teal\",\"300\"]},\"400\":{\"key\":\"{color.super-teal.400}\",\"value\":\"#5eedff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#5eedff\",\"key\":\"{color.super-teal.400}\"},\"name\":\"ColorSuperTeal400\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"400\"},\"path\":[\"color\",\"super-teal\",\"400\"]},\"500\":{\"key\":\"{color.super-teal.500}\",\"value\":\"#26e7ff\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#26e7ff\",\"key\":\"{color.super-teal.500}\"},\"name\":\"ColorSuperTeal500\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"500\"},\"path\":[\"color\",\"super-teal\",\"500\"]},\"600\":{\"key\":\"{color.super-teal.600}\",\"value\":\"#00d3ed\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00d3ed\",\"key\":\"{color.super-teal.600}\"},\"name\":\"ColorSuperTeal600\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"600\"},\"path\":[\"color\",\"super-teal\",\"600\"]},\"700\":{\"key\":\"{color.super-teal.700}\",\"value\":\"#00a1b5\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00a1b5\",\"key\":\"{color.super-teal.700}\"},\"name\":\"ColorSuperTeal700\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"700\"},\"path\":[\"color\",\"super-teal\",\"700\"]},\"800\":{\"key\":\"{color.super-teal.800}\",\"value\":\"#008696\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#008696\",\"key\":\"{color.super-teal.800}\"},\"name\":\"ColorSuperTeal800\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"800\"},\"path\":[\"color\",\"super-teal\",\"800\"]},\"900\":{\"key\":\"{color.super-teal.900}\",\"value\":\"#006b78\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#006b78\",\"key\":\"{color.super-teal.900}\"},\"name\":\"ColorSuperTeal900\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"900\"},\"path\":[\"color\",\"super-teal\",\"900\"]},\"1000\":{\"key\":\"{color.super-teal.1000}\",\"value\":\"#004f59\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#004f59\",\"key\":\"{color.super-teal.1000}\"},\"name\":\"ColorSuperTeal1000\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"1000\"},\"path\":[\"color\",\"super-teal\",\"1000\"]},\"1100\":{\"key\":\"{color.super-teal.1100}\",\"value\":\"#00424a\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#00424a\",\"key\":\"{color.super-teal.1100}\"},\"name\":\"ColorSuperTeal1100\",\"attributes\":{\"category\":\"color\",\"type\":\"super-teal\",\"item\":\"1100\"},\"path\":[\"color\",\"super-teal\",\"1100\"]}},\"categorical\":{\"sea-green\":{\"key\":\"{color.categorical.sea-green}\",\"value\":\"#0fb5ae\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#0fb5ae\",\"key\":\"{color.categorical.sea-green}\"},\"name\":\"ColorCategoricalSeaGreen\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"sea-green\"},\"path\":[\"color\",\"categorical\",\"sea-green\"]},\"palatinate-blue\":{\"key\":\"{color.categorical.palatinate-blue}\",\"value\":\"#4046ca\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#4046ca\",\"key\":\"{color.categorical.palatinate-blue}\"},\"name\":\"ColorCategoricalPalatinateBlue\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"palatinate-blue\"},\"path\":[\"color\",\"categorical\",\"palatinate-blue\"]},\"tangerine\":{\"key\":\"{color.categorical.tangerine}\",\"value\":\"#f68511\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#f68511\",\"key\":\"{color.categorical.tangerine}\"},\"name\":\"ColorCategoricalTangerine\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"tangerine\"},\"path\":[\"color\",\"categorical\",\"tangerine\"]},\"magenta\":{\"key\":\"{color.categorical.magenta}\",\"value\":\"#de3d82\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#de3d82\",\"key\":\"{color.categorical.magenta}\"},\"name\":\"ColorCategoricalMagenta\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"magenta\"},\"path\":[\"color\",\"categorical\",\"magenta\"]},\"tropical-indigo\":{\"key\":\"{color.categorical.tropical-indigo}\",\"value\":\"#7e84fa\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#7e84fa\",\"key\":\"{color.categorical.tropical-indigo}\"},\"name\":\"ColorCategoricalTropicalIndigo\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"tropical-indigo\"},\"path\":[\"color\",\"categorical\",\"tropical-indigo\"]},\"malachite\":{\"key\":\"{color.categorical.malachite}\",\"value\":\"#72e06a\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#72e06a\",\"key\":\"{color.categorical.malachite}\"},\"name\":\"ColorCategoricalMalachite\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"malachite\"},\"path\":[\"color\",\"categorical\",\"malachite\"]},\"azure\":{\"key\":\"{color.categorical.azure}\",\"value\":\"#147af3\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#147af3\",\"key\":\"{color.categorical.azure}\"},\"name\":\"ColorCategoricalAzure\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"azure\"},\"path\":[\"color\",\"categorical\",\"azure\"]},\"violet\":{\"key\":\"{color.categorical.violet}\",\"value\":\"#7326d3\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#7326d3\",\"key\":\"{color.categorical.violet}\"},\"name\":\"ColorCategoricalViolet\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"violet\"},\"path\":[\"color\",\"categorical\",\"violet\"]},\"yellow\":{\"key\":\"{color.categorical.yellow}\",\"value\":\"#e8c600\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#e8c600\",\"key\":\"{color.categorical.yellow}\"},\"name\":\"ColorCategoricalYellow\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"yellow\"},\"path\":[\"color\",\"categorical\",\"yellow\"]},\"alloy-orange\":{\"key\":\"{color.categorical.alloy-orange}\",\"value\":\"#cb5d00\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#cb5d00\",\"key\":\"{color.categorical.alloy-orange}\"},\"name\":\"ColorCategoricalAlloyOrange\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"alloy-orange\"},\"path\":[\"color\",\"categorical\",\"alloy-orange\"]},\"green\":{\"key\":\"{color.categorical.green}\",\"value\":\"#008f5d\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#008f5d\",\"key\":\"{color.categorical.green}\"},\"name\":\"ColorCategoricalGreen\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"green\"},\"path\":[\"color\",\"categorical\",\"green\"]},\"lime\":{\"key\":\"{color.categorical.lime}\",\"value\":\"#bce931\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"#bce931\",\"key\":\"{color.categorical.lime}\"},\"name\":\"ColorCategoricalLime\",\"attributes\":{\"category\":\"color\",\"type\":\"categorical\",\"item\":\"lime\"},\"path\":[\"color\",\"categorical\",\"lime\"]}},\"transparent\":{\"key\":\"{color.transparent}\",\"value\":\"transparent\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"transparent\",\"key\":\"{color.transparent}\"},\"name\":\"ColorTransparent\",\"attributes\":{\"category\":\"color\",\"type\":\"transparent\"},\"path\":[\"color\",\"transparent\"]},\"gradient\":{\"key\":\"{color.gradient}\",\"value\":\"radial-gradient(circle at 27.74% 38.09%,#d8e9f8,transparent 60%),radial-gradient(circle at 63.98% 99.4%,#e4b8ff,transparent 37%),radial-gradient(circle at 79.7% 64.93%,#d8e9f8,transparent 52%),radial-gradient(circle at 10.9% 91.41%,#d8e9f8,transparent 56%),radial-gradient(circle at 3.68% 3.26%,#0056ff,transparent 31%),radial-gradient(circle at 99.62% 17.78%,#48c7d8,transparent 26%),radial-gradient(circle at 58.65% 24.91%,#d8e9f8,transparent 55%),radial-gradient(circle at 53.23% 52.72%,#d8e9f8,transparent 100%),radial-gradient(circle at 50% 50%,#fff,#fff 100%)\",\"filePath\":\"src/color-palette.yml\",\"isSource\":true,\"original\":{\"value\":\"radial-gradient(circle at 27.74% 38.09%,#d8e9f8,transparent 60%),radial-gradient(circle at 63.98% 99.4%,#e4b8ff,transparent 37%),radial-gradient(circle at 79.7% 64.93%,#d8e9f8,transparent 52%),radial-gradient(circle at 10.9% 91.41%,#d8e9f8,transparent 56%),radial-gradient(circle at 3.68% 3.26%,#0056ff,transparent 31%),radial-gradient(circle at 99.62% 17.78%,#48c7d8,transparent 26%),radial-gradient(circle at 58.65% 24.91%,#d8e9f8,transparent 55%),radial-gradient(circle at 53.23% 52.72%,#d8e9f8,transparent 100%),radial-gradient(circle at 50% 50%,#fff,#fff 100%)\",\"key\":\"{color.gradient}\"},\"name\":\"ColorGradient\",\"attributes\":{\"category\":\"color\",\"type\":\"gradient\"},\"path\":[\"color\",\"gradient\"]},\"blue\":{\"key\":\"{color.blue}\",\"value\":\"#002A7B\",\"filePath\":\"src/content/color.yml\",\"isSource\":true,\"original\":{\"value\":\"{primary.color.1000}\",\"key\":\"{color.blue}\"},\"name\":\"ColorBlue\",\"attributes\":{\"category\":\"color\",\"type\":\"blue\"},\"path\":[\"color\",\"blue\"]},\"violet\":{\"key\":\"{color.violet}\",\"value\":\"#715DEE\",\"filePath\":\"src/content/color.yml\",\"isSource\":true,\"original\":{\"value\":\"{color.soft-contrast-violet.800}\",\"key\":\"{color.violet}\"},\"name\":\"ColorViolet\",\"attributes\":{\"category\":\"color\",\"type\":\"violet\"},\"path\":[\"color\",\"violet\"]},\"teal\":{\"key\":\"{color.teal}\",\"value\":\"#008696\",\"filePath\":\"src/content/color.yml\",\"isSource\":true,\"original\":{\"value\":\"{color.super-teal.800}\",\"key\":\"{color.teal}\"},\"name\":\"ColorTeal\",\"attributes\":{\"category\":\"color\",\"type\":\"teal\"},\"path\":[\"color\",\"teal\"]},\"lilac\":{\"key\":\"{color.lilac}\",\"value\":\"#bc08ff\",\"filePath\":\"src/content/color.yml\",\"isSource\":true,\"original\":{\"value\":\"{color.bright-lilac.800}\",\"key\":\"{color.lilac}\"},\"name\":\"ColorLilac\",\"attributes\":{\"category\":\"color\",\"type\":\"lilac\"},\"path\":[\"color\",\"lilac\"]}}");
 const area = {"border-width":{"value":"2px"},"border-color":{"value":"#FFFFFF"}};
 const axis = {"spacing":{"value":"8px"},"font-size":{"value":"0.875rem"},"text-color":{"value":"#222222"},"tick-size":{"value":"8px"}};
 const line = {"border-width":{"value":"2px"}};
 const tokens = {
+  color,
   area,
   axis,
   "cartesian-grid": {"color":{"value":"#909090"},"stroke-width":{"value":"1px"}},
   line};
 
-export { area, axis, tokens as default, line };
+export { area, axis, color, tokens as default, line };
 //# sourceMappingURL=variables.json.mjs.map

package/dist/js/design-tokens/dist/variables.json.mjs.map

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

package/dist/js/flr-universal.mjs

@@ -139,6 +139,7 @@ import './components/src/components/Badge/Badge.mjs';
 import 'react-aria-components';
 export { BrowserOnly } from './components/src/components/BrowserOnly/BrowserOnly.mjs';
 import 'recharts';
+import './components/src/lib/tokens/CategoricalColors.mjs';
 import './components/src/components/Heading/Heading.mjs';
 import './components/src/components/Text/Text.mjs';
 import './components/src/components/Checkbox/Checkbox.mjs';

package/dist/js/flr-universal.mjs.map

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