@mittwald/flow-react-components 0.2.0-alpha.7 → 0.2.0-alpha.70

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

@@ -0,0 +1 @@
+{"version":3,"file":"Segment.mjs","sources":["../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React 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\";\nimport { ClearPropsContext } from \"@/lib/propsContext\";\n\nexport interface SegmentProps\n  extends PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Segment = flowComponent<\"Segment\", HTMLLabelElement>(\n  \"Segment\",\n  (props) => {\n    const { children, className, ref, ...rest } = props;\n\n    const rootClassName = clsx(styles.segment, className);\n\n    return (\n      <ClearPropsContext>\n        <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n          {children}\n          <IconCheck className={styles.checkmark} />\n        </Aria.Radio>\n      </ClearPropsContext>\n    );\n  },\n);\n\nexport default Segment;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBO,MAAM,OAAU,GAAA,aAAA;AAAA,EACrB,SAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,IAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,OAAA,EAAS,SAAS,CAAA;AAEpD,IACE,uBAAA,GAAA,CAAC,iBACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,IAAK,CAAA,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAW,EAAA,aAAA,EAAe,GAC7C,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACA,GAAA,CAAA,SAAA,EAAA,EAAU,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,KAAA,EAC1C,CACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist/js/components/SegmentedControl/components/Segment/Segment.module.scss.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const segment = "flow--segmented-control--segment";
+const checkmark = "flow--segmented-control--segment--checkmark";
+const styles = {
+	segment: segment,
+	checkmark: checkmark
+};
+
+export { checkmark, styles as default, segment };
+//# sourceMappingURL=Segment.module.scss.mjs.map

package/dist/js/components/SegmentedControl/components/Segment/Segment.module.scss.mjs.map

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

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

@@ -0,0 +1,85 @@
+"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/PropsContextProvider.mjs';
+import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import { FieldError } from '../FieldError/FieldError.mjs';
+import styles from './Select.module.scss.mjs';
+import clsx from 'clsx';
+import '@tabler/icons-react';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
+import { Options } from '../Options/Options.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import 'mobx';
+import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
+
+const Select = flowComponent("Select", (props) => {
+  const {
+    children,
+    className,
+    onChange = () => {
+    },
+    onSelectionChange = () => {
+    },
+    controller: controllerFromProps,
+    ref,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.select,
+    formFieldStyles.formField,
+    className
+  );
+  const propsContext = {
+    Label: {
+      className: formFieldStyles.label,
+      optional: !props.isRequired
+    },
+    FieldDescription: {
+      className: formFieldStyles.fieldDescription
+    },
+    FieldError: {
+      className: formFieldStyles.customFieldError
+    },
+    Option: {
+      tunnelId: "options"
+    }
+  };
+  const handleOnSelectionChange = (id) => {
+    onChange(String(id));
+    onSelectionChange(id);
+  };
+  const controllerFromContext = useOverlayController("Select", {
+    reuseControllerFromContext: true
+  });
+  const controller = controllerFromProps ?? controllerFromContext;
+  const isOpen = controller.useIsOpen();
+  return /* @__PURE__ */ jsx(
+    Aria.Select,
+    {
+      ...rest,
+      className: rootClassName,
+      ref,
+      onSelectionChange: handleOnSelectionChange,
+      onOpenChange: (isOpen2) => controller.setOpen(isOpen2),
+      isOpen,
+      children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+        /* @__PURE__ */ jsxs(Aria.Button, { className: styles.toggle, children: [
+          /* @__PURE__ */ jsx(Aria.SelectValue, {}),
+          /* @__PURE__ */ jsx(IconChevronDown, {})
+        ] }),
+        children,
+        /* @__PURE__ */ jsx(Options, { controller, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) }),
+        /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError })
+      ] }) })
+    }
+  );
+});
+
+export { Select, Select as default };
+//# sourceMappingURL=Select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React 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 { FieldError } from \"@/components/FieldError\";\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 { type OverlayController, useOverlayController } from \"@/lib/controller\";\n\nexport interface SelectProps\n  extends PropsWithChildren<\n      Omit<Aria.SelectProps<{ example: string }>, \"children\" | \"className\">\n    >,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: string | number) => void;\n  /** An overlay controller to control the select option popover state. */\n  controller?: OverlayController;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\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    Option: {\n      tunnelId: \"options\",\n    },\n  };\n\n  const handleOnSelectionChange = (id: Key) => {\n    onChange(String(id));\n    onSelectionChange(id);\n  };\n\n  const controllerFromContext = useOverlayController(\"Select\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      className={rootClassName}\n      ref={ref}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n      isOpen={isOpen}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <Aria.Button className={styles.toggle}>\n            <Aria.SelectValue />\n            <IconChevronDown />\n          </Aria.Button>\n\n          {children}\n          <Options controller={controller}>\n            <TunnelExit id=\"options\" />\n          </Options>\n\n          <FieldError className={formFieldStyles.fieldError} />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;AAkCO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAW,MAAM;AAAA,KAEjB;AAAA,IACA,oBAAoB,MAAM;AAAA,KAE1B;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,eAAgB,CAAA,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAM,MAAA,uBAAA,GAA0B,CAAC,EAAY,KAAA;AAC3C,IAAS,QAAA,CAAA,MAAA,CAAO,EAAE,CAAC,CAAA;AACnB,IAAA,iBAAA,CAAkB,EAAE,CAAA;AAAA,GACtB;AAEA,EAAM,MAAA,qBAAA,GAAwB,qBAAqB,QAAU,EAAA;AAAA,IAC3D,0BAA4B,EAAA;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAuB,IAAA,qBAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAU,EAAA;AAEpC,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,GAAA;AAAA,MACA,iBAAmB,EAAA,uBAAA;AAAA,MACnB,YAAc,EAAA,CAACA,OAAW,KAAA,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MACnD,MAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAK,CAAA,MAAA,EAAL,EAAY,SAAA,EAAW,OAAO,MAC7B,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,8BACjB,eAAgB,EAAA,EAAA;AAAA,SACnB,EAAA,CAAA;AAAA,QAEC,QAAA;AAAA,4BACA,OAAQ,EAAA,EAAA,UAAA,EACP,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,WAAU,CAC3B,EAAA,CAAA;AAAA,wBAEC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,UAAY,EAAA;AAAA,OAAA,EACrD,CACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/Select/Select.module.scss.mjs

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

