@mittwald/flow-react-components 0.2.0-alpha.6 → 0.2.0-alpha.600

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs

@@ -0,0 +1,101 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import * as Aria from 'react-aria-components';
+import { IllustratedMessage } from '../IllustratedMessage/IllustratedMessage.mjs';
+import styles from './FileDropZone.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 { addAwaitedArrayBuffer } from '../../../../core/src/file.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+
+const FileDropZone = flowComponent(
+  "FileDropZone",
+  (props) => {
+    const {
+      multiple,
+      accept,
+      className,
+      onChange: onChangeDropZone,
+      children,
+      name,
+      isDisabled,
+      isReadOnly
+    } = props;
+    const {
+      FieldErrorView,
+      FieldErrorCaptureContext,
+      fieldProps,
+      fieldPropsContext
+    } = useFieldComponent(props);
+    const fileFieldRef = useRef(null);
+    const rootClassName = clsx(
+      styles.fileDropZone,
+      isDisabled && styles.disabled,
+      className
+    );
+    const propsContext = {
+      ...fieldPropsContext,
+      FileField: {
+        name,
+        onChange: onChangeDropZone,
+        ref: fileFieldRef,
+        accept,
+        multiple,
+        Button: { variant: "outline", color: "dark" },
+        isDisabled,
+        isReadOnly
+      },
+      Heading: {
+        className: styles.heading
+      },
+      Icon: { className: styles.icon },
+      Text: { className: styles.text }
+    };
+    const onDropHandler = async (event) => {
+      if (isReadOnly) {
+        return;
+      }
+      const fileDropItems = event.items.filter(
+        (file) => file.kind === "file"
+      );
+      const files = await Promise.all(
+        fileDropItems.filter((f) => !accept || accept?.includes(f.type)).map(async (f) => {
+          const file = await f.getFile();
+          return await addAwaitedArrayBuffer(file);
+        })
+      );
+      if (files.length > 0) {
+        const fileTransfer = new DataTransfer();
+        for (const file of multiple ? files : [files[0]]) {
+          if (file) {
+            fileTransfer.items.add(file);
+          }
+        }
+        onChangeDropZone?.(fileTransfer.files);
+        if (fileFieldRef.current) {
+          fileFieldRef.current.files = fileTransfer.files;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
+      /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
+        Aria.DropZone,
+        {
+          className: rootClassName,
+          onDrop: onDropHandler,
+          isDisabled,
+          "data-readonly": isReadOnly,
+          children: /* @__PURE__ */ jsx(IllustratedMessage, { color: "dark", children })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(FieldErrorView, {})
+    ] });
+  }
+);
+
+export { FileDropZone, FileDropZone as default };
+//# sourceMappingURL=FileDropZone.mjs.map

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props);\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div {...fieldProps}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/FileDropZone/FileDropZone.module.scss.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+const fileDropZone = "flow--file-drop-zone";
+const disabled = "flow--file-drop-zone--disabled";
+const icon = "flow--file-drop-zone--icon";
+const heading = "flow--file-drop-zone--heading";
+const text = "flow--file-drop-zone--text";
+const styles = {
+	fileDropZone: fileDropZone,
+	disabled: disabled,
+	icon: icon,
+	heading: heading,
+	text: text
+};
+
+export { styles as default, disabled, fileDropZone, heading, icon, text };
+//# sourceMappingURL=FileDropZone.module.scss.mjs.map

package/dist/js/components/src/components/FileDropZone/FileDropZone.module.scss.mjs.map

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

package/dist/js/components/src/components/FileField/FileField.mjs

