@mittwald/flow-react-components 0.2.0-alpha.60 → 0.2.0-alpha.601

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","sources":["../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { Suspense, type PropsWithChildren, type ReactNode } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\n\nexport interface ModalProps\n  extends PropsWithChildren,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** The size of the modal. @default \"s\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Whether the modal should be displayed as an off canvas. */\n  offCanvas?: boolean;\n  /**\n   * Whether the off canvas should be displayed on the right or left side of the\n   * screen. @default \"right\"\n   */\n  offCanvasOrientation?: \"left\" | \"right\";\n  /** An overlay controller to control the modal state. */\n  controller?: OverlayController;\n  /**\n   * Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n   * action.\n   */\n  slot?: string;\n  /** Whether the modal can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n  const {\n    size = \"s\",\n    offCanvas,\n    controller,\n    children,\n    ref,\n    className,\n    offCanvasOrientation = \"right\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    offCanvas ? styles.offCanvas : styles.modal,\n    styles[`size-${size}`],\n    offCanvasOrientation === \"left\" && styles[\"left\"],\n    className,\n  );\n\n  const header = (children: ReactNode) => (\n    <>\n      {children}\n      <Action closeOverlay=\"Modal\">\n        <ButtonView\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={controller?.close}\n        >\n          <IconClose />\n        </ButtonView>\n      </Action>\n    </>\n  );\n\n  const nestedHeadingLevel = 3;\n\n  const nestedHeadingProps: PropsContext = {\n    Heading: { level: nestedHeadingLevel },\n    Section: {\n      Header: { Heading: { level: nestedHeadingLevel } },\n      Heading: { level: nestedHeadingLevel },\n    },\n    Header: { Heading: { level: nestedHeadingLevel } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      ...nestedHeadingProps,\n      className: styles.content,\n    },\n    ColumnLayout: {\n      ...nestedHeadingProps,\n      l: [2, 1],\n      m: [1],\n      className: styles.columnLayout,\n      AccentBox: { className: styles.accentBox, color: \"neutral\" },\n      wrapWith: <ClearPropsContext />,\n    },\n    Heading: {\n      className: styles.header,\n      level: 2,\n      slot: \"title\",\n      children: dynamic((props) => header(props.children)),\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      spacing: \"m\",\n    },\n  };\n\n  return (\n    <Overlay\n      className={rootClassName}\n      controller={controller}\n      ref={ref}\n      {...rest}\n    >\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={offCanvas}>\n          <Suspense fallback={<OffCanvasSuspenseFallback />}>\n            {children}\n          </Suspense>\n        </Wrap>\n      </PropsContextProvider>\n    </Overlay>\n  );\n});\n\nexport default Modal;\n"],"names":["children","props"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+"use client"
+/* */
+const modal = "flow--modal";
+const offCanvas = "flow--modal--off-canvas";
+const header = "flow--modal--header";
+const content = "flow--modal--content";
+const columnLayout = "flow--modal--column-layout";
+const actionGroup = "flow--modal--action-group";
+const accentBox = "flow--modal--accent-box";
+const left = "flow--modal--left";
+const styles = {
+	modal: modal,
+	offCanvas: offCanvas,
+	header: header,
+	content: content,
+	columnLayout: columnLayout,
+	actionGroup: actionGroup,
+	accentBox: accentBox,
+	"size-s": "flow--modal--size-s",
+	"size-m": "flow--modal--size-m",
+	"size-l": "flow--modal--size-l",
+	"modal-zoom": "flow--modal--modal-zoom",
+	"modal-slide-in-from-right": "flow--modal--modal-slide-in-from-right",
+	left: left,
+	"modal-slide-in-from-left": "flow--modal--modal-slide-in-from-left",
+	"modal-slide-up": "flow--modal--modal-slide-up"
+};
+
+export { accentBox, actionGroup, columnLayout, content, styles as default, header, left, modal, offCanvas };
+//# sourceMappingURL=Modal.module.scss.mjs.map

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

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

package/dist/js/components/src/components/Modal/components/ModalTrigger/ModalTrigger.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react-aria-components';
+import '../../../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
+import { OverlayTrigger } from '../../../OverlayTrigger/OverlayTrigger.mjs';
+import DialogTriggerView from '../../../../views/DialogTriggerView.mjs';
+
+const ModalTrigger = (props) => {
+  const { children, ...triggerProps } = props;
+  return /* @__PURE__ */ jsx(
+    OverlayTrigger,
+    {
+      overlayType: "Modal",
+      ...triggerProps,
+      component: DialogTriggerView,
+      children
+    }
+  );
+};
+
+export { ModalTrigger, ModalTrigger as default };
+//# sourceMappingURL=ModalTrigger.mjs.map

package/dist/js/components/src/components/Modal/components/ModalTrigger/ModalTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTrigger.mjs","sources":["../../../../../../../../src/components/Modal/components/ModalTrigger/ModalTrigger.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\nimport { OverlayTrigger } from \"@/components/OverlayTrigger\";\nimport type { Simplify } from \"type-fest\";\nimport DialogTriggerView from \"@/views/DialogTriggerView\";\n\nexport type { OverlayTriggerProps } from \"@/components/OverlayTrigger\";\n\nexport type ModalTriggerProps = Simplify<OverlayTriggerProps>;\n\nexport const ModalTrigger: FC<ModalTriggerProps> = (props) => {\n  const { children, ...triggerProps } = props;\n  return (\n    <OverlayTrigger\n      overlayType=\"Modal\"\n      {...triggerProps}\n      component={DialogTriggerView}\n    >\n      {children}\n    </OverlayTrigger>\n  );\n};\n\nexport default ModalTrigger;\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,YAAA,EAAa,GAAI,KAAA;AACtC,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,OAAA;AAAA,MACX,GAAG,YAAA;AAAA,MACJ,SAAA,EAAW,iBAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/js/components/src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs

@@ -0,0 +1,123 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import '../../../AccentBox/AccentBox.mjs';
+import 'react';
+import 'clsx';
+import '../../../../lib/propsContext/propsContext.mjs';
+import '../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '../../../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import '@mittwald/react-tunnel';
+import '../../../Activity/Activity.mjs';
+import '../../../Action/Action.mjs';
+import { useAriaAnnounceSuspense } from '../../../Action/lib/ariaLive.mjs';
+import '../../../ActionGroup/ActionGroup.mjs';
+import '../../../Alert/Alert.mjs';
+import '../../../AlertBadge/AlertBadge.mjs';
+import 'react-aria';
+import '../../../Align/Align.mjs';
+import '../../../Autocomplete/Autocomplete.mjs';
+import '../../../Avatar/Avatar.mjs';
+import '../../../Badge/Badge.mjs';
+import 'react-aria-components';
+import 'mobx';
+import '../../../../lib/controller/overlay/context.mjs';
+import 'remeda';
+import '../../../../lib/slotContext/SlotContextProvider.mjs';
+import '../../../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
+import '../../../../views/ClearPropsContextView.mjs';
+import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import '@react-aria/utils';
+import 'dot-prop';
+import 'recharts';
+import '../../../Heading/Heading.mjs';
+import '../../../Text/Text.mjs';
+import '../../../Checkbox/Checkbox.mjs';
+import '../../../CheckboxButton/CheckboxButton.mjs';
+import '../../../CheckboxGroup/CheckboxGroup.mjs';
+import 'react-syntax-highlighter';
+import '../../../CopyButton/CopyButton.mjs';
+import '../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ComboBox/ComboBox.mjs';
+import '../../../Content/Content.mjs';
+import '../../../ContextMenu/ContextMenu.mjs';
+import '../../../MenuItem/MenuItem.mjs';
+import '../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import '../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../ContextualHelp/ContextualHelp.mjs';
+import '../../../ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs';
+import '../../../CounterBadge/CounterBadge.mjs';
+import '../../../CountryOptions/CountryOptions.mjs';
+import '../../../DatePicker/DatePicker.mjs';
+import '../../../DateRangePicker/DateRangePicker.mjs';
+import '../../../FieldDescription/FieldDescription.mjs';
+import '../../../FieldError/FieldError.mjs';
+import '../../../FileCard/FileCard.mjs';
+import '../../../FileCardList/FileCardList.mjs';
+import '../../../FileDropZone/FileDropZone.mjs';
+import '../../../FileField/FileField.mjs';
+import '../../../Header/Header.mjs';
+import '../../../Image/Image.mjs';
+import '../../../Initials/Initials.mjs';
+import '../../../Label/Label.mjs';
+import '../../../LayoutCard/LayoutCard.mjs';
+import '../../../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
+import '../../../../views/DialogTriggerView.mjs';
+import '../../../LightBox/LightBox.mjs';
+import '../../../Link/Link.mjs';
+import 'invariant';
+import '../../../../views/ListItemViewContentView.mjs';
+import '../../../../views/ButtonView.mjs';
+import '../../../../views/ContextMenuTriggerView.mjs';
+import '../../../List/components/ListSummary/ListSummary.mjs';
+import '../../../List/listContext.mjs';
+import '../../../List/List.mjs';
+import 'react-markdown';
+import 'remark-gfm';
+import '../../../MarkdownEditor/MarkdownEditor.mjs';
+import '../../../Message/Message.mjs';
+import '../../../MessageThread/MessageThread.mjs';
+import '../../Modal.mjs';
+import '../../../Navigation/Navigation.mjs';
+import '../../../Navigation/components/NavigationGroup/NavigationGroup.mjs';
+import '../../../NotificationProvider/NotificationProvider.mjs';
+import 'luxon';
+import '../../../NumberField/NumberField.mjs';
+import '../../../Option/Option.mjs';
+import '../../../../views/OverlayContentView.mjs';
+import LoadingSpinnerView from '../../../../views/LoadingSpinnerView.mjs';
+import '../../../PasswordCreationField/PasswordCreationField.mjs';
+import '../../../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
+import '../../../Popover/Popover.mjs';
+import '../../../ProgressBar/ProgressBar.mjs';
+import '../../../RadioGroup/RadioGroup.mjs';
+import '../../../RadioGroup/components/Radio/Radio.mjs';
+import '../../../RadioGroup/components/RadioButton/RadioButton.mjs';
+import '../../../SearchField/SearchField.mjs';
+import '../../../Section/Section.mjs';
+import '../../../SegmentedControl/SegmentedControl.mjs';
+import '../../../SegmentedControl/components/Segment/Segment.mjs';
+import '../../../Select/Select.mjs';
+import '../../../SettingsProvider/SettingsProvider.mjs';
+import '../../../Slider/Slider.mjs';
+import '../../../SuspenseTrigger/SuspenseTrigger.mjs';
+import '../../../Switch/Switch.mjs';
+import '../../../Tabs/Tabs.mjs';
+import '../../../Tabs/components/Tab/context.mjs';
+import '../../../TextArea/TextArea.mjs';
+import '../../../TextField/TextField.mjs';
+import '../../../TimeField/TimeField.mjs';
+import '../../../TranslationProvider/TranslationProvider.mjs';
+import '../../../../lib/remote/eventHandlerContext.mjs';
+import FlexView from '../../../../views/FlexView.mjs';
+
+const OffCanvasSuspenseFallback = () => {
+  useAriaAnnounceSuspense();
+  return /* @__PURE__ */ jsx(FlexView, { grow: true, align: "center", justify: "center", children: /* @__PURE__ */ jsx(LoadingSpinnerView, {}) });
+};
+
+export { OffCanvasSuspenseFallback };
+//# sourceMappingURL=OffCanvasSuspenseFallback.mjs.map

package/dist/js/components/src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OffCanvasSuspenseFallback.mjs","sources":["../../../../../../../../src/components/Modal/components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.tsx"],"sourcesContent":["import { useAriaAnnounceSuspense } from \"@/index/default\";\nimport FlexView from \"@/views/FlexView\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { FC } from \"react\";\n\nexport const OffCanvasSuspenseFallback: FC = () => {\n  useAriaAnnounceSuspense();\n  return (\n    <FlexView grow align=\"center\" justify=\"center\">\n      <LoadingSpinnerView />\n    </FlexView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,4BAAgC,MAAM;AACjD,EAAA,uBAAA,EAAwB;AACxB,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAI,IAAA,EAAC,KAAA,EAAM,UAAS,OAAA,EAAQ,QAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA,EACtB,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,43 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Navigation.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+
+const Navigation = flowComponent("Navigation", (props) => {
+  const { className, children, ref, ...rest } = props;
+  const rootClassName = clsx(styles.navigation, className);
+  const linkPropsContext = {
+    wrapWith: /* @__PURE__ */ jsx("li", {}),
+    className: styles.item,
+    unstyled: true,
+    Icon: {
+      className: styles.icon
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    PropsContextProvider,
+    {
+      props: {
+        Link: {
+          ...linkPropsContext,
+          tunnelId: "links"
+        },
+        NavigationGroup: {
+          Link: linkPropsContext
+        }
+      },
+      children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs("nav", { className: rootClassName, role: "navigation", ...rest, ref, children: [
+        /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "links" }) }),
+        children
+      ] }) })
+    }
+  );
+});
+
+export { Navigation, Navigation as default };
+//# sourceMappingURL=Navigation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.mjs","sources":["../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\n\nexport interface NavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    Icon: {\n      className: styles.icon,\n    },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnelId: \"links\",\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <TunnelProvider>\n        <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n          <ul>\n            <TunnelExit id=\"links\" />\n          </ul>\n          {children}\n        </nav>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"names":[],"mappings":";;;;;;;;AAkBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,MAAM,gBAAA,GAAkD;AAAA,IACtD,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,IACd,WAAW,MAAA,CAAO,IAAA;AAAA,IAClB,QAAA,EAAU,IAAA;AAAA,IACV,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,UACJ,GAAG,gBAAA;AAAA,UACH,QAAA,EAAU;AAAA,SACZ;AAAA,QACA,eAAA,EAAiB;AAAA,UACf,IAAA,EAAM;AAAA;AACR,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,eAAe,IAAA,EAAK,YAAA,EAAc,GAAG,IAAA,EAAM,GAAA,EACzD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,SAAQ,CAAA,EACzB,CAAA;AAAA,QACC;AAAA,OAAA,EACH,CAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs

