@automattic/vip-design-system 1.6.3 → 1.6.5

package/build/system/Button/Button.js

@@ -52,6 +52,7 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       '&:hover': {
         textDecoration: 'none'
       },
+      '&:focus': 'none',
       '&:focus-visible': function focusVisible(theme) {
         return theme.outline;
       },

package/build/system/Drawer/Drawer.d.ts

@@ -1,13 +1,23 @@
 /** @jsxImportSource theme-ui */
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import React from 'react';
-import { ThemeUIStyleObject } from 'theme-ui';
-export interface DrawerContentProps extends DialogPrimitive.DialogContentProps {
-    children?: React.ReactNode;
+import React, { ReactNode } from 'react';
+export interface DrawerContentProps extends DialogPrimitive.DialogContentProps, DrawerProps {
+}
+export declare const Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerProps extends DialogPrimitive.DialogProps {
+    children?: ReactNode;
+    trigger?: ReactNode;
+    label?: string;
     variant?: 'top' | 'right' | 'bottom' | 'left' | 'left-header' | 'right-header';
-    sx?: ThemeUIStyleObject;
+    width?: number | string;
+    height?: number | string;
+}
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerRootProps {
+    children: ReactNode;
+    trigger?: ReactNode;
 }
-declare const Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const Root: React.FC<DialogPrimitive.DialogProps>;
-declare const Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-export { Root, Trigger, Content };
+export declare const Trigger: ({ children }: {
+    children: any;
+}) => React.JSX.Element;
+export declare const Root: ({ children, trigger }: DrawerRootProps) => React.JSX.Element;

package/build/system/Drawer/Drawer.js

@@ -1,13 +1,15 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Trigger = exports.Root = exports.Content = void 0;
+exports.Trigger = exports.Root = exports.Drawer = exports.Content = void 0;
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("./styles");
 var _DialogClose = require("../NewDialog/DialogClose");
+var _DialogTitle = require("../NewDialog/DialogTitle");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["children", "sx", "variant"];
+var _excluded = ["children", "variant", "label", "width", "height"],
+  _excluded2 = ["children", "width", "height", "variant", "trigger", "label"];
 /** @jsxImportSource theme-ui */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -16,19 +18,59 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Content = exports.Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
-    sx = _ref.sx,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'left' : _ref$variant,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    label = _ref.label,
+    width = _ref.width,
+    height = _ref.height,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(DialogPrimitive.Portal, {
     children: [(0, _jsxRuntime.jsx)(DialogPrimitive.Overlay, {
       sx: (0, _styles.drawerOverlayStyles)(variant)
-    }), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, _extends({}, props, {
-      sx: _extends({}, (0, _styles.drawerContentStyles)(variant), sx),
+    }), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, _extends({}, rest, {
+      sx: (0, _styles.drawerContentStyles)(variant, width, height),
       ref: forwardedRef,
-      children: [children, (0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {})]
+      children: [(0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+        title: label,
+        hidden: true
+      }), (0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), children]
     }))]
   });
 });
-var Root = exports.Root = DialogPrimitive.Root;
-var Trigger = exports.Trigger = DialogPrimitive.Trigger;
+var Drawer = exports.Drawer = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardedRef) {
+  var children = _ref2.children,
+    width = _ref2.width,
+    height = _ref2.height,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'left' : _ref2$variant,
+    trigger = _ref2.trigger,
+    label = _ref2.label,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return (0, _jsxRuntime.jsx)(Root, {
+    trigger: trigger,
+    children: (0, _jsxRuntime.jsx)(Content, _extends({
+      width: width,
+      variant: variant,
+      label: label,
+      ref: forwardedRef
+    }, rest, {
+      children: children
+    }))
+  });
+});
+var Trigger = exports.Trigger = function Trigger(_ref3) {
+  var children = _ref3.children;
+  return (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
+    asChild: true,
+    children: children
+  });
+};
+var Root = exports.Root = function Root(_ref4) {
+  var children = _ref4.children,
+    trigger = _ref4.trigger;
+  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
+    children: [trigger && (0, _jsxRuntime.jsx)(Trigger, {
+      children: trigger
+    }), children]
+  });
+};

package/build/system/Drawer/Drawer.stories.d.ts

