@mittwald/flow-react-components 0.2.0-alpha.782 → 0.2.0-alpha.784

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const rootClassName = clsx(styles.flex, className);\n\n  const Element = elementType;\n\n  return (\n    <Element\n      {...restProps}\n      className={rootClassName}\n      style={{\n        flexDirection: direction,\n        alignItems:\n          align === \"end\"\n            ? \"flex-end\"\n            : align === \"start\"\n              ? \"flex-start\"\n              : align,\n        justifyContent: justify,\n        columnGap: columnGap\n          ? `var(--size-px--${columnGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        rowGap: rowGap\n          ? `var(--size-px--${rowGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        flexGrow: grow ? 1 : undefined,\n        flexWrap: wrap,\n        paddingTop: paddingTop\n          ? `var(--size-px--${paddingTop})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingBottom: paddingBottom\n          ? `var(--size-px--${paddingBottom})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingLeft: paddingLeft\n          ? `var(--size-px--${paddingLeft})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingRight: paddingRight\n          ? `var(--size-px--${paddingRight})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n      }}\n    >\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"mappings":";;;;;AAsDA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,UACA,WACA,YAAY,OACZ,OACA,SACA,KACA,WACA,QACA,MACA,OAAO,UACP,SACA,YACA,eACA,aACA,cACA,cAAc,OACd,GAAG,cACD;CAEJ,MAAM,gBAAgB,KAAK,oBAAO,MAAM,UAAU;AAIlD,QACE,oBAHc,aAGd;EACE,GAAI;EACJ,WAAW;EACX,OAAO;GACL,eAAe;GACf,YACE,UAAU,QACN,aACA,UAAU,UACR,eACA;GACR,gBAAgB;GAChB,WAAW,YACP,kBAAkB,UAAU,KAC5B,MACE,kBAAkB,IAAI,KACtB,KAAA;GACN,QAAQ,SACJ,kBAAkB,OAAO,KACzB,MACE,kBAAkB,IAAI,KACtB,KAAA;GACN,UAAU,OAAO,IAAI,KAAA;GACrB,UAAU;GACV,YAAY,aACR,kBAAkB,WAAW,KAC7B,UACE,kBAAkB,QAAQ,KAC1B,KAAA;GACN,eAAe,gBACX,kBAAkB,cAAc,KAChC,UACE,kBAAkB,QAAQ,KAC1B,KAAA;GACN,aAAa,cACT,kBAAkB,YAAY,KAC9B,UACE,kBAAkB,QAAQ,KAC1B,KAAA;GACN,cAAc,eACV,kBAAkB,aAAa,KAC/B,UACE,kBAAkB,QAAQ,KAC1B,KAAA;GACP;EAEA;EACO,CAAA"}
+{"version":3,"file":"Flex.mjs","sources":["../../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const rootClassName = clsx(styles.flex, className);\n\n  const Element = elementType;\n\n  return (\n    <Element\n      {...restProps}\n      className={rootClassName}\n      style={{\n        flexDirection: direction,\n        alignItems:\n          align === \"end\"\n            ? \"flex-end\"\n            : align === \"start\"\n              ? \"flex-start\"\n              : align,\n        justifyContent: justify,\n        columnGap: columnGap\n          ? `var(--size-px--${columnGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        rowGap: rowGap\n          ? `var(--size-px--${rowGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        flexGrow: grow ? 1 : undefined,\n        flexWrap: wrap,\n        paddingTop: paddingTop\n          ? `var(--size-px--${paddingTop})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingBottom: paddingBottom\n          ? `var(--size-px--${paddingBottom})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingLeft: paddingLeft\n          ? `var(--size-px--${paddingLeft})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingRight: paddingRight\n          ? `var(--size-px--${paddingRight})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n      }}\n    >\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"names":[],"mappings":";;;;AAsDO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA,GAAc,KAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAEjD,EAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,KAAA,EAAO;AAAA,QACL,aAAA,EAAe,SAAA;AAAA,QACf,YACE,KAAA,KAAU,KAAA,GACN,UAAA,GACA,KAAA,KAAU,UACR,YAAA,GACA,KAAA;AAAA,QACR,cAAA,EAAgB,OAAA;AAAA,QAChB,SAAA,EAAW,YACP,CAAA,eAAA,EAAkB,SAAS,MAC3B,GAAA,GACE,CAAA,eAAA,EAAkB,GAAG,CAAA,CAAA,CAAA,GACrB,MAAA;AAAA,QACN,MAAA,EAAQ,SACJ,CAAA,eAAA,EAAkB,MAAM,MACxB,GAAA,GACE,CAAA,eAAA,EAAkB,GAAG,CAAA,CAAA,CAAA,GACrB,MAAA;AAAA,QACN,QAAA,EAAU,OAAO,CAAA,GAAI,MAAA;AAAA,QACrB,QAAA,EAAU,IAAA;AAAA,QACV,UAAA,EAAY,aACR,CAAA,eAAA,EAAkB,UAAU,MAC5B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,aAAA,EAAe,gBACX,CAAA,eAAA,EAAkB,aAAa,MAC/B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,WAAA,EAAa,cACT,CAAA,eAAA,EAAkB,WAAW,MAC7B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB,MAAA;AAAA,QACN,YAAA,EAAc,eACV,CAAA,eAAA,EAAkB,YAAY,MAC9B,OAAA,GACE,CAAA,eAAA,EAAkB,OAAO,CAAA,CAAA,CAAA,GACzB;AAAA,OACR;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const flex = "flow--flex";
+const styles = {
+	flex: flex
+};
+
+export { styles as default, flex };
+//# sourceMappingURL=Flex.module.scss.mjs.map

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

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

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

@@ -0,0 +1,15 @@
+"use client"
+/* */
+const formField = "flow--form-field";
+const label = "flow--form-field--label";
+const fieldError = "flow--form-field--field-error";
+const fieldDescription = "flow--form-field--field-description";
+const formFieldStyles = {
+	formField: formField,
+	label: label,
+	fieldError: fieldError,
+	fieldDescription: fieldDescription
+};
+
+export { formFieldStyles as default, fieldDescription, fieldError, formField, label };
+//# sourceMappingURL=FormField.module.scss.mjs.map

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

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

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

@@ -1,25 +1,30 @@
 "use client"
 /* */
-import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import SectionHeader from "../Section/components/SectionHeader/SectionHeader.mjs";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/Header/Header.tsx
-/** @flr-generate all */
-var Header = flowComponent("Header", (props) => {
-	const { children, ref, elementType = "header", renderSectionHeader, className, ...rest } = props;
-	if (renderSectionHeader) return /* @__PURE__ */ jsx(SectionHeader, {
-		ref,
-		className,
-		children
-	});
-	return /* @__PURE__ */ jsx(elementType, {
-		...rest,
-		className,
-		ref,
-		children
-	});
-}, { type: "layout" });
-//#endregion
-export { Header as default };
+import { jsx } from 'react/jsx-runtime';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { SectionHeader } from '../Section/components/SectionHeader/SectionHeader.mjs';
 
-//# sourceMappingURL=Header.mjs.map
+const Header = flowComponent(
+  "Header",
+  (props) => {
+    const {
+      children,
+      ref,
+      elementType = "header",
+      renderSectionHeader,
+      className,
+      ...rest
+    } = props;
+    if (renderSectionHeader) {
+      return /* @__PURE__ */ jsx(SectionHeader, { ref, className, children });
+    }
+    const Element = elementType;
+    return /* @__PURE__ */ jsx(Element, { ...rest, className, ref, children });
+  },
+  {
+    type: "layout"
+  }
+);
+
+export { Header };
+//# sourceMappingURL=Header.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","names":[],"sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport SectionHeader from \"@/components/Section/components/SectionHeader/SectionHeader\";\n\nexport interface HeaderProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"header\" | \"span\">,\n    FlowComponentProps<HTMLDivElement | HTMLHeadElement | HTMLSpanElement> {\n  /** @internal */\n  renderSectionHeader?: boolean;\n}\n\n/** @flr-generate all */\nexport const Header = flowComponent(\n  \"Header\",\n  (props) => {\n    const {\n      children,\n      ref,\n      elementType = \"header\",\n      renderSectionHeader,\n      className,\n      ...rest\n    } = props;\n\n    if (renderSectionHeader) {\n      return (\n        <SectionHeader ref={ref as never} className={className}>\n          {children}\n        </SectionHeader>\n      );\n    }\n\n    const Element = elementType;\n\n    return (\n      <Element {...rest} className={className} ref={ref as never}>\n        {children}\n      </Element>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Header;\n"],"mappings":";;;;;AAgBA,IAAa,SAAS,cACpB,WACC,UAAU;CACT,MAAM,EACJ,UACA,KACA,cAAc,UACd,qBACA,WACA,GAAG,SACD;AAEJ,KAAI,oBACF,QACE,oBAAC,eAAD;EAAoB;EAAyB;EAC1C;EACa,CAAA;AAMpB,QACE,oBAHc,aAGd;EAAS,GAAI;EAAiB;EAAgB;EAC3C;EACO,CAAA;GAGd,EACE,MAAM,UACP,CACF"}
+{"version":3,"file":"Header.mjs","sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport SectionHeader from \"@/components/Section/components/SectionHeader/SectionHeader\";\n\nexport interface HeaderProps\n  extends\n    PropsWithChildren,\n    PropsWithElementType<\"div\" | \"header\" | \"span\">,\n    FlowComponentProps<HTMLDivElement | HTMLHeadElement | HTMLSpanElement> {\n  /** @internal */\n  renderSectionHeader?: boolean;\n}\n\n/** @flr-generate all */\nexport const Header = flowComponent(\n  \"Header\",\n  (props) => {\n    const {\n      children,\n      ref,\n      elementType = \"header\",\n      renderSectionHeader,\n      className,\n      ...rest\n    } = props;\n\n    if (renderSectionHeader) {\n      return (\n        <SectionHeader ref={ref as never} className={className}>\n          {children}\n        </SectionHeader>\n      );\n    }\n\n    const Element = elementType;\n\n    return (\n      <Element {...rest} className={className} ref={ref as never}>\n        {children}\n      </Element>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Header;\n"],"names":[],"mappings":";;;;AAgBO,MAAM,MAAA,GAAS,aAAA;AAAA,EACpB,QAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA,GAAc,QAAA;AAAA,MACd,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,IAAI,mBAAA,EAAqB;AACvB,MAAA,uBACE,GAAA,CAAC,aAAA,EAAA,EAAc,GAAA,EAAmB,SAAA,EAC/B,QAAA,EACH,CAAA;AAAA,IAEJ;AAEA,IAAA,MAAM,OAAA,GAAU,WAAA;AAEhB,IAAA,2BACG,OAAA,EAAA,EAAS,GAAG,IAAA,EAAM,SAAA,EAAsB,KACtC,QAAA,EACH,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

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

@@ -1,47 +1,37 @@
 "use client"
 /* */
-import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
-import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
-import "../../lib/propsContext/index.mjs";
-import { isAlphaColor } from "../../lib/types/props.mjs";
-import Text from "../Text/Text.mjs";
-import "../Text/index.mjs";
-import HeaderNavigation_module_default from "./HeaderNavigation.module.mjs";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/HeaderNavigation/HeaderNavigation.tsx
-/** @flr-generate all */
-var HeaderNavigation = (props) => {
-	const { children, className, color = "primary", ...rest } = props;
-	const rootClassName = clsx(HeaderNavigation_module_default.headerNavigation, isAlphaColor(color) && HeaderNavigation_module_default[color], className);
-	const propsContext = {
-		Link: {
-			wrapWith: /* @__PURE__ */ jsx("li", {}),
-			className: HeaderNavigation_module_default.link,
-			unstyled: true,
-			children: dynamic((props) => /* @__PURE__ */ jsx(Text, {
-				emulateBoldWidth: true,
-				children: props.children
-			}))
-		},
-		Button: {
-			className: HeaderNavigation_module_default.button,
-			color,
-			variant: "plain",
-			wrapWith: /* @__PURE__ */ jsx("li", {})
-		}
-	};
-	return /* @__PURE__ */ jsx("nav", {
-		className: rootClassName,
-		role: "navigation",
-		...rest,
-		children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
-			children
-		}) })
-	});
+import { jsx } from 'react/jsx-runtime';
+import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import clsx from 'clsx';
+import styles from './HeaderNavigation.module.scss.mjs';
+import { isAlphaColor } from '../../lib/types/props.mjs';
+import { Text } from '../Text/Text.mjs';
+
+const HeaderNavigation = (props) => {
+  const { children, className, color = "primary", ...rest } = props;
+  const rootClassName = clsx(
+    styles.headerNavigation,
+    isAlphaColor(color) && styles[color],
+    className
+  );
+  const propsContext = {
+    Link: {
+      wrapWith: /* @__PURE__ */ jsx("li", {}),
+      className: styles.link,
+      unstyled: true,
+      children: dynamic((props2) => /* @__PURE__ */ jsx(Text, { emulateBoldWidth: true, children: props2.children }))
+    },
+    Button: {
+      className: styles.button,
+      color,
+      variant: "plain",
+      wrapWith: /* @__PURE__ */ jsx("li", {})
+    }
+  };
+  return /* @__PURE__ */ jsx("nav", { className: rootClassName, role: "navigation", ...rest, children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }) });
 };