@@ -0,0 +1,53 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+import styles from './NavigationGroup.module.scss.mjs';
+import '../../../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import { Accordion } from '../../../Accordion/Accordion.mjs';
+import { Content } from '../../../Content/Content.mjs';
+import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+
+const NavigationGroup = flowComponent("NavigationGroup", (props) => {
+  const { children, className, collapsable, ...rest } = props;
+  const rootClassName = clsx(
+    styles.navigationGroup,
+    collapsable && styles.collapsable,
+    className
+  );
+  const generatedId = useId();
+  const propsContext = {
+    Label: {
+      id: generatedId,
+      className: styles.label
+    },
+    Link: {
+      tunnelId: "groupLinks"
+    }
+  };
+  if (collapsable) {
+    return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, className: rootClassName, children: [
+      children,
+      /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "groupLinks" }) }) })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": generatedId,
+      className: rootClassName,
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TunnelExit, { id: "Label" }),
+        /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(TunnelExit, { id: "groupLinks" }) })
+      ]
+    }
+  ) }) });
+});
+
+export { NavigationGroup, NavigationGroup as default };
+//# sourceMappingURL=NavigationGroup.mjs.map

package/dist/js/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationGroup.mjs","sources":["../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport interface NavigationGroupProps\n  extends PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  collapsable?: boolean;\n}\n\n/** @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n  const { children, className, collapsable, ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.navigationGroup,\n    collapsable && styles.collapsable,\n    className,\n  );\n\n  const generatedId = useId();\n\n  const propsContext: PropsContext = {\n    Label: {\n      id: generatedId,\n      className: styles.label,\n    },\n    Link: {\n      tunnelId: \"groupLinks\",\n    },\n  };\n\n  if (collapsable) {\n    return (\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <Accordion defaultExpanded className={rootClassName}>\n            {children}\n            <Content>\n              <ul>\n                <TunnelExit id=\"groupLinks\" />\n              </ul>\n            </Content>\n          </Accordion>\n        </TunnelProvider>\n      </PropsContextProvider>\n    );\n  }\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <section\n          aria-labelledby={generatedId}\n          className={rootClassName}\n          {...rest}\n        >\n          {children}\n          <TunnelExit id=\"Label\" />\n          <ul>\n            <TunnelExit id=\"groupLinks\" />\n          </ul>\n        </section>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default NavigationGroup;\n"],"names":[],"mappings":";;;;;;;;;;;AAoBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,EAAa,GAAG,MAAK,GAAI,KAAA;AAEtD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,eAAA;AAAA,IACP,eAAe,MAAA,CAAO,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,EAAA,EAAI,WAAA;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,SAAA,EAAA,EAAU,eAAA,EAAe,IAAA,EAAC,SAAA,EAAW,aAAA,EACnC,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,WACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa,CAAA,EAC9B,CAAA,EACF;AAAA,KAAA,EACF,GACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,WAAA;AAAA,MACjB,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,OAAA,EAAQ,CAAA;AAAA,4BACtB,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,cAAa,CAAA,EAC9B;AAAA;AAAA;AAAA,KAEJ,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,76 @@
+"use client"
+/* */
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { AlertIcon } from '../AlertIcon/AlertIcon.mjs';
+import { Button } from '../Button/Button.mjs';
+import 'react';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconClose } from '../Icon/components/icons/IconClose.mjs';
+import { Link } from '../Link/Link.mjs';
+import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import clsx from 'clsx';
+import styles from './Notification.module.scss.mjs';
+
+const Notification = (props) => {
+  const {
+    children,
+    className,
+    status = "info",
+    role = "alert",
+    href,
+    onClick,
+    onClose,
+    autoClose: ignoredAutoClose,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.notification,
+    styles[status],
+    (onClick || onClose || href) && styles.hasLink,
+    className
+  );
+  const propsContext = {
+    Heading: {
+      className: styles.heading,
+      level: 4,
+      children: dynamic((props2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AlertIcon, { status, className: styles.icon }),
+        props2.children
+      ] }))
+    },
+    Text: {
+      className: styles.text
+    }
+  };
+  const closeButton = onClose && /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "s",
+      className: styles.close,
+      variant: "plain",
+      color: "secondary",
+      onPress: onClose,
+      children: /* @__PURE__ */ jsx(IconClose, {})
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: rootClassName,
+      role,
+      "data-react-aria-top-layer": true,
+      children: [
+        /* @__PURE__ */ jsx(Link, { unstyled: true, href, className: styles.link, onPress: onClick, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }),
+        closeButton
+      ]
+    }
+  );
+};
+
+export { Notification, Notification as default };
+//# sourceMappingURL=Notification.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.mjs","sources":["../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { Link } from \"@/components/Link\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./Notification.module.scss\";\n\nexport interface NotificationProps\n  extends PropsWithChildren<ComponentProps<\"div\">>,\n    PropsWithStatus {\n  /** A link that is triggered when clicking the notification. */\n  href?: string;\n  /** Whether the notification should disappear automatically after some time. */\n  autoClose?: boolean;\n  /** Handler that is called when the notification is clicked. */\n  onClick?: () => void;\n  /**\n   * Handler that is called when the close button of the notification is\n   * clicked.\n   */\n  onClose?: () => void;\n}\n\n/** @flr-generate all */\nexport const Notification: FC<NotificationProps> = (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    role = \"alert\",\n    href,\n    onClick,\n    onClose,\n    autoClose: ignoredAutoClose,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.notification,\n    styles[status],\n    (onClick || onClose || href) && styles.hasLink,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 4,\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  const closeButton = onClose && (\n    <Button\n      size=\"s\"\n      className={styles.close}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onClose}\n    >\n      <IconClose />\n    </Button>\n  );\n\n  return (\n    <div\n      {...rest}\n      className={rootClassName}\n      role={role}\n      // See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts#L126C31-L126C58\n      data-react-aria-top-layer\n    >\n      <Link unstyled href={href} className={styles.link} onPress={onClick}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Link>\n      {closeButton}\n    </div>\n  );\n};\n\nexport default Notification;\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;;AA4BO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA,GAAS,MAAA;AAAA,IACT,IAAA,GAAO,OAAA;AAAA,IACP,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA,EAAW,gBAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,YAAA;AAAA,IACP,OAAO,MAAM,CAAA;AAAA,IAAA,CACZ,OAAA,IAAW,OAAA,IAAW,IAAA,KAAS,MAAA,CAAO,OAAA;AAAA,IACvC;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,KAAA,EAAO,CAAA;AAAA,MACP,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,qBACjB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,MAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,CAAA;AAAA,QAClDA,MAAAA,CAAM;AAAA,OAAA,EACT,CACD;AAAA,KACH;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,cAAc,OAAA,oBAClB,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,GAAA;AAAA,MACL,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,WAAA;AAAA,MACN,OAAA,EAAS,OAAA;AAAA,MAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,GACb;AAGF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,IAAA;AAAA,MAEA,2BAAA,EAAyB,IAAA;AAAA,MAEzB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,QAAA,EAAQ,IAAA,EAAC,IAAA,EAAY,WAAW,MAAA,CAAO,IAAA,EAAM,OAAA,EAAS,OAAA,EAC1D,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,UACH,CAAA,EACF,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -0,0 +1,29 @@
+"use client"
+/* */
+const notification = "flow--notification";
+const link = "flow--notification--link";
+const heading = "flow--notification--heading";
+const icon = "flow--notification--icon";
+const text = "flow--notification--text";
+const close = "flow--notification--close";
+const info = "flow--notification--info";
+const hasLink = "flow--notification--has-link";
+const warning = "flow--notification--warning";
+const danger = "flow--notification--danger";
+const success = "flow--notification--success";
+const styles = {
+	notification: notification,
+	link: link,
+	heading: heading,
+	icon: icon,
+	text: text,
+	close: close,
+	info: info,
+	hasLink: hasLink,
+	warning: warning,
+	danger: danger,
+	success: success
+};
+
+export { close, danger, styles as default, hasLink, heading, icon, info, link, notification, success, text, warning };
+//# sourceMappingURL=Notification.module.scss.mjs.map

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

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

