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

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnelId: \"segments\",\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n            <div className={styles.segmentedControl}>\n              <div className={styles.segments}>\n                <TunnelExit id=\"segments\" />\n              </div>\n            </div>\n            {children}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,MAAM,gBAAA,GAAmB,aAAA,CAAc,kBAAA,EAAoB,CAAC,KAAA,KAAU;AAC3E,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA,GAA0B,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,yBAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,mCAAA,CAAoC,uBAAuB,CAAC;AAAA,GACrE;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,UAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAClC,EAAA,gBAAA,CAAiB,SAAS,CAAA;AAE1B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,SAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,SAAS,CAAA,EAAG,OAAO,YAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gBAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,QAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAA,EAAW,GAC5B,CAAA,EACF,CAAA;AAAA,UACC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"SegmentedControl.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnelId: \"segments\",\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n            <div className={styles.segmentedControl}>\n              <div className={styles.segments}>\n                <TunnelExit id=\"segments\" />\n              </div>\n            </div>\n            {children}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAC3E,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,MAAM;CAE5B,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,gCAAO,2BACP,WACA,gCAAO,oCAAoC,wBAAwB,EACpE;CAED,MAAM,eAA6B;EACjC,SAAS;GACP,UAAU;GACV,WAAW,gCAAO;GACnB;EACD,GAAG;EACJ;CAED,MAAM,YAAY,aAAa,IAAI;AACnC,kBAAiB,UAAU;AAE3B,QACE,oBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,UAAU;EACpD,KAAK;YAEL,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,cAAc,CAAC,UAAU;GAAE,OAAO;aAAxD,CACE,oBAAC,OAAD;IAAK,WAAW,gCAAO;cACrB,oBAAC,OAAD;KAAK,WAAW,gCAAO;eACrB,oBAAC,YAAD,EAAY,IAAG,YAAa,CAAA;KACxB,CAAA;IACF,CAAA,EACL,SACoB;MACE,CAAA,EAC3B,oBAAC,gBAAD,EAAkB,CAAA,CACH,EAAA,CAAA;EACD,CAAA;EAEpB"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+var SegmentedControl_module_default = {
+	segmentedControl: "flow--segmented-control",
+	segments: "flow--segmented-control--segments",
+	segmentedControlContainer: "flow--segmented-control--segmented-control-container",
+	"container-breakpoint-size-xs": "flow--segmented-control--container-breakpoint-size-xs",
+	segment: "flow--segmented-control--segment",
+	"container-breakpoint-size-s": "flow--segmented-control--container-breakpoint-size-s",
+	"container-breakpoint-size-m": "flow--segmented-control--container-breakpoint-size-m",
+	"container-breakpoint-size-l": "flow--segmented-control--container-breakpoint-size-l",
+	"container-breakpoint-size-xl": "flow--segmented-control--container-breakpoint-size-xl"
+};
+//#endregion
+export { SegmentedControl_module_default as default };
+
+//# sourceMappingURL=SegmentedControl.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.module.scss"],"sourcesContent":["@use \"../../styles/mixins/containerBreakpointSizes\";\n\n.segmentedControl {\n  order: 2;\n  container-type: inline-size;\n  isolation: isolate;\n\n  .segments {\n    display: flex;\n    flex-wrap: nowrap;\n    order: 2;\n  }\n}\n\n.segmentedControlContainer {\n  @include containerBreakpointSizes.containerBreakpointSizes(\n    250,\n    400,\n    550,\n    700,\n    850\n  ) {\n    .segmentedControl {\n      .segments {\n        flex-direction: column;\n      }\n\n      .segment {\n        margin-bottom: -1px; /* Collapse borders */\n        margin-right: 0;\n\n        &:first-of-type {\n          border-start-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: 0;\n        }\n\n        &:last-of-type {\n          border-end-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: 0;\n          margin: 0;\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs

