@mittwald/flow-react-components 0.2.0-experimental.776 → 1.0.1

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

@@ -1,53 +1,33 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import styles from './Flex.module.scss.mjs';
-
-const Flex = (props) => {
-  const {
-    children,
-    className,
-    direction = "row",
-    align,
-    justify,
-    gap,
-    columnGap,
-    rowGap,
-    grow,
-    wrap = "nowrap",
-    padding,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    elementType = "div",
-    ...restProps
-  } = props;
-  const rootClassName = clsx(styles.flex, className);
-  const Element = elementType;
-  return /* @__PURE__ */ jsx(
-    Element,
-    {
-      ...restProps,
-      className: rootClassName,
-      style: {
-        flexDirection: direction,
-        alignItems: align === "end" ? "flex-end" : align === "start" ? "flex-start" : align,
-        justifyContent: justify,
-        columnGap: columnGap ? `var(--size-px--${columnGap})` : gap ? `var(--size-px--${gap})` : void 0,
-        rowGap: rowGap ? `var(--size-px--${rowGap})` : gap ? `var(--size-px--${gap})` : void 0,
-        flexGrow: grow ? 1 : void 0,
-        flexWrap: wrap,
-        paddingTop: paddingTop ? `var(--size-px--${paddingTop})` : padding ? `var(--size-px--${padding})` : void 0,
-        paddingBottom: paddingBottom ? `var(--size-px--${paddingBottom})` : padding ? `var(--size-px--${padding})` : void 0,
-        paddingLeft: paddingLeft ? `var(--size-px--${paddingLeft})` : padding ? `var(--size-px--${padding})` : void 0,
-        paddingRight: paddingRight ? `var(--size-px--${paddingRight})` : padding ? `var(--size-px--${padding})` : void 0
-      },
-      children
-    }
-  );
+import Flex_module_default from "./Flex.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Flex/Flex.tsx
+/** @flr-generate all */
+var Flex = (props) => {
+	const { children, className, direction = "row", align, justify, gap, columnGap, rowGap, grow, wrap = "nowrap", padding, paddingTop, paddingBottom, paddingLeft, paddingRight, elementType = "div", ...restProps } = props;
+	const rootClassName = clsx(Flex_module_default.flex, className);
+	return /* @__PURE__ */ jsx(elementType, {
+		...restProps,
+		className: rootClassName,
+		style: {
+			flexDirection: direction,
+			alignItems: align === "end" ? "flex-end" : align === "start" ? "flex-start" : align,
+			justifyContent: justify,
+			columnGap: columnGap ? `var(--size-px--${columnGap})` : gap ? `var(--size-px--${gap})` : void 0,
+			rowGap: rowGap ? `var(--size-px--${rowGap})` : gap ? `var(--size-px--${gap})` : void 0,
+			flexGrow: grow ? 1 : void 0,
+			flexWrap: wrap,
+			paddingTop: paddingTop ? `var(--size-px--${paddingTop})` : padding ? `var(--size-px--${padding})` : void 0,
+			paddingBottom: paddingBottom ? `var(--size-px--${paddingBottom})` : padding ? `var(--size-px--${padding})` : void 0,
+			paddingLeft: paddingLeft ? `var(--size-px--${paddingLeft})` : padding ? `var(--size-px--${padding})` : void 0,
+			paddingRight: paddingRight ? `var(--size-px--${paddingRight})` : padding ? `var(--size-px--${padding})` : void 0
+		},
+		children
+	});
 };
+//#endregion
+export { Flex, Flex as default };
 
-export { Flex };
-//# sourceMappingURL=Flex.mjs.map
+//# sourceMappingURL=Flex.mjs.map

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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,SAAS;CAIjD,OACE,oBAAC,aAAD;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;EACR;EAEC;CACM,CAAA;AAEb"}

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

@@ -0,0 +1,9 @@
+"use client"
+/* */
+//#region src/components/Flex/Flex.module.scss
+var flex = "flow--flex";
+var Flex_module_default = { flex };
+//#endregion
+export { Flex_module_default as default, flex };
+
+//# sourceMappingURL=Flex.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.module.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.module.scss"],"sourcesContent":[".flex {\n  display: flex;\n}\n"],"mappings":""}

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

@@ -0,0 +1,19 @@
+"use client"
+/* */
+//#region src/components/FormField/FormField.module.scss
+var formField = "flow--form-field";
+var label = "flow--form-field--label";
+var fieldError = "flow--form-field--field-error";
+var customFieldError = "flow--form-field--custom-field-error";
+var fieldDescription = "flow--form-field--field-description";
+var FormField_module_default = {
+	formField,
+	label,
+	fieldError,
+	customFieldError,
+	fieldDescription
+};
+//#endregion
+export { customFieldError, FormField_module_default as default, fieldDescription, fieldError, formField, label };
+
+//# sourceMappingURL=FormField.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.module.mjs","names":[],"sources":["../../../../../../../src/components/FormField/FormField.module.scss"],"sourcesContent":[".formField {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n\n  /* Elements */\n  .label {\n    order: 1;\n    grid-area: label;\n    margin-bottom: var(--form-control--label-to-control-spacing);\n  }\n\n  .fieldError,\n  .customFieldError,\n  .fieldDescription {\n    order: 3;\n    grid-area: fieldDescription;\n    margin-top: var(--form-control--control-to-info-spacing);\n  }\n\n  /* With field error */\n\n  &:has(.fieldError),\n  &:has(.customFieldError) {\n    .fieldDescription {\n      display: none;\n    }\n  }\n\n  /* With custom field error */\n\n  &:has(.customFieldError) .fieldError {\n    display: none;\n  }\n\n  /* Disabled */\n\n  &[data-disabled] .label,\n  &[data-disabled] .fieldDescription {\n    color: var(--label--color--disabled);\n  }\n}\n"],"mappings":""}

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

@@ -1,30 +1,25 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { SectionHeader } from '../Section/components/SectionHeader/SectionHeader.mjs';
+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, Header as default };
 
