npm - @mittwald/flow-react-components - Versions diffs - 0.2.0-alpha.804 → 0.2.0-alpha.806 - Mend

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

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

Files changed (269) hide show

package/dist/js/_virtual/_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs ADDED Viewed

@@ -0,0 +1,14 @@
+"use client"
+/* */
+const locales = {"de-DE":{
+  "showLess": "Weniger anzeigen",
+  "showMore": "Mehr anzeigen"
+}
+,"en-US":{
+  "showLess": "Show less",
+  "showMore": "Show more"
+}
+};
+export { locales as default };
+//# sourceMappingURL=_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs.map

package/dist/js/_virtual/_.locale.json@cbc1b50fe3e51afbdb1b35a65308b79e.mjs.map ADDED Viewed

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

package/dist/js/default.mjs CHANGED Viewed

@@ -28,7 +28,8 @@ export { CartesianChart, typedCartesianChart } from './packages/components/src/c
 export { Area, TypedArea } from './packages/components/src/components/CartesianChart/components/Area/Area.mjs';
 export { AreaDot } from './packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs';
 export { Line, TypedLine } from './packages/components/src/components/CartesianChart/components/Line/Line.mjs';
-export { ChartTooltip, TypedChartTooltip } from './packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs';
+export { ChartTooltip } from './packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs';
+export { TypedChartTooltip } from './packages/components/src/components/CartesianChart/components/ChartTooltip/types.mjs';
 export { ChartGrid, TypedChartGrid } from './packages/components/src/components/CartesianChart/components/ChartGrid/ChartGrid.mjs';
 export { CartesianGrid } from './packages/components/src/components/CartesianChart/components/CartesianGrid/CartesianGrid.mjs';
 export { ChartLegend, TypedChartLegend } from './packages/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs';

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

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

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

@@ -131,29 +131,29 @@ export { IconSuccess } from './packages/components/src/components/Icon/component
 export { IconUnavailable } from './packages/components/src/components/Icon/components/icons/IconUnavailable.mjs';
 export { IconWarning } from './packages/components/src/components/Icon/components/icons/IconWarning.mjs';
 import './packages/components/src/components/AccentBox/AccentBox.mjs';
-import 'react/jsx-runtime';
-import 'react';
-import 'clsx';
-import './packages/components/src/lib/propsContext/propsContext.mjs';
-import './packages/components/src/lib/propsContext/components/PropsContextProvider.mjs';
-import './packages/components/src/components/Button/Button.mjs';
-import '@mittwald/react-tunnel';
-import './packages/components/src/components/Activity/Activity.mjs';
+import './packages/components/src/components/Accordion/Accordion.mjs';
 export { Action } from './packages/components/src/components/Action/Action.mjs';
 export { ActionBatch } from './packages/components/src/components/Action/ActionBatch.mjs';
 import './packages/components/src/components/TranslationProvider/TranslationProvider.mjs';
 import 'remeda';
 import 'intl-messageformat';
 import '@react-aria/i18n';
+import 'react';
 export { useLanguage } from './packages/components/src/lib/hooks/useLanguage.mjs';
 import '@react-aria/live-announcer';
 import './packages/components/src/components/ActionGroup/ActionGroup.mjs';
+import './packages/components/src/components/Activity/Activity.mjs';
 import './packages/components/src/components/Alert/Alert.mjs';
 import './packages/components/src/components/AlertBadge/AlertBadge.mjs';
+import 'react/jsx-runtime';
 import './packages/components/src/components/AlertText/AlertText.mjs';
 import './packages/components/src/components/Align/Align.mjs';
 import './packages/components/src/components/Autocomplete/Autocomplete.mjs';
 import './packages/components/src/components/Avatar/Avatar.mjs';
+import 'clsx';
+import './packages/components/src/lib/propsContext/propsContext.mjs';
+import './packages/components/src/lib/propsContext/components/PropsContextProvider.mjs';
+import './packages/components/src/components/Button/Button.mjs';
 export { Wrap } from './packages/components/src/components/Wrap/Wrap.mjs';
 import './packages/components/src/components/Badge/Badge.mjs';
 import 'react-aria-components';
@@ -174,6 +174,7 @@ import './packages/components/src/views/SkeletonTextView.mjs';
 import './packages/components/src/components/ProgressBar/ProgressBar.mjs';
 import './packages/components/src/components/Label/Label.mjs';
 import './packages/components/src/views/LoadingSpinnerView.mjs';
+import './packages/components/src/components/Chat/Chat.mjs';
 import './packages/components/src/components/Checkbox/Checkbox.mjs';
 import './packages/components/src/components/CheckboxButton/CheckboxButton.mjs';
 import './packages/components/src/components/CheckboxGroup/CheckboxGroup.mjs';
@@ -258,6 +259,7 @@ import './packages/components/src/components/SuspenseTrigger/SuspenseTrigger.mjs
 import './packages/components/src/components/Switch/Switch.mjs';
 import './packages/components/src/components/Tabs/Tabs.mjs';
 import './packages/components/src/components/Tabs/components/Tab/context.mjs';
+import '@mittwald/react-tunnel';
 import './packages/components/src/components/TextArea/TextArea.mjs';
 import './packages/components/src/components/TextField/TextField.mjs';
 import './packages/components/src/components/TimeField/TimeField.mjs';

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

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

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

@@ -13,72 +13,82 @@ import '../Icon/components/IconSetProvider.mjs';
 import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
 import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import { Activity } from '../Activity/Activity.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