@@ -0,0 +1,77 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFormValidation } from '@react-aria/form';
+import { useFormValidationState } from '@react-stately/form';
+import { FieldErrorContext } from 'react-aria-components';
+import { FileInput } from './components/FileInput.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { addAwaitedArrayBuffer } from '../../../../core/src/file.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+
+const FileField = flowComponent("FileField", (props) => {
+  const {
+    children,
+    ref,
+    isRequired,
+    isInvalid,
+    isDisabled,
+    validationBehavior,
+    onChange,
+    isReadOnly,
+    ...restInputProps
+  } = props;
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
+  const inputRef = useObjectRef(ref);
+  const formValidationState = useFormValidationState({
+    value: void 0,
+    validationBehavior,
+    isInvalid
+  });
+  useFormValidation({ validationBehavior }, formValidationState, inputRef);
+  const inputProps = {
+    ...restInputProps,
+    "aria-invalid": formValidationState.displayValidation.isInvalid,
+    value: void 0
+  };
+  const handleChange = (fileList) => {
+    if (fileList && onChange) {
+      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(
+        () => onChange(fileList)
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { ...fieldProps, children: /* @__PURE__ */ jsxs(FieldErrorContext.Provider, { value: formValidationState.displayValidation, children: [
+    /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-readonly": isReadOnly,
+        "data-required": !!isRequired || void 0,
+        "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
+        children: /* @__PURE__ */ jsx(
+          FileInput,
+          {
+            ref: inputRef,
+            isReadOnly,
+            onChange: isReadOnly ? void 0 : handleChange,
+            isDisabled,
+            ...inputProps,
+            children
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(FieldErrorView, {})
+  ] }) });
+});
+
+export { FileField, FileField as default };
+//# sourceMappingURL=FileField.mjs.map

package/dist/js/components/src/components/FileField/FileField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={fieldPropsContext}>\n            <div\n              data-readonly={isReadOnly}\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n            >\n              <FileInput\n                ref={inputRef}\n                isReadOnly={isReadOnly}\n                onChange={isReadOnly ? undefined : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,YAAA,GAAyC,CAAC,QAAA,KAAa;AAC3D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,kBAAA,IAAA,CAAC,kBAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,mBAAA,CAAoB,iBAAA,EACrD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,eAAA,EAAe,UAAA;AAAA,QACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,QAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,QAGrD,QAAA,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,QAAA;AAAA,YACL,UAAA;AAAA,YACA,QAAA,EAAU,aAAa,MAAA,GAAY,YAAA;AAAA,YACnC,UAAA;AAAA,YACC,GAAG,UAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,OAEJ,CAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FileField/components/FileInput.mjs

@@ -0,0 +1,48 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import { useObjectRef } from '@react-aria/utils';
+import '../../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../../lib/propsContext/components/PropsContextProvider.mjs';
+import styles from './FileInput.module.scss.mjs';
+
+const FileInput = (props) => {
+  const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } = props;
+  const inputRef = useObjectRef(ref);
+  const handlePress = () => {
+    if (inputRef.current?.value) {
+      inputRef.current.value = "";
+      onChange?.(null);
+    }
+    inputRef.current?.click();
+  };
+  const handleChange = (event) => {
+    onChange?.(event.target.files);
+  };
+  const propsContext = {
+    Button: {
+      onPress: handlePress,
+      className: styles.trigger,
+      isDisabled,
+      isReadOnly
+    }
+  };
+  return /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Aria.Input,
+      {
+        ...restInputProps,
+        className: styles.FileInput,
+        type: "file",
+        ref: inputRef,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+
+export { FileInput };
+//# sourceMappingURL=FileInput.mjs.map

package/dist/js/components/src/components/FileField/components/FileInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n  isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =\n    props;\n  const inputRef = useObjectRef(ref);\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n      isReadOnly,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children}\n      <Aria.Input\n        {...restInputProps}\n        className={styles.FileInput}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAmBO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,UAAU,UAAA,EAAY,QAAA,EAAU,YAAY,GAAA,EAAK,GAAG,gBAAe,GACzE,KAAA;AACF,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,QAAA,CAAS,SAAS,KAAA,EAAO;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA,IACjB;AACA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,QAAA,GAAW,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,WAAA;AAAA,MACT,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAA,CAAK,KAAA;AAAA,MAAL;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,WAAW,MAAA,CAAO,SAAA;AAAA,QAClB,IAAA,EAAK,MAAA;AAAA,QACL,GAAA,EAAK,QAAA;AAAA,QACL,QAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/FileField/components/FileInput.module.scss.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const FileInput = "flow--file-field--file-input";
+const trigger = "flow--file-field--trigger";
+const styles = {
+	FileInput: FileInput,
+	trigger: trigger
+};
+
+export { FileInput, styles as default, trigger };
+//# sourceMappingURL=FileInput.module.scss.mjs.map

package/dist/js/components/src/components/FileField/components/FileInput.module.scss.mjs.map

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

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

@@ -0,0 +1,51 @@
+"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"
+  } = props;
+  const rootClassName = clsx(styles.flex, className);
+  const Element = elementType;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      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
+    }
+  );
+};
+
+export { Flex, Flex as default };
+//# sourceMappingURL=Flex.mjs.map

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

@@ -0,0 +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 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  } = props;\n\n  const rootClassName = clsx(styles.flex, className);\n\n  const Element = elementType;\n\n  return (\n    <Element\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":";;;;AAqDO,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;AAAA,GAChB,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,MACC,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/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/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/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/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/components/src/components/Header/Header.mjs

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

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

@@ -0,0 +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 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":";;;;AAeO,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/components/src/components/HeaderNavigation/HeaderNavigation.mjs

@@ -0,0 +1,32 @@
+"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 { Text } from '../Text/Text.mjs';
+
+const HeaderNavigation = (props) => {
+  const { children, className, color = "primary", ...rest } = props;
+  const rootClassName = clsx(styles.headerNavigation, 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 }) }) });
+};
+
+export { HeaderNavigation, HeaderNavigation as default };
+//# sourceMappingURL=HeaderNavigation.mjs.map

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

