linkedunion-design-kit 1.10.6-beta.2 → 1.10.7-beta.1

package/dist/index.d.ts

@@ -34,3 +34,8 @@ export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as V
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/NavigationMenu";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export * from "./src/components/MenuBar/menubar";
+export * from "./src/components/Alerts/Alert/alert";

package/dist/index.js

@@ -34,3 +34,8 @@ export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as V
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/NavigationMenu";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export * from "./src/components/MenuBar/menubar";
+export * from "./src/components/Alerts/Alert/alert";

package/dist/src/components/Alerts/Alert/alert.js

@@ -1,3 +1,4 @@
+"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/src/components/Button/Button/Button.d.ts

@@ -15,7 +15,8 @@ export declare const variant: {
 };
 declare const buttonVariants: (props?: ({
     color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
     shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
     variant?: "link" | "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/src/components/Button/Button/Button.js

@@ -37,30 +37,39 @@ import LUIcon from "../../Icons/LUIcon";
 import { buttonStyles } from "..";
 export var variant = {
     fill: "",
-    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none",
+    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none font-normal leading-normal",
     outline: "border lu-bg-transparent",
     ghost: "lu-bg-transparent border-none",
 };
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
     variants: {
         color: buttonStyles.fillColor,
-        size: buttonStyles.size,
+        size: __assign(__assign({}, buttonStyles.size), { none: "" }),
+        linkSize: __assign(__assign({}, buttonStyles.linkSize), { none: "" }),
         shape: buttonStyles.shape,
         variant: variant,
     },
     defaultVariants: {
         color: "blue",
         size: "md",
+        linkSize: "none",
         shape: "rounded-sm",
         variant: "fill",
     },
-    compoundVariants: __spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
+    compoundVariants: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
             color: color,
             variant: "link",
             class: className,
         });
+    }), true), Object.entries(buttonStyles.linkSize).map(function (_a) {
+        var sizeKey = _a[0], className = _a[1];
+        return ({
+            linkSize: sizeKey,
+            variant: "link",
+            class: className,
+        });
     }), true), Object.entries(buttonStyles.outlineColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
@@ -78,7 +87,7 @@ var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespa
     }), true),
 });
 function Button(_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, size = _a.size, shape = _a.shape, _c = _a.variant, variant = _c === void 0 ? "fill" : _c, _d = _a.asChild, asChild = _d === void 0 ? false : _d, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, shape = _a.shape, _d = _a.variant, variant = _d === void 0 ? "fill" : _d, _e = _a.asChild, asChild = _e === void 0 ? false : _e, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
     var Comp = asChild ? Slot : "button";
     // Map button size to appropriate icon sizes for start and end icons
     var getIconSizes = function () {
@@ -98,6 +107,9 @@ function Button(_a) {
     // Use the calculated sizes based on button size
     var startIconSizeValue = iconSizes.startIcon;
     var endIconSizeValue = iconSizes.endIcon;
-    return (_jsxs(Comp, __assign({ "data-slot": "button", "data-size": size, "data-variant": variant, "data-color": color, className: cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className })) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
+    var sizeProps = variant === "link"
+        ? { linkSize: (size === "xl" ? "lg" : size), size: "none" }
+        : { size: size, linkSize: "none" };
+    return (_jsxs(Comp, __assign({ "data-slot": "button", "data-size": size, "data-variant": variant, "data-color": color, className: cn(buttonVariants(__assign(__assign({ variant: variant, color: color }, sizeProps), { shape: shape })), className) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
 }
 export { Button, buttonVariants };

package/dist/src/components/Button/Button/Button.stories.d.ts

@@ -391,9 +391,10 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
         shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
@@ -691,9 +692,10 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
         shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;

package/dist/src/components/Button/index.d.ts

@@ -43,6 +43,7 @@ export declare const buttonStyles: {
     linkSize: {
         lg: string;
         md: string;
+        sm: string;
     };
     outlineColor: {
         blue: string;

package/dist/src/components/Button/index.js

@@ -1,4 +1,3 @@
-// Button style types
 import styles from "./Button/Button.module.css";
 export var buttonStyles = {
     fillColor: {
@@ -43,8 +42,9 @@ export var buttonStyles = {
         disabled: "text-gray-300 hover:no-underline",
     },
     linkSize: {
-        lg: "!text-base !font-normal !leading-normal",
-        md: "!text-sm !font-normal !leading-5",
+        lg: "!text-lg",
+        md: "!text-base",
+        sm: "!text-sm",
     },
     outlineColor: {
         blue: "text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { checkBoxSize, dropdownMenuSize } from ".";
+import { checkBoxSize, dropdownContentPosition, dropdownMenuSize } from ".";
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -13,9 +13,13 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
 } & React.RefAttributes<HTMLDivElement>>;
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    size?: keyof typeof dropdownMenuSize;
+    align?: keyof typeof dropdownContentPosition;
+};
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
-    align?: "start" | "center" | "end";
+    align?: keyof typeof dropdownContentPosition;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.js

@@ -27,6 +27,7 @@ import { ChevronRight, Circle } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { checkBoxSize, dropdownMenuIconSize, dropDownMenuItemSize, dropdownMenuSize, } from ".";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
+import { Reset_BS } from "../../../utils/constants";
 // Provide size from Content to all items
 var DropdownMenuSizeContext = React.createContext("md");
 var DropdownMenu = DropdownMenuPrimitive.Root;
@@ -37,7 +38,7 @@ var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuSubTrigger = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, children = _a.children, props = __rest(_a, ["className", "inset", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm p-2 outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm !p-2 outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
 });
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
@@ -52,7 +53,7 @@ DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 var DropdownMenuContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.sideOffset, sideOffset = _b === void 0 ? 4 : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.align, align = _d === void 0 ? "start" : _d, props = __rest(_a, ["className", "sideOffset", "size", "align"]);
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuSizeContext.Provider, { value: size, children: _jsx(DropdownMenuPrimitive.Content, __assign({ ref: ref, sideOffset: sideOffset, align: align, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm bg-white p-2 text-gray-900 shadow-backdrop-shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", dropdownMenuSize[size], className) }, props)) }) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuSizeContext.Provider, { value: size, children: _jsx(DropdownMenuPrimitive.Content, __assign({ "data-reset": Reset_BS, ref: ref, sideOffset: sideOffset, align: align, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm bg-white !p-2 text-gray-900 shadow-backdrop-shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", dropdownMenuSize[size], className) }, props)) }) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuItem = React.forwardRef(function (_a, ref) {
@@ -60,7 +61,7 @@ var DropdownMenuItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, selected = _a.selected, size = _a.size, props = __rest(_a, ["className", "inset", "selected", "size"]);
     var inheritedSize = React.useContext(DropdownMenuSizeContext);
     var effectiveSize = (_b = size !== null && size !== void 0 ? size : inheritedSize) !== null && _b !== void 0 ? _b : "md";
-    return (_jsx(DropdownMenuPrimitive.Item, __assign({ ref: ref, className: cn("relative flex cursor-pointer select-none items-center gap-2 rounded-sm outline-none transition-colors text-gray-900 hover:bg-blue-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&>svg]:shrink-0", dropdownMenuIconSize[effectiveSize], dropdownMenuSize[effectiveSize], dropDownMenuItemSize[effectiveSize], inset && "pl-8", selected && "bg-blue-50 text-blue-600", // Apply styles for selected item
+    return (_jsx(DropdownMenuPrimitive.Item, __assign({ ref: ref, "data-reset": Reset_BS, className: cn("relative flex cursor-pointer select-none items-center gap-2 rounded-sm outline-none transition-colors text-gray-900 hover:bg-blue-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&>svg]:shrink-0", dropdownMenuIconSize[effectiveSize], dropdownMenuSize[effectiveSize], dropDownMenuItemSize[effectiveSize], inset && "pl-8", selected && "bg-blue-50 text-blue-600", // Apply styles for selected item
         className) }, props)));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -75,17 +76,17 @@ DropdownMenuCheckboxItem.displayName =
     DropdownMenuPrimitive.CheckboxItem.displayName;
 var DropdownMenuRadioItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, __assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, __assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm !py-1.5 pl-8 !pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 var DropdownMenuLabel = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, props = __rest(_a, ["className", "inset"]);
-    return (_jsx(DropdownMenuPrimitive.Label, __assign({ ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Label, __assign({ ref: ref, className: cn("!px-2 !py-1.5 text-sm font-semibold", inset && "pl-8", className) }, props)));
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 var DropdownMenuSeparator = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DropdownMenuPrimitive.Separator, __assign({ ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Separator, __assign({ ref: ref, className: cn("-mx-1 !my-1 h-px bg-muted", className) }, props)));
 });
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = function (_a) {

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.stories.d.ts

@@ -1,8 +1,14 @@
 import { Meta } from "@storybook/react";
 import { DropdownMenu } from "./DropdownMenu";
+import type { DropdownMenuContentProps } from "./DropdownMenu";
+type DropdownMenuStoryArgs = DropdownMenuContentProps & {
+    size?: keyof typeof dropdownMenuSize;
+    align?: "start" | "center" | "end";
+};
+import { dropdownMenuSize } from ".";
 declare const _default: Meta<typeof DropdownMenu>;
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@radix-ui/react-dropdown-menu").DropdownMenuProps>;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DropdownMenuStoryArgs>;
 export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithIcons: () => import("react/jsx-runtime").JSX.Element;
 export declare const DisabledItems: () => import("react/jsx-runtime").JSX.Element;
@@ -23,3 +29,4 @@ export declare const DropdownMenuWithSelectAllAndSearch: () => import("react/jsx
 export declare const WorkSpaceSwitcher: () => import("react/jsx-runtime").JSX.Element;
 export declare const LanguageDropdownMenu: () => import("react/jsx-runtime").JSX.Element;
 export declare const Alignments: () => import("react/jsx-runtime").JSX.Element;
+export declare const MasterDropdownMenu: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.stories.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -23,7 +34,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { Button } from "../../../components/Button/Button/Button";
 import LUIcon from "../../../components/Icons/LUIcon";
 import { useState } from "react";
-import { dropdownMenuSize } from ".";
+import { dropdownContentPosition, dropdownMenuSize } from ".";
 import { IconButton } from "../../../components/Button/IconButton/IconButton";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
 import { Label } from "../../../components/Label/Label";
@@ -31,6 +42,7 @@ import { Caption } from "../../../components/Typography/Caption/caption";
 import { Input } from "../../../components/Input";
 import { SelectAllSection } from "./SelectAllSection";
 import { Avatar, AvatarFallback, AvatarImage, } from "../../../components/Avatar/Avatar/Avatar";
+import { Badge } from "../../../components/Badge/Badge";
 export default {
     title: "Components/Dropdown/DropdownMenu",
     component: DropdownMenu,
@@ -55,7 +67,7 @@ export default {
         },
         align: {
             control: { type: "select" },
-            options: ["start", "center", "end"],
+            options: Object.keys(dropdownContentPosition),
             description: "Alignment of the dropdown menu",
             table: {
                 type: { summary: "string" },
@@ -70,7 +82,8 @@ var Template = function (args) {
         { label: "Option 2" },
         { label: "Option 3" },
     ];
-    return (_jsxs(DropdownMenu, __assign({}, args, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Open Menu" }) }), _jsx(DropdownMenuContent, { children: menuItems.map(function (item, index) { return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index)); }) })] })));
+    var size = args.size, align = args.align, rest = __rest(args, ["size", "align"]);
+    return (_jsxs(DropdownMenu, __assign({}, rest, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Open Menu" }) }), _jsx(DropdownMenuContent, { size: size, align: align, children: menuItems.map(function (item, index) { return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index)); }) })] })));
 };
 export var Default = Template.bind({});
 export var Sizes = function () {
@@ -251,3 +264,35 @@ export var LanguageDropdownMenu = function () {
 export var Alignments = function () {
     return (_jsxs("div", { className: "flex flex-row space-x-4", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align Start" }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align Center" }) }), _jsxs(DropdownMenuContent, { align: "center", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align End" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] })] }));
 };
+export var MasterDropdownMenu = function () {
+    var menuItems = [
+        { type: "item", label: "Text Label 1" },
+        { type: "item", label: "Text Label 2" },
+        { type: "submenu", label: "Text Label 3", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        { type: "submenu", label: "Text Label 4", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        { type: "item", label: "Text Label 5" },
+        { type: "badge", label: "Text Label 6", badge: "09" },
+        { type: "avatar", label: "Text Label 7" },
+        { type: "item", label: "Text Label 8" },
+        // Second column starts after 8 items
+        { type: "item", label: "Text Label 9" },
+        { type: "submenu", label: "Text Label 10", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        { type: "item", label: "Text Label 11" },
+        { type: "badge", label: "Text Label 12", badge: "09" },
+        { type: "avatar", label: "Text Label 13" },
+    ];
+    var renderMenuItem = function (item, index) {
+        var _a;
+        switch (item.type) {
+            case "submenu":
+                return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: item.label }), _jsx(DropdownMenuSubContent, { children: (_a = item.subItems) === null || _a === void 0 ? void 0 : _a.map(function (subItem, subIndex) { return (_jsx(DropdownMenuItem, { children: subItem }, subIndex)); }) })] }, index));
+            case "badge":
+                return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [item.label, _jsx(Badge, { color: "light-blue", children: item.badge })] }) }, index));
+            case "avatar":
+                return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), item.label] }) }, index));
+            default:
+                return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index));
+        }
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { shape: "rounded-full", children: "Text Label" }) }), _jsx(DropdownMenuContent, { className: "w-auto", size: "lg", children: _jsxs("div", { className: "grid gap-0 ".concat(menuItems.length > 8 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(0, 8).map(function (item, index) { return renderMenuItem(item, index); })] }), menuItems.length > 8 && (_jsxs("div", { className: "flex flex-col md:pl-2", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(8).map(function (item, index) { return renderMenuItem(item, index + 8); })] }))] }) })] }));
+};

package/dist/src/components/Dropdown/DropdownMenu/index.d.ts

@@ -18,3 +18,8 @@ export declare const checkBoxSize: {
     readonly md: "md";
     readonly lg: "lg";
 };
+export declare const dropdownContentPosition: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+};