-//#endregion
-export { HeaderNavigation as default };
 
-//# sourceMappingURL=HeaderNavigation.mjs.map
+export { HeaderNavigation };
+//# sourceMappingURL=HeaderNavigation.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.mjs","names":[],"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"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,MAAM,IAAI,gCAAO,QAC9B,UACD;CAED,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,EAAM,CAAA;GAChB,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;cAAkB,MAAM;IAAgB,CAAA,CAC9C;GACH;EACD,QAAQ;GACN,WAAW,gCAAO;GAClB;GACA,SAAS;GACT,UAAU,oBAAC,MAAD,EAAM,CAAA;GACjB;EACF;AAED,QACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;YACnD,oBAAC,MAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;GACoB,CAAA,EACpB,CAAA;EACD,CAAA"}
+{"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;;;;"}

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

@@ -0,0 +1,19 @@
+"use client"
+/* */
+const headerNavigation = "flow--header-navigation";
+const link = "flow--header-navigation--link";
+const button = "flow--header-navigation--button";
+const light = "flow--header-navigation--light";
+const dark = "flow--header-navigation--dark";
+const styles = {
+	headerNavigation: headerNavigation,
+	link: link,
+	button: button,
+	light: light,
+	dark: dark,
+	"dark-static": "flow--header-navigation--dark-static",
+	"light-static": "flow--header-navigation--light-static"
+};
+
+export { button, dark, styles as default, headerNavigation, light, link };
+//# sourceMappingURL=HeaderNavigation.module.scss.mjs.map

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

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

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

