@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/overlays/context-menu/context-menu.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useListNavigation } from "../_internal/use-list-navigation.mjs";
+import { useOpenContext, usePopoverContext } from "../popover/hooks.mjs";
+import { Popover } from "../popover/index.mjs";
+import { MenuContextProvider } from "../dropdown-menu/hooks.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/context-menu/context-menu.tsx
+const [ContextMenuProvider, useContextMenu] = createSafeContext("useContextMenu must be used within a ContextMenu.Root");
+const Root = ({ children, isOpen, defaultOpen, onChange }) => /* @__PURE__ */ jsx(Popover.Root, {
+	defaultOpen,
+	isOpen,
+	onChange,
+	placement: "bottom-start",
+	role: "menu",
+	children: /* @__PURE__ */ jsx(MenuRoot, { children })
+});
+const MenuRoot = ({ children }) => {
+	const { isOpen, onOpen, onClose } = useOpenContext();
+	const { setTriggerRef } = usePopoverContext();
+	const [point, setPoint] = useState({
+		x: 0,
+		y: 0
+	});
+	const returnFocusRef = useRef(null);
+	const [activeId, setActiveId] = useState(null);
+	const nav = useListNavigation({
+		open: isOpen,
+		activeId,
+		setActiveId,
+		loop: true
+	});
+	const wasOpenRef = useRef(false);
+	useEffect(() => {
+		const wasOpen = wasOpenRef.current;
+		wasOpenRef.current = isOpen;
+		if (!wasOpen || isOpen) return;
+		const active = document.activeElement;
+		if (active === null || active === document.body || active.closest("[role=\"menu\"]") !== null) returnFocusRef.current?.focus();
+	}, [isOpen]);
+	const openAt = useCallback((next, returnFocusTo) => {
+		returnFocusRef.current = returnFocusTo;
+		setPoint(next);
+		onOpen();
+	}, [onOpen]);
+	const contextValue = useMemo(() => ({ openAt }), [openAt]);
+	return /* @__PURE__ */ jsx(ContextMenuProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(MenuContextProvider, {
+			value: {
+				...nav,
+				closeRoot: onClose
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				ref: setTriggerRef,
+				style: {
+					position: "fixed",
+					left: point.x,
+					top: point.y
+				}
+			}), children]
+		})
+	});
+};
+const Trigger = ({ renderItem }) => {
+	const { openAt } = useContextMenu();
+	return renderItem({ onContextMenu: (event) => {
+		event.preventDefault();
+		const active = document.activeElement;
+		openAt({
+			x: event.clientX,
+			y: event.clientY
+		}, active instanceof HTMLElement ? active : null);
+	} });
+};
+//#endregion
+export { Root, Trigger };

package/dist/components/overlays/context-menu/index.d.mts

@@ -0,0 +1,21 @@
+import { ItemProps } from "../dropdown-menu/dropdown-menu.mjs";
+import { SubMenuProps } from "../dropdown-menu/sub-menu.mjs";
+//#region src/components/overlays/context-menu/index.d.ts
+export declare const ContextMenu: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+  }>>;
+  readonly Trigger: import("react").FC<{
+    renderItem: (props: {
+      onContextMenu: import("react").MouseEventHandler<HTMLElement>;
+    }) => import("react").ReactElement;
+  }>;
+  readonly Content: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+  readonly Item: import("react").FC<ItemProps>;
+  readonly SubMenu: import("react").FC<SubMenuProps>;
+};
+//#endregion

package/dist/components/overlays/context-menu/index.mjs

@@ -0,0 +1,13 @@
+import { Content, Item } from "../dropdown-menu/dropdown-menu.mjs";
+import { SubMenu } from "../dropdown-menu/sub-menu.mjs";
+import { Root, Trigger } from "./context-menu.mjs";
+//#region src/components/overlays/context-menu/index.ts
+const ContextMenu = {
+	Root,
+	Trigger,
+	Content,
+	Item,
+	SubMenu
+};
+//#endregion
+export { ContextMenu };

package/dist/components/overlays/dialog/dialog.css