@@ -0,0 +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 type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName {\n  /** The color of the header navigation. @default \"primary\" */\n  color?: \"primary\" | \"dark\" | \"light\";\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(styles.headerNavigation, styles[color], className);\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":";;;;;;;;AAmBO,MAAM,gBAAA,GAA8C,CAAC,KAAA,KAAU;AACpE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,kBAAkB,MAAA,CAAO,KAAK,GAAG,SAAS,CAAA;AAE5E,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/components/src/components/HeaderNavigation/HeaderNavigation.module.scss.mjs

@@ -0,0 +1,17 @@
+"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
+};
+
+export { button, dark, styles as default, headerNavigation, light, link };
+//# sourceMappingURL=HeaderNavigation.module.scss.mjs.map

package/dist/js/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/components/src/components/Heading/Heading.mjs

@@ -0,0 +1,64 @@
+"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],
+    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
+      }
+    }
+  };
+  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" }) })
+      ]
+    }
+  ) }) });
+});
+
+export { Heading, Heading as default };
+//# sourceMappingURL=Heading.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.mjs","sources":["../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["export * 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\" | \"dark\" | \"light\";\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],\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  };\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":";;;;;;;;;AAoBO,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,OAAO,IAAI,CAAA;AAAA,IACnB,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;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/components/src/components/Heading/Heading.module.scss.mjs

@@ -0,0 +1,33 @@
+"use client"
+/* */
+const heading = "flow--heading";
+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 xs = "flow--heading--xs";
+const s = "flow--heading--s";
+const m = "flow--heading--m";
+const l = "flow--heading--l";
+const xl = "flow--heading--xl";
+const xxl = "flow--heading--xxl";
+const styles = {
+	heading: heading,
+	dark: dark,
+	light: light,
+	headingText: headingText,
+	icon: icon,
+	headingContent: headingContent,
+	xs: xs,
+	s: s,
+	m: m,
+	l: l,
+	xl: xl,
+	xxl: xxl,
+	"wrap-wrap": "flow--heading--wrap-wrap",
+	"wrap-balance": "flow--heading--wrap-balance"
+};
+
+export { dark, styles as default, heading, headingContent, headingText, icon, l, light, m, s, xl, xs, xxl };
+//# sourceMappingURL=Heading.module.scss.mjs.map

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

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