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

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

@@ -1,76 +1,54 @@
 "use client"
 /* */
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createElement } from 'react';
-import * as Aria from 'react-aria-components';
-import styles from './MenuItem.module.scss.mjs';
-import clsx from 'clsx';
-import { MenuItemContent } from './components/MenuItemContent/MenuItemContent.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { useAriaAnnounceActionState } from '../Action/lib/ariaLive.mjs';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconFailed } from '../Icon/components/icons/IconFailed.mjs';
-import { IconSucceeded } from '../Icon/components/icons/IconSucceeded.mjs';
-import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner.mjs';
-
-const disablePendingProps = (props) => {
-  if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"]) {
-    props = { ...props };
-    props.onPress = void 0;
-    props.onPressStart = void 0;
-    props.onPressEnd = void 0;
-    props.onPressChange = void 0;
-    props.onPressUp = void 0;
-  }
-  return props;
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import IconFailed from "../Icon/components/icons/IconFailed.mjs";
+import IconSucceeded from "../Icon/components/icons/IconSucceeded.mjs";
+import "../Icon/components/icons/index.mjs";
+import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.mjs";
+import { useAriaAnnounceActionState } from "../Action/lib/ariaLive.mjs";
+import MenuItem_module_default from "./MenuItem.module.mjs";
+import { MenuItemContent } from "./components/MenuItemContent/MenuItemContent.mjs";
+import "../LoadingSpinner/index.mjs";
+import clsx from "clsx";
+import { createElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/MenuItem/MenuItem.tsx
+var disablePendingProps = (props) => {
+	if (props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"]) {
+		props = { ...props };
+		props.onPress = void 0;
+		props.onPressStart = void 0;
+		props.onPressEnd = void 0;
+		props.onPressChange = void 0;
+		props.onPressUp = void 0;
+	}
+	return props;
 };
-const MenuItem = flowComponent("MenuItem", (props) => {
-  props = disablePendingProps(props);
-  const {
-    children,
-    className,
-    selectionVariant,
-    id,
-    ref,
-    "aria-disabled": ariaDisabled,
-    isPending,
-    isSucceeded,
-    isFailed,
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.menuItem,
-    (ariaDisabled || isFailed || isSucceeded || isPending) && styles.ariaDisabled,
-    className
-  );
-  useAriaAnnounceActionState(
-    isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle"
-  );
-  const StateIconComponent = isSucceeded ? IconSucceeded : isFailed ? IconFailed : isPending ? LoadingSpinner : void 0;
-  const stateIcon = StateIconComponent && /* @__PURE__ */ jsx("div", { className: styles.stateIcon, children: /* @__PURE__ */ jsx(
-    StateIconComponent,
-    {
-      status: isFailed ? "danger" : isSucceeded ? "success" : void 0
-    }
-  ) });
-  return /* @__PURE__ */ createElement(
-    Aria.MenuItem,
-    {
-      ...rest,
-      key: id,
-      id,
-      className: rootClassName,
-      ref
-    },
-    (props2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(MenuItemContent, { ...props2, selectionVariant, children }),
-      stateIcon
-    ] })
-  );
+/** @flr-generate all */
+var MenuItem = flowComponent("MenuItem", (props) => {
+	props = disablePendingProps(props);
+	const { children, className, selectionVariant, id, ref, "aria-disabled": ariaDisabled, isPending, isSucceeded, isFailed, ...rest } = props;
+	const rootClassName = clsx(MenuItem_module_default.menuItem, (ariaDisabled || isFailed || isSucceeded || isPending) && MenuItem_module_default.ariaDisabled, className);
+	useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
+	const StateIconComponent = isSucceeded ? IconSucceeded : isFailed ? IconFailed : isPending ? LoadingSpinner : void 0;
+	const stateIcon = StateIconComponent && /* @__PURE__ */ jsx("div", {
+		className: MenuItem_module_default.stateIcon,
+		children: /* @__PURE__ */ jsx(StateIconComponent, { status: isFailed ? "danger" : isSucceeded ? "success" : void 0 })
+	});
+	return /* @__PURE__ */ createElement(Aria.MenuItem, {
+		...rest,
+		key: id,
+		id,
+		className: rootClassName,
+		ref
+	}, (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuItemContent, {
+		...props,
+		selectionVariant,
+		children
+	}), stateIcon] }));
 });
+//#endregion
+export { MenuItem as default };
 