@@ -0,0 +1,31 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._03QP4a_root {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-raised);
+    width: 100%;
+    box-shadow: var(--shadow-md);
+    position: relative;
+  }
+
+  ._03QP4a_header {
+    padding: calc(var(--spacing) * 4);
+    padding-bottom: calc(var(--spacing) * 2);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  ._03QP4a_close {
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 2);
+    position: absolute;
+  }
+
+  ._03QP4a_content {
+    padding: calc(var(--spacing) * 4);
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/dialog/dialog.d.mts

@@ -1,19 +1,14 @@
 import { FC, PropsWithChildren, ReactNode, Ref } from "react";
 //#region src/components/overlays/dialog/dialog.d.ts
-declare const Dialog: {
-  readonly Root: FC<PropsWithChildren<{
-    ref?: Ref<HTMLElement> | undefined;
-    id?: string | undefined;
-    tabIndex?: number | undefined;
-    role?: 'dialog' | 'alertdialog' | undefined;
-  }>>;
-  readonly Header: FC<{
-    title: ReactNode;
-    onClose: () => void;
-  }>;
-  readonly Content: FC<{
-    children?: ReactNode | undefined;
-  }>;
-};
-//#endregion
-export { Dialog };
+export declare const Root: FC<PropsWithChildren<{
+  ref?: Ref<HTMLElement> | undefined;
+  id?: string | undefined;
+  tabIndex?: number | undefined;
+  role?: 'dialog' | 'alertdialog' | undefined;
+}>>;
+export declare const Header: FC<{
+  title: ReactNode;
+  onClose: () => void;
+}>;
+export declare const Content: FC<PropsWithChildren>;
+//#endregion

package/dist/components/overlays/dialog/dialog.mjs

@@ -1,10 +1,13 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { CloseIcon } from "../../icons/lucide.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { useModalDialogContext } from "../_internal/modal-dialog-context.mjs";
+import dialog_module_default from "./dialog.module.mjs";
+import { clsx } from "clsx";
 import { useEffect, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/dialog/dialog.tsx
@@ -33,7 +36,7 @@ const Root = ({ ref, id, children, tabIndex, role }) => {
 	return /* @__PURE__ */ jsx("section", {
 		"aria-describedby": describedBy,
 		"aria-labelledby": labelledBy,
-		className: "bg-bg-raised relative w-full rounded-lg shadow-md",
+		className: clsx(dialog_module_default.root, high_contrast_module_default.edge),
 		id,
 		ref,
 		role: resolvedRole,
@@ -45,16 +48,16 @@ const Root = ({ ref, id, children, tabIndex, role }) => {
 	});
 };
 const Header = ({ title, onClose }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const { rootId } = useDialogContext();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-center p-4 pb-2",
+		className: dialog_module_default.header,
 		children: [/* @__PURE__ */ jsx(Heading, {
 			id: `${rootId}-title`,
 			level: "h3",
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
-			className: "absolute top-2 right-2",
+			className: dialog_module_default.close,
 			children: /* @__PURE__ */ jsx(IconButton, {
 				label: messages.close,
 				onClick: (e) => {
@@ -70,7 +73,7 @@ const Header = ({ title, onClose }) => {
 const Content = ({ children }) => {
 	const { rootId } = useDialogContext();
 	return /* @__PURE__ */ jsx("div", {
-		className: "p-4",
+		className: dialog_module_default.content,
 		id: `${rootId}-content`,
 		onClick: (e) => {
 			e.stopPropagation();
@@ -78,10 +81,5 @@ const Content = ({ children }) => {
 		children
 	});
 };
-const Dialog = {
-	Root,
-	Header,
-	Content
-};
 //#endregion
-export { Dialog };
+export { Content, Header, Root };

package/dist/components/overlays/dialog/dialog.module.mjs

@@ -0,0 +1,10 @@
+import './dialog.css';
+//#region src/components/overlays/dialog/dialog.module.css
+var dialog_module_default = {
+	"close": "_03QP4a_close",
+	"content": "_03QP4a_content",
+	"header": "_03QP4a_header",
+	"root": "_03QP4a_root"
+};
+//#endregion
+export { dialog_module_default as default };

package/dist/components/overlays/dialog/index.d.mts

@@ -1,2 +1,17 @@
-import { Dialog } from "./dialog.mjs";
-export { Dialog };
+//#region src/components/overlays/dialog/index.d.ts
+export declare const Dialog: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    ref?: import("react").Ref<HTMLElement> | undefined;
+    id?: string | undefined;
+    tabIndex?: number | undefined;
+    role?: 'dialog' | 'alertdialog' | undefined;
+  }>>;
+  readonly Header: import("react").FC<{
+    title: import("react").ReactNode;
+    onClose: () => void;
+  }>;
+  readonly Content: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+};
+//#endregion

package/dist/components/overlays/dialog/index.mjs

@@ -1,2 +1,9 @@
-import { Dialog } from "./dialog.mjs";
+import { Content, Header, Root } from "./dialog.mjs";
+//#region src/components/overlays/dialog/index.ts
+const Dialog = {
+	Root,
+	Header,
+	Content
+};
+//#endregion
 export { Dialog };

package/dist/components/overlays/drawer/drawer.css

@@ -0,0 +1,48 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._5lYcFq_root {
+    flex-direction: column;
+    height: 100%;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      flex-direction: row;
+    }
+  }
+
+  ._5lYcFq_header {
+    padding: calc(var(--spacing) * 4);
+    padding-bottom: calc(var(--spacing) * 2);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  ._5lYcFq_title {
+    display: contents;
+  }
+
+  ._5lYcFq_close {
+    top: calc(var(--spacing) * 2);
+    position: absolute;
+  }
+
+  ._5lYcFq_closeLeft {
+    left: calc(var(--spacing) * 2);
+  }
+
+  ._5lYcFq_closeRight {
+    right: calc(var(--spacing) * 2);
+  }
+
+  ._5lYcFq_content {
+    overscroll-behavior: contain;
+    padding: calc(var(--spacing) * 4);
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/drawer/drawer.d.mts

@@ -1,12 +1,11 @@
 import { DrawerSide } from "../../../types/variables.mjs";
 import { FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/overlays/drawer/drawer.d.ts
-declare const Drawer: FC<PropsWithChildren<{
+export declare const Drawer: FC<PropsWithChildren<{
   title: ReactNode;
   isOpen?: boolean;
   defaultOpen?: boolean;
   onClose?: () => void;
   side?: DrawerSide;
 }>>;
-//#endregion
-export { Drawer };
+//#endregion

package/dist/components/overlays/drawer/drawer.mjs

@@ -1,15 +1,16 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
-import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { Modal } from "../modal/modal.mjs";
+import drawer_module_default from "./drawer.module.mjs";
+import { clsx } from "clsx";
 import { useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/drawer/drawer.tsx
 const Drawer = ({ title, isOpen, defaultOpen, onClose, side = "right", children }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const rootId = useId();
 	const dialogRef = useRef(null);
 	return /* @__PURE__ */ jsx(Modal, {
@@ -21,32 +22,32 @@ const Drawer = ({ title, isOpen, defaultOpen, onClose, side = "right", children
 		ref: dialogRef,
 		side,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "vertical:flex-row flex h-full flex-col",
+			className: drawer_module_default.root,
 			id: rootId,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center justify-center p-4 pb-2",
+				className: drawer_module_default.header,
 				children: [typeof title === "string" ? /* @__PURE__ */ jsx(Heading, {
 					id: `${rootId}-title`,
 					level: "h3",
 					children: title
 				}) : /* @__PURE__ */ jsx("div", {
-					className: "contents",
+					className: drawer_module_default.title,
 					id: `${rootId}-title`,
 					children: title
 				}), /* @__PURE__ */ jsx("div", {
-					className: cn("absolute top-2", side === "left" ? "left-2" : "right-2"),
+					className: clsx(drawer_module_default.close, side === "left" ? drawer_module_default.closeLeft : drawer_module_default.closeRight),
 					children: /* @__PURE__ */ jsx(IconButton, {
 						label: messages.close,
 						onClick: (e) => {
 							e.stopPropagation();
-							dialogRef.current?.close();
+							if (dialogRef.current) dialogRef.current.close();
 						},
 						tooltipDisabled: true,
 						children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
 					})
 				})]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "flex-1 overflow-y-auto overscroll-contain p-4",
+				className: drawer_module_default.content,
 				id: `${rootId}-content`,
 				onClick: (e) => {
 					e.stopPropagation();

package/dist/components/overlays/drawer/drawer.module.mjs

@@ -0,0 +1,13 @@
+import './drawer.css';
+//#region src/components/overlays/drawer/drawer.module.css
+var drawer_module_default = {
+	"close": "_5lYcFq_close",
+	"closeLeft": "_5lYcFq_closeLeft",
+	"closeRight": "_5lYcFq_closeRight",
+	"content": "_5lYcFq_content",
+	"header": "_5lYcFq_header",
+	"root": "_5lYcFq_root",
+	"title": "_5lYcFq_title"
+};
+//#endregion
+export { drawer_module_default as default };

package/dist/components/overlays/dropdown-menu/dropdown-menu.d.mts

@@ -1,34 +1,27 @@
 import { Button } from "../../buttons/button/button.mjs";
 import "../../buttons/button/index.mjs";
 import { Placement } from "../../../types/variables.mjs";
-import { SubMenuProps } from "./sub-menu.mjs";
 import { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/overlays/dropdown-menu/dropdown-menu.d.ts
-type ItemProps = {
+export declare const Root: FC<PropsWithChildren<{
+  placement?: Placement;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+}>>;
+export declare const Content: FC<PropsWithChildren>;
+export type ItemProps = {
   onAction: () => void;
   label: string;
 };
-declare const DropdownMenu: {
-  readonly Root: FC<PropsWithChildren<{
-    placement?: Placement;
-    isOpen?: boolean;
-    defaultOpen?: boolean;
-    onChange?: (isOpen: boolean) => void;
-  }>>;
-  readonly Content: FC<{
-    children?: ReactNode | undefined;
-  }>;
-  readonly Item: FC<ItemProps>;
-  readonly SubMenu: FC<SubMenuProps>;
-  readonly Trigger: FC<{
-    label: string;
-    size?: ComponentProps<typeof Button>['size'];
-    variant?: ComponentProps<typeof Button>['variant'];
-  }>;
-  readonly IconTrigger: FC<{
-    icon: ReactNode;
-    label: string;
-  }>;
-};
-//#endregion
-export { DropdownMenu };
+export declare const Item: FC<ItemProps>;
+export declare const Trigger: FC<{
+  label: string;
+  size?: ComponentProps<typeof Button>['size'];
+  variant?: ComponentProps<typeof Button>['variant'];
+}>;
+export declare const IconTrigger: FC<{
+  icon: ReactNode;
+  label: string;
+}>;
+//#endregion

package/dist/components/overlays/dropdown-menu/dropdown-menu.mjs

@@ -1,14 +1,13 @@
 "use client";
 import { Button } from "../../buttons/button/button.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
-import { Popover } from "../popover/popover.mjs";
+import { Popover } from "../popover/index.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { ChevronIcon } from "../../icons/lucide.mjs";
 import { MenuContextProvider, useMenuContent, useMenuItem } from "./hooks.mjs";
-import { cloneWithIndex, itemClass, panelClass } from "./shared.mjs";
-import { SubMenu } from "./sub-menu.mjs";
-import { useState } from "react";
+import { itemClass, panelClass } from "./shared.mjs";
+import { useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/dropdown-menu/dropdown-menu.tsx
 const Root = ({ children, placement = "bottom-start", isOpen, defaultOpen, onChange }) => /* @__PURE__ */ jsx(Popover.Root, {
@@ -21,11 +20,11 @@ const Root = ({ children, placement = "bottom-start", isOpen, defaultOpen, onCha
 });
 const MenuProvider = ({ children }) => {
 	const { isOpen, onClose } = useOpenContext();
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeId, setActiveId] = useState(null);
 	const nav = useListNavigation({
 		open: isOpen,
-		activeIndex,
-		setActiveIndex,
+		activeId,
+		setActiveId,
 		loop: true
 	});
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
@@ -42,13 +41,14 @@ const Content = ({ children }) => {
 		...props,
 		...contentProps,
 		className: panelClass,
-		children: cloneWithIndex(children)
+		children
 	}) });
 };
-const Item = ({ label, onAction, index = 0 }) => {
+const Item = ({ label, onAction }) => {
+	const id = useId();
 	const props = useMenuItem({
 		onAction,
-		index
+		id
 	});
 	return /* @__PURE__ */ jsx("button", {
 		className: itemClass,
@@ -73,13 +73,5 @@ const IconTrigger = ({ icon, label }) => /* @__PURE__ */ jsx(Popover.Trigger, {
 	...props,
 	children: icon
 }) });
-const DropdownMenu = {
-	Root,
-	Content,
-	Item,
-	SubMenu,
-	Trigger,
-	IconTrigger
-};
 //#endregion
-export { DropdownMenu };
+export { Content, IconTrigger, Item, Root, Trigger };

package/dist/components/overlays/dropdown-menu/hooks.d.mts

@@ -4,21 +4,21 @@ import "../_internal/index.mjs";
 type MenuContext = ListNavigation & {
   closeRoot: () => void;
 };
-declare const MenuContextProvider: import("react").Context<MenuContext | null>, useMenuContext: () => MenuContext;
-declare const useMenuContent: () => {
+export declare const MenuContextProvider: import("react").Context<MenuContext | null>, useMenuContext: () => MenuContext;
+export declare const useMenuContent: () => {
   contentProps: {
     onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
   };
 };
-declare const useMenuItem: ({ onAction, index }: {
+export declare const useMenuItem: ({ onAction, id }: {
   onAction: () => void;
-  index: number;
+  id: string;
 }) => {
-  ref: (node: HTMLElement | null) => void;
+  id: string;
+  ref: (node: HTMLElement | null) => (() => void) | undefined;
   tabIndex: number;
   onFocus: () => void;
   role: 'menuitem';
   onClick: () => void;
 };
-//#endregion
-export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem };
+//#endregion

package/dist/components/overlays/dropdown-menu/hooks.mjs

@@ -7,17 +7,17 @@ const useMenuContent = () => {
 	const menu = useMenuContext();
 	return useMemo(() => ({ contentProps: menu.getContentProps() }), [menu]);
 };
-const useMenuItem = ({ onAction, index }) => {
+const useMenuItem = ({ onAction, id }) => {
 	const menu = useMenuContext();
 	return useMemo(() => ({
 		role: "menuitem",
-		...menu.getItemProps(index),
+		...menu.getItemProps(id),
 		onClick: () => {
 			onAction();
 			menu.closeRoot();
 		}
 	}), [
-		index,
+		id,
 		menu,
 		onAction
 	]);

package/dist/components/overlays/dropdown-menu/index.d.mts

@@ -1,2 +1,30 @@
-import { DropdownMenu } from "./dropdown-menu.mjs";
-export { DropdownMenu };
+import { Button } from "../../buttons/button/button.mjs";
+import { Placement } from "../../../types/variables.mjs";
+import { ItemProps } from "./dropdown-menu.mjs";
+import { SubMenuProps } from "./sub-menu.mjs";
+import "../../index.mjs";
+import "../../../index.mjs";
+//#region src/components/overlays/dropdown-menu/index.d.ts
+export declare const DropdownMenu: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    placement?: Placement;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+  }>>;
+  readonly Content: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+  readonly Item: import("react").FC<ItemProps>;
+  readonly SubMenu: import("react").FC<SubMenuProps>;
+  readonly Trigger: import("react").FC<{
+    label: string;
+    size?: import("react").ComponentProps<typeof Button>['size'];
+    variant?: import("react").ComponentProps<typeof Button>['variant'];
+  }>;
+  readonly IconTrigger: import("react").FC<{
+    icon: import("react").ReactNode;
+    label: string;
+  }>;
+};
+//#endregion

package/dist/components/overlays/dropdown-menu/index.mjs

@@ -1,2 +1,13 @@
-import { DropdownMenu } from "./dropdown-menu.mjs";
+import { Content, IconTrigger, Item, Root, Trigger } from "./dropdown-menu.mjs";
+import { SubMenu } from "./sub-menu.mjs";
+//#region src/components/overlays/dropdown-menu/index.ts
+const DropdownMenu = {
+	Root,
+	Content,
+	Item,
+	SubMenu,
+	Trigger,
+	IconTrigger
+};
+//#endregion
 export { DropdownMenu };