@pingux/astro 1.39.1 → 1.39.2-alpha.0

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

@@ -289,7 +289,10 @@ var data = [{
   }, "Notifications"), (0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Experiences Vanity Domains",
     id: "Experiences Vanity Domains",
-    href: "https://pingidentity.com/"
+    href: "https://pingidentity.com/",
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
   }, "Vanity Domains"), (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Experiences Sender",
     id: "Experiences Sender"
@@ -304,7 +307,6 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "MFA Button Group",
@@ -378,8 +380,7 @@ var Default = function Default() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), (0, _react2.jsx)(_index.Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: 0,
     backgroundColor: "neutral.60"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "navBar.sectionContainer",
@@ -392,7 +393,6 @@ var Default = function Default() {
     text: "Overview"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
@@ -401,6 +401,7 @@ var Default = function Default() {
     "data-id": "second-nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: thirdData,
+    hasSeparator: true,
     "data-id": "third-nav-bar-section"
   })));
 };
@@ -439,8 +440,7 @@ var Controlled = function Controlled() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), (0, _react2.jsx)(_index.Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
   }), (0, _react2.jsx)(_index.Box, {
@@ -455,7 +455,6 @@ var Controlled = function Controlled() {
     text: "Overview"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "first-nav-bar-section"
   }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,

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

@@ -97,6 +97,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = isSelected ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: "navBar.navItem",
@@ -106,7 +107,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: navItemRef
   }, mergedProps, {
     sx: {
-      maxHeight: '30px'
+      flexGrow: 0
     }
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -116,11 +117,11 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
     "aria-label": text,
-    size: 20,
+    size: "sm",
     sx: {
-      mr: '10px',
-      color: 'white',
-      fill: 'white'
+      mr: 'sm',
+      color: color,
+      fill: color
     }
   }), (0, _react2.jsx)(_index.Text, {
     variant: "navBarHeaderText"

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

@@ -41,19 +41,17 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       onKeyDown = _ref.onKeyDown;
 
   var renderSubTitle = function renderSubTitle(child) {
-    var hasSeparator = child.hasSeparator,
+    var _child$hasSeparator = child.hasSeparator,
+        hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
         subTitle = child.subTitle;
     return (0, _react2.jsx)(_react.Fragment, {
       key: "fragment".concat(subTitle)
-    }, (hasSeparator || hasSeparator === undefined) && (0, _react2.jsx)(_index.Separator, {
+    }, hasSeparator && (0, _react2.jsx)(_index.Separator, {
       variant: "separator.navBarSubtitleSeparator"
     }), (0, _react2.jsx)(_index.Text, {
       key: "text".concat(subTitle),
-      sx: {
-        mb: 'sm',
-        ml: '45px',
-        mt: 'md'
-      },
+      ml: "45px",
+      mt: hasSeparator ? '0' : undefined,
       variant: "text.navBarSubtitle"
     }, subTitle));
   };
@@ -67,8 +65,8 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
 
   return (0, _react2.jsx)(_index.Box, {
     sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
+      alignItems: 'stretch',
+      mb: 'md'
     }
   }, (0, _map["default"])(_context = item.children).call(_context, renderChild));
 };

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

@@ -72,7 +72,8 @@ var NavBarItemButton = function NavBarItemButton(props) {
     id: key,
     variant: "navItemButton",
     onPress: onNavPress,
-    className: classNames
+    className: classNames,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

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

@@ -72,6 +72,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return (0, _react2.jsx)(_index.Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
@@ -82,8 +83,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     size: "sm",
     sx: {
       mr: '10px',
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
@@ -96,10 +97,10 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
-    size: "xs",
+    size: "sm",
     sx: {
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));

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

@@ -71,7 +71,8 @@ var NavBarItemLink = function NavBarItemLink(props) {
     id: key,
     variant: "buttons.navItemButton",
     className: classNames,
-    onPress: onNavPress
+    onPress: onNavPress,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

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

@@ -67,8 +67,11 @@ var NavBarSection = function NavBarSection(_ref) {
   var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
     return item.children;
   });
-  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_.Text, {
-    variant: "text.navBarSubtitle"
+  return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
+    variant: "separator.navBarSeparator"
+  }), title && (0, _react2.jsx)(_.Text, {
+    variant: "text.navBarSubtitle",
+    mt: hasSeparator ? '0' : undefined
   }, title), (0, _react2.jsx)("ul", (0, _extends2["default"])({
     ref: ref,
     style: {
@@ -83,16 +86,6 @@ var NavBarSection = function NavBarSection(_ref) {
       key: item.key,
       item: item
     }));
-  })), hasSeparator && (0, _react2.jsx)(_.Box, {
-    sx: {
-      pl: '15px',
-      pr: '15px',
-      my: '10px',
-      mt: '15px',
-      mb: '15px'
-    }
-  }, (0, _react2.jsx)(_.Separator, {
-    variant: "separator.navBarSeparator"
   })));
 };
 

package/lib/cjs/styles/variants/buttons.js