-const Accordion = (props) => {
-  const {
-    children,
-    className,
-    defaultExpanded = false,
-    variant = "default",
-    ...rest
-  } = props;
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const rootClassName = clsx(
-    styles.accordion,
-    expanded && styles.expanded,
-    className,
-    variant === "outline" && styles.outline
-  );
-  const headerId = useId();
-  const contentId = useId();
-  const headerButton = (children2) => /* @__PURE__ */ jsxs(
-    Button,
-    {
-      tunnelId: null,
-      unstyled: true,
-      "aria-expanded": expanded,
-      className: styles.headerButton,
-      onPress: () => setExpanded((expanded2) => !expanded2),
-      "aria-controls": contentId,
-      children: [
-        children2,
-        /* @__PURE__ */ jsx(IconChevronDown, { className: styles.chevron })
-      ]
-    }
-  );
-  const propsContext = {
-    Content: {
-      className: styles.contentInner,
-      tunnelId: "content"
-    },
-    Heading: {
-      className: styles.header,
-      level: 4,
-      size: "xs",
-      children: dynamic((props2) => headerButton(props2.children))
-    },
-    Label: {
-      className: styles.header,
-      children: dynamic((props2) => headerButton(props2.children))
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, dependencies: [expanded], children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-    children,
-    /* @__PURE__ */ jsx(
-      "div",
+const Accordion = flowComponent(
+  "Accordion",
+  (props) => {
+    const {
+      children,
+      className,
+      defaultExpanded = false,
+      variant = "default",
+      ...rest
+    } = props;
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const rootClassName = clsx(
+      styles.accordion,
+      expanded && styles.expanded,
+      className,
+      variant === "outline" && styles.outline
+    );
+    const headerId = useId();
+    const contentId = useId();
+    const headerButton = (children2) => /* @__PURE__ */ jsxs(
+      Button,
       {
-        "aria-labelledby": headerId,
-        id: contentId,
-        role: "region",
-        hidden: !expanded,
-        className: styles.content,
-        children: /* @__PURE__ */ jsx(Activity, { isActive: expanded, inactiveDelay: 1e3, children: /* @__PURE__ */ jsx(TunnelExit, { id: "content" }) })
+        tunnel: null,
+        unstyled: true,
+        "aria-expanded": expanded,
+        className: styles.headerButton,
+        onPress: () => setExpanded((expanded2) => !expanded2),
+        "aria-controls": contentId,
+        children: [
+          children2,
+          /* @__PURE__ */ jsx(IconChevronDown, { className: styles.chevron })
+        ]
       }
-    )
-  ] }) }) });
-};
+    );
+    const propsContext = {
+      Content: {
+        className: styles.contentInner,
+        tunnel: {
+          id: "content",
+          component: "Accordion"
+        }
+      },
+      Heading: {
+        className: styles.header,
+        level: 4,
+        size: "xs",
+        children: dynamic((props2) => headerButton(props2.children))
+      },
+      Label: {
+        className: styles.header,
+        children: dynamic((props2) => headerButton(props2.children))
+      }
+    };
+    return /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, dependencies: [expanded], children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-labelledby": headerId,
+          id: contentId,
+          role: "region",
+          hidden: !expanded,
+          className: styles.content,
+          children: /* @__PURE__ */ jsx(Activity, { isActive: expanded, inactiveDelay: 1e3, children: /* @__PURE__ */ jsx(UiComponentTunnelExit, { id: "content", component: "Accordion" }) })
+        }
+      )
+    ] }) });
+  },
+  {
+    type: "layout"
+  }
+);
 export { Accordion };
 //# sourceMappingURL=Accordion.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.mjs","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { ~~TunnelExit,~~ ~~TunnelProvider~~ } from \"~~@mittwald~~/~~react-tunnel~~\";\nimport { ~~Activity~~ } from \"@/~~components~~/~~Activity~~\";\n\nexport interface AccordionProps extends PropsWithChildren<\n ComponentProps<\"div\">\n> {\n /** Whether the accordion should be initially expanded. /\n defaultExpanded?: boolean;\n /* The visual variant of the accordion. @default \"default\" /\n variant?: \"default\" \| \"outline\";\n}\n\n/* @flr-generate all */\nexport const Accordion: FC<AccordionProps> = (props) => {\n const {\n children,\n className,\n defaultExpanded = false,\n variant = \"default\",\n ...rest\n } = props;\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n const rootClassName = clsx(\n styles.accordion,\n expanded && styles.expanded,\n className,\n variant === \"outline\" && styles.outline,\n );\n\n const headerId = useId();\n const contentId = useId();\n\n const headerButton = (children: ReactNode) => (\n <Button\n ~~tunnelId~~={null}\n unstyled\n aria-expanded={expanded}\n className={styles.headerButton}\n onPress={() => setExpanded((expanded) => !expanded)}\n aria-controls={contentId}\n >\n {children}\n <IconChevronDown className={styles.chevron} />\n </Button>\n );\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.contentInner,\n ~~tunnelId~~: \"content\",\n },\n Heading: {\n className: styles.header,\n level: 4,\n size: \"xs\",\n children: dynamic((props) => headerButton(props.children)),\n },\n Label: {\n className: styles.header,\n children: dynamic((props) => headerButton(props.children)),\n },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext} dependencies={[expanded]}>\n ~~<TunnelProvider>\n~~ {children}\n <div\n aria-labelledby={headerId}\n id={contentId}\n role=\"region\"\n hidden={!expanded}\n className={styles.content}\n >\n <Activity isActive={expanded} inactiveDelay={1000}>\n <~~TunnelExit~~ id=\"content\" />\n </Activity>\n </div>\n </~~TunnelProvider~~>\n </~~PropsContextProvider~~>\n ~~</div>\n~~ );\n};\n\nexport default Accordion;\n"],"names":["children","expanded","props"],"mappings":"~~;;;;;;;;;;;;;;;;AAqBO~~,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;~~AACtD~~,~~EAAA~~,MAAM;AAAA,~~IACJ~~,QAAA;AAAA,~~IACA~~,SAAA;AAAA,~~IACA~~,eAAA,GAAkB,KAAA;AAAA,~~IAClB~~,OAAA,GAAU,SAAA;AAAA,~~IACV~~,GAAG;AAAA,~~GACL~~,GAAI,KAAA;AACJ,~~EAAA~~,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,eAAe,CAAA;AAExD,~~EAAA~~,MAAM,aAAA,GAAgB,IAAA;AAAA,~~IACpB~~,MAAA,CAAO,SAAA;AAAA,~~IACP~~,YAAY,MAAA,CAAO,QAAA;AAAA,~~IACnB~~,SAAA;AAAA,~~IACA~~,OAAA,KAAY,aAAa,MAAA,CAAO;AAAA,~~GAClC~~;AAEA,~~EAAA~~,MAAM,WAAW,KAAA,EAAM;AACvB,~~EAAA~~,MAAM,YAAY,KAAA,EAAM;AAExB,~~EAAA~~,MAAM,YAAA,GAAe,CAACA,SAAAA,qBACpB,IAAA;AAAA,~~IAAC~~,MAAA;AAAA,~~IAAA~~;AAAA,~~MACC~~,~~QAAA~~,~~EAAU~~,IAAA;AAAA,~~MACV~~,QAAA,EAAQ,IAAA;AAAA,~~MACR~~,eAAA,EAAe,QAAA;AAAA,~~MACf~~,WAAW,MAAA,CAAO,YAAA;AAAA,~~MAClB~~,SAAS,MAAM,WAAA,CAAY,CAACC,SAAAA,KAAa,CAACA,SAAQ,CAAA;AAAA,~~MAClD~~,eAAA,EAAe,SAAA;AAAA,~~MAEd~~,QAAA,EAAA;AAAA,~~QAAAD~~,SAAAA;AAAA,~~wBACD~~,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,OAAA,EAAS;AAAA;AAAA;AAAA,~~GAC9C~~;AAGF,~~EAAA~~,MAAM,YAAA,GAA6B;AAAA,~~IACjC~~,OAAA,EAAS;AAAA,~~MACP~~,WAAW,MAAA,CAAO,YAAA;AAAA,~~MAClB~~,~~QAAA~~,~~EAAU~~;AAAA,~~KACZ~~;AAAA,~~IACA~~,OAAA,EAAS;AAAA,~~MACP~~,WAAW,MAAA,CAAO,MAAA;AAAA,~~MAClB~~,KAAA,EAAO,CAAA;AAAA,~~MACP~~,IAAA,EAAM,IAAA;AAAA,~~MACN~~,UAAU,OAAA,CAAQ,CAACE,WAAU,YAAA,CAAaA,MAAAA,CAAM,QAAQ,CAAC;AAAA,~~KAC3D~~;AAAA,~~IACA~~,KAAA,EAAO;AAAA,~~MACL~~,WAAW,MAAA,CAAO,MAAA;AAAA,~~MAClB~~,UAAU,OAAA,CAAQ,CAACA,WAAU,YAAA,CAAaA,MAAAA,CAAM,QAAQ,CAAC;AAAA;AAC3D,~~GACF~~;AAEA,~~EAAA~~,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,~~WAAW~~,aAAA,EACxB,QAAA,kBAAA,~~GAAA~~,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,~~cAAc~~,YAAA,EAAc,CAAC,QAAQ,CAAA,~~EAChE,+BAAC~~,~~cAAA,EAAA,EACE,~~QAAA,EAAA;AAAA,~~IAAA~~,QAAA;AAAA,~~oBACD~~,GAAA;AAAA,~~MAAC~~,KAAA;AAAA,~~MAAA~~;AAAA,~~QACC~~,iBAAA,EAAiB,QAAA;AAAA,~~QACjB~~,EAAA,EAAI,SAAA;AAAA,~~QACJ~~,IAAA,EAAK,QAAA;AAAA,~~QACL~~,QAAQ,CAAC,QAAA;AAAA,~~QACT~~,WAAW,MAAA,CAAO,OAAA;AAAA,~~QAElB~~,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,QAAA,EAAU,aAAA,EAAe,~~KAC3C~~,QAAA,kBAAA,GAAA,CAAC,~~UAAA~~,EAAA,~~EAAW~~,EAAA,EAAG,SAAA,EAAU,CAAA,~~EAC3B~~;AAAA;AAAA;AACF,~~GAAA~~,EACF,~~GACF,~~CAAA,EACF,CAAA;~~AAEJ~~;;;;"}