-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
+//# sourceMappingURL=Header.mjs.map

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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;CAEJ,IAAI,qBACF,OACE,oBAAC,eAAD;EAAoB;EAAyB;EAC1C;CACY,CAAA;CAMnB,OACE,oBAAC,aAAD;EAAS,GAAI;EAAiB;EAAgB;EAC3C;CACM,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -1,37 +1,45 @@
 "use client"
 /* */
-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 }) }) });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { isAlphaColor } from "../../lib/types/props.mjs";
+import { Text } from "../Text/Text.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 = "default", ...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: isAlphaColor(color) ? color : "secondary",
+			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, HeaderNavigation as default };
 
-export { HeaderNavigation };
-//# sourceMappingURL=HeaderNavigation.mjs.map
+//# sourceMappingURL=HeaderNavigation.mjs.map

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

@@ -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;;;;"}
+{"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 \"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"],"mappings":";;;;;;;;;;;AAsBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,SAAS;CAE5D,MAAM,gBAAgB,KACpB,gCAAO,kBACP,aAAa,KAAK,KAAK,gCAAO,QAC9B,SACF;CAEA,MAAM,eAA6B;EACjC,MAAM;GACJ,UAAU,oBAAC,MAAD,CAAK,CAAA;GACf,WAAW,gCAAO;GAClB,UAAU;GACV,UAAU,SAAS,UACjB,oBAAC,MAAD;IAAM,kBAAA;IAAkB,UAAA,MAAM;GAAe,CAAA,CAC9C;EACH;EACA,QAAQ;GACN,WAAW,gCAAO;GAClB,OAAO,aAAa,KAAK,IAAI,QAAQ;GACrC,SAAS;GACT,UAAU,oBAAC,MAAD,CAAK,CAAA;EACjB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EACnD,UAAA,oBAAC,MAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,EACpB,CAAA;CACD,CAAA;AAET"}

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

