@lendi/navbar 7.14.1 → 7.14.2

package/dist/declarations/src/MultiNavbar/components/HamBurgerMenu/index.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-import Menu from '@lendi-ui/icon/Menu';
-import Close from '@lendi-ui/icon/Close';
 export interface HamBurgerMenuProps {
     toggleSidebar: (leftSidebarState: boolean) => void;
     leftSidebarState: boolean;
 }
 declare const HamBurgerMenu: ({ toggleSidebar, leftSidebarState }: HamBurgerMenuProps) => JSX.Element;
-export declare const CloseButton: import("styled-components").StyledComponent<typeof Close, import("styled-components").DefaultTheme, {}, never>;
-export declare const MenuButton: import("styled-components").StyledComponent<typeof Menu, import("styled-components").DefaultTheme, {}, never>;
 export declare const HamBurgerWrapper: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
 export default HamBurgerMenu;

package/dist/navbar.cjs.dev.js

@@ -350,12 +350,17 @@ var _templateObject$b;
 var LogoutWrapper = styled__default["default"].div.withConfig({
   displayName: "style__LogoutWrapper",
   componentId: "lui__sc-t6my6e-0"
-})(["position:absolute;right:5px;top:56px;", ";display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:", ";border-radius:", ";", ""], breakpoint.gte('desktop')(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["top: 70px;"]))), getColour__default["default"]('shade', 0), borders.getRadius(), depth.depth(2));
+})(["position:absolute;right:5px;top:56px;", ";display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:", ";border-radius:", ";", ""], breakpoint.gte('desktop')(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["top: 70px;"]))), _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.color.text.inverse;
+}, () => borders.getRadius(), depth.depth(2));
 var MenuItem$1 = styled.css(["", " ", ""], spacing.px('sm'), spacing.py('sm'));
 var MyAccountTitle = styled__default["default"](typography.Body).withConfig({
   displayName: "style__MyAccountTitle",
   componentId: "lui__sc-t6my6e-1"
-})(["", ";font-weight:bold;width:100%;box-sizing:border-box;border-bottom:1px solid ", ";"], MenuItem$1, getColour__default["default"]('shade', 100));
+})(["", ";font-weight:bold;width:100%;box-sizing:border-box;border-bottom:1px solid ", ";"], MenuItem$1, () => getColour__default["default"]('shade', 100));
 var LinkWrapper = styled__default["default"](typography.Link).withConfig({
   displayName: "style__LinkWrapper",
   componentId: "lui__sc-t6my6e-2"
@@ -565,6 +570,7 @@ var LogoutComponent = () => {
   var [isLogoutDisplay, setIsLogoutDisplay] = React__default["default"].useState(false);
   var logoutPanel = React__default["default"].useRef();
   var hasWindow = typeof window !== 'undefined';
+  var theme = Theme.useTheme();
 
   var closeLogoutPanel = e => {
     if (logoutPanel && logoutPanel.current && !logoutPanel.current.contains(e.target)) {
@@ -587,7 +593,7 @@ var LogoutComponent = () => {
     ref: logoutPanel,
     children: [/*#__PURE__*/jsxRuntime.jsx(KebabMenu, {
       size: "sm",
-      color: isTransparent ? 'shade.0' : 'secondary.500',
+      color: isTransparent ? theme.color.interaction.subtle : theme.color.interaction.main,
       onClick: () => {
         setIsLogoutDisplay(!isLogoutDisplay);
         var event = {
@@ -1461,6 +1467,20 @@ var HamBurgerMenu = _ref => {
   var {
     isTransparent
   } = NavbarBase.useNavbarBaseContext();
+  var commonButtonStyle = styled.css(["height:", ";width:", ";color:", ";"], utils.deriveSize(1.6), utils.deriveSize(1.6), _ref2 => {
+    var {
+      theme
+    } = _ref2;
+    return isTransparent ? theme.color.interaction.subtle : theme.color.interaction.main;
+  });
+  var CloseButton = styled__default["default"](Close__default["default"]).withConfig({
+    displayName: "HamBurgerMenu__CloseButton",
+    componentId: "lui__sc-y1cjve-0"
+  })(["", ""], commonButtonStyle);
+  var MenuButton = styled__default["default"](Menu__default["default"]).withConfig({
+    displayName: "HamBurgerMenu__MenuButton",
+    componentId: "lui__sc-y1cjve-1"
+  })(["", ""], commonButtonStyle);
   return /*#__PURE__*/jsxRuntime.jsx(HamBurgerWrapper, {
     onClick: () => {
       toggleSidebar(!leftSidebarState);
@@ -1472,24 +1492,13 @@ var HamBurgerMenu = _ref => {
       analytics(event);
     },
     children: leftSidebarState ? /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
-      color: !isTransparent ? 'primary.500' : 'shade.0',
       "aria-label": "close menu"
-    }) : /*#__PURE__*/jsxRuntime.jsx(MenuButton$1, {
-      color: !isTransparent ? 'primary.500' : 'shade.0',
+    }) : /*#__PURE__*/jsxRuntime.jsx(MenuButton, {
       "aria-label": "open menu"
     })
   });
 };
 
-var commonButtonStyle = styled.css(["height:", ";width:", ";"], utils.deriveSize(1.6), utils.deriveSize(1.6));
-var CloseButton = styled__default["default"](Close__default["default"]).withConfig({
-  displayName: "HamBurgerMenu__CloseButton",
-  componentId: "lui__sc-y1cjve-0"
-})(["", ""], commonButtonStyle);
-var MenuButton$1 = styled__default["default"](Menu__default["default"]).withConfig({
-  displayName: "HamBurgerMenu__MenuButton",
-  componentId: "lui__sc-y1cjve-1"
-})(["", ""], commonButtonStyle);
 var HamBurgerWrapper = styled__default["default"].a.withConfig({
   displayName: "HamBurgerMenu__HamBurgerWrapper",
   componentId: "lui__sc-y1cjve-2"
@@ -1626,6 +1635,7 @@ var FooterCTA = _ref => {
     onLogout = () => {},
     showContinueAction = false
   } = _ref;
+  var theme = Theme.useTheme();
   return /*#__PURE__*/jsxRuntime.jsxs(FooterWrapper, {
     children: [/*#__PURE__*/jsxRuntime.jsx(FooterAction, {
       variant: isAuthenticated ? showContinueAction ? 'emphasis' : 'primary' : 'primary',
@@ -1656,7 +1666,7 @@ var FooterCTA = _ref => {
       },
       "aria-label": LABEL_LOG_OUT,
       children: [/*#__PURE__*/jsxRuntime.jsx(ExitToApp__default["default"], {
-        color: "primary.500"
+        color: theme.color.interaction.main
       }), LABEL_LOG_OUT]
     })]
   });
@@ -1760,25 +1770,30 @@ var ListItem = styled__default["default"].li.withConfig({
 var LinkOption = styled__default["default"](typography.Link).withConfig({
   displayName: "indexstyle__LinkOption",
   componentId: "lui__sc-56jb5a-10"
-})(["display:inline-flex;flex-direction:column;overflow:hidden;", " ", " text-decoration:none;:hover,:focus,:active{text-decoration:none;}", ""], spacing.pr('md'), spacing.pl('nil'), _ref3 => {
+})(["display:inline-flex;flex-direction:column;overflow:hidden;", ";", ";text-decoration:none;:hover,:focus,:active{text-decoration:none;}color:", ";"], spacing.pr('md'), spacing.pl('nil'), _ref3 => {
   var {
+    theme,
     isTransparent
   } = _ref3;
-  return isTransparent ? styled.css(["", ""], color.fg('shade.0')) : styled.css(["", ""], color.fg('secondary.500'));
+  if (isTransparent) return theme.color.text.inverse;
+  if (theme.name === 'lendi') return theme.color.text.contrast;
+  return theme.color.text.contrast;
 });
 var ExpandMoreWrapper = styled__default["default"](ExpandMore__default["default"]).withConfig({
   displayName: "indexstyle__ExpandMoreWrapper",
   componentId: "lui__sc-56jb5a-11"
-})(["& svg{display:block;}font-weight:bold;transform:", ";transition:transform ease-in-out 300ms;", ""], _ref4 => {
+})(["& svg{display:block;}font-weight:bold;transform:", ";transition:transform ease-in-out 300ms;color:", ";"], _ref4 => {
   var {
     isSelected
   } = _ref4;
   return isSelected ? 'rotate(180deg)' : undefined;
 }, _ref5 => {
   var {
+    theme,
     isTransparent
   } = _ref5;
-  return isTransparent ? styled.css(["", ""], color.fg('shade.0')) : styled.css(["", ""], color.fg('secondary.500'));
+  if (isTransparent) return theme.color.text.inverse;
+  return theme.color.text.contrast;
 });
 var BarWrapper = styled__default["default"].div.withConfig({
   displayName: "indexstyle__BarWrapper",
@@ -1808,6 +1823,7 @@ var MenuOptions = props => {
   var displayPanel = React__default["default"].useRef(null);
   var selectedItem = MULTI_MENU_OPTIONS.find(menuItem => menuItem.label === currentSelected);
   var hasWindow = typeof window !== 'undefined';
+  Theme.useTheme();
   React__default["default"].useEffect(() => {
     if (hasWindow) {
       window.addEventListener('mousedown', closeDisplayPanel);
@@ -2020,11 +2036,27 @@ var MenuPadding = styled__default["default"].div.withConfig({
 })(["", ";", ";"], Px, Py);
 var listReset = styled.css(["margin:0;list-style:none;padding:0;"]);
 var buttonReset = styled.css(["border:0;border-radius:0;background:none;width:100%;white-space:nowrap;text-decoration:none;margin:0;cursor:pointer;"]);
-var insetFocusVisible = styled.css(["&:focus-visible{background-color:#331745;outline:0;box-shadow:inset ", " 0.125rem 0.125rem 0 0,inset ", " -0.125rem -0.125rem 0 0,inset ", " 0.25rem 0.25rem 0 0,inset ", " -0.25rem -0.25rem 0 0;}"], () => getColour__default["default"]('border', 'interaction', {
-  state: 'focus'
-}), () => getColour__default["default"]('border', 'interaction', {
-  state: 'focus'
-}), () => getColour__default["default"]('fill', 'main'), () => getColour__default["default"]('fill', 'main'));
+var insetFocusVisible = styled.css(["&:focus-visible{background-color:#331745;outline:0;box-shadow:inset ", " 0.125rem 0.125rem 0 0,inset ", " -0.125rem -0.125rem 0 0,inset ", " 0.25rem 0.25rem 0 0,inset ", " -0.25rem -0.25rem 0 0;}"], _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.color.border.interaction.focus;
+}, _ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return theme.color.border.interaction.focus;
+}, _ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return theme.color.fill.main;
+}, _ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return theme.color.fill.main;
+});
 var focusVisible = styled.css(["&:focus-visible{outline:0;box-shadow:", ";}"], borders.getFocusRing());
 var StyledHR = styled__default["default"].hr.withConfig({
   displayName: "sharedstyles__StyledHR",
@@ -2087,24 +2119,40 @@ var _excluded$7 = ["children", "isOpen", "onClick"],
 var StyledNavButton = styled__default["default"].button.withConfig({
   displayName: "NavButtons__StyledNavButton",
   componentId: "lui__sc-1rf7mpw-0"
-})(["", ";color:", ";background-color:", ";font-family:", ";font-weight:", ";-webkit-font-smoothing:antialiased;-moz-font-smoothing:'grayscale';font-size:", ";line-height:1.5;padding:", " ", ";display:flex;align-items:center;justify-content:space-between;&:hover{color:", ";}", " ", ""], () => buttonReset, () => getColour__default["default"]('text', 'inverse'), () => getColour__default["default"]('interaction', 'main'), () => getTypography__default["default"]('button1', 'fontFamily'), () => getTypography__default["default"]('button1', 'fontWeight'), utils$1.pxToRem(16), utils$1.pxToRem(12), utils$1.pxToRem(16), () => getColour__default["default"]('interaction', 'emphasis'), _ref => {
+})(["", ";color:", ";background-color:", ";font-family:", ";font-weight:", ";-webkit-font-smoothing:antialiased;-moz-font-smoothing:'grayscale';font-size:", ";line-height:1.5;padding:", " ", ";display:flex;align-items:center;justify-content:space-between;&:hover{color:", ";}", " ", ""], buttonReset, _ref => {
   var {
-    isOpen,
-    isActive
+    theme
   } = _ref;
-  return (isOpen !== null && isOpen !== void 0 ? isOpen : isActive) ? "color: ".concat(getColour__default["default"]('interaction', 'emphasis'), ";") : null;
+  return theme.color.text.inverse;
+}, _ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return theme.color.interaction.main;
+}, () => getTypography__default["default"]('button1', 'fontFamily'), () => getTypography__default["default"]('button1', 'fontWeight'), utils$1.pxToRem(16), utils$1.pxToRem(12), utils$1.pxToRem(16), _ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return theme.color.interaction.emphasis;
+}, _ref4 => {
+  var {
+    isOpen,
+    isActive,
+    theme
+  } = _ref4;
+  return (isOpen !== null && isOpen !== void 0 ? isOpen : isActive) ? "color: ".concat(theme.color.interaction.emphasis, ";") : null;
 }, insetFocusVisible);
 var StyledNavButtonText = styled__default["default"].span.withConfig({
   displayName: "NavButtons__StyledNavButtonText",
   componentId: "lui__sc-1rf7mpw-1"
 })(["margin-right:", ";"], utils$1.pxToRem(4));
-var NavButton = _ref2 => {
+var NavButton = _ref5 => {
   var {
     children,
     isOpen = false,
     onClick
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$7);
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded$7);
 
   var globalProps = utils$1.filterGlobalProps(props);
   return /*#__PURE__*/jsxRuntime.jsxs(StyledNavButton, _objectSpread2(_objectSpread2({
@@ -2124,14 +2172,14 @@ var NavButton = _ref2 => {
     })]
   }));
 };
-var NavLink = _ref3 => {
+var NavLink = _ref6 => {
   var {
     children,
     href,
     onClick,
     isActive
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded2$1);
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded2$1);
 
   var globalProps = utils$1.filterGlobalProps(props);
   return /*#__PURE__*/jsxRuntime.jsx(StyledNavButton, _objectSpread2(_objectSpread2({
@@ -2200,7 +2248,12 @@ var HeaderPaddingLarge = 24;
 var StyledHeader = styled__default["default"].header.withConfig({
   displayName: "HeaderBase__StyledHeader",
   componentId: "lui__sc-1ik75ai-0"
-})(["background:", ";position:sticky;top:0;z-index:999;padding:", " 0;", ""], () => getColour__default["default"]('fill', 'contrast'), utils$1.pxToRem(HeaderPaddingSmall), breakpoint.gte('md')(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n    padding: ", " 0;\n  "])), utils$1.pxToRem(HeaderPaddingLarge)));
+})(["background:", ";position:sticky;top:0;z-index:999;padding:", " 0;", ""], _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.color.fill.contrast;
+}, utils$1.pxToRem(HeaderPaddingSmall), breakpoint.gte('md')(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n    padding: ", " 0;\n  "])), utils$1.pxToRem(HeaderPaddingLarge)));
 var HeaderInner = styled__default["default"].div.withConfig({
   displayName: "HeaderBase__HeaderInner",
   componentId: "lui__sc-1ik75ai-1"
@@ -2217,12 +2270,12 @@ var StyledCtaSlot = styled__default["default"].div.withConfig({
   displayName: "HeaderBase__StyledCtaSlot",
   componentId: "lui__sc-1ik75ai-4"
 })(["margin-left:auto;order:2;@media (min-width:", "){order:3;}"], LargeTweakpoint);
-var HeaderBase = _ref => {
+var HeaderBase = _ref2 => {
   var {
     navSlot,
     ctaSlot
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$5);
 
   var globalProps = utils$1.filterGlobalProps(props);
   return /*#__PURE__*/jsxRuntime.jsx(StyledHeader, _objectSpread2(_objectSpread2({
@@ -2350,26 +2403,33 @@ var _excluded$3 = ["children", "href", "background", "isActive", "isExternal", "
  * @todo Helper functions: getTypography you have to specify each property of the font you need should this be simpler
  * @todo Colors: Access the color palette or update to semantic values
  */
-var MenuItemStyles = styled.css(["padding:", " ", ";color:", ";font-family:", ";font-weight:", ";font-size:", ";line-height:1.5;text-decoration:none;&:hover{background-color:#633482;}", ""], utils$1.pxToRem(12), utils$1.pxToRem(16), () => getColour__default["default"]('text', 'inverse'), () => getTypography__default["default"]('body1', 'fontFamily'), () => getTypography__default["default"]('body1', 'fontWeight'), utils$1.pxToRem(16), insetFocusVisible);
+var MenuItemStyles = styled.css(["padding:", " ", ";color:", ";font-family:", ";font-weight:", ";font-size:", ";line-height:1.5;text-decoration:none;&:hover{background-color:#633482;}", ""], utils$1.pxToRem(12), utils$1.pxToRem(16), _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.color.text.inverse;
+}, () => getTypography__default["default"]('body1', 'fontFamily'), () => getTypography__default["default"]('body1', 'fontWeight'), utils$1.pxToRem(16), insetFocusVisible);
 var StyledMenuLink = styled__default["default"].a.withConfig({
   displayName: "MenuLink__StyledMenuLink",
   componentId: "lui__sc-dpbddc-0"
-})(["", " background-color:", ";display:flex;align-items:center;justify-content:space-between;position:relative;", ""], () => MenuItemStyles, _ref => {
+})(["", " background-color:", ";display:flex;align-items:center;justify-content:space-between;position:relative;", ""], () => MenuItemStyles, _ref2 => {
   var {
-    background
-  } = _ref;
-  return background === 'darker' ? '#331745' : getColour__default["default"]('purple', 700);
-}, _ref2 => {
-  var {
-    isActive
+    background,
+    theme
   } = _ref2;
-  return isActive && "background-color: #633482;\n    font-weight: bold;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      background-color: ".concat(getColour__default["default"]('interaction', 'emphasis'), ";\n    }\n\n  ");
+  return background === 'darker' ? '#331745' : theme.color.interaction.main;
+}, _ref3 => {
+  var {
+    isActive,
+    theme
+  } = _ref3;
+  return isActive && "background-color: #633482;\n    font-weight: bold;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      background-color: ".concat(theme.color.interaction.emphasis, ";\n    }\n\n  ");
 });
 var ExternalIcon = styled__default["default"].span.withConfig({
   displayName: "MenuLink__ExternalIcon",
   componentId: "lui__sc-dpbddc-1"
 })(["transform:rotate(-45deg);width:", ";height:", ";"], utils$1.pxToRem(24), utils$1.pxToRem(24));
-var MenuLink = _ref3 => {
+var MenuLink = _ref4 => {
   var {
     children,
     href,
@@ -2377,8 +2437,8 @@ var MenuLink = _ref3 => {
     isActive = false,
     isExternal = false,
     onClick
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$3);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded$3);
 
   var globalProps = utils$1.filterGlobalProps(props);
   var conditionalProps = {};
@@ -2422,12 +2482,12 @@ var StyledMenuButton = styled__default["default"].button.withConfig({
   displayName: "MenuLink__StyledMenuButton",
   componentId: "lui__sc-dpbddc-2"
 })(["", ";", ";text-align:left;"], () => buttonReset, () => MenuItemStyles);
-var MenuButton = _ref4 => {
+var MenuButton = _ref5 => {
   var {
     children,
     onClick
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded2);
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded2);
 
   var globalProps = utils$1.filterGlobalProps(props);
   return /*#__PURE__*/jsxRuntime.jsx(StyledMenuButton, _objectSpread2(_objectSpread2({
@@ -2502,9 +2562,10 @@ var StyledChildrenWrapper = styled__default["default"].div.withConfig({
   componentId: "lui__sc-zq7yzs-1"
 })(["::after{content:'';display:block;", "}"], _ref2 => {
   var {
-    isOpen
+    isOpen,
+    theme
   } = _ref2;
-  return isOpen && "height: 0.0625rem; background-color: ".concat(getColour__default["default"]('text', 'inverse'), "; margin: .75rem 1rem;");
+  return isOpen && "height: 0.0625rem; background-color: ".concat(theme.color.text.inverse, "; margin: .75rem 1rem;");
 });
 
 var MenuItem = _ref3 => {
@@ -2663,7 +2724,17 @@ var headerTokens = {
 var StyledCloseButton = styled__default["default"].button.withConfig({
   displayName: "SlideoutMenu__StyledCloseButton",
   componentId: "lui__sc-8pev43-0"
-})(["background-color:", ";border:0;margin:0;padding:0;width:", ";height:", ";color:", ";position:absolute;top:", ";right:", ";", " &:hover{background-color:", ";}"], () => getColour__default["default"]('interaction', 'main'), utils$1.pxToRem(40), utils$1.pxToRem(40), () => getColour__default["default"]('shade', 0), utils$1.pxToRem(16), utils$1.pxToRem(16), breakpoint.gte('md')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), utils$1.pxToRem(28)), () => getColour__default["default"]('purple', 600));
+})(["background-color:", ";border:0;margin:0;padding:0;width:", ";height:", ";color:", ";position:absolute;top:", ";right:", ";", " &:hover{background-color:#633482;}"], _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.color.interaction.main;
+}, utils$1.pxToRem(40), utils$1.pxToRem(40), _ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return theme.color.text.inverse;
+}, utils$1.pxToRem(16), utils$1.pxToRem(16), breakpoint.gte('md')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), utils$1.pxToRem(28)));
 /**
  * @todo z-index: tokenise z-index to make it easier to manage levels
  */
@@ -2671,11 +2742,26 @@ var StyledCloseButton = styled__default["default"].button.withConfig({
 var StyledSlideoutMenu = styled__default["default"](SlideoutMenuBase).withConfig({
   displayName: "SlideoutMenu__StyledSlideoutMenu",
   componentId: "lui__sc-8pev43-1"
-})(["background-color:", ";overflow-y:scroll;color:", ";z-index:999;"], () => getColour__default["default"]('purple', 700), getColour__default["default"]('shade', 0));
+})(["background-color:", ";overflow-y:scroll;color:", ";z-index:999;"], _ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return theme.color.fill.contrast;
+}, _ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return theme.color.text.inverse;
+});
 var StyledSlideoutHR = styled__default["default"].hr.withConfig({
   displayName: "SlideoutMenu__StyledSlideoutHR",
   componentId: "lui__sc-8pev43-2"
-})(["margin:0 ", " ", " ", ";border:0;height:0;border-top:1px solid ", ";"], utils$1.pxToRem(16), utils$1.pxToRem(12), utils$1.pxToRem(16), () => getColour__default["default"]('shade', 0));
+})(["margin:0 ", " ", " ", ";border:0;height:0;border-top:1px solid ", ";"], utils$1.pxToRem(16), utils$1.pxToRem(12), utils$1.pxToRem(16), _ref5 => {
+  var {
+    theme
+  } = _ref5;
+  return theme.color.text.inverse;
+});
 var StyledSlideoutHeader = styled__default["default"].div.withConfig({
   displayName: "SlideoutMenu__StyledSlideoutHeader",
   componentId: "lui__sc-8pev43-3"
@@ -2684,7 +2770,7 @@ var StyledSlideoutContent = styled__default["default"].div.withConfig({
   displayName: "SlideoutMenu__StyledSlideoutContent",
   componentId: "lui__sc-8pev43-4"
 })(["display:flex;flex-direction:column;height:100%;"]);
-var SlideoutMenu = _ref => {
+var SlideoutMenu = _ref6 => {
   var {
     title,
     children,
@@ -2692,10 +2778,11 @@ var SlideoutMenu = _ref => {
     isOpen,
     hasTitleDivider = true,
     handleClose
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded$1);
 
   var globalProps = utils$1.filterGlobalProps(props);
+  var theme = Theme.useTheme();
   return /*#__PURE__*/jsxRuntime.jsxs(StyledSlideoutMenu, _objectSpread2(_objectSpread2(_objectSpread2({
     handleClose: handleClose,
     isOpen: isOpen
@@ -2713,7 +2800,7 @@ var SlideoutMenu = _ref => {
       type: "button",
       onClick: handleClose,
       children: [/*#__PURE__*/jsxRuntime.jsx(Close__default["default"], {
-        color: getColour__default["default"]('shade', 0),
+        color: theme.color.text.inverse,
         width: "1.5rem",
         height: "1.5rem"
       }), /*#__PURE__*/jsxRuntime.jsxs(SrOnlySpan, {
@@ -2852,6 +2939,7 @@ var HamburgerMenu = _ref2 => {
     showMenu,
     toggleMenu
   } = useSlideoutMenu();
+  var theme = Theme.useTheme();
 
   var handleClick = () => {
     toggleMenu();
@@ -2880,7 +2968,7 @@ var HamburgerMenu = _ref2 => {
         }), /*#__PURE__*/jsxRuntime.jsx(Menu__default["default"], {
           width: "1.5rem",
           height: "1.5rem",
-          color: getColour.getColour('text', 'inverse')
+          color: theme.color.text.inverse
         })]
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(SlideoutMenu, {
@@ -2899,7 +2987,12 @@ var HamburgerMenu = _ref2 => {
 var DropdownPrimaryContent = styled__default["default"].div.withConfig({
   displayName: "AccountMenu__DropdownPrimaryContent",
   componentId: "lui__sc-4ssigl-0"
-})(["", ";padding-top:", ";background-color:", ";"], Px, utils$1.pxToRem(16), () => getColour__default["default"]('fill', 'contrast'));
+})(["", ";padding-top:", ";background-color:", ";"], Px, utils$1.pxToRem(16), _ref => {
+  var {
+    theme
+  } = _ref;
+  return theme.color.fill.contrast;
+});
 var DropwdownSecondaryContent = styled__default["default"].div.withConfig({
   displayName: "AccountMenu__DropwdownSecondaryContent",
   componentId: "lui__sc-4ssigl-1"
@@ -2916,7 +3009,7 @@ var DropdownHeader = () => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
   }), /*#__PURE__*/jsxRuntime.jsx(StyledHR, {})]
 });
 
-var LoggedInContent = _ref => {
+var LoggedInContent = _ref2 => {
   var {
     isRestricted,
     handleApplyNowClick,
@@ -2924,7 +3017,7 @@ var LoggedInContent = _ref => {
     teamMember,
     openCommPanel,
     onLogout
-  } = _ref;
+  } = _ref2;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(DropdownPrimaryContent, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DropdownHeader, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -3053,7 +3146,7 @@ var LoggedOutContent = () => {
   });
 };
 
-var AccountDropdown = _ref2 => {
+var AccountDropdown = _ref3 => {
   var {
     isRestricted,
     application,
@@ -3062,7 +3155,7 @@ var AccountDropdown = _ref2 => {
     teamMember,
     openCommPanel,
     onLogout
-  } = _ref2;
+  } = _ref3;
   var isAuthenticated = (session === null || session === void 0 ? void 0 : session.status) === lalaReact.Status.Authenticated;
   return /*#__PURE__*/jsxRuntime.jsx(NavDropdown, {
     label: isAuthenticated ? LOGGEDIN_TEXT : LOGGEDOUT_TEXT,
@@ -3088,7 +3181,7 @@ var AccountDropdown = _ref2 => {
     }) : /*#__PURE__*/jsxRuntime.jsx(LoggedOutContent, {})
   });
 };
-var AccountSlideoutMenu = _ref3 => {
+var AccountSlideoutMenu = _ref4 => {
   var {
     isRestricted,
     session,
@@ -3097,7 +3190,7 @@ var AccountSlideoutMenu = _ref3 => {
     handleApplyNowClick,
     openCommPanel,
     onLogout
-  } = _ref3;
+  } = _ref4;
   var {
     showMenu,
     toggleMenu