@pingux/astro 2.122.1-alpha.1 → 2.123.0-alpha.0

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

@@ -15,23 +15,24 @@ var _react = _interopRequireWildcard(require("react"));
 var _AccountCheckOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountCheckOutlineIcon"));
 var _AccountMultipleIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountMultipleIcon"));
 var _AccountMultipleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountMultipleOutlineIcon"));
+var _ApplicationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ApplicationOutlineIcon"));
 var _AppsIcon = _interopRequireDefault(require("@pingux/mdi-react/AppsIcon"));
 var _CheckCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleOutlineIcon"));
 var _CodeTagsIcon = _interopRequireDefault(require("@pingux/mdi-react/CodeTagsIcon"));
 var _CogOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CogOutlineIcon"));
+var _ConnectionIcon = _interopRequireDefault(require("@pingux/mdi-react/ConnectionIcon"));
 var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
-var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/EmoticonHappyOutlineIcon"));
 var _FileTreeIcon = _interopRequireDefault(require("@pingux/mdi-react/FileTreeIcon"));
-var _FingerprintIcon = _interopRequireDefault(require("@pingux/mdi-react/FingerprintIcon"));
 var _GlobeIcon = _interopRequireDefault(require("@pingux/mdi-react/GlobeIcon"));
+var _KeyChainIcon = _interopRequireDefault(require("@pingux/mdi-react/KeyChainIcon"));
 var _LayersOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LayersOutlineIcon"));
+var _MonitorScreenshotIcon = _interopRequireDefault(require("@pingux/mdi-react/MonitorScreenshotIcon"));
 var _OpenInNewIcon = _interopRequireDefault(require("@pingux/mdi-react/OpenInNewIcon"));
 var _PaletteOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/PaletteOutlineIcon"));
-var _ScaleBalanceIcon = _interopRequireDefault(require("@pingux/mdi-react/ScaleBalanceIcon"));
+var _PulseIcon = _interopRequireDefault(require("@pingux/mdi-react/PulseIcon"));
 var _ShieldCheckOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ShieldCheckOutlineIcon"));
+var _ShieldStarOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ShieldStarOutlineIcon"));
 var _ShowChartIcon = _interopRequireDefault(require("@pingux/mdi-react/ShowChartIcon"));
-var _TransitConnectionVariantIcon = _interopRequireDefault(require("@pingux/mdi-react/TransitConnectionVariantIcon"));
-var _ViewDashboardIcon = _interopRequireDefault(require("@pingux/mdi-react/ViewDashboardIcon"));
 var _ViewDashboardOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ViewDashboardOutlineIcon"));
 var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ViewGridPlusOutlineIcon"));
 var _WidgetsOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/WidgetsOutlineIcon"));
@@ -130,250 +131,300 @@ var Verify = function Verify(props) {
   }))))));
 };
 var data = [{
-  'data-id': 'dashboard-data-id',
-  heading: 'Dashboard',
-  icon: _ViewDashboardIcon["default"],
-  key: 'Dashboard',
+  'data-id': 'ipsum-data-id',
+  icon: _PulseIcon["default"],
+  key: 'Ipsum',
+  heading: 'Ipsum',
   children: [(0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Dashboard Link Group",
-    id: "Dashboard Link Group",
-    variant: "variants.navBar.itemButton",
-    href: "https://pingidentity.com/"
-  }, "Group"), (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Dashboard Link Populations",
-    id: "Dashboard Link Populations"
-  }, "Populations")]
-}, {
-  'data-id': 'identities-data-id',
-  icon: _AccountMultipleIcon["default"],
-  key: 'Identities',
-  heading: 'Identities',
-  children: [(0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Identities Link Users",
-    id: "Identities Link Users",
+    key: "Ipsum Link Users",
+    id: "Ipsum Link Users",
     href: "https://pingidentity.com/"
   }, "Users"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Identities Link Groups",
-    id: "Identities Link Groups",
+    key: "Ipsum Link Groups",
+    id: "Ipsum Link Groups",
     href: "https://pingidentity.com/"
   }, "Groups"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Identities Link Populations",
-    id: "Identities Link Populations",
+    key: "Ipsum Link Populations",
+    id: "Ipsum Link Populations",
     href: "https://pingidentity.com/"
   }, "Populations"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Identities Link Attributes",
