npm - @mittwald/flow-react-components - Versions diffs - 0.2.0-alpha.837 → 0.2.0-alpha.838 - Mend

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

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

Files changed (364) hide show

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

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

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

package/dist/js/default.mjs CHANGED Viewed

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

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

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

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

	@@ -1 +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;;;;"}
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 \"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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;;;;;;AAsBO,MAAM,SAAA,GAAgC,aAAA;AAAA,EAC3C,WAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA,GAAkB,KAAA;AAAA,MAClB,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,eAAe,CAAA;AAExD,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,SAAA;AAAA,MACP,YAAY,MAAA,CAAO,QAAA;AAAA,MACnB,SAAA;AAAA,MACA,OAAA,KAAY,aAAa,MAAA,CAAO;AAAA,KAClC;AAEA,IAAA,MAAM,WAAW,KAAA,EAAM;~~AACvB~~,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,MAAM,YAAA,GAAsC,CAACA,MAAAA,KAAU;AACrD,MAAA,MAAM,EAAE,QAAA,EAAAC,SAAAA,EAAS,GAAID,MAAAA;AACrB,MAAA,uBACE,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,MAAA,EAAQ,IAAA;AAAA,UACR,QAAA,EAAQ,IAAA;AAAA,UACR,eAAA,EAAe,QAAA;AAAA,UACf,WAAW,MAAA,CAAO,YAAA;AAAA,UAClB,SAAS,MAAM,WAAA,CAAY,CAACE,SAAAA,KAAa,CAACA,SAAQ,CAAA;AAAA,UAClD,eAAA,EAAe,SAAA;AAAA,UAEd,QAAA,EAAA;AAAA,YAAAD,SAAAA;AAAA,4BACD,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,OAAA,EAAS;AAAA;AAAA;AAAA,OAC9C;AAAA,IAEJ,CAAA;AAEA,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,YAAA;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,EAAA,EAAI,SAAA;AAAA,UACJ,SAAA,EAAW;AAAA;AACb,OACF;AAAA,MACA,OAAA,EAAS;AAAA,QACP,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,KAAA,EAAO,CAAA;AAAA,QACP,IAAA,EAAM,IAAA;AAAA,QACN,QAAA,EAAU,QAAQ,CAACD,MAAAA,yBAChB,YAAA,EAAA,EAAc,QAAA,EAAAA,MAAAA,CAAM,QAAA,EAAS,CAC/B;AAAA,OACH;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,QAAA,EAAU,QAAQ,CAACA,MAAAA,yBAChB,YAAA,EAAA,EAAc,QAAA,EAAAA,MAAAA,CAAM,QAAA,EAAS,CAC/B;AAAA;AACH,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EACxB,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAAc,YAAA,EAAc,CAAC,QAAQ,CAAA,EAC/D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,iBAAA,EAAiB,QAAA;AAAA,UACjB,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA,EAAK,QAAA;AAAA,UACL,QAAQ,CAAC,QAAA;AAAA,UACT,WAAW,MAAA,CAAO,OAAA;AAAA,UAElB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,QAAA,EAAU,aAAA,EAAe,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,EAAA,EAAG,SAAA,EAAU,SAAA,EAAU,WAAA,EAAY,CAAA,EAC5D;AAAA;AAAA;AACF,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}
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\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/ActionGroup/ActionGroup.mjs CHANGED Viewed

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionGroup.mjs","sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { 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;;;;"}
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 \"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 CHANGED Viewed

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

	@@ -1 +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;;;;"}
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, 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 CHANGED Viewed

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Area.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport ~~tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport~~ { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\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;;;;"}
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 { 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 CHANGED Viewed

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

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

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

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

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

	@@ -1 +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;;;;"}
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 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 CHANGED Viewed

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

	@@ -1 +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;;;;"}
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 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 CHANGED Viewed

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Color.mjs","sources":["../../../../../../../src/components/Color/Color.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Color.module.scss\";\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;;;;"}
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 {\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 CHANGED Viewed

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

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

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

	@@ -1 +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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"}
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\" \| \"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 CHANGED Viewed

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

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

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

@@ -10,7 +10,7 @@ import { isAlphaColor } from '../../lib/types/props.mjs';
 import { Text } from '../Text/Text.mjs';
 const HeaderNavigation = (props) => {
-  const { children, className, color = "primary", ...rest } = props;
+  const { children, className, color = "default", ...rest } = props;
   const rootClassName = clsx(
     styles.headerNavigation,
     isAlphaColor(color) && styles[color],
@@ -25,7 +25,7 @@ const HeaderNavigation = (props) => {
     },
     Button: {
       className: styles.button,
-      color,
+      color: isAlphaColor(color) ? color : "secondary",
       variant: "plain",
       wrapWith: /* @__PURE__ */ jsx("li", {})
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderNavigation.mjs","sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"~~primary~~\" /\n color?: \"~~primary~~\" \| AlphaColor;\n}\n\n/* @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"~~primary~~\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props) => (\n <Text emulateBoldWidth>{props.children}</Text>\n )),\n },\n Button: {\n className: styles.button,\n color,\n variant: \"plain\",\n wrapWith: <li />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"names":["props"],"mappings":";;;;;;;;;AAsBO,MAAM,gBAAA,GAA8C,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,gBAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,MACd,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,qBACjB,GAAA,CAAC,IAAA,EAAA,EAAK,gBAAA,EAAgB,IAAA,EAAE,QAAA,EAAAA,MAAAA,CAAM,QAAA,EAAS,CACxC;AAAA,KACH;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,KAAA;AAAA,~~MACA~~,OAAA,EAAS,OAAA;AAAA,MACT,QAAA,sBAAW,IAAA,EAAA,EAAG;AAAA;AAChB,GACF;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe,IAAA,EAAK,cAAc,GAAG,IAAA,EACnD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"HeaderNavigation.mjs","sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n extends PropsWithChildren<ComponentProps<\"nav\">>, PropsWithClassName {\n /** The color of the header navigation. @default \"default\" /\n color?: \"default\" \| AlphaColor;\n}\n\n/* @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n const { children, className, color = \"default\", ...rest } = props;\n\n const rootClassName = clsx(\n styles.headerNavigation,\n isAlphaColor(color) && styles[color],\n className,\n );\n\n const propsContext: PropsContext = {\n Link: {\n wrapWith: <li />,\n className: styles.link,\n unstyled: true,\n children: dynamic((props) => (\n <Text emulateBoldWidth>{props.children}</Text>\n )),\n },\n Button: {\n className: styles.button,\n color: isAlphaColor(color) ? color : \"secondary\",\n variant: \"plain\",\n wrapWith: <li />,\n },\n };\n\n return (\n <nav className={rootClassName} role=\"navigation\" {...rest}>\n <ul>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </ul>\n </nav>\n );\n};\n\nexport default HeaderNavigation;\n"],"names":["props"],"mappings":";;;;;;;;;AAsBO,MAAM,gBAAA,GAA8C,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,gBAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,MACd,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,qBACjB,GAAA,CAAC,IAAA,EAAA,EAAK,gBAAA,EAAgB,IAAA,EAAE,QAAA,EAAAA,MAAAA,CAAM,QAAA,EAAS,CACxC;AAAA,KACH;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,KAAA,EAAO,YAAA,CAAa,KAAK,CAAA,GAAI,KAAA,GAAQ,WAAA;AAAA,MACrC,OAAA,EAAS,OAAA;AAAA,MACT,QAAA,sBAAW,IAAA,EAAA,EAAG;AAAA;AAChB,GACF;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe,IAAA,EAAK,cAAc,GAAG,IAAA,EACnD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}