@aivenio/aquarium 2.11.0 → 2.11.1

package/dist/src/atoms/Navigation/Navigation.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { type IconProps } from '../../../src/molecules/Icon/Icon';
 type UListProps = React.HTMLProps<HTMLUListElement> & {
     title?: string;
 };
@@ -21,13 +20,13 @@ declare const Divider: React.FC<LIProp>;
 declare const Item: React.FC<LinkProps & {
     active?: boolean;
 }>;
-declare const Submenu: React.FC<{
-    title: string;
-    icon?: IconProps['icon'];
-    children: React.ReactNode;
-}> & {
+type ComposedSubMenuProps = {
     Item: typeof SubmenuItem;
 };
+declare const Submenu: ComposedSubMenuProps & React.FC<Omit<LinkProps, 'title'> & {
+    title: React.ReactNode;
+    id: string;
+}>;
 declare const SubmenuItem: React.FC<LinkProps & {
     active?: boolean;
 }>;

package/dist/src/atoms/Navigation/Navigation.js

@@ -10,12 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { uniqueId } from 'lodash-es';
-import { InlineIcon } from '../../../src/molecules/Icon/Icon';
-import { Box } from '../../../src/molecules';
 import { classNames, tw } from '../../../src/utils/tailwind';
-import caretDownFilled from '../../../src/icons/caretDownFilled';
-import caretUpFilled from '../../../src/icons/caretUpFilled';
 export const Navigation = (_a) => {
     var { className, children, 'aria-label': ariaLabel } = _a, rest = __rest(_a, ["className", "children", 'aria-label']);
     return (React.createElement("nav", { className: classNames(tw('bg-muted h-full')), "aria-label": ariaLabel },
@@ -47,29 +42,21 @@ const Item = (_a) => {
                 'text-primary-intense': !!active,
             }), className) }))));
 };
-const Submenu = ({ title, icon, children }) => {
-    const [open, setOpen] = React.useState(false);
-    const submenuTitleId = uniqueId();
+const Submenu = (_a) => {
+    var { children, className, title, id } = _a, rest = __rest(_a, ["children", "className", "title", "id"]);
     return (React.createElement("li", { role: "presentation" },
-        React.createElement("a", { role: "menuitem", "aria-haspopup": "true", "aria-expanded": open, onClick: (e) => {
-                e.preventDefault();
-                setOpen((prev) => !prev);
-            }, className: classNames(tw('py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full')), href: "#", id: submenuTitleId },
-            React.createElement(InlineIcon, { icon: open ? caretUpFilled : caretDownFilled, width: "12px", height: "12px", className: "mr-1" }),
-            React.createElement(Box.Flex, { paddingX: "1", gap: "4" },
-                icon && React.createElement(InlineIcon, { icon: icon, width: "20px", height: "20px" }),
-                title)),
-        open && (React.createElement("ul", { role: "menu", className: classNames(tw('flex flex-col')), "aria-labelledby": submenuTitleId }, children))));
+        React.createElement("a", Object.assign({ role: "menuitem", "aria-haspopup": "true", href: "#", id: id, className: classNames(tw('py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full'), className) }, rest), title),
+        React.createElement("ul", { role: "menu", className: classNames(tw('flex flex-col')), "aria-labelledby": id }, children)));
 };
 const SubmenuItem = (_a) => {
     var { className, active } = _a, rest = __rest(_a, ["className", "active"]);
     return (React.createElement(Navigation.Item, Object.assign({}, rest, { active: active, className: classNames(className, tw('pl-[56px]')) })));
 };
+Submenu.Item = SubmenuItem;
 Navigation.Header = Header;
 Navigation.Footer = Footer;
 Navigation.Section = Section;
 Navigation.Item = Item;
 Navigation.Submenu = Submenu;