@@ -1,25 +1,25 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from './Segment.module.scss.mjs';
-import * as Aria from 'react-aria-components';
-import clsx from 'clsx';
-import 'react';
-import '@mittwald/flow-icons';
-import '../../../Icon/components/IconSetProvider.mjs';
-import '../../../Icon/Icon.mjs';
-import '../../../../views/IconView.mjs';
-import { IconCheck } from '../../../Icon/components/icons/IconCheck.mjs';
-import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
-
-const Segment = flowComponent("Segment", (props) => {
-  const { children, className, ref, ...rest } = props;
-  const rootClassName = clsx(styles.segment, className);
-  return /* @__PURE__ */ jsxs(Aria.Radio, { ...rest, className: rootClassName, ref, children: [
-    children,
-    /* @__PURE__ */ jsx(IconCheck, { className: styles.checkmark })
-  ] });
+import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
+import IconCheck from "../../../Icon/components/icons/IconCheck.mjs";
+import "../../../Icon/components/icons/index.mjs";
+import Segment_module_default from "./Segment.module.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/SegmentedControl/components/Segment/Segment.tsx
+/** @flr-generate all */
+var Segment = flowComponent("Segment", (props) => {
+	const { children, className, ref, ...rest } = props;
+	const rootClassName = clsx(Segment_module_default.segment, className);
+	return /* @__PURE__ */ jsxs(Aria.Radio, {
+		...rest,
+		className: rootClassName,
+		ref,
+		children: [children, /* @__PURE__ */ jsx(IconCheck, { className: Segment_module_default.checkmark })]
+	});
 });
+//#endregion
+export { Segment as default };
 
-export { Segment };
-//# sourceMappingURL=Segment.mjs.map
+//# sourceMappingURL=Segment.mjs.map

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segment.mjs","sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.segment, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {children}\n      <IconCheck className={styles.checkmark} />\n    </Aria.Radio>\n  );\n});\n\nexport default Segment;\n"],"names":[],"mappings":";;;;;;;;;;;;AAcO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAEpD,EAAA,uBACE,IAAA,CAAC,KAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW;AAAA,GAAA,EAC1C,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.segment, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {children}\n      <IconCheck className={styles.checkmark} />\n    </Aria.Radio>\n  );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;AAcA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,UAAU;AAErD,QACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;YAArD,CACG,UACD,oBAAC,WAAD,EAAW,WAAW,uBAAO,WAAa,CAAA,CAC/B;;EAEf"}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.module.mjs

@@ -0,0 +1,10 @@
+"use client"
+/* */
+var Segment_module_default = {
+	segment: "flow--segmented-control--segment",
+	checkmark: "flow--segmented-control--segment--checkmark"
+};
+//#endregion
+export { Segment_module_default as default };
+
+//# sourceMappingURL=Segment.module.mjs.map

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segment.module.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"../../../../styles/mixins/formControl\";\n\n.segment {\n  flex: 1;\n  display: grid;\n  column-gap: var(--form-control--spacing-x);\n  grid-template-areas: \"label checkmark\";\n  grid-template-columns: 1fr auto;\n  margin-right: -1px; /* Collapse borders */\n  z-index: 1;\n\n  @include formControl.formControl();\n  @include focus.focus();\n\n  & {\n    border-radius: 0;\n  }\n\n  &:first-of-type {\n    border-start-start-radius: var(--form-control--corner-radius);\n    border-end-start-radius: var(--form-control--corner-radius);\n  }\n\n  &:last-of-type {\n    border-start-end-radius: var(--form-control--corner-radius);\n    border-end-end-radius: var(--form-control--corner-radius);\n    margin: 0;\n  }\n\n  .checkmark {\n    grid-area: checkmark;\n    display: none;\n  }\n\n  &[data-selected] {\n    z-index: 2;\n\n    .checkmark {\n      display: block;\n    }\n  }\n\n  &[data-disabled] {\n    z-index: 0;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/index.mjs

@@ -0,0 +1 @@
+import "./Segment.mjs";

package/dist/js/packages/components/src/components/SegmentedControl/index.mjs

@@ -0,0 +1,3 @@
+import "./SegmentedControl.mjs";
+import "./components/Segment/Segment.mjs";
+import "./components/Segment/index.mjs";

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