1	+ {"version":3,"file":"Accordion.mjs","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n ComponentProps<\"div\">\n> {\n /** Whether the accordion should be initially expanded. /\n defaultExpanded?: boolean;\n /* The visual variant of the accordion. @default \"default\" /\n variant?: \"default\" \| \"outline\";\n}\n\n/* @flr-generate all */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n \"Accordion\",\n (props) => {\n const {\n children,\n className,\n defaultExpanded = false,\n variant = \"default\",\n ...rest\n } = props;\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n const rootClassName = clsx(\n styles.accordion,\n expanded && styles.expanded,\n className,\n variant === \"outline\" && styles.outline,\n );\n\n const headerId = useId();\n const contentId = useId();\n\n const headerButton = (children: ReactNode) => (\n <Button\n tunnel={null}\n unstyled\n aria-expanded={expanded}\n className={styles.headerButton}\n onPress={() => setExpanded((expanded) => !expanded)}\n aria-controls={contentId}\n >\n {children}\n <IconChevronDown className={styles.chevron} />\n </Button>\n );\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.contentInner,\n tunnel: {\n id: \"content\",\n component: \"Accordion\",\n },\n },\n Heading: {\n className: styles.header,\n level: 4,\n size: \"xs\",\n children: dynamic((props) => headerButton(props.children)),\n },\n Label: {\n className: styles.header,\n children: dynamic((props) => headerButton(props.children)),\n },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n <PropsContextProvider props={propsContext} dependencies={[expanded]}>\n {children}\n <div\n aria-labelledby={headerId}\n id={contentId}\n role=\"region\"\n hidden={!expanded}\n className={styles.content}\n >\n <Activity isActive={expanded} inactiveDelay={1000}>\n <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n </Activity>\n </div>\n </PropsContextProvider>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Accordion;\n"],"names":["children","expanded","props"],"mappings":";;;;;;;;;;;;;;;;;AAsBO,MAAM,SAAA,GAAgC,aAAA;AAAA,EAC3C,WAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA,GAAkB,KAAA;AAAA,MAClB,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,eAAe,CAAA;AAExD,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,SAAA;AAAA,MACP,YAAY,MAAA,CAAO,QAAA;AAAA,MACnB,SAAA;AAAA,MACA,OAAA,KAAY,aAAa,MAAA,CAAO;AAAA,KAClC;AAEA,IAAA,MAAM,WAAW,KAAA,EAAM;AACvB,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,MAAM,YAAA,GAAe,CAACA,SAAAA,qBACpB,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,IAAA;AAAA,QACR,QAAA,EAAQ,IAAA;AAAA,QACR,eAAA,EAAe,QAAA;AAAA,QACf,WAAW,MAAA,CAAO,YAAA;AAAA,QAClB,SAAS,MAAM,WAAA,CAAY,CAACC,SAAAA,KAAa,CAACA,SAAQ,CAAA;AAAA,QAClD,eAAA,EAAe,SAAA;AAAA,QAEd,QAAA,EAAA;AAAA,UAAAD,SAAAA;AAAA,0BACD,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,OAAA,EAAS;AAAA;AAAA;AAAA,KAC9C;AAGF,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,YAAA;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,KAAA,EAAO,CAAA;AAAA,QACP,IAAA,EAAM,IAAA;AAAA,QACN,UAAU,OAAA,CAAQ,CAACE,WAAU,YAAA,CAAaA,MAAAA,CAAM,QAAQ,CAAC;AAAA,OAC3D;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,UAAU,OAAA,CAAQ,CAACA,WAAU,YAAA,CAAaA,MAAAA,CAAM,QAAQ,CAAC;AAAA;AAC3D,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACxB,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAAc,YAAA,EAAc,CAAC,QAAQ,CAAA,EAC/D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,iBAAA,EAAiB,QAAA;AAAA,UACjB,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA,EAAK,QAAA;AAAA,UACL,QAAQ,CAAC,QAAA;AAAA,UACT,WAAW,MAAA,CAAO,OAAA;AAAA,UAElB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,QAAA,EAAU,aAAA,EAAe,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,SAAA,EAAU,SAAA,EAAU,WAAA,EAAY,CAAA,EAC5D;AAAA;AAAA;AACF,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