-Submenu.Item = SubmenuItem;
 Navigation.Divider = Divider;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmF2aWdhdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9OYXZpZ2F0aW9uL05hdmlnYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFFckMsT0FBTyxFQUFrQixVQUFVLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUVyRSxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFcEQsT0FBTyxlQUFlLE1BQU0sMkJBQTJCLENBQUM7QUFDeEQsT0FBTyxhQUFhLE1BQU0seUJBQXlCLENBQUM7QUFlcEQsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFtRCxDQUFDLEVBSzFFLEVBQUUsRUFBRTtRQUxzRSxFQUN6RSxTQUFTLEVBQ1QsUUFBUSxFQUNSLFlBQVksRUFBRSxTQUFTLE9BRXhCLEVBREksSUFBSSxjQUprRSx1Q0FLMUUsQ0FEUTtJQUNILE9BQUEsQ0FDSiw2QkFBSyxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLGdCQUFjLFNBQVM7UUFDdEUsNENBQVEsSUFBSSxJQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLHNCQUFzQixDQUFDLEVBQUUsU0FBUyxDQUFDLEVBQUUsSUFBSSxFQUFDLFNBQVMsS0FDdkYsUUFBUSxDQUNOLENBQ0QsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE1BQU0sTUFBTSxHQUFxQixDQUFDLEVBQXNCLEVBQUUsRUFBRTtRQUExQixFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBcEIsYUFBc0IsQ0FBRjtJQUFPLE9BQUEsQ0FDM0QsNENBQVEsSUFBSSxJQUFFLElB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmF2aWdhdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9OYXZpZ2F0aW9uL05hdmlnYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFlcEQsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFtRCxDQUFDLEVBSzFFLEVBQUUsRUFBRTtRQUxzRSxFQUN6RSxTQUFTLEVBQ1QsUUFBUSxFQUNSLFlBQVksRUFBRSxTQUFTLE9BRXhCLEVBREksSUFBSSxjQUprRSx1Q0FLMUUsQ0FEUTtJQUNILE9BQUEsQ0FDSiw2QkFBSyxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLGdCQUFjLFNBQVM7UUFDdEUsNENBQVEsSUFBSSxJQUFFLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLHNCQUFzQixDQUFDLEVBQUUsU0FBUyxDQUFDLEVBQUUsSUFBSSxFQUFDLFNBQVMsS0FDdkYsUUFBUSxDQUNOLENBQ0QsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLE1BQU0sTUFBTSxHQUFxQixDQUFDLEVBQXNCLEVBQUUsRUFBRTtRQUExQixFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBcEIsYUFBc0IsQ0FBRjtJQUFPLE9BQUEsQ0FDM0QsNENBQVEsSUFBSSxJQUFFLElBQUksRUFBQyxjQUFjLEVBQUMsU0FBUyxFQUFFLFVBQVUsQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FDeEYsQ0FBQTtDQUFBLENBQUM7QUFFRixNQUFNLE1BQU0sR0FBcUIsQ0FBQyxFQUFzQixFQUFFLEVBQUU7UUFBMUIsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQXBCLGFBQXNCLENBQUY7SUFB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

package/dist/src/molecules/Navigation/Navigation.d.ts

@@ -4,21 +4,18 @@ import { Navigation as NavigationBase } from '../../../src/atoms/Navigation/Navi
 export declare const Navigation: {
     ({ className, ...props }: React.ComponentProps<typeof NavigationBase>): React.JSX.Element;
     Item: ({ children, icon, showNotification, ...rest }: ItemProps & React.ComponentProps<typeof NavigationBase.Item>) => React.JSX.Element;
-    Submenu: React.FC<{
-        title: string;
-        icon?: IconProps["icon"];
-        children: React.ReactNode;
-    }> & {
-        Item: React.FC<React.HTMLProps<HTMLAnchorElement> & {
-            active?: boolean;
-        }>;
-    };
     Divider: React.FC<React.HTMLProps<HTMLLIElement>>;
     Footer: React.FC<React.HTMLProps<HTMLLIElement>>;
     Header: React.FC<React.HTMLProps<HTMLLIElement>>;
     Section: React.FC<React.HTMLProps<HTMLUListElement> & {
         title?: string;
     }>;
+    Submenu: {
+        ({ children, title, icon }: SubmenuProps): React.JSX.Element;
+        Item: React.FC<React.HTMLProps<HTMLAnchorElement> & {
+            active?: boolean;
+        }>;
+    };
 };
 type ItemProps = {
     /**
@@ -30,4 +27,12 @@ type ItemProps = {
      */
     showNotification?: boolean;
 };