-export { MenuItem };
-//# sourceMappingURL=MenuItem.mjs.map
+//# sourceMappingURL=MenuItem.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.mjs","sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n  extends\n    Omit<Aria.MenuItemProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n}\n\nconst disablePendingProps = (props: MenuItemProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"]\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    children,\n    className,\n    selectionVariant,\n    id,\n    ref,\n    \"aria-disabled\": ariaDisabled,\n    isPending,\n    isSucceeded,\n    isFailed,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.menuItem /**\n     * Workaround warning: The Aria.MenuItem does not support \"aria-disabled\" by\n     * now, so this MenuItem will be visually disabled via CSS.\n     */,\n    (ariaDisabled || isFailed || isSucceeded || isPending) &&\n      styles.ariaDisabled,\n    className,\n  );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <div className={styles.stateIcon}>\n      <StateIconComponent\n        status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n      />\n    </div>\n  );\n\n  return (\n    <Aria.MenuItem\n      {...rest}\n      key={id}\n      id={id}\n      className={rootClassName}\n      ref={ref}\n    >\n      {(props) => (\n        <>\n          <MenuItemContent {...props} selectionVariant={selectionVariant}>\n            {children}\n          </MenuItemContent>\n          {stateIcon}\n        </>\n      )}\n    </Aria.MenuItem>\n  );\n});\n\nexport default MenuItem;\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;;;AA2BA,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAyB;AACpD,EAAA,IACE,KAAA,CAAM,aACN,KAAA,CAAM,WAAA,IACN,MAAM,QAAA,IACN,KAAA,CAAM,eAAe,CAAA,EACrB;AACA,IAAA,KAAA,GAAQ,EAAE,GAAG,KAAA,EAAM;AACnB,IAAA,KAAA,CAAM,OAAA,GAAU,MAAA;AAChB,IAAA,KAAA,CAAM,YAAA,GAAe,MAAA;AACrB,IAAA,KAAA,CAAM,UAAA,GAAa,MAAA;AACnB,IAAA,KAAA,CAAM,aAAA,GAAgB,MAAA;AACtB,IAAA,KAAA,CAAM,SAAA,GAAY,MAAA;AAAA,EACpB;AAEA,EAAA,OAAO,KAAA;AACT,CAAA;AAGO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,KAAA,GAAQ,oBAAoB,KAAK,CAAA;AAEjC,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,eAAA,EAAiB,YAAA;AAAA,IACjB,SAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,QAAA;AAAA,IAAA,CAIN,YAAA,IAAgB,QAAA,IAAY,WAAA,IAAe,SAAA,KAC1C,MAAA,CAAO,YAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,0BAAA;AAAA,IACE,SAAA,GACI,WAAA,GACA,WAAA,GACE,aAAA,GACA,WACE,UAAA,GACA;AAAA,GACV;AAEA,EAAA,MAAM,qBAAqB,WAAA,GACvB,aAAA,GACA,QAAA,GACE,UAAA,GACA,YACE,cAAA,GACA,MAAA;AAER,EAAA,MAAM,YAAY,kBAAA,oBAChB,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,QAAA,GAAW,QAAA,GAAW,WAAA,GAAc,SAAA,GAAY;AAAA;AAAA,GAC1D,EACF,CAAA;AAGF,EAAA,uBACE,aAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA,EAAK,EAAA;AAAA,MACL,EAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX;AAAA,KAAA;AAAA,IAEC,CAACA,2BACA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,eAAA,EAAA,EAAiB,GAAGA,MAAAA,EAAO,gBAAA,EACzB,QAAA,EACH,CAAA;AAAA,MACC;AAAA,KAAA,EACH;AAAA,GAEJ;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MenuItem.mjs","names":[],"sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n  extends\n    Omit<Aria.MenuItemProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n}\n\nconst disablePendingProps = (props: MenuItemProps) => {\n  if (\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"]\n  ) {\n    props = { ...props };\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n  props = disablePendingProps(props);\n\n  const {\n    children,\n    className,\n    selectionVariant,\n    id,\n    ref,\n    \"aria-disabled\": ariaDisabled,\n    isPending,\n    isSucceeded,\n    isFailed,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.menuItem /**\n     * Workaround warning: The Aria.MenuItem does not support \"aria-disabled\" by\n     * now, so this MenuItem will be visually disabled via CSS.\n     */,\n    (ariaDisabled || isFailed || isSucceeded || isPending) &&\n      styles.ariaDisabled,\n    className,\n  );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const StateIconComponent = isSucceeded\n    ? IconSucceeded\n    : isFailed\n      ? IconFailed\n      : isPending\n        ? LoadingSpinner\n        : undefined;\n\n  const stateIcon = StateIconComponent && (\n    <div className={styles.stateIcon}>\n      <StateIconComponent\n        status={isFailed ? \"danger\" : isSucceeded ? \"success\" : undefined}\n      />\n    </div>\n  );\n\n  return (\n    <Aria.MenuItem\n      {...rest}\n      key={id}\n      id={id}\n      className={rootClassName}\n      ref={ref}\n    >\n      {(props) => (\n        <>\n          <MenuItemContent {...props} selectionVariant={selectionVariant}>\n            {children}\n          </MenuItemContent>\n          {stateIcon}\n        </>\n      )}\n    </Aria.MenuItem>\n  );\n});\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;;;;;AA2BA,IAAM,uBAAuB,UAAyB;AACpD,KACE,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,kBACN;AACA,UAAQ,EAAE,GAAG,OAAO;AACpB,QAAM,UAAU,KAAA;AAChB,QAAM,eAAe,KAAA;AACrB,QAAM,aAAa,KAAA;AACnB,QAAM,gBAAgB,KAAA;AACtB,QAAM,YAAY,KAAA;;AAGpB,QAAO;;;AAIT,IAAa,WAAW,cAAc,aAAa,UAAU;AAC3D,SAAQ,oBAAoB,MAAM;CAElC,MAAM,EACJ,UACA,WACA,kBACA,IACA,KACA,iBAAiB,cACjB,WACA,aACA,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,wBAAO,WAIN,gBAAgB,YAAY,eAAe,cAC1C,wBAAO,cACT,UACD;AAED,4BACE,YACI,cACA,cACE,gBACA,WACE,aACA,SACT;CAED,MAAM,qBAAqB,cACvB,gBACA,WACE,aACA,YACE,iBACA,KAAA;CAER,MAAM,YAAY,sBAChB,oBAAC,OAAD;EAAK,WAAW,wBAAO;YACrB,oBAAC,oBAAD,EACE,QAAQ,WAAW,WAAW,cAAc,YAAY,KAAA,GACxD,CAAA;EACE,CAAA;AAGR,QACE,8BAAC,KAAK,UAAN;EACE,GAAI;EACJ,KAAK;EACD;EACJ,WAAW;EACN;EAUS,GARZ,UACA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;EAAiB,GAAI;EAAyB;EAC3C;EACe,CAAA,EACjB,UACA,EAAA,CAAA,CAES;EAElB"}

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