@@ -1,96 +1,66 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
-import * as Aria from 'react-aria-components';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import formFieldStyles from '../FormField/FormField.module.scss.mjs';
-import styles from './Select.module.scss.mjs';
-import clsx from 'clsx';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { Options } from '../Options/Options.mjs';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
-import 'mobx';
-import 'remeda';
-import '@react-aria/utils';
-import 'dot-prop';
-import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-
-const Select = flowComponent("Select", (props) => {
-  const {
-    children,
-    className,
-    onChange,
-    onSelectionChange,
-    isReadOnly,
-    ref,
-    ...rest
-  } = props;
-  const {
-    FieldErrorView,
-    fieldPropsContext,
-    fieldProps,
-    FieldErrorCaptureContext
-  } = useFieldComponent(props);
-  const rootClassName = clsx(
-    styles.select,
-    formFieldStyles.formField,
-    className
-  );
-  const propsContext = {
-    Option: {
-      tunnelId: "options"
-    },
-    ...fieldPropsContext
-  };
-  const controller = useOverlayController("Select", {
-    reuseControllerFromContext: false
-  });
-  const isOpen = controller.useIsOpen();
-  return /* @__PURE__ */ jsx(
-    Aria.Select,
-    {
-      ...rest,
-      ...fieldProps,
-      className: clsx(rootClassName, fieldProps.className),
-      onChange: (value) => {
-        if (!isReadOnly) {
-          onChange?.(value);
-          onSelectionChange?.(value);
-        }
-      },
-      onOpenChange: (isOpen2) => !isReadOnly && controller.setOpen(isOpen2),
-      isOpen,
-      "data-readonly": isReadOnly,
-      children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
-          /* @__PURE__ */ jsxs(
-            Aria.Button,
-            {
-              "data-readonly": isReadOnly,
-              className: styles.toggle,
-              ref,
-              children: [
-                /* @__PURE__ */ jsx(Aria.SelectValue, {}),
-                /* @__PURE__ */ jsx(IconChevronDown, {})
-              ]
-            }
-          ),
-          children,
-          /* @__PURE__ */ jsx(Options, { controller, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) })
-        ] }) }),
-        /* @__PURE__ */ jsx(FieldErrorView, {})
-      ] })
-    }
-  );
+import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import "../../lib/propsContext/index.mjs";
+import IconChevronDown from "../Icon/components/icons/IconChevronDown.mjs";
+import "../Icon/components/icons/index.mjs";
+import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
+import "../../lib/controller/index.mjs";
+import Options from "../Options/Options.mjs";
+import "../Options/index.mjs";
+import FormField_module_default from "../FormField/FormField.module.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import Select_module_default from "./Select.module.mjs";
+import clsx from "clsx";
+import "react";
+import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/Select/Select.tsx
+/** @flr-generate all */
+var Select = flowComponent("Select", (props) => {
+	const { children, className, onChange, onSelectionChange, isReadOnly, ref, ...rest } = props;
+	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props);
+	const rootClassName = clsx(Select_module_default.select, FormField_module_default.formField, className);
+	const propsContext = {
+		Option: { tunnelId: "options" },
+		...fieldPropsContext
+	};
+	const controller = useOverlayController("Select", { reuseControllerFromContext: false });
+	const isOpen = controller.useIsOpen();
+	return /* @__PURE__ */ jsx(Aria.Select, {
+		...rest,
+		...fieldProps,
+		className: clsx(rootClassName, fieldProps.className),
+		onChange: (value) => {
+			if (!isReadOnly) {
+				onChange?.(value);
+				onSelectionChange?.(value);
+			}
+		},
+		onOpenChange: (isOpen) => !isReadOnly && controller.setOpen(isOpen),
+		isOpen,
+		"data-readonly": isReadOnly,
+		children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+			props: propsContext,
+			children: [
+				/* @__PURE__ */ jsxs(Aria.Button, {
+					"data-readonly": isReadOnly,
+					className: Select_module_default.toggle,
+					ref,
+					children: [/* @__PURE__ */ jsx(Aria.SelectValue, {}), /* @__PURE__ */ jsx(IconChevronDown, {})]
+				}),
+				children,
+				/* @__PURE__ */ jsx(Options, {
+					controller,
+					children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
+				})
+			]
+		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})] })
+	});
 });
+//#endregion
+export { Select as default };
 