+type SubmenuProps = {
+    title: string;
+    /**
+     * Optional icon for item. If provided, it will be displayed on the left side of the text.
+     */
+    icon?: IconProps['icon'];
+    children?: React.ReactNode;
+};
 export {};

package/dist/src/molecules/Navigation/Navigation.js

@@ -11,9 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import classNames from 'classnames';
+import { uniqueId } from 'lodash-es';
 import { Badge } from '../../../src/molecules/Badge/Badge';
+import { Box } from '../../../src/molecules/Box/Box';
 import { InlineIcon } from '../../../src/molecules/Icon/Icon';
 import { Navigation as NavigationBase } from '../../../src/atoms/Navigation/Navigation';
+import { caretDownFilled, caretUpFilled } from '../../../src/icons';
+import { tw } from '../../../src/utils/tailwind';
 export const Navigation = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (React.createElement(NavigationBase, Object.assign({ className: classNames('Aquarium-Navigation', className) }, props)));
@@ -26,11 +30,23 @@ const Item = (_a) => {
         icon && !showNotification && React.createElement(InlineIcon, { icon: icon, width: "20px", height: "20px" }),
         children));
 };
+const Submenu = ({ children, title, icon }) => {
+    const [open, setOpen] = React.useState(false);
+    const id = uniqueId();
+    return (React.createElement(NavigationBase.Submenu, { title: React.createElement(React.Fragment, null,
+            React.createElement(InlineIcon, { icon: open ? caretUpFilled : caretDownFilled, width: "12px", height: "12px", className: "mr-1" }),
+            React.createElement(Box.Flex, { paddingX: "1", gap: "4" },
+                icon && React.createElement(InlineIcon, { icon: icon, width: "20px", height: "20px" }),
+                title)), "aria-expanded": open, id: id, onClick: (e) => {
+            e.preventDefault();
+            setOpen(!open);
+        } }, open && (React.createElement("ul", { role: "menu", className: classNames(tw('flex flex-col')), "aria-labelledby": id }, children))));
+};
+Submenu.Item = NavigationBase.Submenu.Item;
 Navigation.Item = Item;