package/dist/js/components/src/components/NotificationProvider/ControlledNotification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledNotification.mjs","sources":["../../../../../../src/components/NotificationProvider/ControlledNotification.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { cloneElement } from \"react\";\nimport type {\n  NotificationController,\n  NotificationData,\n} from \"@/components/NotificationProvider/NotificationController\";\n\ninterface Props {\n  notification: NotificationData;\n  controller: NotificationController;\n}\n\nexport const ControlledNotification: FC<Props> = (props) => {\n  const { notification, controller } = props;\n\n  return cloneElement(notification.element, {\n    onMouseEnter: () => {\n      if (notification.element.props.autoClose) {\n        notification.meta.autoCloseTimer.pause();\n      }\n    },\n    onMouseLeave: () => {\n      if (notification.element.props.autoClose) {\n        notification.meta.autoCloseTimer.resume();\n      }\n    },\n    onClose: () => {\n      controller.remove(notification.meta.id);\n      notification.element.props.onClose?.();\n    },\n    onFocus: () => {\n      if (notification.element.props.autoClose) {\n        notification.meta.autoCloseTimer.pause();\n      }\n    },\n    onBlur: () => {\n      if (notification.element.props.autoClose) {\n        notification.meta.autoCloseTimer.resume();\n      }\n    },\n  });\n};\n\nexport default ControlledNotification;\n"],"names":[],"mappings":";;AAYO,MAAM,sBAAA,GAAoC,CAAC,KAAA,KAAU;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,UAAA,EAAW,GAAI,KAAA;AAErC,EAAA,OAAO,YAAA,CAAa,aAAa,OAAA,EAAS;AAAA,IACxC,cAAc,MAAM;AAClB,MAAA,IAAI,YAAA,CAAa,OAAA,CAAQ,KAAA,CAAM,SAAA,EAAW;AACxC,QAAA,YAAA,CAAa,IAAA,CAAK,eAAe,KAAA,EAAM;AAAA,MACzC;AAAA,IACF,CAAA;AAAA,IACA,cAAc,MAAM;AAClB,MAAA,IAAI,YAAA,CAAa,OAAA,CAAQ,KAAA,CAAM,SAAA,EAAW;AACxC,QAAA,YAAA,CAAa,IAAA,CAAK,eAAe,MAAA,EAAO;AAAA,MAC1C;AAAA,IACF,CAAA;AAAA,IACA,SAAS,MAAM;AACb,MAAA,UAAA,CAAW,MAAA,CAAO,YAAA,CAAa,IAAA,CAAK,EAAE,CAAA;AACtC,MAAA,YAAA,CAAa,OAAA,CAAQ,MAAM,OAAA,IAAU;AAAA,IACvC,CAAA;AAAA,IACA,SAAS,MAAM;AACb,MAAA,IAAI,YAAA,CAAa,OAAA,CAAQ,KAAA,CAAM,SAAA,EAAW;AACxC,QAAA,YAAA,CAAa,IAAA,CAAK,eAAe,KAAA,EAAM;AAAA,MACzC;AAAA,IACF,CAAA;AAAA,IACA,QAAQ,MAAM;AACZ,MAAA,IAAI,YAAA,CAAa,OAAA,CAAQ,KAAA,CAAM,SAAA,EAAW;AACxC,QAAA,YAAA,CAAa,IAAA,CAAK,eAAe,MAAA,EAAO;AAAA,MAC1C;AAAA,IACF;AAAA,GACD,CAAA;AACH;;;;"}