package/dist/js/components/Select/Select.module.scss.mjs.map

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

package/dist/js/components/Select/components/CountryOptions/CountryOptions.mjs

@@ -0,0 +1,33 @@
+"use client"
+/* */
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Option } from '../../../Option/Option.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+import locales from '../../../../_virtual/_.locale.json@a75d4fdc8302dc8cc25be6a7eff37c38.mjs';
+
+const countryCodes = Object.keys(locales["de-DE"]).filter((key) => key.startsWith("countries.")).map((key) => key.replace("countries.", ""));
+const defaultSortBy = (left, right) => left.name.localeCompare(right.name);
+const voidSortBy = () => 0;
+const defaultFilterBy = () => true;
+const CountryOptions = flowComponent(
+  "CountryOptions",
+  ({
+    filterBy = defaultFilterBy,
+    sortBy = voidSortBy
+  }) => {
+    const stringFormatter = useLocalizedStringFormatter(locales);
+    const countries = useMemo(
+      () => countryCodes.map((code) => ({
+        code,
+        name: stringFormatter.format(`countries.${code}`)
+      })).filter(filterBy).sort(defaultSortBy).sort(sortBy),
+      [stringFormatter, filterBy, sortBy]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: countries.map((country) => /* @__PURE__ */ jsx(Option, { value: country.code, children: country.name }, country.code)) });
+  }
+);
+
+export { CountryOptions, CountryOptions as default };
+//# sourceMappingURL=CountryOptions.mjs.map

package/dist/js/components/Select/components/CountryOptions/CountryOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryOptions.mjs","sources":["../../../../../../src/components/Select/components/CountryOptions/CountryOptions.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React, { useMemo } from \"react\";\nimport type { ListBoxProps } from \"react-aria-components\";\nimport { Option } from \"@/components/Option\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface Country {\n  code: string;\n  name: string;\n}\n\nexport type CountryFilterFn = (country: Country) => boolean;\nexport type CountrySortFn = (left: Country, right: Country) => number;\n\nexport interface CountryOptionsProps<T = object>\n  extends PropsWithChildren<Omit<ListBoxProps<T>, \"children\">>,\n    FlowComponentProps {\n  filterBy?: CountryFilterFn;\n  sortBy?: CountrySortFn;\n}\n\nconst countryCodes = Object.keys(locales[\"de-DE\"])\n  .filter((key) => key.startsWith(\"countries.\"))\n  .map((key) => key.replace(\"countries.\", \"\"));\n\nconst defaultSortBy: CountrySortFn = (left, right) =>\n  left.name.localeCompare(right.name);\nconst voidSortBy: CountrySortFn = () => 0;\nconst defaultFilterBy: CountryFilterFn = () => true;\n\n/** @flr-generate all */\nexport const CountryOptions = flowComponent(\n  \"CountryOptions\",\n  ({\n    filterBy = defaultFilterBy,\n    sortBy = voidSortBy,\n  }: CountryOptionsProps) => {\n    const stringFormatter = useLocalizedStringFormatter(locales);\n\n    const countries = useMemo(\n      () =>\n        countryCodes\n          .map((code) => ({\n            code,\n            name: stringFormatter.format(`countries.${code}`),\n          }))\n          .filter(filterBy)\n          .sort(defaultSortBy)\n          .sort(sortBy),\n      [stringFormatter, filterBy, sortBy],\n    );\n\n    return (\n      <>\n        {countries.map((country) => (\n          <Option key={country.code} value={country.code}>\n            {country.name}\n          </Option>\n        ))}\n      </>\n    );\n  },\n);\n\nexport default CountryOptions;\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,YAAA,GAAe,OAAO,IAAK,CAAA,OAAA,CAAQ,OAAO,CAAC,CAAA,CAC9C,MAAO,CAAA,CAAC,GAAQ,KAAA,GAAA,CAAI,WAAW,YAAY,CAAC,EAC5C,GAAI,CAAA,CAAC,QAAQ,GAAI,CAAA,OAAA,CAAQ,YAAc,EAAA,EAAE,CAAC,CAAA;AAE7C,MAAM,aAAA,GAA+B,CAAC,IAAM,EAAA,KAAA,KAC1C,KAAK,IAAK,CAAA,aAAA,CAAc,MAAM,IAAI,CAAA;AACpC,MAAM,aAA4B,MAAM,CAAA;AACxC,MAAM,kBAAmC,MAAM,IAAA;AAGxC,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,gBAAA;AAAA,EACA,CAAC;AAAA,IACC,QAAW,GAAA,eAAA;AAAA,IACX,MAAS,GAAA;AAAA,GACgB,KAAA;AACzB,IAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,IAAA,MAAM,SAAY,GAAA,OAAA;AAAA,MAChB,MACE,YAAA,CACG,GAAI,CAAA,CAAC,IAAU,MAAA;AAAA,QACd,IAAA;AAAA,QACA,IAAM,EAAA,eAAA,CAAgB,MAAO,CAAA,CAAA,UAAA,EAAa,IAAI,CAAE,CAAA;AAAA,OAClD,CAAE,EACD,MAAO,CAAA,QAAQ,EACf,IAAK,CAAA,aAAa,CAClB,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,MAChB,CAAC,eAAiB,EAAA,QAAA,EAAU,MAAM;AAAA,KACpC;AAEA,IAAA,uBAEK,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,SAAA,CAAU,GAAI,CAAA,CAAC,4BACb,GAAA,CAAA,MAAA,EAAA,EAA0B,KAAO,EAAA,OAAA,CAAQ,MACvC,QAAQ,EAAA,OAAA,CAAA,IAAA,EAAA,EADE,OAAQ,CAAA,IAErB,CACD,CACH,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist/js/components/Select/components/CountryOptions/lib/sortBy.mjs