package/dist/js/packages/components/src/components/Action/models/ActionStateContext.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useEffect, useContext } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 import { makeObservable, computed, action, observable } from 'mobx';
 import useSelector from '../../../lib/mobx/useSelector.mjs';
 import { useStatic } from '../../../lib/hooks/useStatic.mjs';

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

@@ -7,7 +7,6 @@ import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import clsx from 'clsx';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { TunnelProvider } from '@mittwald/react-tunnel';
 import { ActionStateContextProvider } from '../Action/models/ActionStateContext.mjs';
 import { getActionGroupSlot } from './lib/getActionGroupSlot.mjs';
@@ -42,7 +41,7 @@ const ActionGroup = flowComponent(
         })
       }
     };
-    return /* @__PURE__ */ jsx(ActionStateContextProvider, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, ref, role: "group", children }) }) }) });
+    return /* @__PURE__ */ jsx(ActionStateContextProvider, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, ref, role: "group", children }) }) });
   },
   {
     type: "layout"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionGroup.mjs","sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ~~TunnelProvider } from \"@mittwald/react-tunnel\";\nimport {~~ ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\n\nexport interface ActionGroupProps\n extends\n PropsWithChildren,\n FlowComponentProps<HTMLDivElement>,\n PropsWithClassName {\n /** The spacing between the buttons inside the action group. @default \"m\" /\n spacing?: \"s\" \| \"m\";\n}\n\n/* @flr-generate all */\nexport const ActionGroup = flowComponent(\n \"ActionGroup\",\n (props) => {\n const {\n children,\n className,\n ref,\n\n spacing = \"s\",\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.actionGroup, className, styles[spacing]);\n\n const propsContext: PropsContext = {\n Button: {\n slot: dynamic((props) => getActionGroupSlot(props)),\n className: dynamic((props) => {\n const slot = getActionGroupSlot(props);\n return clsx(props.className, styles[slot]);\n }),\n },\n Switch: {\n labelPosition: \"leading\",\n className: dynamic((props) => {\n return clsx(props.className, props.slot && styles[props.slot]);\n }),\n },\n Link: {\n className: dynamic((props) => {\n return clsx(props.className, props.slot && styles[props.slot]);\n }),\n },\n };\n\n return (\n <ActionStateContextProvider>\n <PropsContextProvider props={propsContext}>\n <~~TunnelProvider>\n <~~div {...rest} className={rootClassName} ref={ref} role=\"group\">\n {children}\n </div>\n ~~</TunnelProvider>\n~~ </PropsContextProvider>\n </ActionStateContextProvider>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default ActionGroup;\n"],"names":["props"],"mappings":"~~;;;;;;;;;;;AAsBO~~,MAAM,WAAA,GAAc,aAAA;AAAA,EACzB,aAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MAEA,OAAA,GAAU,GAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,aAAa,SAAA,EAAW,MAAA,CAAO,OAAO,CAAC,CAAA;AAEzE,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,MAAM,OAAA,CAAQ,CAACA,MAAAA,KAAU,kBAAA,CAAmBA,MAAK,CAAC,CAAA;AAAA,QAClD,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,MAAM,IAAA,GAAO,mBAAmBA,MAAK,CAAA;AACrC,UAAA,OAAO,IAAA,CAAKA,MAAAA,CAAM,SAAA,EAAW,MAAA,CAAO,IAAI,CAAC,CAAA;AAAA,QAC3C,CAAC;AAAA,OACH;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe,SAAA;AAAA,QACf,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,OAAO,IAAA,CAAKA,OAAM,SAAA,EAAWA,MAAAA,CAAM,QAAQ,MAAA,CAAOA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QAC/D,CAAC;AAAA,OACH;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,OAAO,IAAA,CAAKA,OAAM,SAAA,EAAWA,MAAAA,CAAM,QAAQ,MAAA,CAAOA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QAC/D,CAAC;AAAA;AACH,KACF;AAEA,IAAA,~~uBACE~~,~~GAAA~~,~~CAAC~~,~~8BACC~~,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,~~OAAO~~,~~YAAA~~,~~EAC3B~~,QAAA,kBAAA,GAAA,CAAC,~~kBACC,QAAA,kBAAA,GAAA,CAAC,~~KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,~~SAAA~~,~~EAAW~~,~~eAAe~~,GAAA,EAAU,~~IAAA~~,~~EAAK~~,~~SACrD~~,QAAA,EACH,~~CAAA,EACF,~~GACF,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}
1	+ {"version":3,"file":"ActionGroup.mjs","sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\n\nexport interface ActionGroupProps\n extends\n PropsWithChildren,\n FlowComponentProps<HTMLDivElement>,\n PropsWithClassName {\n /** The spacing between the buttons inside the action group. @default \"m\" /\n spacing?: \"s\" \| \"m\";\n}\n\n/* @flr-generate all */\nexport const ActionGroup = flowComponent(\n \"ActionGroup\",\n (props) => {\n const {\n children,\n className,\n ref,\n\n spacing = \"s\",\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.actionGroup, className, styles[spacing]);\n\n const propsContext: PropsContext = {\n Button: {\n slot: dynamic((props) => getActionGroupSlot(props)),\n className: dynamic((props) => {\n const slot = getActionGroupSlot(props);\n return clsx(props.className, styles[slot]);\n }),\n },\n Switch: {\n labelPosition: \"leading\",\n className: dynamic((props) => {\n return clsx(props.className, props.slot && styles[props.slot]);\n }),\n },\n Link: {\n className: dynamic((props) => {\n return clsx(props.className, props.slot && styles[props.slot]);\n }),\n },\n };\n\n return (\n <ActionStateContextProvider>\n <PropsContextProvider props={propsContext}>\n <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n {children}\n </div>\n </PropsContextProvider>\n </ActionStateContextProvider>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default ActionGroup;\n"],"names":["props"],"mappings":";;;;;;;;;;AAqBO,MAAM,WAAA,GAAc,aAAA;AAAA,EACzB,aAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MAEA,OAAA,GAAU,GAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,aAAa,SAAA,EAAW,MAAA,CAAO,OAAO,CAAC,CAAA;AAEzE,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,MAAA,EAAQ;AAAA,QACN,MAAM,OAAA,CAAQ,CAACA,MAAAA,KAAU,kBAAA,CAAmBA,MAAK,CAAC,CAAA;AAAA,QAClD,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,MAAM,IAAA,GAAO,mBAAmBA,MAAK,CAAA;AACrC,UAAA,OAAO,IAAA,CAAKA,MAAAA,CAAM,SAAA,EAAW,MAAA,CAAO,IAAI,CAAC,CAAA;AAAA,QAC3C,CAAC;AAAA,OACH;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe,SAAA;AAAA,QACf,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,OAAO,IAAA,CAAKA,OAAM,SAAA,EAAWA,MAAAA,CAAM,QAAQ,MAAA,CAAOA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QAC/D,CAAC;AAAA,OACH;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,UAAA,OAAO,IAAA,CAAKA,OAAM,SAAA,EAAWA,MAAAA,CAAM,QAAQ,MAAA,CAAOA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QAC/D,CAAC;AAAA;AACH,KACF;AAEA,IAAA,2BACG,0BAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,cAC3B,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,WAAW,aAAA,EAAe,GAAA,EAAU,MAAK,OAAA,EACrD,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

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