@@ -0,0 +1,16 @@
+"use client"
+/* */
+var MenuItem_module_default = {
+	menuItem: "flow--menu-item",
+	"switch": "flow--menu-item--switch",
+	icon: "flow--menu-item--icon",
+	controlIcon: "flow--menu-item--control-icon",
+	ariaDisabled: "flow--menu-item--aria-disabled",
+	avatar: "flow--menu-item--avatar",
+	stateIcon: "flow--menu-item--state-icon",
+	kbd: "flow--menu-item--kbd"
+};
+//#endregion
+export { MenuItem_module_default as default };
+
+//# sourceMappingURL=MenuItem.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.module.mjs","names":[],"sources":["../../../../../../../src/components/MenuItem/MenuItem.module.scss"],"sourcesContent":["@use \"../../styles/mixins/menuItem\";\n\n.menuItem {\n  position: relative;\n\n  @include menuItem.menuItem();\n\n  .stateIcon {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .kbd {\n    margin-inline-start: auto;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs

@@ -1,53 +1,40 @@
 "use client"
 /* */
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import styles from '../../MenuItem.module.scss.mjs';
-import '../../../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
-import 'react';
-import '@mittwald/flow-icons';
-import '../../../Icon/components/IconSetProvider.mjs';
-import '../../../Icon/Icon.mjs';
-import '../../../../views/IconView.mjs';
-import { IconCheckboxChecked } from '../../../Icon/components/icons/IconCheckboxChecked.mjs';
-import { IconCheckboxEmpty } from '../../../Icon/components/icons/IconCheckboxEmpty.mjs';
-import { IconRadioOff } from '../../../Icon/components/icons/IconRadioOff.mjs';
-import { IconRadioOn } from '../../../Icon/components/icons/IconRadioOn.mjs';
-import clsx from 'clsx';
-import { Switch } from '../../../Switch/Switch.mjs';
-
-const MenuItemContent = (props) => {
-  const {
-    selectionMode,
-    isSelected,
-    selectionVariant = "control",
-    children
-  } = props;
-  const propsContext = {
-    Icon: {
-      className: styles.icon
-    },
-    Avatar: {
-      className: styles.avatar
-    },
-    Kbd: {
-      className: styles.kbd
-    }
-  };
-  const controlIconPropsContext = {
-    Icon: {
-      className: clsx(styles.controlIcon, styles.icon)
-    },
-    Switch: {
-      className: clsx(styles.controlIcon, styles.switch)
-    }
-  };
-  const selectionIcon = selectionMode === "none" || selectionVariant === "navigation" ? null : selectionVariant === "switch" ? /* @__PURE__ */ jsx(Switch, { isReadOnly: true, isSelected }) : selectionMode === "single" && isSelected ? /* @__PURE__ */ jsx(IconRadioOn, {}) : selectionMode === "single" && !isSelected ? /* @__PURE__ */ jsx(IconRadioOff, {}) : selectionMode === "multiple" && isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, {}) : /* @__PURE__ */ jsx(IconCheckboxEmpty, {});
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropsContextProvider, { props: controlIconPropsContext, children: selectionIcon }),
-    /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
-  ] });
+import PropsContextProvider from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
+import "../../../../lib/propsContext/index.mjs";
+import IconCheckboxChecked from "../../../Icon/components/icons/IconCheckboxChecked.mjs";
+import IconCheckboxEmpty from "../../../Icon/components/icons/IconCheckboxEmpty.mjs";
+import IconRadioOff from "../../../Icon/components/icons/IconRadioOff.mjs";
+import IconRadioOn from "../../../Icon/components/icons/IconRadioOn.mjs";
+import "../../../Icon/components/icons/index.mjs";
+import MenuItem_module_default from "../../MenuItem.module.mjs";
+import Switch from "../../../Switch/Switch.mjs";
+import "../../../Switch/index.mjs";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx
+var MenuItemContent = (props) => {
+	const { selectionMode, isSelected, selectionVariant = "control", children } = props;
+	const propsContext = {
+		Icon: { className: MenuItem_module_default.icon },
+		Avatar: { className: MenuItem_module_default.avatar },
+		Kbd: { className: MenuItem_module_default.kbd }
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
+		props: {
+			Icon: { className: clsx(MenuItem_module_default.controlIcon, MenuItem_module_default.icon) },
+			Switch: { className: clsx(MenuItem_module_default.controlIcon, MenuItem_module_default.switch) }
+		},
+		children: selectionMode === "none" || selectionVariant === "navigation" ? null : selectionVariant === "switch" ? /* @__PURE__ */ jsx(Switch, {
+			isReadOnly: true,
+			isSelected
+		}) : selectionMode === "single" && isSelected ? /* @__PURE__ */ jsx(IconRadioOn, {}) : selectionMode === "single" && !isSelected ? /* @__PURE__ */ jsx(IconRadioOff, {}) : selectionMode === "multiple" && isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, {}) : /* @__PURE__ */ jsx(IconCheckboxEmpty, {})
+	}), /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children
+	})] });
 };