@@ -0,0 +1,7 @@
+"use client"
+/* */
+const dachCountries = ["DE", "AT", "CH"];
+const sortByDachFirst = (left, right) => dachCountries.includes(right.code) ? 1 : 0 - (dachCountries.includes(left.code) ? 1 : 0);
+
+export { sortByDachFirst };
+//# sourceMappingURL=sortBy.mjs.map

package/dist/js/components/Select/components/CountryOptions/lib/sortBy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortBy.mjs","sources":["../../../../../../../src/components/Select/components/CountryOptions/lib/sortBy.ts"],"sourcesContent":["import type { CountrySortFn } from \"@/components/Select/components/CountryOptions/CountryOptions\";\n\nconst dachCountries = [\"DE\", \"AT\", \"CH\"];\n\nexport const sortByDachFirst: CountrySortFn = (left, right) =>\n  dachCountries.includes(right.code)\n    ? 1\n    : 0 - (dachCountries.includes(left.code) ? 1 : 0);\n"],"names":[],"mappings":"AAEA,MAAM,aAAgB,GAAA,CAAC,IAAM,EAAA,IAAA,EAAM,IAAI,CAAA;AAEhC,MAAM,kBAAiC,CAAC,IAAA,EAAM,KACnD,KAAA,aAAA,CAAc,SAAS,KAAM,CAAA,IAAI,CAC7B,GAAA,CAAA,GACA,KAAK,aAAc,CAAA,QAAA,CAAS,IAAK,CAAA,IAAI,IAAI,CAAI,GAAA,CAAA;;;;"}

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

@@ -0,0 +1,16 @@
+"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, ...rest } = props;
+  const rootClassName = clsx(styles.separator, className);
+  return /* @__PURE__ */ jsx(Aria.Separator, { elementType: "hr", className: rootClassName, ...rest });
+};
+
+export { Separator, Separator as default };
+//# sourceMappingURL=Separator.mjs.map

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

@@ -0,0 +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 = Omit<Aria.SeparatorProps, \"orientation\">;\n\n/** @flr-generate all */\nexport const Separator: FC<SeparatorProps> = (props) => {\n  const { className, ...rest } = props;\n\n  const rootClassName = clsx(styles.separator, className);\n\n  return (\n    <Aria.Separator elementType=\"hr\" className={rootClassName} {...rest} />\n  );\n};\n\nexport default Separator;\n"],"names":[],"mappings":";;;;;;AASa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,SAAA,EAAW,SAAS,CAAA;AAEtD,EACE,uBAAA,GAAA,CAAC,KAAK,SAAL,EAAA,EAAe,aAAY,IAAK,EAAA,SAAA,EAAW,aAAgB,EAAA,GAAG,IAAM,EAAA,CAAA;AAEzE;;;;"}

package/dist/js/components/Separator/Separator.module.scss.mjs

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

package/dist/js/components/Separator/Separator.module.scss.mjs.map

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

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

