@mittwald/flow-react-components 0.2.0-alpha.81 → 0.2.0-alpha.83

package/dist/js/components/DateRangePicker/components/DateRangeInput/DateRangeInput.mjs

@@ -6,6 +6,7 @@ import styles from './DateRangeInput.module.scss.mjs';
 import * as Aria from 'react-aria-components';
 import { Button } from '../../../Button/Button.mjs';
 import '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -13,7 +14,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import { IconCalendar } from '../../../Icon/components/icons/IconCalendar.mjs';
 
 const DateRangeInput = (props) => {

package/dist/js/components/FieldDescription/FieldDescription.mjs

@@ -1,16 +1,17 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from './FieldDescription.module.scss.mjs';
+import clsx from 'clsx';
+import { ClearPropsContext } from '../ClearPropsContext/ClearPropsContext.mjs';
 import { Text } from '../Text/Text.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import ClearPropsContextView from '../../views/ClearPropsContextView.mjs';
-import clsx from 'clsx';
-import styles from './FieldDescription.module.scss.mjs';
 
 const FieldDescription = flowComponent("FieldDescription", (props) => {
   const { children, className, ref, ...rest } = props;
   const rootClassName = clsx(styles.fieldDescription, className);
-  return /* @__PURE__ */ jsx(ClearPropsContextView, { children: /* @__PURE__ */ jsx(Text, { slot: "description", ...rest, className: rootClassName, ref, children }) });
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Text, { slot: "description", ...rest, className: rootClassName, ref, children }) });
 });
 
 export { FieldDescription, FieldDescription as default };

package/dist/js/components/FieldDescription/FieldDescription.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.mjs","sources":["../../../../src/components/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import type { TextProps } from \"@/components/Text\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport clsx from \"clsx\";\nimport styles from \"./FieldDescription.module.scss\";\n\nexport interface FieldDescriptionProps extends TextProps, FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldDescription = flowComponent(\"FieldDescription\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldDescription, className);\n\n  return (\n    <ClearPropsContextView>\n      <Text slot=\"description\" {...rest} className={rootClassName} ref={ref}>\n        {children}\n      </Text>\n    </ClearPropsContextView>\n  );\n});\n\nexport default FieldDescription;\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,gBAAmB,GAAA,aAAA,CAAc,kBAAoB,EAAA,CAAC,KAAU,KAAA;AAC3E,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,gBAAA,EAAkB,SAAS,CAAA;AAE7D,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,aAAA,EAAe,GAAG,IAAA,EAAM,SAAW,EAAA,aAAA,EAAe,GAC1D,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FieldDescription.mjs","sources":["../../../../src/components/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./FieldDescription.module.scss\";\nimport clsx from \"clsx\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { TextProps } from \"@/components/Text\";\nimport { Text } from \"@/components/Text\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldDescriptionProps extends TextProps, FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FieldDescription = flowComponent(\"FieldDescription\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldDescription, className);\n\n  return (\n    <ClearPropsContext>\n      <Text slot=\"description\" {...rest} className={rootClassName} ref={ref}>\n        {children}\n      </Text>\n    </ClearPropsContext>\n  );\n});\n\nexport default FieldDescription;\n"],"names":[],"mappings":";;;;;;;;AAeO,MAAM,gBAAmB,GAAA,aAAA,CAAc,kBAAoB,EAAA,CAAC,KAAU,KAAA;AAC3E,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,gBAAA,EAAkB,SAAS,CAAA;AAE7D,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,aAAA,EAAe,GAAG,IAAA,EAAM,SAAW,EAAA,aAAA,EAAe,GAC1D,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/FieldError/FieldError.mjs

@@ -2,19 +2,19 @@
 /* */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import 'react';
+import styles from './FieldError.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+import clsx from 'clsx';
+import { ClearPropsContext } from '../ClearPropsContext/ClearPropsContext.mjs';
 import '@tabler/icons-react';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import ClearPropsContextView from '../../views/ClearPropsContextView.mjs';
-import clsx from 'clsx';
 import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import { IconDanger } from '../Icon/components/icons/IconDanger.mjs';