-
+//#endregion
 export { MenuItemContent };
-//# sourceMappingURL=MenuItemContent.mjs.map
+
+//# sourceMappingURL=MenuItemContent.mjs.map

package/dist/js/packages/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemContent.mjs","sources":["../../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconRadioOff,\n  IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n  const {\n    selectionMode,\n    isSelected,\n    selectionVariant = \"control\",\n    children,\n  } = props;\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    Kbd: {\n      className: styles.kbd,\n    },\n  };\n\n  const controlIconPropsContext: PropsContext = {\n    Icon: {\n      className: clsx(styles.controlIcon, styles.icon),\n    },\n    Switch: {\n      className: clsx(styles.controlIcon, styles.switch),\n    },\n  };\n\n  const selectionIcon =\n    selectionMode === \"none\" ||\n    selectionVariant === \"navigation\" ? null : selectionVariant === \"switch\" ? (\n      <Switch isReadOnly isSelected={isSelected} />\n    ) : selectionMode === \"single\" && isSelected ? (\n      <IconRadioOn />\n    ) : selectionMode === \"single\" && !isSelected ? (\n      <IconRadioOff />\n    ) : selectionMode === \"multiple\" && isSelected ? (\n      <IconCheckboxChecked />\n    ) : (\n      <IconCheckboxEmpty />\n    );\n\n  return (\n    <>\n      <PropsContextProvider props={controlIconPropsContext}>\n        {selectionIcon}\n      </PropsContextProvider>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,aAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAA,GAAmB,SAAA;AAAA,IACnB;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAA,EAAK;AAAA,MACH,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,uBAAA,GAAwC;AAAA,IAC5C,IAAA,EAAM;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,WAAA,EAAa,OAAO,IAAI;AAAA,KACjD;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,WAAA,EAAa,OAAO,MAAM;AAAA;AACnD,GACF;AAEA,EAAA,MAAM,aAAA,GACJ,aAAA,KAAkB,MAAA,IAClB,gBAAA,KAAqB,eAAe,IAAA,GAAO,gBAAA,KAAqB,QAAA,mBAC9D,GAAA,CAAC,UAAO,UAAA,EAAU,IAAA,EAAC,UAAA,EAAwB,CAAA,GACzC,kBAAkB,QAAA,IAAY,UAAA,mBAChC,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,GACX,aAAA,KAAkB,QAAA,IAAY,CAAC,6BACjC,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,GACZ,aAAA,KAAkB,cAAc,UAAA,mBAClC,GAAA,CAAC,mBAAA,EAAA,EAAoB,CAAA,uBAEpB,iBAAA,EAAA,EAAkB,CAAA;AAGvB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,uBAAA,EAC1B,QAAA,EAAA,aAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MenuItemContent.mjs","names":[],"sources":["../../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconRadioOff,\n  IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n  const {\n    selectionMode,\n    isSelected,\n    selectionVariant = \"control\",\n    children,\n  } = props;\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    Kbd: {\n      className: styles.kbd,\n    },\n  };\n\n  const controlIconPropsContext: PropsContext = {\n    Icon: {\n      className: clsx(styles.controlIcon, styles.icon),\n    },\n    Switch: {\n      className: clsx(styles.controlIcon, styles.switch),\n    },\n  };\n\n  const selectionIcon =\n    selectionMode === \"none\" ||\n    selectionVariant === \"navigation\" ? null : selectionVariant === \"switch\" ? (\n      <Switch isReadOnly isSelected={isSelected} />\n    ) : selectionMode === \"single\" && isSelected ? (\n      <IconRadioOn />\n    ) : selectionMode === \"single\" && !isSelected ? (\n      <IconRadioOff />\n    ) : selectionMode === \"multiple\" && isSelected ? (\n      <IconCheckboxChecked />\n    ) : (\n      <IconCheckboxEmpty />\n    );\n\n  return (\n    <>\n      <PropsContextProvider props={controlIconPropsContext}>\n        {selectionIcon}\n      </PropsContextProvider>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EACJ,eACA,YACA,mBAAmB,WACnB,aACE;CAEJ,MAAM,eAA6B;EACjC,MAAM,EACJ,WAAW,wBAAO,MACnB;EACD,QAAQ,EACN,WAAW,wBAAO,QACnB;EACD,KAAK,EACH,WAAW,wBAAO,KACnB;EACF;AAyBD,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAsB,OAzBoB;GAC5C,MAAM,EACJ,WAAW,KAAK,wBAAO,aAAa,wBAAO,KAAK,EACjD;GACD,QAAQ,EACN,WAAW,KAAK,wBAAO,aAAa,wBAAO,OAAO,EACnD;GACF;YAGC,kBAAkB,UAClB,qBAAqB,eAAe,OAAO,qBAAqB,WAC9D,oBAAC,QAAD;GAAQ,YAAA;GAAuB;GAAc,CAAA,GAC3C,kBAAkB,YAAY,aAChC,oBAAC,aAAD,EAAe,CAAA,GACb,kBAAkB,YAAY,CAAC,aACjC,oBAAC,cAAD,EAAgB,CAAA,GACd,kBAAkB,cAAc,aAClC,oBAAC,qBAAD,EAAuB,CAAA,GAEvB,oBAAC,mBAAD,EAAqB,CAAA;EAOE,CAAA,EACvB,oBAAC,sBAAD;EAAsB,OAAO;EAC1B;EACoB,CAAA,CACtB,EAAA,CAAA"}

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

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

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

@@ -1,71 +1,70 @@
 "use client"
 /* */
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import styles from './Message.module.scss.mjs';
-import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import 'react';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconContextMenu } from '../Icon/components/icons/IconContextMenu.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { ClearPropsContext } from '../../lib/propsContext/components/ClearPropsContext.mjs';
-
-const Message = flowComponent("Message", (props) => {
-  const { type = "responder", children, className, color } = props;
-  const rootClassName = clsx(styles.message, styles[type], className);
-  const style = color ? { "--message-background": color } : void 0;
-  const propsContext = {
-    Content: {
-      className: styles.content,
-      children: dynamic((props2) => {
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: styles.tip }),
-          props2.children
-        ] });
-      })
-    },
-    Header: {
-      className: styles.header,
-      Button: {
-        className: styles.headerAction,
-        size: "s",
-        variant: "plain",
-        color: "secondary"
-      },
-      ContextMenuTrigger: {
-        Button: {
-          className: styles.headerAction,
-          size: "s",
-          variant: "plain",
-          color: "secondary",
-          children: /* @__PURE__ */ jsx(IconContextMenu, {})
-        }
-      },
-      Text: { className: styles.date },
-      Align: {
-        wrapWith: /* @__PURE__ */ jsx(ClearPropsContext, {}),
-        className: styles.user
-      }
-    },
-    Button: {
-      size: "s",
-      className: styles.action
-    },
-    ActionGroup: {
-      className: styles.actionGroup,
-      Button: {
-        size: "s",
-        className: styles.actionGroupAction
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("article", { className: rootClassName, style, children }) });
+import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import ClearPropsContext from "../../lib/propsContext/components/ClearPropsContext.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import "../../lib/propsContext/index.mjs";
+import IconContextMenu from "../Icon/components/icons/IconContextMenu.mjs";
+import "../Icon/components/icons/index.mjs";
+import Message_module_default from "./Message.module.mjs";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Message/Message.tsx
+/** @flr-generate all */
+var Message = flowComponent("Message", (props) => {
+	const { type = "responder", children, className, color } = props;
+	const rootClassName = clsx(Message_module_default.message, Message_module_default[type], className);
+	const style = color ? { "--message-background": color } : void 0;
+	return /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: {
+			Content: {
+				className: Message_module_default.content,
+				children: dynamic((props) => {
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: Message_module_default.tip }), props.children] });
+				})
+			},
+			Header: {
+				className: Message_module_default.header,
+				Button: {
+					className: Message_module_default.headerAction,
+					size: "s",
+					variant: "plain",
+					color: "secondary"
+				},
+				ContextMenuTrigger: { Button: {
+					className: Message_module_default.headerAction,
+					size: "s",
+					variant: "plain",
+					color: "secondary",
+					children: /* @__PURE__ */ jsx(IconContextMenu, {})
+				} },
+				Text: { className: Message_module_default.date },
+				Align: {
+					wrapWith: /* @__PURE__ */ jsx(ClearPropsContext, {}),
+					className: Message_module_default.user
+				}
+			},
+			Button: {
+				size: "s",
+				className: Message_module_default.action
+			},
+			ActionGroup: {
+				className: Message_module_default.actionGroup,
+				Button: {
+					size: "s",
+					className: Message_module_default.actionGroupAction
+				}
+			}
+		},
+		children: /* @__PURE__ */ jsx("article", {
+			className: rootClassName,
+			style,
+			children
+		})
+	});
 });
