@mittwald/flow-react-components 0.2.0-alpha.837 → 0.2.0-alpha.839

package/dist/js/_virtual/_.locale.json@b1d0b6b6925b7464f548303aac486d45.mjs

@@ -0,0 +1,12 @@
+"use client"
+/* */
+const locales = {"de-DE":{
+  "notification.close": "Schließen"
+}
+,"en-US":{
+  "notification.close": "Close"
+}
+};
+
+export { locales as default };
+//# sourceMappingURL=_.locale.json@b1d0b6b6925b7464f548303aac486d45.mjs.map

package/dist/js/_virtual/_.locale.json@b1d0b6b6925b7464f548303aac486d45.mjs.map

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

package/dist/js/default.mjs

@@ -300,6 +300,14 @@ export { Truncate } from './packages/components/src/components/Truncate/Truncate
 export { TunnelEntry } from './packages/components/src/components/TunnelEntry/TunnelEntry.mjs';
 export { Wrap } from './packages/components/src/components/Wrap/Wrap.mjs';
 export { Render } from './packages/components/src/lib/react/components/Render/Render.mjs';
+export { ThemedHtml } from './packages/components/src/lib/theming/components/ThemedHtml.mjs';
+export { themeHtmlAttribute } from './packages/components/src/lib/theming/lib/keys.mjs';
+export { getTheme } from './packages/components/src/lib/theming/lib/getTheme.mjs';
+export { getResolvedTheme } from './packages/components/src/lib/theming/lib/getResolvedTheme.mjs';
+export { setTheme } from './packages/components/src/lib/theming/lib/setTheme.mjs';
+export { useTheme as useStoredTheme } from './packages/components/src/lib/theming/hooks/useTheme.mjs';
+export { useResolvedTheme as useTheme } from './packages/components/src/lib/theming/hooks/useResolvedTheme.mjs';
+export { useDesignTokens } from './packages/components/src/lib/theming/hooks/useDesignTokens.mjs';
 export { OverlayController } from './packages/components/src/lib/controller/overlay/OverlayController.mjs';
 export { useOverlayController } from './packages/components/src/lib/controller/overlay/useOverlayController.mjs';
 export { useModalController } from './packages/components/src/lib/controller/overlay/useModalController.mjs';

package/dist/js/default.mjs.map

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

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