-Navigation.Submenu = NavigationBase.Submenu;
-Navigation.Submenu.Item = NavigationBase.Submenu.Item;
 Navigation.Divider = NavigationBase.Divider;
 Navigation.Footer = NavigationBase.Footer;
 Navigation.Header = NavigationBase.Header;
 Navigation.Section = NavigationBase.Section;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmF2aWdhdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvTmF2aWdhdGlvbi9OYXZpZ2F0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLFVBQVUsTUFBTSxZQUFZLENBQUM7QUFFcEMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xELE9BQU8sRUFBa0IsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFckUsT0FBTyxFQUFFLFVBQVUsSUFBSSxjQUFjLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUUvRSxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsQ0FBQyxFQUFvRSxFQUFFLEVBQUU7UUFBeEUsRUFBRSxTQUFTLE9BQXlELEVBQXBELEtBQUssY0FBckIsYUFBdUIsQ0FBRjtJQUFvRCxPQUFBLENBQ2xHLG9CQUFDLGNBQWMsa0JBQUMsU0FBUyxFQUFFLFVBQVUsQ0FBQyxxQkFBcUIsRUFBRSxTQUFTLENBQUMsSUFBTSxLQUFLLEVBQUksQ0FDdkYsQ0FBQTtDQUFBLENBQUM7QUFjRixNQUFNLElBQUksR0FBRyxDQUFDLEVBS2lELEVBQUUsRUFBRTtRQUxyRCxFQUNaLFFBQVEsRUFDUixJQUFJLEVBQ0osZ0JBQWdCLEdBQUcsS0FBSyxPQUVxQyxFQUQxRCxJQUFJLGNBSkssd0NBS2IsQ0FEUTtJQUMyRCxPQUFBLENBQ2xFLG9CQUFDLGNBQWMsQ0FBQyxJQUFJLG9CQUFLLElBQUk7UUFDMUIsSUFBSSxJQUFJLGdCQUFnQixJQUFJLENBQzNCLG9CQUFDLEtBQUssQ0FBQyxZQUFZO1lBQ2pCLG9CQUFDLFVBQVUsSUFBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBQyxNQUFNLEVBQUMsTUFBTSxFQUFDLE1BQU0sR0FBRyxDQUNsQyxDQUN0QjtRQUNBLElBQUksSUFBSSxDQUFDLGdCQUFnQixJQUFJLG9CQUFDLFVBQVUsSUFBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBQyxNQUFNLEVBQUMsTUFBTSxFQUFDLE1BQU0sR0FBRztRQUNsRixRQUFRLENBQ1csQ0FDdkIsQ0FBQTtDQUFBLENBQUM7QUFFRixVQUFVLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztBQUN2QixVQUFVLENBQUMsT0FBTyxHQUFHLGNBQWMsQ0FBQyxPQUFPLENBQUM7QUFDNUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEdBQUcsY0FBYyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7QUFDdEQsVUFBVSxDQUFDLE9BQU8sR0FBRyxjQUFjLENBQUMsT0FBTyxDQUFDO0FBQzVDLFVBQVUsQ0FBQyxNQUFNLEdBQUcsY0FBYyxDQUFDLE1BQU0sQ0FBQztBQUMxQyxVQUFVLENBQUMsTUFBTSxHQUFHLGNBQWMsQ0FBQyxNQUFNLENBQUM7QUFDMUMsVUFBVSxDQUFDLE9BQU8sR0FBRyxjQUFjLENBQUMsT0FBTyxDQUFDIn0=