@@ -12,7 +12,6 @@ import 'dot-prop';
 import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { Options } from '../Options/Options.mjs';
-import { TunnelExit } from '@mittwald/react-tunnel';
 import locales from '../../../../../_virtual/_.locale.json@48bdcfec6dd32df5dc9f6fa222d33240.mjs';
 import { Text } from '../Text/Text.mjs';
 import styles from './Autocomplete.module.scss.mjs';
@@ -20,6 +19,7 @@ import { useObjectRef, useLocalizedStringFormatter, useFocusWithin, UNSAFE_Porta
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 import { isFocused } from '../../lib/form/isFocused.mjs';
 import { emitElementValueChange } from '../../lib/react/emitElementValueChange.mjs';
+import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
 const Autocomplete = flowComponent("Autocomplete", (props) => {
   const { children, ref, ...rest } = props;
@@ -62,12 +62,15 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
     FieldErrorCaptureContext,
     fieldPropsContext,
     fieldProps
-  } = useFieldComponent(props);
+  } = useFieldComponent(props, "Autocomplete");
   const propsContext = {
     SearchField: inputProps,
     TextField: inputProps,
     Option: {
-      tunnelId: "options"
+      tunnel: {
+        id: "options",
+        component: "Autocomplete"
+      }
     },
     Popover: {
       className: styles.popover
@@ -97,7 +100,13 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
                   renderEmptyState,
                   isNonModal: true,
                   placement: "bottom start",
-                  children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
+                  children: /* @__PURE__ */ jsx(
+                    UiComponentTunnelExit,
+                    {
+                      id: "options",
+                      component: "Autocomplete"
+                    }
+                  )
                 }
               )
             ]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport ~~{ TunnelExit } from \"@mittwald/react-tunnel\";\nimport~~ locales from \"./locales/.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n UNSAFE_PortalProvider,\n useFocusWithin,\n useLocalizedStringFormatter,\n useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\n\nexport interface AutocompleteProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps<HTMLInputElement>,\n Omit<\n Aria.AutocompleteProps,\n \"children\" \| \"onInputChange\" \| \"inputValue\" \| \"defaultInputValue\" \| \"ref\"\n > {}\n\n/* @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n const { children, ref, ...rest } = props;\n\n const inputRef = useObjectRef(ref);\n\n const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n const stringFormatter = useLocalizedStringFormatter(locales);\n const container = useRef(null);\n\n const optionsOverlayController = useOverlayController(\"Popover\", {\n reuseControllerFromContext: false,\n });\n\n const focusWithin = useFocusWithin({\n onBlurWithin: () => optionsOverlayController.close(),\n });\n\n const renderEmptyState = () => (\n <Text className={styles.empty}>\n {stringFormatter.format(\"autocomplete.empty\")}\n </Text>\n );\n\n const handleInputChange = (value: string) => {\n if (value === \"\") {\n optionsOverlayController.close();\n } else if (isFocused(inputRef.current)) {\n optionsOverlayController.open();\n }\n };\n\n const handleOptionAction = (key: Aria.Key) => {\n const value = String(key);\n if (inputRef.current) {\n emitElementValueChange(inputRef.current, value);\n }\n optionsOverlayController.close();\n };\n\n const inputProps: SearchFieldProps & TextFieldProps = {\n onKeyDown: (e) => {\n if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n e.preventDefault();\n }\n },\n ref: inputRef,\n onChange: handleInputChange,\n };\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props);\n\n const propsContext: PropsContext = {\n SearchField: inputProps,\n TextField: inputProps,\n Option: {\n ~~tunnelId~~: \"options\",\n },\n Popover: {\n className: styles.popover,\n },\n ...fieldPropsContext,\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[optionsOverlayController]}\n >\n <div {...focusWithin.focusWithinProps} ref={container}>\n <UNSAFE_PortalProvider getContainer={() => container.current}>\n <Aria.Autocomplete\n filter={contains}\n disableAutoFocusFirst\n {...rest}\n >\n {children}\n <Options\n onAction={handleOptionAction}\n triggerRef={inputRef}\n controller={optionsOverlayController}\n renderEmptyState={renderEmptyState}\n isNonModal\n placement=\"bottom start\"\n >\n <~~TunnelExit~~ id=\"options\" />\n </Options>\n </Aria.Autocomplete>\n </UNSAFE_PortalProvider>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEnC,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,EAAE,UAAS,GAAI,IAAA,CAAK,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,SAAA,GAAY,OAAO,IAAI,CAAA;AAE7B,EAAA,MAAM,wBAAA,GAA2B,qBAAqB,SAAA,EAAW;AAAA,IAC/D,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,cAAc,cAAA,CAAe;AAAA,IACjC,YAAA,EAAc,MAAM,wBAAA,CAAyB,KAAA;AAAM,GACpD,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,sBACvB,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,OAAO,KAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,oBAAoB,CAAA,EAC9C,CAAA;AAGF,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAkB;AAC3C,IAAA,IAAI,UAAU,EAAA,EAAI;AAChB,MAAA,wBAAA,CAAyB,KAAA,EAAM;AAAA,IACjC,CAAA,MAAA,IAAW,SAAA,CAAU,QAAA,CAAS,OAAO,CAAA,EAAG;AACtC,MAAA,wBAAA,CAAyB,IAAA,EAAK;AAAA,IAChC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqB,CAAC,GAAA,KAAkB;AAC5C,IAAA,MAAM,KAAA,GAAQ,OAAO,GAAG,CAAA;AACxB,IAAA,IAAI,SAAS,OAAA,EAAS;AACpB,MAAA,sBAAA,CAAuB,QAAA,CAAS,SAAS,KAAK,CAAA;AAAA,IAChD;AACA,IAAA,wBAAA,CAAyB,KAAA,EAAM;AAAA,EACjC,CAAA;AAEA,EAAA,MAAM,UAAA,GAAgD;AAAA,IACpD,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,wBAAA,CAAyB,MAAA,EAAQ;AACxD,QAAA,CAAA,CAAE,cAAA,EAAe;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,GAAA,EAAK,QAAA;AAAA,IACL,QAAA,EAAU;AAAA,GACZ;AAEA,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,~~kBAAkB~~,~~KAAK~~,CAAA;~~AAE3B~~,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa,UAAA;AAAA,IACb,SAAA,EAAW,UAAA;AAAA,IACX,MAAA,EAAQ;AAAA,MACN,~~QAAA~~,~~EAAU~~;AAAA,~~KACZ~~;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,wBAAwB,CAAA;AAAA,QAEvC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,WAAA,CAAY,gBAAA,EAAkB,GAAA,EAAK,SAAA,EAC1C,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,YAAA,EAAc,MAAM,SAAA,CAAU,OAAA,EACnD,QAAA,kBAAA,IAAA;AAAA,UAAC,IAAA,CAAK,YAAA;AAAA,UAAL;AAAA,YACC,MAAA,EAAQ,QAAA;AAAA,YACR,qBAAA,EAAqB,IAAA;AAAA,YACpB,GAAG,IAAA;AAAA,YAEH,QAAA,EAAA;AAAA,cAAA,QAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,QAAA,EAAU,kBAAA;AAAA,kBACV,UAAA,EAAY,QAAA;AAAA,kBACZ,UAAA,EAAY,wBAAA;AAAA,kBACZ,gBAAA;AAAA,kBACA,UAAA,EAAU,IAAA;AAAA,kBACV,SAAA,EAAU,cAAA;AAAA,kBAEV,QAAA,kBAAA,GAAA,~~CAAC~~,~~UAAA~~,~~EAAA~~,~~EAAW~~,EAAA,EAAG,SAAA,EAAU;AAAA;AAAA;~~AAC3B~~;AAAA;AAAA,WAEJ,CAAA,EACF;AAAA;AAAA,KACF,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n UNSAFE_PortalProvider,\n useFocusWithin,\n useLocalizedStringFormatter,\n useObjectRef,\n} from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AutocompleteProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps<HTMLInputElement>,\n Omit<\n Aria.AutocompleteProps,\n \"children\" \| \"onInputChange\" \| \"inputValue\" \| \"defaultInputValue\" \| \"ref\"\n > {}\n\n/* @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n const { children, ref, ...rest } = props;\n\n const inputRef = useObjectRef(ref);\n\n const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n const stringFormatter = useLocalizedStringFormatter(locales);\n const container = useRef(null);\n\n const optionsOverlayController = useOverlayController(\"Popover\", {\n reuseControllerFromContext: false,\n });\n\n const focusWithin = useFocusWithin({\n onBlurWithin: () => optionsOverlayController.close(),\n });\n\n const renderEmptyState = () => (\n <Text className={styles.empty}>\n {stringFormatter.format(\"autocomplete.empty\")}\n </Text>\n );\n\n const handleInputChange = (value: string) => {\n if (value === \"\") {\n optionsOverlayController.close();\n } else if (isFocused(inputRef.current)) {\n optionsOverlayController.open();\n }\n };\n\n const handleOptionAction = (key: Aria.Key) => {\n const value = String(key);\n if (inputRef.current) {\n emitElementValueChange(inputRef.current, value);\n }\n optionsOverlayController.close();\n };\n\n const inputProps: SearchFieldProps & TextFieldProps = {\n onKeyDown: (e) => {\n if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n e.preventDefault();\n }\n },\n ref: inputRef,\n onChange: handleInputChange,\n };\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props, \"Autocomplete\");\n\n const propsContext: PropsContext = {\n SearchField: inputProps,\n TextField: inputProps,\n Option: {\n tunnel: {\n id: \"options\",\n component: \"Autocomplete\",\n },\n },\n Popover: {\n className: styles.popover,\n },\n ...fieldPropsContext,\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[optionsOverlayController]}\n >\n <div {...focusWithin.focusWithinProps} ref={container}>\n <UNSAFE_PortalProvider getContainer={() => container.current}>\n <Aria.Autocomplete\n filter={contains}\n disableAutoFocusFirst\n {...rest}\n >\n {children}\n <Options\n onAction={handleOptionAction}\n triggerRef={inputRef}\n controller={optionsOverlayController}\n renderEmptyState={renderEmptyState}\n isNonModal\n placement=\"bottom start\"\n >\n <UiComponentTunnelExit\n id=\"options\"\n component=\"Autocomplete\"\n />\n </Options>\n </Aria.Autocomplete>\n </UNSAFE_PortalProvider>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEnC,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,EAAE,UAAS,GAAI,IAAA,CAAK,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,SAAA,GAAY,OAAO,IAAI,CAAA;AAE7B,EAAA,MAAM,wBAAA,GAA2B,qBAAqB,SAAA,EAAW;AAAA,IAC/D,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,cAAc,cAAA,CAAe;AAAA,IACjC,YAAA,EAAc,MAAM,wBAAA,CAAyB,KAAA;AAAM,GACpD,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,sBACvB,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,OAAO,KAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,oBAAoB,CAAA,EAC9C,CAAA;AAGF,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAkB;AAC3C,IAAA,IAAI,UAAU,EAAA,EAAI;AAChB,MAAA,wBAAA,CAAyB,KAAA,EAAM;AAAA,IACjC,CAAA,MAAA,IAAW,SAAA,CAAU,QAAA,CAAS,OAAO,CAAA,EAAG;AACtC,MAAA,wBAAA,CAAyB,IAAA,EAAK;AAAA,IAChC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqB,CAAC,GAAA,KAAkB;AAC5C,IAAA,MAAM,KAAA,GAAQ,OAAO,GAAG,CAAA;AACxB,IAAA,IAAI,SAAS,OAAA,EAAS;AACpB,MAAA,sBAAA,CAAuB,QAAA,CAAS,SAAS,KAAK,CAAA;AAAA,IAChD;AACA,IAAA,wBAAA,CAAyB,KAAA,EAAM;AAAA,EACjC,CAAA;AAEA,EAAA,MAAM,UAAA,GAAgD;AAAA,IACpD,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,wBAAA,CAAyB,MAAA,EAAQ;AACxD,QAAA,CAAA,CAAE,cAAA,EAAe;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,GAAA,EAAK,QAAA;AAAA,IACL,QAAA,EAAU;AAAA,GACZ;AAEA,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA,CAAkB,KAAA,EAAO,cAAc,CAAA;AAE3C,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa,UAAA;AAAA,IACb,SAAA,EAAW,UAAA;AAAA,IACX,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,SAAA;AAAA,QACJ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,wBAAwB,CAAA;AAAA,QAEvC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,WAAA,CAAY,gBAAA,EAAkB,GAAA,EAAK,SAAA,EAC1C,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,YAAA,EAAc,MAAM,SAAA,CAAU,OAAA,EACnD,QAAA,kBAAA,IAAA;AAAA,UAAC,IAAA,CAAK,YAAA;AAAA,UAAL;AAAA,YACC,MAAA,EAAQ,QAAA;AAAA,YACR,qBAAA,EAAqB,IAAA;AAAA,YACpB,GAAG,IAAA;AAAA,YAEH,QAAA,EAAA;AAAA,cAAA,QAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,QAAA,EAAU,kBAAA;AAAA,kBACV,UAAA,EAAY,QAAA;AAAA,kBACZ,UAAA,EAAY,wBAAA;AAAA,kBACZ,gBAAA;AAAA,kBACA,UAAA,EAAU,IAAA;AAAA,kBACV,SAAA,EAAU,cAAA;AAAA,kBAEV,QAAA,kBAAA,GAAA;AAAA,oBAAC,qBAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAG,SAAA;AAAA,sBACH,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AACF;AAAA;AAAA,WAEJ,CAAA,EACF;AAAA;AAAA,KACF,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}

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

