@drivenets/design-system 0.0.3 → 0.0.5

package/dist/components/ds-dropdown-menu/ds-dropdown-menu.cjs

@@ -4,6 +4,7 @@ require('../ds-icon/index.cjs');
 const require_ds_typography = require('../ds-typography/ds-typography.cjs');
 const require_ds_dropdown_menu_module = require('./ds-dropdown-menu.module.cjs');
 const require_ds_text_input = require('../ds-text-input/ds-text-input.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -22,20 +23,60 @@ const DEFAULT_POSITIONING = {
 /**
 * Root component - manages dropdown state
 */
-const Root = ({ open, onOpenChange, onSelect, onHighlightChange, positioning: customPositioning, preventCloseOnSelect = false, children }) => {
-	const positioning = {
-		...DEFAULT_POSITIONING,
-		...customPositioning
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Root, {
-		open,
-		onOpenChange: (details) => onOpenChange?.(details.open),
-		onSelect: (details) => onSelect?.(details.value),
-		onHighlightChange: (details) => onHighlightChange?.(details.highlightedValue),
-		positioning,
-		closeOnSelect: !preventCloseOnSelect,
-		children
-	});
+const Root = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(16);
+	const { open, onOpenChange, onSelect, onHighlightChange, positioning: customPositioning, preventCloseOnSelect: t1, children } = t0;
+	const preventCloseOnSelect = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[0] !== customPositioning) {
+		t2 = {
+			...DEFAULT_POSITIONING,
+			...customPositioning
+		};
+		$[0] = customPositioning;
+		$[1] = t2;
+	} else t2 = $[1];
+	const positioning = t2;
+	let t3;
+	if ($[2] !== onOpenChange) {
+		t3 = (details) => onOpenChange?.(details.open);
+		$[2] = onOpenChange;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== onSelect) {
+		t4 = (details_0) => onSelect?.(details_0.value);
+		$[4] = onSelect;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== onHighlightChange) {
+		t5 = (details_1) => onHighlightChange?.(details_1.highlightedValue);
+		$[6] = onHighlightChange;
+		$[7] = t5;
+	} else t5 = $[7];
+	const t6 = !preventCloseOnSelect;
+	let t7;
+	if ($[8] !== children || $[9] !== open || $[10] !== positioning || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Root, {
+			open,
+			onOpenChange: t3,
+			onSelect: t4,
+			onHighlightChange: t5,
+			positioning,
+			closeOnSelect: t6,
+			children
+		});
+		$[8] = children;
+		$[9] = open;
+		$[10] = positioning;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
 };
 /**
 * Trigger component - wraps the trigger element
@@ -44,195 +85,494 @@ const Trigger = __ark_ui_react_menu.Menu.Trigger;
 /**
 * Content component - wraps the dropdown content
 */
-const Content = ({ disablePortal = false, children, className, style }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(disablePortal ? react.Fragment : __ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Content, {
-		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.content, className),
-		style,
-		children
-	}) }) });
+const Content = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(9);
+	const { disablePortal: t1, children, className, style } = t0;
+	const Wrapper = (t1 === void 0 ? false : t1) ? react.Fragment : __ark_ui_react_portal.Portal;
+	let t2;
+	if ($[0] !== className) {
+		t2 = (0, classnames.default)(require_ds_dropdown_menu_module.default.content, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== children || $[3] !== style || $[4] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Content, {
+			className: t2,
+			style,
+			children
+		}) });
+		$[2] = children;
+		$[3] = style;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== Wrapper || $[7] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, { children: t3 });
+		$[6] = Wrapper;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
 };
 /**
 * Item component - renders a menu item
 */
-const Item = ({ disabled, selected, value, asChild, onClick, onSelect, children, className, style }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Item, {
-		disabled,
-		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.item, { [require_ds_dropdown_menu_module.default.selected]: selected }, className),
-		style,
-		value,
-		asChild,
-		onClick,
-		onSelect,
-		children
-	});
+const Item = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(12);
+	const { disabled, selected, value, asChild, onClick, onSelect, children, className, style } = t0;
+	let t1;
+	if ($[0] !== className || $[1] !== selected) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.item, { [require_ds_dropdown_menu_module.default.selected]: selected }, className);
+		$[0] = className;
+		$[1] = selected;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== asChild || $[4] !== children || $[5] !== disabled || $[6] !== onClick || $[7] !== onSelect || $[8] !== style || $[9] !== t1 || $[10] !== value) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Item, {
+			disabled,
+			className: t1,
+			style,
+			value,
+			asChild,
+			onClick,
+			onSelect,
+			children
+		});
+		$[3] = asChild;
+		$[4] = children;
+		$[5] = disabled;
+		$[6] = onClick;
+		$[7] = onSelect;
+		$[8] = style;
+		$[9] = t1;
+		$[10] = value;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
 };
 /**
 * ItemIndicator component - renders a selection indicator (check icon by default)
 */
