@mittwald/flow-react-components 0.2.0-alpha.804 → 0.2.0-alpha.806

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

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

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

@@ -21,7 +21,7 @@ const TooltipContent = (props) => {
   const formattedHeading = usePromise(
     async (label2, formatter2) => {
       if (!formatter2) {
-        return label2;
+        return String(label2);
       }
       return formatter2(label2);
     },

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

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

@@ -9,15 +9,15 @@ const TooltipLegendItem = ({
   item,
   index
 }) => {
-  const { value, dataKey, unit, fill } = item;
+  const { value, dataKey, unit, fill, name } = item;
   const formattedLabel = usePromise(
-    async (value2, dataKey2, index2, unit2, formatter2) => {
+    async (value2, dataKey2, index2, unit2, formatter2, name2) => {
       if (!formatter2) {
-        return `${dataKey2} (${value2}${unit2 ? ` ${unit2}` : ""})`;
+        return `${name2 ?? ""} (${value2 ?? ""}${unit2 ? unit2 : ""})`;
       }
-      return formatter2(value2, dataKey2, index2, unit2);
+      return formatter2(value2, String(name2), index2, unit2);
     },
-    [value, dataKey, index, unit, formatter]
+    [value, dataKey, index, unit, formatter, name]
   );
   return /* @__PURE__ */ jsx(LegendItem, { color: fill, children: formattedLabel });
 };

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

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

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

@@ -24,11 +24,16 @@ const TooltipProgressBar = (props) => {
     value: i.value,
     color: i.fill
   }));
-  const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+  const total = areaItems.reduce((sum, segment) => {
+    if (typeof segment.value === "number") {
+      return sum + segment.value;
+    }
+    return sum;
+  }, 0);
   const formattedLabel = usePromise(
     async (value, unit2, formatter) => {
       if (!formatter) {
-        return `${value}${unit2 ? ` ${unit2}` : ""}`;
+        return `${value}${unit2 ? unit2 : ""}`;
       }
       return formatter(value, unit2);
     },

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

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

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

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import 'react/jsx-runtime';
+import 'recharts';
+import 'react';
+import 'clsx';
+import 'use-callback-ref';
+import '../../../../views/DivView.mjs';
+import '../../../../lib/tokens/CategoricalColors.mjs';
+import '../../../Text/Text.mjs';
+import { ChartTooltip } from './ChartTooltip.mjs';
+
+const TypedChartTooltip = () => ChartTooltip;
+
+export { TypedChartTooltip };
+//# sourceMappingURL=types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/types.ts"],"sourcesContent":["import {\n  ChartTooltip,\n  type ChartTooltipProps,\n} from \"@/components/CartesianChart\";\nimport type { ComponentType } from \"react\";\nimport type {\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\n\nexport const TypedChartTooltip = <\n  TData extends ChartDataValue = ChartDataValue,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() =>\n  ChartTooltip as unknown as ComponentType<\n    ChartTooltipProps<TData, XAxisDataKey>\n  >;\nexport type TooltipLineFormatter<TData extends ChartDataValue> = (\n  value: TData[keyof TData],\n  name: DataKeyProp<TData>,\n  index: number,\n  unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> | string;\n\nexport type TooltipHeadingFormatter<TTitleType> = (\n  title: TTitleType,\n) => Promise<string> | string;\n\nexport type TooltipLProgressBarFormatter = (\n  value: number,\n  unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> | string;\n\nexport interface WithTooltipFormatters<\n  TData extends ChartDataValue,\n  TitleDataKey extends keyof TData = keyof TData,\n> {\n  /**\n   * A formatter function for the lines in the tooltip. Can be used for purposes\n   * like translations.\n   */\n  formatter?: TooltipLineFormatter<Exclude<TData, TitleDataKey>>;\n  /**\n   * A formatter function for the heading of the tooltip. Can be used for\n   * purposes like translations.\n   */\n  headingFormatter?: TooltipHeadingFormatter<TData[TitleDataKey]>;\n  /**\n   * A formatter function for the progressBar of the tooltip. Can be used for\n   * purposes like translations.\n   */\n  progressBarFormatter?: TooltipLProgressBarFormatter;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAWO,MAAM,oBAAoB,MAI/B;;;;"}

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

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

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

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

@@ -7,6 +7,7 @@ import 'clsx';
 import 'use-callback-ref';
 import '../../../../views/DivView.mjs';
 import '../../../../lib/tokens/CategoricalColors.mjs';
+import { XAxis } from './XAxis.mjs';
 import '../../../Text/Text.mjs';
 import '@mittwald/react-use-promise';
 import '../../../Heading/Heading.mjs';
@@ -19,7 +20,6 @@ import 'intl-messageformat';
 import '@react-aria/i18n';
 import 'react-aria';
 import '../../../../views/LoadingSpinnerView.mjs';
-import { XAxis } from './XAxis.mjs';
 
 const TypedXAxis = () => XAxis;
 

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+"use client"
+/* */
+const isDataKeyWithLabel = (obj) => {
+  return typeof obj === "object" && obj !== null && "dataKeyLabel" in obj && typeof obj.dataKeyLabel === "string";
+};
+
+export { isDataKeyWithLabel };
+//# sourceMappingURL=types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":["../../../../../../../src/components/CartesianChart/types.ts"],"sourcesContent":["export type ChartDataValue<TValue = unknown> = Record<string, TValue>;\n\nexport interface DataKeyWithLabel<TData extends ChartDataValue> {\n  dataKey: DataKeyFn<TData>;\n  dataKeyLabel: DataKeyProp<TData>;\n}\n\nexport type DataKeyFn<\n  TData extends ChartDataValue = ChartDataValue,\n  TValue = unknown,\n> = (data: TData) => TValue;\n\nexport type DataKeyProp<TData extends ChartDataValue = ChartDataValue> =\n  keyof TData;\n\nexport type DataKey<\n  TData extends ChartDataValue = ChartDataValue,\n  TValue = unknown,\n> = DataKeyProp<TData> | DataKeyFn<TData, TValue>;\n\nexport type DataKeyValue<\n  TData extends ChartDataValue,\n  TDataKey extends DataKey<TData>,\n> = TDataKey extends (data: TData) => infer R\n  ? R\n  : TDataKey extends keyof TData\n    ? TData[TDataKey]\n    : never;\n\nexport const isDataKeyWithLabel = <TData extends ChartDataValue>(\n  obj: unknown,\n): obj is DataKeyWithLabel<TData> => {\n  return (\n    typeof obj === \"object\" &&\n    obj !== null &&\n    \"dataKeyLabel\" in obj &&\n    typeof obj.dataKeyLabel === \"string\"\n  );\n};\n"],"names":[],"mappings":"AA6BO,MAAM,kBAAA,GAAqB,CAChC,GAAA,KACmC;AACnC,EAAA,OACE,OAAO,QAAQ,QAAA,IACf,GAAA,KAAQ,QACR,cAAA,IAAkB,GAAA,IAClB,OAAO,GAAA,CAAI,YAAA,KAAiB,QAAA;AAEhC;;;;"}

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

@@ -6,28 +6,44 @@ import styles from './Chat.module.scss.mjs';
 import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
 
-const Chat = (props) => {
-  const { height, className, children } = props;
-  const rootClassName = clsx(styles.chat, className);
-  const propsContext = {
-    MessageThread: {
-      tunnelId: "messageThread"
-    },
-    FileCardList: { className: styles.fileCardList, tunnelId: "fileCardList" },
-    Button: {
-      className: dynamic((props2) => {
-        return props2.color === "accent" ? styles.accentButton : styles.button;
-      })
-    }
-  };
-  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { style: { height }, className: rootClassName, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles.messageThreadContainer, children: /* @__PURE__ */ jsx(TunnelExit, { id: "messageThread" }) }),
-    /* @__PURE__ */ jsx("div", { className: styles.controls, children }),
-    /* @__PURE__ */ jsx(TunnelExit, { id: "fileCardList" })
-  ] }) }) });
-};
+const Chat = flowComponent(
+  "Chat",
+  (props) => {
+    const { height, className, children } = props;
+    const rootClassName = clsx(styles.chat, className);
+    const propsContext = {
+      MessageThread: {
+        tunnel: {
+          id: "messageThread",
+          component: "Chat"
+        }
+      },
+      FileCardList: {
+        className: styles.fileCardList,
+        tunnel: {
+          id: "fileCardList",
+          component: "Chat"
+        }
+      },
+      Button: {
+        className: dynamic((props2) => {
+          return props2.color === "accent" ? styles.accentButton : styles.button;
+        })
+      }
+    };
+    return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs("div", { style: { height }, className: rootClassName, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.messageThreadContainer, children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "messageThread", component: "Chat" }) }),
+      /* @__PURE__ */ jsx("div", { className: styles.controls, children }),
+      /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "fileCardList", component: "Chat" })
+    ] }) });
+  },
+  {
+    type: "layout"
+  }
+);
 
 export { Chat };
 //# sourceMappingURL=Chat.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.mjs","sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n  // Height of the chat component\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = (props) => {\n  const { height, className, children } = props;\n\n  const rootClassName = clsx(styles.chat, className);\n\n  const propsContext: PropsContext = {\n    MessageThread: {\n      tunnelId: \"messageThread\",\n    },\n    FileCardList: { className: styles.fileCardList, tunnelId: \"fileCardList\" },\n    Button: {\n      className: dynamic((props) => {\n        return props.color === \"accent\" ? styles.accentButton : styles.button;\n      }),\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div style={{ height }} className={rootClassName}>\n        <TunnelProvider>\n          <div className={styles.messageThreadContainer}>\n            <TunnelExit id=\"messageThread\" />\n          </div>\n          <div className={styles.controls}>{children}</div>\n          <TunnelExit id=\"fileCardList\" />\n        </TunnelProvider>\n      </div>\n    </PropsContextProvider>\n  );\n};\n\nexport default Chat;\n"],"names":["props"],"mappings":";;;;;;;;AAiBO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AAExC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAEjD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,aAAA,EAAe;AAAA,MACb,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,cAAc,EAAE,SAAA,EAAW,MAAA,CAAO,YAAA,EAAc,UAAU,cAAA,EAAe;AAAA,IACzE,MAAA,EAAQ;AAAA,MACN,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,QAAA,OAAOA,MAAAA,CAAM,KAAA,KAAU,QAAA,GAAW,MAAA,CAAO,eAAe,MAAA,CAAO,MAAA;AAAA,MACjE,CAAC;AAAA;AACH,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAO,EAAG,SAAA,EAAW,aAAA,EACjC,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,sBAAA,EACrB,8BAAC,UAAA,EAAA,EAAW,EAAA,EAAG,iBAAgB,CAAA,EACjC,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,UAAW,QAAA,EAAS,CAAA;AAAA,oBAC3C,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,cAAA,EAAe;AAAA,GAAA,EAChC,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Chat.mjs","sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n  // Height of the chat component\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n  \"Chat\",\n  (props) => {\n    const { height, className, children } = props;\n\n    const rootClassName = clsx(styles.chat, className);\n\n    const propsContext: PropsContext = {\n      MessageThread: {\n        tunnel: {\n          id: \"messageThread\",\n          component: \"Chat\",\n        },\n      },\n      FileCardList: {\n        className: styles.fileCardList,\n        tunnel: {\n          id: \"fileCardList\",\n          component: \"Chat\",\n        },\n      },\n      Button: {\n        className: dynamic((props) => {\n          return props.color === \"accent\" ? styles.accentButton : styles.button;\n        }),\n      },\n    };\n\n    return (\n      <PropsContextProvider props={propsContext}>\n        <div style={{ height }} className={rootClassName}>\n          <div className={styles.messageThreadContainer}>\n            <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n          </div>\n          <div className={styles.controls}>{children}</div>\n          <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n        </div>\n      </PropsContextProvider>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Chat;\n"],"names":["props"],"mappings":";;;;;;;;;AAkBO,MAAM,IAAA,GAAsB,aAAA;AAAA,EACjC,MAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAA,EAAW,QAAA,EAAS,GAAI,KAAA;AAExC,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAEjD,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,aAAA,EAAe;AAAA,QACb,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,eAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,YAAA,EAAc;AAAA,QACZ,WAAW,MAAA,CAAO,YAAA;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,cAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,OAAOA,MAAAA,CAAM,KAAA,KAAU,QAAA,GAAW,MAAA,CAAO,eAAe,MAAA,CAAO,MAAA;AAAA,QACjE,CAAC;AAAA;AACH,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAO,EAAG,SAAA,EAAW,aAAA,EACjC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,sBAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,yBAAsB,EAAA,EAAG,eAAA,EAAgB,SAAA,EAAU,MAAA,EAAO,CAAA,EAC7D,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,UAAW,QAAA,EAAS,CAAA;AAAA,sBAC3C,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,cAAA,EAAe,WAAU,MAAA,EAAO;AAAA,KAAA,EAC5D,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

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