+//#endregion
+export { Message as default };
 
-export { Message };
-//# sourceMappingURL=Message.mjs.map
+//# sourceMappingURL=Message.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Message.mjs","sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\n\nexport interface MessageProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n  /** Determines the color and orientation of the message. @default \"responder\" */\n  type?: \"responder\" | \"sender\";\n  color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n  const { type = \"responder\", children, className, color } = props;\n\n  const rootClassName = clsx(styles.message, styles[type], className);\n\n  const style = color\n    ? ({ \"--message-background\": color } as CSSProperties)\n    : undefined;\n\n  const propsContext: PropsContext = {\n    Content: {\n      className: styles.content,\n      children: dynamic((props) => {\n        return (\n          <>\n            <div className={styles.tip} />\n            {props.children}\n          </>\n        );\n      }),\n    },\n    Header: {\n      className: styles.header,\n      Button: {\n        className: styles.headerAction,\n        size: \"s\",\n        variant: \"plain\",\n        color: \"secondary\",\n      },\n      ContextMenuTrigger: {\n        Button: {\n          className: styles.headerAction,\n          size: \"s\",\n          variant: \"plain\",\n          color: \"secondary\",\n          children: <IconContextMenu />,\n        },\n      },\n      Text: { className: styles.date },\n      Align: {\n        wrapWith: <ClearPropsContext />,\n        className: styles.user,\n      },\n    },\n\n    Button: {\n      size: \"s\",\n      className: styles.action,\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      Button: {\n        size: \"s\",\n        className: styles.actionGroupAction,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <article className={rootClassName} style={style}>\n        {children}\n      </article>\n    </PropsContextProvider>\n  );\n});\n\nexport default Message;\n"],"names":["props"],"mappings":";;;;;;;;;;;;;;;AAwBO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,IAAA,GAAO,WAAA,EAAa,QAAA,EAAU,SAAA,EAAW,OAAM,GAAI,KAAA;AAE3D,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,SAAS,MAAA,CAAO,IAAI,GAAG,SAAS,CAAA;AAElE,EAAA,MAAM,KAAA,GAAQ,KAAA,GACT,EAAE,sBAAA,EAAwB,OAAM,GACjC,MAAA;AAEJ,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,QAAA,EAAU,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC3B,QAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EAAK,CAAA;AAAA,UAC3BA,MAAAA,CAAM;AAAA,SAAA,EACT,CAAA;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,WAAW,MAAA,CAAO,YAAA;AAAA,QAClB,IAAA,EAAM,GAAA;AAAA,QACN,OAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,kBAAA,EAAoB;AAAA,QAClB,MAAA,EAAQ;AAAA,UACN,WAAW,MAAA,CAAO,YAAA;AAAA,UAClB,IAAA,EAAM,GAAA;AAAA,UACN,OAAA,EAAS,OAAA;AAAA,UACT,KAAA,EAAO,WAAA;AAAA,UACP,QAAA,sBAAW,eAAA,EAAA,EAAgB;AAAA;AAC7B,OACF;AAAA,MACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,MAC/B,KAAA,EAAO;AAAA,QACL,QAAA,sBAAW,iBAAA,EAAA,EAAkB,CAAA;AAAA,QAC7B,WAAW,MAAA,CAAO;AAAA;AACpB,KACF;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,GAAA;AAAA,MACN,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,WAAA,EAAa;AAAA,MACX,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,GAAA;AAAA,QACN,WAAW,MAAA,CAAO;AAAA;AACpB;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,aAAQ,SAAA,EAAW,aAAA,EAAe,KAAA,EAChC,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Message.mjs","names":[],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\n\nexport interface MessageProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n  /** Determines the color and orientation of the message. @default \"responder\" */\n  type?: \"responder\" | \"sender\";\n  color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n  const { type = \"responder\", children, className, color } = props;\n\n  const rootClassName = clsx(styles.message, styles[type], className);\n\n  const style = color\n    ? ({ \"--message-background\": color } as CSSProperties)\n    : undefined;\n\n  const propsContext: PropsContext = {\n    Content: {\n      className: styles.content,\n      children: dynamic((props) => {\n        return (\n          <>\n            <div className={styles.tip} />\n            {props.children}\n          </>\n        );\n      }),\n    },\n    Header: {\n      className: styles.header,\n      Button: {\n        className: styles.headerAction,\n        size: \"s\",\n        variant: \"plain\",\n        color: \"secondary\",\n      },\n      ContextMenuTrigger: {\n        Button: {\n          className: styles.headerAction,\n          size: \"s\",\n          variant: \"plain\",\n          color: \"secondary\",\n          children: <IconContextMenu />,\n        },\n      },\n      Text: { className: styles.date },\n      Align: {\n        wrapWith: <ClearPropsContext />,\n        className: styles.user,\n      },\n    },\n\n    Button: {\n      size: \"s\",\n      className: styles.action,\n    },\n    ActionGroup: {\n      className: styles.actionGroup,\n      Button: {\n        size: \"s\",\n        className: styles.actionGroupAction,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <article className={rootClassName} style={style}>\n        {children}\n      </article>\n    </PropsContextProvider>\n  );\n});\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;;AAwBA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EAAE,OAAO,aAAa,UAAU,WAAW,UAAU;CAE3D,MAAM,gBAAgB,KAAK,uBAAO,SAAS,uBAAO,OAAO,UAAU;CAEnE,MAAM,QAAQ,QACT,EAAE,wBAAwB,OAAO,GAClC,KAAA;AAmDJ,QACE,oBAAC,sBAAD;EAAsB,OAlDW;GACjC,SAAS;IACP,WAAW,uBAAO;IAClB,UAAU,SAAS,UAAU;AAC3B,YACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAW,uBAAO,KAAO,CAAA,EAC7B,MAAM,SACN,EAAA,CAAA;MAEL;IACH;GACD,QAAQ;IACN,WAAW,uBAAO;IAClB,QAAQ;KACN,WAAW,uBAAO;KAClB,MAAM;KACN,SAAS;KACT,OAAO;KACR;IACD,oBAAoB,EAClB,QAAQ;KACN,WAAW,uBAAO;KAClB,MAAM;KACN,SAAS;KACT,OAAO;KACP,UAAU,oBAAC,iBAAD,EAAmB,CAAA;KAC9B,EACF;IACD,MAAM,EAAE,WAAW,uBAAO,MAAM;IAChC,OAAO;KACL,UAAU,oBAAC,mBAAD,EAAqB,CAAA;KAC/B,WAAW,uBAAO;KACnB;IACF;GAED,QAAQ;IACN,MAAM;IACN,WAAW,uBAAO;IACnB;GACD,aAAa;IACX,WAAW,uBAAO;IAClB,QAAQ;KACN,MAAM;KACN,WAAW,uBAAO;KACnB;IACF;GACF;YAIG,oBAAC,WAAD;GAAS,WAAW;GAAsB;GACvC;GACO,CAAA;EACW,CAAA;EAEzB"}

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