-const ItemIndicator = ({ children, className, style }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.indicator, className),
-		style,
-		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "check" })
-	});
+const ItemIndicator = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(8);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.indicator, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "check" });
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== style || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: t1,
+			style,
+			children: t2
+		});
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 };
 /**
 * Header component - sticky header container for search, filters, or other controls
 */
-const Header = ({ children, className, style }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.header, className),
-		style,
-		children
-	});
+const Header = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t1,
+			style,
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 };
 /**
 * Actions component - footer container for action buttons
 */
-const Actions = ({ children, className, style }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.actions, className),
-		style,
-		role: "menu",
-		"aria-label": "Menu actions",
-		children
-	});
+const Actions = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(6);
+	const { children, className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.actions, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: t1,
+			style,
+			role: "menu",
+			"aria-label": "Menu actions",
+			children
+		});
+		$[2] = children;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 };
 /**
 * ItemGroup component - collapsible group container
 */
-const ItemGroup = ({ children, collapsed: controlledCollapsed, onCollapsedChange, className, style }) => {
+const ItemGroup = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(16);
+	const { children, collapsed: controlledCollapsed, onCollapsedChange, className, style } = t0;
 	const [internalCollapsed, setInternalCollapsed] = (0, react.useState)(false);
 	const isControlled = controlledCollapsed !== void 0;
 	const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
-	const toggle = () => {
-		const newCollapsed = !collapsed;
-		if (!isControlled) setInternalCollapsed(newCollapsed);
-		onCollapsedChange?.(newCollapsed);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupContext.Provider, {
-		value: {
+	let t1;
+	if ($[0] !== collapsed || $[1] !== isControlled || $[2] !== onCollapsedChange) {
+		t1 = () => {
+			const newCollapsed = !collapsed;
+			if (!isControlled) setInternalCollapsed(newCollapsed);
+			onCollapsedChange?.(newCollapsed);
+		};
+		$[0] = collapsed;
+		$[1] = isControlled;
+		$[2] = onCollapsedChange;
+		$[3] = t1;
+	} else t1 = $[3];
+	const toggle = t1;
+	let t2;
+	if ($[4] !== collapsed || $[5] !== toggle) {
+		t2 = {
 			collapsed,
 			toggle
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroup, {
-			className: (0, classnames.default)(require_ds_dropdown_menu_module.default.group, className),
+		};
+		$[4] = collapsed;
+		$[5] = toggle;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== className) {
+		t3 = (0, classnames.default)(require_ds_dropdown_menu_module.default.group, className);
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== children || $[10] !== style || $[11] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroup, {
+			className: t3,
 			style,
 			children
-		})
-	});
+		});
+		$[9] = children;
+		$[10] = style;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t2 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupContext.Provider, {
+			value: t2,
+			children: t4
+		});
+		$[13] = t2;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
 };
 /**
 * ItemGroupLabel component - clickable group header with collapse indicator
 */