@@ -25,7 +25,7 @@ const Checkbox = flowComponent("Checkbox", (props) => {
     FieldErrorCaptureContext,
     fieldPropsContext,
     fieldProps
-  } = useFieldComponent(props);
+  } = useFieldComponent(props, "Checkbox");
   const inputRef = useObjectRef(ref);
   return /* @__PURE__ */ jsxs(
     "div",

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const inputRef = useObjectRef(ref);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(styles.checkbox, className, fieldProps.className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAyBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAA,EAAW,WAAW,SAAS,CAAA;AAAA,MAEhE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA,CAAK,QAAA;AAAA,UAAL;AAAA,YACE,GAAG,IAAA;AAAA,YACJ,QAAA;AAAA,YACA,SAAA,EAAW,IAAA,CAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,CAAA;AAAA,YAE3C,QAAA,EAAA,CAAC,EAAE,UAAA,EAAY,eAAA,uBACd,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC1B,QAAA,EAAA;AAAA,cAAA,UAAA,uBACE,mBAAA,EAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,IAC3C,eAAA,mBACF,GAAA,CAAC,yBAAA,EAAA,EAA0B,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA,uBAElD,iBAAA,EAAA,EAAkB,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,cAE5C;AAAA,aAAA,EACH;AAAA;AAAA,SAEJ,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(styles.checkbox, className, fieldProps.className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAyBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,UAAU,CAAA;AAEvC,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAA,EAAW,WAAW,SAAS,CAAA;AAAA,MAEhE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA,CAAK,QAAA;AAAA,UAAL;AAAA,YACE,GAAG,IAAA;AAAA,YACJ,QAAA;AAAA,YACA,SAAA,EAAW,IAAA,CAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,CAAA;AAAA,YAE3C,QAAA,EAAA,CAAC,EAAE,UAAA,EAAY,eAAA,uBACd,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC1B,QAAA,EAAA;AAAA,cAAA,UAAA,uBACE,mBAAA,EAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,IAC3C,eAAA,mBACF,GAAA,CAAC,yBAAA,EAAA,EAA0B,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA,uBAElD,iBAAA,EAAA,EAAkB,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,cAE5C;AAAA,aAAA,EACH;AAAA;AAAA,SAEJ,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

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

@@ -16,7 +16,7 @@ const CheckboxButton = flowComponent("CheckboxButton", (props) => {
     fieldProps,
     FieldErrorView,
     FieldErrorCaptureContext
-  } = useFieldComponent(props);
+  } = useFieldComponent(props, "CheckboxButton");
   const mergedPropsContext = {
     Text: {
       className: styles.label

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox {...rest} inputClassName={clsx(inputClassName, styles.input)}>\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAEzD,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,kBAAA,GAAmC;AAAA,IACvC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,gBAAgB,SAAS,CAAA;AAAA,MAEtE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,IAAA,EAAM,gBAAgB,IAAA,CAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,GACnE,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,kBAAA,EAC1B,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxButton\");\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox {...rest} inputClassName={clsx(inputClassName, styles.input)}>\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAEzD,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,gBAAgB,CAAA;AAE7C,EAAA,MAAM,kBAAA,GAAmC;AAAA,IACvC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,gBAAgB,SAAS,CAAA;AAAA,MAEtE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,IAAA,EAAM,gBAAgB,IAAA,CAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,GACnE,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,kBAAA,EAC1B,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

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

@@ -1,17 +1,17 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import clsx from 'clsx';
 import * as Aria from 'react-aria-components';
 import styles from './CheckboxGroup.module.scss.mjs';
 import { useObjectRef } from '@react-aria/utils';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
 
 const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
   const { children, className, isInvalid, s, m, l, ref, ...rest } = props;
@@ -20,23 +20,29 @@ const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
     fieldPropsContext,
     fieldProps,
     FieldErrorCaptureContext
-  } = useFieldComponent(props);
+  } = useFieldComponent(props, "CheckboxGroup");
   const propsContext = {
     Checkbox: {
       isInvalid,
-      tunnelId: "checkboxes",
-      className: styles.checkbox
+      className: styles.checkbox,
+      tunnel: {
+        id: "checkboxes",
+        component: "CheckboxGroup"
+      }
     },
     CheckboxButton: {
       isInvalid,
-      tunnelId: "checkboxButtons",
-      className: styles.checkboxButton
+      className: styles.checkboxButton,
+      tunnel: {
+        id: "checkboxButtons",
+        component: "CheckboxGroup"
+      }
     },
     ...fieldPropsContext
   };
   const objectRef = useObjectRef(ref);
   useMakeFocusable(objectRef);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Aria.CheckboxGroup,
     {
       ...rest,
@@ -44,10 +50,16 @@ const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
       isInvalid,
       className: clsx(fieldProps.className, className),
       ref: objectRef,
-      children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+      children: [
         /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
           children,
-          /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.checkboxGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "checkboxButtons" }) }),
+          /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.checkboxGroup, children: /* @__PURE__ */ jsx(
+            UiComponentTunnelExit,
+            {
+              id: "checkboxButtons",
+              component: "CheckboxGroup"
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             ColumnLayout,
             {
@@ -56,12 +68,12 @@ const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
               l: l ?? [1],
               rowGap: "s",
               className: styles.checkboxGroup,
-              children: /* @__PURE__ */ jsx(TunnelExit, { id: "checkboxes" })
+              children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "checkboxes", component: "CheckboxGroup" })
             }
           )
         ] }) }),
         /* @__PURE__ */ jsx(FieldErrorView, {})