@@ -87,16 +87,15 @@ var navItemButton = {
   cursor: 'pointer',
   borderRadius: 0,
   backgroundColor: 'transparent',
-  paddingTop: '5px',
-  paddingBottom: '5px',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
   display: 'block',
-  color: 'neutral.95',
-  fontSize: 'sm',
-  fontWeight: 1,
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  lineHeight: '16px',
   whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',

package/lib/cjs/styles/variants/navBar.js

@@ -46,18 +46,17 @@ var itemHeaderContainer = {
   flexGrow: 1,
   alignItems: 'center',
   maxWidth: '230px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   cursor: 'pointer',
   minHeight: '40px',
-  fontWeight: 0,
-  fontSize: '16px',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
 };
 var sectionContainer = {
-  pt: '10px',
+  pt: 'sm',
   height: '100%',
   maxHeight: '100%',
   overflowY: 'auto'
@@ -71,7 +70,8 @@ var navItem = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -81,7 +81,6 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
-  fontSize: '16px',
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'

package/lib/cjs/styles/variants/separator.js

@@ -35,6 +35,7 @@ var base = {
   width: '100%',
   height: '1px',
   my: '5px',
+  flexShrink: 0,
   '&.is-vertical': {
     width: '1px',
     height: '100%',
@@ -43,16 +44,14 @@ var base = {
 };
 
 var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  width: '100%',
-  backgroundColor: 'neutral.60',
-  my: 0
+  width: 'auto',
+  my: 'md',
+  mx: 'md',
+  backgroundColor: 'neutral.60'
 });
 
-var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  mt: '15px',
-  ml: '45px',
-  width: 'calc(100% - 60px)',
-  backgroundColor: 'neutral.60'
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, navBarSeparator), {}, {
+  ml: '45px'
 });
 
 var _default = {

package/lib/cjs/styles/variants/text.js

@@ -177,20 +177,23 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
 
 var navBarSubtitle = {
   ml: 'md',
-  mb: '15px',
-  fontWeight: 3,
-  fontSize: '11px',
+  my: 'sm',
+  fontWeight: 1,
+  fontSize: 'sm',
   color: 'accent.80',
   zIndex: '100'
 };
 
 var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   whiteSpace: 'break-spaces',
-  lineHeight: '13px',
-  fontSize: '13px',
+  lineHeight: 1,
+  fontSize: 'md',
   fontWeight: 1,
   maxWidth: '150px',
-  color: 'white'
+  color: 'neutral.95',
+  '.is-selected &': {
+    color: 'white'
+  }
 });
 
 var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {

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

@@ -254,7 +254,10 @@ var data = [{
   }, "Notifications"), ___EmotionJSX(NavBarItemLink, {
     key: "Experiences Vanity Domains",
     id: "Experiences Vanity Domains",
-    href: "https://pingidentity.com/"
+    href: "https://pingidentity.com/",
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
   }, "Vanity Domains"), ___EmotionJSX(NavBarItemButton, {
     key: "Experiences Sender",
     id: "Experiences Sender"
@@ -269,7 +272,6 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, ___EmotionJSX(NavBarItemButton, {
     key: "MFA Button Group",
@@ -342,8 +344,7 @@ export var Default = function Default() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), ___EmotionJSX(Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: 0,
     backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
@@ -356,7 +357,6 @@ export var Default = function Default() {
     text: "Overview"
   }), ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,
@@ -365,6 +365,7 @@ export var Default = function Default() {
     "data-id": "second-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: thirdData,
+    hasSeparator: true,
     "data-id": "third-nav-bar-section"
   })));
 };
