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

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

@@ -0,0 +1,1326 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useState } from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import { v4 as uuid } from 'uuid';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, NavSideBar, Separator } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import { AccountMultiple, Credentials, Earth, EmoticonHappy, Fingerprint, GlobeIcon, Logo, OpenInNew, ScaleBalance, TransitConnection, Verify, ViewDashboard, ViewGridPlusOutline } from './icons';
+import NavSideBarReadme from './NavSideBar.mdx';
+import NavSideBarHeader from './NavSideBarHeader';
+import NavSideBarItem from './NavSideBarItem';
+import NavSideBarSection from './NavSideBarSection';
+import NavSideBarSectionItem from './NavSideBarSectionItem';
+import NavSideBarSubTitle from './NavSideBarSubTitle';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/NavSideBar',
+  component: NavSideBar,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NavSideBarReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: {},
+  args: {
+    title: 'Continue',
+    hasCloseButton: true
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(NavSideBar, args, ___EmotionJSX(NavSideBarHeader, {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: Logo
+  }), ___EmotionJSX(Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    pb: "xl"
+  }, ___EmotionJSX(NavSideBarItem, {
+    key: "Overview",
+    icon: GlobeIcon,
+    id: "Overview"
+  }, "Overview"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, null, "Dashboard Links"), ___EmotionJSX(NavSideBarSection, {
+    title: "Dashboard",
+    key: "Dashboard",
+    id: "Dashboard",
+    icon: ViewDashboard
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Group",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Group"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Populations"
+  }, "Populations")), ___EmotionJSX(NavSideBarSection, {
+    title: "Identities",
+    key: "Identities",
+    id: "Identities",
+    icon: AccountMultiple
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Users",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Groups",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Groups"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Populations",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Populations"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Attributes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Attributes"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Roles"
+  }, "Roles")), ___EmotionJSX(NavSideBarSection, {
+    title: "Connections",
+    key: "Connections",
+    id: "Connections",
+    icon: TransitConnection
+  }, ___EmotionJSX(NavSideBarSubTitle, {
+    sx: {
+      ml: '45px'
+    },
+    key: "Connections Applications SubTitle"
+  }, "Applications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Applications"
+  }, "Applications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Application Catalog",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Catalog"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Application Portal",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Portal"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Identity Providers",
+    sx: {
+      ml: '45px'
+    }
+  }, "Identity Providers"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections External IDPs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "External IDPs"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Ping Products",
+    sx: {
+      ml: '45px'
+    }
+  }, "Ping Products"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections PingFederate",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingFederate"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections PingIntelligence",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingIntelligence"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Provisioning",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Provisioning"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections WebHooks",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "WebHooks"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Gateways",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Gateways"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Certificates & Key Pairs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Certificates & Key Pairs"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Resources"
+  }, "Resources")), ___EmotionJSX(NavSideBarSection, {
+    title: "Experiences",
+    key: "Experiences",
+    id: "Experiences",
+    icon: EmoticonHappy
+  }, ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Experience Policies",
+    sx: {
+      ml: '45px'
+    }
+  }, "Policies"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Authentication",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Authentication"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences MFA",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "MFA"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Password",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Password"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Risk",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Risk"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Flows",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Flows"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Forms",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Forms"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Language",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Languages"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Agreements",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Agreements"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Branding & Themes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Branding & Themes"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Notifications",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Notifications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Vanity Domains",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Vanity Domains"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Sender"
+  }, "Sender")), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, null, "PingOne Services"), ___EmotionJSX(NavSideBarItem, {
+    key: "DaVinci",
+    id: "DaVinci",
+    icon: ViewGridPlusOutline,
+    customIcon: OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, "DaVinci"), ___EmotionJSX(NavSideBarSection, {
+    title: "MFA",
+    key: "MFA",
+    id: "MFA",
+    icon: Fingerprint
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Users"
+  }, "Users"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Group"
+  }, "Group Test")), ___EmotionJSX(NavSideBarSection, {
+    title: "Risk",
+    key: "Risk",
+    id: "Risk",
+    icon: ScaleBalance
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Risk Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Risk Button Group"
+  }, "Group")), ___EmotionJSX(NavSideBarSection, {
+    title: "Verify",
+    key: "Verify",
+    id: "Verify",
+    icon: Verify
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Verify Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Verify Button Group"
+  }, "Group")), ___EmotionJSX(NavSideBarSection, {
+    title: "Credentials",
+    key: "Credentials",
+    id: "Credentials",
+    icon: Credentials
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Group"
+  }, "Group")), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSection, {
+    title: "Environment title that is so long, it wraps",
+    key: "Environment",
+    id: "Environment",
+    icon: Earth
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Group"
+  }, "Group"))));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.navBar["default"]
+  }
+};
+export var Controlled = function Controlled(args) {
+  var _useState = useState('Dashboard Link Group'),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  return ___EmotionJSX(NavSideBar, _extends({}, args, {
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
+  }), ___EmotionJSX(NavSideBarHeader, {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: Logo
+  }), ___EmotionJSX(Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, ___EmotionJSX(NavSideBarItem, {
+    key: "Overview",
+    icon: GlobeIcon,
+    id: "Overview"
+  }, "Overview"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, null, "Dashboard Links"), ___EmotionJSX(NavSideBarSection, {
+    title: "Dashboard",
+    key: "Dashboard",
+    id: "Dashboard",
+    icon: ViewDashboard
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Group",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Group"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Populations",
+    onPress: function onPress() {
+      setSelectedKey('MFA Button Users');
+    }
+  }, "Populations")), ___EmotionJSX(NavSideBarSection, {
+    title: "Identities",
+    key: "Identities",
+    id: "Identities",
+    icon: AccountMultiple
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Users",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Groups",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Groups"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Populations",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Populations"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Attributes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Attributes"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Roles"
+  }, "Roles")), ___EmotionJSX(NavSideBarSection, {
+    title: "Connections",
+    key: "Connections",
+    id: "Connections",
+    icon: TransitConnection
+  }, ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Connections Applications SubTitle",
+    sx: {
+      ml: '45px'
+    }
+  }, "Applications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Applications"
+  }, "Applications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Application Catalog",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Catalog"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Application Portal",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Portal"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Identity Providers",
+    sx: {
+      ml: '45px'
+    }
+  }, "Identity Providers"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections External IDPs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "External IDPs"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Ping Products",
+    sx: {
+      ml: '45px'
+    }
+  }, "Ping Products"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections PingFederate",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingFederate"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections PingIntelligence",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingIntelligence"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Provisioning",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Provisioning"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections WebHooks",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "WebHooks"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Gateways",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Gateways"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Certificates & Key Pairs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Certificates & Key Pairs"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Resources"
+  }, "Resources")), ___EmotionJSX(NavSideBarSection, {
+    title: "Experiences",
+    key: "Experiences",
+    id: "Experiences",
+    icon: EmoticonHappy
+  }, ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Experience Policies",
+    sx: {
+      ml: '45px'
+    }
+  }, "Policies"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Authentication",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Authentication"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences MFA",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "MFA"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Password",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Password"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Risk",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Risk"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Flows",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Flows"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Forms",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Forms"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Language",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Languages"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Agreements",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Agreements"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Branding & Themes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Branding & Themes"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Notifications",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Notifications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Vanity Domains",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Vanity Domains"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Sender"
+  }, "Sender")), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, null, "PingOne Services"), ___EmotionJSX(NavSideBarItem, {
+    key: "DaVinci",
+    id: "DaVinci",
+    icon: ViewGridPlusOutline,
+    customIcon: OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, "DaVinci"), ___EmotionJSX(NavSideBarSection, {
+    title: "MFA",
+    key: "MFA",
+    id: "MFA",
+    icon: Fingerprint
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Users"
+  }, "Users"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Group"
+  }, "Group Test")), ___EmotionJSX(NavSideBarSection, {
+    title: "Risk",
+    key: "Risk",
+    id: "Risk",
+    icon: ScaleBalance
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Risk Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Risk Button Group"
+  }, "Group")), ___EmotionJSX(NavSideBarSection, {
+    title: "Verify",
+    key: "Verify",
+    id: "Verify",
+    icon: Verify
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Verify Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Verify Button Group"
+  }, "Group")), ___EmotionJSX(NavSideBarSection, {
+    title: "Credentials",
+    key: "Credentials",
+    id: "Credentials",
+    icon: Credentials
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Group"
+  }, "Group")), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSection, {
+    title: "Environment title that is so long, it wraps",
+    key: "Environment",
+    id: "Environment",
+    icon: Earth
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Group"
+  }, "Group"))));
+};
+export var AutoCollapse = function AutoCollapse(args) {
+  return ___EmotionJSX(NavSideBar, _extends({}, args, {
+    isAutoСollapsible: true
+  }), ___EmotionJSX(NavSideBarHeader, {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: Logo
+  }), ___EmotionJSX(Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, ___EmotionJSX(NavSideBarItem, {
+    key: "Overview",
+    icon: GlobeIcon,
+    id: "Overview"
+  }, "Overview"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, null, "Dashboard Links"), ___EmotionJSX(NavSideBarSection, {
+    title: "Dashboard",
+    key: "Dashboard",
+    id: "Dashboard",
+    icon: ViewDashboard
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Group",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Group"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Dashboard Link Populations"
+  }, "Populations")), ___EmotionJSX(NavSideBarSection, {
+    title: "Identities",
+    key: "Identities",
+    id: "Identities",
+    icon: AccountMultiple
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Users",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Groups",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Groups"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Populations",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Populations"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Attributes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Attributes"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Identities Link Roles"
+  }, "Roles")), ___EmotionJSX(NavSideBarSection, {
+    title: "Connections",
+    key: "Connections",
+    id: "Connections",
+    icon: TransitConnection
+  }, ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Connections Applications SubTitle",
+    sx: {
+      ml: '45px'
+    }
+  }, "Applications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Applications"
+  }, "Applications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Application Catalog",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Catalog"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Application Portal",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Application Portal"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Identity Providers",
+    sx: {
+      ml: '45px'
+    }
+  }, "Identity Providers"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections External IDPs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "External IDPs"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Ping Products",
+    sx: {
+      ml: '45px'
+    }
+  }, "Ping Products"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections PingFederate",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingFederate"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections PingIntelligence",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "PingIntelligence"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Provisioning",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Provisioning"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections WebHooks",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "WebHooks"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Gateways",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Gateways"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Certificates & Key Pairs",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Certificates & Key Pairs"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Connections Resources"
+  }, "Resources")), ___EmotionJSX(NavSideBarSection, {
+    title: "Experiences",
+    key: "Experiences",
+    id: "Experiences",
+    icon: EmoticonHappy
+  }, ___EmotionJSX(NavSideBarSubTitle, {
+    key: "Experience Policies",
+    sx: {
+      ml: '45px'
+    }
+  }, "Policies"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Authentication",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Authentication"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences MFA",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "MFA"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Password",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Password"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Risk",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Risk"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Flows",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Flows"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Forms",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Forms"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Language",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Languages"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Agreements",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Agreements"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Branding & Themes",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Branding & Themes"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Notifications",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    }
+  }, "Notifications"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Vanity Domains",
+    linkProps: {
+      href: 'https://pingidentity.com/'
+    },
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, "Vanity Domains"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Experiences Sender"
+  }, "Sender")), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, null, "PingOne Services"), ___EmotionJSX(NavSideBarItem, {
+    key: "DaVinci",
+    id: "DaVinci",
+    icon: ViewGridPlusOutline,
+    customIcon: OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, "DaVinci"), ___EmotionJSX(NavSideBarSection, {
+    title: "MFA",
+    key: "MFA",
+    id: "MFA",
+    icon: Fingerprint
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Users"
+  }, "Users"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "MFA Button Group"
+  }, "Group Test")), ___EmotionJSX(NavSideBarSection, {
+    title: "Risk",
+    key: "Risk",
+    id: "Risk",
+    icon: ScaleBalance
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Risk Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Risk Button Group"
+  }, "Group")), ___EmotionJSX(NavSideBarSection, {
+    title: "Verify",
+    key: "Verify",
+    id: "Verify",
+    icon: Verify
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Verify Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Verify Button Group"
+  }, "Group")), ___EmotionJSX(NavSideBarSection, {
+    title: "Credentials",
+    key: "Credentials",
+    id: "Credentials",
+    icon: Credentials
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSubTitle, {
+    key: "PingOne Services",
+    sx: {
+      ml: '45px'
+    }
+  }, "PingOne Services"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Credentials Button Group"
+  }, "Group")), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), ___EmotionJSX(NavSideBarSection, {
+    title: "Environment title that is so long, it wraps",
+    key: "Environment",
+    id: "Environment",
+    icon: Earth
+  }, ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Users"
+  }, "Users"), ___EmotionJSX(NavSideBarSectionItem, {
+    key: "Earth Button Group"
+  }, "Group"))));
+};
+export var Dynamic = function Dynamic(args) {
+  var navSideBarSectionItems = [{
+    'data-id': 'overview',
+    icon: GlobeIcon,
+    key: 'Overview',
+    heading: 'Overview'
+  }, {
+    type: 'separator'
+  }, {
+    type: 'subTitle',
+    key: 'Dashboard Links SubHeading',
+    text: 'Dashboard Links'
+  }, {
+    'data-id': 'dashboard-data-id',
+    heading: 'Dashboard',
+    icon: 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: 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: 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: 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: ViewGridPlusOutline,
+    key: 'DaVinci',
+    heading: 'DaVinci',
+    customIcon: OpenInNew,
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      'aria-label': 'DaVinci Link'
+    }
+  }, {
+    'data-id': 'mfa-data-id',
+    icon: 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: 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: 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: 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: 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 ___EmotionJSX(NavSideBarSection, {
+      key: item.key,
+      title: item.heading,
+      id: item.key,
+      icon: item.icon
+    }, _mapInstanceProperty(_context = item.children).call(_context, function (child) {
+      switch (child.type) {
+        case 'separator':
+          return ___EmotionJSX(Separator, {
+            key: uuid(),
+            variant: "separator.navBarSubtitleSeparator"
+          });
+        case 'subTitle':
+          return ___EmotionJSX(NavSideBarSubTitle, {
+            key: child.key,
+            sx: {
+              ml: '45px'
+            }
+          }, child.text);
+        default:
+          return ___EmotionJSX(NavSideBarSectionItem, {
+            key: child.key,
+            linkProps: child.linkProps,
+            onClick: child.onClick
+          }, child.text);
+      }
+    }));
+  };
+  var renderNavSideBarItem = function renderNavSideBarItem(item) {
+    return ___EmotionJSX(NavSideBarItem, {
+      key: item.key,
+      icon: item.icon,
+      id: item.key,
+      customIcon: item.customIcon,
+      linkProps: item.linkProps
+    }, item.heading);
+  };
+  return ___EmotionJSX(NavSideBar, args, ___EmotionJSX(NavSideBarHeader, {
+    key: "nav-side-bar-header",
+    linkProps: {
+      href: 'https://pingidentity.com/',
+      target: '_blank',
+      'aria-label': 'home Link'
+    },
+    logo: Logo
+  }), ___EmotionJSX(Separator, {
+    m: "0",
+    backgroundColor: "neutral.60",
+    key: "top-separator"
+  }), ___EmotionJSX(Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, _mapInstanceProperty(navSideBarSectionItems).call(navSideBarSectionItems, function (item) {
+    switch (item.type) {
+      case 'separator':
+        return ___EmotionJSX(Separator, {
+          key: uuid(),
+          variant: "separator.navBarSeparator"
+        });
+      case 'subTitle':
+        return ___EmotionJSX(NavSideBarSubTitle, {
+          key: item.key
+        }, item.text);
+      default:
+        return item.children ? renderNavSideBarSection(item) : renderNavSideBarItem(item);
+    }
+  })));
+};