package/dist/src/components/Dropdown/DropdownMenu/index.js

@@ -19,3 +19,8 @@ export var checkBoxSize = {
     md: "md",
     lg: "lg",
 };
+export var dropdownContentPosition = {
+    start: "start",
+    center: "center",
+    end: "end",
+};

package/dist/src/components/Dropdown/select.js

@@ -68,7 +68,7 @@ function SelectLabel(_a) {
 }
 function SelectItem(_a) {
     var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "size"]);
-    return (_jsx(SelectPrimitive.Item, __assign({ "data-slot": "select-item", className: cn("text-gray-900 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 !rounded-sm py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[state=checked]:bg-gray-50 hover:bg-gray-50", itemSize[size], className) }, props, { children: _jsx(SelectPrimitive.ItemText, { children: children }) })));
+    return (_jsx(SelectPrimitive.Item, __assign({ "data-slot": "reset-bs-link", className: cn("text-gray-900 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 !rounded-sm py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[state=checked]:bg-gray-50 hover:bg-gray-50", itemSize[size], className) }, props, { children: _jsx(SelectPrimitive.ItemText, { children: children }) })));
 }
 function SelectSeparator(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);

package/dist/src/components/MenuBar/menubar.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): import("react/jsx-runtime").JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

package/dist/src/components/MenuBar/menubar.js