@@ -0,0 +1,36 @@
+"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, id, ...storeShape } = props;
+  const backend = settingsBackendFactory(storeShape);
+  const storedSettingsResource = getAsyncResource(() => backend.load(), [], {
+    loaderId: id
+  });
+  const storedSettings = storedSettingsResource.use();
+  const storingPromise = useRef(Promise.resolve());
+  const settingsStore = useMemo(
+    () => SettingsStore.fromJson(storedSettings),
+    [id]
+  );
+  const watchAndStoreSettings = () => {
+    const json = settingsStore.asJson;
+    storingPromise.current = storingPromise.current.then(async () => {
+      await backend.store(json);
+      storedSettingsResource.refresh();
+    });
+  };
+  useEffect(() => autorun(watchAndStoreSettings), [id]);
+  return /* @__PURE__ */ jsx(context.Provider, { value: settingsStore, children });
+};
+
+export { SettingsProvider, useSettings };
+//# sourceMappingURL=SettingsProvider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsProvider.mjs","sources":["../../../../src/components/SettingsProvider/SettingsProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { SupportedSettingsBackend } from \"@/components/SettingsProvider/backends/types\";\nimport { autorun } from \"mobx\";\nimport { getAsyncResource } from \"@mittwald/react-use-promise\";\nimport { SettingsStore } from \"@/components/SettingsProvider/models/SettingsStore\";\nimport { settingsBackendFactory } from \"@/components/SettingsProvider/backends/settingsBackendFactory\";\n\ntype Props = PropsWithChildren &\n  SupportedSettingsBackend & {\n    id?: string;\n  };\n\nconst context = createContext<SettingsStore | undefined>(undefined);\n\nexport const useSettings = () => useContext(context);\n\nexport const SettingsProvider: FC<Props> = (props) => {\n  const { children, id, ...storeShape } = props;\n  const backend = settingsBackendFactory(storeShape);\n\n  const storedSettingsResource = getAsyncResource(() => backend.load(), [], {\n    loaderId: id,\n  });\n  const storedSettings = storedSettingsResource.use();\n  const storingPromise = useRef(Promise.resolve());\n\n  const settingsStore = useMemo(\n    () => SettingsStore.fromJson(storedSettings),\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      storedSettingsResource.refresh();\n    });\n  };\n\n  useEffect(() => autorun(watchAndStoreSettings), [id]);\n\n  return <context.Provider value={settingsStore}>{children}</context.Provider>;\n};\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,OAAA,GAAU,cAAyC,MAAS,CAAA;AAErD,MAAA,WAAA,GAAc,MAAM,UAAA,CAAW,OAAO;AAEtC,MAAA,gBAAA,GAA8B,CAAC,KAAU,KAAA;AACpD,EAAA,MAAM,EAAE,QAAA,EAAU,EAAI,EAAA,GAAG,YAAe,GAAA,KAAA;AACxC,EAAM,MAAA,OAAA,GAAU,uBAAuB,UAAU,CAAA;AAEjD,EAAA,MAAM,yBAAyB,gBAAiB,CAAA,MAAM,QAAQ,IAAK,EAAA,EAAG,EAAI,EAAA;AAAA,IACxE,QAAU,EAAA;AAAA,GACX,CAAA;AACD,EAAM,MAAA,cAAA,GAAiB,uBAAuB,GAAI,EAAA;AAClD,EAAA,MAAM,cAAiB,GAAA,MAAA,CAAO,OAAQ,CAAA,OAAA,EAAS,CAAA;AAE/C,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,MAAM,aAAc,CAAA,QAAA,CAAS,cAAc,CAAA;AAAA,IAC3C,CAAC,EAAE;AAAA,GACL;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,MAAM,OAAO,aAAc,CAAA,MAAA;AAC3B,IAAA,cAAA,CAAe,OAAU,GAAA,cAAA,CAAe,OAAQ,CAAA,IAAA,CAAK,YAAY;AAC/D,MAAM,MAAA,OAAA,CAAQ,MAAM,IAAI,CAAA;AACxB,MAAA,sBAAA,CAAuB,OAAQ,EAAA;AAAA,KAChC,CAAA;AAAA,GACH;AAEA,EAAA,SAAA,CAAU,MAAM,OAAQ,CAAA,qBAAqB,CAAG,EAAA,CAAC,EAAE,CAAC,CAAA;AAEpD,EAAA,2BAAQ,OAAQ,CAAA,QAAA,EAAR,EAAiB,KAAA,EAAO,eAAgB,QAAS,EAAA,CAAA;AAC3D;;;;"}

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

@@ -0,0 +1,27 @@
+"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));
+    }
+  }
+}
+
+export { LocalStorageSettingsBackend };
+//# sourceMappingURL=LocalStorageSettingsBackend.mjs.map

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

@@ -0,0 +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,YAAiB,KAAA,WAAA;AAE/C,MAAM,2BAAuD,CAAA;AAAA,EACjD,UAAA;AAAA,EAEV,YAAY,UAAoB,EAAA;AACrC,IAAA,IAAA,CAAK,UAAa,GAAA,UAAA;AAAA;AACpB,EAEA,MAAa,IAA8B,GAAA;AACzC,IAAA,IAAI,CAAC,qBAAuB,EAAA;AAC1B,MAAA,OAAO,EAAC;AAAA;AAGV,IAAA,MAAM,UAAa,GAAA,YAAA,CAAa,OAAQ,CAAA,IAAA,CAAK,UAAU,CAAA;AACvD,IAAA,IAAI,eAAe,IAAM,EAAA;AACvB,MAAA,OAAO,EAAC;AAAA;AAEV,IAAO,OAAA,IAAA,CAAK,MAAM,UAAU,CAAA;AAAA;AAC9B,EAEA,MAAa,MAAM,QAAuC,EAAA;AACxD,IAAA,IAAI,qBAAuB,EAAA;AACzB,MAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,UAAA,EAAY,IAAK,CAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AAAA;AAChE;AAEJ;;;;"}