@@ -1,48 +1,69 @@
 "use client"
 /* */
-import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
-import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import "../../lib/propsContext/index.mjs";
-import Heading_module_default from "./Heading.module.mjs";
-import clsx from "clsx";
-import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as Aria from "react-aria-components";
-//#region src/components/Heading/Heading.tsx
-/** @flr-generate all */
-var Heading = flowComponent("Heading", (props) => {
-	const { children, className, level = 2, color = "primary", wrap, size, ref, ...rest } = props;
-	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], className);
-	return /* @__PURE__ */ jsx(PropsContextProvider, {
-		props: {
-			Icon: {
-				"aria-hidden": true,
-				className: Heading_module_default.icon
-			},
-			AlertBadge: { tunnelId: "headingContent" },
-			Badge: { tunnelId: "headingContent" },
-			ContextualHelpTrigger: {
-				tunnelId: "headingContent",
-				Button: { tunnelId: null }
-			},
-			AlertText: { Icon: { className: Heading_module_default.icon } }
-		},
-		children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(Aria.Heading, {
-			level,
-			className: rootClassName,
-			...rest,
-			ref,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: Heading_module_default.headingText,
-				children
-			}), /* @__PURE__ */ jsx("span", {
-				className: Heading_module_default.headingContent,
-				children: /* @__PURE__ */ jsx(TunnelExit, { id: "headingContent" })
-			})]
-		}) })
-	});
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Heading.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import * as Aria from 'react-aria-components';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+
+const Heading = flowComponent("Heading", (props) => {
+  const {
+    children,
+    className,
+    level = 2,
+    color = "primary",
+    wrap,
+    size,
+    ref,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.heading,
+    size && styles[`size-${size}`],
+    styles[color],
+    wrap && styles[`wrap-${wrap}`],
+    className
+  );
+  const propsContext = {
+    Icon: {
+      "aria-hidden": true,
+      className: styles.icon
+    },
+    AlertBadge: {
+      tunnelId: "headingContent"
+    },
+    Badge: {
+      tunnelId: "headingContent"
+    },
+    ContextualHelpTrigger: {
+      tunnelId: "headingContent",
+      Button: {
+        tunnelId: null
+      }
+    },
+    AlertText: {
+      Icon: {
+        className: styles.icon
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
+    Aria.Heading,
+    {
+      level,
+      className: rootClassName,
+      ...rest,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.headingText, children }),
+        /* @__PURE__ */ jsx("span", { className: styles.headingContent, children: /* @__PURE__ */ jsx(TunnelExit, { id: "headingContent" }) })
+      ]
+    }
+  ) }) });
 });