package/dist/js/components/src/components/NotificationProvider/NotificationContainer/NotificationContainer.mjs

@@ -0,0 +1,43 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { Suspense } from 'react';
+import ReactDOM from 'react-dom';
+import clsx from 'clsx';
+import styles from './NotificationContainer.module.scss.mjs';
+import { ControlledNotification } from '../ControlledNotification.mjs';
+import { LazyMotion, domAnimation, AnimatePresence, m } from 'framer-motion';
+import { useIsSSR } from 'react-aria';
+import { useNotificationController } from '../NotificationProvider.mjs';
+
+const NotificationContainer = (props) => {
+  const { className, ...rest } = props;
+  const controller = useNotificationController();
+  const notifications = controller.useNotifications();
+  const isSsr = useIsSSR();
+  const rootClassName = clsx(styles.notificationContainer, className);
+  const content = /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx("div", { className: rootClassName, ...rest, children: /* @__PURE__ */ jsx(AnimatePresence, { children: notifications.map((n) => /* @__PURE__ */ jsx(
+    m.div,
+    {
+      className: styles.notification,
+      initial: { opacity: 0, x: 200 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 200, height: 0, paddingBottom: 0 },
+      transition: {
+        bounce: 0
+      },
+      children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+        ControlledNotification,
+        {
+          notification: n,
+          controller
+        }
+      ) })
+    },
+    n.meta.id
+  )) }) }) });
+  return isSsr ? null : ReactDOM.createPortal(content, document.body);
+};
+
+export { NotificationContainer, NotificationContainer as default };
+//# sourceMappingURL=NotificationContainer.mjs.map

