@nulogy/components 6.7.5 → 6.8.0

package/dist/main.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('classnames')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral', 'classnames'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, null, global.AutosizeInput, null, global.t));
-}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, toConsumableArray, AutosizeInput, taggedTemplateLiteral, t) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/defineProperty'), require('object-assign'), require('@nulogy/icons'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inheritsLoose'), require('prop-types'), require('react-fast-compare'), require('warning'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/objectWithoutPropertiesLoose'), require('deep-equal'), require('create-react-context'), require('react-dom'), require('react-windowed-select'), require('exenv'), require('smoothscroll-polyfill'), require('classnames'), require('@babel/runtime/helpers/toConsumableArray'), require('react-input-autosize'), require('@babel/runtime/helpers/taggedTemplateLiteral')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/defineProperty', 'object-assign', '@nulogy/icons', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inheritsLoose', 'prop-types', 'react-fast-compare', 'warning', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/objectWithoutPropertiesLoose', 'deep-equal', 'create-react-context', 'react-dom', 'react-windowed-select', 'exenv', 'smoothscroll-polyfill', 'classnames', '@babel/runtime/helpers/toConsumableArray', 'react-input-autosize', '@babel/runtime/helpers/taggedTemplateLiteral'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NDSComponents = {}, global.React, global.styled, global.typeof, global.classCallCheck, global.createClass, global.defineProperty, global.assign, global.icons, global.extends, global.assertThisInitialized, global.inheritsLoose, global.PropTypes, global.isEqual, global.warning, global.slicedToArray, global.objectWithoutPropertiesLoose, global.deepEqual, global.createReactContext, global.reactDom, global.components, global.exenv, global.smoothscroll, global.t, null, global.AutosizeInput));
+}(this, (function (exports, React, styled, _typeof$3, _classCallCheck$3, _createClass$3, _defineProperty$2, assign$1, icons, _extends$4, _assertThisInitialized$4, _inheritsLoose$2, PropTypes, isEqual$2, warning$1, _slicedToArray$1, _objectWithoutPropertiesLoose$2, deepEqual, createContext, reactDom, WindowedSelect, exenv, smoothscroll, t, toConsumableArray, AutosizeInput) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,8 +49,8 @@
   var WindowedSelect__default = /*#__PURE__*/_interopDefaultLegacy(WindowedSelect);
   var exenv__default = /*#__PURE__*/_interopDefaultLegacy(exenv);
   var smoothscroll__default = /*#__PURE__*/_interopDefaultLegacy(smoothscroll);
-  var AutosizeInput__default = /*#__PURE__*/_interopDefaultLegacy(AutosizeInput);
   var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
+  var AutosizeInput__default = /*#__PURE__*/_interopDefaultLegacy(AutosizeInput);
 
   var defaultOptions = {
     bindI18n: 'languageChanged',
@@ -275,7 +275,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 01 Feb 2022 18:28:25 GMT
+   * Generated on Mon, 06 Jun 2022 21:26:05 GMT
    */
 
   const color_base_black = "#011e38";
@@ -315,9 +315,9 @@
   const radius_border_small = "2px";
   const radius_border_medium = "4px";
   const radius_border_circle = "50%";
-  const shadow_box_small = "0px 0px 3px 0px rgba(1, 30, 56, 0.2)";
-  const shadow_box_medium = "0px 1px 4px 0px rgba(1, 30, 56, 0.15)";
-  const shadow_box_large = "0px 3px 5px 0px rgba(1, 30, 56, 0.1)";
+  const shadow_box_small = "0px 1px 2px 0px rgba(1, 30, 56, 0.25)";
+  const shadow_box_medium = "0px 3px 8px 0px rgba(1, 30, 56, 0.18)";
+  const shadow_box_large = "0px 6px 12px 2px rgba(1, 30, 56, 0.15)";
   const shadow_focus = "0px 0px 5px 0px rgba(33, 107, 235, .9)";
   const shadow_error = "0px 0px 5px 0px rgba(204, 20, 57, .9)";
   const size_base_none = "0px";
@@ -11919,23 +11919,23 @@
   }).withConfig({
     displayName: "Text",
     componentId: "sc-15glbbx-0"
-  })(space, typography, color, layout, overflow, textOverflow, cursor$1, function (_ref) {
+  })(function (_ref) {
     var disabled = _ref.disabled,
-        textTransform = _ref.textTransform;
+        textTransform = _ref.textTransform,
+        theme = _ref.theme;
     return {
       textTransform: textTransform,
+      color: "currentColor",
+      marginTop: 0,
+      marginBottom: 0,
+      fontSize: theme.fontSizes.medium,
+      lineHeight: theme.lineHeights.base,
       opacity: disabled ? "0.7" : undefined
     };
-  });
+  }, compose(space, typography, color, layout, overflow, textOverflow, cursor$1));
   Text.defaultProps = {
     inline: false,
-    disabled: false,
-    mt: 0,
-    mb: 0,
-    fontSize: "medium",
-    lineHeight: "base",
-    textTransform: undefined,
-    color: "currentColor"
+    disabled: false
   };
 
   var Heading1 = Text.withComponent("h1");