-    id: "Identities Link Attributes",
+    key: "Ipsum Link Attributes",
+    id: "Ipsum Link Attributes",
     href: "https://pingidentity.com/"
   }, "Attributes"), (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Identities Link Roles",
-    id: "Identities Link Roles"
+    key: "Ipsum Link Roles",
+    id: "Ipsum Link Roles",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Roles")]
 }, {
-  'data-id': 'connections-data-id',
-  icon: _TransitConnectionVariantIcon["default"],
-  key: 'Connections',
-  heading: 'Connections',
-  children: [{
-    hasSeparator: false,
-    key: 'Applications',
-    subTitle: 'Applications'
-  }, (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections Applications",
-    id: "Connections Applications",
+  'data-id': 'dolor-data-id',
+  icon: _AccountMultipleIcon["default"],
+  key: 'Dolor',
+  heading: 'Dolor',
+  children: [(0, _react2.jsx)(_.NavBarItemLink, {
+    key: "Dolor Applications",
+    id: "Dolor Applications",
     href: "https://pingidentity.com/"
   }, "Applications"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections Application Catalog",
-    id: "Connections Application Catalog",
+    key: "Dolor Application Catalog",
+    id: "Dolor Application Catalog",
     href: "https://pingidentity.com/"
   }, "Application Catalog"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections Application Portal",
-    id: "Connections Application Portal",
+    key: "Dolor Application Portal",
+    id: "Dolor Application Portal",
     href: "https://pingidentity.com/"
-  }, "Application Portal"), {
-    key: 'Identity Providers',
-    subTitle: 'Identity Providers'
-  }, (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections External IDPs",
-    id: "Connections External IDPs",
+  }, "Application Portal"), (0, _react2.jsx)(_.NavBarItemLink, {
+    key: "Dolor External IDPs",
+    id: "Dolor External IDPs",
     href: "https://pingidentity.com/"
-  }, "External IDPs"), {
-    key: 'Ping Products',
-    subTitle: 'Ping Products'
-  }, (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections PingFederate",
-    id: "Connections PingFederate",
+  }, "External IDPs"), (0, _react2.jsx)(_.NavBarItemLink, {
+    key: "Dolor PingFederate",
+    id: "Dolor PingFederate",
     href: "https://pingidentity.com/"
   }, "PingFederate"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections PingIntelligence",
-    id: "Connections PingIntelligence",
+    key: "Dolor PingIntelligence",
+    id: "Dolor PingIntelligence",
     href: "https://pingidentity.com/"
   }, "PingIntelligence"), (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSubtitleSeparator"
   }), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections Provisioning",
-    id: "Connections Provisioning",
+    key: "Dolor Provisioning",
+    id: "Dolor Provisioning",
     href: "https://pingidentity.com/"
   }, "Provisioning"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections WebHooks",
-    id: "Connections WebHooks",
+    key: "Dolor WebHooks",
+    id: "Dolor WebHooks",
     href: "https://pingidentity.com/"
   }, "WebHooks"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections Gateways",
-    id: "Connections Gateways",
+    key: "Dolor Gateways",
+    id: "Dolor Gateways",
     href: "https://pingidentity.com/"
   }, "Gateways"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Connections Certificates & Key Pairs",