package/dist/js/components/src/components/NotificationProvider/NotificationContainer/NotificationContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationContainer.mjs","sources":["../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport clsx from \"clsx\";\nimport styles from \"./NotificationContainer.module.scss\";\nimport ControlledNotification from \"@/components/NotificationProvider/ControlledNotification\";\nimport { AnimatePresence, domAnimation, LazyMotion, m } from \"framer-motion\";\nimport { useIsSSR } from \"react-aria\";\nimport { useNotificationController } from \"@/components/NotificationProvider/NotificationProvider\";\n\nexport type NotificationsContainerProps = ComponentProps<\"div\">;\n\nexport const NotificationContainer: FC<NotificationsContainerProps> = (\n  props,\n) => {\n  const { className, ...rest } = props;\n\n  const controller = useNotificationController();\n  const notifications = controller.useNotifications();\n  const isSsr = useIsSSR();\n\n  const rootClassName = clsx(styles.notificationContainer, className);\n\n  const content = (\n    <LazyMotion features={domAnimation}>\n      <div className={rootClassName} {...rest}>\n        <AnimatePresence>\n          {notifications.map((n) => (\n            <m.div\n              className={styles.notification}\n              key={n.meta.id}\n              initial={{ opacity: 0, x: 200 }}\n              animate={{ opacity: 1, x: 0 }}\n              exit={{ opacity: 0, x: 200, height: 0, paddingBottom: 0 }}\n              transition={{\n                bounce: 0,\n              }}\n            >\n              <Suspense>\n                <ControlledNotification\n                  notification={n}\n                  controller={controller}\n                />\n              </Suspense>\n            </m.div>\n          ))}\n        </AnimatePresence>\n      </div>\n    </LazyMotion>\n  );\n\n  return isSsr ? null : ReactDOM.createPortal(content, document.body);\n};\n\nexport default NotificationContainer;\n"],"names":[],"mappings":";;;;;;;;;;AAYO,MAAM,qBAAA,GAAyD,CACpE,KAAA,KACG;AACH,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,aAAa,yBAAA,EAA0B;AAC7C,EAAA,MAAM,aAAA,GAAgB,WAAW,gBAAA,EAAiB;AAClD,EAAA,MAAM,QAAQ,QAAA,EAAS;AAEvB,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAuB,SAAS,CAAA;AAElE,EAAA,MAAM,0BACJ,GAAA,CAAC,UAAA,EAAA,EAAW,QAAA,EAAU,YAAA,EACpB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAgB,GAAG,MACjC,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EACE,QAAA,EAAA,aAAA,CAAc,GAAA,CAAI,CAAC,CAAA,qBAClB,GAAA;AAAA,IAAC,CAAA,CAAE,GAAA;AAAA,IAAF;AAAA,MACC,WAAW,MAAA,CAAO,YAAA;AAAA,MAElB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,GAAG,GAAA,EAAI;AAAA,MAC9B,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,GAAG,CAAA,EAAE;AAAA,MAC5B,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,GAAG,GAAA,EAAK,MAAA,EAAQ,CAAA,EAAG,aAAA,EAAe,CAAA,EAAE;AAAA,MACxD,UAAA,EAAY;AAAA,QACV,MAAA,EAAQ;AAAA,OACV;AAAA,MAEA,8BAAC,QAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,sBAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAc,CAAA;AAAA,UACd;AAAA;AAAA,OACF,EACF;AAAA,KAAA;AAAA,IAbK,EAAE,IAAA,CAAK;AAAA,GAef,CAAA,EACH,CAAA,EACF,CAAA,EACF,CAAA;AAGF,EAAA,OAAO,QAAQ,IAAA,GAAO,QAAA,CAAS,YAAA,CAAa,OAAA,EAAS,SAAS,IAAI,CAAA;AACpE;;;;"}

