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

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

@@ -4,23 +4,24 @@ import React, { useState } from 'react';
 import AccountCheckIcon from '@pingux/mdi-react/AccountCheckOutlineIcon';
 import AccountMultiple from '@pingux/mdi-react/AccountMultipleIcon';
 import AccountMultipleOutlineIcon from '@pingux/mdi-react/AccountMultipleOutlineIcon';
+import ApplicationOutline from '@pingux/mdi-react/ApplicationOutlineIcon';
 import AppsIcon from '@pingux/mdi-react/AppsIcon';
 import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
 import CodeTagsIcon from '@pingux/mdi-react/CodeTagsIcon';
 import CogOutlineIcon from '@pingux/mdi-react/CogOutlineIcon';
+import Connection from '@pingux/mdi-react/ConnectionIcon';
 import Earth from '@pingux/mdi-react/EarthIcon';
-import EmoticonHappy from '@pingux/mdi-react/EmoticonHappyOutlineIcon';
 import FileTreeIcon from '@pingux/mdi-react/FileTreeIcon';
-import Fingerprint from '@pingux/mdi-react/FingerprintIcon';
 import GlobeIcon from '@pingux/mdi-react/GlobeIcon';
+import KeyChain from '@pingux/mdi-react/KeyChainIcon';
 import LayersOutlineIcon from '@pingux/mdi-react/LayersOutlineIcon';
+import MonitorScreenshot from '@pingux/mdi-react/MonitorScreenshotIcon';
 import OpenInNew from '@pingux/mdi-react/OpenInNewIcon';
 import PaletteOutlineIcon from '@pingux/mdi-react/PaletteOutlineIcon';
-import ScaleBalance from '@pingux/mdi-react/ScaleBalanceIcon';
+import Pulse from '@pingux/mdi-react/PulseIcon';
 import ShieldCheckOutlineIcon from '@pingux/mdi-react/ShieldCheckOutlineIcon';
+import ShieldStarOutline from '@pingux/mdi-react/ShieldStarOutlineIcon';
 import ShowChartIcon from '@pingux/mdi-react/ShowChartIcon';
-import TransitConnection from '@pingux/mdi-react/TransitConnectionVariantIcon';
-import ViewDashboard from '@pingux/mdi-react/ViewDashboardIcon';
 import DashboardIcon from '@pingux/mdi-react/ViewDashboardOutlineIcon';
 import ViewGridPlusOutline from '@pingux/mdi-react/ViewGridPlusOutlineIcon';
 import WidgetsOutlineIcon from '@pingux/mdi-react/WidgetsOutlineIcon';