@@ -24,7 +24,7 @@ function isFlowColor(something) {
 const AccentBox = flowComponent("AccentBox", (props) => {
   const {
     color: colorFromProps,
-    backgroundColor = "blue",
+    backgroundColor = "neutral",
     backgroundImage,
     children,
     elementType = "div",

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

@@ -1 +1 @@
-{"version":3,"file":"AccentBox.mjs","sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  | AccentBoxBackgroundColor\n  | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The background color of the accent box. @default \"blue\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/** @flr-generate all */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"blue\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark-static\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    className,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element className={rootClassName} style={style}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,yBAAA,GAA4B;AAAA,EAChC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA;AAOA,SAAS,YACP,SAAA,EACuC;AACvC,EAAA,MAAM,4BAAA,GACJ,yBAAA;AACF,EAAA,OACE,OAAO,SAAA,KAAc,QAAA,IACrB,4BAAA,CAA6B,SAAS,SAAS,CAAA;AAEnD;AAmBO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,cAAA;AAAA,IACP,eAAA,GAAkB,MAAA;AAAA,IAClB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,SAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,YAAA,GACH,cAAA,KAAyC,UAAA,IAC1C,eAAA,KAAoB,aAChB,aAAA,GACA,SAAA;AAEN,EAAA,MAAM,QAAQ,cAAA,IAAkB,YAAA;AAEhC,EAAA,MAAM,YAAA,GAAe,YAAY,eAAe,CAAA;AAGhD,EAAA,MAAM,2BACH,cAAA,KAAyC,SAAA,IACzC,mBAAyC,UAAA,IACzC,cAAA,KAAyC,UACrC,cAAA,GACD,MAAA;AAEN,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,eAAA,EAAiB,eAAe,MAAA,GAAY,eAAA;AAAA,IAC5C,eAAA,EAAiB,eAAA,GAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,CAAA,CAAA,GAAM,MAAA;AAAA,IAC/D,WAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,SAAA;AAAA,IACP,SAAA;AAAA,IACA,2BACI,MAAA,CAAO,wBAAwB,IAC/B,YAAA,GACE,MAAA,CAAO,eAAe,CAAA,GACtB;AAAA,GACR;AAEA,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,MAAM,YAAA,GAAe,KAAA,KAAU,SAAA,GAAY,MAAA,GAAY,KAAA;AAEvD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,KACT;AAAA,IACA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAe,KAAA,EACjC,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccentBox.mjs","sources":["../../../../../../../src/components/AccentBox/AccentBox.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport type {\n  AlphaColor,\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./AccentBox.module.scss\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\nconst accentBoxBackgroundColors = [\n  \"neutral\",\n  \"blue\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"navy\",\n  \"gradient\",\n] as const;\n\ntype AccentBoxBackgroundColor = (typeof accentBoxBackgroundColors)[number];\ntype AccentBoxWithCustomBackgroundColor =\n  | AccentBoxBackgroundColor\n  | (string & {});\n\nfunction isFlowColor(\n  something: unknown,\n): something is AccentBoxBackgroundColor {\n  const anyAccentBoxBackgroundColors =\n    accentBoxBackgroundColors as readonly string[];\n  return (\n    typeof something === \"string\" &&\n    anyAccentBoxBackgroundColors.includes(something)\n  );\n}\n\nexport interface AccentBoxProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"section\" | \"article\">,\n    PropsWithClassName,\n    FlowComponentProps {\n  /** The background color of the accent box. @default \"neutral\" */\n  backgroundColor?: AccentBoxWithCustomBackgroundColor;\n  /** The content color of the accent box. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The background image of the accent box. */\n  backgroundImage?: string;\n  /** The aspect ratio of the accent box. */\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n}\n\n/** @flr-generate all */\nexport const AccentBox = flowComponent(\"AccentBox\", (props) => {\n  const {\n    color: colorFromProps,\n    backgroundColor = \"neutral\",\n    backgroundImage,\n    children,\n    elementType = \"div\",\n    className,\n    style: styleFromProps,\n    aspectRatio,\n  } = props;\n\n  const defaultColor =\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    backgroundColor === \"gradient\"\n      ? \"dark-static\"\n      : \"default\";\n\n  const color = colorFromProps ?? defaultColor;\n\n  const isAFlowColor = isFlowColor(backgroundColor);\n\n  // backwards compatibility\n  const backgroundColorFromColor =\n    (colorFromProps as unknown as string) === \"neutral\" ||\n    (colorFromProps as unknown as string) === \"gradient\" ||\n    (colorFromProps as unknown as string) === \"green\"\n      ? (colorFromProps as unknown as AccentBoxBackgroundColor)\n      : undefined;\n\n  const style = {\n    backgroundColor: isAFlowColor ? undefined : backgroundColor,\n    backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,\n    aspectRatio,\n    ...styleFromProps,\n  };\n\n  const rootClassName = clsx(\n    styles.accentBox,\n    className,\n    backgroundColorFromColor\n      ? styles[backgroundColorFromColor]\n      : isAFlowColor\n        ? styles[backgroundColor]\n        : undefined,\n  );\n\n  const Element = elementType;\n\n  const contentColor = color === \"default\" ? undefined : color;\n\n  const propsContext: PropsContext = {\n    Link: {\n      color: contentColor,\n    },\n    Text: {\n      color: contentColor,\n    },\n    Heading: {\n      color: contentColor,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <Element className={rootClassName} style={style}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Element>\n  );\n});\n\nexport default AccentBox;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,yBAAA,GAA4B;AAAA,EAChC,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA;AAOA,SAAS,YACP,SAAA,EACuC;AACvC,EAAA,MAAM,4BAAA,GACJ,yBAAA;AACF,EAAA,OACE,OAAO,SAAA,KAAc,QAAA,IACrB,4BAAA,CAA6B,SAAS,SAAS,CAAA;AAEnD;AAmBO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,cAAA;AAAA,IACP,eAAA,GAAkB,SAAA;AAAA,IAClB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,SAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,YAAA,GACH,cAAA,KAAyC,UAAA,IAC1C,eAAA,KAAoB,aAChB,aAAA,GACA,SAAA;AAEN,EAAA,MAAM,QAAQ,cAAA,IAAkB,YAAA;AAEhC,EAAA,MAAM,YAAA,GAAe,YAAY,eAAe,CAAA;AAGhD,EAAA,MAAM,2BACH,cAAA,KAAyC,SAAA,IACzC,mBAAyC,UAAA,IACzC,cAAA,KAAyC,UACrC,cAAA,GACD,MAAA;AAEN,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,eAAA,EAAiB,eAAe,MAAA,GAAY,eAAA;AAAA,IAC5C,eAAA,EAAiB,eAAA,GAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,CAAA,CAAA,GAAM,MAAA;AAAA,IAC/D,WAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,SAAA;AAAA,IACP,SAAA;AAAA,IACA,2BACI,MAAA,CAAO,wBAAwB,IAC/B,YAAA,GACE,MAAA,CAAO,eAAe,CAAA,GACtB;AAAA,GACR;AAEA,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,MAAM,YAAA,GAAe,KAAA,KAAU,SAAA,GAAY,MAAA,GAAY,KAAA;AAEvD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,KACT;AAAA,IACA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,aAAA,EAAe,KAAA,EACjC,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } 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: FC<PropsWithChildren> = (props) => {\n      const { children } = props;\n      return (\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\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) => (\n          <HeaderButton>{props.children}</HeaderButton>\n        )),\n      },\n      Label: {\n        className: styles.header,\n        children: dynamic((props) => (\n          <HeaderButton>{props.children}</HeaderButton>\n        )),\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":["props","children","expanded"],"mappings":"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"}
+{"version":3,"file":"Accordion.mjs","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } 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\n    const contentId = useId();\n\n    const HeaderButton: FC<PropsWithChildren> = (props) => {\n      const { children } = props;\n      return (\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\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) => (\n          <HeaderButton>{props.children}</HeaderButton>\n        )),\n      },\n      Label: {\n        className: styles.header,\n        children: dynamic((props) => (\n          <HeaderButton>{props.children}</HeaderButton>\n        )),\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":["props","children","expanded"],"mappings":"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"}

package/dist/js/packages/components/src/components/Action/models/ActionState.mjs

@@ -7,7 +7,7 @@ import { useStatic } from '../../../lib/hooks/useStatic.mjs';
 
 const duration = {
   pending: 1e3,
-  succeeded: 1500,
+  succeeded: 800,
   failed: 2e3
 };
 class ActionState {

package/dist/js/packages/components/src/components/Action/models/ActionState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionState.mjs","sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  action as mobxAction,\n  computed,\n  makeObservable,\n  observable,\n} from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { sleep } from \"@/lib/promises/sleep\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type ActionStateValue =\n  | \"isIdle\"\n  | \"isSucceeded\"\n  | \"isPending\"\n  | \"isExecuting\"\n  | \"isFailed\";\n\nexport const duration = {\n  pending: 1000,\n  succeeded: 1500,\n  failed: 2000,\n};\n\nexport class ActionState {\n  private showFeedback?: boolean;\n  public state: ActionStateValue = \"isIdle\";\n  private setPendingTimeout: number | undefined;\n  public error: unknown;\n  private isAsync = false;\n\n  public constructor() {\n    makeObservable(this, {\n      state: observable,\n      updateState: mobxAction,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public updateState(newState: ActionStateValue): void {\n    this.state = newState;\n  }\n\n  public useValue(): ActionStateValue {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n\n  public get isBusy(): boolean {\n    return this.state !== \"isIdle\";\n  }\n\n  public onAsyncStart(): void {\n    this.clearPendingTimeout();\n    this.isAsync = true;\n    this.updateState(\"isExecuting\");\n    this.setPendingTimeout = window.setTimeout(\n      () => this.startPending(),\n      duration.pending,\n    );\n  }\n\n  public async onSucceeded(): Promise<void> {\n    await this.onDone();\n  }\n\n  public async onFailed(error?: unknown): Promise<void> {\n    this.error = error ?? new Error(\"Unknown error\");\n    await this.onDone();\n  }\n\n  public withFeedback(feedback?: boolean): ActionState {\n    this.showFeedback = feedback;\n    return this;\n  }\n\n  private async startFailedFeedback(): Promise<void> {\n    this.updateState(\"isFailed\");\n    await sleep(duration.failed);\n    this.resetAfterDone();\n  }\n\n  private async startSucceededFeedback(): Promise<void> {\n    this.updateState(\"isSucceeded\");\n    await sleep(duration.succeeded);\n    this.resetAfterDone();\n  }\n\n  private resetAfterDone(): void {\n    this.updateState(\"isIdle\");\n    this.isAsync = false;\n    this.error = undefined;\n  }\n\n  private clearPendingTimeout(): void {\n    if (this.setPendingTimeout) {\n      window.clearTimeout(this.setPendingTimeout);\n    }\n  }\n\n  private onDone(): Promise<void> | void {\n    this.clearPendingTimeout();\n    if (this.error) {\n      return this.startFailedFeedback();\n    } else if (\n      this.showFeedback !== false &&\n      (this.showFeedback || this.isAsync)\n    ) {\n      return this.startSucceededFeedback();\n    } else {\n      this.resetAfterDone();\n    }\n  }\n\n  private startPending(): void {\n    this.updateState(\"isPending\");\n  }\n}\n"],"names":["mobxAction"],"mappings":";;;;;AAiBO,MAAM,QAAA,GAAW;AAAA,EACtB,OAAA,EAAS,GAAA;AAAA,EACT,SAAA,EAAW,IAAA;AAAA,EACX,MAAA,EAAQ;AACV;AAEO,MAAM,WAAA,CAAY;AAAA,EACf,YAAA;AAAA,EACD,KAAA,GAA0B,QAAA;AAAA,EACzB,iBAAA;AAAA,EACD,KAAA;AAAA,EACC,OAAA,GAAU,KAAA;AAAA,EAEX,WAAA,GAAc;AACnB,IAAA,cAAA,CAAe,IAAA,EAAM;AAAA,MACnB,KAAA,EAAO,UAAA;AAAA,MACP,WAAA,EAAaA,MAAA;AAAA,MACb,MAAA,EAAQ;AAAA,KACT,CAAA;AAAA,EACH;AAAA,EAEA,OAAc,MAAA,GAAsB;AAClC,IAAA,OAAO,SAAA,CAAU,MAAM,IAAI,WAAA,EAAa,CAAA;AAAA,EAC1C;AAAA,EAEO,YAAY,QAAA,EAAkC;AACnD,IAAA,IAAA,CAAK,KAAA,GAAQ,QAAA;AAAA,EACf;AAAA,EAEO,QAAA,GAA6B;AAClC,IAAA,OAAO,YAAY,MAAM,IAAA,CAAK,KAAA,EAAO,CAAC,IAAI,CAAC,CAAA;AAAA,EAC7C;AAAA,EAEO,SAAA,GAAqB;AAC1B,IAAA,OAAO,YAAY,MAAM,IAAA,CAAK,MAAA,EAAQ,CAAC,IAAI,CAAC,CAAA;AAAA,EAC9C;AAAA,EAEA,IAAW,MAAA,GAAkB;AAC3B,IAAA,OAAO,KAAK,KAAA,KAAU,QAAA;AAAA,EACxB;AAAA,EAEO,YAAA,GAAqB;AAC1B,IAAA,IAAA,CAAK,mBAAA,EAAoB;AACzB,IAAA,IAAA,CAAK,OAAA,GAAU,IAAA;AACf,IAAA,IAAA,CAAK,YAAY,aAAa,CAAA;AAC9B,IAAA,IAAA,CAAK,oBAAoB,MAAA,CAAO,UAAA;AAAA,MAC9B,MAAM,KAAK,YAAA,EAAa;AAAA,MACxB,QAAA,CAAS;AAAA,KACX;AAAA,EACF;AAAA,EAEA,MAAa,WAAA,GAA6B;AACxC,IAAA,MAAM,KAAK,MAAA,EAAO;AAAA,EACpB;AAAA,EAEA,MAAa,SAAS,KAAA,EAAgC;AACpD,IAAA,IAAA,CAAK,KAAA,GAAQ,KAAA,IAAS,IAAI,KAAA,CAAM,eAAe,CAAA;AAC/C,IAAA,MAAM,KAAK,MAAA,EAAO;AAAA,EACpB;AAAA,EAEO,aAAa,QAAA,EAAiC;AACnD,IAAA,IAAA,CAAK,YAAA,GAAe,QAAA;AACpB,IAAA,OAAO,IAAA;AAAA,EACT;AAAA,EAEA,MAAc,mBAAA,GAAqC;AACjD,IAAA,IAAA,CAAK,YAAY,UAAU,CAAA;AAC3B,IAAA,MAAM,KAAA,CAAM,SAAS,MAAM,CAAA;AAC3B,IAAA,IAAA,CAAK,cAAA,EAAe;AAAA,EACtB;AAAA,EAEA,MAAc,sBAAA,GAAwC;AACpD,IAAA,IAAA,CAAK,YAAY,aAAa,CAAA;AAC9B,IAAA,MAAM,KAAA,CAAM,SAAS,SAAS,CAAA;AAC9B,IAAA,IAAA,CAAK,cAAA,EAAe;AAAA,EACtB;AAAA,EAEQ,cAAA,GAAuB;AAC7B,IAAA,IAAA,CAAK,YAAY,QAAQ,CAAA;AACzB,IAAA,IAAA,CAAK,OAAA,GAAU,KAAA;AACf,IAAA,IAAA,CAAK,KAAA,GAAQ,MAAA;AAAA,EACf;AAAA,EAEQ,mBAAA,GAA4B;AAClC,IAAA,IAAI,KAAK,iBAAA,EAAmB;AAC1B,MAAA,MAAA,CAAO,YAAA,CAAa,KAAK,iBAAiB,CAAA;AAAA,IAC5C;AAAA,EACF;AAAA,EAEQ,MAAA,GAA+B;AACrC,IAAA,IAAA,CAAK,mBAAA,EAAoB;AACzB,IAAA,IAAI,KAAK,KAAA,EAAO;AACd,MAAA,OAAO,KAAK,mBAAA,EAAoB;AAAA,IAClC,WACE,IAAA,CAAK,YAAA,KAAiB,UACrB,IAAA,CAAK,YAAA,IAAgB,KAAK,OAAA,CAAA,EAC3B;AACA,MAAA,OAAO,KAAK,sBAAA,EAAuB;AAAA,IACrC,CAAA,MAAO;AACL,MAAA,IAAA,CAAK,cAAA,EAAe;AAAA,IACtB;AAAA,EACF;AAAA,EAEQ,YAAA,GAAqB;AAC3B,IAAA,IAAA,CAAK,YAAY,WAAW,CAAA;AAAA,EAC9B;AACF;;;;"}
+{"version":3,"file":"ActionState.mjs","sources":["../../../../../../../../src/components/Action/models/ActionState.ts"],"sourcesContent":["import {\n  action as mobxAction,\n  computed,\n  makeObservable,\n  observable,\n} from \"mobx\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport { sleep } from \"@/lib/promises/sleep\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\n\nexport type ActionStateValue =\n  | \"isIdle\"\n  | \"isSucceeded\"\n  | \"isPending\"\n  | \"isExecuting\"\n  | \"isFailed\";\n\nexport const duration = {\n  pending: 1000,\n  succeeded: 800,\n  failed: 2000,\n};\n\nexport class ActionState {\n  private showFeedback?: boolean;\n  public state: ActionStateValue = \"isIdle\";\n  private setPendingTimeout: number | undefined;\n  public error: unknown;\n  private isAsync = false;\n\n  public constructor() {\n    makeObservable(this, {\n      state: observable,\n      updateState: mobxAction,\n      isBusy: computed,\n    });\n  }\n\n  public static useNew(): ActionState {\n    return useStatic(() => new ActionState());\n  }\n\n  public updateState(newState: ActionStateValue): void {\n    this.state = newState;\n  }\n\n  public useValue(): ActionStateValue {\n    return useSelector(() => this.state, [this]);\n  }\n\n  public useIsBusy(): boolean {\n    return useSelector(() => this.isBusy, [this]);\n  }\n\n  public get isBusy(): boolean {\n    return this.state !== \"isIdle\";\n  }\n\n  public onAsyncStart(): void {\n    this.clearPendingTimeout();\n    this.isAsync = true;\n    this.updateState(\"isExecuting\");\n    this.setPendingTimeout = window.setTimeout(\n      () => this.startPending(),\n      duration.pending,\n    );\n  }\n\n  public async onSucceeded(): Promise<void> {\n    await this.onDone();\n  }\n\n  public async onFailed(error?: unknown): Promise<void> {\n    this.error = error ?? new Error(\"Unknown error\");\n    await this.onDone();\n  }\n\n  public withFeedback(feedback?: boolean): ActionState {\n    this.showFeedback = feedback;\n    return this;\n  }\n\n  private async startFailedFeedback(): Promise<void> {\n    this.updateState(\"isFailed\");\n    await sleep(duration.failed);\n    this.resetAfterDone();\n  }\n\n  private async startSucceededFeedback(): Promise<void> {\n    this.updateState(\"isSucceeded\");\n    await sleep(duration.succeeded);\n    this.resetAfterDone();\n  }\n\n  private resetAfterDone(): void {\n    this.updateState(\"isIdle\");\n    this.isAsync = false;\n    this.error = undefined;\n  }\n\n  private clearPendingTimeout(): void {\n    if (this.setPendingTimeout) {\n      window.clearTimeout(this.setPendingTimeout);\n    }\n  }\n\n  private onDone(): Promise<void> | void {\n    this.clearPendingTimeout();\n    if (this.error) {\n      return this.startFailedFeedback();\n    } else if (\n      this.showFeedback !== false &&\n      (this.showFeedback || this.isAsync)\n    ) {\n      return this.startSucceededFeedback();\n    } else {\n      this.resetAfterDone();\n    }\n  }\n\n  private startPending(): void {\n    this.updateState(\"isPending\");\n  }\n}\n"],"names":["mobxAction"],"mappings":"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"}

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

@@ -13,13 +13,7 @@ import { getActionGroupSlot } from './lib/getActionGroupSlot.mjs';
 const ActionGroup = flowComponent(
   "ActionGroup",
   (props) => {
-    const {
-      children,
-      className,
-      ref,
-      spacing = "s",
-      ...rest
-    } = props;
+    const { children, className, ref, spacing = "s", ...rest } = props;
     const rootClassName = clsx(styles.actionGroup, className, styles[spacing]);
     const propsContext = {
       Button: {

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

@@ -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 { 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;;;;"}
+{"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 \"s\" */\n  spacing?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n  \"ActionGroup\",\n  (props) => {\n    const { children, className, ref, spacing = \"s\", ...rest } = 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,EAAE,UAAU,SAAA,EAAW,GAAA,EAAK,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE7D,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/Breadcrumb/Breadcrumb.mjs

@@ -7,12 +7,13 @@ import clsx from 'clsx';
 import { BreadcrumbItem } from './components/BreadcrumbItem/BreadcrumbItem.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { isAlphaColor } from '../../lib/types/props.mjs';
 
 const Breadcrumb = (props) => {
-  const { children, className, color = "primary", size = "m", ...rest } = props;
+  const { children, className, color = "default", size = "m", ...rest } = props;
   const rootClassName = clsx(
     styles.breadcrumb,
-    styles[color],
+    isAlphaColor(color) && styles[color],
     size === "s" && styles["size-s"],
     className
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.mjs","sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { AlphaColor } from \"@/lib/types/props\";\n\nexport interface BreadcrumbProps\n  extends\n    Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n    PropsWithChildren {\n  /** The color of the breadcrumb. @default \"primary\" */\n  color?: \"primary\" | AlphaColor;\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n  const { children, className, color = \"primary\", size = \"m\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.breadcrumb,\n    styles[color],\n    size === \"s\" && styles[\"size-s\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      unstyled: true,\n      className: styles.link,\n      wrapWith: <BreadcrumbItem />,\n    },\n  };\n\n  return (\n    <Aria.Breadcrumbs {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Breadcrumbs>\n  );\n};\n\nexport default Breadcrumb;\n"],"names":[],"mappings":";;;;;;;;AAqBO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,KAAA,GAAQ,WAAW,IAAA,GAAO,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAExE,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,OAAO,KAAK,CAAA;AAAA,IACZ,IAAA,KAAS,GAAA,IAAO,MAAA,CAAO,QAAQ,CAAA;AAAA,IAC/B;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,QAAA,EAAU,IAAA;AAAA,MACV,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,QAAA,sBAAW,cAAA,EAAA,EAAe;AAAA;AAC5B,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,IAAA,CAAK,WAAA,EAAL,EAAkB,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,UACH,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Breadcrumb.mjs","sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface BreadcrumbProps\n  extends\n    Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n    PropsWithChildren {\n  /** The color of the breadcrumb. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n  const { children, className, color = \"default\", size = \"m\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.breadcrumb,\n    isAlphaColor(color) && styles[color],\n    size === \"s\" && styles[\"size-s\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      unstyled: true,\n      className: styles.link,\n      wrapWith: <BreadcrumbItem />,\n    },\n  };\n\n  return (\n    <Aria.Breadcrumbs {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Breadcrumbs>\n  );\n};\n\nexport default Breadcrumb;\n"],"names":[],"mappings":";;;;;;;;;AAqBO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,KAAA,GAAQ,WAAW,IAAA,GAAO,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAExE,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,UAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC,IAAA,KAAS,GAAA,IAAO,MAAA,CAAO,QAAQ,CAAA;AAAA,IAC/B;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,QAAA,EAAU,IAAA;AAAA,MACV,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,QAAA,sBAAW,cAAA,EAAA,EAAe;AAAA;AAC5B,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,IAAA,CAAK,WAAA,EAAL,EAAkB,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACrC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,UACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.module.scss.mjs

@@ -4,7 +4,6 @@ const breadcrumb = "flow--breadcrumb";
 const link = "flow--breadcrumb--link";
 const breadcrumbItem = "flow--breadcrumb--breadcrumb-item";
 const icon = "flow--breadcrumb--icon";
-const primary = "flow--breadcrumb--primary";
 const dark = "flow--breadcrumb--dark";
 const light = "flow--breadcrumb--light";
 const styles = {
@@ -13,12 +12,11 @@ const styles = {
 	breadcrumbItem: breadcrumbItem,
 	icon: icon,
 	"size-s": "flow--breadcrumb--size-s",
-	primary: primary,
 	dark: dark,
 	light: light,
 	"dark-static": "flow--breadcrumb--dark-static",
 	"light-static": "flow--breadcrumb--light-static"
 };
 
-export { breadcrumb, breadcrumbItem, dark, styles as default, icon, light, link, primary };
+export { breadcrumb, breadcrumbItem, dark, styles as default, icon, light, link };
 //# sourceMappingURL=Breadcrumb.module.scss.mjs.map

package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.module.scss.mjs.map

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

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

@@ -3,10 +3,10 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import * as Recharts from 'recharts';
-import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
 import { AreaDot } from '../AreaDot/AreaDot.mjs';
 import { isCategoricalColor } from '../../../../lib/tokens/isCategoricalColor.mjs';
 import { isDataKeyWithLabel } from '../../types.mjs';
+import { useDesignTokens } from '../../../../lib/theming/hooks/useDesignTokens.mjs';
 
 const Area = (props) => {
   const {
@@ -15,6 +15,7 @@ const Area = (props) => {
     fillOpacity = 1,
     ...rest
   } = props;
+  const tokens = useDesignTokens();
   const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
   return /* @__PURE__ */ jsx(
     Recharts.Area,

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

@@ -1 +1 @@
-{"version":3,"file":"Area.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type 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;;;;"}
+{"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 { 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\";\nimport { useDesignTokens } from \"../../../../lib/theming\";\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 tokens = useDesignTokens();\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,SAAS,eAAA,EAAgB;AAE/B,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/ChartGrid/ChartGrid.mjs

@@ -2,17 +2,19 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import * as Recharts from 'recharts';
-import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
+import 'react';
+import { useDesignTokens } from '../../../../lib/theming/hooks/useDesignTokens.mjs';
 
 const ChartGrid = (props) => {
   const { vertical = false, ...rest } = props;
+  const designTokens = useDesignTokens();
   return /* @__PURE__ */ jsx(
     Recharts.CartesianGrid,
     {
       vertical,
       ...rest,
-      stroke: tokens["cartesian-grid"].color.value,
-      strokeWidth: tokens["cartesian-grid"]["stroke-width"].value
+      stroke: designTokens["cartesian-grid"].color.value,
+      strokeWidth: designTokens["cartesian-grid"]["stroke-width"].value
     }
   );
 };

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

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

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

@@ -3,12 +3,13 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import * as Recharts from 'recharts';
-import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
 import { AreaDot } from '../AreaDot/AreaDot.mjs';
 import { isCategoricalColor } from '../../../../lib/tokens/isCategoricalColor.mjs';
+import { useDesignTokens } from '../../../../lib/theming/hooks/useDesignTokens.mjs';
 
 const Line = (props) => {
   const { color: colorFromProps = "sea-green", ...rest } = props;
+  const tokens = useDesignTokens();
   const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
   return /* @__PURE__ */ jsx(
     Recharts.Line,

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/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;;;;"}
+{"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 { 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\";\nimport { useDesignTokens } from \"../../../../lib/theming\";\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 tokens = useDesignTokens();\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,SAAS,eAAA,EAAgB;AAE/B,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

@@ -2,8 +2,8 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import * as Recharts from 'recharts';
-import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
 import 'react';
+import { useDesignTokens } from '../../../../lib/theming/hooks/useDesignTokens.mjs';
 import 'clsx';
 import 'use-callback-ref';
 import '../../../../views/DivView.mjs';
@@ -22,13 +22,14 @@ import 'react-aria';
 import '../../../../views/LoadingSpinnerView.mjs';
 
 const XAxis = (props) => {
+  const tokens = useDesignTokens();
   return /* @__PURE__ */ jsx(
     Recharts.XAxis,
     {
       ...props,
       fontSize: tokens.axis["font-size"].value,
       tick: {
-        fill: tokens.axis["text-color"].value
+        fill: tokens.axis["color"].value
       },
       tickMargin: parseInt(tokens.axis.spacing.value),
       tickSize: parseInt(tokens.axis["tick-size"].value)

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/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;;;;"}
+{"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 type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"../../../../lib/theming\";\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  const tokens = useDesignTokens();\n\n  return (\n    <Recharts.XAxis\n      {...props}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"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,MAAM,SAAS,eAAA,EAAgB;AAE/B,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,OAAO,CAAA,CAAE;AAAA,OAC7B;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/YAxis.mjs

@@ -2,8 +2,8 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import * as Recharts from 'recharts';
-import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
 import 'react';
+import { useDesignTokens } from '../../../../lib/theming/hooks/useDesignTokens.mjs';
 import 'clsx';
 import 'use-callback-ref';
 import '../../../../views/DivView.mjs';
@@ -23,6 +23,7 @@ import '../../../../views/LoadingSpinnerView.mjs';
 
 const YAxis = (props) => {
   const { domain, ...rest } = props;
+  const tokens = useDesignTokens();
   return /* @__PURE__ */ jsx(
     Recharts.YAxis,
     {
@@ -31,7 +32,7 @@ const YAxis = (props) => {
       domain,
       fontSize: tokens.axis["font-size"].value,
       tick: {
-        fill: tokens.axis["text-color"].value
+        fill: tokens.axis["color"].value
       },
       tickMargin: parseInt(tokens.axis.spacing.value),
       tickSize: parseInt(tokens.axis["tick-size"].value)

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/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;;;;"}
+{"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 type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"../../../../lib/theming\";\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  const tokens = useDesignTokens();\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[\"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,MAAM,SAAS,eAAA,EAAgB;AAE/B,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,OAAO,CAAA,CAAE;AAAA,OAC7B;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/Color/Color.mjs

@@ -2,19 +2,27 @@
 /* */
 import { jsx } from 'react/jsx-runtime';
 import styles from './Color.module.scss.mjs';
-import { statusTypes } from '../../lib/types/props.mjs';
+import { statusTypes, alphaColors } from '../../lib/types/props.mjs';
+import clsx from 'clsx';
 
-const flowColors = ["blue", "violet", "teal", "lilac", ...statusTypes];
+const flowColors = [
+  "blue",
+  "violet",
+  "teal",
+  "lilac",
+  ...statusTypes,
+  ...alphaColors
+];
 function isFlowColor(something) {
   const anyFlowColors = flowColors;
   return typeof something === "string" && anyFlowColors.includes(something);
 }
 const Color = (props) => {
-  const { children, color = "blue" } = props;
+  const { children, className, color = "blue" } = props;
   const isAFlowColor = isFlowColor(color);
-  const className = isAFlowColor ? styles[color] : void 0;
+  const rootClassName = clsx(isAFlowColor && styles[color], className);
   const style = !isAFlowColor ? { color } : void 0;
-  return /* @__PURE__ */ jsx("span", { className, style, children });
+  return /* @__PURE__ */ jsx("span", { className: rootClassName, style, children });
 };
 
 export { Color };

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

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

package/dist/js/packages/components/src/components/Color/Color.module.scss.mjs

@@ -9,6 +9,8 @@ const warning = "flow--color--warning";
 const success = "flow--color--success";
 const info = "flow--color--info";
 const unavailable = "flow--color--unavailable";
+const light = "flow--color--light";
+const dark = "flow--color--dark";
 const styles = {
 	blue: blue,
 	violet: violet,
@@ -18,8 +20,12 @@ const styles = {
 	warning: warning,
 	success: success,
 	info: info,
-	unavailable: unavailable
+	unavailable: unavailable,
+	light: light,
+	dark: dark,
+	"light-static": "flow--color--light-static",
+	"dark-static": "flow--color--dark-static"
 };
 
-export { blue, danger, styles as default, info, lilac, success, teal, unavailable, violet, warning };
+export { blue, danger, dark, styles as default, info, light, lilac, success, teal, unavailable, violet, warning };
 //# sourceMappingURL=Color.module.scss.mjs.map

package/dist/js/packages/components/src/components/Color/Color.module.scss.mjs.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: {\n        id: \"options\",\n        component: \"ComboBox\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: {\n        id: \"options\",\n        component: \"ComboBox\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}

package/dist/js/packages/components/src/components/DonutChart/components/Donut.mjs

@@ -5,11 +5,12 @@ import styles from '../DonutChart.module.scss.mjs';
 import { DonutChartFill } from './DonutChartFill.mjs';
 
 const Donut = (props) => {
-  const { value = 0, segments, size, maxValue } = props;
+  const { value = 0, segments, size, maxValue: maxValueFromProps } = props;
   const strokeWidth = 0.5;
   const fillWidth = size === "m" ? 8 : 12;
   const center = fillWidth * 4;
   const radius = center - fillWidth / 2;
+  const maxValue = maxValueFromProps ?? 100;
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -54,9 +55,9 @@ const Donut = (props) => {
           {
             radius,
             center,
-            value,
+            value: value < maxValue ? value : maxValue,
             segments,
-            maxValue: maxValue ?? 100
+            maxValue
           }
         )
       ]

package/dist/js/packages/components/src/components/DonutChart/components/Donut.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Donut.mjs","sources":["../../../../../../../../src/components/DonutChart/components/Donut.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport { DonutChartFill } from \"@/components/DonutChart/components/DonutChartFill\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<\n  DonutChartProps,\n  \"segments\" | \"size\" | \"maxValue\"\n> {\n  value?: number;\n}\n\nexport const Donut: FC<Props> = (props) => {\n  const { value = 0, segments, size, maxValue } = props;\n\n  const strokeWidth = 0.5;\n  const fillWidth = size === \"m\" ? 8 : 12;\n  const center = fillWidth * 4;\n  const radius = center - fillWidth / 2;\n\n  return (\n    <>\n      <svg\n        width={center * 4}\n        height={center * 4}\n        viewBox={`0 0 ${center * 2} ${center * 2}`}\n        fill=\"none\"\n        strokeWidth={fillWidth}\n      >\n        <circle\n          className={styles.background}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={fillWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - fillWidth + strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n\n        <DonutChartFill\n          radius={radius}\n          center={center}\n          value={value}\n          segments={segments}\n          maxValue={maxValue ?? 100}\n        />\n      </svg>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,KAAA,GAAmB,CAAC,KAAA,KAAU;AACzC,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,QAAA,EAAU,IAAA,EAAM,UAAS,GAAI,KAAA;AAEhD,EAAA,MAAM,WAAA,GAAc,GAAA;AACpB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,GAAA,GAAM,CAAA,GAAI,EAAA;AACrC,EAAA,MAAM,SAAS,SAAA,GAAY,CAAA;AAC3B,EAAA,MAAM,MAAA,GAAS,SAAS,SAAA,GAAY,CAAA;AAEpC,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,MAAA,GAAS,CAAA;AAAA,MAChB,QAAQ,MAAA,GAAS,CAAA;AAAA,MACjB,SAAS,CAAA,IAAA,EAAO,MAAA,GAAS,CAAC,CAAA,CAAA,EAAI,SAAS,CAAC,CAAA,CAAA;AAAA,MACxC,IAAA,EAAK,MAAA;AAAA,MACL,WAAA,EAAa,SAAA;AAAA,MAEb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,UAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,MAAA;AAAA,YACH,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,MAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,SAAS,WAAA,GAAc,CAAA;AAAA,YAC1B;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,MAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,MAAA,GAAS,SAAA,GAAY,WAAA,GAAc,CAAA;AAAA,YACtC;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,MAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA;AAAA,YACA,UAAU,QAAA,IAAY;AAAA;AAAA;AACxB;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Donut.mjs","sources":["../../../../../../../../src/components/DonutChart/components/Donut.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/DonutChart/DonutChart.module.scss\";\nimport { DonutChartFill } from \"@/components/DonutChart/components/DonutChartFill\";\nimport type { DonutChartProps } from \"@/components/DonutChart\";\n\ninterface Props extends Pick<\n  DonutChartProps,\n  \"segments\" | \"size\" | \"maxValue\"\n> {\n  value?: number;\n}\n\nexport const Donut: FC<Props> = (props) => {\n  const { value = 0, segments, size, maxValue: maxValueFromProps } = props;\n\n  const strokeWidth = 0.5;\n  const fillWidth = size === \"m\" ? 8 : 12;\n  const center = fillWidth * 4;\n  const radius = center - fillWidth / 2;\n  const maxValue = maxValueFromProps ?? 100;\n\n  return (\n    <>\n      <svg\n        width={center * 4}\n        height={center * 4}\n        viewBox={`0 0 ${center * 2} ${center * 2}`}\n        fill=\"none\"\n        strokeWidth={fillWidth}\n      >\n        <circle\n          className={styles.background}\n          cx={center}\n          cy={center}\n          r={radius}\n          strokeWidth={fillWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          className={styles.border}\n          cx={center}\n          cy={center}\n          r={center - fillWidth + strokeWidth / 2}\n          strokeWidth={strokeWidth}\n        />\n\n        <DonutChartFill\n          radius={radius}\n          center={center}\n          value={value < maxValue ? value : maxValue}\n          segments={segments}\n          maxValue={maxValue}\n        />\n      </svg>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,KAAA,GAAmB,CAAC,KAAA,KAAU;AACzC,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,UAAU,IAAA,EAAM,QAAA,EAAU,mBAAkB,GAAI,KAAA;AAEnE,EAAA,MAAM,WAAA,GAAc,GAAA;AACpB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,GAAA,GAAM,CAAA,GAAI,EAAA;AACrC,EAAA,MAAM,SAAS,SAAA,GAAY,CAAA;AAC3B,EAAA,MAAM,MAAA,GAAS,SAAS,SAAA,GAAY,CAAA;AACpC,EAAA,MAAM,WAAW,iBAAA,IAAqB,GAAA;AAEtC,EAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,MAAA,GAAS,CAAA;AAAA,MAChB,QAAQ,MAAA,GAAS,CAAA;AAAA,MACjB,SAAS,CAAA,IAAA,EAAO,MAAA,GAAS,CAAC,CAAA,CAAA,EAAI,SAAS,CAAC,CAAA,CAAA;AAAA,MACxC,IAAA,EAAK,MAAA;AAAA,MACL,WAAA,EAAa,SAAA;AAAA,MAEb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,UAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,MAAA;AAAA,YACH,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,MAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,SAAS,WAAA,GAAc,CAAA;AAAA,YAC1B;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,WAAW,MAAA,CAAO,MAAA;AAAA,YAClB,EAAA,EAAI,MAAA;AAAA,YACJ,EAAA,EAAI,MAAA;AAAA,YACJ,CAAA,EAAG,MAAA,GAAS,SAAA,GAAY,WAAA,GAAc,CAAA;AAAA,YACtC;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,MAAA;AAAA,YACA,KAAA,EAAO,KAAA,GAAQ,QAAA,GAAW,KAAA,GAAQ,QAAA;AAAA,YAClC,QAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}