-export { Select };
-//# sourceMappingURL=Select.mjs.map
+//# sourceMappingURL=Select.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<Omit<Aria.SelectProps, \"children\" | \"className\" | \"ref\">>,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...fieldProps}\n      className={clsx(rootClassName, fieldProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.Button\n              data-readonly={isReadOnly}\n              className={styles.toggle}\n              ref={ref}\n            >\n              <Aria.SelectValue />\n              <IconChevronDown />\n            </Aria.Button>\n            {children}\n            <Options controller={controller}>\n              <TunnelExit id=\"options\" />\n            </Options>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,eAAA,CAAgB,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,UAAA,GAAa,qBAAqB,QAAA,EAAU;AAAA,IAChD,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,WAAW,SAAA,EAAU;AAEpC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,CAAC,UAAA,EAAY;AACf,UAAA,QAAA,GAAW,KAAK,CAAA;AAChB,UAAA,iBAAA,GAAoB,KAAK,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,cAAc,CAACA,OAAAA,KAAW,CAAC,UAAA,IAAc,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MAClE,MAAA;AAAA,MACA,eAAA,EAAe,UAAA;AAAA,MAEf,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,IAAA,CAAK,MAAA;AAAA,YAAL;AAAA,cACC,eAAA,EAAe,UAAA;AAAA,cACf,WAAW,MAAA,CAAO,MAAA;AAAA,cAClB,GAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,oCACjB,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,WACnB;AAAA,UACC,QAAA;AAAA,8BACA,OAAA,EAAA,EAAQ,UAAA,EACP,8BAAC,UAAA,EAAA,EAAW,EAAA,EAAG,WAAU,CAAA,EAC3B;AAAA,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<Omit<Aria.SelectProps, \"children\" | \"className\" | \"ref\">>,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...fieldProps}\n      className={clsx(rootClassName, fieldProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.Button\n              data-readonly={isReadOnly}\n              className={styles.toggle}\n              ref={ref}\n            >\n              <Aria.SelectValue />\n              <IconChevronDown />\n            </Aria.Button>\n            {children}\n            <Options controller={controller}>\n              <TunnelExit id=\"options\" />\n            </Options>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,MAAM;CAE5B,MAAM,gBAAgB,KACpB,sBAAO,QACP,yBAAgB,WAChB,UACD;CAED,MAAM,eAA6B;EACjC,QAAQ,EACN,UAAU,WACX;EACD,GAAG;EACJ;CAED,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,OAC7B,CAAC;CACF,MAAM,SAAS,WAAW,WAAW;AAErC,QACE,oBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,UAAU;EACpD,WAAW,UAAU;AACnB,OAAI,CAAC,YAAY;AACf,eAAW,MAAM;AACjB,wBAAoB,MAAM;;;EAG9B,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,OAAO;EAC3D;EACR,iBAAe;YAEf,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;aAA7B;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAW,sBAAO;KACb;eAHP,CAKE,oBAAC,KAAK,aAAN,EAAoB,CAAA,EACpB,oBAAC,iBAAD,EAAmB,CAAA,CACP;;IACb;IACD,oBAAC,SAAD;KAAqB;eACnB,oBAAC,YAAD,EAAY,IAAG,WAAY,CAAA;KACnB,CAAA;IACW;MACE,CAAA,EAC3B,oBAAC,gBAAD,EAAkB,CAAA,CACH,EAAA,CAAA;EACL,CAAA;EAEhB"}

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

@@ -0,0 +1,10 @@
+"use client"
+/* */
+var Select_module_default = {
+	select: "flow--select",
+	toggle: "flow--select--toggle"
+};
+//#endregion
+export { Select_module_default as default };
+
+//# sourceMappingURL=Select.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.select {\n  .toggle {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: normal;\n    font-size: var(--font-size-text--default);\n    text-align: left;\n\n    @include formControl.formControl();\n\n    & {\n      padding-inline-end: var(--button--padding-icon-only);\n    }\n  }\n\n  &[data-invalid] {\n    .toggle {\n      border-color: var(--form-control--border-color--invalid);\n      background-color: var(--form-control--background-color--invalid);\n    }\n  }\n\n  :global(.react-aria-SelectValue) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Select/index.mjs

@@ -0,0 +1 @@
+import "./Select.mjs";

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