package/dist/js/components/SettingsProvider/backends/settingsBackendFactory.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { LocalStorageSettingsBackend } from './LocalStorageSettingsBackend.mjs';
+
+const settingsBackendFactory = (backend) => {
+  switch (backend.type) {
+    case "custom":
+      return backend.store;
+    case "localStorage":
+      return new LocalStorageSettingsBackend(backend.storageKey);
+  }
+  throw new Error(`Unsupported setting backend: ${backend}`);
+};
+
+export { settingsBackendFactory };
+//# sourceMappingURL=settingsBackendFactory.mjs.map

package/dist/js/components/SettingsProvider/backends/settingsBackendFactory.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settingsBackendFactory.mjs","sources":["../../../../../src/components/SettingsProvider/backends/settingsBackendFactory.ts"],"sourcesContent":["import type {\n  SettingsBackend,\n  SupportedSettingsBackend,\n} from \"@/components/SettingsProvider/backends/types\";\nimport { LocalStorageSettingsBackend } from \"@/components/SettingsProvider/backends/LocalStorageSettingsBackend\";\n\nexport const settingsBackendFactory = (\n  backend: SupportedSettingsBackend,\n): SettingsBackend => {\n  switch (backend.type) {\n    case \"custom\":\n      return backend.store;\n    case \"localStorage\":\n      return new LocalStorageSettingsBackend(backend.storageKey);\n  }\n\n  throw new Error(`Unsupported setting backend: ${backend}`);\n};\n"],"names":[],"mappings":";;AAMa,MAAA,sBAAA,GAAyB,CACpC,OACoB,KAAA;AACpB,EAAA,QAAQ,QAAQ,IAAM;AAAA,IACpB,KAAK,QAAA;AACH,MAAA,OAAO,OAAQ,CAAA,KAAA;AAAA,IACjB,KAAK,cAAA;AACH,MAAO,OAAA,IAAI,2BAA4B,CAAA,OAAA,CAAQ,UAAU,CAAA;AAAA;AAG7D,EAAA,MAAM,IAAI,KAAA,CAAM,CAAgC,6BAAA,EAAA,OAAO,CAAE,CAAA,CAAA;AAC3D;;;;"}

package/dist/js/components/SettingsProvider/models/ComponentSettings.mjs

@@ -0,0 +1,35 @@
+"use client"
+/* */
+import { ObservableMap, makeAutoObservable, toJS } from 'mobx';
+import { mobxMapToObject } from '../../../lib/mobx/mobxMapToObject.mjs';
+import { mapValues } from 'remeda';
+
+class ComponentSettings {
+  settings;
+  constructor(settings = new ObservableMap()) {
+    this.settings = settings;
+    makeAutoObservable(this);
+  }
+  set(settingKey, schema, value) {
+    this.settings.set(settingKey, schema.parse(toJS(value)));
+  }
+  get(settingKey, schema) {
+    return schema.parse(this.settings.get(settingKey));
+  }
+  clear(settingKey) {
+    this.settings.delete(settingKey);
+  }
+  get asJson() {
+    return mapValues(mobxMapToObject(this.settings), (v) => JSON.stringify(v));
+  }
+  static fromJson(json) {
+    return new ComponentSettings(
+      new ObservableMap(
+        mapValues(json, (v) => typeof v === "string" ? JSON.parse(v) : v)
+      )
+    );
+  }
+}
+
+export { ComponentSettings };
+//# sourceMappingURL=ComponentSettings.mjs.map