@@ -0,0 +1,21 @@
+"use client"
+/* */
+//#region src/components/HeaderNavigation/HeaderNavigation.module.scss
+var headerNavigation = "flow--header-navigation";
+var link = "flow--header-navigation--link";
+var button = "flow--header-navigation--button";
+var dark = "flow--header-navigation--dark";
+var light = "flow--header-navigation--light";
+var HeaderNavigation_module_default = {
+	headerNavigation,
+	link,
+	button,
+	dark,
+	light,
+	"dark-static": "flow--header-navigation--dark-static",
+	"light-static": "flow--header-navigation--light-static"
+};
+//#endregion
+export { button, dark, HeaderNavigation_module_default as default, headerNavigation, light, link };
+
+//# sourceMappingURL=HeaderNavigation.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/HeaderNavigation/HeaderNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.headerNavigation {\n  ul {\n    display: flex;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: var(--header-navigation--spacing);\n  }\n\n  li {\n    list-style: none;\n  }\n\n  .link {\n    padding: var(--header-navigation--padding);\n    border-radius: var(--header-navigation--corner-radius);\n    color: var(--header-navigation--color);\n    position: relative;\n\n    @include focus.focus;\n\n    &:hover:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--hover);\n    }\n\n    &[data-pressed]:not([aria-current]) {\n      background-color: var(--header-navigation--background-color--pressed);\n    }\n\n    &[aria-current] {\n      font-weight: var(--header-navigation--font-weight-current);\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        inset-inline: 0;\n        background-color: var(--header-navigation--color);\n        height: var(--header-navigation--underline-width-current);\n      }\n    }\n  }\n\n  .button {\n    color: var(--header-navigation--color);\n    border-radius: var(--header-navigation--corner-radius-round);\n\n    &:hover,\n    &[data-pressed] {\n      color: var(--header-navigation--color);\n    }\n  }\n\n  /* Color */\n\n  @mixin color($color) {\n    &.#{$color} {\n      .link,\n      .button {\n        color: var(--header-navigation--color-#{$color});\n\n        &:hover:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--hover\n          );\n        }\n\n        &[data-pressed]:not([aria-current]) {\n          background-color: var(\n            --header-navigation--background-color-#{$color}--pressed\n          );\n        }\n\n        &[aria-current] {\n          &::after {\n            background-color: var(--header-navigation--color-#{$color});\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}

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

@@ -1,69 +1,62 @@
 "use client"
 /* */
-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" }) })
-      ]
-    }
-  ) }) });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { styleClassname } from "../../lib/scss/selectors.mjs";
+import Heading_module_default from "./Heading.module.mjs";
+import clsx from "clsx";
+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 = "default", wrap, size, ref, elementType, ...rest } = props;
+	const rootClassName = clsx(Heading_module_default.heading, size && Heading_module_default[`size-${size}`], color !== "default" && Heading_module_default[color], wrap && Heading_module_default[`wrap-${wrap}`], elementType && styleClassname(Heading_module_default, `h${level}`), className);
+	const Element = elementType ?? Aria.Heading;
+	const propsContext = {
+		Icon: {
+			"aria-hidden": true,
+			className: Heading_module_default.icon
+		},
+		AlertBadge: { tunnel: {
+			id: "headingContent",
+			component: "Heading"
+		} },
+		Badge: { tunnel: {
+			id: "headingContent",
+			component: "Heading"
+		} },
+		ContextualHelpTrigger: {
+			tunnel: {
+				id: "headingContent",
+				component: "Heading"
+			},
+			Button: { tunnel: null }
+		},
+		AlertText: { Icon: { className: Heading_module_default.icon } }
+	};
+	return /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children: /* @__PURE__ */ jsxs(Element, {
+			className: rootClassName,
+			...rest,
+			ref,
+			level,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: Heading_module_default.headingText,
+				children
+			}), /* @__PURE__ */ jsx("span", {
+				className: Heading_module_default.headingContent,
+				children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: "headingContent",
+					component: "Heading"
+				})
+			})]
+		})
+	});
 });
-
+//#endregion
 export { Heading, Heading as default };
