@nulogy/components 6.7.5 → 6.8.0

package/dist/main.module.js

@@ -21,10 +21,10 @@ import reactDom, { findDOMNode, createPortal } from 'react-dom';
 import WindowedSelect, { components as components$1 } from 'react-windowed-select';
 import exenv from 'exenv';
 import smoothscroll from 'smoothscroll-polyfill';
+import t from 'classnames';
 import '@babel/runtime/helpers/toConsumableArray';
 import AutosizeInput from 'react-input-autosize';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
-import t from 'classnames';
 
 var defaultOptions = {
   bindI18n: 'languageChanged',
@@ -249,7 +249,7 @@ function I18nextProvider(_ref) {
 
 /**
  * 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";
@@ -289,9 +289,9 @@ const line_height_heading_4 = "1.33";
 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";
@@ -11893,23 +11893,23 @@ var Text = styled.p.attrs(function (props) {
 }).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");
@@ -16920,14 +16920,14 @@ var DropdownMenuContainer = styled(Box).withConfig({
       _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));
@@ -20164,7 +20164,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       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,
@@ -20216,15 +20216,14 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
 var DropdownButton = styled.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",
@@ -20250,12 +20249,11 @@ var DropdownButton = styled.button.withConfig({
       opacity: ".5"
     }
   };
-});
+}, color);
 DropdownButton.defaultProps = {
-  color: "darkBlue",
   disabled: false,
   hoverColor: "darkBlue",
-  bgHoverColor: "lightGrey"
+  bgHoverColor: "lightBlue"
 };
 
 var DropdownLink = styled.a.withConfig({
@@ -20264,13 +20262,12 @@ var DropdownLink = styled.a.withConfig({
   }
 })(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",
@@ -20278,16 +20275,15 @@ var DropdownLink = styled.a.withConfig({
     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],
@@ -20299,21 +20295,25 @@ var DropdownLink = styled.a.withConfig({
     }
   };
 });
+DropdownLink.defaultProps = {
+  disabled: false,
+  color: "darkGrey",
+  hoverColor: "darkBlue",
+  bgHoverColor: "lightBlue"
+};
 
 var DropdownItem = styled.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",
@@ -20341,6 +20341,29 @@ var DropdownItem = styled.div.withConfig({
     }
   };
 });
+DropdownItem.defaultProps = {
+  color: "darkGrey",
+  hoverColor: "darkBlue",
+  bgHoverColor: "lightBlue"
+};
+
+var DropdownText = styled(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(Text).withConfig({
   displayName: "HelpText",
@@ -22814,12 +22837,12 @@ NavBarDropdownMenu$1.defaultProps = {
   hideDelay: "100"
 };
 
-var SubMenuLink$1 = styled(DropdownLink).withConfig({
+var SubMenuLink = styled(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",
@@ -22832,13 +22855,13 @@ var getSharedStyles$5 = function getSharedStyles() {
   };
 };
 
-var ApplySubMenuLinkStyles$1 = styled.li.withConfig({
+var ApplySubMenuLinkStyles = styled.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": {
@@ -22853,12 +22876,12 @@ var ApplySubMenuLinkStyles$1 = styled.li.withConfig({
     }
   })
 });
-var SubMenuText$1 = styled.li.withConfig({
+var SubMenuText = styled.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;
@@ -22883,7 +22906,7 @@ var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
       whiteSpace: "nowrap"
     },
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, /*#__PURE__*/React__default.createElement(SubMenuLink$1, {
+  }, /*#__PURE__*/React__default.createElement(SubMenuLink, {
     fontSize: "small",
     lineHeight: "smallTextBase",
     py: "half",
@@ -22897,7 +22920,7 @@ var renderSubMenuLink$1 = function renderSubMenuLink(subMenuItem, onItemClick) {
 var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles$1, {
+  return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
     onClick: onItemClick
   }, subMenuItem.render());
@@ -22906,7 +22929,7 @@ var renderCustom$5 = function renderCustom(subMenuItem, onItemClick) {
 var renderText$5 = function renderText(subMenuItem) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(SubMenuText$1, {
+  return /*#__PURE__*/React__default.createElement(SubMenuText, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, subMenuItem.name);
 };
@@ -23193,7 +23216,7 @@ MenuTrigger$1.defaultProps = {
   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),
@@ -23208,7 +23231,7 @@ var getSharedStyles$4 = function getSharedStyles(color) {
   };
 };
 
-var ApplyMenuLinkStyles$3 = styled.div.withConfig({
+var ApplyMenuLinkStyles$2 = styled.div.withConfig({
   displayName: "DesktopMenu__ApplyMenuLinkStyles",
   componentId: "sc-1mpxh2o-0"
 })(function (_ref) {
@@ -23216,7 +23239,7 @@ var ApplyMenuLinkStyles$3 = styled.div.withConfig({
       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",
@@ -23233,24 +23256,24 @@ var ApplyMenuLinkStyles$3 = styled.div.withConfig({
     })
   };
 });
-ApplyMenuLinkStyles$3.propTypes = {
+ApplyMenuLinkStyles$2.propTypes = {
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.string
 };
-ApplyMenuLinkStyles$3.defaultProps = {
+ApplyMenuLinkStyles$2.defaultProps = {
   color: Theme.colors.white,
   hoverColor: Theme.colors.lightBlue,
   hoverBackground: Theme.colors.black
 };
-var MenuLink$3 = styled.a.withConfig({
+var MenuLink$2 = styled.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",
@@ -23266,12 +23289,12 @@ var MenuLink$3 = styled.a.withConfig({
     }
   });
 });
-var MenuText$3 = styled.div.withConfig({
+var MenuText$2 = styled.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.nav.withConfig({
   displayName: "DesktopMenu__Nav",
@@ -23293,7 +23316,7 @@ var renderMenuTrigger$1 = function renderMenuTrigger(menuItem, themeColorObject)
 var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
   return /*#__PURE__*/React__default.createElement("div", {
     key: menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink$3, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(MenuLink$2, Object.assign({
     href: menuItem.href,
     as: menuItem.as,
     to: menuItem.to
@@ -23301,13 +23324,13 @@ var renderMenuLink$3 = function renderMenuLink(menuItem, themeColorObject) {
 };
 
 var renderCustom$4 = function renderCustom(menuItem, themeColorObject) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$3, Object.assign({}, themeColorObject, {
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$2, Object.assign({}, themeColorObject, {
     key: menuItem.name
   }), menuItem.render());
 };
 
 var renderText$4 = function renderText(menuItem, themeColorObject) {
-  return /*#__PURE__*/React__default.createElement(MenuText$3, Object.assign({
+  return /*#__PURE__*/React__default.createElement(MenuText$2, Object.assign({
     key: menuItem.name
   }, themeColorObject), menuItem.name);
 };
@@ -23402,7 +23425,7 @@ var getPaddingLeft$1 = function getPaddingLeft(layer) {
   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 {
@@ -23420,7 +23443,7 @@ var getSharedStyles$3 = function getSharedStyles(_ref) {
   };
 };
 
-var ApplyMenuLinkStyles$2 = styled.li.withConfig({
+var ApplyMenuLinkStyles$1 = styled.li.withConfig({
   displayName: "MobileMenu__ApplyMenuLinkStyles",
   componentId: "vqy2lk-1"
 })(function (_ref2) {
@@ -23430,7 +23453,7 @@ var ApplyMenuLinkStyles$2 = styled.li.withConfig({
       layer = _ref2.layer;
   return {
     display: "block",
-    "*": Object.assign(Object.assign({}, getSharedStyles$3({
+    "*": Object.assign(Object.assign({}, getSharedStyles$2({
       color: color,
       layer: layer
     })), {
@@ -23449,19 +23472,19 @@ var ApplyMenuLinkStyles$2 = styled.li.withConfig({
     })
   };
 });
-ApplyMenuLinkStyles$2.propTypes = {
+ApplyMenuLinkStyles$1.propTypes = {
   layer: PropTypes.number,
   color: PropTypes.string,
   hoverColor: PropTypes.string,
   hoverBackground: PropTypes.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.a.withConfig({
+var MenuLink$1 = styled.a.withConfig({
   displayName: "MobileMenu__MenuLink",
   componentId: "vqy2lk-2"
 })(function (_ref3) {
@@ -23469,7 +23492,7 @@ var MenuLink$2 = styled.a.withConfig({
       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
   })), {
@@ -23490,13 +23513,13 @@ var MenuLink$2 = styled.a.withConfig({
     }
   });
 });
-var MenuText$2 = styled.li.withConfig({
+var MenuText$1 = styled.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
   }));
@@ -23517,7 +23540,7 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
       display: "block",
       marginBottom: Theme.space.x1
     }
-  }, /*#__PURE__*/React__default.createElement(MenuLink$2, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(MenuLink$1, Object.assign({
     layer: layer
   }, themeColorObject, {
     onClick: linkOnClick,
@@ -23528,7 +23551,7 @@ var renderMenuLink$2 = function renderMenuLink(menuItem, linkOnClick, themeColor
 };
 
 var renderCustom$3 = function renderCustom(menuItem, linkOnClick, themeColorObject, layer) {
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$2, Object.assign({
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({
     key: menuItem.name
   }, themeColorObject, {
     layer: layer,
@@ -23551,7 +23574,7 @@ var renderSubMenu$1 = function renderSubMenu(menuItem, linkOnClick, themeColorOb
 };
 
 var renderText$3 = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
-  return /*#__PURE__*/React__default.createElement(MenuText$2, Object.assign({
+  return /*#__PURE__*/React__default.createElement(MenuText$1, Object.assign({
     key: menuItem.name,
     layer: layer
   }, themeColorObject), menuItem.name);
@@ -25369,7 +25392,7 @@ var TooltipContainer = styled(Box).withConfig({
     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
@@ -44487,8 +44510,8 @@ var StatelessNavBarDropdownMenu = /*#__PURE__*/function (_StatelessNavBarDropd)
       })), /*#__PURE__*/React__default.createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, {
         placement: placement,
         ref: popperProps.arrowProps.ref,
-        backgroundColor: "whiteGrey",
-        borderColor: "whiteGrey"
+        backgroundColor: "white",
+        borderColor: "white"
       })), /*#__PURE__*/React__default.createElement(DetectOutsideClick, {
         onClick: _this4.handleOutsideClick,
         clickRef: [_this4.menuRef, _this4.triggerRef]
@@ -44535,64 +44558,10 @@ NavBarDropdownMenu.defaultProps = {
   hideDelay: "100"
 };
 
-var SubMenuLink = styled(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.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.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.createElement("li", {
-    style: {
-      whiteSpace: "nowrap"
-    },
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
   }, /*#__PURE__*/React__default.createElement(SubMenuTrigger, {
     onItemClick: onItemClick,
@@ -44604,14 +44573,9 @@ var renderSubMenuTrigger = function renderSubMenuTrigger(subMenuItem, onItemClic
 var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement("li", {
-    style: {
-      whiteSpace: "nowrap"
-    },
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, /*#__PURE__*/React__default.createElement(SubMenuLink, {
-    fontSize: "small",
-    lineHeight: "smallTextBase",
+  }, /*#__PURE__*/React__default.createElement(DropdownLink, {
     py: "half",
     onClick: onItemClick,
     href: subMenuItem.href,
@@ -44623,18 +44587,17 @@ var renderSubMenuLink = function renderSubMenuLink(subMenuItem, onItemClick) {
 var renderCustom$2 = function renderCustom(subMenuItem, onItemClick) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(ApplySubMenuLinkStyles, {
-    key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name,
-    onClick: onItemClick
-  }, subMenuItem.render());
+  return /*#__PURE__*/React__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.createElement(SubMenuText, {
+  return /*#__PURE__*/React__default.createElement(NoWrapLi, {
     key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name
-  }, subMenuItem.name);
+  }, /*#__PURE__*/React__default.createElement(DropdownText, null, subMenuItem.name));
 };
 
 var getRenderFunction$2 = function getRenderFunction(subMenuItem) {
@@ -44655,37 +44618,25 @@ var renderSubMenuItems = function renderSubMenuItems(subMenuItems, onItemClick,
   });
 };
 
-var StyledButton$1 = styled.button.withConfig({
+var NoWrapLi = styled.li.withConfig({
+  displayName: "renderSubMenuItems__NoWrapLi",
+  componentId: "vyx9p-0"
+})(function () {
+  return {
+    whiteSpace: "nowrap"
+  };
+});
+
+var StyledButton$1 = styled(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.forwardRef(function (_a, ref) {
@@ -44699,10 +44650,9 @@ var SubMenuTriggerButton = /*#__PURE__*/React__default.forwardRef(function (_a,
   }, props), name, /*#__PURE__*/React__default.createElement(Icon, {
     style: {
       position: "absolute",
-      top: "7px"
+      top: "10px"
     },
     icon: "rightArrow",
-    color: "darkBlue",
     size: "20px",
     p: "2px"
   }));
@@ -44753,7 +44703,7 @@ var SubMenuTrigger = function SubMenuTrigger(_a) {
   );
 };
 
-SubMenuTrigger.displayName = "SubMenuTriggerButton";
+SubMenuTrigger.displayName = "SubMenuTrigger";
 
 var StyledButton = styled.button.withConfig({
   displayName: "MenuTrigger__StyledButton",
@@ -44898,7 +44848,7 @@ var getSharedStyles$1 = function getSharedStyles(color, theme) {
   };
 };
 
-var ApplyMenuLinkStyles$1 = styled.div.withConfig({
+var ApplyMenuLinkStyles = styled.div.withConfig({
   displayName: "DesktopMenu__ApplyMenuLinkStyles",
   componentId: "sc-8mrjkc-0"
 })(function (_ref) {
@@ -44927,7 +44877,7 @@ var ApplyMenuLinkStyles$1 = styled.div.withConfig({
     })
   };
 });
-var MenuLink$1 = styled.a.withConfig({
+var MenuLink = styled.a.withConfig({
   displayName: "DesktopMenu__MenuLink",
   componentId: "sc-8mrjkc-1"
 })(function (_ref2) {
@@ -44952,7 +44902,7 @@ var MenuLink$1 = styled.a.withConfig({
     }
   });
 });
-var MenuText$1 = styled.div.withConfig({
+var MenuText = styled.div.withConfig({
   displayName: "DesktopMenu__MenuText",
   componentId: "sc-8mrjkc-2"
 })(function (_ref3) {
@@ -44987,7 +44937,7 @@ var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
 
   return /*#__PURE__*/React__default.createElement("div", {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink$1, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
     href: menuItem.href,
     to: menuItem.to,
     as: menuItem.as
@@ -44997,7 +44947,7 @@ var renderMenuLink$1 = function renderMenuLink(menuItem, themeColorObject) {
 var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles$1, Object.assign({}, themeColorObject, {
+  return /*#__PURE__*/React__default.createElement(ApplyMenuLinkStyles, Object.assign({}, themeColorObject, {
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }), menuItem.render());
 };
@@ -45005,7 +44955,7 @@ var renderCustom$1 = function renderCustom(menuItem, themeColorObject) {
 var renderText$1 = function renderText(menuItem, themeColorObject) {
   var _a;
 
-  return /*#__PURE__*/React__default.createElement(MenuText$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(MenuText, Object.assign({
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
   }, themeColorObject), menuItem.name);
 };
@@ -45111,94 +45061,44 @@ var BrandingWrap = styled.div.withConfig({
     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.li.withConfig({
-  displayName: "MobileMenu__ApplyMenuLinkStyles",
+var TopLevelLink = styled(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.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": {
@@ -45209,18 +45109,31 @@ var MenuLink = styled.a.withConfig({
     }
   });
 });
-var MenuText = styled.li.withConfig({
-  displayName: "MobileMenu__MenuText",
+var TopLevelText = styled(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.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.ul.withConfig({
   displayName: "MobileMenu__SubMenuItemsList",
@@ -45230,41 +45143,29 @@ var SubMenuItemsList = styled.ul.withConfig({
   paddingLeft: "0",
   margin: "0"
 });
-var StyledLi = styled.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.createElement(StyledLi, {
+  var MenuLink = layer === 0 ? TopLevelLink : DropdownLink;
+  return /*#__PURE__*/React__default.createElement(ChildIndentingLi, {
+    layer: layer,
     key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
-    layer: layer
-  }, themeColorObject, {
+  }, /*#__PURE__*/React__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.createElement(ApplyMenuLinkStyles, Object.assign({
-    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
-  }, themeColorObject, {
+  return /*#__PURE__*/React__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) {
@@ -45286,10 +45187,11 @@ var renderSubMenu = function renderSubMenu(menuItem, linkOnClick, themeColorObje
 var renderText = function renderText(menuItem, linkOnClick, themeColorObject, layer) {
   var _a;
 
-  return /*#__PURE__*/React__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.createElement(ChildIndentingLi, {
+    layer: layer,
+    key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name
+  }, /*#__PURE__*/React__default.createElement(MenuText, null, menuItem.name));
 };
 
 var getRenderFunction = function getRenderFunction(menuItem) {
@@ -45315,50 +45217,47 @@ var renderTopLayerMenuItems = function renderTopLayerMenuItems(menuData, linkOnC
   return renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
 };
 
-var getSubMenuHeading = function getSubMenuHeading(layer, color, name) {
-  return layer === 0 ? /*#__PURE__*/React__default.createElement(Heading3, {
-    mb: "x1",
-    color: color
-  }, name) : /*#__PURE__*/React__default.createElement(Text, {
+var getSubMenuHeading = function getSubMenuHeading(layer, name) {
+  return layer === 0 ? /*#__PURE__*/React__default.createElement(TopLevelText, {
+    as: "h3"
+  }, name) : /*#__PURE__*/React__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.createElement(React__default.Fragment, null, getSubMenuHeading(layer, themeColorObject && themeColorObject.textColor, menuItem.name), /*#__PURE__*/React__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.createElement(React__default.Fragment, null, getSubMenuHeading(layer, menuItem.name), /*#__PURE__*/React__default.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)));
 };
 
 var Menu$1 = styled.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.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
   };
@@ -45396,7 +45295,7 @@ var BaseMobileMenu = function BaseMobileMenu(_a) {
 
 var MobileMenu = styled(BaseMobileMenu).withConfig({
   displayName: "MobileMenu",
-  componentId: "sc-18t6zrc-8"
+  componentId: "sc-18t6zrc-7"
 })(display);
 
 var borderStyle = "1px solid #e4e7eb";
@@ -45461,7 +45360,7 @@ var NavBarBackground = styled(Flex).withConfig({
   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,
@@ -52657,7 +52556,6 @@ var Sidebar = function Sidebar(_a) {
     display: "flex",
     flexDirection: "column",
     height: "calc(100% - " + NAVBAR_HEIGHT + ")",
-    boxShadow: "large",
     borderLeftWidth: "1px",
     borderLeftStyle: "solid",
     borderLeftColor: "lightGrey",
@@ -52814,4 +52712,4 @@ var SortingTable = function SortingTable(_a) {
   }, props));
 };
 
-export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };
+export { ALL_NDS_LOCALES, Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Box, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Heading1, Heading2, Heading3, Heading4, HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input$1 as Input, Link, List, ListItem, LoadingAnimation, Modal, NDSProvider, NavBar$1 as NavBar, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer$1 as SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, Sidebar, SortingTable, StatusIndicator, Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToggleComponent as Toggle, Tooltip, TruncatedText, Theme as theme, useWindowDimensions };