@@ -400,8 +401,7 @@ export var Controlled = function Controlled() {
     href: "https://pingidentity.com",
     target: "_blank"
   }, logo)), ___EmotionJSX(Separator, {
-    marginTop: "lg",
-    marginBottom: "0px",
+    m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
   }), ___EmotionJSX(Box, {
@@ -416,7 +416,6 @@ export var Controlled = function Controlled() {
     text: "Overview"
   }), ___EmotionJSX(NavBarSection, {
     items: data,
-    hasSeparator: true,
     "data-id": "first-nav-bar-section"
   }), ___EmotionJSX(NavBarSection, {
     items: secondData,

package/lib/components/NavBarSection/NavBarItem.js

@@ -64,6 +64,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
     variant: "navBar.navItem",
@@ -73,7 +74,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: navItemRef
   }, mergedProps, {
     sx: {
-      maxHeight: '30px'
+      flexGrow: 0
     }
   }), ___EmotionJSX(Box, {
     isRow: true,
@@ -83,11 +84,11 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
     "aria-label": text,
-    size: 20,
+    size: "sm",
     sx: {
-      mr: '10px',
-      color: 'white',
-      fill: 'white'
+      mr: 'sm',
+      color: color,
+      fill: color
     }
   }), ___EmotionJSX(Text, {
     variant: "navBarHeaderText"

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -13,19 +13,17 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       onKeyDown = _ref.onKeyDown;
 
   var renderSubTitle = function renderSubTitle(child) {
-    var hasSeparator = child.hasSeparator,
+    var _child$hasSeparator = child.hasSeparator,
+        hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
         subTitle = child.subTitle;
     return ___EmotionJSX(Fragment, {
       key: "fragment".concat(subTitle)
-    }, (hasSeparator || hasSeparator === undefined) && ___EmotionJSX(Separator, {
+    }, hasSeparator && ___EmotionJSX(Separator, {
       variant: "separator.navBarSubtitleSeparator"
     }), ___EmotionJSX(Text, {
       key: "text".concat(subTitle),
-      sx: {
-        mb: 'sm',
-        ml: '45px',
-        mt: 'md'
-      },
+      ml: "45px",
+      mt: hasSeparator ? '0' : undefined,
       variant: "text.navBarSubtitle"
     }, subTitle));
   };
@@ -39,8 +37,8 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
 
   return ___EmotionJSX(Box, {
     sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
+      alignItems: 'stretch',
+      mb: 'md'
     }
   }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 };

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -47,7 +47,8 @@ var NavBarItemButton = function NavBarItemButton(props) {
     id: key,
     variant: "navItemButton",
     onPress: onNavPress,
-    className: classNames
+    className: classNames,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -44,6 +44,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, {
     variant: "navBar.itemHeaderContainer",
     className: classNames,
@@ -54,8 +55,8 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     size: "sm",
     sx: {
       mr: '10px',
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
@@ -68,10 +69,10 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: "xs",
+    size: "sm",
     sx: {
-      color: 'white',
-      fill: 'white'
+      color: color,
+      fill: color
     },
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -46,7 +46,8 @@ var NavBarItemLink = function NavBarItemLink(props) {
     id: key,
     variant: "buttons.navItemButton",
     className: classNames,
-    onPress: onNavPress
+    onPress: onNavPress,
+    color: isSelected ? 'white' : undefined
   }, others, {
     sx: _objectSpread({
       paddingLeft: '45px',

package/lib/components/NavBarSection/NavBarSection.js

@@ -10,7 +10,7 @@ import React, { useRef } from 'react';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Box, Button, Separator, Text } from '../../';
+import { Button, Separator, Text } from '../../';
 import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
@@ -34,8 +34,11 @@ var NavBarSection = function NavBarSection(_ref) {
     return item.children;
   });
 
-  return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
-    variant: "text.navBarSubtitle"
+  return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
+    variant: "separator.navBarSeparator"
+  }), title && ___EmotionJSX(Text, {
+    variant: "text.navBarSubtitle",
+    mt: hasSeparator ? '0' : undefined
   }, title), ___EmotionJSX("ul", _extends({
     ref: ref,
     style: {
@@ -50,16 +53,6 @@ var NavBarSection = function NavBarSection(_ref) {
       key: item.key,
       item: item
     }));
-  })), hasSeparator && ___EmotionJSX(Box, {
-    sx: {
-      pl: '15px',
-      pr: '15px',
-      my: '10px',
-      mt: '15px',
-      mb: '15px'
-    }
-  }, ___EmotionJSX(Separator, {
-    variant: "separator.navBarSeparator"
   })));
 };
 

package/lib/styles/variants/buttons.js

@@ -65,16 +65,15 @@ var navItemButton = {
   cursor: 'pointer',
   borderRadius: 0,
   backgroundColor: 'transparent',
-  paddingTop: '5px',
-  paddingBottom: '5px',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
   display: 'block',
-  color: 'neutral.95',
-  fontSize: 'sm',
-  fontWeight: 1,
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
   flexGrow: '1',
   width: '100%',
   textAlign: 'left',
-  lineHeight: '16px',
   whiteSpace: 'break-spaces',
   overflowWrap: 'break-word',
   maxWidth: '100%',

package/lib/styles/variants/navBar.js

@@ -27,18 +27,17 @@ var itemHeaderContainer = {
   flexGrow: 1,
   alignItems: 'center',
   maxWidth: '230px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   cursor: 'pointer',
   minHeight: '40px',
-  fontWeight: 0,
-  fontSize: '16px',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
 };
 var sectionContainer = {
-  pt: '10px',
+  pt: 'sm',
   height: '100%',
   maxHeight: '100%',
   overflowY: 'auto'
@@ -52,7 +51,8 @@ var navItem = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  padding: '10px 15px 10px 15px',
+  py: 'sm',
+  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -62,7 +62,6 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
-  fontSize: '16px',
   '&.is-focused': {
     outline: '1px solid',
     outlineColor: 'focus'

package/lib/styles/variants/separator.js

@@ -17,6 +17,7 @@ var base = {
   width: '100%',
   height: '1px',
   my: '5px',
+  flexShrink: 0,
   '&.is-vertical': {
     width: '1px',
     height: '100%',
@@ -25,16 +26,14 @@ var base = {
 };
 
 var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  width: '100%',
-  backgroundColor: 'neutral.60',
-  my: 0
+  width: 'auto',
+  my: 'md',
+  mx: 'md',
+  backgroundColor: 'neutral.60'
 });
 
-var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
-  mt: '15px',
-  ml: '45px',
-  width: 'calc(100% - 60px)',
-  backgroundColor: 'neutral.60'
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, navBarSeparator), {}, {
+  ml: '45px'
 });
 
 export default {