-//# sourceMappingURL=Heading.mjs.map
+
+//# sourceMappingURL=Heading.mjs.map

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

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import type { AlphaColor, PropsWithElementType } from \"@/lib/types/props\";\nimport styles from \"./Heading.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\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 { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface HeadingProps\n  extends\n    Aria.HeadingProps,\n    FlowComponentProps,\n    PropsWithElementType<\"span\" | \"p\"> {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"default\" */\n  color?: \"default\" | \"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 = \"default\",\n    wrap,\n    size,\n    ref,\n    elementType,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[`size-${size}`],\n    color !== \"default\" && styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    elementType && styleClassname(styles, `h${level}`),\n    className,\n  );\n\n  const Element = elementType ?? Aria.Heading;\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    Badge: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n    },\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"headingContent\",\n        component: \"Heading\",\n      },\n      Button: {\n        tunnel: null,\n      },\n    },\n    AlertText: {\n      Icon: {\n        className: styles.icon,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} {...rest} ref={ref} level={level}>\n        <span className={styles.headingText}>{children}</span>\n        <span className={styles.headingContent}>\n          <UiComponentTunnelExit id=\"headingContent\" component=\"Heading\" />\n        </span>\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,UACA,WACA,QAAQ,GACR,QAAQ,WACR,MACA,MACA,KACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,uBAAO,SACP,QAAQ,uBAAO,QAAQ,SACvB,UAAU,aAAa,uBAAO,QAC9B,QAAQ,uBAAO,QAAQ,SACvB,eAAe,eAAe,wBAAQ,IAAI,OAAO,GACjD,SACF;CAEA,MAAM,UAAU,eAAe,KAAK;CAEpC,MAAM,eAA6B;EACjC,MAAM;GACJ,eAAe;GACf,WAAW,uBAAO;EACpB;EACA,YAAY,EACV,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,uBAAuB;GACrB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,QAAQ,EACN,QAAQ,KACV;EACF;EACA,WAAW,EACT,MAAM,EACJ,WAAW,uBAAO,KACpB,EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,SAAD;GAAS,WAAW;GAAe,GAAI;GAAW;GAAY;GAA9D,UAAA,CACE,oBAAC,QAAD;IAAM,WAAW,uBAAO;IAAc;GAAe,CAAA,GACrD,oBAAC,QAAD;IAAM,WAAW,uBAAO;IACtB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAW,CAAA;GAC5D,CAAA,CACC;;CACW,CAAA;AAE1B,CAAC"}

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

@@ -0,0 +1,47 @@
+"use client"
+/* */
+//#region src/components/Heading/Heading.module.scss
+var heading = "flow--heading";
+var danger = "flow--heading--danger";
+var unavailable = "flow--heading--unavailable";
+var dark = "flow--heading--dark";
+var light = "flow--heading--light";
+var headingText = "flow--heading--heading-text";
+var icon = "flow--heading--icon";
+var headingContent = "flow--heading--heading-content";
+var h1 = "flow--heading--h1";
+var h2 = "flow--heading--h2";
+var h3 = "flow--heading--h3";
+var h4 = "flow--heading--h4";
+var h5 = "flow--heading--h5";
+var h6 = "flow--heading--h6";
+var Heading_module_default = {
+	heading,
+	danger,
+	unavailable,
+	dark,
+	light,
+	"dark-static": "flow--heading--dark-static",
+	"light-static": "flow--heading--light-static",
+	headingText,
+	icon,
+	headingContent,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	"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"
+};
+//#endregion
+export { danger, dark, Heading_module_default as default, h1, h2, h3, h4, h5, h6, heading, headingContent, headingText, icon, light, unavailable };
+
+//# sourceMappingURL=Heading.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n  color: var(--heading--color);\n  font-size: var(--font-size);\n  font-weight: var(--heading--font-weight);\n  text-wrap-style: pretty;\n\n  --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--heading--color-#{$color});\n    }\n  }\n\n  @include color(\"danger\");\n  @include color(\"unavailable\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  .headingText {\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n\n    &:not(:last-child):has(+ .headingContent:not(:empty)) {\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .headingContent {\n    vertical-align: bottom;\n    display: inline-flex;\n    min-height: var(--heading-line-height);\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    flex-wrap: wrap;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &:where(h1),\n  &:where(.h1) {\n    --font-size: var(--font-size-heading--xl);\n  }\n\n  &:where(h2),\n  &:where(.h2) {\n    --font-size: var(--font-size-heading--m);\n  }\n\n  &:where(h3),\n  &:where(.h3) {\n    --font-size: var(--font-size-heading--s);\n  }\n\n  &:where(h4),\n  &:where(.h4),\n  &:where(h5),\n  &:where(.h5),\n  &:where(h6),\n  &:where(.h6) {\n    --font-size: var(--font-size-heading--xs);\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --font-size: var(--font-size-heading--#{$size});\n    }\n  }\n\n  @include size(\"xs\");\n  @include size(\"s\");\n  @include size(\"m\");\n  @include size(\"l\");\n  @include size(\"xl\");\n  @include size(\"xxl\");\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n}\n\n@media (max-width: 768px) {\n  .heading {\n    &:where(h1),\n    &.size-xl {\n      --font-size: var(--font-size-heading--l);\n    }\n\n    &.size-l {\n      --font-size: var(--font-size-heading--m);\n    }\n\n    &:where(h2),\n    &.size-m {\n      --font-size: var(--font-size-heading--s);\n    }\n\n    &:where(h3),\n    &.size-s {\n      --font-size: var(--font-size-heading--xs);\n    }\n  }\n}\n"],"mappings":""}