package/dist/js/components/SettingsProvider/models/ComponentSettings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSettings.mjs","sources":["../../../../../src/components/SettingsProvider/models/ComponentSettings.ts"],"sourcesContent":["import { makeAutoObservable, ObservableMap, toJS } from \"mobx\";\nimport type { ZodSchema } from \"zod\";\nimport type z from \"zod\";\nimport { mobxMapToObject } from \"@/lib/mobx/mobxMapToObject\";\nimport { mapValues } from \"remeda\";\n\nexport type ComponentSettingsJson = Record<string, string>;\n\nexport class ComponentSettings {\n  public readonly settings: ObservableMap<string, unknown>;\n\n  public constructor(settings = new ObservableMap<string, unknown>()) {\n    this.settings = settings;\n    makeAutoObservable(this);\n  }\n\n  public set<T extends ZodSchema>(\n    settingKey: string,\n    schema: T,\n    value: z.infer<T>,\n  ) {\n    this.settings.set(settingKey, schema.parse(toJS(value)));\n  }\n\n  public get<T extends ZodSchema>(settingKey: string, schema: T): z.infer<T> {\n    return schema.parse(this.settings.get(settingKey));\n  }\n\n  public clear(settingKey: string) {\n    this.settings.delete(settingKey);\n  }\n\n  public get asJson(): ComponentSettingsJson {\n    return mapValues(mobxMapToObject(this.settings), (v) => JSON.stringify(v));\n  }\n\n  public static fromJson(json: ComponentSettingsJson) {\n    return new ComponentSettings(\n      new ObservableMap<string, unknown>(\n        mapValues(json, (v) => (typeof v === \"string\" ? JSON.parse(v) : v)),\n      ),\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAQO,MAAM,iBAAkB,CAAA;AAAA,EACb,QAAA;AAAA,EAET,WAAY,CAAA,QAAA,GAAW,IAAI,aAAA,EAAkC,EAAA;AAClE,IAAA,IAAA,CAAK,QAAW,GAAA,QAAA;AAChB,IAAA,kBAAA,CAAmB,IAAI,CAAA;AAAA;AACzB,EAEO,GAAA,CACL,UACA,EAAA,MAAA,EACA,KACA,EAAA;AACA,IAAK,IAAA,CAAA,QAAA,CAAS,IAAI,UAAY,EAAA,MAAA,CAAO,MAAM,IAAK,CAAA,KAAK,CAAC,CAAC,CAAA;AAAA;AACzD,EAEO,GAAA,CAAyB,YAAoB,MAAuB,EAAA;AACzE,IAAA,OAAO,OAAO,KAAM,CAAA,IAAA,CAAK,QAAS,CAAA,GAAA,CAAI,UAAU,CAAC,CAAA;AAAA;AACnD,EAEO,MAAM,UAAoB,EAAA;AAC/B,IAAK,IAAA,CAAA,QAAA,CAAS,OAAO,UAAU,CAAA;AAAA;AACjC,EAEA,IAAW,MAAgC,GAAA;AACzC,IAAO,OAAA,SAAA,CAAU,eAAgB,CAAA,IAAA,CAAK,QAAQ,CAAA,EAAG,CAAC,CAAM,KAAA,IAAA,CAAK,SAAU,CAAA,CAAC,CAAC,CAAA;AAAA;AAC3E,EAEA,OAAc,SAAS,IAA6B,EAAA;AAClD,IAAA,OAAO,IAAI,iBAAA;AAAA,MACT,IAAI,aAAA;AAAA,QACF,SAAA,CAAU,IAAM,EAAA,CAAC,CAAO,KAAA,OAAO,CAAM,KAAA,QAAA,GAAW,IAAK,CAAA,KAAA,CAAM,CAAC,CAAA,GAAI,CAAE;AAAA;AACpE,KACF;AAAA;AAEJ;;;;"}

package/dist/js/components/SettingsProvider/models/SettingsStore.mjs

@@ -0,0 +1,36 @@
+"use client"
+/* */
+import { ObservableMap, makeAutoObservable } from 'mobx';
+import { ComponentSettings } from './ComponentSettings.mjs';
+import { mapValues } from 'remeda';
+import { mobxMapToObject } from '../../../lib/mobx/mobxMapToObject.mjs';
+
+class SettingsStore {
+  componentSettings;
+  constructor(settings = new ObservableMap()) {
+    this.componentSettings = settings;
+    makeAutoObservable(this);
+  }
+  set(componentName, settingKey, schema, value) {
+    const settings = this.componentSettings.get(componentName) ?? new ComponentSettings();
+    settings.set(settingKey, schema, value);
+    this.componentSettings.set(componentName, settings);
+  }
+  get(componentName, settingKey, schema) {
+    const settings = this.componentSettings.get(componentName) ?? new ComponentSettings();
+    return settings.get(settingKey, schema);
+  }
+  clear(componentName, settingKey) {
+    this.componentSettings.get(componentName)?.clear(settingKey);
+  }
+  get asJson() {
+    return mapValues(mobxMapToObject(this.componentSettings), (v) => v.asJson);
+  }
+  static fromJson(json) {
+    const settings = mapValues(json, (v) => ComponentSettings.fromJson(v));
+    return new SettingsStore(new ObservableMap(settings));
+  }
+}
+
+export { SettingsStore };
+//# sourceMappingURL=SettingsStore.mjs.map