@@ -16946,14 +16946,14 @@
         _ref$showArrow = _ref.showArrow,
         showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
         _ref$backgroundColor = _ref.backgroundColor,
-        backgroundColor = _ref$backgroundColor === void 0 ? "whiteGrey" : _ref$backgroundColor,
+        backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
         theme = _ref.theme;
     return Object.assign({
       borderRadius: theme.radii.medium,
       backgroundColor: theme.colors[backgroundColor],
       borderTop: "1px solid  " + theme.colors[backgroundColor],
       borderBottom: "1px solid " + theme.colors[backgroundColor],
-      boxShadow: theme.shadows.small,
+      boxShadow: theme.shadows.medium,
       padding: "7px 0",
       zIndex: "100"
     }, getMenuMargin(dataPlacement, showArrow));
@@ -20190,7 +20190,7 @@
         disabled = _a.disabled,
         defaultOpen = _a.defaultOpen,
         _a$backgroundColor = _a.backgroundColor,
-        backgroundColor = _a$backgroundColor === void 0 ? "whiteGrey" : _a$backgroundColor,
+        backgroundColor = _a$backgroundColor === void 0 ? "white" : _a$backgroundColor,
         _a$placement = _a.placement,
         placement = _a$placement === void 0 ? "bottom-start" : _a$placement,
         className = _a.className,
@@ -20242,15 +20242,14 @@
   var DropdownButton = styled__default['default'].button.withConfig({
     displayName: "DropdownButton",
     componentId: "sc-16gk4iv-0"
-  })(color, function (_ref) {
-    var _ref$disabled = _ref.disabled,
-        disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+  })(function (_ref) {
+    var disabled = _ref.disabled,
         theme = _ref.theme,
-        _ref$hoverColor = _ref.hoverColor,
-        hoverColor = _ref$hoverColor === void 0 ? "darkBlue" : _ref$hoverColor,
-        _ref$bgHoverColor = _ref.bgHoverColor,
-        bgHoverColor = _ref$bgHoverColor === void 0 ? "lightGrey" : _ref$bgHoverColor;
+        hoverColor = _ref.hoverColor,
+        bgHoverColor = _ref.bgHoverColor;
     return {
+      color: theme.colors.darkGrey,
+      fontWeight: theme.fontWeights.medium,
       display: "block",
       width: "100%",
       cursor: disabled ? "default" : "pointer",
@@ -20276,12 +20275,11 @@
         opacity: ".5"
       }
     };
-  });
+  }, color);
   DropdownButton.defaultProps = {
-    color: "darkBlue",
     disabled: false,
     hoverColor: "darkBlue",
-    bgHoverColor: "lightGrey"
+    bgHoverColor: "lightBlue"
   };
 
   var DropdownLink = styled__default['default'].a.withConfig({
@@ -20290,13 +20288,12 @@
     }
   })(function (_ref) {
     var theme = _ref.theme,
-        _ref$bgHoverColor = _ref.bgHoverColor,
-        bgHoverColor = _ref$bgHoverColor === void 0 ? "lightGrey" : _ref$bgHoverColor,
-        _ref$hoverColor = _ref.hoverColor,
-        hoverColor = _ref$hoverColor === void 0 ? "darkBlue" : _ref$hoverColor,
-        _ref$color = _ref.color,
-        color = _ref$color === void 0 ? "darkBlue" : _ref$color;
+        color = _ref.color,
+        bgHoverColor = _ref.bgHoverColor,
+        hoverColor = _ref.hoverColor;
     return {
+      color: theme.colors[color],
+      fontWeight: theme.fontWeights.medium,
       display: "block",
       textDecoration: "none",
       borderColor: "transparent",
@@ -20304,16 +20301,15 @@
       lineHeight: theme.lineHeights.base,
       fontSize: theme.fontSizes.medium,
       transition: ".2s",
-      color: theme.colors[color],
       padding: theme.space.x1 + " " + theme.space.x2 + " " + theme.space.x1 + " 12px",
       borderLeft: theme.space.half + " solid transparent",
+      "&:visited": {
+        color: theme.colors[color]
+      },
       "&:hover": {
         color: theme.colors[hoverColor],
         backgroundColor: theme.colors[bgHoverColor]
       },
-      "&:visited": {
-        color: theme.colors[color]
-      },
       "&:focus": {
         outline: "none",
         color: theme.colors[hoverColor],
@@ -20325,21 +20321,25 @@
       }
     };
   });
+  DropdownLink.defaultProps = {
+    disabled: false,
+    color: "darkGrey",
+    hoverColor: "darkBlue",
+    bgHoverColor: "lightBlue"
+  };
 
   var DropdownItem = styled__default['default'].div.withConfig({
     displayName: "DropdownItem",
     componentId: "xev49s-0"
   })(function (_ref) {
     var theme = _ref.theme,
-        _ref$color = _ref.color,
-        color = _ref$color === void 0 ? "darkBlue" : _ref$color,
-        _ref$hoverColor = _ref.hoverColor,
-        hoverColor = _ref$hoverColor === void 0 ? "darkBlue" : _ref$hoverColor,
-        _ref$bgHoverColor = _ref.bgHoverColor,
-        bgHoverColor = _ref$bgHoverColor === void 0 ? "lightGrey" : _ref$bgHoverColor;
+        color = _ref.color,
+        hoverColor = _ref.hoverColor,
+        bgHoverColor = _ref.bgHoverColor;
     return {
       "*": {
         color: theme.colors[color],
+        fontWeight: theme.fontWeights.medium,
         display: "block",
         width: "100%",
         cursor: "pointer",
@@ -20367,6 +20367,29 @@
       }
     };
   });