-import * as Aria from 'react-aria-components';
-import styles from './FieldError.module.scss.mjs';
 
 const FieldError = flowComponent("FieldError", (props) => {
   const { children, className, ...rest } = props;
   const rootClassName = clsx(styles.fieldError, className);
-  return /* @__PURE__ */ jsx(ClearPropsContextView, { children: /* @__PURE__ */ jsx(Aria.FieldError, { ...rest, className: rootClassName, children: ({ validationErrors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(Aria.FieldError, { ...rest, className: rootClassName, children: ({ validationErrors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IconDanger, { size: "s" }),
     /* @__PURE__ */ jsx("span", { children: children ? children : validationErrors.join(" ") })
   ] }) }) });

package/dist/js/components/FieldError/FieldError.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.mjs","sources":["../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./FieldError.module.scss\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n\n  return (\n    <ClearPropsContextView>\n      <Aria.FieldError {...rest} className={rootClassName}>\n        {({ validationErrors }) => (\n          <>\n            <IconDanger size=\"s\" />\n            <span>{children ? children : validationErrors.join(\" \")}</span>\n          </>\n        )}\n      </Aria.FieldError>\n    </ClearPropsContextView>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,UAAa,GAAA,aAAA,CAAc,YAAc,EAAA,CAAC,KAAU,KAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzC,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAiB,GAAG,IAAM,EAAA,SAAA,EAAW,aACnC,EAAA,QAAA,EAAA,CAAC,EAAE,gBAAA,uBAEA,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,MAAK,GAAI,EAAA,CAAA;AAAA,wBACpB,MAAM,EAAA,EAAA,QAAA,EAAA,QAAA,GAAW,WAAW,gBAAiB,CAAA,IAAA,CAAK,GAAG,CAAE,EAAA;AAAA,GAAA,EAC1D,GAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FieldError.mjs","sources":["../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n\n  return (\n    <ClearPropsContext>\n      <Aria.FieldError {...rest} className={rootClassName}>\n        {({ validationErrors }) => (\n          <>\n            <IconDanger size=\"s\" />\n            <span>{children ? children : validationErrors.join(\" \")}</span>\n          </>\n        )}\n      </Aria.FieldError>\n    </ClearPropsContext>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,UAAa,GAAA,aAAA,CAAc,YAAc,EAAA,CAAC,KAAU,KAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzC,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAiB,GAAG,IAAM,EAAA,SAAA,EAAW,aACnC,EAAA,QAAA,EAAA,CAAC,EAAE,gBAAA,uBAEA,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,MAAK,GAAI,EAAA,CAAA;AAAA,wBACpB,MAAM,EAAA,EAAA,QAAA,EAAA,QAAA,GAAW,WAAW,gBAAiB,CAAA,IAAA,CAAK,GAAG,CAAE,EAAA;AAAA,GAAA,EAC1D,GAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/FileCard/components/DeleteButton/DeleteButton.mjs

@@ -5,6 +5,7 @@ import 'react';
 import { Button } from '../../../Button/Button.mjs';
 import styles from '../../FileCard.module.scss.mjs';
 import '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -12,7 +13,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import { IconClose } from '../../../Icon/components/icons/IconClose.mjs';
 import locales from '../../../../_virtual/_.locale.json@c33938a00f4bfb40e033ada6b54e38f9.mjs';
 import { useLocalizedStringFormatter } from 'react-aria';

package/dist/js/components/FileCardList/FileCardList.mjs

@@ -1,10 +1,12 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
+import 'react';
 import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 
 const FileCardList = flowComponent("FileCardList", (props) => {
   const { className, ...rest } = props;

package/dist/js/components/FileCardList/FileCardList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileCardList.mjs","sources":["../../../../src/components/FileCardList/FileCardList.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport type FileCardListProps = Omit<ColumnLayoutProps, \"elementType\"> &\n  FlowComponentProps;\n\n/** @flr-generate all */\nexport const FileCardList = flowComponent(\"FileCardList\", (props) => {\n  const { className, ...rest } = props;\n\n  const propsContext: PropsContext = {\n    FileCard: { elementType: \"li\" },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ColumnLayout elementType=\"ul\" className={className} {...rest} />\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCardList;\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,QAAA,EAAU,EAAE,WAAA,EAAa,IAAK;AAAA,GAChC;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,WAAA,EAAY,IAAK,EAAA,SAAA,EAAuB,GAAG,IAAA,EAAM,CACjE,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileCardList.mjs","sources":["../../../../src/components/FileCardList/FileCardList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type FileCardListProps = Omit<ColumnLayoutProps, \"elementType\"> &\n  FlowComponentProps;\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FileCardList = flowComponent(\"FileCardList\", (props) => {\n  const { className, ...rest } = props;\n\n  const propsContext: PropsContext = {\n    FileCard: { elementType: \"li\" },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ColumnLayout elementType=\"ul\" className={className} {...rest} />\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCardList;\n"],"names":[],"mappings":";;;;;;;;AAiBO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,QAAA,EAAU,EAAE,WAAA,EAAa,IAAK;AAAA,GAChC;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,WAAA,EAAY,IAAK,EAAA,SAAA,EAAuB,GAAG,IAAA,EAAM,CACjE,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -7,6 +7,7 @@ import { IllustratedMessage } from '../IllustratedMessage/IllustratedMessage.mjs
 import styles from './FileDropZone.module.scss.mjs';
 import clsx from 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
 
 const FileDropZone = (props) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","sources":["../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React 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\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\"> {\n  onChange?: FileInputOnChangeHandler;\n}\n\nexport const FileDropZone: FC<FileDropZoneProps> = (props) => {\n  const { multiple, accept, className, onChange, children } = props;\n\n  const rootClassName = clsx(styles.fileDropZone, className);\n\n  const propsContext: PropsContext = {\n    FileField: {\n      accept: accept,\n      multiple: multiple,\n      Button: { variant: \"outline\", color: \"dark\" },\n    },\n  };\n\n  return (\n    <Aria.DropZone\n      className={rootClassName}\n      onDrop={async (e) => {\n        {\n          const fileDropItems = e.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                return await f.getFile();\n              }),\n          );\n\n          if (files.length > 0) {\n            onChange?.((multiple ? files : [files[0]]) as unknown as FileList);\n          }\n        }\n      }}\n    >\n      <IllustratedMessage color=\"dark\">\n        <PropsContextProvider props={propsContext} mergeInParentContext>\n          {children}\n        </PropsContextProvider>\n      </IllustratedMessage>\n    </Aria.DropZone>\n  );\n};\n\nexport default FileDropZone;\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,YAAA,GAAsC,CAAC,KAAU,KAAA;AAC5D,EAAA,MAAM,EAAE,QAAU,EAAA,MAAA,EAAQ,SAAW,EAAA,QAAA,EAAU,UAAa,GAAA,KAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,SAAW,EAAA;AAAA,MACT,MAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAQ,EAAA,EAAE,OAAS,EAAA,SAAA,EAAW,OAAO,MAAO;AAAA;AAC9C,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,QAAA;AAAA,IAAL;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,MAAA,EAAQ,OAAO,CAAM,KAAA;AACnB,QAAA;AACE,UAAM,MAAA,aAAA,GAAgB,EAAE,KAAM,CAAA,MAAA;AAAA,YAC5B,CAAC,IAAS,KAAA,IAAA,CAAK,IAAS,KAAA;AAAA,WAC1B;AAEA,UAAM,MAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,GAAA;AAAA,YAC1B,aACG,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,CAAC,MAAU,IAAA,MAAA,EAAQ,QAAS,CAAA,CAAA,CAAE,IAAI,CAAC,CACjD,CAAA,GAAA,CAAI,OAAO,CAAM,KAAA;AAChB,cAAO,OAAA,MAAM,EAAE,OAAQ,EAAA;AAAA,aACxB;AAAA,WACL;AAEA,UAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,YAAA,QAAA,GAAY,WAAW,KAAQ,GAAA,CAAC,KAAM,CAAA,CAAC,CAAC,CAAyB,CAAA;AAAA;AACnE;AACF,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,KAAA,EAAM,MACxB,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,oBAAA,EAAoB,IAC5D,EAAA,QAAA,EACH,CACF,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"FileDropZone.mjs","sources":["../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React 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\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\"> {\n  onChange?: FileInputOnChangeHandler;\n}\n\nexport const FileDropZone: FC<FileDropZoneProps> = (props) => {\n  const { multiple, accept, className, onChange, children } = props;\n\n  const rootClassName = clsx(styles.fileDropZone, className);\n\n  const propsContext: PropsContext = {\n    FileField: {\n      accept: accept,\n      multiple: multiple,\n      Button: { variant: \"outline\", color: \"dark\" },\n    },\n  };\n\n  return (\n    <Aria.DropZone\n      className={rootClassName}\n      onDrop={async (e) => {\n        {\n          const fileDropItems = e.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                return await f.getFile();\n              }),\n          );\n\n          if (files.length > 0) {\n            onChange?.((multiple ? files : [files[0]]) as unknown as FileList);\n          }\n        }\n      }}\n    >\n      <IllustratedMessage color=\"dark\">\n        <PropsContextProvider props={propsContext} mergeInParentContext>\n          {children}\n        </PropsContextProvider>\n      </IllustratedMessage>\n    </Aria.DropZone>\n  );\n};\n\nexport default FileDropZone;\n"],"names":[],"mappings":";;;;;;;;;;AAkBa,MAAA,YAAA,GAAsC,CAAC,KAAU,KAAA;AAC5D,EAAA,MAAM,EAAE,QAAU,EAAA,MAAA,EAAQ,SAAW,EAAA,QAAA,EAAU,UAAa,GAAA,KAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,YAAA,EAAc,SAAS,CAAA;AAEzD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,SAAW,EAAA;AAAA,MACT,MAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAQ,EAAA,EAAE,OAAS,EAAA,SAAA,EAAW,OAAO,MAAO;AAAA;AAC9C,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,QAAA;AAAA,IAAL;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,MAAA,EAAQ,OAAO,CAAM,KAAA;AACnB,QAAA;AACE,UAAM,MAAA,aAAA,GAAgB,EAAE,KAAM,CAAA,MAAA;AAAA,YAC5B,CAAC,IAAS,KAAA,IAAA,CAAK,IAAS,KAAA;AAAA,WAC1B;AAEA,UAAM,MAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,GAAA;AAAA,YAC1B,aACG,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,CAAC,MAAU,IAAA,MAAA,EAAQ,QAAS,CAAA,CAAA,CAAE,IAAI,CAAC,CACjD,CAAA,GAAA,CAAI,OAAO,CAAM,KAAA;AAChB,cAAO,OAAA,MAAM,EAAE,OAAQ,EAAA;AAAA,aACxB;AAAA,WACL;AAEA,UAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,YAAA,QAAA,GAAY,WAAW,KAAQ,GAAA,CAAC,KAAM,CAAA,CAAC,CAAC,CAAyB,CAAA;AAAA;AACnE;AACF,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,KAAA,EAAM,MACxB,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,oBAAA,EAAoB,IAC5D,EAAA,QAAA,EACH,CACF,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,15 +1,16 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import { FileInput } from './components/FileInput.mjs';
 import formFieldStyles from '../FormField/FormField.module.scss.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
 import { useFormValidation } from '@react-aria/form';
 import { useFormValidationState } from '@react-stately/form';
 import { useRef, useMemo } from 'react';
 import { InputContext, FieldErrorContext } from 'react-aria-components';
+import { FileInput } from './components/FileInput.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
 
 const FileField = flowComponent(
   "FileField",

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

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","sources":["../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport { useMemo, useRef } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps,\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}\n\n/** @flr-generate all */\nexport const FileField = flowComponent<\"FileField\", HTMLInputElement>(\n  \"FileField\",\n  (props) => {\n    const {\n      children,\n      ref,\n      isRequired,\n      isInvalid,\n      isDisabled,\n      validationBehavior,\n      onChange,\n      ...restInputProps\n    } = props;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const formValidationState = useFormValidationState({\n      value: undefined,\n      validationBehavior,\n      isInvalid,\n    });\n\n    useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n    const inputProps = useMemo(\n      () => ({\n        ...restInputProps,\n        ref: inputRef,\n        \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n        value: undefined,\n      }),\n      [formValidationState, isRequired, ...Object.values(restInputProps)],\n    );\n\n    const propsContext: PropsContext = {\n      Label: {\n        className: formFieldStyles.label,\n        optional: !props.isRequired,\n      },\n      FieldDescription: {\n        className: formFieldStyles.fieldDescription,\n      },\n      FieldError: {\n        className: formFieldStyles.customFieldError,\n      },\n    };\n\n    return (\n      <InputContext.Provider value={inputProps}>\n        <FieldErrorContext.Provider\n          value={formValidationState.displayValidation}\n        >\n          <PropsContextProvider props={propsContext}>\n            <div\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n              className={formFieldStyles.formField}\n            >\n              <FileInput ref={ref} onChange={onChange} isDisabled={isDisabled}>\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorContext.Provider>\n      </InputContext.Provider>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;AA2BO,MAAM,SAAY,GAAA,aAAA;AAAA,EACvB,WAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,GAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAE9C,IAAA,MAAM,sBAAsB,sBAAuB,CAAA;AAAA,MACjD,KAAO,EAAA,MAAA;AAAA,MACP,kBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAsB,EAAA,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,IAAA,MAAM,UAAa,GAAA,OAAA;AAAA,MACjB,OAAO;AAAA,QACL,GAAG,cAAA;AAAA,QACH,GAAK,EAAA,QAAA;AAAA,QACL,cAAA,EAAgB,oBAAoB,iBAAkB,CAAA,SAAA;AAAA,QACtD,KAAO,EAAA;AAAA,OACT,CAAA;AAAA,MACA,CAAC,mBAAqB,EAAA,UAAA,EAAY,GAAG,MAAO,CAAA,MAAA,CAAO,cAAc,CAAC;AAAA,KACpE;AAEA,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,KAAO,EAAA;AAAA,QACL,WAAW,eAAgB,CAAA,KAAA;AAAA,QAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,OACnB;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,WAAW,eAAgB,CAAA;AAAA,OAC7B;AAAA,MACA,UAAY,EAAA;AAAA,QACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,KACF;AAEA,IAAA,uBACG,GAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EAAsB,OAAO,UAC5B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,iBAAkB,CAAA,QAAA;AAAA,MAAlB;AAAA,QACC,OAAO,mBAAoB,CAAA,iBAAA;AAAA,QAE3B,QAAA,kBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,CAAC,CAAC,UAAc,IAAA,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAoB,CAAA,iBAAA,CAAkB,SAAa,IAAA,MAAA;AAAA,YAErD,WAAW,eAAgB,CAAA,SAAA;AAAA,YAE3B,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA,EAAU,GAAU,EAAA,QAAA,EAAoB,YACtC,QACH,EAAA;AAAA;AAAA,SAEJ,EAAA;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"FileField.mjs","sources":["../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport React, { useMemo, useRef } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } 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 type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps,\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}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const FileField = flowComponent<\"FileField\", HTMLInputElement>(\n  \"FileField\",\n  (props) => {\n    const {\n      children,\n      ref,\n      isRequired,\n      isInvalid,\n      isDisabled,\n      validationBehavior,\n      onChange,\n      ...restInputProps\n    } = props;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const formValidationState = useFormValidationState({\n      value: undefined,\n      validationBehavior,\n      isInvalid,\n    });\n\n    useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n    const inputProps = useMemo(\n      () => ({\n        ...restInputProps,\n        ref: inputRef,\n        \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n        value: undefined,\n      }),\n      [formValidationState, isRequired, ...Object.values(restInputProps)],\n    );\n\n    const propsContext: PropsContext = {\n      Label: {\n        className: formFieldStyles.label,\n        optional: !props.isRequired,\n      },\n      FieldDescription: {\n        className: formFieldStyles.fieldDescription,\n      },\n      FieldError: {\n        className: formFieldStyles.customFieldError,\n      },\n    };\n\n    return (\n      <InputContext.Provider value={inputProps}>\n        <FieldErrorContext.Provider\n          value={formValidationState.displayValidation}\n        >\n          <PropsContextProvider props={propsContext}>\n            <div\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n              className={formFieldStyles.formField}\n            >\n              <FileInput ref={ref} onChange={onChange} isDisabled={isDisabled}>\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorContext.Provider>\n      </InputContext.Provider>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;AA8BO,MAAM,SAAY,GAAA,aAAA;AAAA,EACvB,WAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,GAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAE9C,IAAA,MAAM,sBAAsB,sBAAuB,CAAA;AAAA,MACjD,KAAO,EAAA,MAAA;AAAA,MACP,kBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAsB,EAAA,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,IAAA,MAAM,UAAa,GAAA,OAAA;AAAA,MACjB,OAAO;AAAA,QACL,GAAG,cAAA;AAAA,QACH,GAAK,EAAA,QAAA;AAAA,QACL,cAAA,EAAgB,oBAAoB,iBAAkB,CAAA,SAAA;AAAA,QACtD,KAAO,EAAA;AAAA,OACT,CAAA;AAAA,MACA,CAAC,mBAAqB,EAAA,UAAA,EAAY,GAAG,MAAO,CAAA,MAAA,CAAO,cAAc,CAAC;AAAA,KACpE;AAEA,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,KAAO,EAAA;AAAA,QACL,WAAW,eAAgB,CAAA,KAAA;AAAA,QAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,OACnB;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,WAAW,eAAgB,CAAA;AAAA,OAC7B;AAAA,MACA,UAAY,EAAA;AAAA,QACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,KACF;AAEA,IAAA,uBACG,GAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EAAsB,OAAO,UAC5B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,iBAAkB,CAAA,QAAA;AAAA,MAAlB;AAAA,QACC,OAAO,mBAAoB,CAAA,iBAAA;AAAA,QAE3B,QAAA,kBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,CAAC,CAAC,UAAc,IAAA,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAoB,CAAA,iBAAA,CAAkB,SAAa,IAAA,MAAA;AAAA,YAErD,WAAW,eAAgB,CAAA,SAAA;AAAA,YAE3B,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA,EAAU,GAAU,EAAA,QAAA,EAAoB,YACtC,QACH,EAAA;AAAA;AAAA,SAEJ,EAAA;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}

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

@@ -5,6 +5,7 @@ import 'react';
 import * as Aria from 'react-aria-components';
 import { useObjectRef } from '@react-aria/utils';
 import '../../../lib/propsContext/propsContext.mjs';
+import '../../../lib/viewComponentContext/viewComponentContext.mjs';
 import { PropsContextProvider } from '../../../lib/propsContext/PropsContextProvider.mjs';
 import styles from './FileInput.module.scss.mjs';
 

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.mjs","sources":["../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport React, { 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}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, ref } = 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    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      {children}\n      <Aria.Input\n        style={{ display: \"none\" }}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAkBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,QAAA,EAAU,KAAQ,GAAA,KAAA;AAChD,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAI,IAAA,QAAA,CAAS,SAAS,KAAO,EAAA;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA;AAEjB,IAAA,QAAA,CAAS,SAAS,KAAM,EAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAW,QAAA,GAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,GAC/B;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB;AAAA;AACF,GACF;AAEA,EAAA,uBACG,IAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAAc,sBAAoB,IAC5D,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAK,CAAA,KAAA;AAAA,MAAL;AAAA,QACC,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,QACzB,IAAK,EAAA,MAAA;AAAA,QACL,GAAK,EAAA,QAAA;AAAA,QACL,QAAU,EAAA;AAAA;AAAA;AACZ,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FileInput.mjs","sources":["../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport React, { 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}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, ref } = 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    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      {children}\n      <Aria.Input\n        style={{ display: \"none\" }}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,QAAA,EAAU,KAAQ,GAAA,KAAA;AAChD,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAI,IAAA,QAAA,CAAS,SAAS,KAAO,EAAA;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA;AAEjB,IAAA,QAAA,CAAS,SAAS,KAAM,EAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAW,QAAA,GAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,GAC/B;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB;AAAA;AACF,GACF;AAEA,EAAA,uBACG,IAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAAc,sBAAoB,IAC5D,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAK,CAAA,KAAA;AAAA,MAAL;AAAA,QACC,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,QACzB,IAAK,EAAA,MAAA;AAAA,QACL,GAAK,EAAA,QAAA;AAAA,QACL,QAAU,EAAA;AAAA;AAAA;AACZ,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,12 +1,14 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import { Text } from '../Text/Text.mjs';
+import 'react';
 import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/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;

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.mjs","sources":["../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import { Text } from \"@/components/Text\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./HeaderNavigation.module.scss\";\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":";;;;;;;;AAmBa,MAAA,gBAAA,GAA8C,CAAC,KAAU,KAAA;AACpE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,QAAQ,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE5D,EAAA,MAAM,gBAAgB,IAAK,CAAA,MAAA,CAAO,kBAAkB,MAAO,CAAA,KAAK,GAAG,SAAS,CAAA;AAE5E,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,QAAA,sBAAW,IAAG,EAAA,EAAA,CAAA;AAAA,MACd,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,QAAU,EAAA,IAAA;AAAA,MACV,QAAA,EAAU,OAAQ,CAAA,CAACA,MACjB,qBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,gBAAA,EAAgB,IAAE,EAAA,QAAA,EAAAA,MAAM,CAAA,QAAA,EAAS,CACxC;AAAA,KACH;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA,MAAA;AAAA,MAClB,KAAA;AAAA,MACA,OAAS,EAAA,OAAA;AAAA,MACT,QAAA,sBAAW,IAAG,EAAA,EAAA;AAAA;AAChB,GACF;AAEA,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,aAAe,EAAA,IAAA,EAAK,cAAc,GAAG,IAAA,EACnD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderNavigation.mjs","sources":["../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport React 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/**\n * @flr-generate all\n * @flr-clear-props-context\n */\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":";;;;;;;;;;AAuBa,MAAA,gBAAA,GAA8C,CAAC,KAAU,KAAA;AACpE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,QAAQ,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE5D,EAAA,MAAM,gBAAgB,IAAK,CAAA,MAAA,CAAO,kBAAkB,MAAO,CAAA,KAAK,GAAG,SAAS,CAAA;AAE5E,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,QAAA,sBAAW,IAAG,EAAA,EAAA,CAAA;AAAA,MACd,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,QAAU,EAAA,IAAA;AAAA,MACV,QAAA,EAAU,OAAQ,CAAA,CAACA,MACjB,qBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,gBAAA,EAAgB,IAAE,EAAA,QAAA,EAAAA,MAAM,CAAA,QAAA,EAAS,CACxC;AAAA,KACH;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA,MAAA;AAAA,MAClB,KAAA;AAAA,MACA,OAAS,EAAA,OAAA;AAAA,MACT,QAAA,sBAAW,IAAG,EAAA,EAAA;AAAA;AAChB,GACF;AAEA,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,aAAe,EAAA,IAAA,EAAK,cAAc,GAAG,IAAA,EACnD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,14 +1,15 @@
 "use client"
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import 'react';
+import styles from './Heading.module.scss.mjs';
+import clsx from 'clsx';
+import { ClearPropsContext } from '../ClearPropsContext/ClearPropsContext.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
-import ClearPropsContextView from '../../views/ClearPropsContextView.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
-import clsx from 'clsx';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import * as Aria from 'react-aria-components';
-import styles from './Heading.module.scss.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 
 const Heading = flowComponent("Heading", (props) => {
   const {
@@ -44,7 +45,7 @@ const Heading = flowComponent("Heading", (props) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx(ClearPropsContextView, { children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
     Aria.Heading,
     {
       level,

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","sources":["../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["export * from \"./view\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Heading.module.scss\";\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}\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"primary\",\n    size,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[size],\n    styles[color],\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    <ClearPropsContextView>\n      <TunnelProvider>\n        <Aria.Heading\n          level={level}\n          className={rootClassName}\n          {...rest}\n          ref={ref}\n        >\n          <span className={styles.headingText}>\n            <PropsContextProvider props={propsContext}>\n              {children}\n            </PropsContextProvider>\n          </span>\n          <span className={styles.headingContent}>\n            <TunnelExit id=\"headingContent\" />\n          </span>\n        </Aria.Heading>\n      </TunnelProvider>\n    </ClearPropsContextView>\n  );\n});\n\nexport default Heading;\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,MAAM,OAAU,GAAA,aAAA,CAAc,SAAW,EAAA,CAAC,KAAU,KAAA;AACzD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAQ,GAAA,CAAA;AAAA,IACR,KAAQ,GAAA,SAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,OAAA;AAAA,IACP,IAAA,IAAQ,OAAO,IAAI,CAAA;AAAA,IACnB,OAAO,KAAK,CAAA;AAAA,IACZ;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,aAAe,EAAA,IAAA;AAAA,MACf,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,qBAAuB,EAAA;AAAA,MACrB,QAAU,EAAA,gBAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ;AACF,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,qBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,OAAA;AAAA,IAAL;AAAA,MACC,KAAA;AAAA,MACA,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,MAAO,CAAA,WAAA,EACtB,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,gBACtB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,EAAG,EAAA,gBAAA,EAAiB,CAClC,EAAA;AAAA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Heading.mjs","sources":["../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["export * from \"./view\";\nimport React from \"react\";\nimport styles from \"./Heading.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\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}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"primary\",\n    size,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[size],\n    styles[color],\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    <ClearPropsContext>\n      <TunnelProvider>\n        <Aria.Heading\n          level={level}\n          className={rootClassName}\n          {...rest}\n          ref={ref}\n        >\n          <span className={styles.headingText}>\n            <PropsContextProvider props={propsContext}>\n              {children}\n            </PropsContextProvider>\n          </span>\n          <span className={styles.headingContent}>\n            <TunnelExit id=\"headingContent\" />\n          </span>\n        </Aria.Heading>\n      </TunnelProvider>\n    </ClearPropsContext>\n  );\n});\n\nexport default Heading;\n"],"names":[],"mappings":";;;;;;;;;;;AAuBO,MAAM,OAAU,GAAA,aAAA,CAAc,SAAW,EAAA,CAAC,KAAU,KAAA;AACzD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAQ,GAAA,CAAA;AAAA,IACR,KAAQ,GAAA,SAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,OAAA;AAAA,IACP,IAAA,IAAQ,OAAO,IAAI,CAAA;AAAA,IACnB,OAAO,KAAK,CAAA;AAAA,IACZ;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,aAAe,EAAA,IAAA;AAAA,MACf,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,qBAAuB,EAAA;AAAA,MACrB,QAAU,EAAA,gBAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ;AACF,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,OAAA;AAAA,IAAL;AAAA,MACC,KAAA;AAAA,MACA,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,MAAO,CAAA,WAAA,EACtB,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,gBACtB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,EAAG,EAAA,gBAAA,EAAiB,CAClC,EAAA;AAAA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,12 +1,12 @@
 "use client"
 /* */
 import { jsx } from 'react/jsx-runtime';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { cloneElement } from '../../lib/react/cloneElement.mjs';
-import ClearPropsContextView from '../../views/ClearPropsContextView.mjs';
-import clsx from 'clsx';
 import React from 'react';
 import styles from './Icon.module.scss.mjs';
+import clsx from 'clsx';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { cloneElement } from '../../lib/react/cloneElement.mjs';
+import { ClearPropsContext } from '../ClearPropsContext/ClearPropsContext.mjs';
 
 const Icon = flowComponent("Icon", (props) => {
   const {
@@ -39,7 +39,7 @@ const Icon = flowComponent("Icon", (props) => {
       )})`
     );
   }
-  return /* @__PURE__ */ jsx(ClearPropsContextView, { children: cloneElement(iconElement, iconProps) });
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: cloneElement(iconElement, iconProps) });
 });
 
 export { Icon, Icon as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n  extends PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n    FlowComponentProps,\n    PropsWithStatus {\n  /** The size of the icon. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n}\n\n/** @flr-generate all */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n  const {\n    className,\n    \"aria-label\": ariaLabel,\n    children,\n    size = \"m\",\n    status,\n    ref: ignoredRef,\n    ...svgAttributes\n  } = props;\n\n  const iconProps: SvgAttributeProps = {\n    ...svgAttributes,\n    focusable: \"false\",\n    role: \"img\",\n    \"aria-hidden\": !ariaLabel,\n    \"aria-label\": ariaLabel,\n    className: clsx(\n      styles.icon,\n      className,\n      styles[`size-${size}`],\n      status && styles[status],\n    ),\n  };\n\n  const iconElement = React.Children.toArray(children)[0];\n\n  if (!React.isValidElement(iconElement)) {\n    throw new Error(\n      `Expected children of Icon component to be a valid React element (got ${String(\n        children,\n      )})`,\n    );\n  }\n\n  return (\n    <ClearPropsContextView>\n      {cloneElement(iconElement, iconProps)}\n    </ClearPropsContextView>\n  );\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;;;AAqBO,MAAM,IAAO,GAAA,aAAA,CAAc,MAAQ,EAAA,CAAC,KAAU,KAAA;AACnD,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAO,GAAA,GAAA;AAAA,IACP,MAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,IACL,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,SAA+B,GAAA;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,SAAW,EAAA,OAAA;AAAA,IACX,IAAM,EAAA,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAc,EAAA,SAAA;AAAA,IACd,SAAW,EAAA,IAAA;AAAA,MACT,MAAO,CAAA,IAAA;AAAA,MACP,SAAA;AAAA,MACA,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,MACrB,MAAA,IAAU,OAAO,MAAM;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,cAAc,KAAM,CAAA,QAAA,CAAS,OAAQ,CAAA,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAe,CAAA,WAAW,CAAG,EAAA;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAwE,qEAAA,EAAA,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA;AAGF,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA,EACE,QAAa,EAAA,YAAA,CAAA,WAAA,EAAa,SAAS,CACtC,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Icon.mjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { PropsWithChildren, SVGAttributes } from \"react\";\nimport React from \"react\";\nimport styles from \"./Icon.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { cloneElement } from \"@/lib/react/cloneElement\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\n\ntype SvgAttributeProps = SVGAttributes<SVGSVGElement>;\n\nexport interface IconProps\n  extends PropsWithChildren<Omit<SvgAttributeProps, \"name\">>,\n    FlowComponentProps,\n    PropsWithStatus {\n  /** The size of the icon. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Icon = flowComponent(\"Icon\", (props) => {\n  const {\n    className,\n    \"aria-label\": ariaLabel,\n    children,\n    size = \"m\",\n    status,\n    ref: ignoredRef,\n    ...svgAttributes\n  } = props;\n\n  const iconProps: SvgAttributeProps = {\n    ...svgAttributes,\n    focusable: \"false\",\n    role: \"img\",\n    \"aria-hidden\": !ariaLabel,\n    \"aria-label\": ariaLabel,\n    className: clsx(\n      styles.icon,\n      className,\n      styles[`size-${size}`],\n      status && styles[status],\n    ),\n  };\n\n  const iconElement = React.Children.toArray(children)[0];\n\n  if (!React.isValidElement(iconElement)) {\n    throw new Error(\n      `Expected children of Icon component to be a valid React element (got ${String(\n        children,\n      )})`,\n    );\n  }\n\n  return (\n    <ClearPropsContext>\n      {cloneElement(iconElement, iconProps)}\n    </ClearPropsContext>\n  );\n});\n\nexport default Icon;\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,IAAO,GAAA,aAAA,CAAc,MAAQ,EAAA,CAAC,KAAU,KAAA;AACnD,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,QAAA;AAAA,IACA,IAAO,GAAA,GAAA;AAAA,IACP,MAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,IACL,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,SAA+B,GAAA;AAAA,IACnC,GAAG,aAAA;AAAA,IACH,SAAW,EAAA,OAAA;AAAA,IACX,IAAM,EAAA,KAAA;AAAA,IACN,eAAe,CAAC,SAAA;AAAA,IAChB,YAAc,EAAA,SAAA;AAAA,IACd,SAAW,EAAA,IAAA;AAAA,MACT,MAAO,CAAA,IAAA;AAAA,MACP,SAAA;AAAA,MACA,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,MACrB,MAAA,IAAU,OAAO,MAAM;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,cAAc,KAAM,CAAA,QAAA,CAAS,OAAQ,CAAA,QAAQ,EAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,CAAC,KAAA,CAAM,cAAe,CAAA,WAAW,CAAG,EAAA;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAwE,qEAAA,EAAA,MAAA;AAAA,QACtE;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA;AAGF,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACE,QAAa,EAAA,YAAA,CAAA,WAAA,EAAa,SAAS,CACtC,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/Icon/components/icons/IconApp.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconAppWindow } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconApp = (props) => {

package/dist/js/components/Icon/components/icons/IconAttachment.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconPaperclip } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconAttachment = (props) => {

package/dist/js/components/Icon/components/icons/IconAutoresponder.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconArrowBackUpDouble } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconAutoresponder = (props) => {

package/dist/js/components/Icon/components/icons/IconBackLink.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconArrowLeft } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconBackLink = (props) => {

package/dist/js/components/Icon/components/icons/IconBackup.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconHistory } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconBackup = (props) => {

package/dist/js/components/Icon/components/icons/IconBulb.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconBulb as IconBulb$1 } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconBulb = (props) => {

package/dist/js/components/Icon/components/icons/IconCalendar.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconCalendar as IconCalendar$1 } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconCalendar = (props) => {

package/dist/js/components/Icon/components/icons/IconCamera.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconCamera as IconCamera$1 } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconCamera = (props) => {

package/dist/js/components/Icon/components/icons/IconCertificate.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconFileCertificate } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconCertificate = (props) => {

package/dist/js/components/Icon/components/icons/IconChangelog.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconClipboardList } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconChangelog = (props) => {

package/dist/js/components/Icon/components/icons/IconCheck.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconCheck as IconCheck$1 } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconCheck = (props) => {

package/dist/js/components/Icon/components/icons/IconCheckboxChecked.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconSquareCheckFilled } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconCheckboxChecked = (props) => {

package/dist/js/components/Icon/components/icons/IconCheckboxEmpty.mjs

@@ -3,6 +3,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { IconSquare } from '@tabler/icons-react';
+import 'clsx';
 import '@mittwald/react-tunnel';
 import '../../../../lib/slotContext/slotContext.mjs';
 import '@react-aria/utils';
@@ -10,7 +11,6 @@ import '../../../../lib/propsContext/propsContext.mjs';
 import 'remeda';
 import 'dot-prop';
 import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
-import 'clsx';
 import IconView from '../../../../views/IconView.mjs';
 
 const IconCheckboxEmpty = (props) => {