-const ItemGroupLabel = ({ children, className, style }) => {
+const ItemGroupLabel = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(22);
+	const { children, className, style } = t0;
 	const context = (0, react.useContext)(GroupContext);
-	if (!context) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroupLabel, {
-		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabel, className),
-		style,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-			variant: "body-sm-md",
-			children
-		})
-	});
-	const { collapsed, toggle } = context;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroupLabel, {
-		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabel, require_ds_dropdown_menu_module.default.groupLabelCollapsible, className),
-			style,
-			onClick: toggle,
-			onKeyDown: (e) => e.stopPropagation(),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+	if (!context) {
+		let t1$1;
+		if ($[0] !== className) {
+			t1$1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabel, className);
+			$[0] = className;
+			$[1] = t1$1;
+		} else t1$1 = $[1];
+		let t2$1;
+		if ($[2] !== children) {
+			t2$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
 				variant: "body-sm-md",
 				children
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-				icon: "keyboard_arrow_down",
-				className: (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabelIcon, { [require_ds_dropdown_menu_module.default.groupLabelIconRotated]: !collapsed })
-			})]
-		})
-	});
+			});
+			$[2] = children;
+			$[3] = t2$1;
+		} else t2$1 = $[3];
+		let t3$1;
+		if ($[4] !== style || $[5] !== t1$1 || $[6] !== t2$1) {
+			t3$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroupLabel, {
+				className: t1$1,
+				style,
+				children: t2$1
+			});
+			$[4] = style;
+			$[5] = t1$1;
+			$[6] = t2$1;
+			$[7] = t3$1;
+		} else t3$1 = $[7];
+		return t3$1;
+	}
+	const { collapsed, toggle } = context;
+	let t1;
+	if ($[8] !== className) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabel, require_ds_dropdown_menu_module.default.groupLabelCollapsible, className);
+		$[8] = className;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== children) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-sm-md",
+			children
+		});
+		$[10] = children;
+		$[11] = t2;
+	} else t2 = $[11];
+	const t3 = !collapsed;
+	let t4;
+	if ($[12] !== t3) {
+		t4 = (0, classnames.default)(require_ds_dropdown_menu_module.default.groupLabelIcon, { [require_ds_dropdown_menu_module.default.groupLabelIconRotated]: t3 });
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+			icon: "keyboard_arrow_down",
+			className: t4
+		});
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== style || $[17] !== t1 || $[18] !== t2 || $[19] !== t5 || $[20] !== toggle) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.ItemGroupLabel, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: t1,
+				style,
+				onClick: toggle,
+				onKeyDown: _temp,
+				children: [t2, t5]
+			})
+		});
+		$[16] = style;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t5;
+		$[20] = toggle;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
 };
 /**
 * ItemGroupContent component - collapsible content container
 */
-const ItemGroupContent = ({ children, className, style }) => {
+const ItemGroupContent = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(4);
+	const { children, className, style } = t0;
 	if ((0, react.useContext)(GroupContext)?.collapsed) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		style,
-		children
-	});
+	let t1;
+	if ($[0] !== children || $[1] !== className || $[2] !== style) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			style,
+			children
+		});
+		$[0] = children;
+		$[1] = className;
+		$[2] = style;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
 };
 /**
 * Separator component - renders a visual divider
 */
-const Separator = ({ className, style }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Separator, {
-		className: (0, classnames.default)(require_ds_dropdown_menu_module.default.separator, className),
-		style
-	});
+const Separator = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(5);
+	const { className, style } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = (0, classnames.default)(require_ds_dropdown_menu_module.default.separator, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== style || $[3] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_menu.Menu.Separator, {
+			className: t1,
+			style
+		});
+		$[2] = style;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 };
 /**
 * DEPRECATED: Legacy DsDropdownMenu component with options array
 * Use compound component pattern instead
 * @deprecated
 */