@@ -0,0 +1,92 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+function Menubar(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(MenubarPrimitive.Root, __assign({ "data-slot": "menubar", className: cn("bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className) }, props)));
+}
+function MenubarMenu(_a) {
+    var props = __rest(_a, []);
+    return _jsx(MenubarPrimitive.Menu, __assign({ "data-slot": "menubar-menu" }, props));
+}
+function MenubarGroup(_a) {
+    var props = __rest(_a, []);
+    return _jsx(MenubarPrimitive.Group, __assign({ "data-slot": "menubar-group" }, props));
+}
+function MenubarPortal(_a) {
+    var props = __rest(_a, []);
+    return _jsx(MenubarPrimitive.Portal, __assign({ "data-slot": "menubar-portal" }, props));
+}
+function MenubarRadioGroup(_a) {
+    var props = __rest(_a, []);
+    return (_jsx(MenubarPrimitive.RadioGroup, __assign({ "data-slot": "menubar-radio-group" }, props)));
+}
+function MenubarTrigger(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(MenubarPrimitive.Trigger, __assign({ "data-slot": "menubar-trigger", className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none", className) }, props)));
+}
+function MenubarContent(_a) {
+    var className = _a.className, _b = _a.align, align = _b === void 0 ? "start" : _b, _c = _a.alignOffset, alignOffset = _c === void 0 ? -4 : _c, _d = _a.sideOffset, sideOffset = _d === void 0 ? 8 : _d, props = __rest(_a, ["className", "align", "alignOffset", "sideOffset"]);
+    return (_jsx(MenubarPortal, { children: _jsx(MenubarPrimitive.Content, __assign({ "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md", className) }, props)) }));
+}
+function MenubarItem(_a) {
+    var className = _a.className, inset = _a.inset, _b = _a.variant, variant = _b === void 0 ? "default" : _b, props = __rest(_a, ["className", "inset", "variant"]);
+    return (_jsx(MenubarPrimitive.Item, __assign({ "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props)));
+}
+function MenubarCheckboxItem(_a) {
+    var className = _a.className, children = _a.children, checked = _a.checked, props = __rest(_a, ["className", "children", "checked"]);
+    return (_jsxs(MenubarPrimitive.CheckboxItem, __assign({ "data-slot": "menubar-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked }, props, { children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] })));
+}
+function MenubarRadioItem(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(MenubarPrimitive.RadioItem, __assign({ "data-slot": "menubar-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props, { children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] })));
+}
+function MenubarLabel(_a) {
+    var className = _a.className, inset = _a.inset, props = __rest(_a, ["className", "inset"]);
+    return (_jsx(MenubarPrimitive.Label, __assign({ "data-slot": "menubar-label", "data-inset": inset, className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className) }, props)));
+}
+function MenubarSeparator(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(MenubarPrimitive.Separator, __assign({ "data-slot": "menubar-separator", className: cn("bg-border -mx-1 my-1 h-px", className) }, props)));
+}
+function MenubarShortcut(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("span", __assign({ "data-slot": "menubar-shortcut", className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className) }, props)));
+}
+function MenubarSub(_a) {
+    var props = __rest(_a, []);
+    return _jsx(MenubarPrimitive.Sub, __assign({ "data-slot": "menubar-sub" }, props));
+}
+function MenubarSubTrigger(_a) {
+    var className = _a.className, inset = _a.inset, children = _a.children, props = __rest(_a, ["className", "inset", "children"]);
+    return (_jsxs(MenubarPrimitive.SubTrigger, __assign({ "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8", className) }, props, { children: [children, _jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })] })));
+}
+function MenubarSubContent(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(MenubarPrimitive.SubContent, __assign({ "data-slot": "menubar-sub-content", className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className) }, props)));
+}
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

package/dist/src/components/MenuBar/menubar.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Menubar } from "./menubar";
+declare const meta: Meta<typeof Menubar>;
+export default meta;
+type Story = StoryObj<typeof Menubar>;
+export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
+export declare const Complete: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCheckboxItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithRadioGroup: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithSubMenus: Story;
+export declare const WithDisabledItems: Story;
+export declare const WithLabelsAndGroups: Story;
+export declare const WithInsetItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const NestedSubMenus: Story;