@@ -9,11 +9,24 @@ import { useChartClipRect } from './hooks/useChartClipRect.mjs';
 import DivView from '../../views/DivView.mjs';
 import { Wrap } from '../Wrap/Wrap.mjs';
 import { TypedArea } from './components/Area/Area.mjs';
-import { TypedChartGrid } from './components/ChartGrid/ChartGrid.mjs';
+import { TypedXAxis } from './components/XAxis/types.mjs';
 import { TypedYAxis } from './components/YAxis/types.mjs';
+import { TypedChartGrid } from './components/ChartGrid/ChartGrid.mjs';
 import { TypedChartLegend } from './components/ChartLegend/ChartLegend.mjs';
-import { TypedChartTooltip } from './components/ChartTooltip/ChartTooltip.mjs';
-import { TypedXAxis } from './components/XAxis/types.mjs';
+import '@mittwald/react-use-promise';
+import '../Heading/Heading.mjs';
+import '../Text/Text.mjs';
+import '../../lib/tokens/CategoricalColors.mjs';
+import '../../views/SkeletonTextView.mjs';
+import '../ProgressBar/ProgressBar.mjs';
+import '../Label/Label.mjs';
+import '../TranslationProvider/TranslationProvider.mjs';
+import 'remeda';
+import 'intl-messageformat';
+import '@react-aria/i18n';
+import 'react-aria';
+import '../../views/LoadingSpinnerView.mjs';
+import { TypedChartTooltip } from './components/ChartTooltip/types.mjs';
 import { TypedLine } from './components/Line/Line.mjs';
 const CartesianChart = (props) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport React, {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\n\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { ~~TypedChartGrid~~ } from \"@/components/CartesianChart/components/~~ChartGrid~~\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { ~~TypedChartLegend~~ } from \"@/components/CartesianChart/components/~~ChartLegend~~\";\nimport { ~~TypedChartTooltip~~ } from \"@/components/CartesianChart/components/~~ChartTooltip~~\";\nimport { ~~TypedXAxis~~ } from \"@/components/CartesianChart/components/~~XAxis~~\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport type ChartDataValue = Record<string, unknown>;\nexport type DataKey<TData> = keyof TData \| (() => keyof TData) \| number;\nexport type DataKeyValue<\n TData,\n TDataKey extends DataKey<TData>,\n> = TDataKey extends keyof TData\n ? TData[TDataKey]\n : TDataKey extends () => infer K\n ? K extends keyof TData\n ? TData[K]\n : TData[keyof TData]\n : TData[keyof TData];\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n data?: TData[];\n\n height?: string;\n\n /* View that is provided when data is empty/undefined /\n emptyView?: ReactNode;\n\n /\n Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n /\n flexGrow?: boolean;\n}\n\n/* @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const { children, data, className, height, flexGrow, emptyView, ...rest } =\n props;\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n className,\n showEmptyView && styles.emptyView,\n );\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n console.warn(\n \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n );\n return null;\n }, [emptyView]);\n\n return (\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart data={data} className={rootClassName} {...rest}>\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {emptyElement}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n );\n};\n\nexport const typedCartesianChart = <TData = ~~ChartDataValue,>~~() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n XAxis: TypedXAxis<TData>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;AAgEO~~,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,UAAU,IAAA,EAAM,SAAA,EAAW,QAAQ,QAAA,EAAU,SAAA,EAAW,GAAG,IAAA,EAAK,GACtE,KAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAA,EAAK,YAAA,KAAiB,gBAAA,EAAiB;AAE/D,EAAA,MAAM,gBAAgB,CAAC,EAAA,CAAG,CAAC,IAAA,IAAQ,IAAA,CAAK,WAAW,CAAA,KAAM,SAAA,CAAA;AACzD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,iBAAiB,MAAA,CAAO;AAAA,GAC1B;AAEA,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,IAAI,cAAA,CAAe,SAAS,CAAA,EAAG;AAC7B,MAAA,OAAO,SAAA;AAAA,IACT;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,MAAA,EACR,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAQ,IAAA,EAAM,QAAA,GAAW,CAAA,GAAI,QAAU,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAkB;AAAA;AAAA,QAEhB,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO,SAAS,MAAA,GAAY,MAAA;AAAA,MAC5B,MAAA,EAAQ,SAAS,MAAA,GAAY,CAAA;AAAA,MAC7B,GAAA,EAAK,YAAA;AAAA,MAEL,+BAAC,aAAA,EAAA,EAAc,IAAA,EAAY,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EACtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,aAAA,IAAiB,cAAA,oBAChB,GAAA,CAAC,eAAA,EAAA,EAAe,GAAG,cAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,kBAAA,EACxB,QAAA,EAAA,YAAA,EACH,CAAA,EACF;AAAA,OAAA,EAEJ;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ;AAEO,MAAM,sBAAsB,~~OAAgC~~;AAAA,~~EACjE~~,KAAA,EAAO,cAAA;AAAA,EACP,MAAM,SAAA,EAAiB;AAAA,EACvB,OAAO,UAAA,~~EAAkB~~;AAAA,~~EACzB~~,OAAO,UAAA,EAAkB;AAAA,EACzB,MAAM,cAAA,EAAe;AAAA,EACrB,QAAQ,gBAAA,EAAiB;AAAA,EACzB,SAAS,iBAAA,~~EAAyB~~;AAAA,~~EAClC~~,MAAM,SAAA;AACR,CAAA;;;;"}