@@ -0,0 +1,20 @@
+"use client"
+/* */
+var Message_module_default = {
+	message: "flow--message",
+	content: "flow--message--content",
+	tip: "flow--message--tip",
+	actionGroup: "flow--message--action-group",
+	actionGroupAction: "flow--message--action-group-action",
+	sender: "flow--message--sender",
+	header: "flow--message--header",
+	user: "flow--message--user",
+	action: "flow--message--action",
+	responder: "flow--message--responder",
+	date: "flow--message--date",
+	headerAction: "flow--message--header-action"
+};
+//#endregion
+export { Message_module_default as default };
+
+//# sourceMappingURL=Message.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.module.mjs","names":[],"sources":["../../../../../../../src/components/Message/Message.module.scss"],"sourcesContent":[".message {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--message--spacing-y);\n  width: max-content;\n  max-width: min(100%, var(--text--max-width));\n\n  --message-background: var(--message--background-color-responder);\n\n  .content {\n    grid-area: content;\n    border-radius: var(--message--corner-radius);\n    padding-inline: var(--message--padding-x);\n    padding-block: var(--message--padding-y);\n    background-color: var(--message-background);\n    position: relative;\n\n    .tip {\n      position: absolute;\n      top: 0;\n      width: var(--message--tip-size-x);\n      height: var(--message--tip-size-y);\n      overflow: hidden;\n\n      &::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: var(--message--tip-size-x);\n        height: var(--message--tip-size-y);\n      }\n    }\n  }\n\n  .actionGroup {\n    justify-content: start;\n\n    .actionGroupAction {\n      margin: 0;\n    }\n  }\n\n  &.sender {\n    align-self: flex-end;\n\n    --message-background: var(--message--background-color-sender);\n\n    .header {\n      flex-direction: row-reverse;\n\n      .user {\n        flex-direction: row-reverse;\n\n        :global(.flow--text) {\n          text-align: end;\n        }\n      }\n    }\n\n    .content {\n      background-color: var(--message-background);\n      border-top-right-radius: 0;\n      margin-inline-end: var(--message--tip-size-x);\n\n      .tip {\n        right: calc(var(--message--tip-size-x) * -1);\n\n        &::before {\n          border-top-left-radius: 100%;\n          box-shadow: 0 0 0 var(--message--tip-size-x) var(--message-background);\n        }\n      }\n    }\n\n    .action,\n    .actionGroup {\n      margin-inline-end: var(--message--tip-size-x);\n      align-self: end;\n    }\n  }\n\n  &.responder {\n    .content {\n      border-top-left-radius: 0;\n      margin-inline-start: var(--message--tip-size-x);\n\n      .tip {\n        left: calc(var(--message--tip-size-x) * -1);\n\n        &::before {\n          border-top-right-radius: 100%;\n          box-shadow: var(--message--tip-size-x) 0 0 var(--message--tip-size-x)\n            var(--message-background);\n        }\n      }\n    }\n\n    .action,\n    .actionGroup {\n      margin-inline-start: var(--message--tip-size-x);\n    }\n  }\n\n  .header {\n    display: flex;\n    gap: var(--message--spacing-y) var(--message--spacing-x);\n    align-items: end;\n    flex-wrap: wrap;\n\n    .user {\n      order: 1;\n      flex-grow: 1;\n    }\n\n    .date {\n      font-size: var(--font-size-text--s);\n      order: 2;\n    }\n\n    .headerAction {\n      order: 3;\n    }\n  }\n}\n"],"mappings":""}

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

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

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

