@pingux/astro 2.81.0-alpha.0 → 2.81.0-alpha.1

package/lib/cjs/components/NavSideBar/NavSideBar.stories.js

@@ -0,0 +1,1344 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Dynamic = exports.Default = exports.Controlled = exports.AutoCollapse = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _uuid = require("uuid");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _icons = require("./icons");
+var _NavSideBar = _interopRequireDefault(require("./NavSideBar.mdx"));
+var _NavSideBarHeader = _interopRequireDefault(require("./NavSideBarHeader"));
+var _NavSideBarItem = _interopRequireDefault(require("./NavSideBarItem"));
+var _NavSideBarSection = _interopRequireDefault(require("./NavSideBarSection"));
+var _NavSideBarSectionItem = _interopRequireDefault(require("./NavSideBarSectionItem"));
+var _NavSideBarSubTitle = _interopRequireDefault(require("./NavSideBarSubTitle"));
+var _react2 = require("@emotion/react");
+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; }
+var _default = {
+  title: 'Experimental/NavSideBar',
+  component: _index.NavSideBar,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NavSideBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: {},
+  args: {
+    title: 'Continue',
+    hasCloseButton: true
+  }
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.NavSideBar, args, (0, _react2.jsx)(_NavSideBarHeader["default"], {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: _icons.Logo
+  }), (0, _react2.jsx)(_index.Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    pb: "xl"
+  }, (0, _react2.jsx)(_NavSideBarItem["default"], {
+    key: "Overview",
+    icon: _icons.GlobeIcon,
+    id: "Overview"
+  }, "Overview"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], null, "Dashboard Links"), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Dashboard",
+    key: "Dashboard",
+    id: "Dashboard",
+    icon: _icons.ViewDashboard
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Dashboard Link Group",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Group"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Dashboard Link Populations"
+  }, "Populations")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Identities",
+    key: "Identities",
+    id: "Identities",
+    icon: _icons.AccountMultiple
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Users",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Groups",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Groups"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Populations",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Populations"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Attributes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Attributes"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Roles"
+  }, "Roles")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Connections",
+    key: "Connections",
+    id: "Connections",
+    icon: _icons.TransitConnection
+  }, (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    sx: {
+      ml: '45px'
+    },
+    key: "Connections Applications SubTitle"
+  }, "Applications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Applications"
+  }, "Applications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Application Catalog",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Catalog"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Application Portal",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Portal"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Identity Providers",
+    sx: {
+      ml: '45px'
+    }
+  }, "Identity Providers"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections External IDPs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "External IDPs"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Ping Products",
+    sx: {
+      ml: '45px'
+    }
+  }, "Ping Products"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections PingFederate",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingFederate"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections PingIntelligence",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingIntelligence"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Provisioning",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Provisioning"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections WebHooks",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "WebHooks"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Gateways",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Gateways"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Certificates & Key Pairs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Resources"
+  }, "Resources")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Experiences",
+    key: "Experiences",
+    id: "Experiences",
+    icon: _icons.EmoticonHappy
+  }, (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Experience Policies",
+    sx: {
+      ml: '45px'
+    }
+  }, "Policies"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Authentication",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Authentication"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences MFA",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "MFA"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Password",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Password"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Risk",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Risk"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Flows",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Flows"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Forms",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Forms"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Language",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Languages"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Agreements",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Agreements"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Branding & Themes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Branding & Themes"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Notifications",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Notifications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Vanity Domains",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Vanity Domains"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Sender"
+  }, "Sender")), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], null, "PingOne Services"), (0, _react2.jsx)(_NavSideBarItem["default"], {
+    key: "DaVinci",
+    id: "DaVinci",
+    icon: _icons.ViewGridPlusOutline,
+    customIcon: _icons.OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, "DaVinci"), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "MFA",
+    key: "MFA",
+    id: "MFA",
+    icon: _icons.Fingerprint
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "MFA Button Users"
+  }, "Users"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "MFA Button Group"
+  }, "Group Test")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Risk",
+    key: "Risk",
+    id: "Risk",
+    icon: _icons.ScaleBalance
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Risk Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Risk Button Group"
+  }, "Group")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Verify",
+    key: "Verify",
+    id: "Verify",
+    icon: _icons.Verify
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Verify Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Verify Button Group"
+  }, "Group")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Credentials",
+    key: "Credentials",
+    id: "Credentials",
+    icon: _icons.Credentials
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Credentials Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Credentials Button Group"
+  }, "Group")), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Environment title that is so long, it wraps",
+    key: "Environment",
+    id: "Environment",
+    icon: _icons.Earth
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Earth Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Earth Button Group"
+  }, "Group"))));
+};
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.navBar["default"]
+  }
+};
+var Controlled = function Controlled(args) {
+  var _useState = (0, _react.useState)('Dashboard Link Group'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  return (0, _react2.jsx)(_index.NavSideBar, (0, _extends2["default"])({}, args, {
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
+  }), (0, _react2.jsx)(_NavSideBarHeader["default"], {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: _icons.Logo
+  }), (0, _react2.jsx)(_index.Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, (0, _react2.jsx)(_NavSideBarItem["default"], {
+    key: "Overview",
+    icon: _icons.GlobeIcon,
+    id: "Overview"
+  }, "Overview"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], null, "Dashboard Links"), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Dashboard",
+    key: "Dashboard",
+    id: "Dashboard",
+    icon: _icons.ViewDashboard
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Dashboard Link Group",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Group"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Dashboard Link Populations",
+    onPress: function onPress() {
+      setSelectedKey('MFA Button Users');
+    }
+  }, "Populations")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Identities",
+    key: "Identities",
+    id: "Identities",
+    icon: _icons.AccountMultiple
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Users",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Groups",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Groups"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Populations",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Populations"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Attributes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Attributes"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Roles"
+  }, "Roles")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Connections",
+    key: "Connections",
+    id: "Connections",
+    icon: _icons.TransitConnection
+  }, (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Connections Applications SubTitle",
+    sx: {
+      ml: '45px'
+    }
+  }, "Applications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Applications"
+  }, "Applications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Application Catalog",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Catalog"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Application Portal",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Portal"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Identity Providers",
+    sx: {
+      ml: '45px'
+    }
+  }, "Identity Providers"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections External IDPs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "External IDPs"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Ping Products",
+    sx: {
+      ml: '45px'
+    }
+  }, "Ping Products"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections PingFederate",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingFederate"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections PingIntelligence",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingIntelligence"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Provisioning",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Provisioning"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections WebHooks",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "WebHooks"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Gateways",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Gateways"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Certificates & Key Pairs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Resources"
+  }, "Resources")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Experiences",
+    key: "Experiences",
+    id: "Experiences",
+    icon: _icons.EmoticonHappy
+  }, (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Experience Policies",
+    sx: {
+      ml: '45px'
+    }
+  }, "Policies"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Authentication",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Authentication"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences MFA",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "MFA"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Password",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Password"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Risk",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Risk"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Flows",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Flows"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Forms",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Forms"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Language",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Languages"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Agreements",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Agreements"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Branding & Themes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Branding & Themes"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Notifications",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Notifications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Vanity Domains",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Vanity Domains"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Sender"
+  }, "Sender")), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], null, "PingOne Services"), (0, _react2.jsx)(_NavSideBarItem["default"], {
+    key: "DaVinci",
+    id: "DaVinci",
+    icon: _icons.ViewGridPlusOutline,
+    customIcon: _icons.OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, "DaVinci"), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "MFA",
+    key: "MFA",
+    id: "MFA",
+    icon: _icons.Fingerprint
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "MFA Button Users"
+  }, "Users"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "MFA Button Group"
+  }, "Group Test")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Risk",
+    key: "Risk",
+    id: "Risk",
+    icon: _icons.ScaleBalance
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Risk Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Risk Button Group"
+  }, "Group")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Verify",
+    key: "Verify",
+    id: "Verify",
+    icon: _icons.Verify
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Verify Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Verify Button Group"
+  }, "Group")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Credentials",
+    key: "Credentials",
+    id: "Credentials",
+    icon: _icons.Credentials
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Credentials Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Credentials Button Group"
+  }, "Group")), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Environment title that is so long, it wraps",
+    key: "Environment",
+    id: "Environment",
+    icon: _icons.Earth
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Earth Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Earth Button Group"
+  }, "Group"))));
+};
+exports.Controlled = Controlled;
+var AutoCollapse = function AutoCollapse(args) {
+  return (0, _react2.jsx)(_index.NavSideBar, (0, _extends2["default"])({}, args, {
+    isAutoСollapsible: true
+  }), (0, _react2.jsx)(_NavSideBarHeader["default"], {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: _icons.Logo
+  }), (0, _react2.jsx)(_index.Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, (0, _react2.jsx)(_NavSideBarItem["default"], {
+    key: "Overview",
+    icon: _icons.GlobeIcon,
+    id: "Overview"
+  }, "Overview"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], null, "Dashboard Links"), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Dashboard",
+    key: "Dashboard",
+    id: "Dashboard",
+    icon: _icons.ViewDashboard
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Dashboard Link Group",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Group"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Dashboard Link Populations"
+  }, "Populations")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Identities",
+    key: "Identities",
+    id: "Identities",
+    icon: _icons.AccountMultiple
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Users",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Groups",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Groups"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Populations",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Populations"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Attributes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Attributes"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Identities Link Roles"
+  }, "Roles")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Connections",
+    key: "Connections",
+    id: "Connections",
+    icon: _icons.TransitConnection
+  }, (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Connections Applications SubTitle",
+    sx: {
+      ml: '45px'
+    }
+  }, "Applications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Applications"
+  }, "Applications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Application Catalog",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Catalog"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Application Portal",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Portal"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Identity Providers",
+    sx: {
+      ml: '45px'
+    }
+  }, "Identity Providers"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections External IDPs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "External IDPs"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Ping Products",
+    sx: {
+      ml: '45px'
+    }
+  }, "Ping Products"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections PingFederate",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingFederate"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections PingIntelligence",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingIntelligence"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Provisioning",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Provisioning"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections WebHooks",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "WebHooks"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Gateways",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Gateways"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Certificates & Key Pairs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Connections Resources"
+  }, "Resources")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Experiences",
+    key: "Experiences",
+    id: "Experiences",
+    icon: _icons.EmoticonHappy
+  }, (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "Experience Policies",
+    sx: {
+      ml: '45px'
+    }
+  }, "Policies"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Authentication",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Authentication"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences MFA",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "MFA"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Password",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Password"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Risk",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Risk"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Flows",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Flows"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Forms",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Forms"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Language",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Languages"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Agreements",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Agreements"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Branding & Themes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Branding & Themes"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Notifications",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Notifications"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Vanity Domains",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Vanity Domains"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Experiences Sender"
+  }, "Sender")), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], null, "PingOne Services"), (0, _react2.jsx)(_NavSideBarItem["default"], {
+    key: "DaVinci",
+    id: "DaVinci",
+    icon: _icons.ViewGridPlusOutline,
+    customIcon: _icons.OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, "DaVinci"), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "MFA",
+    key: "MFA",
+    id: "MFA",
+    icon: _icons.Fingerprint
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "MFA Button Users"
+  }, "Users"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "MFA Button Group"
+  }, "Group Test")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Risk",
+    key: "Risk",
+    id: "Risk",
+    icon: _icons.ScaleBalance
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Risk Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Risk Button Group"
+  }, "Group")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Verify",
+    key: "Verify",
+    id: "Verify",
+    icon: _icons.Verify
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Verify Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Verify Button Group"
+  }, "Group")), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Credentials",
+    key: "Credentials",
+    id: "Credentials",
+    icon: _icons.Credentials
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Credentials Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Credentials Button Group"
+  }, "Group")), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_NavSideBarSection["default"], {
+    title: "Environment title that is so long, it wraps",
+    key: "Environment",
+    id: "Environment",
+    icon: _icons.Earth
+  }, (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Earth Button Users"
+  }, "Users"), (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+    key: "Earth Button Group"
+  }, "Group"))));
+};
+exports.AutoCollapse = AutoCollapse;
+var Dynamic = function Dynamic(args) {
+  var navSideBarSectionItems = [{
+    'data-id': 'overview',
+    icon: _icons.GlobeIcon,
+    key: 'Overview',
+    heading: 'Overview'
+  }, {
+    type: 'separator'
+  }, {
+    type: 'subTitle',
+    key: 'Dashboard Links SubHeading',
+    text: 'Dashboard Links'
+  }, {
+    'data-id': 'dashboard-data-id',
+    heading: 'Dashboard',
+    icon: _icons.ViewDashboard,
+    key: 'Dashboard',
+    children: [{
+      key: 'Dashboard Link Group',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Group'
+    }, {
+      key: 'Dashboard Button Populations',
+      text: 'Populations'
+    }]
+  }, {
+    'data-id': 'identities-data-id',
+    icon: _icons.AccountMultiple,
+    key: 'Identities',
+    heading: 'Identities',
+    children: [{
+      key: 'Identity Link Users',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Users'
+    }, {
+      key: 'Identity Link Groups',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Groups'
+    }, {
+      key: 'Identity Link Populations',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Populations'
+    }, {
+      key: 'Identities Link Attributes',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Attributes'
+    }, {
+      key: 'Identities Button Roles',
+      text: 'Roles'
+    }]
+  }, {
+    'data-id': 'connections-data-id',
+    icon: _icons.TransitConnection,
+    key: 'Connections',
+    heading: 'Connections',
+    children: [{
+      type: 'subTitle',
+      key: 'Connections Applications SubHeading',
+      text: 'Applications'
+    }, {
+      key: 'Connections Link Applications',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Applications'
+    }, {
+      key: 'Connections Link Application Catalog',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Application Catalog'
+    }, {
+      key: 'Connections Link Application Portal',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Application Portal'
+    }, {
+      type: 'separator'
+    }, {
+      type: 'subTitle',
+      key: 'Identity Providers SubHeading',
+      text: 'Identity Providers'
+    }, {
+      key: 'Connections Link External IDPs',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'External IDPs'
+    }, {
+      type: 'separator'
+    }, {
+      type: 'subTitle',
+      key: 'Ping Products SubHeading',
+      text: 'Ping Products'
+    }, {
+      key: 'Connections Link PingFederate',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'PingFederate'
+    }, {
+      key: 'Connections Link PingIntelligence',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'PingIntelligence'
+    }, {
+      type: 'separator'
+    }, {
+      key: 'Connections Link Provisioning',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Provisioning'
+    }, {
+      key: 'Connections Link WebHooks',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'WebHooks'
+    }, {
+      key: 'Connections Link Gateways',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Gateways'
+    }, {
+      key: 'Connections Link Certificates & Key Pairs',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Certificates & Key Pairs'
+    }, {
+      key: 'Connections Button Resources',
+      text: 'Resources'
+    }]
+  }, {
+    'data-id': 'experiences-data-id',
+    icon: _icons.EmoticonHappy,
+    key: 'Experiences',
+    heading: 'Experiences',
+    children: [{
+      type: 'subTitle',
+      key: 'Experience Policies SubHeading',
+      text: 'Policies'
+    }, {
+      key: 'Experiences Authentication',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Authentication'
+    }, {
+      key: 'Experiences MFA',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'MFA'
+    }, {
+      key: 'Experiences Password',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Password'
+    }, {
+      type: 'separator'
+    }, {
+      key: 'Experiences Risk',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Risk'
+    }, {
+      key: 'Experiences Flows',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Flows'
+    }, {
+      key: 'Experiences Forms',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Forms'
+    }, {
+      key: 'Experiences Languages',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Languages'
+    }, {
+      key: 'Experiences Agreements',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Agreements'
+    }, {
+      key: 'Experiences Branding & Themes',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Branding & Themes'
+    }, {
+      key: 'Experiences Notifications',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Notifications'
+    }, {
+      key: 'Experiences Vanity Domains',
+      linkProps: {
+        href: 'https://pingidentity.com/'
+      },
+      text: 'Vanity Domains',
+      onClick: function onClick(e) {
+        return e.preventDefault();
+      }
+    }, {
+      key: 'Experiences Sender',
+      text: 'Sender'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'subTitle',
+    key: 'DaVinci SubHeading',
+    text: 'PingOne Services'
+  }, {
+    'data-id': 'da-vinci-data-id',
+    icon: _icons.ViewGridPlusOutline,
+    key: 'DaVinci',
+    heading: 'DaVinci',
+    customIcon: _icons.OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, {
+    'data-id': 'mfa-data-id',
+    icon: _icons.Fingerprint,
+    key: 'MFA',
+    heading: 'MFA',
+    children: [{
+      key: 'MFA Button Users',
+      text: 'Users'
+    }, {
+      type: 'separator'
+    }, {
+      type: 'subTitle',
+      key: 'MFA SubHeading',
+      text: 'PingOne Services'
+    }, {
+      key: 'MFA Button Group',
+      text: 'Group Test'
+    }]
+  }, {
+    'data-id': 'risk-data-id',
+    icon: _icons.ScaleBalance,
+    key: 'Risk',
+    heading: 'Risk',
+    children: [{
+      key: 'Risk Button Users',
+      text: 'Users'
+    }, {
+      type: 'subTitle',
+      key: 'Risk SubHeading',
+      text: 'PingOne Services'
+    }, {
+      key: 'Risk Button Group',
+      text: 'Group'
+    }]
+  }, {
+    'data-id': 'verify-data-id',
+    icon: _icons.Verify,
+    key: 'Verify',
+    heading: 'Verify',
+    children: [{
+      key: 'Verify Button Users',
+      text: 'Users'
+    }, {
+      type: 'subTitle',
+      key: 'Verify SubHeading',
+      text: 'PingOne Services'
+    }, {
+      key: 'Verify Button Group',
+      text: 'Group'
+    }]
+  }, {
+    'data-id': 'credentials-data-id',
+    icon: _icons.Credentials,
+    key: 'Credentials',
+    heading: 'Credentials',
+    children: [{
+      key: 'Credentials Button Users',
+      text: 'Users'
+    }, {
+      type: 'subTitle',
+      key: 'Credential SubHeading',
+      text: 'PingOne Services'
+    }, {
+      key: 'Credentials Button Group',
+      text: 'Group'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    'data-id': 'environment-data-id',
+    icon: _icons.Earth,
+    key: 'Environment',
+    heading: 'Environment title that is so long, it wraps',
+    children: [{
+      key: 'Environment Button Users',
+      text: 'Users'
+    }, {
+      key: 'Environment Button Group',
+      text: 'Group'
+    }]
+  }];
+  var renderNavSideBarSection = function renderNavSideBarSection(item) {
+    var _context;
+    return (0, _react2.jsx)(_NavSideBarSection["default"], {
+      key: item.key,
+      title: item.heading,
+      id: item.key,
+      icon: item.icon
+    }, (0, _map["default"])(_context = item.children).call(_context, function (child) {
+      switch (child.type) {
+        case 'separator':
+          return (0, _react2.jsx)(_index.Separator, {
+            key: (0, _uuid.v4)(),
+            variant: "separator.navBarSubtitleSeparator"
+          });
+        case 'subTitle':
+          return (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+            key: child.key,
+            sx: {
+              ml: '45px'
+            }
+          }, child.text);
+        default:
+          return (0, _react2.jsx)(_NavSideBarSectionItem["default"], {
+            key: child.key,
+            linkProps: child.linkProps,
+            onClick: child.onClick
+          }, child.text);
+      }
+    }));
+  };
+  var renderNavSideBarItem = function renderNavSideBarItem(item) {
+    return (0, _react2.jsx)(_NavSideBarItem["default"], {
+      key: item.key,
+      icon: item.icon,
+      id: item.key,
+      customIcon: item.customIcon,
+      linkProps: item.linkProps
+    }, item.heading);
+  };
+  return (0, _react2.jsx)(_index.NavSideBar, args, (0, _react2.jsx)(_NavSideBarHeader["default"], {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: _icons.Logo
+  }), (0, _react2.jsx)(_index.Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, (0, _map["default"])(navSideBarSectionItems).call(navSideBarSectionItems, function (item) {
+    switch (item.type) {
+      case 'separator':
+        return (0, _react2.jsx)(_index.Separator, {
+          key: (0, _uuid.v4)(),
+          variant: "separator.navBarSeparator"
+        });
+      case 'subTitle':
+        return (0, _react2.jsx)(_NavSideBarSubTitle["default"], {
+          key: item.key
+        }, item.text);
+      default:
+        return item.children ? renderNavSideBarSection(item) : renderNavSideBarItem(item);
+    }
+  })));
+};
+exports.Dynamic = Dynamic;