@@ -1,20 +1,22 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import 'react';
-import clsx from 'clsx';
-import styles from './Separator.module.scss.mjs';
-import * as Aria from 'react-aria-components';
-
-const Separator = (props) => {
-  const { className, orientation = "horizontal", ...rest } = props;
-  const rootClassName = clsx(
-    styles.separator,
-    orientation === "vertical" && styles.vertical,
-    className
-  );
-  return /* @__PURE__ */ jsx(Aria.Separator, { elementType: "hr", className: rootClassName, ...rest });
+import Separator_module_default from "./Separator.module.mjs";
+import clsx from "clsx";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/Separator/Separator.tsx
+/** @flr-generate all */
+var Separator = (props) => {
+	const { className, orientation = "horizontal", ...rest } = props;
+	const rootClassName = clsx(Separator_module_default.separator, orientation === "vertical" && Separator_module_default.vertical, className);
+	return /* @__PURE__ */ jsx(Aria.Separator, {
+		elementType: "hr",
+		className: rootClassName,
+		...rest
+	});
 };
+//#endregion
+export { Separator as default };
 
-export { Separator };
-//# sourceMappingURL=Separator.mjs.map
+//# sourceMappingURL=Separator.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.mjs","sources":["../../../../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Separator.module.scss\";\nimport * as Aria from \"react-aria-components\";\n\nexport type SeparatorProps = Aria.SeparatorProps;\n\n/** @flr-generate all */\nexport const Separator: FC<SeparatorProps> = (props) => {\n  const { className, orientation = \"horizontal\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.separator,\n    orientation === \"vertical\" && styles.vertical,\n    className,\n  );\n\n  return (\n    <Aria.Separator elementType=\"hr\" className={rootClassName} {...rest} />\n  );\n};\n\nexport default Separator;\n"],"names":[],"mappings":";;;;;;AASO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,SAAA,EAAW,WAAA,GAAc,YAAA,EAAc,GAAG,MAAK,GAAI,KAAA;AAE3D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,SAAA;AAAA,IACP,WAAA,KAAgB,cAAc,MAAA,CAAO,QAAA;AAAA,IACrC;AAAA,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAK,SAAA,EAAL,EAAe,aAAY,IAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,CAAA;AAEzE;;;;"}
+{"version":3,"file":"Separator.mjs","names":[],"sources":["../../../../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Separator.module.scss\";\nimport * as Aria from \"react-aria-components\";\n\nexport type SeparatorProps = Aria.SeparatorProps;\n\n/** @flr-generate all */\nexport const Separator: FC<SeparatorProps> = (props) => {\n  const { className, orientation = \"horizontal\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.separator,\n    orientation === \"vertical\" && styles.vertical,\n    className,\n  );\n\n  return (\n    <Aria.Separator elementType=\"hr\" className={rootClassName} {...rest} />\n  );\n};\n\nexport default Separator;\n"],"mappings":";;;;;;;AASA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,WAAW,cAAc,cAAc,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KACpB,yBAAO,WACP,gBAAgB,cAAc,yBAAO,UACrC,UACD;AAED,QACE,oBAAC,KAAK,WAAN;EAAgB,aAAY;EAAK,WAAW;EAAe,GAAI;EAAQ,CAAA"}

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

@@ -0,0 +1,10 @@
+"use client"
+/* */
+var Separator_module_default = {
+	separator: "flow--separator",
+	vertical: "flow--separator--vertical"
+};
+//#endregion
+export { Separator_module_default as default };
+
+//# sourceMappingURL=Separator.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.module.mjs","names":[],"sources":["../../../../../../../src/components/Separator/Separator.module.scss"],"sourcesContent":[".separator {\n  border: 0;\n\n  &:where(:not(.vertical)) {\n    border-top: var(--separator--height) var(--separator--border-style)\n      var(--separator--color);\n    width: 100%;\n  }\n\n  &.vertical {\n    border-inline-end: var(--separator--height) var(--separator--border-style)\n      var(--separator--color);\n    height: auto;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Separator/index.mjs

@@ -0,0 +1 @@
+import "./Separator.mjs";

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

@@ -1,37 +1,39 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useMemo, useEffect } from 'react';
-import { autorun } from 'mobx';
-import { getAsyncResource } from '@mittwald/react-use-promise';
-import { SettingsStore } from './models/SettingsStore.mjs';
-import { settingsBackendFactory } from './backends/settingsBackendFactory.mjs';
-
-const context = createContext(void 0);
-const useSettings = () => useContext(context);
-const SettingsProvider = (props) => {
-  const { children, middleware, id = "static", ...storeShape } = props;
-  const backend = settingsBackendFactory(storeShape);
-  const settingsResource = getAsyncResource(() => backend.load(), [], {
-    loaderId: id
-  });
-  const settings = settingsResource.use();
-  const storingPromise = useRef(Promise.resolve());
-  const parentStore = useSettings();
-  const settingsStore = useMemo(
-    () => SettingsStore.fromJson(settings, { middleware, parentStore }),
-    [id]
-  );
-  const watchAndStoreSettings = () => {
-    const json = settingsStore.asJson;
-    storingPromise.current = storingPromise.current.then(async () => {
-      await backend.store(json);
-      settingsResource.refresh();
-    });
-  };
-  useEffect(() => autorun(watchAndStoreSettings), [id]);
-  return /* @__PURE__ */ jsx(context.Provider, { value: settingsStore, children });
+import { SettingsStore } from "./models/SettingsStore.mjs";
+import { settingsBackendFactory } from "./backends/settingsBackendFactory.mjs";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { autorun } from "mobx";
+import { getAsyncResource } from "@mittwald/react-use-promise";
+//#region src/components/SettingsProvider/SettingsProvider.tsx
+var context = createContext(void 0);
+var useSettings = () => useContext(context);
+var SettingsProvider = (props) => {
+	const { children, middleware, id = "static", ...storeShape } = props;
+	const backend = settingsBackendFactory(storeShape);
+	const settingsResource = getAsyncResource(() => backend.load(), [], { loaderId: id });
+	const settings = settingsResource.use();
+	const storingPromise = useRef(Promise.resolve());
+	const parentStore = useSettings();
+	const settingsStore = useMemo(() => SettingsStore.fromJson(settings, {
+		middleware,
+		parentStore
+	}), [id]);
+	const watchAndStoreSettings = () => {
+		const json = settingsStore.asJson;
+		storingPromise.current = storingPromise.current.then(async () => {
+			await backend.store(json);
+			settingsResource.refresh();
+		});
+	};
+	useEffect(() => autorun(watchAndStoreSettings), [id]);
+	return /* @__PURE__ */ jsx(context.Provider, {
+		value: settingsStore,
+		children
+	});
 };
+//#endregion
+export { SettingsProvider as default, useSettings };
 
-export { SettingsProvider, useSettings };
-//# sourceMappingURL=SettingsProvider.mjs.map
+//# sourceMappingURL=SettingsProvider.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsProvider.mjs","sources":["../../../../../../../src/components/SettingsProvider/SettingsProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useRef } from \"react\";\nimport type { SupportedSettingsBackend } from \"@/components/SettingsProvider/backends/types\";\nimport { autorun } from \"mobx\";\nimport { getAsyncResource } from \"@mittwald/react-use-promise\";\nimport {\n  SettingsStore,\n  type SettingsStoreOptions,\n} from \"@/components/SettingsProvider/models/SettingsStore\";\nimport { settingsBackendFactory } from \"@/components/SettingsProvider/backends/settingsBackendFactory\";\n\ntype Props = PropsWithChildren &\n  SupportedSettingsBackend & {\n    id?: string;\n  } & Pick<SettingsStoreOptions, \"middleware\">;\n\nconst context = createContext<SettingsStore | undefined>(undefined);\n\nexport const useSettings = () => useContext(context);\n\nexport const SettingsProvider: FC<Props> = (props) => {\n  const { children, middleware, id = \"static\", ...storeShape } = props;\n  const backend = settingsBackendFactory(storeShape);\n\n  const settingsResource = getAsyncResource(() => backend.load(), [], {\n    loaderId: id,\n  });\n  const settings = settingsResource.use();\n\n  const storingPromise = useRef(Promise.resolve());\n  const parentStore = useSettings();\n\n  const settingsStore = useMemo(\n    () => SettingsStore.fromJson(settings, { middleware, parentStore }),\n    [id],\n  );\n\n  const watchAndStoreSettings = () => {\n    const json = settingsStore.asJson;\n    storingPromise.current = storingPromise.current.then(async () => {\n      await backend.store(json);\n      settingsResource.refresh();\n    });\n  };\n\n  useEffect(() => autorun(watchAndStoreSettings), [id]);\n\n  return <context.Provider value={settingsStore}>{children}</context.Provider>;\n};\n\nexport default SettingsProvider;\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,OAAA,GAAU,cAAyC,MAAS,CAAA;AAE3D,MAAM,WAAA,GAAc,MAAM,UAAA,CAAW,OAAO;AAE5C,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAY,KAAK,QAAA,EAAU,GAAG,YAAW,GAAI,KAAA;AAC/D,EAAA,MAAM,OAAA,GAAU,uBAAuB,UAAU,CAAA;AAEjD,EAAA,MAAM,mBAAmB,gBAAA,CAAiB,MAAM,QAAQ,IAAA,EAAK,EAAG,EAAC,EAAG;AAAA,IAClE,QAAA,EAAU;AAAA,GACX,CAAA;AACD,EAAA,MAAM,QAAA,GAAW,iBAAiB,GAAA,EAAI;AAEtC,EAAA,MAAM,cAAA,GAAiB,MAAA,CAAO,OAAA,CAAQ,OAAA,EAAS,CAAA;AAC/C,EAAA,MAAM,cAAc,WAAA,EAAY;AAEhC,EAAA,MAAM,aAAA,GAAgB,OAAA;AAAA,IACpB,MAAM,aAAA,CAAc,QAAA,CAAS,UAAU,EAAE,UAAA,EAAY,aAAa,CAAA;AAAA,IAClE,CAAC,EAAE;AAAA,GACL;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,MAAM,OAAO,aAAA,CAAc,MAAA;AAC3B,IAAA,cAAA,CAAe,OAAA,GAAU,cAAA,CAAe,OAAA,CAAQ,IAAA,CAAK,YAAY;AAC/D,MAAA,MAAM,OAAA,CAAQ,MAAM,IAAI,CAAA;AACxB,MAAA,gBAAA,CAAiB,OAAA,EAAQ;AAAA,IAC3B,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM,OAAA,CAAQ,qBAAqB,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEpD,EAAA,2BAAQ,OAAA,CAAQ,QAAA,EAAR,EAAiB,KAAA,EAAO,eAAgB,QAAA,EAAS,CAAA;AAC3D;;;;"}
+{"version":3,"file":"SettingsProvider.mjs","names":[],"sources":["../../../../../../../src/components/SettingsProvider/SettingsProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useRef } from \"react\";\nimport type { SupportedSettingsBackend } from \"@/components/SettingsProvider/backends/types\";\nimport { autorun } from \"mobx\";\nimport { getAsyncResource } from \"@mittwald/react-use-promise\";\nimport {\n  SettingsStore,\n  type SettingsStoreOptions,\n} from \"@/components/SettingsProvider/models/SettingsStore\";\nimport { settingsBackendFactory } from \"@/components/SettingsProvider/backends/settingsBackendFactory\";\n\ntype Props = PropsWithChildren &\n  SupportedSettingsBackend & {\n    id?: string;\n  } & Pick<SettingsStoreOptions, \"middleware\">;\n\nconst context = createContext<SettingsStore | undefined>(undefined);\n\nexport const useSettings = () => useContext(context);\n\nexport const SettingsProvider: FC<Props> = (props) => {\n  const { children, middleware, id = \"static\", ...storeShape } = props;\n  const backend = settingsBackendFactory(storeShape);\n\n  const settingsResource = getAsyncResource(() => backend.load(), [], {\n    loaderId: id,\n  });\n  const settings = settingsResource.use();\n\n  const storingPromise = useRef(Promise.resolve());\n  const parentStore = useSettings();\n\n  const settingsStore = useMemo(\n    () => SettingsStore.fromJson(settings, { middleware, parentStore }),\n    [id],\n  );\n\n  const watchAndStoreSettings = () => {\n    const json = settingsStore.asJson;\n    storingPromise.current = storingPromise.current.then(async () => {\n      await backend.store(json);\n      settingsResource.refresh();\n    });\n  };\n\n  useEffect(() => autorun(watchAndStoreSettings), [id]);\n\n  return <context.Provider value={settingsStore}>{children}</context.Provider>;\n};\n\nexport default SettingsProvider;\n"],"mappings":";;;;;;;AAgBA,IAAM,UAAU,cAAyC,KAAA,EAAU;AAEnE,IAAa,oBAAoB,WAAW,QAAQ;AAEpD,IAAa,oBAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,YAAY,KAAK,UAAU,GAAG,eAAe;CAC/D,MAAM,UAAU,uBAAuB,WAAW;CAElD,MAAM,mBAAmB,uBAAuB,QAAQ,MAAM,EAAE,EAAE,EAAE,EAClE,UAAU,IACX,CAAC;CACF,MAAM,WAAW,iBAAiB,KAAK;CAEvC,MAAM,iBAAiB,OAAO,QAAQ,SAAS,CAAC;CAChD,MAAM,cAAc,aAAa;CAEjC,MAAM,gBAAgB,cACd,cAAc,SAAS,UAAU;EAAE;EAAY;EAAa,CAAC,EACnE,CAAC,GAAG,CACL;CAED,MAAM,8BAA8B;EAClC,MAAM,OAAO,cAAc;AAC3B,iBAAe,UAAU,eAAe,QAAQ,KAAK,YAAY;AAC/D,SAAM,QAAQ,MAAM,KAAK;AACzB,oBAAiB,SAAS;IAC1B;;AAGJ,iBAAgB,QAAQ,sBAAsB,EAAE,CAAC,GAAG,CAAC;AAErD,QAAO,oBAAC,QAAQ,UAAT;EAAkB,OAAO;EAAgB;EAA4B,CAAA"}

package/dist/js/packages/components/src/components/SettingsProvider/backends/LocalStorageSettingsBackend.mjs

@@ -1,27 +1,23 @@
 "use client"
 /* */
-const localStorageAvailable = typeof localStorage !== "undefined";
-class LocalStorageSettingsBackend {
-  storageKey;
-  constructor(storageKey) {
-    this.storageKey = storageKey;
-  }
-  async load() {
-    if (!localStorageAvailable) {
-      return {};
-    }
-    const jsonString = localStorage.getItem(this.storageKey);
-    if (jsonString === null) {
-      return {};
-    }
-    return JSON.parse(jsonString);
-  }
-  async store(settings) {
-    if (localStorageAvailable) {
-      localStorage.setItem(this.storageKey, JSON.stringify(settings));
-    }
-  }
-}
-
+//#region src/components/SettingsProvider/backends/LocalStorageSettingsBackend.ts
+var localStorageAvailable = typeof localStorage !== "undefined";
+var LocalStorageSettingsBackend = class {
+	storageKey;
+	constructor(storageKey) {
+		this.storageKey = storageKey;
+	}
+	async load() {
+		if (!localStorageAvailable) return {};
+		const jsonString = localStorage.getItem(this.storageKey);
+		if (jsonString === null) return {};
+		return JSON.parse(jsonString);
+	}
+	async store(settings) {
+		if (localStorageAvailable) localStorage.setItem(this.storageKey, JSON.stringify(settings));
+	}
+};
+//#endregion
 export { LocalStorageSettingsBackend };
-//# sourceMappingURL=LocalStorageSettingsBackend.mjs.map
+
+//# sourceMappingURL=LocalStorageSettingsBackend.mjs.map

package/dist/js/packages/components/src/components/SettingsProvider/backends/LocalStorageSettingsBackend.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LocalStorageSettingsBackend.mjs","sources":["../../../../../../../../src/components/SettingsProvider/backends/LocalStorageSettingsBackend.ts"],"sourcesContent":["import type { SettingsBackend } from \"@/components/SettingsProvider/backends/types\";\nimport type { SettingsJson } from \"@/components/SettingsProvider/models/SettingsStore\";\n\nconst localStorageAvailable = typeof localStorage !== \"undefined\";\n\nexport class LocalStorageSettingsBackend implements SettingsBackend {\n  private readonly storageKey: string;\n\n  public constructor(storageKey: string) {\n    this.storageKey = storageKey;\n  }\n\n  public async load(): Promise<SettingsJson> {\n    if (!localStorageAvailable) {\n      return {};\n    }\n\n    const jsonString = localStorage.getItem(this.storageKey);\n    if (jsonString === null) {\n      return {};\n    }\n    return JSON.parse(jsonString);\n  }\n\n  public async store(settings: SettingsJson): Promise<void> {\n    if (localStorageAvailable) {\n      localStorage.setItem(this.storageKey, JSON.stringify(settings));\n    }\n  }\n}\n"],"names":[],"mappings":"AAGA,MAAM,qBAAA,GAAwB,OAAO,YAAA,KAAiB,WAAA;AAE/C,MAAM,2BAAA,CAAuD;AAAA,EACjD,UAAA;AAAA,EAEV,YAAY,UAAA,EAAoB;AACrC,IAAA,IAAA,CAAK,UAAA,GAAa,UAAA;AAAA,EACpB;AAAA,EAEA,MAAa,IAAA,GAA8B;AACzC,IAAA,IAAI,CAAC,qBAAA,EAAuB;AAC1B,MAAA,OAAO,EAAC;AAAA,IACV;AAEA,IAAA,MAAM,UAAA,GAAa,YAAA,CAAa,OAAA,CAAQ,IAAA,CAAK,UAAU,CAAA;AACvD,IAAA,IAAI,eAAe,IAAA,EAAM;AACvB,MAAA,OAAO,EAAC;AAAA,IACV;AACA,IAAA,OAAO,IAAA,CAAK,MAAM,UAAU,CAAA;AAAA,EAC9B;AAAA,EAEA,MAAa,MAAM,QAAA,EAAuC;AACxD,IAAA,IAAI,qBAAA,EAAuB;AACzB,MAAA,YAAA,CAAa,QAAQ,IAAA,CAAK,UAAA,EAAY,IAAA,CAAK,SAAA,CAAU,QAAQ,CAAC,CAAA;AAAA,IAChE;AAAA,EACF;AACF;;;;"}
+{"version":3,"file":"LocalStorageSettingsBackend.mjs","names":[],"sources":["../../../../../../../../src/components/SettingsProvider/backends/LocalStorageSettingsBackend.ts"],"sourcesContent":["import type { SettingsBackend } from \"@/components/SettingsProvider/backends/types\";\nimport type { SettingsJson } from \"@/components/SettingsProvider/models/SettingsStore\";\n\nconst localStorageAvailable = typeof localStorage !== \"undefined\";\n\nexport class LocalStorageSettingsBackend implements SettingsBackend {\n  private readonly storageKey: string;\n\n  public constructor(storageKey: string) {\n    this.storageKey = storageKey;\n  }\n\n  public async load(): Promise<SettingsJson> {\n    if (!localStorageAvailable) {\n      return {};\n    }\n\n    const jsonString = localStorage.getItem(this.storageKey);\n    if (jsonString === null) {\n      return {};\n    }\n    return JSON.parse(jsonString);\n  }\n\n  public async store(settings: SettingsJson): Promise<void> {\n    if (localStorageAvailable) {\n      localStorage.setItem(this.storageKey, JSON.stringify(settings));\n    }\n  }\n}\n"],"mappings":";AAGA,IAAM,wBAAwB,OAAO,iBAAiB;AAEtD,IAAa,8BAAb,MAAoE;CAClE;CAEA,YAAmB,YAAoB;AACrC,OAAK,aAAa;;CAGpB,MAAa,OAA8B;AACzC,MAAI,CAAC,sBACH,QAAO,EAAE;EAGX,MAAM,aAAa,aAAa,QAAQ,KAAK,WAAW;AACxD,MAAI,eAAe,KACjB,QAAO,EAAE;AAEX,SAAO,KAAK,MAAM,WAAW;;CAG/B,MAAa,MAAM,UAAuC;AACxD,MAAI,sBACF,cAAa,QAAQ,KAAK,YAAY,KAAK,UAAU,SAAS,CAAC"}