+Navigation.Submenu = Submenu;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTmF2aWdhdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvTmF2aWdhdGlvbi9OYXZpZ2F0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLFVBQVUsTUFBTSxZQUFZLENBQUM7QUFDcEMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUVyQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEQsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sRUFBa0IsVUFBVSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFckUsT0FBTyxFQUFFLFVBQVUsSUFBSSxjQUFjLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUUvRSxPQUFPLEVBQUUsZUFBZSxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUMzRCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFeEMsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLENBQUMsRUFBb0UsRUFBRSxFQUFFO1FBQXhFLEVBQUUsU0FBUyxPQUF5RCxFQUFwRCxLQUFLLGNBQXJCLGFBQXVCLENBQUY7SUFBb0QsT0FBQSxDQUNsRyxvQkFBQyxjQUFjLGtCQUFDLFNBQVMsRUFBRSxVQUFVLENBQUMscUJBQXFCLEVBQUUsU0FBUyxDQUFDLElBQU0sS0FBSyxFQUFJLENBQ3ZGLENBQUE7Q0FBQSxDQUFDO0FBY0YsTUFBTSxJQUFJLEdBQUcsQ0FBQyxFQUtpRCxFQUFFLEVBQUU7UUFMckQsRUFDWixRQUFRLEVBQ1IsSUFBSSxFQUNKLGdCQUFnQixHQUFHLEtBQUssT0FFcUMsRUFEMUQsSUFBSSxjQUpLLHdDQUtiLENBRFE7SUFDMkQsT0FBQSxDQUNsRSxvQkFBQyxjQUFjLENBQUMsSUFBSSxvQkFBSyxJQUFJO1FBQzFCLElBQUksSUFBSSxnQkFBZ0IsSUFBSSxDQUMzQixvQkFBQyxLQUFLLENBQUMsWUFBWTtZQUNqQixvQkFBQyxVQUFVLElBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUMsTUFBTSxFQUFDLE1BQU0sRUFBQyxNQUFNLEdBQUcsQ0FDbEMsQ0FDdEI7UUFDQSxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxvQkFBQyxVQUFVLElBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUMsTUFBTSxFQUFDLE1BQU0sRUFBQyxNQUFNLEdBQUc7UUFDbEYsUUFBUSxDQUNXLENBQ3ZCLENBQUE7Q0FBQSxDQUFDO0FBWUYsTUFBTSxPQUFPLEdBQUcsQ0FBQyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFnQixFQUFFLEVBQUU7SUFDMUQsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlDLE1BQU0sRUFBRSxHQUFHLFFBQVEsRUFBRSxDQUFDO0lBQ3RCLE9BQU8sQ0FDTCxvQkFBQyxjQUFjLENBQUMsT0FBTyxJQUNyQixLQUFLLEVBQ0g7WUFDRSxvQkFBQyxVQUFVLElBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxlQUFlLEVBQUUsS0FBSyxFQUFDLE1BQU0sRUFBQyxNQUFNLEVBQUMsTUFBTSxFQUFDLFNBQVMsRUFBQyxNQUFNLEdBQUc7WUFDeEcsb0JBQUMsR0FBRyxDQUFDLElBQUksSUFBQyxRQUFRLEVBQUMsR0FBRyxFQUFDLEdBQUcsRUFBQyxHQUFHO2dCQUMzQixJQUFJLElBQUksb0JBQUMsVUFBVSxJQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFDLE1BQU0sRUFBQyxNQUFNLEVBQUMsTUFBTSxHQUFHO2dCQUM3RCxLQUFLLENBQ0csQ0FDVixtQkFFVSxJQUFJLEVBQ25CLEVBQUUsRUFBRSxFQUFFLEVBQ04sT0FBTyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUU7WUFDYixDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDbkIsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDakIsQ0FBQyxJQUVBLElBQUksSUFBSSxDQUNQLDRCQUFJLElBQUksRUFBQyxNQUFNLEVBQUMsU0FBUyxFQUFFLFVBQVUsQ0FBQyxFQUFFLENBQUMsZUFBZSxDQUFDLENBQUMscUJBQW1CLEVBQUUsSUFDNUUsUUFBUSxDQUNOLENBQ04sQ0FDc0IsQ0FDMUIsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE9BQU8sQ0FBQyxJQUFJLEdBQUcsY0FBYyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7QUFFM0MsVUFBVSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7QUFDdkIsVUFBVSxDQUFDLE9BQU8sR0FBRyxjQUFjLENBQUMsT0FBTyxDQUFDO0FBQzVDLFVBQVUsQ0FBQyxNQUFNLEdBQUcsY0FBYyxDQUFDLE1BQU0sQ0FBQztBQUMxQyxVQUFVLENBQUMsTUFBTSxHQUFHLGNBQWMsQ0FBQyxNQUFNLENBQUM7QUFDMUMsVUFBVSxDQUFDLE9BQU8sR0FBRyxjQUFjLENBQUMsT0FBTyxDQUFDO0FBQzVDLFVBQVUsQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDIn0=

package/dist/system.cjs

@@ -15049,12 +15049,10 @@ NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 // src/molecules/Navigation/Navigation.tsx
 var import_react117 = __toESM(require("react"));
 var import_classnames12 = __toESM(require("classnames"));
+var import_lodash_es39 = require("lodash-es");
 
 // src/atoms/Navigation/Navigation.tsx
 var import_react116 = __toESM(require("react"));
-var import_lodash_es39 = require("lodash-es");
-var import_caretDownFilled2 = __toESM(require_caretDownFilled());
-var import_caretUpFilled2 = __toESM(require_caretUpFilled());
 var Navigation = (_a) => {
   var _b = _a, {
     className,
@@ -15099,39 +15097,43 @@ var Item5 = (_a) => {
     })
   ));
 };