@@ -1,29 +1,28 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import styles from './MessageThread.module.scss.mjs';
-import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-
-const MessageThread = flowComponent("MessageThread", (props) => {
-  const { children, className } = props;
-  const rootClassName = clsx(styles.messageThread, className);
-  const propsContext = {
-    Message: {
-      className: dynamic((props2) => {
-        return clsx(
-          props2.className,
-          styles.message,
-          styles[props2.type ?? "responder"]
-        );
-      })
-    }
-  };
-  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { className: rootClassName, children }) });
+import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import "../../lib/propsContext/index.mjs";
+import MessageThread_module_default from "./MessageThread.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageThread/MessageThread.tsx
+/** @flr-generate all */
+var MessageThread = flowComponent("MessageThread", (props) => {
+	const { children, className } = props;
+	const rootClassName = clsx(MessageThread_module_default.messageThread, className);
+	return /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: { Message: { className: dynamic((props) => {
+			return clsx(props.className, MessageThread_module_default.message, MessageThread_module_default[props.type ?? "responder"]);
+		}) } },
+		children: /* @__PURE__ */ jsx("div", {
+			className: rootClassName,
+			children
+		})
+	});
 });
+//#endregion
+export { MessageThread as default };
 
-export { MessageThread };
-//# sourceMappingURL=MessageThread.mjs.map
+//# sourceMappingURL=MessageThread.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.mjs","sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n  PropsWithClassName &\n  FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.messageThread, className);\n\n  const propsContext: PropsContext = {\n    Message: {\n      className: dynamic((props) => {\n        return clsx(\n          props.className,\n          styles.message,\n          styles[props.type ?? \"responder\"],\n        );\n      }),\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName}>{children}</div>\n    </PropsContextProvider>\n  );\n});\n\nexport default MessageThread;\n"],"names":["props"],"mappings":";;;;;;;;AAmBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAEhC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,aAAA,EAAe,SAAS,CAAA;AAE1D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,SAAA,EAAW,OAAA,CAAQ,CAACA,MAAAA,KAAU;AAC5B,QAAA,OAAO,IAAA;AAAA,UACLA,MAAAA,CAAM,SAAA;AAAA,UACN,MAAA,CAAO,OAAA;AAAA,UACP,MAAA,CAAOA,MAAAA,CAAM,IAAA,IAAQ,WAAW;AAAA,SAClC;AAAA,MACF,CAAC;AAAA;AACH,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAgB,QAAA,EAAS,CAAA,EAC3C,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MessageThread.mjs","names":[],"sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n  PropsWithClassName &\n  FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n  const { children, className } = props;\n\n  const rootClassName = clsx(styles.messageThread, className);\n\n  const propsContext: PropsContext = {\n    Message: {\n      className: dynamic((props) => {\n        return clsx(\n          props.className,\n          styles.message,\n          styles[props.type ?? \"responder\"],\n        );\n      }),\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName}>{children}</div>\n    </PropsContextProvider>\n  );\n});\n\nexport default MessageThread;\n"],"mappings":";;;;;;;;;AAmBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAK,6BAAO,eAAe,UAAU;AAc3D,QACE,oBAAC,sBAAD;EAAsB,OAbW,EACjC,SAAS,EACP,WAAW,SAAS,UAAU;AAC5B,UAAO,KACL,MAAM,WACN,6BAAO,SACP,6BAAO,MAAM,QAAQ,aACtB;IACD,EACH,EACF;YAIG,oBAAC,OAAD;GAAK,WAAW;GAAgB;GAAe,CAAA;EAC1B,CAAA;EAEzB"}

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

@@ -0,0 +1,12 @@
+"use client"
+/* */
+var MessageThread_module_default = {
+	messageThread: "flow--message-thread",
+	message: "flow--message-thread--message",
+	responder: "flow--message-thread--responder",
+	sender: "flow--message-thread--sender"
+};
+//#endregion
+export { MessageThread_module_default as default };
+
+//# sourceMappingURL=MessageThread.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageThread.module.mjs","names":[],"sources":["../../../../../../../src/components/MessageThread/MessageThread.module.scss"],"sourcesContent":[".messageThread {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--message-thread--spacing);\n\n  .message {\n    &.responder {\n      padding-inline-end: var(--message-thread--indentation);\n    }\n\n    &.sender {\n      padding-inline-start: var(--message-thread--indentation);\n    }\n  }\n}\n"],"mappings":""}