@pingux/astro 2.122.1-alpha.0 → 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.d.ts

@@ -142,6 +142,25 @@ declare const _default: {
         display: string;
     };
     itemButton: {
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-selected': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+        };
+        whiteSpace: string;
+        WebkitBoxOrient: string;
+        display: string;
+        WebkitLineClamp: string;
+        overflow: string;
         marginY: string;
         textDecoration: string;
         outline: string;
@@ -150,34 +169,18 @@ declare const _default: {
         backgroundColor: string;
         paddingTop: string;
         paddingBottom: string;
-        display: string;
         color: string;
         fontSize: string;
         fontWeight: number;
         flexGrow: string;
         width: string;
         textAlign: string;
-        whiteSpace: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
         paddingLeft: string;
         paddingRight: string;
-        '&.is-focused': {
-            outline: string;
-            outlineColor: string;
-        };
-        '&.is-hovered': {
-            bg: string;
-        };
-        '&.is-selected': {
-            bg: string;
-            boxShadow: string;
-        };
-        '&.is-pressed': {
-            bg: string;
-        };
     };
     popUpItemButton: {
         fontSize: string;
@@ -200,6 +203,11 @@ declare const _default: {
             bg: string;
             color: string;
         };
+        whiteSpace: string;
+        WebkitBoxOrient: string;
+        display: string;
+        WebkitLineClamp: string;
+        overflow: string;
         marginY: string;
         textDecoration: string;
         outline: string;
@@ -208,12 +216,10 @@ declare const _default: {
         backgroundColor: string;
         paddingTop: string;
         paddingBottom: string;
-        display: string;
         fontWeight: number;
         flexGrow: string;
         width: string;
         textAlign: string;
-        whiteSpace: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;