-    id: "Connections Certificates & Key Pairs",
+    key: "Dolor Certificates & Key Pairs",
+    id: "Dolor Certificates & Key Pairs",
     href: "https://pingidentity.com/"
   }, "Certificates & Key Pairs"), (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Connections Resources",
-    id: "Connections Resources"
+    key: "Dolor Resources",
+    id: "Dolor Resources",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Resources")]
 }, {
-  'data-id': 'experiences-data-id',
-  icon: _EmoticonHappyOutlineIcon["default"],
-  key: 'Experiences',
-  heading: 'Experiences',
-  children: [{
-    hasSeparator: false,
-    key: 'Policies',
-    subTitle: 'Policies'
-  }, (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Authentication",
-    id: "Experiences Authentication",
+  'data-id': 'sit-data-id',
+  icon: _ApplicationOutlineIcon["default"],
+  key: 'Sit',
+  heading: 'Sit',
+  children: [(0, _react2.jsx)(_.NavBarItemLink, {
+    key: "Sit Authentication",
+    id: "Sit Authentication",
     href: "https://pingidentity.com/"
   }, "Authentication"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences MFA",
-    id: "Experiences MFA",
+    key: "Sit MFA",
+    id: "Sit MFA",
     href: "https://pingidentity.com/"
   }, "MFA"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Password",
-    id: "Experiences Password",
+    key: "Sit Password",
+    id: "Sit Password",
     href: "https://pingidentity.com/"
   }, "Password"), (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSubtitleSeparator"
   }), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Risk",
-    id: "Experiences Risk",
+    key: "Sit Risk",
+    id: "Sit Risk",
     href: "https://pingidentity.com/"
   }, "Risk"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Flows",
-    id: "Experiences Flows",
+    key: "Sit Flows",
+    id: "Sit Flows",
     href: "https://pingidentity.com/"
   }, "Flows"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Forms",
-    id: "Experiences Forms",
+    key: "Sit Forms",
+    id: "Sit Forms",
     href: "https://pingidentity.com/"
   }, "Forms"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Languages",
-    id: "Experiences Languages",
+    key: "Sit Languages",
+    id: "Sit Languages",
     href: "https://pingidentity.com/"
   }, "Languages"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Agreements",
-    id: "Experiences Agreements",
+    key: "Sit Agreements",
+    id: "Sit Agreements",
     href: "https://pingidentity.com/"
   }, "Agreements"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Branding & Themes",
-    id: "Experiences Branding & Themes",
+    key: "Sit Branding & Themes",
+    id: "Sit Branding & Themes",
     href: "https://pingidentity.com/"
   }, "Branding & Themes"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Notifications",