@@ -116,250 +117,300 @@ var Verify = function Verify(props) {
   }))))));
 };
 var data = [{
-  'data-id': 'dashboard-data-id',
-  heading: 'Dashboard',
-  icon: ViewDashboard,
-  key: 'Dashboard',
+  'data-id': 'ipsum-data-id',
+  icon: Pulse,
+  key: 'Ipsum',
+  heading: 'Ipsum',
   children: [___EmotionJSX(NavBarItemLink, {
-    key: "Dashboard Link Group",
-    id: "Dashboard Link Group",
-    variant: "variants.navBar.itemButton",
-    href: "https://pingidentity.com/"
-  }, "Group"), ___EmotionJSX(NavBarItemButton, {
-    key: "Dashboard Link Populations",
-    id: "Dashboard Link Populations"
-  }, "Populations")]
-}, {
-  'data-id': 'identities-data-id',
-  icon: AccountMultiple,
-  key: 'Identities',
-  heading: 'Identities',
-  children: [___EmotionJSX(NavBarItemLink, {
-    key: "Identities Link Users",
-    id: "Identities Link Users",
+    key: "Ipsum Link Users",
+    id: "Ipsum Link Users",
     href: "https://pingidentity.com/"
   }, "Users"), ___EmotionJSX(NavBarItemLink, {
-    key: "Identities Link Groups",
-    id: "Identities Link Groups",
+    key: "Ipsum Link Groups",
+    id: "Ipsum Link Groups",
     href: "https://pingidentity.com/"
   }, "Groups"), ___EmotionJSX(NavBarItemLink, {
-    key: "Identities Link Populations",
-    id: "Identities Link Populations",
+    key: "Ipsum Link Populations",
+    id: "Ipsum Link Populations",
     href: "https://pingidentity.com/"
   }, "Populations"), ___EmotionJSX(NavBarItemLink, {
-    key: "Identities Link Attributes",
-    id: "Identities Link Attributes",
+    key: "Ipsum Link Attributes",
+    id: "Ipsum Link Attributes",
     href: "https://pingidentity.com/"
   }, "Attributes"), ___EmotionJSX(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: TransitConnection,
-  key: 'Connections',
-  heading: 'Connections',
-  children: [{
-    hasSeparator: false,
-    key: 'Applications',
-    subTitle: 'Applications'
-  }, ___EmotionJSX(NavBarItemLink, {
-    key: "Connections Applications",
-    id: "Connections Applications",
+  'data-id': 'dolor-data-id',
+  icon: AccountMultiple,
+  key: 'Dolor',
+  heading: 'Dolor',
+  children: [___EmotionJSX(NavBarItemLink, {
+    key: "Dolor Applications",
+    id: "Dolor Applications",
     href: "https://pingidentity.com/"
   }, "Applications"), ___EmotionJSX(NavBarItemLink, {
-    key: "Connections Application Catalog",
-    id: "Connections Application Catalog",
+    key: "Dolor Application Catalog",
+    id: "Dolor Application Catalog",
     href: "https://pingidentity.com/"
   }, "Application Catalog"), ___EmotionJSX(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'
-  }, ___EmotionJSX(NavBarItemLink, {
-    key: "Connections External IDPs",
-    id: "Connections External IDPs",
+  }, "Application Portal"), ___EmotionJSX(NavBarItemLink, {
+    key: "Dolor External IDPs",
+    id: "Dolor External IDPs",
     href: "https://pingidentity.com/"
-  }, "External IDPs"), {
-    key: 'Ping Products',
-    subTitle: 'Ping Products'
-  }, ___EmotionJSX(NavBarItemLink, {
-    key: "Connections PingFederate",
-    id: "Connections PingFederate",
+  }, "External IDPs"), ___EmotionJSX(NavBarItemLink, {
+    key: "Dolor PingFederate",
+    id: "Dolor PingFederate",
     href: "https://pingidentity.com/"
   }, "PingFederate"), ___EmotionJSX(NavBarItemLink, {
-    key: "Connections PingIntelligence",
-    id: "Connections PingIntelligence",
+    key: "Dolor PingIntelligence",
+    id: "Dolor PingIntelligence",
     href: "https://pingidentity.com/"
   }, "PingIntelligence"), ___EmotionJSX(Separator, {
     variant: "separator.navBarSubtitleSeparator"
   }), ___EmotionJSX(NavBarItemLink, {
-    key: "Connections Provisioning",
-    id: "Connections Provisioning",
+    key: "Dolor Provisioning",
+    id: "Dolor Provisioning",
     href: "https://pingidentity.com/"
   }, "Provisioning"), ___EmotionJSX(NavBarItemLink, {
-    key: "Connections WebHooks",
-    id: "Connections WebHooks",
+    key: "Dolor WebHooks",
+    id: "Dolor WebHooks",
     href: "https://pingidentity.com/"
   }, "WebHooks"), ___EmotionJSX(NavBarItemLink, {
-    key: "Connections Gateways",
-    id: "Connections Gateways",
+    key: "Dolor Gateways",
+    id: "Dolor Gateways",
     href: "https://pingidentity.com/"
   }, "Gateways"), ___EmotionJSX(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"), ___EmotionJSX(NavBarItemButton, {
-    key: "Connections Resources",
-    id: "Connections Resources"
+    key: "Dolor Resources",
+    id: "Dolor Resources",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Resources")]
 }, {
-  'data-id': 'experiences-data-id',
-  icon: EmoticonHappy,
-  key: 'Experiences',
-  heading: 'Experiences',
-  children: [{
-    hasSeparator: false,
-    key: 'Policies',
-    subTitle: 'Policies'
-  }, ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Authentication",
-    id: "Experiences Authentication",
+  'data-id': 'sit-data-id',
+  icon: ApplicationOutline,
+  key: 'Sit',
+  heading: 'Sit',
+  children: [___EmotionJSX(NavBarItemLink, {
+    key: "Sit Authentication",
+    id: "Sit Authentication",
     href: "https://pingidentity.com/"
   }, "Authentication"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences MFA",
-    id: "Experiences MFA",
+    key: "Sit MFA",
+    id: "Sit MFA",
     href: "https://pingidentity.com/"
   }, "MFA"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Password",
-    id: "Experiences Password",
+    key: "Sit Password",
+    id: "Sit Password",
     href: "https://pingidentity.com/"
   }, "Password"), ___EmotionJSX(Separator, {
     variant: "separator.navBarSubtitleSeparator"
   }), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Risk",
-    id: "Experiences Risk",
+    key: "Sit Risk",
+    id: "Sit Risk",
     href: "https://pingidentity.com/"
   }, "Risk"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Flows",
-    id: "Experiences Flows",
+    key: "Sit Flows",
+    id: "Sit Flows",
     href: "https://pingidentity.com/"
   }, "Flows"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Forms",
-    id: "Experiences Forms",
+    key: "Sit Forms",
+    id: "Sit Forms",
     href: "https://pingidentity.com/"
   }, "Forms"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Languages",
-    id: "Experiences Languages",
+    key: "Sit Languages",
+    id: "Sit Languages",
     href: "https://pingidentity.com/"
   }, "Languages"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Agreements",
-    id: "Experiences Agreements",
+    key: "Sit Agreements",
+    id: "Sit Agreements",
     href: "https://pingidentity.com/"
   }, "Agreements"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Branding & Themes",
-    id: "Experiences Branding & Themes",
+    key: "Sit Branding & Themes",
+    id: "Sit Branding & Themes",
     href: "https://pingidentity.com/"
   }, "Branding & Themes"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Notifications",
-    id: "Experiences Notifications",
+    key: "Sit Notifications",
+    id: "Sit Notifications",
     href: "https://pingidentity.com/"
   }, "Notifications"), ___EmotionJSX(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"), ___EmotionJSX(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: ViewGridPlusOutline,
-  key: 'DaVinci',
-  heading: 'DaVinci',
+  key: 'Amet',
+  heading: 'Amet',
   customIcon: OpenInNew,
-  href: 'https://pingidentity.com/'
+  href: 'https://pingidentity.com/',
+  size: 'xs'
 }, {
-  'data-id': 'mfa-data-id',
-  icon: Fingerprint,
-  key: 'MFA',
-  heading: 'MFA',
+  'data-id': 'consectur-data-id',
+  icon: CheckCircleOutlineIcon,
+  key: 'Consectur',
+  heading: 'Consectur',
   children: [___EmotionJSX(NavBarItemButton, {
-    id: "MFA Button Users",
-    key: "MFA Button Users"
-  }, "Users"), {
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, ___EmotionJSX(NavBarItemButton, {
-    key: "MFA Button Group",
-    id: "MFA Button Group"
+    id: "Consectur Button Users",
+    key: "Consectur Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), ___EmotionJSX(NavBarItemButton, {
+    key: "Consectur Button Group",
+    id: "Consectur Button Group",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Group Test")]
 }, {
-  'data-id': 'risk-data-id',
-  icon: ScaleBalance,
-  key: 'Risk',
-  heading: 'Risk',
+  'data-id': 'adipiscing-data-id',
+  icon: ShieldStarOutline,
+  key: 'Adipiscing',
+  heading: 'Adipiscing',
   children: [___EmotionJSX(NavBarItemButton, {
-    key: "Risk Button Users",
-    id: "Risk Button Users"
-  }, "Users"), {
-    hasSeparator: false,
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, ___EmotionJSX(NavBarItemButton, {
-    key: "Risk Button Group",
-    id: "Risk Button Group"
+    key: "Adipiscing Button Users",
+    id: "Adipiscing Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), ___EmotionJSX(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: [___EmotionJSX(NavBarItemButton, {
-    key: "Verify Button Users",
-    id: "Verify Button Users"
-  }, "Users"), {
-    hasSeparator: false,
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, ___EmotionJSX(NavBarItemButton, {
-    key: "Verify Button Group",
-    id: "Verify Button Group"
+    key: "Elit Button Users",
+    id: "Elit Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), ___EmotionJSX(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: [___EmotionJSX(NavBarItemButton, {
-    key: "Credentials Button Users",
-    id: "Credentials Button Users"
-  }, "Users"), {
-    hasSeparator: false,
-    key: 'PingOne Services',
-    subTitle: 'PingOne Services'
-  }, ___EmotionJSX(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"), ___EmotionJSX(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: KeyChain,
+  key: 'tempor',
+  children: [___EmotionJSX(NavBarItemLink, {
+    key: "tempor Link Group",
+    id: "tempor Link Group",
+    variant: "variants.navBar.itemButton",
+    href: "https://pingidentity.com/"
+  }, "Group"), ___EmotionJSX(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: Connection,
+  key: 'Ut-Enim',
+  heading: 'Ut Enim',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Ut Enim Button Users",
+    id: "Ut Enim Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), ___EmotionJSX(NavBarItemButton, {
+    key: "Ut Enim Button Group",
+    id: "Ut Enim Button Group",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Group")]
+}, {
+  'data-id': 'ad-minim-data-id',
+  icon: MonitorScreenshot,
+  key: 'ad-minim',
+  heading: 'Ad Minim',
+  children: [___EmotionJSX(NavBarItemButton, {
+    key: "Ad Minim Button Users",
+    id: "Ad Minim Button Users",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Users"), ___EmotionJSX(NavBarItemButton, {
+    key: "Ad Minim Button Group",
+    id: "Ad Minim Button Group",
+    sx: {
+      fontWeight: '500'
+    }
+  }, "Group")]
+}, {
+  'data-id': 'veniam-data-id',
   icon: Earth,
-  key: 'Environment',
-  heading: 'Environment title that is so long, it wraps',
+  key: 'Veniam',
+  heading: 'Veniam',
   children: [___EmotionJSX(NavBarItemButton, {
-    key: "Earth Button Users",
-    id: "Earth Button Users"
+    key: "Veniam Button Users",
+    id: "Veniam Button Users",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Users"), ___EmotionJSX(NavBarItemButton, {
-    key: "Earth Button Group",
-    id: "Earth Button Group"
+    key: "Veniam Button Group",
+    id: "Veniam Button Group",
+    sx: {
+      fontWeight: '500'
+    }
   }, "Group")]
 }];
 export var Default = function Default() {
@@ -382,16 +433,18 @@ export var Default = function Default() {
   }, ___EmotionJSX(NavBarItem, {
     "data-id": "nav-bar-item",
     icon: GlobeIcon,
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
+    id: "Lorem",
+    key: "Lorem",
+    text: "Lorem",
+    iconProps: {
+      size: '18px'
+    }
   }), ___EmotionJSX(NavBarSection, {
     items: data,
     "data-id": "nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: thirdData,
@@ -575,7 +628,7 @@ export var OnyxDefault = function OnyxDefault() {
   })));
 };
 export var Controlled = function Controlled() {
-  var _useState = useState('Dashboard Link Group'),
+  var _useState = useState('Lorem Link Group'),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKey = _useState2[0],
     setSelectedKey = _useState2[1];
@@ -617,16 +670,18 @@ export var Controlled = function Controlled() {
   }, ___EmotionJSX(NavBarItem, {
     "data-id": "nav-bar-item",
     icon: GlobeIcon,
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
+    id: "Lorem",
+    key: "Lorem",
+    text: "Lorem",
+    iconProps: {
+      size: '18px'
+    }
   }), ___EmotionJSX(NavBarSection, {
     items: data,
     "data-id": "first-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: customData,
@@ -655,16 +710,18 @@ export var AutoCollapse = function AutoCollapse() {
   }, ___EmotionJSX(NavBarItem, {
     "data-id": "nav-bar-item",
     icon: GlobeIcon,
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
+    id: "Lorem",
+    key: "Lorem",
+    text: "Lorem",
+    iconProps: {
+      size: '18px'
+    }
   }), ___EmotionJSX(NavBarSection, {
     items: data,
     "data-id": "nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
     hasSeparator: true,
-    title: "PingOne Services",
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: thirdData,

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { focus } from '../../styles/colors';
 import accordionGrid from '../AccordionGridGroup/AccordionGrid.styles';
 import { quiet } from '../Button/Buttons.styles';
 import { wordWrap } from '../Text/Text.styles';
@@ -119,7 +120,14 @@ var popUpSectionContainer = {
 var sectionBody = _objectSpread(_objectSpread({}, accordionGrid.body), {}, {
   pl: '0'
 });
-var itemButton = {
+var truncateText = {
+  whiteSpace: 'normal',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box',
+  WebkitLineClamp: '3',
+  overflow: 'hidden'
+};
+var itemButton = _objectSpread(_objectSpread({
   marginY: '2px',
   textDecoration: 'none',
   outline: 'none',
@@ -128,20 +136,19 @@ var itemButton = {
   backgroundColor: 'transparent',
   paddingTop: 'sm',
   paddingBottom: 'sm',
-  display: 'block',
   color: 'neutral.90',
   fontSize: 'md',
   fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
   paddingLeft: '45px',
-  paddingRight: 'md',
+  paddingRight: 'md'
+}, truncateText), {}, {
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'
@@ -156,7 +163,7 @@ var itemButton = {
   '&.is-pressed': {
     bg: 'accent.5'
   }
-};
+});
 var popUpItemButton = _objectSpread(_objectSpread({}, itemButton), {}, {
   fontSize: 'sm',
   px: 'sm',
@@ -189,7 +196,7 @@ var subtitle = {
 };
 var headerText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   whiteSpace: 'break-spaces',
-  lineHeight: 1,
+  lineHeight: 1.15,
   fontSize: 'md',
   fontWeight: 1,
   maxWidth: '150px',
@@ -224,9 +231,9 @@ var headerNav = {
   fontSize: '16px',
   '&.is-focused': {
     outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus'
+    boxShadow: "0 0 0 1px ".concat(focus),
+    WebkitBoxShadow: "0 0 0 1px ".concat(focus),
+    MozBoxShadow: "0 0 0 1px ".concat(focus)
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'