@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/components/combobox-field/combobox.module.js

@@ -1,25 +1,25 @@
 import './combobox.css';// src/components/combobox-field/combobox.module.scss
-var control = "_control_ksvpl_3";
-var content = "_content_ksvpl_84";
-var trigger = "_trigger_ksvpl_99";
-var spokenValue = "_spokenValue_ksvpl_110";
-var icon = "_icon_ksvpl_118";
-var tags = "_tags_ksvpl_122";
-var tagList = "_tagList_ksvpl_125";
-var tag = "_tag_ksvpl_122";
-var tagRemove = "_tagRemove_ksvpl_242";
-var positioner = "_positioner_ksvpl_276";
-var popup = "_popup_ksvpl_290";
-var search = "_search_ksvpl_318";
-var statusArea = "_statusArea_ksvpl_394";
-var status = "_status_ksvpl_394";
-var empty = "_empty_ksvpl_404";
-var list = "_list_ksvpl_420";
-var option = "_option_ksvpl_428";
-var indicator = "_indicator_ksvpl_475";
-var checkbox = "_checkbox_ksvpl_480";
-var checkboxIndicator = "_checkboxIndicator_ksvpl_505";
-var optionText = "_optionText_ksvpl_531";
+var control = "_control_u8epf_3";
+var content = "_content_u8epf_84";
+var trigger = "_trigger_u8epf_99";
+var spokenValue = "_spokenValue_u8epf_110";
+var icon = "_icon_u8epf_118";
+var tags = "_tags_u8epf_122";
+var tagList = "_tagList_u8epf_125";
+var tag = "_tag_u8epf_122";
+var tagRemove = "_tagRemove_u8epf_242";
+var positioner = "_positioner_u8epf_276";
+var popup = "_popup_u8epf_290";
+var search = "_search_u8epf_318";
+var statusArea = "_statusArea_u8epf_394";
+var status = "_status_u8epf_394";
+var empty = "_empty_u8epf_404";
+var list = "_list_u8epf_420";
+var option = "_option_u8epf_428";
+var indicator = "_indicator_u8epf_475";
+var checkbox = "_checkbox_u8epf_480";
+var checkboxIndicator = "_checkboxIndicator_u8epf_505";
+var optionText = "_optionText_u8epf_534";
 var combobox_module_default = {
 	control,
 	content,

package/dist/components/combobox-field/index.d.ts

@@ -1,7 +1,6 @@
 export * from "./combobox.tsx";
 export * from "./combobox-field.tsx";
 export type { ComboboxItems, ItemQuery, PagedQuery, } from "./combobox-items.ts";
-export type { ComboboxPopupLabels } from "./combobox-popup-body.tsx";
 export type { ComboboxMode, ComboboxMultipleLabels, } from "./selection.ts";
 export * from "./tsf-combobox-field.tsx";
 export type { ItemLookup, ValueStateLabels, } from "./value-state.ts";

package/dist/components/combobox-field/selection.d.ts

@@ -1,4 +1,5 @@
-/** The copy a combobox shows only when it holds several values. */
+import type { ReactNode } from "react";
+/** The copy and the remove icon a combobox shows only when it holds several values. */
 export type ComboboxMultipleLabels = Readonly<{
     /** Names the group of tags, such as "Selected statuses". */
     selectedLabel: string;
@@ -6,6 +7,8 @@ export type ComboboxMultipleLabels = Readonly<{
     removeLabel: string;
     /** The remove control's tooltip for a value, such as "Remove Jan Jansen". */
     removeHint: (itemLabel: string) => string;
+    /** The remove control's icon, such as a cross. */
+    removeIcon: ReactNode;
 }>;
 /**
  * One value or several. The shape of `value`, `defaultValue` and

package/dist/components/combobox-field/value-state-view.css

@@ -1,16 +1,20 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._muted_1afap_3 {
+  ._muted_1bwba_3 {
     display: inline-flex;
     align-items: center;
     gap: var(--sys-unit-2);
     min-inline-size: 0;
     color: var(--combobox-unavailable-fg, var(--sys-color-text-muted));
   }
-  ._item_1afap_10 {
+  ._item_1bwba_10 {
     min-inline-size: 0;
   }
-  ._name_1afap_13 {
+  ._icon_1bwba_13 {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+  ._name_1bwba_17 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);

package/dist/components/combobox-field/value-state-view.d.ts

@@ -12,15 +12,17 @@ type ValueStateViewProps<TItem> = Readonly<{
     renderItem: (item: TItem) => ReactNode;
     itemLabel: (item: TItem) => string;
     labels: ValueStateLabels | undefined;
+    /** Marks an unavailable value, beside its label. */
+    icon?: ReactNode;
 }>;
 /**
  * One value as it shows in a tag or a trigger: its item, or the item muted and
  * marked unavailable, read as `valueStateName`.
  *
  * @example
- * <ValueStateView state={state} renderItem={renderItem} itemLabel={itemLabel} labels={labels} />
+ * <ValueStateView state={state} renderItem={renderItem} itemLabel={itemLabel} labels={labels} icon={<BlockIcon />} />
  */
-export declare const ValueStateView: <TItem>({ state, renderItem, itemLabel, labels, }: ValueStateViewProps<TItem>) => ReactNode;
+export declare const ValueStateView: <TItem>({ state, renderItem, itemLabel, labels, icon, }: ValueStateViewProps<TItem>) => ReactNode;
 /**
  * The polite status that sums up a field's values that are no longer
  * available. Mount it once per field, outside any popup.

package/dist/components/combobox-field/value-state-view.js

@@ -1,5 +1,3 @@
-import SvgBlock from "../../vendor/@material-design-icons/svg/outlined/block.js";
-import { Icon } from "../icon/icon.js";
 import value_state_view_module_default from "./value-state-view.module.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,13 +14,13 @@ var valueStateName = (state, itemLabel, labels) => state.status === "unavailable
 * marked unavailable, read as `valueStateName`.
 *
 * @example
-* <ValueStateView state={state} renderItem={renderItem} itemLabel={itemLabel} labels={labels} />
+* <ValueStateView state={state} renderItem={renderItem} itemLabel={itemLabel} labels={labels} icon={<BlockIcon />} />
 */
 var ValueStateView = (t0) => {
-	const $ = c(5);
-	const { state, renderItem, itemLabel, labels } = t0;
+	const $ = c(6);
+	const { state, renderItem, itemLabel, labels, icon } = t0;
 	let t1;
-	if ($[0] !== itemLabel || $[1] !== labels || $[2] !== renderItem || $[3] !== state) {
+	if ($[0] !== icon || $[1] !== itemLabel || $[2] !== labels || $[3] !== renderItem || $[4] !== state) {
 		t1 = state.status === "unavailable" && labels !== void 0 ? /* @__PURE__ */ jsxs("span", {
 			className: value_state_view_module_default.muted,
 			children: [
@@ -31,9 +29,10 @@ var ValueStateView = (t0) => {
 					className: value_state_view_module_default.item,
 					children: renderItem(state.item)
 				}),
-				/* @__PURE__ */ jsx(Icon, {
-					svg: SvgBlock,
-					label: ""
+				icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: value_state_view_module_default.icon,
+					children: icon
 				}),
 				/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
@@ -45,12 +44,13 @@ var ValueStateView = (t0) => {
 				})
 			]
 		}) : renderItem(state.item);
-		$[0] = itemLabel;
-		$[1] = labels;
-		$[2] = renderItem;
-		$[3] = state;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[0] = icon;
+		$[1] = itemLabel;
+		$[2] = labels;
+		$[3] = renderItem;
+		$[4] = state;
+		$[5] = t1;
+	} else t1 = $[5];
 	return t1;
 };
 /**

package/dist/components/combobox-field/value-state-view.module.js

@@ -1,10 +1,12 @@
 import './value-state-view.css';// src/components/combobox-field/value-state-view.module.scss
-var muted = "_muted_1afap_3";
-var item = "_item_1afap_10";
-var name = "_name_1afap_13";
+var muted = "_muted_1bwba_3";
+var item = "_item_1bwba_10";
+var icon = "_icon_1bwba_13";
+var name = "_name_1bwba_17";
 var value_state_view_module_default = {
 	muted,
 	item,
+	icon,
 	name
 };
-export { value_state_view_module_default as default, item, muted, name };
+export { value_state_view_module_default as default, icon, item, muted, name };

package/dist/components/composer/composer-attachments.d.ts

@@ -4,22 +4,30 @@ export type ComposerAttachButtonProps = Readonly<{
     label: string;
     /** The MIME types and extensions the file picker offers. */
     accept?: readonly string[];