package/dist/js/components/SettingsProvider/models/SettingsStore.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsStore.mjs","sources":["../../../../../src/components/SettingsProvider/models/SettingsStore.ts"],"sourcesContent":["import { makeAutoObservable, ObservableMap } from \"mobx\";\nimport { ComponentSettings } from \"@/components/SettingsProvider/models/ComponentSettings\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { mapValues } from \"remeda\";\nimport type { ZodSchema } from \"zod\";\nimport type z from \"zod\";\nimport { mobxMapToObject } from \"@/lib/mobx/mobxMapToObject\";\n\nexport class SettingsStore {\n  public readonly componentSettings: ObservableMap<\n    FlowComponentName,\n    ComponentSettings\n  >;\n\n  public constructor(\n    settings = new ObservableMap<FlowComponentName, ComponentSettings>(),\n  ) {\n    this.componentSettings = settings;\n    makeAutoObservable(this);\n  }\n\n  public set<T extends ZodSchema>(\n    componentName: FlowComponentName,\n    settingKey: string,\n    schema: T,\n    value: z.infer<T>,\n  ) {\n    const settings =\n      this.componentSettings.get(componentName) ?? new ComponentSettings();\n    settings.set(settingKey, schema, value);\n    this.componentSettings.set(componentName, settings);\n  }\n\n  public get<T extends ZodSchema>(\n    componentName: FlowComponentName,\n    settingKey: string,\n    schema: T,\n  ): z.infer<T> {\n    const settings =\n      this.componentSettings.get(componentName) ?? new ComponentSettings();\n    return settings.get(settingKey, schema);\n  }\n\n  public clear(componentName: FlowComponentName, settingKey: string) {\n    this.componentSettings.get(componentName)?.clear(settingKey);\n  }\n\n  public get asJson() {\n    return mapValues(mobxMapToObject(this.componentSettings), (v) => v.asJson);\n  }\n\n  public static fromJson(json: SettingsJson) {\n    const settings = mapValues(json, (v) => ComponentSettings.fromJson(v));\n    return new SettingsStore(new ObservableMap(settings));\n  }\n}\n\nexport type SettingsJson = SettingsStore[\"asJson\"];\n"],"names":[],"mappings":";;;;;AAQO,MAAM,aAAc,CAAA;AAAA,EACT,iBAAA;AAAA,EAKT,WACL,CAAA,QAAA,GAAW,IAAI,aAAA,EACf,EAAA;AACA,IAAA,IAAA,CAAK,iBAAoB,GAAA,QAAA;AACzB,IAAA,kBAAA,CAAmB,IAAI,CAAA;AAAA;AACzB,EAEO,GACL,CAAA,aAAA,EACA,UACA,EAAA,MAAA,EACA,KACA,EAAA;AACA,IAAA,MAAM,WACJ,IAAK,CAAA,iBAAA,CAAkB,IAAI,aAAa,CAAA,IAAK,IAAI,iBAAkB,EAAA;AACrE,IAAS,QAAA,CAAA,GAAA,CAAI,UAAY,EAAA,MAAA,EAAQ,KAAK,CAAA;AACtC,IAAK,IAAA,CAAA,iBAAA,CAAkB,GAAI,CAAA,aAAA,EAAe,QAAQ,CAAA;AAAA;AACpD,EAEO,GAAA,CACL,aACA,EAAA,UAAA,EACA,MACY,EAAA;AACZ,IAAA,MAAM,WACJ,IAAK,CAAA,iBAAA,CAAkB,IAAI,aAAa,CAAA,IAAK,IAAI,iBAAkB,EAAA;AACrE,IAAO,OAAA,QAAA,CAAS,GAAI,CAAA,UAAA,EAAY,MAAM,CAAA;AAAA;AACxC,EAEO,KAAA,CAAM,eAAkC,UAAoB,EAAA;AACjE,IAAA,IAAA,CAAK,iBAAkB,CAAA,GAAA,CAAI,aAAa,CAAA,EAAG,MAAM,UAAU,CAAA;AAAA;AAC7D,EAEA,IAAW,MAAS,GAAA;AAClB,IAAO,OAAA,SAAA,CAAU,gBAAgB,IAAK,CAAA,iBAAiB,GAAG,CAAC,CAAA,KAAM,EAAE,MAAM,CAAA;AAAA;AAC3E,EAEA,OAAc,SAAS,IAAoB,EAAA;AACzC,IAAM,MAAA,QAAA,GAAW,UAAU,IAAM,EAAA,CAAC,MAAM,iBAAkB,CAAA,QAAA,CAAS,CAAC,CAAC,CAAA;AACrE,IAAA,OAAO,IAAI,aAAA,CAAc,IAAI,aAAA,CAAc,QAAQ,CAAC,CAAA;AAAA;AAExD;;;;"}

package/dist/js/components/Skeleton/Skeleton.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from './Skeleton.module.scss.mjs';
+import clsx from 'clsx';
+
+const Skeleton = (props) => {
+  const { width, height, className, ...rest } = props;
+  const rootClassName = clsx(styles.skeleton, className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: rootClassName,
+      "aria-hidden": true,
+      style: { height, width },
+      ...rest
+    }
+  );
+};
+
+export { Skeleton, Skeleton as default };
+//# sourceMappingURL=Skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.mjs","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Skeleton.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface SkeletonProps extends ComponentProps<\"div\"> {\n  /** The width of the skeleton. */\n  width?: string;\n  /** The height of the skeleton. */\n  height?: string;\n}\n\n/** @flr-generate all */\nexport const Skeleton: FC<SkeletonProps> = (props) => {\n  const { width, height, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.skeleton, className);\n\n  return (\n    <div\n      className={rootClassName}\n      aria-hidden\n      style={{ height, width }}\n      {...rest}\n    />\n  );\n};\n\nexport default Skeleton;\n"],"names":[],"mappings":";;;;;AAaa,MAAA,QAAA,GAA8B,CAAC,KAAU,KAAA;AACpD,EAAA,MAAM,EAAE,KAAO,EAAA,MAAA,EAAQ,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,QAAA,EAAU,SAAS,CAAA;AAErD,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,aAAW,EAAA,IAAA;AAAA,MACX,KAAA,EAAO,EAAE,MAAA,EAAQ,KAAM,EAAA;AAAA,MACtB,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/js/components/Skeleton/Skeleton.module.scss.mjs

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

package/dist/js/components/Skeleton/Skeleton.module.scss.mjs.map

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