-      ] })
+      ]
     }
   );
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      tunnelId: \"checkboxes\",\n      className: styles.checkbox,\n    },\n    CheckboxButton: {\n      isInvalid,\n      tunnelId: \"checkboxButtons\",\n      className: styles.checkboxButton,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...fieldProps}\n      isInvalid={isInvalid}\n      className={clsx(fieldProps.className, className)}\n      ref={objectRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            {children}\n\n            <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n              <TunnelExit id=\"checkboxButtons\" />\n            </ColumnLayout>\n\n            <ColumnLayout\n              s={s ?? [1]}\n              m={m ?? [1]}\n              l={l ?? [1]}\n              rowGap=\"s\"\n              className={styles.checkboxGroup}\n            >\n              <TunnelExit id=\"checkboxes\" />\n            </ColumnLayout>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAElE,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,SAAA;AAAA,MACA,QAAA,EAAU,iBAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAClC,EAAA,gBAAA,CAAiB,SAAS,CAAA;AAE1B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,aAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAAA,MAC/C,GAAA,EAAK,SAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,0BAED,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,aAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,iBAAA,EAAkB,CAAA,EACnC,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,aAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa;AAAA;AAAA;AAC9B,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxGroup.mjs","sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"CheckboxGroup\");\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      className: styles.checkbox,\n      tunnel: {\n        id: \"checkboxes\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    CheckboxButton: {\n      isInvalid,\n      className: styles.checkboxButton,\n      tunnel: {\n        id: \"checkboxButtons\",\n        component: \"CheckboxGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...fieldProps}\n      isInvalid={isInvalid}\n      className={clsx(fieldProps.className, className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n            <UiComponentTunnelExit\n              id=\"checkboxButtons\"\n              component=\"CheckboxGroup\"\n            />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.checkboxGroup}\n          >\n            <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n          </ColumnLayout>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAElE,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,eAAe,CAAA;AAE5C,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA,WAAW,MAAA,CAAO,QAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,YAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,SAAA;AAAA,MACA,WAAW,MAAA,CAAO,cAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,iBAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAClC,EAAA,gBAAA,CAAiB,SAAS,CAAA;AAE1B,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,aAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAAA,MAC/C,GAAA,EAAK,SAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,8BAEA,YAAA,EAAA,EAAa,CAAA,EAAM,GAAM,CAAA,EAAM,SAAA,EAAW,OAAO,aAAA,EAChD,QAAA,kBAAA,GAAA;AAAA,YAAC,qBAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAG,iBAAA;AAAA,cACH,SAAA,EAAU;AAAA;AAAA,WACZ,EACF,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,aAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,YAAA,EAAa,WAAU,eAAA,EAAgB;AAAA;AAAA;AACnE,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}