-const DsDropdownMenuLegacy = ({ options, children, contentGap = 0, className, style, align = "center", side = "bottom", disablePortal = false, disableSearch = true, selected, onSelect }) => {
+const DsDropdownMenuLegacy = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(34);
+	const { options, children, contentGap: t1, className, style, align: t2, side: t3, disablePortal: t4, disableSearch: t5, selected, onSelect } = t0;
+	const contentGap = t1 === void 0 ? 0 : t1;
+	const align = t2 === void 0 ? "center" : t2;
+	const side = t3 === void 0 ? "bottom" : t3;
+	const disablePortal = t4 === void 0 ? false : t4;
+	const disableSearch = t5 === void 0 ? true : t5;
 	const [open, setOpen] = (0, react.useState)(false);
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const Wrapper = disablePortal ? react.Fragment : __radix_ui_react_dropdown_menu.Portal;
-	const filteredOptions = disableSearch ? options : options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Root, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dropdown_menu.Trigger, {
+	let t6;
+	if ($[0] !== disableSearch || $[1] !== options || $[2] !== searchTerm) {
+		t6 = disableSearch ? options : options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+		$[0] = disableSearch;
+		$[1] = options;
+		$[2] = searchTerm;
+		$[3] = t6;
+	} else t6 = $[3];
+	const filteredOptions = t6;
+	let t7;
+	if ($[4] !== children) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dropdown_menu.Trigger, {
 			asChild: true,
 			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Content, {
-			className: (0, classnames.default)(require_ds_dropdown_menu_module.default.contentLegacy, require_ds_dropdown_menu_module.default.viewportLegacy),
-			sideOffset: contentGap,
-			align,
-			side,
-			children: [!disableSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_text_input.default, {
-				placeholder: "Search",
-				value: searchTerm,
-				onValueChange: setSearchTerm,
-				slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-					icon: "search",
-					size: "tiny"
-				}) },
-				onKeyDown: (e) => e.stopPropagation()
-			}), filteredOptions.map((option, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Item, {
-				disabled: option.disabled,
-				className: (0, classnames.default)(require_ds_dropdown_menu_module.default.itemLegacy, { [require_ds_dropdown_menu_module.default.selected]: selected === option.value }, className),
+		});
+		$[4] = children;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (0, classnames.default)(require_ds_dropdown_menu_module.default.contentLegacy, require_ds_dropdown_menu_module.default.viewportLegacy);
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] !== disableSearch || $[8] !== searchTerm) {
+		t9 = !disableSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_text_input.default, {
+			placeholder: "Search",
+			value: searchTerm,
+			onValueChange: setSearchTerm,
+			slots: { startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "search",
+				size: "tiny"
+			}) },
+			onKeyDown: _temp2
+		});
+		$[7] = disableSearch;
+		$[8] = searchTerm;
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== className || $[11] !== filteredOptions || $[12] !== onSelect || $[13] !== selected || $[14] !== style) {
+		let t11$1;
+		if ($[16] !== className || $[17] !== onSelect || $[18] !== selected || $[19] !== style) {
+			t11$1 = (option_0, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Item, {
+				disabled: option_0.disabled,
+				className: (0, classnames.default)(require_ds_dropdown_menu_module.default.itemLegacy, { [require_ds_dropdown_menu_module.default.selected]: selected === option_0.value }, className),
 				style,
-				onClick: (e) => {
-					e.stopPropagation();
-					if (!option.disabled) {
-						if (option.value) onSelect?.(option.value);
-						option.onClick?.(e);
+				onClick: (e_0) => {
+					e_0.stopPropagation();
+					if (!option_0.disabled) {
+						if (option_0.value) onSelect?.(option_0.value);
+						option_0.onClick?.(e_0);
 						setOpen(false);
 					}
 				},
 				children: [
-					option.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-						icon: option.icon,
+					option_0.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: option_0.icon,
 						className: require_ds_dropdown_menu_module.default.itemIcon
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: require_ds_dropdown_menu_module.default.label,
-						children: option.label
+						children: option_0.label
 					}),
-					option.value && selected === option.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					option_0.value && selected === option_0.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: require_ds_dropdown_menu_module.default.indicator,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "check" })
 					})
 				]
-			}, i))]
-		}) })]
-	});
+			}, i);
+			$[16] = className;
+			$[17] = onSelect;
+			$[18] = selected;
+			$[19] = style;
+			$[20] = t11$1;
+		} else t11$1 = $[20];
+		t10 = filteredOptions.map(t11$1);
+		$[10] = className;
+		$[11] = filteredOptions;
+		$[12] = onSelect;
+		$[13] = selected;
+		$[14] = style;
+		$[15] = t10;
+	} else t10 = $[15];
+	let t11;
+	if ($[21] !== align || $[22] !== contentGap || $[23] !== side || $[24] !== t10 || $[25] !== t9) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Content, {
+			className: t8,
+			sideOffset: contentGap,
+			align,
+			side,
+			children: [t9, t10]
+		});
+		$[21] = align;
+		$[22] = contentGap;
+		$[23] = side;
+		$[24] = t10;
+		$[25] = t9;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== Wrapper || $[28] !== t11) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, { children: t11 });
+		$[27] = Wrapper;
+		$[28] = t11;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== open || $[31] !== t12 || $[32] !== t7) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dropdown_menu.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [t7, t12]
+		});
+		$[30] = open;
+		$[31] = t12;
+		$[32] = t7;
+		$[33] = t13;
+	} else t13 = $[33];
+	return t13;
 };
 /**
 * Design system  DsDropdownMenu component
@@ -277,6 +617,12 @@ const DsDropdownMenu = {
 	ItemGroupContent,
 	Separator
 };
+function _temp(e) {
+	return e.stopPropagation();
+}
+function _temp2(e) {
+	return e.stopPropagation();
+}
 
 //#endregion
 exports.DsDropdownMenu = DsDropdownMenu;