package/dist/js/components/src/components/NotificationProvider/NotificationController.mjs

@@ -0,0 +1,48 @@
+"use client"
+/* */
+import { useStatic } from '../../lib/hooks/useStatic.mjs';
+import { useSelector } from '../../lib/mobx/useSelector.mjs';
+import { Timer } from '../../lib/timer/Timer.mjs';
+import { makeObservable, action, observable } from 'mobx';
+
+class NotificationController {
+  notificationsData = /* @__PURE__ */ new Map();
+  id = 0;
+  constructor() {
+    makeObservable(this, {
+      notificationsData: observable.shallow,
+      add: action.bound,
+      remove: action.bound
+    });
+  }
+  static useNew() {
+    return useStatic(() => new NotificationController());
+  }
+  useNotifications() {
+    return useSelector(() => Array.from(this.notificationsData.values()));
+  }
+  add(notification) {
+    const id = this.id++;
+    const meta = {
+      id,
+      createdAt: Date.now(),
+      autoCloseTimer: new Timer()
+    };
+    this.notificationsData.set(id, {
+      element: notification,
+      meta
+    });
+    if (notification.props.autoClose) {
+      meta.autoCloseTimer.start({ seconds: 10 }, () => {
+        this.remove(id);
+      });
+    }
+    return id;
+  }
+  remove(id) {
+    this.notificationsData.delete(id);
+  }
+}
+
+export { NotificationController, NotificationController as default };
+//# sourceMappingURL=NotificationController.mjs.map