+  DropdownItem.defaultProps = {
+    color: "darkGrey",
+    hoverColor: "darkBlue",
+    bgHoverColor: "lightBlue"
+  };
+
+  var DropdownText = styled__default['default'](Text).withConfig({
+    displayName: "DropdownText",
+    componentId: "sc-1t7br0a-0"
+  })(function (_ref) {
+    var theme = _ref.theme;
+    return {
+      color: theme.colors.darkGrey,
+      fontWeight: theme.fontWeights.medium,
+      display: "block",
+      width: "100%",
+      border: "none",
+      textAlign: "left",
+      backgroundColor: "transparent",
+      transition: ".2s",
+      padding: theme.space.x1 + " " + theme.space.x2
+    };
+  }, color);
 
   var HelpText = styled__default['default'](Text).withConfig({
     displayName: "HelpText",
@@ -22840,12 +22863,12 @@
     hideDelay: "100"
   };
 
-  var SubMenuLink$1 = styled__default['default'](DropdownLink).withConfig({
+  var SubMenuLink = styled__default['default'](DropdownLink).withConfig({
     displayName: "renderSubMenuItems__SubMenuLink",
     componentId: "sc-10nvflk-0"
   })(fontSize, lineHeight, space);
 
-  var getSharedStyles$5 = function getSharedStyles() {
+  var getSharedStyles$4 = function getSharedStyles() {
     return {
       display: "block",
       whiteSpace: "nowrap",
@@ -22858,13 +22881,13 @@
     };
   };
 
-  var ApplySubMenuLinkStyles$1 = styled__default['default'].li.withConfig({
+  var ApplySubMenuLinkStyles = styled__default['default'].li.withConfig({
     displayName: "renderSubMenuItems__ApplySubMenuLinkStyles",
     componentId: "sc-10nvflk-1"
   })({
     color: Theme.colors.darkBlue,
     verticalAlign: "middle",
-    "> *": Object.assign(Object.assign({}, getSharedStyles$5()), {
+    "> *": Object.assign(Object.assign({}, getSharedStyles$4()), {
       transition: ".2s",
       textDecoration: "none",
       "&:hover, &:focus": {
@@ -22879,12 +22902,12 @@
       }
     })
   });
-  var SubMenuText$1 = styled__default['default'].li.withConfig({
+  var SubMenuText = styled__default['default'].li.withConfig({
     displayName: "renderSubMenuItems__SubMenuText",
     componentId: "sc-10nvflk-2"
   })(Object.assign({
     color: Theme.colors.darkGrey
-  }, getSharedStyles$5()));
+  }, getSharedStyles$4()));
 
   var renderSubMenuTrigger$1 = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
     var _a;
@@ -22909,7 +22932,7 @@
         whiteSpace: "nowrap"
       },
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink$1, {
+    }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink, {
       fontSize: "small",
       lineHeight: "smallTextBase",
       py: "half",
@@ -22923,7 +22946,7 @@
   var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles$1, {
+    return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles, {
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
       onClick: onItemClick
     }, subMenuItem.render());
@@ -22932,7 +22955,7 @@
   var renderText$5 = function renderText(subMenuItem) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(SubMenuText$1, {
+    return /*#__PURE__*/React__default['default'].createElement(SubMenuText, {
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, subMenuItem.name);
   };
@@ -23219,7 +23242,7 @@
     hoverBackground: Theme.colors.black
   };
 
-  var getSharedStyles$4 = function getSharedStyles(color) {
+  var getSharedStyles$3 = function getSharedStyles(color) {
     return {
       display: "block",
       color: themeGet("colors." + color, color)(color),
@@ -23234,7 +23257,7 @@
     };
   };
 
-  var ApplyMenuLinkStyles$3 = styled__default['default'].div.withConfig({
+  var ApplyMenuLinkStyles$2 = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__ApplyMenuLinkStyles",
     componentId: "sc-1mpxh2o-0"
   })(function (_ref) {
@@ -23242,7 +23265,7 @@
         hoverColor = _ref.hoverColor,
         hoverBackground = _ref.hoverBackground;
     return {
-      "*": Object.assign(Object.assign({}, getSharedStyles$4(color)), {
+      "*": Object.assign(Object.assign({}, getSharedStyles$3(color)), {
         transition: ".2s",
         "&:hover, &:focus": {
           outline: "none",
@@ -23259,24 +23282,24 @@
       })
     };
   });
-  ApplyMenuLinkStyles$3.propTypes = {
+  ApplyMenuLinkStyles$2.propTypes = {
     color: PropTypes__default['default'].string,
     hoverColor: PropTypes__default['default'].string,
     hoverBackground: PropTypes__default['default'].string
   };
-  ApplyMenuLinkStyles$3.defaultProps = {
+  ApplyMenuLinkStyles$2.defaultProps = {
     color: Theme.colors.white,
     hoverColor: Theme.colors.lightBlue,
     hoverBackground: Theme.colors.black
   };
-  var MenuLink$3 = styled__default['default'].a.withConfig({
+  var MenuLink$2 = styled__default['default'].a.withConfig({
     displayName: "DesktopMenu__MenuLink",
     componentId: "sc-1mpxh2o-1"
   })(function (_ref2) {
     var color = _ref2.color,
         hoverColor = _ref2.hoverColor,
         hoverBackground = _ref2.hoverBackground;
-    return Object.assign(Object.assign({}, getSharedStyles$4(color)), {
+    return Object.assign(Object.assign({}, getSharedStyles$3(color)), {
       transition: ".2s",
       "&:hover, &:focus": {
         outline: "none",
@@ -23292,12 +23315,12 @@
       }
     });
   });
-  var MenuText$3 = styled__default['default'].div.withConfig({
+  var MenuText$2 = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__MenuText",
     componentId: "sc-1mpxh2o-2"
   })(function (_ref3) {
     var textColor = _ref3.textColor;
-    return Object.assign({}, getSharedStyles$4(textColor));
+    return Object.assign({}, getSharedStyles$3(textColor));
   });
   var Nav$3 = styled__default['default'].nav.withConfig({
     displayName: "DesktopMenu__Nav",
@@ -23319,7 +23342,7 @@
   var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$3, Object.assign({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$2, Object.assign({
       href: menuItem.href,
       as: menuItem.as,
       to: menuItem.to
@@ -23327,13 +23350,13 @@
   };
 
   var renderCustom$4 = function renderCustom(menuItem, themeColorObject) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$3, Object.assign({}, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$2, Object.assign({}, themeColorObject, {
       key: menuItem.name
     }), menuItem.render());
   };
 
   var renderText$4 = function renderText(menuItem, themeColorObject) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuText$3, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(MenuText$2, Object.assign({
       key: menuItem.name
     }, themeColorObject), menuItem.name);
   };
@@ -23428,7 +23451,7 @@
     return 24 * layer + 24 + "px";
   };
 
-  var getSharedStyles$3 = function getSharedStyles(_ref) {
+  var getSharedStyles$2 = function getSharedStyles(_ref) {
     var color = _ref.color,
         layer = _ref.layer;
     return {
@@ -23446,7 +23469,7 @@
     };
   };
 
-  var ApplyMenuLinkStyles$2 = styled__default['default'].li.withConfig({
+  var ApplyMenuLinkStyles$1 = styled__default['default'].li.withConfig({
     displayName: "MobileMenu__ApplyMenuLinkStyles",
     componentId: "vqy2lk-1"
   })(function (_ref2) {
@@ -23456,7 +23479,7 @@
         layer = _ref2.layer;
     return {
       display: "block",
-      "*": Object.assign(Object.assign({}, getSharedStyles$3({
+      "*": Object.assign(Object.assign({}, getSharedStyles$2({
         color: color,
         layer: layer
       })), {
@@ -23475,19 +23498,19 @@
       })
     };
   });
-  ApplyMenuLinkStyles$2.propTypes = {
+  ApplyMenuLinkStyles$1.propTypes = {
     layer: PropTypes__default['default'].number,
     color: PropTypes__default['default'].string,
     hoverColor: PropTypes__default['default'].string,
     hoverBackground: PropTypes__default['default'].string
   };
-  ApplyMenuLinkStyles$2.defaultProps = {
+  ApplyMenuLinkStyles$1.defaultProps = {
     layer: 0,
     color: Theme.colors.white,
     hoverColor: Theme.colors.lightBlue,
     hoverBackground: Theme.colors.black
   };
-  var MenuLink$2 = styled__default['default'].a.withConfig({
+  var MenuLink$1 = styled__default['default'].a.withConfig({
     displayName: "MobileMenu__MenuLink",
     componentId: "vqy2lk-2"
   })(function (_ref3) {
@@ -23495,7 +23518,7 @@
         hoverColor = _ref3.hoverColor,
         hoverBackground = _ref3.hoverBackground,
         layer = _ref3.layer;
-    return Object.assign(Object.assign({}, getSharedStyles$3({
+    return Object.assign(Object.assign({}, getSharedStyles$2({
       color: color,
       layer: layer
     })), {
@@ -23516,13 +23539,13 @@
       }
     });
   });
-  var MenuText$2 = styled__default['default'].li.withConfig({
+  var MenuText$1 = styled__default['default'].li.withConfig({
     displayName: "MobileMenu__MenuText",
     componentId: "vqy2lk-3"
   })(function (_ref4) {
     var textColor = _ref4.textColor,
         layer = _ref4.layer;
-    return Object.assign({}, getSharedStyles$3({
+    return Object.assign({}, getSharedStyles$2({
       color: textColor,
       layer: layer
     }));
@@ -23543,7 +23566,7 @@
         display: "block",
         marginBottom: Theme.space.x1
       }
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$2, Object.assign({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$1, Object.assign({
       layer: layer
     }, themeColorObject, {
       onClick: linkOnClick,
@@ -23554,7 +23577,7 @@
   };
 
   var renderCustom$3 = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$2, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({
       key: menuItem.name
     }, themeColorObject, {
       layer: layer,
@@ -23577,7 +23600,7 @@
   };
 
   var renderText$3 = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuText$2, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(MenuText$1, Object.assign({
       key: menuItem.name,
       layer: layer
     }, themeColorObject), menuItem.name);
@@ -25395,7 +25418,7 @@
       backgroundColor: tooltipStyles(theme).backgroundColor,
       borderRadius: theme.radii.medium,
       border: "1px solid " + tooltipStyles(theme).borderColor,
-      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.18)",
+      boxShadow: theme.shadows.medium,
       padding: theme.space.x1,
       transition: "opacity 0.3s",
       zIndex: theme.zIndices.content
@@ -44513,8 +44536,8 @@
         })), /*#__PURE__*/React__default['default'].createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, {
           placement: placement,
           ref: popperProps.arrowProps.ref,
-          backgroundColor: "whiteGrey",
-          borderColor: "whiteGrey"
+          backgroundColor: "white",
+          borderColor: "white"
         })), /*#__PURE__*/React__default['default'].createElement(DetectOutsideClick, {
           onClick: _this4.handleOutsideClick,
           clickRef: [_this4.menuRef, _this4.triggerRef]
@@ -44561,64 +44584,10 @@
     hideDelay: "100"
   };
 
-  var SubMenuLink = styled__default['default'](DropdownLink).withConfig({
-    displayName: "renderSubMenuItems__SubMenuLink",
-    componentId: "vyx9p-0"
-  })(fontSize, lineHeight, space);
-  SubMenuLink.propTypes = Object.assign(Object.assign(Object.assign({}, propTypes.fontSize), propTypes.lineHeight), propTypes.space);
-
-  var getSharedStyles$2 = function getSharedStyles() {
-    return {
-      display: "block",
-      whiteSpace: "nowrap",
-      textDecoration: "none",
-      borderColor: "transparent",
-      backgroundColor: "transparent",
-      lineHeight: Theme.lineHeights.smallTextBase,
-      fontSize: "" + Theme.fontSizes.small,
-      padding: Theme.space.half + " " + Theme.space.x2
-    };
-  };
-
-  var ApplySubMenuLinkStyles = styled__default['default'].li.withConfig({
-    displayName: "renderSubMenuItems__ApplySubMenuLinkStyles",
-    componentId: "vyx9p-1"
-  })(function () {
-    return {
-      color: Theme.colors.darkBlue,
-      verticalAlign: "middle",
-      "> *": Object.assign(Object.assign({}, getSharedStyles$2()), {
-        transition: ".2s",
-        textDecoration: "none",
-        "&:hover, &:focus": {
-          outline: "none",
-          backgroundColor: Theme.colors.lightGrey
-        },
-        "&:disabled": {
-          opacity: ".5"
-        },
-        "&:focus": {
-          boxShadow: Theme.shadows.focus
-        }
-      })
-    };
-  });
-  var SubMenuText = styled__default['default'].li.withConfig({
-    displayName: "renderSubMenuItems__SubMenuText",
-    componentId: "vyx9p-2"
-  })(function () {
-    return Object.assign({
-      color: Theme.colors.darkGrey
-    }, getSharedStyles$2());
-  });
-
   var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClick, SubMenuTrigger) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement("li", {
-      style: {
-        whiteSpace: "nowrap"
-      },
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
     }, /*#__PURE__*/React__default['default'].createElement(SubMenuTrigger, {
       onItemClick: onItemClick,
@@ -44630,14 +44599,9 @@
   var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement("li", {
-      style: {
-        whiteSpace: "nowrap"
-      },
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(SubMenuLink, {
-      fontSize: "small",
-      lineHeight: "smallTextBase",
+    }, /*#__PURE__*/React__default['default'].createElement(DropdownLink, {
       py: "half",
       onClick: onItemClick,
       href: subMenuItem.href,
@@ -44649,18 +44613,17 @@
   var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ApplySubMenuLinkStyles, {
-      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
-      onClick: onItemClick
-    }, subMenuItem.render());
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
+      key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
+    }, subMenuItem.render(onItemClick));
   };
 
   var renderText$2 = function renderText(subMenuItem) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(SubMenuText, {
+    return /*#__PURE__*/React__default['default'].createElement(NoWrapLi, {
       key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-    }, subMenuItem.name);
+    }, /*#__PURE__*/React__default['default'].createElement(DropdownText, null, subMenuItem.name));
   };
 
   var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
@@ -44681,37 +44644,25 @@
     });
   };
 
-  var StyledButton$1 = styled__default['default'].button.withConfig({
+  var NoWrapLi = styled__default['default'].li.withConfig({
+    displayName: "renderSubMenuItems__NoWrapLi",
+    componentId: "vyx9p-0"
+  })(function () {
+    return {
+      whiteSpace: "nowrap"
+    };
+  });
+
+  var StyledButton$1 = styled__default['default'](DropdownButton).withConfig({
     displayName: "SubMenuTrigger__StyledButton",
     componentId: "sc-1tg8y8b-0"
   })(function (_ref) {
-    var isOpen = _ref.isOpen;
+    var isOpen = _ref.isOpen,
+        theme = _ref.theme;
     return {
-      display: "block",
       position: "relative",
-      color: Theme.colors.darkBlue,
-      fontSize: Theme.fontSizes.small,
-      lineHeight: Theme.lineHeights.smallTextBase,
-      width: "100%",
-      padding: Theme.space.half + " 28px " + Theme.space.half + " 12px",
-      border: "none",
-      borderLeft: Theme.space.half + " solid transparent",
-      "&:hover": {
-        backgroundColor: Theme.colors.lightGrey
-      },
-      "&:disabled": {
-        opacity: ".5"
-      },
-      "&:focus": {
-        outline: "none",
-        color: Theme.colors.darkBlue,
-        backgroundColor: Theme.colors.lightGrey,
-        borderLeft: Theme.space.half + "  solid " + Theme.colors.blue
-      },
-      backgroundColor: isOpen ? Theme.colors.lightGrey : "transparent",
-      textDecoration: "none",
-      textAlign: "left",
-      cursor: "pointer"
+      backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
+      color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey
     };
   });
   var SubMenuTriggerButton = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
@@ -44725,10 +44676,9 @@
     }, props), name, /*#__PURE__*/React__default['default'].createElement(Icon, {
       style: {
         position: "absolute",
-        top: "7px"
+        top: "10px"
       },
       icon: "rightArrow",
-      color: "darkBlue",
       size: "20px",
       p: "2px"
     }));
@@ -44779,7 +44729,7 @@
     );
   };
 
-  SubMenuTrigger.displayName = "SubMenuTriggerButton";
+  SubMenuTrigger.displayName = "SubMenuTrigger";
 
   var StyledButton = styled__default['default'].button.withConfig({
     displayName: "MenuTrigger__StyledButton",
@@ -44924,7 +44874,7 @@
     };
   };
 
-  var ApplyMenuLinkStyles$1 = styled__default['default'].div.withConfig({
+  var ApplyMenuLinkStyles = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__ApplyMenuLinkStyles",
     componentId: "sc-8mrjkc-0"
   })(function (_ref) {
@@ -44953,7 +44903,7 @@
       })
     };
   });
-  var MenuLink$1 = styled__default['default'].a.withConfig({
+  var MenuLink = styled__default['default'].a.withConfig({
     displayName: "DesktopMenu__MenuLink",
     componentId: "sc-8mrjkc-1"
   })(function (_ref2) {
@@ -44978,7 +44928,7 @@
       }
     });
   });
-  var MenuText$1 = styled__default['default'].div.withConfig({
+  var MenuText = styled__default['default'].div.withConfig({
     displayName: "DesktopMenu__MenuText",
     componentId: "sc-8mrjkc-2"
   })(function (_ref3) {
@@ -45013,7 +44963,7 @@
 
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink$1, Object.assign({
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({
       href: menuItem.href,
       to: menuItem.to,
       as: menuItem.as
@@ -45023,7 +44973,7 @@
   var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({}, themeColorObject, {
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }), menuItem.render());
   };
@@ -45031,7 +44981,7 @@
   var renderText$1 = function renderText(menuItem, themeColorObject) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(MenuText$1, Object.assign({
+    return /*#__PURE__*/React__default['default'].createElement(MenuText, Object.assign({
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
     }, themeColorObject), menuItem.name);
   };
@@ -45137,94 +45087,44 @@
       color: theme.colors.white,
       marginBottom: theme.space.x1
     };
-  });
+  }); // eslint-disable-next-line no-mixed-operators
 
   var getPaddingLeft = function getPaddingLeft(layer) {
     return 24 * layer + 24 + "px";
   };
 
-  var getSharedStyles = function getSharedStyles(_ref2) {
-    var color = _ref2.color,
-        layer = _ref2.layer,
-        theme = _ref2.theme;
+  var getSharedStyles = function getSharedStyles(theme) {
     return {
       display: "block",
-      color: theme.colors[color] || color,
       textDecoration: "none",
       border: "none",
       backgroundColor: "transparent",
-      borderRadius: theme.radii.medium,
-      fontSize: layer === 0 ? theme.fontSizes.large : theme.fontSizes.medium,
-      lineHeight: layer === 0 ? theme.lineHeights.heading3 : theme.lineHeights.base,
-      padding: layer === 0 ? theme.space.x1 + " " + theme.space.x3 : theme.space.x1 + " " + theme.space.x2,
-      paddingLeft: getPaddingLeft(layer),
+      fontSize: theme.fontSizes.large,
+      fontWeight: theme.fontWeights.medium,
+      lineHeight: theme.lineHeights.heading3,
       marginBottom: theme.space.x1,
-      "&:visited": {
-        color: theme.colors[color] || color
-      },
-      "&:hover": {
-        color: "#434d59",
-        background: "#f0f2f5"
-      }
+      padding: theme.space.x1 + " " + theme.space.x3,
+      paddingLeft: getPaddingLeft(0)
     };
   };
 
-  var ApplyMenuLinkStyles = styled__default['default'].li.withConfig({
-    displayName: "MobileMenu__ApplyMenuLinkStyles",
+  var TopLevelLink = styled__default['default'](Link).withConfig({
+    displayName: "MobileMenu__TopLevelLink",
     componentId: "sc-18t6zrc-1"
-  })(function (_ref3) {
-    var _ref3$color = _ref3.color,
-        color = _ref3$color === void 0 ? "white" : _ref3$color,
-        _ref3$hoverColor = _ref3.hoverColor,
-        hoverColor = _ref3$hoverColor === void 0 ? "lightBlue" : _ref3$hoverColor,
-        _ref3$hoverBackground = _ref3.hoverBackground,
-        hoverBackground = _ref3$hoverBackground === void 0 ? "white" : _ref3$hoverBackground,
-        _ref3$layer = _ref3.layer,
-        layer = _ref3$layer === void 0 ? 0 : _ref3$layer,
-        theme = _ref3.theme;
-    return {
-      display: "block",
-      "button, a": Object.assign(Object.assign({}, getSharedStyles({
-        color: color,
-        layer: layer,
-        theme: theme
-      })), {
-        textDecoration: "none",
-        "&:hover, &:focus": {
-          outline: "none",
-          color: theme.colors[hoverColor] || hoverColor,
-          backgroundColor: theme.colors[hoverBackground] || hoverBackground
-        },
-        "&:disabled": {
-          opacity: ".5"
-        },
-        "&:focus": {
-          boxShadow: theme.shadows.focus
-        }
-      })
-    };
-  });
-  var MenuLink = styled__default['default'].a.withConfig({
-    displayName: "MobileMenu__MenuLink",
-    componentId: "sc-18t6zrc-2"
-  })(function (_ref4) {
-    var color = _ref4.color,
-        hoverColor = _ref4.hoverColor,
-        hoverBackground = _ref4.hoverBackground,
-        layer = _ref4.layer,
-        theme = _ref4.theme;
-    return Object.assign(Object.assign({}, getSharedStyles({
-      color: color,
-      layer: layer,
-      theme: theme
-    })), {
+  })(function (_ref2) {
+    var theme = _ref2.theme;
+    return Object.assign(Object.assign({}, getSharedStyles(theme)), {
+      color: theme.colors.darkBlue,
+      "&:visited": {
+        color: theme.colors.darkBlue
+      },
       width: "100%",
       borderRadius: "0",
       transition: ".2s",
       "&:hover, &:focus": {
         outline: "none",
-        color: themeGet("colors." + hoverColor, hoverColor)(hoverColor),
-        backgroundColor: themeGet("colors." + hoverBackground, hoverBackground)(hoverBackground),
+        color: theme.colors.blackBlue,
+        backgroundColor: theme.colors.whiteGrey,
         cursor: "pointer"
       },
       "&:focus": {
@@ -45235,18 +45135,31 @@
       }
     });
   });
-  var MenuText = styled__default['default'].li.withConfig({
-    displayName: "MobileMenu__MenuText",
+  var TopLevelText = styled__default['default'](Text).withConfig({
+    displayName: "MobileMenu__TopLevelText",
+    componentId: "sc-18t6zrc-2"
+  })(function (_ref3) {
+    var theme = _ref3.theme;
+    return Object.assign(Object.assign({}, getSharedStyles(theme)), {
+      color: theme.colors.blackBlue
+    });
+  });
+  var ChildIndentingLi = styled__default['default'].li.withConfig({
+    displayName: "MobileMenu__ChildIndentingLi",
     componentId: "sc-18t6zrc-3"
-  })(function (_ref5) {
-    var textColor = _ref5.textColor,
-        layer = _ref5.layer,
-        theme = _ref5.theme;
-    return Object.assign({}, getSharedStyles({
-      color: textColor,
-      layer: layer,
-      theme: theme
-    }));
+  })(function (_ref4) {
+    var _ref5;
+
+    var layer = _ref4.layer,
+        theme = _ref4.theme;
+    return _ref5 = {
+      marginBottom: theme.space.x1
+    }, _ref5["> " + DropdownButton + ", > " + DropdownLink] = {
+      // eslint-disable-next-line no-mixed-operators
+      paddingLeft: 24 * layer + 20 + "px"
+    }, _ref5["> " + DropdownText] = {
+      paddingLeft: getPaddingLeft(layer)
+    }, _ref5;
   });
   var SubMenuItemsList = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__SubMenuItemsList",
@@ -45256,41 +45169,29 @@
     paddingLeft: "0",
     margin: "0"
   });
-  var StyledLi = styled__default['default'].li.withConfig({
-    displayName: "MobileMenu__StyledLi",
-    componentId: "sc-18t6zrc-5"
-  })(function (_ref6) {
-    var theme = _ref6.theme;
-    return {
-      marginBottom: theme.space.x1,
-      display: "block"
-    };
-  });
 
   var renderMenuLink = function renderMenuLink(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(StyledLi, {
+    var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
+      layer: layer,
       key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, Object.assign({
-      layer: layer
-    }, themeColorObject, {
+    }, /*#__PURE__*/React__default['default'].createElement(MenuLink, {
       onClick: linkOnClick,
       href: menuItem.href,
       as: menuItem.as,
       to: menuItem.to
-    }), menuItem.name));
+    }, menuItem.name));
   };
 
   var renderCustom = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(ApplyMenuLinkStyles, Object.assign({
-      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-    }, themeColorObject, {
+    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
       layer: layer,
-      onClick: linkOnClick
-    }), menuItem.render());
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+    }, menuItem.render(linkOnClick, layer));
   };
 
   var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObject, layer) {
@@ -45312,10 +45213,11 @@
   var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
     var _a;
 
-    return /*#__PURE__*/React__default['default'].createElement(MenuText, Object.assign({
-      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name,
-      layer: layer
-    }, themeColorObject), menuItem.name);
+    var MenuText = layer === 0 ? TopLevelText : DropdownText;
+    return /*#__PURE__*/React__default['default'].createElement(ChildIndentingLi, {
+      layer: layer,
+      key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+    }, /*#__PURE__*/React__default['default'].createElement(MenuText, null, menuItem.name));
   };
 
   var getRenderFunction = function getRenderFunction(menuItem) {
@@ -45341,50 +45243,47 @@
     return renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
   };
 
-  var getSubMenuHeading = function getSubMenuHeading(layer, color, name) {
-    return layer === 0 ? /*#__PURE__*/React__default['default'].createElement(Heading3, {
-      mb: "x1",
-      color: color
-    }, name) : /*#__PURE__*/React__default['default'].createElement(Text, {
+  var getSubMenuHeading = function getSubMenuHeading(layer, name) {
+    return layer === 0 ? /*#__PURE__*/React__default['default'].createElement(TopLevelText, {
+      as: "h3"
+    }, name) : /*#__PURE__*/React__default['default'].createElement(DropdownText, {
       mb: "x1",
-      color: color,
-      py: "x1",
       style: {
         paddingLeft: getPaddingLeft(layer)
       }
     }, name);
   };
 
-  var SubMenu = function SubMenu(_ref7) {
-    var menuItem = _ref7.menuItem,
-        linkOnClick = _ref7.linkOnClick,
-        themeColorObject = _ref7.themeColorObject,
-        layer = _ref7.layer;
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
+  var SubMenu = function SubMenu(_ref6) {
+    var menuItem = _ref6.menuItem,
+        linkOnClick = _ref6.linkOnClick,
+        themeColorObject = _ref6.themeColorObject,
+        layer = _ref6.layer;
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default['default'].createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
   };
 
   var Menu$1 = styled__default['default'].ul.withConfig({
     displayName: "MobileMenu__Menu",
-    componentId: "sc-18t6zrc-6"
-  })(function (_ref8) {
-    var _ref9;
+    componentId: "sc-18t6zrc-5"
+  })(function (_ref7) {
+    var _ref8;
 
-    var theme = _ref8.theme;
-    return _ref9 = {
+    var theme = _ref7.theme;
+    return _ref8 = {
       margin: "0",
       padding: theme.space.x1 + " 0",
       zIndex: theme.zIndices.content,
       width: "100%",
       color: theme.colors.white
-    }, _ref9["" + Heading3] = {
+    }, _ref8["" + Heading3] = {
       padding: theme.space.x1 + " 0 " + theme.space.x1 + " " + theme.space.x3
-    }, _ref9;
+    }, _ref8;
   });
   var Nav = styled__default['default'].nav.withConfig({
     displayName: "MobileMenu__Nav",
-    componentId: "sc-18t6zrc-7"
-  })(function (_ref10) {
-    var backgroundColor = _ref10.backgroundColor;
+    componentId: "sc-18t6zrc-6"
+  })(function (_ref9) {
+    var backgroundColor = _ref9.backgroundColor;
     return {
       backgroundColor: backgroundColor
     };
@@ -45422,7 +45321,7 @@
 
   var MobileMenu = styled__default['default'](BaseMobileMenu).withConfig({
     displayName: "MobileMenu",
-    componentId: "sc-18t6zrc-8"
+    componentId: "sc-18t6zrc-7"
   })(display);
 
   var borderStyle = "1px solid #e4e7eb";
@@ -45487,7 +45386,7 @@
     return {
       background: backgroundColor,
       padding: "0 " + theme.space.x3,
-      boxShadow: theme.shadows.large,
+      borderBottom: "1px solid " + theme.colors.lightGrey,
       alignItems: "center",
       height: NAVBAR_HEIGHT,
       zIndex: theme.zIndices.navBar,
@@ -52683,7 +52582,6 @@
       display: "flex",
       flexDirection: "column",
       height: "calc(100% - " + NAVBAR_HEIGHT + ")",
-      boxShadow: "large",
       borderLeftWidth: "1px",
       borderLeftStyle: "solid",
       borderLeftColor: "lightGrey",
@@ -52864,6 +52762,7 @@
   exports.DropdownItem = DropdownItem;
   exports.DropdownLink = DropdownLink;
   exports.DropdownMenu = DropdownMenu;
+  exports.DropdownText = DropdownText;
   exports.Field = Field;
   exports.FieldLabel = FieldLabel;
   exports.Fieldset = Fieldset;