-    id: "Experiences Notifications",
+    key: "Sit Notifications",
+    id: "Sit Notifications",
     href: "https://pingidentity.com/"
   }, "Notifications"), (0, _react2.jsx)(_.NavBarItemLink, {
-    key: "Experiences Vanity Domains",
-    id: "Experiences Vanity Domains",
+    key: "Sit Vanity Domains",
+    id: "Sit Vanity Domains",
     href: "https://pingidentity.com/",
     onClick: function onClick(e) {
       return e.preventDefault();
     }
   }, "Vanity Domains"), (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Experiences Sender",
-    id: "Experiences Sender"
+    key: "Sit Sender",
+    id: "Sit Sender",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Sender")]
 }];
 var secondData = [{
-  'data-id': 'da-vinci-data-id',
+  'data-id': 'amet-data-id',
   icon: _ViewGridPlusOutlineIcon["default"],
-  key: 'DaVinci',
-  heading: 'DaVinci',
+  key: 'Amet',
+  heading: 'Amet',
   customIcon: _OpenInNewIcon["default"],
-  href: 'https://pingidentity.com/'
+  href: 'https://pingidentity.com/',
+  size: 'xs'
 }, {
-  'data-id': 'mfa-data-id',
-  icon: _FingerprintIcon["default"],
-  key: 'MFA',
-  heading: 'MFA',
+  'data-id': 'consectur-data-id',
+  icon: _CheckCircleOutlineIcon["default"],
+  key: 'Consectur',
+  heading: 'Consectur',
   children: [(0, _react2.jsx)(_.NavBarItemButton, {
-    id: "MFA Button Users",
-    key: "MFA Button Users"
-  }, "Users"), {
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "MFA Button Group",
-    id: "MFA Button Group"
+    id: "Consectur Button Users",
+    key: "Consectur Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Consectur Button Group",
+    id: "Consectur Button Group",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Group Test")]
 }, {
-  'data-id': 'risk-data-id',
-  icon: _ScaleBalanceIcon["default"],
-  key: 'Risk',
-  heading: 'Risk',
+  'data-id': 'adipiscing-data-id',
+  icon: _ShieldStarOutlineIcon["default"],
+  key: 'Adipiscing',
+  heading: 'Adipiscing',
   children: [(0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Risk Button Users",
-    id: "Risk Button Users"
-  }, "Users"), {
-    hasSeparator: false,
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Risk Button Group",
-    id: "Risk Button Group"
+    key: "Adipiscing Button Users",
+    id: "Adipiscing Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Adipiscing Button Group",
+    id: "Adipiscing Button Group",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Group")]
 }, {
-  'data-id': 'verify-data-id',
+  'data-id': 'elit-data-id',
   icon: Verify,
-  key: 'Verify',
-  heading: 'Verify',
+  key: 'Elit',
+  heading: 'Elit',
   children: [(0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Verify Button Users",
-    id: "Verify Button Users"
-  }, "Users"), {
-    hasSeparator: false,
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Verify Button Group",
-    id: "Verify Button Group"
+    key: "Elit Button Users",
+    id: "Elit Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Elit Button Group",
+    id: "Elit Button Group",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Group")]
 }, {
-  'data-id': 'credentials-data-id',
+  'data-id': 'sed-do-eiusmod-data-id',
   icon: Credentials,
-  key: 'Credentials',
-  heading: 'Credentials',
+  key: 'Sed Do Eiusmod',
+  heading: 'Sed Do Eiusmod',
   children: [(0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Credentials Button Users",
-    id: "Credentials Button Users"
-  }, "Users"), {
-    hasSeparator: false,
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Credentials Button Group",
-    id: "Credentials Button Group"
+    key: "Sed Do Eiusmod Button Users",
+    id: "Sed Do Eiusmod Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Sed Do Eiusmod Button Group",
+    id: "Sed Do Eiusmod Button Group",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Group")]
+}, {
+  'data-id': 'tempor-data-id',
+  heading: 'Tempor Incididunt ut Labore et Dolore Magna Aliqua',
+  icon: _KeyChainIcon["default"],
+  key: 'tempor',
+  children: [(0, _react2.jsx)(_.NavBarItemLink, {
+    key: "tempor Link Group",
+    id: "tempor Link Group",
+    variant: "variants.navBar.itemButton",
+    href: "https://pingidentity.com/"
+  }, "Group"), (0, _react2.jsx)(_.NavBarItemButton, {
+    key: "tempor Link Populations",
+    id: "tempor Link Populations",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Populations")]
 }];
 var thirdData = [{
-  'data-id': 'environment-data-id',
+  'data-id': 'ut-enim-data-id',
+  icon: _ConnectionIcon["default"],
+  key: 'Ut-Enim',
+  heading: 'Ut Enim',
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Ut Enim Button Users",
+    id: "Ut Enim Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Ut Enim Button Group",
+    id: "Ut Enim Button Group",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Group")]
+}, {
+  'data-id': 'ad-minim-data-id',
+  icon: _MonitorScreenshotIcon["default"],
+  key: 'ad-minim',
+  heading: 'Ad Minim',
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Ad Minim Button Users",
+    id: "Ad Minim Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+    key: "Ad Minim Button Group",
+    id: "Ad Minim Button Group",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Group")]
+}, {
+  'data-id': 'veniam-data-id',
   icon: _EarthIcon["default"],
-  key: 'Environment',
-  heading: 'Environment title that is so long, it wraps',
+  key: 'Veniam',
+  heading: 'Veniam',
   children: [(0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Earth Button Users",
-    id: "Earth Button Users"
+    key: "Veniam Button Users",
+    id: "Veniam Button Users",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
-    key: "Earth Button Group",
-    id: "Earth Button Group"
+    key: "Veniam Button Group",
+    id: "Veniam Button Group",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Group")]
 }];
 var Default = function Default() {
@@ -396,16 +447,18 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_.NavBarItem, {
     "data-id": "nav-bar-item",
     icon: _GlobeIcon["default"],
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
+    id: "Lorem",
+    key: "Lorem",
+    text: "Lorem",
+    iconProps: {
+      size: '18px'
+    }
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: data,
     "data-id": "nav-bar-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: thirdData,
@@ -591,7 +644,7 @@ var OnyxDefault = function OnyxDefault() {
 };
 exports.OnyxDefault = OnyxDefault;
 var Controlled = function Controlled() {
-  var _useState = (0, _react.useState)('Dashboard Link Group'),
+  var _useState = (0, _react.useState)('Lorem Link Group'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedKey = _useState2[0],
     setSelectedKey = _useState2[1];
@@ -633,16 +686,18 @@ var Controlled = function Controlled() {
   }, (0, _react2.jsx)(_.NavBarItem, {
     "data-id": "nav-bar-item",
     icon: _GlobeIcon["default"],
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
+    id: "Lorem",
+    key: "Lorem",
+    text: "Lorem",
+    iconProps: {
+      size: '18px'
+    }
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: data,
     "data-id": "first-nav-bar-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: customData,
@@ -672,16 +727,18 @@ var AutoCollapse = function AutoCollapse() {
   }, (0, _react2.jsx)(_.NavBarItem, {
     "data-id": "nav-bar-item",
     icon: _GlobeIcon["default"],
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
+    id: "Lorem",
+    key: "Lorem",
+    text: "Lorem",
+    iconProps: {
+      size: '18px'
+    }
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: data,
     "data-id": "nav-bar-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_.NavBarSection, {
     items: thirdData,

package/lib/cjs/components/NavBar/NavBar.styles.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _colors = require("../../styles/colors");
 var _AccordionGrid = _interopRequireDefault(require("../AccordionGridGroup/AccordionGrid.styles"));
 var _Buttons = require("../Button/Buttons.styles");
 var _Text = require("../Text/Text.styles");
@@ -202,7 +203,7 @@ var subtitle = {
 };
 var headerText = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
   whiteSpace: 'break-spaces',
-  lineHeight: 1,
+  lineHeight: 1.15,
   fontSize: 'md',
   fontWeight: 1,
   maxWidth: '150px',
@@ -237,9 +238,9 @@ var headerNav = {
   fontSize: '16px',
   '&.is-focused': {
     outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus'
+    boxShadow: "0 0 0 1px ".concat(_colors.focus),
+    WebkitBoxShadow: "0 0 0 1px ".concat(_colors.focus),
+    MozBoxShadow: "0 0 0 1px ".concat(_colors.focus)
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'

package/lib/cjs/components/NavBarSection/NavBarItem.js

@@ -18,7 +18,7 @@ var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["icon", "text", "className", "id", "onPress"];
+var _excluded = ["icon", "text", "className", "id", "onPress", "iconProps"];
 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 NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -27,6 +27,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className = props.className,
     key = props.id,
     onPressCallback = props.onPress,
+    iconProps = props.iconProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var navItemRef = (0, _hooks.useLocalOrForwardRef)(null);
 
@@ -84,7 +85,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx: {
       alignItems: 'center'
     }
-  }, icon && (0, _react2.jsx)(_index.Icon, {
+  }, icon && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: icon,
     title: {
       name: text
@@ -95,7 +96,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       color: color,
       fill: color
     }
-  }), (0, _react2.jsx)(_index.Text, {
+  }, iconProps)), (0, _react2.jsx)(_index.Text, {
     variant: state.navStyles.navBarItemText
   }, text)));
 });

package/lib/cjs/components/NavBarSection/NavBarItemButton.js

@@ -13,12 +13,11 @@ var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "id", "onPress", "sx"];
+var _excluded = ["className", "id", "onPress"];
 var NavBarItemButton = function NavBarItemButton(props) {
   var className = props.className,
     key = props.id,
     onPressCallback = props.onPress,
-    sx = props.sx,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _NavBarContext.useNavBarContext)();
   var isSelected = state.selectedKey === key;