package/dist/js/components/SkeletonText/SkeletonText.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from './SkeletonText.module.scss.mjs';
+
+const SkeletonText = (props) => {
+  const { width, style = {}, ...rest } = props;
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { width, ...style }, ...rest, children: /* @__PURE__ */ jsx("div", { className: styles.skeletonText }) });
+};
+
+export { SkeletonText, SkeletonText as default };
+//# sourceMappingURL=SkeletonText.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.mjs","sources":["../../../../src/components/SkeletonText/SkeletonText.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./SkeletonText.module.scss\";\n\nexport interface SkeletonTextProps extends ComponentProps<\"div\"> {\n  /** The width of the skeleton text. */\n  width?: string;\n}\n\n/** @flr-generate all */\nexport const SkeletonText: FC<SkeletonTextProps> = (props) => {\n  const { width, style = {}, ...rest } = props;\n  return (\n    <div aria-hidden style={{ width, ...style }} {...rest}>\n      <div className={styles.skeletonText} />\n    </div>\n  );\n};\n\nexport default SkeletonText;\n"],"names":[],"mappings":";;;;AAUa,MAAA,YAAA,GAAsC,CAAC,KAAU,KAAA;AAC5D,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,GAAQ,EAAI,EAAA,GAAG,MAAS,GAAA,KAAA;AACvC,EAAA,2BACG,KAAI,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA,KAAA,EAAO,EAAE,KAAO,EAAA,GAAG,KAAM,EAAA,EAAI,GAAG,IAC/C,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,cAAc,CACvC,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/SkeletonText/SkeletonText.module.scss.mjs

@@ -0,0 +1,8 @@
+"use client"
+/* */
+const skeletonText = "flow--skeleton-text";
+const styles = {
+	skeletonText: skeletonText};
+
+export { styles as default, skeletonText };
+//# sourceMappingURL=SkeletonText.module.scss.mjs.map

package/dist/js/components/SkeletonText/SkeletonText.module.scss.mjs.map

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

package/dist/js/components/Slider/Slider.mjs

@@ -0,0 +1,103 @@
+"use client"
+/* */
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import * as Aria from 'react-aria-components';
+import clsx from 'clsx';
+import styles from './Slider.module.scss.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
+import { Button } from '../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconMinus } from '../Icon/components/icons/IconMinus.mjs';
+import { IconPlus } from '../Icon/components/icons/IconPlus.mjs';
+import locales from '../../_virtual/_.locale.json@3ed2dc50f997451bdd85a713c54e1025.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+
+const Slider = flowComponent("Slider", (props) => {
+  const {
+    className,
+    children,
+    name,
+    isDisabled,
+    defaultValue,
+    showInitialMarker,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.slider,
+    isDisabled && styles.disabled,
+    className
+  );
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const propsContext = {
+    Label: {
+      unstyled: true
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Aria.Slider,
+    {
+      className: rootClassName,
+      isDisabled,
+      defaultValue,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.text, children: [
+          /* @__PURE__ */ jsx(Aria.SliderOutput, { className: styles.value }),
+          /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+        ] }),
+        /* @__PURE__ */ jsx(Aria.SliderTrack, { className: styles.track, children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onPress: () => state.decrementThumb(0),
+              "aria-label": stringFormatter.format("slider.decrement"),
+              variant: "plain",
+              color: "secondary",
+              className: styles.decrement,
+              isDisabled,
+              excludeFromTabOrder: true,
+              children: /* @__PURE__ */ jsx(IconMinus, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onPress: () => state.incrementThumb(0),
+              "aria-label": stringFormatter.format("slider.increment"),
+              variant: "plain",
+              color: "secondary",
+              className: styles.increment,
+              isDisabled,
+              excludeFromTabOrder: true,
+              children: /* @__PURE__ */ jsx(IconPlus, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.fill,
+              style: { width: state.getThumbPercent(0) * 100 + "%" }
+            }
+          ),
+          showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.initialMarker,
+              style: {
+                left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Aria.SliderThumb, { name, className: styles.handle })
+        ] }) })
+      ]
+    }
+  );
+});
+
+export { Slider, Slider as default };
+//# sourceMappingURL=Slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.mjs","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nexport interface SliderProps\n  extends FlowComponentProps,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  showInitialMarker?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const propsContext: PropsContext = {\n    Label: {\n      unstyled: true,\n    },\n  };\n\n  return (\n    <Aria.Slider\n      className={rootClassName}\n      isDisabled={isDisabled}\n      defaultValue={defaultValue}\n      {...rest}\n    >\n      <div className={styles.text}>\n        <Aria.SliderOutput className={styles.value} />\n\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n\n      <Aria.SliderTrack className={styles.track}>\n        {({ state }) => (\n          <>\n            <Button\n              onPress={() => state.decrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.decrement\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.decrement}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n            >\n              <IconMinus />\n            </Button>\n\n            <Button\n              onPress={() => state.incrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.increment\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.increment}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n            >\n              <IconPlus />\n            </Button>\n\n            <div\n              className={styles.fill}\n              style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n            />\n\n            {showInitialMarker &&\n              defaultValue &&\n              typeof defaultValue === \"number\" && (\n                <div\n                  className={styles.initialMarker}\n                  style={{\n                    left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n                  }}\n                />\n              )}\n\n            <Aria.SliderThumb name={name} className={styles.handle} />\n          </>\n        )}\n      </Aria.SliderTrack>\n    </Aria.Slider>\n  );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}