1	+ {"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport React, {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\n\n/** @deprecated Use a ReactNode instead /\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" \| \"syncId\" \| \"syncMethod\"\n >,\n PropsWithChildren {\n data?: TData[];\n\n height?: string;\n\n /* View that is provided when data is empty/undefined /\n emptyView?: ReactNode;\n\n /\n Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n /\n flexGrow?: boolean;\n}\n\n/* @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const { children, data, className, height, flexGrow, emptyView, ...rest } =\n props;\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data \|\| data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n className,\n showEmptyView && styles.emptyView,\n );\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n console.warn(\n \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n );\n return null;\n }, [emptyView]);\n\n return (\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart data={data} className={rootClassName} {...rest}>\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {emptyElement}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n );\n};\n\nexport const typedCartesianChart = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n TData extends ChartDataValue<any> = ChartDataValue<any>,\n XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n XAxis: TypedXAxis<TData, XAxisDataKey>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDO,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,UAAU,IAAA,EAAM,SAAA,EAAW,QAAQ,QAAA,EAAU,SAAA,EAAW,GAAG,IAAA,EAAK,GACtE,KAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAA,EAAK,YAAA,KAAiB,gBAAA,EAAiB;AAE/D,EAAA,MAAM,gBAAgB,CAAC,EAAA,CAAG,CAAC,IAAA,IAAQ,IAAA,CAAK,WAAW,CAAA,KAAM,SAAA,CAAA;AACzD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,iBAAiB,MAAA,CAAO;AAAA,GAC1B;AAEA,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,IAAI,cAAA,CAAe,SAAS,CAAA,EAAG;AAC7B,MAAA,OAAO,SAAA;AAAA,IACT;AAEA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,OAAO,IAAA;AAAA,EACT,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,MAAA,EACR,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,MAAA,EAAQ,IAAA,EAAM,QAAA,GAAW,CAAA,GAAI,QAAU,EACnD,QAAA,kBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,gBAAA,EAAkB;AAAA;AAAA,QAEhB,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO,SAAS,MAAA,GAAY,MAAA;AAAA,MAC5B,MAAA,EAAQ,SAAS,MAAA,GAAY,CAAA;AAAA,MAC7B,GAAA,EAAK,YAAA;AAAA,MAEL,+BAAC,aAAA,EAAA,EAAc,IAAA,EAAY,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EACtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,aAAA,IAAiB,cAAA,oBAChB,GAAA,CAAC,eAAA,EAAA,EAAe,GAAG,cAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,kBAAA,EACxB,QAAA,EAAA,YAAA,EACH,CAAA,EACF;AAAA,OAAA,EAEJ;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ;AAEO,MAAM,sBAAsB,OAI3B;AAAA,EACN,KAAA,EAAO,cAAA;AAAA,EACP,MAAM,SAAA,EAAiB;AAAA,EACvB,OAAO,UAAA,EAAgC;AAAA,EACvC,OAAO,UAAA,EAAkB;AAAA,EACzB,MAAM,cAAA,EAAe;AAAA,EACrB,QAAQ,gBAAA,EAAiB;AAAA,EACzB,SAAS,iBAAA,EAAuC;AAAA,EAChD,MAAM,SAAA;AACR,CAAA;;;;"}

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