-var Submenu = ({ title, icon, children }) => {
-  const [open, setOpen] = import_react116.default.useState(false);
-  const submenuTitleId = (0, import_lodash_es39.uniqueId)();
+var Submenu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    title,
+    id
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "title",
+    "id"
+  ]);
   return /* @__PURE__ */ import_react116.default.createElement("li", { role: "presentation" }, /* @__PURE__ */ import_react116.default.createElement(
     "a",
-    {
+    __spreadValues({
       role: "menuitem",
       "aria-haspopup": "true",
-      "aria-expanded": open,
-      onClick: (e) => {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      },
-      className: classNames(
-        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full")
-      ),
       href: "#",
-      id: submenuTitleId
-    },
-    /* @__PURE__ */ import_react116.default.createElement(InlineIcon, { icon: open ? import_caretUpFilled2.default : import_caretDownFilled2.default, width: "12px", height: "12px", className: "mr-1" }),
-    /* @__PURE__ */ import_react116.default.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ import_react116.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)
-  ), open && /* @__PURE__ */ import_react116.default.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": submenuTitleId }, children));
+      id,
+      className: classNames(
+        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full"),
+        className
+      )
+    }, rest),
+    title
+  ), /* @__PURE__ */ import_react116.default.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
 };
 var SubmenuItem = (_a) => {
   var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
   return /* @__PURE__ */ import_react116.default.createElement(Navigation.Item, __spreadProps(__spreadValues({}, rest), { active, className: classNames(className, tw("pl-[56px]")) }));
 };
+Submenu.Item = SubmenuItem;
 Navigation.Header = Header;
 Navigation.Footer = Footer;
 Navigation.Section = Section2;
 Navigation.Item = Item5;
 Navigation.Submenu = Submenu;
-Submenu.Item = SubmenuItem;
 Navigation.Divider = Divider3;
 
 // src/molecules/Navigation/Navigation.tsx
@@ -15151,13 +15153,30 @@ var Item6 = (_a) => {
   ]);
   return /* @__PURE__ */ import_react117.default.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ import_react117.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" })), icon && !showNotification && /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), children);
 };
+var Submenu2 = ({ children, title, icon }) => {
+  const [open, setOpen] = import_react117.default.useState(false);
+  const id = (0, import_lodash_es39.uniqueId)();
+  return /* @__PURE__ */ import_react117.default.createElement(
+    Navigation.Submenu,
+    {
+      title: /* @__PURE__ */ import_react117.default.createElement(import_react117.default.Fragment, null, /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon: open ? import_caretUpFilled.default : import_caretDownFilled.default, width: "12px", height: "12px", className: "mr-1" }), /* @__PURE__ */ import_react117.default.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ import_react117.default.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)),
+      "aria-expanded": open,
+      id,
+      onClick: (e) => {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    },
+    open && /* @__PURE__ */ import_react117.default.createElement("ul", { role: "menu", className: (0, import_classnames12.default)(tw("flex flex-col")), "aria-labelledby": id }, children)
+  );
+};
+Submenu2.Item = Navigation.Submenu.Item;
 Navigation2.Item = Item6;
-Navigation2.Submenu = Navigation.Submenu;
-Navigation2.Submenu.Item = Navigation.Submenu.Item;
 Navigation2.Divider = Navigation.Divider;
 Navigation2.Footer = Navigation.Footer;
 Navigation2.Header = Navigation.Header;
 Navigation2.Section = Navigation.Section;
+Navigation2.Submenu = Submenu2;
 
 // src/molecules/PageHeader/PageHeader.tsx
 var import_react119 = __toESM(require("react"));

package/dist/system.mjs

@@ -14914,12 +14914,10 @@ NativeSelect.Skeleton.displayName = "NativeSelect.Skeleton";
 // src/molecules/Navigation/Navigation.tsx
 import React108 from "react";
 import classNames12 from "classnames";
+import { uniqueId as uniqueId2 } from "lodash-es";
 
 // src/atoms/Navigation/Navigation.tsx
 import React107 from "react";
-import { uniqueId as uniqueId2 } from "lodash-es";
-var import_caretDownFilled2 = __toESM(require_caretDownFilled());
-var import_caretUpFilled2 = __toESM(require_caretUpFilled());
 var Navigation = (_a) => {
   var _b = _a, {
     className,
@@ -14964,39 +14962,43 @@ var Item5 = (_a) => {
     })
   ));
 };