package/dist/js/components/src/components/NotificationProvider/NotificationController.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationController.mjs","sources":["../../../../../../src/components/NotificationProvider/NotificationController.ts"],"sourcesContent":["import type { NotificationProps } from \"@/components/Notification\";\nimport { useStatic } from \"@/lib/hooks/useStatic\";\nimport useSelector from \"@/lib/mobx/useSelector\";\nimport Timer from \"@/lib/timer/Timer\";\nimport { action, makeObservable, observable } from \"mobx\";\nimport type { ReactElement } from \"react\";\n\ninterface NotificationMetaData {\n  readonly id: number;\n  readonly createdAt: number;\n  readonly autoCloseTimer: Timer;\n}\n\nexport interface NotificationData {\n  readonly element: ReactElement<NotificationProps>;\n  readonly meta: NotificationMetaData;\n}\n\nexport class NotificationController {\n  public readonly notificationsData = new Map<number, NotificationData>();\n  private id = 0;\n\n  public constructor() {\n    makeObservable(this, {\n      notificationsData: observable.shallow,\n      add: action.bound,\n      remove: action.bound,\n    });\n  }\n\n  public static useNew(): NotificationController {\n    return useStatic(() => new NotificationController());\n  }\n\n  public useNotifications(): NotificationData[] {\n    return useSelector(() => Array.from(this.notificationsData.values()));\n  }\n\n  public add(notification: ReactElement<NotificationProps>): number {\n    const id = this.id++;\n\n    const meta: NotificationMetaData = {\n      id,\n      createdAt: Date.now(),\n      autoCloseTimer: new Timer(),\n    };\n\n    this.notificationsData.set(id, {\n      element: notification,\n      meta,\n    });\n\n    if (notification.props.autoClose) {\n      meta.autoCloseTimer.start({ seconds: 10 }, () => {\n        this.remove(id);\n      });\n    }\n\n    return id;\n  }\n\n  public remove(id: number): void {\n    this.notificationsData.delete(id);\n  }\n}\n\nexport default NotificationController;\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,sBAAA,CAAuB;AAAA,EAClB,iBAAA,uBAAwB,GAAA,EAA8B;AAAA,EAC9D,EAAA,GAAK,CAAA;AAAA,EAEN,WAAA,GAAc;AACnB,IAAA,cAAA,CAAe,IAAA,EAAM;AAAA,MACnB,mBAAmB,UAAA,CAAW,OAAA;AAAA,MAC9B,KAAK,MAAA,CAAO,KAAA;AAAA,MACZ,QAAQ,MAAA,CAAO;AAAA,KAChB,CAAA;AAAA,EACH;AAAA,EAEA,OAAc,MAAA,GAAiC;AAC7C,IAAA,OAAO,SAAA,CAAU,MAAM,IAAI,sBAAA,EAAwB,CAAA;AAAA,EACrD;AAAA,EAEO,gBAAA,GAAuC;AAC5C,IAAA,OAAO,WAAA,CAAY,MAAM,KAAA,CAAM,IAAA,CAAK,KAAK,iBAAA,CAAkB,MAAA,EAAQ,CAAC,CAAA;AAAA,EACtE;AAAA,EAEO,IAAI,YAAA,EAAuD;AAChE,IAAA,MAAM,KAAK,IAAA,CAAK,EAAA,EAAA;AAEhB,IAAA,MAAM,IAAA,GAA6B;AAAA,MACjC,EAAA;AAAA,MACA,SAAA,EAAW,KAAK,GAAA,EAAI;AAAA,MACpB,cAAA,EAAgB,IAAI,KAAA;AAAM,KAC5B;AAEA,IAAA,IAAA,CAAK,iBAAA,CAAkB,IAAI,EAAA,EAAI;AAAA,MAC7B,OAAA,EAAS,YAAA;AAAA,MACT;AAAA,KACD,CAAA;AAED,IAAA,IAAI,YAAA,CAAa,MAAM,SAAA,EAAW;AAChC,MAAA,IAAA,CAAK,eAAe,KAAA,CAAM,EAAE,OAAA,EAAS,EAAA,IAAM,MAAM;AAC/C,QAAA,IAAA,CAAK,OAAO,EAAE,CAAA;AAAA,MAChB,CAAC,CAAA;AAAA,IACH;AAEA,IAAA,OAAO,EAAA;AAAA,EACT;AAAA,EAEO,OAAO,EAAA,EAAkB;AAC9B,IAAA,IAAA,CAAK,iBAAA,CAAkB,OAAO,EAAE,CAAA;AAAA,EAClC;AACF;;;;"}

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

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { NotificationController } from './NotificationController.mjs';
+import { NotificationContainer } from './NotificationContainer/NotificationContainer.mjs';
+import { viewComponentContext } from '../../lib/viewComponentContext/viewComponentContext.mjs';
+
+const context = createContext(
+  new NotificationController()
+);
+const useNotificationController = () => useContext(context);
+const NotificationProvider = (props) => {
+  const { children, ...containerProps } = props;
+  const controller = NotificationController.useNew();
+  const ContainerView = useContext(viewComponentContext)["NotificationContainer"] ?? NotificationContainer;
+  return /* @__PURE__ */ jsxs(context.Provider, { value: controller, children: [
+    /* @__PURE__ */ jsx(ContainerView, { ...containerProps }),
+    children
+  ] });
+};
+
+export { NotificationProvider, NotificationProvider as default, useNotificationController };
+//# sourceMappingURL=NotificationProvider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationProvider.mjs","sources":["../../../../../../src/components/NotificationProvider/NotificationProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport NotificationController from \"@/components/NotificationProvider/NotificationController\";\nimport type { NotificationsContainerProps } from \"@/components/NotificationProvider/NotificationContainer/NotificationContainer\";\nimport { NotificationContainer } from \"@/components/NotificationProvider/NotificationContainer\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nexport type NotificationProviderProps =\n  PropsWithChildren<NotificationsContainerProps>;\n\nconst context = createContext<NotificationController>(\n  new NotificationController(),\n);\n\nexport const useNotificationController = (): NotificationController =>\n  useContext(context);\n\nexport const NotificationProvider: FC<NotificationProviderProps> = (props) => {\n  const { children, ...containerProps } = props;\n  const controller = NotificationController.useNew();\n  const ContainerView =\n    useContext(viewComponentContext)[\"NotificationContainer\"] ??\n    NotificationContainer;\n\n  return (\n    <context.Provider value={controller}>\n      <ContainerView {...containerProps} />\n      {children}\n    </context.Provider>\n  );\n};\n\nexport default NotificationProvider;\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,OAAA,GAAU,aAAA;AAAA,EACd,IAAI,sBAAA;AACN,CAAA;AAEO,MAAM,yBAAA,GAA4B,MACvC,UAAA,CAAW,OAAO;AAEb,MAAM,oBAAA,GAAsD,CAAC,KAAA,KAAU;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,cAAA,EAAe,GAAI,KAAA;AACxC,EAAA,MAAM,UAAA,GAAa,uBAAuB,MAAA,EAAO;AACjD,EAAA,MAAM,aAAA,GACJ,UAAA,CAAW,oBAAoB,CAAA,CAAE,uBAAuB,CAAA,IACxD,qBAAA;AAEF,EAAA,uBACE,IAAA,CAAC,OAAA,CAAQ,QAAA,EAAR,EAAiB,OAAO,UAAA,EACvB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,cAAA,EAAgB,CAAA;AAAA,IAClC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}