+    /** The attach glyph. */
+    children: ReactNode;
+    className?: string;
 }>;
-/** An icon button that opens the file picker and stages what is picked. */
-export declare const ComposerAttachButton: ({ label, accept, }: ComposerAttachButtonProps) => ReactNode;
+/** An icon button, its children the glyph, that opens the file picker and stages what is picked. */
+export declare const ComposerAttachButton: ({ label, accept, children, className, }: ComposerAttachButtonProps) => ReactNode;
 export type ComposerAttachmentsProps = Readonly<{
     /** The tile list's accessible name, such as "Attachments". */
     label: string;
     /** Each tile's remove button's accessible name, such as "Remove". */
     removeLabel: string;
+    /** Each tile's remove glyph. */
+    removeIcon: ReactNode;
+    /** A tile's file-type glyph. Left out, a tile that is not an image shows only the file's extension. */
+    fileIcon?: ReactNode;
     /** A tile's tooltip, from the file's name and formatted size. */
     fileHint: (name: string, size: string) => string;
+    className?: string;
 }>;
 /**
  * The staged files as removable tiles. Removing the last one returns focus to
  * the editor. Renders nothing while no file is staged.
  */
-export declare const ComposerAttachments: ({ label, removeLabel, fileHint, }: ComposerAttachmentsProps) => ReactNode;
+export declare const ComposerAttachments: ({ label, removeLabel, removeIcon, fileIcon, fileHint, className, }: ComposerAttachmentsProps) => ReactNode;
 export type ComposerAttachmentsErrorProps = Readonly<{
     /** The alert, from the formatted `maxFileSize`, such as "Files over 5 MB must be removed before sending." */
     tooLargeError: (maxSize: string) => string;

package/dist/components/composer/composer-attachments.js

@@ -1,4 +1,3 @@
-import SvgAttachFile from "../../vendor/@material-design-icons/svg/outlined/attach_file.js";
 import { formatBytes } from "../../lib/format-bytes.js";
 import { AttachmentTile } from "../attachment-tile/attachment-tile.js";
 import { Button as Button$1 } from "../button/button.js";
@@ -6,14 +5,15 @@ import { useLocale } from "../locale-provider/locale-provider.js";
 import { useComposerContext } from "./composer.context.js";
 import composer_module_default from "./composer.module.js";
 import { c } from "react/compiler-runtime";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { Button, FileTrigger, TagGroup, TagList } from "react-aria-components";
 // src/components/composer/composer-attachments.tsx
 var isOversized = (file, maxFileSize) => maxFileSize !== void 0 && file.size > maxFileSize;
-/** An icon button that opens the file picker and stages what is picked. */
+/** An icon button, its children the glyph, that opens the file picker and stages what is picked. */
 var ComposerAttachButton = (t0) => {
-	const $ = c(12);
-	const { label, accept } = t0;
+	const $ = c(14);
+	const { label, accept, children, className } = t0;
 	const { addFiles, disabled } = useComposerContext();
 	let t1;
 	if ($[0] !== addFiles) {
@@ -30,34 +30,37 @@ var ComposerAttachButton = (t0) => {
 		$[3] = t2;
 	} else t2 = $[3];
 	let t3;
-	if ($[4] !== disabled || $[5] !== label || $[6] !== t2) {
+	if ($[4] !== children || $[5] !== className || $[6] !== disabled || $[7] !== label || $[8] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Button$1, {
+			className,
 			variant: "tertiary",
 			size: "md",
 			iconOnly: true,
-			icon: SvgAttachFile,
+			icon: children,
 			disabled,
 			label,
 			render: t2
 		});
-		$[4] = disabled;
-		$[5] = label;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[4] = children;
+		$[5] = className;
+		$[6] = disabled;
+		$[7] = label;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[8] !== accept || $[9] !== t1 || $[10] !== t3) {
+	if ($[10] !== accept || $[11] !== t1 || $[12] !== t3) {
 		t4 = /* @__PURE__ */ jsx(FileTrigger, {
 			allowsMultiple: true,
 			acceptedFileTypes: accept,
 			onSelect: t1,
 			children: t3
 		});
-		$[8] = accept;
-		$[9] = t1;
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[10] = accept;
+		$[11] = t1;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
 	return t4;
 };
 /**
@@ -65,8 +68,8 @@ var ComposerAttachButton = (t0) => {
 * the editor. Renders nothing while no file is staged.
 */
 var ComposerAttachments = (t0) => {
-	const $ = c(17);
-	const { label, removeLabel, fileHint } = t0;
+	const $ = c(22);
+	const { label, removeLabel, removeIcon, fileIcon, fileHint, className } = t0;
 	const locale = useLocale();
 	const { attachments, removeAttachment, focusEditor, disabled, maxFileSize } = useComposerContext();
 	if (attachments.length === 0) return null;
@@ -84,46 +87,57 @@ var ComposerAttachments = (t0) => {
 	} else t1 = $[3];
 	const remove = t1;
 	let t2;
-	if ($[4] !== disabled || $[5] !== fileHint || $[6] !== locale || $[7] !== maxFileSize || $[8] !== removeLabel) {
-		t2 = (attachment_1) => /* @__PURE__ */ jsx(AttachmentTile, {
+	if ($[4] !== className) {
+		t2 = clsx(composer_module_default.attachments, className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== disabled || $[7] !== fileHint || $[8] !== fileIcon || $[9] !== locale || $[10] !== maxFileSize || $[11] !== removeIcon || $[12] !== removeLabel) {
+		t3 = (attachment_1) => /* @__PURE__ */ jsx(AttachmentTile, {
 			id: attachment_1.id,
 			file: attachment_1.file,
 			hint: fileHint(attachment_1.file.name, formatBytes(attachment_1.file.size, locale)),
 			removeLabel,
+			removeIcon,
+			icon: fileIcon,
 			invalid: isOversized(attachment_1.file, maxFileSize),
 			disabled
 		});
-		$[4] = disabled;
-		$[5] = fileHint;
-		$[6] = locale;
-		$[7] = maxFileSize;
-		$[8] = removeLabel;
-		$[9] = t2;
-	} else t2 = $[9];
-	let t3;
-	if ($[10] !== attachments || $[11] !== t2) {
-		t3 = /* @__PURE__ */ jsx(TagList, {
+		$[6] = disabled;
+		$[7] = fileHint;
+		$[8] = fileIcon;
+		$[9] = locale;
+		$[10] = maxFileSize;
+		$[11] = removeIcon;
+		$[12] = removeLabel;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== attachments || $[15] !== t2 || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsx(TagList, {
 			items: attachments,
-			className: composer_module_default.attachments,
-			children: t2
+			className: t2,
+			children: t3
 		});
-		$[10] = attachments;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
-	let t4;
-	if ($[13] !== label || $[14] !== remove || $[15] !== t3) {
-		t4 = /* @__PURE__ */ jsx(TagGroup, {
+		$[14] = attachments;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== label || $[19] !== remove || $[20] !== t4) {
+		t5 = /* @__PURE__ */ jsx(TagGroup, {
 			"aria-label": label,
 			onRemove: remove,
-			children: t3
+			children: t4
 		});
-		$[13] = label;
-		$[14] = remove;
-		$[15] = t3;
-		$[16] = t4;
-	} else t4 = $[16];
-	return t4;
+		$[18] = label;
+		$[19] = remove;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
+	return t5;
 };
 /**
 * An alert while any staged file is over `maxFileSize`. Renders nothing while

package/dist/components/composer/composer-editor.d.ts

@@ -10,6 +10,7 @@ export type ComposerEditorProps = Readonly<{
     maxLines?: number;
     /** Editor plugins, such as `Composer.Mentions`. */
     children?: ReactNode;
+    className?: string;
 }>;
 /** The composer's plain-text editor, with mentions and Enter to send. */
-export declare const ComposerEditor: ({ label, placeholder, minLines, maxLines, children, }: ComposerEditorProps) => ReactNode;
+export declare const ComposerEditor: ({ label, placeholder, minLines, maxLines, children, className, }: ComposerEditorProps) => ReactNode;

package/dist/components/composer/composer-editor.js

@@ -4,8 +4,9 @@ import { EditorBehaviorPlugin } from "./editor-behavior.js";
 import { $createMentionNode, MentionExtension } from "./mention-node.js";
 import { parseMentionString } from "./mention-text.js";
 import { c } from "react/compiler-runtime";
-import { useId, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
 import { HistoryExtension } from "@lexical/history";
 import { PlainTextExtension } from "@lexical/plain-text";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -31,8 +32,8 @@ var seedEditorState = (value) => () => {
 };
 /** The composer's plain-text editor, with mentions and Enter to send. */
 var ComposerEditor = (t0) => {
-	const $ = c(31);
-	const { label, placeholder, minLines: t1, maxLines, children } = t0;
+	const $ = c(34);
+	const { label, placeholder, minLines: t1, maxLines, children, className } = t0;
 	const minLines = t1 === void 0 ? 3 : t1;
 	const { value, initialValue, disabled, setValue, mentionsListboxId, mentionsOpen, mentionsActiveOptionId } = useComposerContext();
 	const placeholderId = useId();
@@ -56,20 +57,26 @@ var ComposerEditor = (t0) => {
 	} else t2 = $[2];
 	const [extension] = useState(t2);
 	let t3;
-	if ($[3] !== maxLines || $[4] !== minLines) {
-		t3 = {
+	if ($[3] !== className) {
+		t3 = clsx(composer_editor_module_default.editor, className);
+		$[3] = className;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== maxLines || $[6] !== minLines) {
+		t4 = {
 			"--composer-min-lines": minLines,
 			"--composer-max-lines": maxLines
 		};
-		$[3] = maxLines;
-		$[4] = minLines;
-		$[5] = t3;
-	} else t3 = $[5];
-	const t4 = placeholder === void 0 ? void 0 : placeholderId;
-	const t5 = disabled || void 0;
-	let t6;
-	if ($[6] !== mentionsActiveOptionId || $[7] !== mentionsListboxId || $[8] !== mentionsOpen) {
-		t6 = mentionsListboxId === null ? {
+		$[5] = maxLines;
+		$[6] = minLines;
+		$[7] = t4;
+	} else t4 = $[7];
+	const t5 = placeholder === void 0 ? void 0 : placeholderId;
+	const t6 = disabled || void 0;
+	let t7;
+	if ($[8] !== mentionsActiveOptionId || $[9] !== mentionsListboxId || $[10] !== mentionsOpen) {
+		t7 = mentionsListboxId === null ? {
 			role: "textbox",
 			"aria-autocomplete": "none"
 		} : {
@@ -78,86 +85,87 @@ var ComposerEditor = (t0) => {
 			"aria-expanded": mentionsOpen,
 			"aria-activedescendant": mentionsActiveOptionId ?? void 0
 		};
-		$[6] = mentionsActiveOptionId;
-		$[7] = mentionsListboxId;
-		$[8] = mentionsOpen;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== label || $[11] !== t4 || $[12] !== t5 || $[13] !== t6) {
-		t7 = /* @__PURE__ */ jsx(ContentEditable, {
+		$[8] = mentionsActiveOptionId;
+		$[9] = mentionsListboxId;
+		$[10] = mentionsOpen;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== label || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ContentEditable, {
 			className: composer_editor_module_default.content,
 			"aria-label": label,
-			"aria-describedby": t4,
-			"aria-disabled": t5,
-			...t6
+			"aria-describedby": t5,
+			"aria-disabled": t6,
+			...t7
 		});
-		$[10] = label;
-		$[11] = t4;
-		$[12] = t5;
-		$[13] = t6;
-		$[14] = t7;
-	} else t7 = $[14];
-	let t8;
-	if ($[15] !== placeholder || $[16] !== placeholderId || $[17] !== value) {
-		t8 = placeholder === void 0 ? null : /* @__PURE__ */ jsx("div", {
+		$[12] = label;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== placeholder || $[18] !== placeholderId || $[19] !== value) {
+		t9 = placeholder === void 0 ? null : /* @__PURE__ */ jsx("div", {
 			id: placeholderId,
 			className: composer_editor_module_default.placeholder,
 			hidden: value !== "",
 			"aria-hidden": "true",
 			children: placeholder
 		});
-		$[15] = placeholder;
-		$[16] = placeholderId;
-		$[17] = value;
-		$[18] = t8;
-	} else t8 = $[18];
-	let t9;
-	if ($[19] !== setValue) {
-		t9 = /* @__PURE__ */ jsx(OnChangePlugin, {
-			ignoreSelectionChange: true,
-			onChange: (editorState) => editorState.read(() => setValue($getRoot().getTextContent()))
-		});
-		$[19] = setValue;
+		$[17] = placeholder;
+		$[18] = placeholderId;
+		$[19] = value;
 		$[20] = t9;
 	} else t9 = $[20];
 	let t10;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(EditorBehaviorPlugin, {});
-		$[21] = t10;
-	} else t10 = $[21];
+	if ($[21] !== setValue) {
+		t10 = /* @__PURE__ */ jsx(OnChangePlugin, {
+			ignoreSelectionChange: true,
+			onChange: (editorState) => editorState.read(() => setValue($getRoot().getTextContent()))
+		});
+		$[21] = setValue;
+		$[22] = t10;
+	} else t10 = $[22];
 	let t11;
-	if ($[22] !== children || $[23] !== t3 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
-		t11 = /* @__PURE__ */ jsxs("div", {
-			className: composer_editor_module_default.editor,
-			style: t3,
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(EditorBehaviorPlugin, {});
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== children || $[25] !== t10 || $[26] !== t3 || $[27] !== t4 || $[28] !== t8 || $[29] !== t9) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			style: t4,
 			children: [
-				t7,
 				t8,
 				t9,
 				t10,
+				t11,
 				children
 			]
 		});
-		$[22] = children;
-		$[23] = t3;
-		$[24] = t7;
-		$[25] = t8;
-		$[26] = t9;
-		$[27] = t11;
-	} else t11 = $[27];
-	let t12;
-	if ($[28] !== extension || $[29] !== t11) {
-		t12 = /* @__PURE__ */ jsx(LexicalExtensionComposer, {
+		$[24] = children;
+		$[25] = t10;
+		$[26] = t3;
+		$[27] = t4;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== extension || $[32] !== t12) {
+		t13 = /* @__PURE__ */ jsx(LexicalExtensionComposer, {
 			extension,
 			contentEditable: null,
-			children: t11
+			children: t12
 		});
-		$[28] = extension;
-		$[29] = t11;
-		$[30] = t12;
-	} else t12 = $[30];
-	return t12;
+		$[31] = extension;
+		$[32] = t12;
+		$[33] = t13;
+	} else t13 = $[33];
+	return t13;
 };
 function _temp(error) {
 	throw error;

package/dist/components/composer/composer-mentions.js

@@ -2,8 +2,8 @@ import { useComposerContext } from "./composer.context.js";
 import composer_editor_module_default from "./composer-editor.module.js";
 import { $createMentionNode } from "./mention-node.js";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useId, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { $createTextNode, $insertNodes } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
@@ -138,7 +138,7 @@ var MentionMenu = (t0) => {
 	} else t10 = $[28];
 	let t11;
 	if ($[29] !== t10 || $[30] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t9, t10] });
+		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t9, t10] });
 		$[29] = t10;
 		$[30] = t9;
 		$[31] = t11;