@thecb/components 8.0.4-beta.5 → 8.0.4-beta.7

package/dist/index.d.ts

@@ -285,6 +285,7 @@ interface StackProps {
   childGap?: string;
   bottomItem?: number;
   fullHeight?: boolean;
+  hoverStyles?: string;
   direction?:
     | "row"
     | "row-reverse"

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { createContext, createElement, PureComponent, forwardRef, Component, cloneElement, Children, useContext, Fragment as Fragment$1, useRef, useState, useLayoutEffect, memo, useEffect as useEffect$1, useMemo, useCallback, isValidElement, createRef } from 'react';
-import styled, { ThemeContext, css, ThemeProvider, keyframes as keyframes$3 } from 'styled-components';
+import styled, { ThemeContext, css as css$1, ThemeProvider, keyframes as keyframes$3 } from 'styled-components';
 import theme from 'styled-theming';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import reactDom from 'react-dom';
@@ -5187,11 +5187,11 @@ var TextSpan = styled.span.withConfig({
   return $textWrap ? "initial" : "nowrap";
 }, function (_ref6) {
   var hoverStyles = _ref6.hoverStyles;
-  return css(["", ""], hoverStyles);
+  return css$1(["", ""], hoverStyles);
 }, ROYAL_BLUE, function (_ref7) {
   var disabled = _ref7.disabled,
       disabledStyles = _ref7.disabledStyles;
-  return disabled && css(["", ""], disabledStyles);
+  return disabled && css$1(["", ""], disabledStyles);
 }, function (_ref8) {
   var extraStyles = _ref8.extraStyles;
   return extraStyles;
@@ -6488,27 +6488,27 @@ var BoxWrapper = styled(function (_ref) {
   var hoverStyles = _ref14.hoverStyles,
       as = _ref14.as,
       disabled = _ref14.disabled;
-  return css(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css$1(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref15) {
   var as = _ref15.as;
-  return css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+  return css$1(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
 }, function (_ref16) {
   var activeStyles = _ref16.activeStyles,
       as = _ref16.as;
-  return css(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css$1(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref17) {
   var disabledStyles = _ref17.disabledStyles,
       as = _ref17.as;
-  return css(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css$1(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref18) {
   var color = _ref18.color;
   return color;
 }, function (_ref19) {
   var hiddenStyles = _ref19.hiddenStyles;
-  return hiddenStyles && css(["display:none;"]);
+  return hiddenStyles && css$1(["display:none;"]);
 }, function (_ref20) {
   var extraStyles = _ref20.extraStyles;
-  return css(["", ""], extraStyles);
+  return css$1(["", ""], extraStyles);
 });
 /* eslint-enable no-unused-vars */
 
@@ -6877,10 +6877,11 @@ var Sidebar = function Sidebar(_ref) {
   }, safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null))));
 };
 
+var _templateObject;
 var StackWrapper = styled.div.withConfig({
   displayName: "Stackstyled__StackWrapper",
   componentId: "sc-ejhezz-0"
-})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";"], function (_ref) {
+})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";&:hover{", "}"], function (_ref) {
   var direction = _ref.direction;
   return direction;
 }, function (_ref2) {
@@ -6897,9 +6898,12 @@ var StackWrapper = styled.div.withConfig({
   var bottomItem = _ref5.bottomItem,
       direction = _ref5.direction;
   return bottomItem ? "\n    > :nth-child(".concat(bottomItem, ") {\n        ").concat(direction === "row" ? "margin-left: auto;" : "margin-top: auto;", "\n    }\n  ") : "";
+}, function (_ref6) {
+  var hoverStyles = _ref6.hoverStyles;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", "\n      "])), hoverStyles);
 });
 
-var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify"];
+var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify", "hoverStyles"];
 /*
   Component to impose margin-top between a list of child elements
   Useful for things like sidebars and button lists
@@ -6920,6 +6924,7 @@ var Stack = function Stack(_ref) {
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "column" : _ref$direction,
       justify = _ref.justify,
+      hoverStyles = _ref.hoverStyles,
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
   return /*#__PURE__*/React.createElement(StackWrapper, _extends({
@@ -7071,7 +7076,7 @@ var SwitcherInnerContainer = styled.div.withConfig({
   return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }") : "";
 }, function (_ref9) {
   var extraStyles = _ref9.extraStyles;
-  return css(["", ""], extraStyles);
+  return css$1(["", ""], extraStyles);
 });
 
 var _excluded$d = ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles", "constrainMobile"];
@@ -21805,7 +21810,7 @@ var CheckboxIcon = styled.svg.withConfig({
   var disabled = _ref.disabled,
       disabledCheckColor = _ref.disabledCheckColor,
       checkColor = _ref.checkColor;
-  return disabled ? css(["", ""], disabledCheckColor) : css(["", ""], checkColor);
+  return disabled ? css$1(["", ""], disabledCheckColor) : css$1(["", ""], checkColor);
 });
 var HiddenCheckbox = styled.input.attrs({
   type: "checkbox"
@@ -21830,7 +21835,7 @@ var StyledCheckbox = styled.div.withConfig({
       errorStyles = _ref3.errorStyles,
       disabledStyles = _ref3.disabledStyles,
       disabledCheckedStyles = _ref3.disabledCheckedStyles;
-  return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
+  return error ? css$1(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css$1(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css$1(["", " ", ""], checkedStyles, focused && focusedStyles) : css$1(["", " ", ""], defaultStyles, focused && focusedStyles);
 });
 
 var Checkbox = function Checkbox(_ref4) {
@@ -25608,10 +25613,10 @@ var InputField = styled.input.withConfig({
   return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
 }, ROYAL_BLUE, function (_ref6) {
   var disabled = _ref6.disabled;
-  return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
+  return disabled && css$1(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref7) {
   var $extraStyles = _ref7.$extraStyles;
-  return css(["", ""], $extraStyles);
+  return css$1(["", ""], $extraStyles);
 }); // eslint-disable-next-line no-unused-vars
 
 var FormattedInputField = styled(function (_ref8) {
@@ -25639,10 +25644,10 @@ var FormattedInputField = styled(function (_ref8) {
   return themeValues.color && themeValues.color;
 }, ROYAL_BLUE, function (_ref13) {
   var disabled = _ref13.disabled;
-  return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
+  return disabled && css$1(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref14) {
   var extraStyles = _ref14.extraStyles;
-  return css(["", ""], extraStyles);
+  return css$1(["", ""], extraStyles);
 });
 
 var FormInput = function FormInput(_ref15) {
@@ -26356,7 +26361,7 @@ var SpinnerSvgAnimation = styled.svg.withConfig({
   return color;
 }, function (_ref4) {
   var centerSpinner = _ref4.centerSpinner;
-  return centerSpinner ? css(["margin:0;"]) : "";
+  return centerSpinner ? css$1(["margin:0;"]) : "";
 });
 var SpinnerContainer$2 = styled.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
@@ -26364,7 +26369,7 @@ var SpinnerContainer$2 = styled.div.withConfig({
 })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
   var centerSpinner = _ref5.centerSpinner,
       size = _ref5.size;
-  return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
+  return centerSpinner ? css$1(["width:", "px;height:", "px;"], size, size) : "";
 });
 /*
   `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
@@ -26494,7 +26499,7 @@ var NavHeader = function NavHeader(_ref) {
   }, rightContent))))));
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _DEFAULT_ERROR_MESSAG;
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _DEFAULT_ERROR_MESSAG;
 
 var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
 var MAX_LENGTH_ERROR = "max_length_error";
@@ -26535,7 +26540,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject || (_templateObject = _taggedTemplateLiteral(["", " is too short"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " is too long"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " is not the right length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " is not a valid length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " is not a valid email address"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", " needs a number"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", " needs an uppercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", " needs a lowercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", " needs a special character"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["", " must be only numbers"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", " must be only letters"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["", " is required"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["", " is too high"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["", " is too low"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["", " must match ", ""])), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["", " is not a valid option"])), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["", " is too short"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " is too long"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " is not the right length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " is not a valid length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " is not a valid email address"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", " needs a number"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", " needs an uppercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", " needs a lowercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", " needs a special character"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["", " must be only numbers"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", " must be only letters"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["", " is required"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["", " is too high"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["", " is too low"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["", " must match ", ""])), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["", " is not a valid option"])), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -26804,11 +26809,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
 
-var backgroundColor$5 = MATISSE_BLUE;
-var borderColor$2 = GREY_CHATEAU;
+var activeColor$5 = MATISSE_BLUE;
+var inactiveBorderColor = GREY_CHATEAU;
 var fallbackValues$t = {
-  borderColor: borderColor$2,
-  backgroundColor: backgroundColor$5
+  inactiveBorderColor: inactiveBorderColor,
+  activeColor: activeColor$5
 };
 
 var HiddenRadioInput = styled.input.withConfig({
@@ -26819,21 +26824,21 @@ var Circle = styled.div.withConfig({
   displayName: "RadioButtonWithLabel__Circle",
   componentId: "sc-1m9whwg-1"
 })(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], function (_ref) {
-  var borderColor = _ref.borderColor;
-  return "1px solid ".concat(borderColor);
+  var inactiveBorderColor = _ref.inactiveBorderColor;
+  return "1px solid ".concat(inactiveBorderColor);
 }, function (_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
+  var activeColor = _ref2.activeColor;
+  return activeColor;
 });
 var InputAndLabelContainer = styled(Cluster).withConfig({
   displayName: "RadioButtonWithLabel__InputAndLabelContainer",
   componentId: "sc-1m9whwg-2"
 })(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:", "}", ":focus + label ", "{{box-shadow:", "}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
-  return "1px solid ".concat(backgroundColor, ";");
+  var activeColor = _ref3.activeColor;
+  return "1px solid ".concat(activeColor, ";");
 }, HiddenRadioInput, Circle, function (_ref4) {
-  var backgroundColor = _ref4.backgroundColor;
-  return "0px 0px 2px 1px ".concat(backgroundColor, ";");
+  var activeColor = _ref4.activeColor;
+  return "0px 0px 2px 1px ".concat(activeColor, ";");
 });
 
 var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
@@ -26853,7 +26858,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   return /*#__PURE__*/React.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem",
-    backgroundColor: themeValues.backgroundColor
+    activeColor: themeValues.activeColor
   }, /*#__PURE__*/React.createElement(HiddenRadioInput, {
     "aria-invalid": ariaInvalid,
     style: {
@@ -26873,17 +26878,17 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     htmlFor: id,
     extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
   }, /*#__PURE__*/React.createElement(Circle, {
-    backgroundColor: themeValues.backgroundColor,
-    borderColor: themeValues.borderColor
+    activeColor: themeValues.activeColor,
+    inactiveBorderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
 
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$t);
 
-var activeColor$5 = "".concat(MATISSE_BLUE);
+var activeColor$6 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$u = {
-  activeColor: activeColor$5,
+  activeColor: activeColor$6,
   inactiveColor: inactiveColor
 };
 
@@ -27059,14 +27064,14 @@ var SearchableSelect = function SearchableSelect(_ref) {
 
 var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$v, "default");
 
-var borderColor$3 = {
+var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
 var fallbackValues$w = {
-  borderColor: borderColor$3,
+  borderColor: borderColor$2,
   borderSize: borderSize
 };
 
@@ -37887,12 +37892,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$6 = WHITE;
+var backgroundColor$5 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var fallbackValues$y = {
-  backgroundColor: backgroundColor$6,
+  backgroundColor: backgroundColor$5,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -38045,11 +38050,11 @@ var Card = function Card(_ref) {
 var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$y);
 
 var fontFamily$6 = "Public Sans, sans-serif";
-var activeColor$6 = MATISSE_BLUE;
+var activeColor$7 = MATISSE_BLUE;
 var linkColor$3 = CHARADE_GREY;
 var fallbackValues$A = {
   fontFamily: fontFamily$6,
-  activeColor: activeColor$6,
+  activeColor: activeColor$7,
   linkColor: linkColor$3
 };
 
@@ -38179,11 +38184,11 @@ var TableCell_styled = styled.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$7 = ALABASTER_WHITE;
-var borderColor$4 = GREY_CHATEAU;
+var backgroundColor$6 = ALABASTER_WHITE;
+var borderColor$3 = GREY_CHATEAU;
 var fallbackValues$B = {
-  backgroundColor: backgroundColor$7,
-  borderColor: borderColor$4
+  backgroundColor: backgroundColor$6,
+  borderColor: borderColor$3
 };
 
 var StyledTableHead = styled.thead.withConfig({
@@ -38201,10 +38206,10 @@ var StyledTableHead = styled.thead.withConfig({
   return fontSize;
 });
 
-var borderColor$5 = GREY_CHATEAU;
+var borderColor$4 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
 var fallbackValues$C = {
-  borderColor: borderColor$5,
+  borderColor: borderColor$4,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
 
@@ -40181,9 +40186,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$8 = "#ebeffb";
+var backgroundColor$7 = "#ebeffb";
 var fallbackValues$D = {
-  backgroundColor: backgroundColor$8
+  backgroundColor: backgroundColor$7
 };
 
 var Banner = function Banner(_ref) {
@@ -41178,10 +41183,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$9 = "#182848";
+var backgroundColor$8 = "#182848";
 var fallbackValues$G = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$8
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -46386,7 +46391,7 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$a = {
+var backgroundColor$9 = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
@@ -46401,7 +46406,7 @@ var fallbackValues$H = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$a
+  backgroundColor: backgroundColor$9
 };
 
 /*
@@ -46461,7 +46466,7 @@ var Module = function Module(_ref) {
 
 var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
 
-var backgroundColor$b = {
+var backgroundColor$a = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46470,7 +46475,7 @@ var shadowColor = {
   cms: "#292A33"
 };
 var fallbackValues$I = {
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$a,
   shadowColor: shadowColor
 };
 
@@ -46629,14 +46634,14 @@ var TitleModule = function TitleModule(_ref) {
 
 var color$a = "#15749D";
 var hoverColor$5 = "#116285";
-var activeColor$7 = "#0E506D";
+var activeColor$8 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
 var fallbackValues$J = {
   color: color$a,
   hoverColor: hoverColor$5,
-  activeColor: activeColor$7,
+  activeColor: activeColor$8,
   linkColor: linkColor$4,
   fontWeight: fontWeight$6,
   modalLinkHoverFocus: modalLinkHoverFocus
@@ -47433,9 +47438,9 @@ var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$1 = WHITE;
-var activeColor$8 = MATISSE_BLUE;
+var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$K = {
-  activeColor: activeColor$8,
+  activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$1,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
@@ -47710,7 +47715,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React.createElement(Fragment$1, null, backButton), !hideForwardButton && /*#__PURE__*/React.createElement(Fragment$1, null, forwardButton))));
 };
 
-var backgroundColor$c = {
+var backgroundColor$b = {
   "default": "transparent",
   small: "transparent"
 };
@@ -47727,7 +47732,7 @@ var labeledAmountTotal = {
   small: "p"
 };
 var fallbackValues$L = {
-  backgroundColor: backgroundColor$c,
+  backgroundColor: backgroundColor$b,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48124,7 +48129,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$M, "default");
 
-var backgroundColor$d = {
+var backgroundColor$c = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -48154,7 +48159,7 @@ var modalLinkHoverFocus$2 = {
   footer: standardInteractionStyles
 };
 var fallbackValues$N = {
-  backgroundColor: backgroundColor$d,
+  backgroundColor: backgroundColor$c,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -49015,13 +49020,13 @@ var RadioGroup = function RadioGroup(_ref) {
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
-var borderColor$6 = "".concat(GREY_CHATEAU);
+var borderColor$5 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
 var fallbackValues$O = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$6,
+  borderColor: borderColor$5,
   focusStyles: focusStyles
 };