@@ -6,6 +6,7 @@ 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';
+import { isDataKeyWithLabel } from '../../types.mjs';
 const Area = (props) => {
   const {
@@ -18,6 +19,7 @@ const Area = (props) => {
   return /* @__PURE__ */ jsx(
     Recharts.Area,
     {
+      name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,
       stackId,
       fillOpacity,
       ...rest,

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

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

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

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

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

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Legend } from '../../../Legend/Legend.mjs';
 import { LegendItem } from '../../../Legend/components/LegendItem/LegendItem.mjs';
+import { isDataKeyWithLabel } from '../../types.mjs';
 const LegendContent = (props) => {
   const { formatter, payload } = props;
@@ -11,7 +12,8 @@ const LegendContent = (props) => {
   ).map((entry, 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}`);
+    const name = typeof dataKey === "function" ? isDataKeyWithLabel(payload2) ? payload2.dataKeyLabel : "" : String(dataKey);
+    return /* @__PURE__ */ jsx(LegendItem, { color: fill, children: formatter ? formatter(name, index) : name }, `legendItem-${index}`);
   }) });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LegendContent.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartLegend/LegendContent.tsx"],"sourcesContent":["import type { Props } from \"recharts/types/component/DefaultLegendContent\";\nimport type { WithChartLegendFormatters } from \"./ChartLegend\";\nimport type { FC } from \"react\";\nimport Legend, { LegendItem } from \"@/components/Legend\";\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;;;;"}
1	+ {"version":3,"file":"LegendContent.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartLegend/LegendContent.tsx"],"sourcesContent":["import type { Props } from \"recharts/types/component/DefaultLegendContent\";\nimport type { WithChartLegendFormatters } from \"./ChartLegend\";\nimport type { FC } from \"react\";\nimport Legend, { LegendItem } from \"@/components/Legend\";\n\nimport { isDataKeyWithLabel } from \"@/components/CartesianChart/types\";\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 const name =\n typeof dataKey === \"function\"\n ? isDataKeyWithLabel(payload)\n ? payload.dataKeyLabel\n : \"\"\n : String(dataKey);\n\n return (\n <LegendItem key={`legendItem-${index}`} color={fill}>\n {formatter ? formatter(name, index) : name}\n </LegendItem>\n );\n })}\n </Legend>\n );\n};\n\nexport default LegendContent;\n"],"names":["payload"],"mappings":";;;;;AASA,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,MAAM,IAAA,GACJ,OAAO,OAAA,KAAY,UAAA,GACf,kBAAA,CAAmBA,QAAO,CAAA,GACxBA,QAAAA,CAAQ,YAAA,GACR,EAAA,GACF,MAAA,CAAO,OAAO,CAAA;AAEpB,IAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAuC,KAAA,EAAO,IAAA,EAC5C,QAAA,EAAA,SAAA,GAAY,SAAA,CAAU,IAAA,EAAM,KAAK,CAAA,GAAI,IAAA,EAAA,EADvB,CAAA,WAAA,EAAc,KAAK,CAAA,CAEpC,CAAA;AAAA,EAEJ,CAAC,CAAA,EACL,CAAA;AAEJ;;;;"}

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

@@ -3,13 +3,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { Suspense } from 'react';
 import { Tooltip } from 'recharts';
-import '../../../Text/Text.mjs';
-import clsx from 'clsx';
-import '../../../../lib/tokens/CategoricalColors.mjs';
-import '@mittwald/react-use-promise';
 import { TooltipContent } from './TooltipContent.mjs';
+import clsx from 'clsx';
 import styles from './ChartTooltip.module.scss.mjs';
 import LoadingSpinnerView from '../../../../views/LoadingSpinnerView.mjs';
+import 'use-callback-ref';
+import '../../../../views/DivView.mjs';
+import '../../../../lib/tokens/CategoricalColors.mjs';
+import '../../../Text/Text.mjs';
 const ChartTooltip = (props) => {
   const {
@@ -41,7 +42,6 @@ const ChartTooltip = (props) => {
     }
   );
 };
-const TypedChartTooltip = () => ChartTooltip;
-export { ChartTooltip, TypedChartTooltip };
+export { ChartTooltip };
 //# sourceMappingURL=ChartTooltip.mjs.map