-//#endregion
-export { Heading as default };
 
-//# sourceMappingURL=Heading.mjs.map
+export { Heading, Heading as default };
+//# sourceMappingURL=Heading.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor } from \"@/lib/types/props\";\n\nexport * from \"./view\";\nimport styles from \"./Heading.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface HeadingProps extends Aria.HeadingProps, FlowComponentProps {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"primary\" */\n  color?: \"primary\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"primary\",\n    wrap,\n    size,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnelId: \"headingContent\",\n    },\n    Badge: {\n      tunnelId: \"headingContent\",\n    },\n    ContextualHelpTrigger: {\n      tunnelId: \"headingContent\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <Aria.Heading\n          level={level}\n          className={rootClassName}\n          {...rest}\n          ref={ref}\n        >\n          <span className={styles.headingText}>{children}</span>\n          <span className={styles.headingContent}>\n            <TunnelExit id=\"headingContent\" />\n          </span>\n        </Aria.Heading>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;AAsBA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,uBAAO,QACP,QAAQ,uBAAO,QAAQ,SACvB,UACD;AA0BD,QACE,oBAAC,sBAAD;EAAsB,OAzBW;GACjC,MAAM;IACJ,eAAe;IACf,WAAW,uBAAO;IACnB;GACD,YAAY,EACV,UAAU,kBACX;GACD,OAAO,EACL,UAAU,kBACX;GACD,uBAAuB;IACrB,UAAU;IACV,QAAQ,EACN,UAAU,MACX;IACF;GACD,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,MACnB,EACF;GACF;YAIG,oBAAC,gBAAD,EAAA,UACE,qBAAC,KAAK,SAAN;GACS;GACP,WAAW;GACX,GAAI;GACC;aAJP,CAME,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;IAAgB,CAAA,EACtD,oBAAC,QAAD;IAAM,WAAW,uBAAO;cACtB,oBAAC,YAAD,EAAY,IAAG,kBAAmB,CAAA;IAC7B,CAAA,CACM;MACA,CAAA;EACI,CAAA;EAEzB"}
+{"version":3,"file":"Heading.mjs","sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor } from \"@/lib/types/props\";\n\nexport * from \"./view\";\nimport styles from \"./Heading.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface HeadingProps extends Aria.HeadingProps, FlowComponentProps {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"primary\" */\n  color?: \"primary\" | \"danger\" | \"unavailable\" | AlphaColor;\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"primary\",\n    wrap,\n    size,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnelId: \"headingContent\",\n    },\n    Badge: {\n      tunnelId: \"headingContent\",\n    },\n    ContextualHelpTrigger: {\n      tunnelId: \"headingContent\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <Aria.Heading\n          level={level}\n          className={rootClassName}\n          {...rest}\n          ref={ref}\n        >\n          <span className={styles.headingText}>{children}</span>\n          <span className={styles.headingContent}>\n            <TunnelExit id=\"headingContent\" />\n          </span>\n        </Aria.Heading>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"names":[],"mappings":";;;;;;;;;AAsBO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA,GAAQ,CAAA;AAAA,IACR,KAAA,GAAQ,SAAA;AAAA,IACR,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,OAAA;AAAA,IACP,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B,OAAO,KAAK,CAAA;AAAA,IACZ,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,aAAA,EAAe,IAAA;AAAA,MACf,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU,gBAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM;AAAA,QACJ,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAA,CAAK,OAAA;AAAA,IAAL;AAAA,MACC,KAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,WAAA,EAAc,QAAA,EAAS,CAAA;AAAA,wBAC/C,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,gBACtB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,gBAAA,EAAiB,CAAA,EAClC;AAAA;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,33 @@
+"use client"
+/* */
+const heading = "flow--heading";
+const danger = "flow--heading--danger";
+const unavailable = "flow--heading--unavailable";
+const dark = "flow--heading--dark";
+const light = "flow--heading--light";
+const headingText = "flow--heading--heading-text";
+const icon = "flow--heading--icon";
+const headingContent = "flow--heading--heading-content";
+const styles = {
+	heading: heading,
+	danger: danger,
+	unavailable: unavailable,
+	dark: dark,
+	light: light,
+	"dark-static": "flow--heading--dark-static",
+	"light-static": "flow--heading--light-static",
+	headingText: headingText,
+	icon: icon,
+	headingContent: headingContent,
+	"size-xs": "flow--heading--size-xs",
+	"size-s": "flow--heading--size-s",
+	"size-m": "flow--heading--size-m",
+	"size-l": "flow--heading--size-l",
+	"size-xl": "flow--heading--size-xl",
+	"size-xxl": "flow--heading--size-xxl",
+	"wrap-wrap": "flow--heading--wrap-wrap",
+	"wrap-balance": "flow--heading--wrap-balance"
+};
+
+export { danger, dark, styles as default, heading, headingContent, headingText, icon, light, unavailable };
+//# sourceMappingURL=Heading.module.scss.mjs.map

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

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

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

@@ -1,27 +1,44 @@
 "use client"
 /* */
-import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import Icon_module_default from "./Icon.module.mjs";
-import { cloneElement as cloneElement$1 } from "../../lib/react/cloneElement.mjs";
-import clsx from "clsx";
-import React from "react";
-//#region src/components/Icon/Icon.tsx
-/** @flr-generate all */
-var Icon = flowComponent("Icon", (props) => {
-	const { className, "aria-label": ariaLabel, children, size = "m", status, ref: ignoredRef, ...svgAttributes } = props;
-	const iconProps = {
-		...svgAttributes,
-		focusable: "false",
-		role: "img",
-		"aria-hidden": !ariaLabel,
-		"aria-label": ariaLabel,
-		className: clsx(Icon_module_default.icon, className, Icon_module_default[`size-${size}`], status && Icon_module_default[status])
-	};
-	const iconElement = React.Children.toArray(children)[0];
-	if (!React.isValidElement(iconElement)) throw new Error(`Expected children of Icon component to be a valid React element (got ${String(children)})`);
-	return cloneElement$1(iconElement, iconProps);
+import React from 'react';
+import styles from './Icon.module.scss.mjs';
+import clsx from 'clsx';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { cloneElement } from '../../lib/react/cloneElement.mjs';
+
+const Icon = flowComponent("Icon", (props) => {
+  const {
+    className,
+    "aria-label": ariaLabel,
+    children,
+    size = "m",
+    status,
+    ref: ignoredRef,
+    ...svgAttributes
+  } = props;
+  const iconProps = {
+    ...svgAttributes,
+    focusable: "false",
+    role: "img",
+    "aria-hidden": !ariaLabel,
+    "aria-label": ariaLabel,
+    className: clsx(
+      styles.icon,
+      className,
+      styles[`size-${size}`],
+      status && styles[status]
+    )
+  };
+  const iconElement = React.Children.toArray(children)[0];
+  if (!React.isValidElement(iconElement)) {
+    throw new Error(
+      `Expected children of Icon component to be a valid React element (got ${String(
+        children
+      )})`
+    );
+  }
+  return cloneElement(iconElement, iconProps);
 });
-//#endregion
-export { Icon as default };
 
-//# sourceMappingURL=Icon.mjs.map
+export { Icon };
+//# sourceMappingURL=Icon.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":[],"sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n  extends\n    PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n    FlowComponentProps,\n    PropsWithStatus {\n  /** The size of the icon. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n  const {\n    className,\n    \"aria-label\": ariaLabel,\n    children,\n    size = \"m\",\n    status,\n    ref: ignoredRef,\n    ...svgAttributes\n  } = props;\n\n  const iconProps: SvgAttributeProps = {\n    ...svgAttributes,\n    focusable: \"false\",\n    role: \"img\",\n    \"aria-hidden\": !ariaLabel,\n    \"aria-label\": ariaLabel,\n    className: clsx(\n      styles.icon,\n      className,\n      styles[`size-${size}`],\n      status && styles[status],\n    ),\n  };\n\n  const iconElement = React.Children.toArray(children)[0];\n\n  if (!React.isValidElement(iconElement)) {\n    throw new Error(\n      `Expected children of Icon component to be a valid React element (got ${String(\n        children,\n      )})`,\n    );\n  }\n\n  return cloneElement(iconElement, iconProps);\n});\n\nexport default Icon;\n"],"mappings":";;;;;;;AAqBA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,WACA,cAAc,WACd,UACA,OAAO,KACP,QACA,KAAK,YACL,GAAG,kBACD;CAEJ,MAAM,YAA+B;EACnC,GAAG;EACH,WAAW;EACX,MAAM;EACN,eAAe,CAAC;EAChB,cAAc;EACd,WAAW,KACT,oBAAO,MACP,WACA,oBAAO,QAAQ,SACf,UAAU,oBAAO,QAClB;EACF;CAED,MAAM,cAAc,MAAM,SAAS,QAAQ,SAAS,CAAC;AAErD,KAAI,CAAC,MAAM,eAAe,YAAY,CACpC,OAAM,IAAI,MACR,wEAAwE,OACtE,SACD,CAAC,GACH;AAGH,QAAO,eAAa,aAAa,UAAU;EAC3C"}
+{"version":3,"file":"Icon.mjs","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n  extends\n    PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n    FlowComponentProps,\n    PropsWithStatus {\n  /** The size of the icon. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n  const {\n    className,\n    \"aria-label\": ariaLabel,\n    children,\n    size = \"m\",\n    status,\n    ref: ignoredRef,\n    ...svgAttributes\n  } = props;\n\n  const iconProps: SvgAttributeProps = {\n    ...svgAttributes,\n    focusable: \"false\",\n    role: \"img\",\n    \"aria-hidden\": !ariaLabel,\n    \"aria-label\": ariaLabel,\n    className: clsx(\n      styles.icon,\n      className,\n      styles[`size-${size}`],\n      status && styles[status],\n    ),\n  };\n\n  const iconElement = React.Children.toArray(children)[0];\n\n  if (!React.isValidElement(iconElement)) {\n    throw new Error(\n      `Expected children of Icon component to be a valid React element (got ${String(\n        children,\n      )})`,\n    );\n  }\n\n  return cloneElement(iconElement, iconProps);\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAA,GAAO,GAAA;AAAA,IACP,MAAA;AAAA,IACA,GAAA,EAAK,UAAA;AAAA,IACL,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAA,GAA+B;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,SAAA,EAAW,OAAA;AAAA,IACX,IAAA,EAAM,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAA,EAAc,SAAA;AAAA,IACd,SAAA,EAAW,IAAA;AAAA,MACT,MAAA,CAAO,IAAA;AAAA,MACP,SAAA;AAAA,MACA,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,MACrB,MAAA,IAAU,OAAO,MAAM;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAA,CAAe,WAAW,CAAA,EAAG;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,qEAAA,EAAwE,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,EACF;AAEA,EAAA,OAAO,YAAA,CAAa,aAAa,SAAS,CAAA;AAC5C,CAAC;;;;"}

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

@@ -0,0 +1,23 @@
+"use client"
+/* */
+const icon = "flow--icon";
+const danger = "flow--icon--danger";
+const success = "flow--icon--success";
+const warning = "flow--icon--warning";
+const info = "flow--icon--info";
+const unavailable = "flow--icon--unavailable";
+const styles = {
+	icon: icon,
+	"size-m": "flow--icon--size-m",
+	"svg-inline--fa": "flow--icon--svg-inline--fa",
+	"size-s": "flow--icon--size-s",
+	"size-l": "flow--icon--size-l",
+	danger: danger,
+	success: success,
+	warning: warning,
+	info: info,
+	unavailable: unavailable
+};
+
+export { danger, styles as default, icon, info, success, unavailable, warning };
+//# sourceMappingURL=Icon.module.scss.mjs.map

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

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

package/dist/js/packages/components/src/components/Icon/components/IconSetProvider.mjs

@@ -1,19 +1,15 @@
 "use client"
 /* */
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-import "@mittwald/flow-icons";
-//#region src/components/Icon/components/IconSetProvider.tsx
-var context = createContext({ set: void 0 });
-var useContextIcon = (icon) => useContext(context).set?.[icon];
-var IconSetProvider = (props) => {
-	const { set, children } = props;
-	return /* @__PURE__ */ jsx(context.Provider, {
-		value: { set },
-		children
-	});
+import { jsx } from 'react/jsx-runtime';
+import '@mittwald/flow-icons';
+import { createContext, useContext } from 'react';
+
+const context = createContext({ set: void 0 });
+const useContextIcon = (icon) => useContext(context).set?.[icon];
+const IconSetProvider = (props) => {
+  const { set, children } = props;
+  return /* @__PURE__ */ jsx(context.Provider, { value: { set }, children });
 };
-//#endregion
-export { IconSetProvider, useContextIcon };
 
-//# sourceMappingURL=IconSetProvider.mjs.map
+export { IconSetProvider, useContextIcon };
+//# sourceMappingURL=IconSetProvider.mjs.map

package/dist/js/packages/components/src/components/Icon/components/IconSetProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconSetProvider.mjs","names":[],"sources":["../../../../../../../../src/components/Icon/components/IconSetProvider.tsx"],"sourcesContent":["import { type defaultIconSet } from \"@mittwald/flow-icons\";\nimport {\n  createContext,\n  useContext,\n  type FC,\n  type PropsWithChildren,\n} from \"react\";\n\nexport type IconSet = typeof defaultIconSet;\n\ninterface Context {\n  set?: IconSet;\n}\n\nconst context = createContext<Context>({ set: undefined });\n\nexport const useContextIcon = (icon: keyof IconSet) =>\n  useContext(context).set?.[icon];\n\nexport const IconSetProvider: FC<PropsWithChildren<Context>> = (props) => {\n  const { set, children } = props;\n  return <context.Provider value={{ set }}>{children}</context.Provider>;\n};\n"],"mappings":";;;;AAcA,IAAM,UAAU,cAAuB,EAAE,KAAK,KAAA,GAAW,CAAC;AAE1D,IAAa,kBAAkB,SAC7B,WAAW,QAAQ,CAAC,MAAM;AAE5B,IAAa,mBAAmD,UAAU;CACxE,MAAM,EAAE,KAAK,aAAa;AAC1B,QAAO,oBAAC,QAAQ,UAAT;EAAkB,OAAO,EAAE,KAAK;EAAG;EAA4B,CAAA"}
+{"version":3,"file":"IconSetProvider.mjs","sources":["../../../../../../../../src/components/Icon/components/IconSetProvider.tsx"],"sourcesContent":["import { type defaultIconSet } from \"@mittwald/flow-icons\";\nimport {\n  createContext,\n  useContext,\n  type FC,\n  type PropsWithChildren,\n} from \"react\";\n\nexport type IconSet = typeof defaultIconSet;\n\ninterface Context {\n  set?: IconSet;\n}\n\nconst context = createContext<Context>({ set: undefined });\n\nexport const useContextIcon = (icon: keyof IconSet) =>\n  useContext(context).set?.[icon];\n\nexport const IconSetProvider: FC<PropsWithChildren<Context>> = (props) => {\n  const { set, children } = props;\n  return <context.Provider value={{ set }}>{children}</context.Provider>;\n};\n"],"names":[],"mappings":";;;;AAcA,MAAM,OAAA,GAAU,aAAA,CAAuB,EAAE,GAAA,EAAK,QAAW,CAAA;AAElD,MAAM,iBAAiB,CAAC,IAAA,KAC7B,WAAW,OAAO,CAAA,CAAE,MAAM,IAAI;AAEzB,MAAM,eAAA,GAAkD,CAAC,KAAA,KAAU;AACxE,EAAA,MAAM,EAAE,GAAA,EAAK,QAAA,EAAS,GAAI,KAAA;AAC1B,EAAA,uBAAO,GAAA,CAAC,QAAQ,QAAA,EAAR,EAAiB,OAAO,EAAE,GAAA,IAAQ,QAAA,EAAS,CAAA;AACrD;;;;"}