-var Submenu = ({ title, icon, children }) => {
-  const [open, setOpen] = React107.useState(false);
-  const submenuTitleId = uniqueId2();
+var Submenu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    title,
+    id
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "title",
+    "id"
+  ]);
   return /* @__PURE__ */ React107.createElement("li", { role: "presentation" }, /* @__PURE__ */ React107.createElement(
     "a",
-    {
+    __spreadValues({
       role: "menuitem",
       "aria-haspopup": "true",
-      "aria-expanded": open,
-      onClick: (e) => {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      },
-      className: classNames(
-        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full")
-      ),
       href: "#",
-      id: submenuTitleId
-    },
-    /* @__PURE__ */ React107.createElement(InlineIcon, { icon: open ? import_caretUpFilled2.default : import_caretDownFilled2.default, width: "12px", height: "12px", className: "mr-1" }),
-    /* @__PURE__ */ React107.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ React107.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)
-  ), open && /* @__PURE__ */ React107.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": submenuTitleId }, children));
+      id,
+      className: classNames(
+        tw("py-3 pr-6 pl-3 hover:bg-default cursor-pointer typography-small focusable flex items-center w-full"),
+        className
+      )
+    }, rest),
+    title
+  ), /* @__PURE__ */ React107.createElement("ul", { role: "menu", className: classNames(tw("flex flex-col")), "aria-labelledby": id }, children));
 };
 var SubmenuItem = (_a) => {
   var _b = _a, { className, active } = _b, rest = __objRest(_b, ["className", "active"]);
   return /* @__PURE__ */ React107.createElement(Navigation.Item, __spreadProps(__spreadValues({}, rest), { active, className: classNames(className, tw("pl-[56px]")) }));
 };
+Submenu.Item = SubmenuItem;
 Navigation.Header = Header;
 Navigation.Footer = Footer;
 Navigation.Section = Section2;
 Navigation.Item = Item5;
 Navigation.Submenu = Submenu;
-Submenu.Item = SubmenuItem;
 Navigation.Divider = Divider3;
 
 // src/molecules/Navigation/Navigation.tsx
@@ -15016,13 +15018,30 @@ var Item6 = (_a) => {
   ]);
   return /* @__PURE__ */ React108.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ React108.createElement(Badge.Notification, null, /* @__PURE__ */ React108.createElement(InlineIcon, { icon, width: "20px", height: "20px" })), icon && !showNotification && /* @__PURE__ */ React108.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), children);
 };
+var Submenu2 = ({ children, title, icon }) => {
+  const [open, setOpen] = React108.useState(false);
+  const id = uniqueId2();
+  return /* @__PURE__ */ React108.createElement(
+    Navigation.Submenu,
+    {
+      title: /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(InlineIcon, { icon: open ? import_caretUpFilled.default : import_caretDownFilled.default, width: "12px", height: "12px", className: "mr-1" }), /* @__PURE__ */ React108.createElement(Box.Flex, { paddingX: "1", gap: "4" }, icon && /* @__PURE__ */ React108.createElement(InlineIcon, { icon, width: "20px", height: "20px" }), title)),
+      "aria-expanded": open,
+      id,
+      onClick: (e) => {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    },
+    open && /* @__PURE__ */ React108.createElement("ul", { role: "menu", className: classNames12(tw("flex flex-col")), "aria-labelledby": id }, children)
+  );
+};
+Submenu2.Item = Navigation.Submenu.Item;
 Navigation2.Item = Item6;
-Navigation2.Submenu = Navigation.Submenu;
-Navigation2.Submenu.Item = Navigation.Submenu.Item;
 Navigation2.Divider = Navigation.Divider;
 Navigation2.Footer = Navigation.Footer;
 Navigation2.Header = Navigation.Header;
 Navigation2.Section = Navigation.Section;
+Navigation2.Submenu = Submenu2;
 
 // src/molecules/PageHeader/PageHeader.tsx
 import React110 from "react";