@@ -1,8 +1,10 @@
-import * as Drawer from './Drawer';
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+import { Drawer } from './Drawer';
 import type { StoryObj } from '@storybook/react';
 declare const _default: {
     title: string;
-    component: typeof Drawer;
+    component: import("react").ForwardRefExoticComponent<import("./Drawer").DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
             description: {
@@ -14,3 +16,5 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof Drawer>;
 export declare const Default: Story;
+export declare const ByParts: Story;
+export declare const VIPMobileMenu: Story;

package/build/system/Drawer/Drawer.stories.js

@@ -1,22 +1,23 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var Drawer = _interopRequireWildcard(require("./Drawer"));
+exports["default"] = exports.VIPMobileMenu = exports.Default = exports.ByParts = void 0;
+var _ai = require("react-icons/ai");
+var _bi = require("react-icons/bi");
+var _md = require("react-icons/md");
+var _Drawer = require("./Drawer");
 var _ = require("..");
+var _Logo = require("../Toolbar/Logo");
+var _CustomLink = require("../utils/stories/CustomLink");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /** @jsxImportSource theme-ui */
 var _default = exports["default"] = {
   title: 'Drawer',
-  component: Drawer,
+  component: _Drawer.Drawer,
   parameters: {
     docs: {
       description: {
-        component: "\nThe Drawer component is a navigation component that is hidden by default and can be toggled open and closed. It opens a panel that can contain any content. The base of this component is a Dialog.\n\n## Guidance\n\n### When to use the Drawer component\n\n- Use the Drawer component when you want to hide content that is not essential to the user experience. The Drawer component is a good choice for navigation menus, settings panels, and other non-essential content.\n- The VIP Dashboard uses this component to help users with some Responsive behavior.\n\n### When to consider something else\n\n- For essencial content, use other components.\n\n## Accessibility Considerations guidance\n\n- The Drawer is based on the Dialog component and inherits all of its accessibility considerations.\n- The trigger should be a button\n- The focus gets back to the trigger when the Drawer is closed\n- The Drawer should be closed when the Escape key is pressed\n- The Drawer should be closed when the overlay is clicked\n- The Drawer should be closed when the focus moves outside of the Drawer\n- The Drawer has a close button that should be used to close the Drawer\n\n## Using the component\n\n- Look at the examples below to see how the Drawer component is used.\n- You can use the `variant` prop to change the position of the Drawer. The default is `left`. Other options are: `top`, `right`, `bottom`.\n- You can pass some styles to the Drawer using the `sx` prop. It will be attached o the Content component. This is useful to change the width of the Drawer.\n\n## Component Properties\n"
+        component: "\nThe Drawer component is a navigation component that is hidden by default and can be toggled open and closed. It opens a panel that can contain any content. The base of this component is a Dialog.\n\n## Guidance\n\n### When to use the Drawer component\n\n- Use the Drawer component when you want to hide content that is not essential to the user experience. The Drawer component is a good choice for navigation menus, settings panels, and other non-essential content.\n- The VIP Dashboard uses this component to help users with some Responsive behavior.\n\n### When to consider something else\n\n- For essencial content, use other components.\n\n## Accessibility Considerations guidance\n\n- The Drawer is based on the Dialog component and inherits all of its accessibility considerations.\n- The trigger should be a button\n- The focus gets back to the trigger when the Drawer is closed\n- The Drawer should be closed when the Escape key is pressed\n- The Drawer should be closed when the overlay is clicked\n- The Drawer should be closed when the focus moves outside of the Drawer\n- The Drawer has a close button that should be used to close the Drawer\n\n## Using the component\n\n- Look at the examples below to see how the Drawer component is used.\n- You can use the `variant` prop to change the position of the  The default is `left`. Other options are: `top`, `right`, `bottom`.\n- You can pass some styles to the Drawer using the `sx` prop. It will be attached o the Content component. This is useful to change the width of the\n\n## Component Properties\n"
       }
     }
   }
@@ -24,114 +25,329 @@ var _default = exports["default"] = {
 var Default = exports.Default = {
   render: function render() {
     return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [(0, _jsxRuntime.jsxs)(Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(Drawer.Trigger, {
-          asChild: true,
-          children: (0, _jsxRuntime.jsx)(_.Button, {
-            children: "Open Drawer."
-          })
-        }), (0, _jsxRuntime.jsx)(Drawer.Content, {
+      children: [(0, _jsxRuntime.jsx)(_Drawer.Drawer, {
+        label: "My XYZ Dialog",
+        trigger: (0, _jsxRuntime.jsx)(_.Button, {
+          children: "Open "
+        }),
+        width: 320,
+        children: (0, _jsxRuntime.jsx)("p", {
           sx: {
-            width: 320
+            ml: 3
           },
-          children: (0, _jsxRuntime.jsx)("p", {
-            sx: {
-              ml: 3
-            },
-            children: "Hello from default"
-          })
-        })]
-      }), (0, _jsxRuntime.jsxs)(Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(Drawer.Trigger, {
-          asChild: true,
-          children: (0, _jsxRuntime.jsx)(_.Button, {
-            children: "Top"
-          })
-        }), (0, _jsxRuntime.jsx)(Drawer.Content, {
-          variant: "top",
-          children: (0, _jsxRuntime.jsx)("p", {
-            sx: {
-              ml: 3
-            },
-            children: "Hello from top"
-          })
-        })]
-      }), (0, _jsxRuntime.jsxs)(Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(Drawer.Trigger, {
-          asChild: true,
+          children: "Hello from default"
+        })
+      }), (0, _jsxRuntime.jsx)(_Drawer.Drawer, {
+        trigger: (0, _jsxRuntime.jsx)(_.Button, {
+          children: "Top"
+        }),
+        variant: "top",
+        label: "Dialog Content",
+        children: (0, _jsxRuntime.jsx)("p", {
+          sx: {
+            ml: 3
+          },
+          children: "Hello from top"
+        })
+      }), (0, _jsxRuntime.jsx)(_Drawer.Drawer, {
+        trigger: (0, _jsxRuntime.jsx)(_.Button, {
+          children: "Right"
+        }),
+        variant: "right",
+        label: "Dialog",
+        width: 500,
+        children: (0, _jsxRuntime.jsx)("p", {
+          sx: {
+            ml: 3
+          },
+          children: "Hello from right width 500px"
+        })
+      }), (0, _jsxRuntime.jsx)(_Drawer.Drawer, {
+        trigger: (0, _jsxRuntime.jsx)(_.Button, {
+          children: "Bottom"
+        }),
+        variant: "bottom",
+        label: "Dialog",
+        height: 200,
+        children: (0, _jsxRuntime.jsx)("p", {
+          sx: {
+            ml: 3
+          },
+          children: "Hello from bottom with 200px"
+        })
+      }), (0, _jsxRuntime.jsx)(_Drawer.Drawer, {
+        trigger: (0, _jsxRuntime.jsx)(_.Button, {
+          children: "Left"
+        }),
+        variant: "left",
+        label: "Dialog",
+        width: 600,
+        children: (0, _jsxRuntime.jsx)("p", {
+          sx: {
+            ml: 3
+          },
+          children: "Hello from left width 600px"
+        })
+      }), (0, _jsxRuntime.jsx)(_Drawer.Drawer, {
+        trigger: (0, _jsxRuntime.jsx)(_.Button, {
+          children: "Left Header"
+        }),
+        variant: "left-header",
+        label: "Dialog",
+        children: (0, _jsxRuntime.jsx)("p", {
+          sx: {
+            ml: 3
+          },
+          children: "Hello from left header (VIP Dashboard needs)"
+        })
+      }), (0, _jsxRuntime.jsx)(_Drawer.Drawer, {
+        trigger: (0, _jsxRuntime.jsx)(_.Button, {
+          children: "Right Header"
+        }),
+        variant: "left-header",
+        label: "Dialog",
+        children: (0, _jsxRuntime.jsx)("p", {
+          sx: {
+            ml: 3
+          },
+          children: "Hello from right header (VIP Dashboard needs)"
+        })
+      })]
+    });
+  }
+};
+var ByParts = exports.ByParts = {
+  render: function render() {
+    return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _jsxRuntime.jsxs)(_Drawer.Root, {
+        children: [(0, _jsxRuntime.jsx)(_Drawer.Trigger, {
           children: (0, _jsxRuntime.jsx)(_.Button, {
-            children: "Right"
+            children: "Open "
           })
-        }), (0, _jsxRuntime.jsx)(Drawer.Content, {
-          variant: "right",
+        }), (0, _jsxRuntime.jsx)(_Drawer.Content, {
+          width: 320,
+          label: "My XYZ Dialog",
           children: (0, _jsxRuntime.jsx)("p", {
             sx: {
               ml: 3
             },
-            children: "Hello from right"
+            children: "Hello from default"
           })
         })]
-      }), (0, _jsxRuntime.jsxs)(Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(Drawer.Trigger, {
-          asChild: true,
-          children: (0, _jsxRuntime.jsx)(_.Button, {
-            children: "Bottom"
-          })
-        }), (0, _jsxRuntime.jsx)(Drawer.Content, {
-          variant: "bottom",
-          children: (0, _jsxRuntime.jsx)("p", {
+      })
+    });
+  }
+};
+var VIPMobileMenu = exports.VIPMobileMenu = {
+  render: function render() {
+    return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _jsxRuntime.jsxs)(_Drawer.Root, {
+        children: [(0, _jsxRuntime.jsx)(_Drawer.Trigger, {
+          children: (0, _jsxRuntime.jsxs)(_.Button, {
+            type: "button",
+            variant: "tertiary",
             sx: {
-              ml: 3
+              display: 'flex',
+              alignItems: 'center',
+              fontSize: 2,
+              gap: 1,
+              mx: 2
             },
-            children: "Hello from bottom"
-          })
-        })]
-      }), (0, _jsxRuntime.jsxs)(Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(Drawer.Trigger, {
-          asChild: true,
-          children: (0, _jsxRuntime.jsx)(_.Button, {
-            children: "Left"
+            children: ["Menu", (0, _jsxRuntime.jsx)(_md.MdMenu, {
+              size: 24,
+              sx: {
+                mt: function mt(theme) {
+                  var _theme$space;
+                  return (theme == null || (_theme$space = theme.space) == null ? void 0 : _theme$space[1]) / 2 + "px";
+                }
+              }
+            })]
           })
-        }), (0, _jsxRuntime.jsx)(Drawer.Content, {
+        }), (0, _jsxRuntime.jsx)(_Drawer.Content, {
+          label: "Dialog X",
           variant: "left",
-          children: (0, _jsxRuntime.jsx)("p", {
-            sx: {
-              ml: 3
-            },
-            children: "Hello from left"
-          })
-        })]
-      }), (0, _jsxRuntime.jsxs)(Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(Drawer.Trigger, {
-          asChild: true,
-          children: (0, _jsxRuntime.jsx)(_.Button, {
-            children: "Left Header"
-          })
-        }), (0, _jsxRuntime.jsx)(Drawer.Content, {
-          variant: "left-header",
-          children: (0, _jsxRuntime.jsx)("p", {
-            sx: {
-              ml: 3
-            },
-            children: "Hello from left header (VIP Dashboard needs)"
-          })
-        })]
-      }), (0, _jsxRuntime.jsxs)(Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(Drawer.Trigger, {
-          asChild: true,
-          children: (0, _jsxRuntime.jsx)(_.Button, {
-            children: "Right Header"
-          })
-        }), (0, _jsxRuntime.jsx)(Drawer.Content, {
-          variant: "left-header",
-          children: (0, _jsxRuntime.jsx)("p", {
+          width: 320,
+          children: (0, _jsxRuntime.jsxs)("div", {
             sx: {
-              ml: 3
+              backgroundColor: 'toolbar.background',
+              boxShadow: 'none'
             },
-            children: "Hello from right header (VIP Dashboard needs)"
+            children: [(0, _jsxRuntime.jsx)("div", {
+              sx: {
+                height: 56,
+                width: '100%',
+                p: 4,
+                px: 5
+              },
+              children: (0, _jsxRuntime.jsx)(_Logo.Logo, {})
+            }), (0, _jsxRuntime.jsx)("div", {
+              sx: {
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                height: 'calc(100vh - 56px)',
+                display: 'flex',
+                flex: 1
+              },
+              children: (0, _jsxRuntime.jsxs)(_.Flex, {
+                sx: {
+                  width: '100%',
+                  flexDirection: 'column'
+                },
+                children: [(0, _jsxRuntime.jsxs)(_.Nav.Primary, {
+                  label: "Main Links",
+                  orientation: "vertical",
+                  sx: {
+                    p: 4
+                  },
+                  children: [(0, _jsxRuntime.jsx)(_.NavItem.MenuInverse, {
+                    href: "/apps",
+                    active: true,
+                    as: _CustomLink.CustomLink,
+                    children: "My Applications"
+                  }), (0, _jsxRuntime.jsx)(_.NavItem.MenuInverse, {
+                    href: "/orgs",
+                    as: _CustomLink.CustomLink,
+                    children: "My Organizations"
+                  })]
+                }), (0, _jsxRuntime.jsx)(_.Box, {
+                  sx: {
+                    alignSelf: 'stretch',
+                    backgroundColor: 'layer.1',
+                    minHeight: "calc(100vh - 56px)",
+                    pt: 2,
+                    px: 4,
+                    width: '100%',
+                    a: {
+                      border: 'none'
+                    }
+                  },
+                  children: (0, _jsxRuntime.jsxs)(_.Nav.Menu, {
+                    sx: {
+                      mb: 4
+                    },
+                    label: "Nav Menu",
+                    children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      href: "https://wordpress.com",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiGridAlt, {
+                          size: size
+                        });
+                      },
+                      as: _CustomLink.CustomLink,
+                      children: "Overview"
+                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      as: _CustomLink.CustomLink,
+                      href: "https://random-website.com/",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiWindows, {
+                          size: size
+                        });
+                      },
+                      children: "Network Sites"
+                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      as: _CustomLink.CustomLink,
+                      href: "https://random-website.com/",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_ai.AiOutlineLock, {
+                          size: size
+                        });
+                      },
+                      children: "Domains & TLS"
+                    }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
+                      active: true,
+                      label: "Logs",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiHistory, {
+                          size: size
+                        });
+                      },
+                      children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                        active: true,
+                        as: _CustomLink.CustomLink,
+                        href: "https://google.com/",
+                        children: "Audit"
+                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                        as: _CustomLink.CustomLink,
+                        href: "https://wpvip.com/",
+                        children: "Runtime"
+                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                        as: _CustomLink.CustomLink,
+                        href: "https://dashboard.wpvip.com/",
+                        children: "Slow Query"
+                      })]
+                    }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
+                      label: "Performance",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiTachometer, {
+                          size: size
+                        });
+                      },
+                      children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                        as: _CustomLink.CustomLink,
+                        href: "https://random-website.com/",
+                        children: "Metrics"
+                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                        as: _CustomLink.CustomLink,
+                        href: "https://random-website.com/",
+                        children: "Monitor"
+                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                        as: _CustomLink.CustomLink,
+                        href: "https://random-website.com/",
+                        children: "Cache"
+                      })]
+                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      as: _CustomLink.CustomLink,
+                      href: "https://random-website.com/",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiCodeAlt, {
+                          size: size
+                        });
+                      },
+                      children: "Code [v]"
+                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      as: _CustomLink.CustomLink,
+                      href: "https://random-website.com/",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiData, {
+                          size: size
+                        });
+                      },
+                      children: "Database [v]"
+                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      as: _CustomLink.CustomLink,
+                      href: "https://random-website.com/",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_md.MdOutlinePhotoLibrary, {
+                          size: size
+                        });
+                      },
+                      children: "Media [v]"
+                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      as: _CustomLink.CustomLink,
+                      href: "https://random-website.com/",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiBell, {
+                          size: size
+                        });
+                      },
+                      children: "Notifications"
+                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
+                      as: _CustomLink.CustomLink,
+                      href: "https://random-website.com/",
+                      renderIcon: function renderIcon(size) {
+                        return (0, _jsxRuntime.jsx)(_bi.BiBulb, {
+                          size: size
+                        });
+                      },
+                      children: "Features"
+                    })]
+                  })
+                })]
+              })
+            })]
           })
         })]
-      })]
+      })
     });
   }
 };