@thecb/components 4.0.7-beta.0 → 4.0.11

package/dist/index.cjs.js

@@ -6119,15 +6119,17 @@ var Text = function Text(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       hoverStyles = _ref.hoverStyles,
       onClick = _ref.onClick,
+      as = _ref.as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "as", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
     fontSize: themeValues.fontSize,
     weight: weight,
     color: color,
     fontFamily: themeValues.fontFamily,
+    as: as,
     extraStyles: extraStyles,
     hoverStyles: hoverStyles,
     onClick: onClick,
@@ -12630,7 +12632,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
       children = _ref.children;
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
-  var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem;");
+  var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ").concat(themeContext.isMobile ? "50px" : "57px", " ");
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-clor: #6E727E;\n    border-color: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
@@ -13125,10 +13127,7 @@ var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
   return /*#__PURE__*/React__default.createElement("svg", {
     width: 100,
     height: 100,
-    viewBox: "0 0 100 100",
-    style: {
-      paddingLeft: "16px"
-    }
+    viewBox: "0 0 84 100"
   }, /*#__PURE__*/React__default.createElement("title", null, "8330C897-662E-49C5-B716-3661563AA1FB@1.00x"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     id: "prefix__a",
     d: "M0 0h100v100H0z"
@@ -14340,7 +14339,7 @@ var Heading = function Heading(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "h1" : _ref$variant,
       _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "h1" : _ref$as,
+      as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
@@ -16267,7 +16266,198 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
   })));
 };
 
-var backgroundColor$1 = {
+var backgroundColor$1 = WHITE;
+var iconBackgroundColor = GRECIAN_GREY;
+var fallbackValues$9 = {
+  backgroundColor: backgroundColor$1,
+  iconBackgroundColor: iconBackgroundColor
+};
+
+var MOBILE_WIDTH = 768;
+
+var throttle = function throttle(delay, fn) {
+  var lastCall = 0;
+  return function () {
+    var now = new Date().getTime();
+
+    if (now - lastCall < delay) {
+      return;
+    }
+
+    lastCall = now;
+    return fn.apply(void 0, arguments);
+  };
+};
+
+var withWindowSize = function withWindowSize(Child) {
+  return function (_ref) {
+    var props = _extends({}, _ref);
+
+    var _useState = React.useState({
+      isMobile: window.innerWidth < MOBILE_WIDTH,
+      mobileWidth: MOBILE_WIDTH,
+      supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
+    }),
+        _useState2 = _slicedToArray(_useState, 2),
+        state = _useState2[0],
+        setState = _useState2[1];
+
+    var isMobileRef = React.useRef(state.isMobile);
+    var onResize = throttle(25, function () {
+      var width = window.innerWidth;
+      var newMobileState = width <= MOBILE_WIDTH;
+
+      if (newMobileState !== isMobileRef.current) {
+        isMobileRef.current = newMobileState;
+        setState({
+          isMobile: width <= MOBILE_WIDTH,
+          mobileWidth: MOBILE_WIDTH,
+          supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
+        });
+      }
+    });
+    React.useLayoutEffect(function () {
+      window.addEventListener("resize", onResize);
+      return function () {
+        window.removeEventListener("resize", onResize);
+      };
+    }, []);
+    return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+      theme: state
+    }, /*#__PURE__*/React__default.createElement(Child, props));
+  };
+};
+
+var CardVariantSwitcher = function CardVariantSwitcher(_ref) {
+  var variant = _ref.variant,
+      children = _ref.children;
+  return variant === "vertical" ? /*#__PURE__*/React__default.createElement(React.Fragment, null, children) : /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "width: 100%"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0",
+    maxWidth: "100%",
+    fullHeight: true
+  }, children));
+};
+
+var Card = function Card(_ref2) {
+  var themeValues = _ref2.themeValues,
+      icon = _ref2.icon,
+      heading = _ref2.heading,
+      text = _ref2.text,
+      _ref2$cardAction = _ref2.cardAction,
+      cardAction = _ref2$cardAction === void 0 ? "/profile" : _ref2$cardAction,
+      buttonText = _ref2.buttonText,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? "vertical" : _ref2$variant;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  var navigate = reactRouterDom.useNavigate();
+
+  var renderIcon = function renderIcon(icon) {
+    switch (icon) {
+      case "accounts":
+        return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
+
+      case "properties":
+        return /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
+
+      case "payment":
+        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+
+      default:
+        return /*#__PURE__*/React__default.createElement(PaymentMethodIcon$1, null);
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.backgroundColor,
+    borderRadius: "4px",
+    boxShadow: " 0px 1px 10px 0px rgb(246, 246, 249), 0px 2px 5px 0px rgb(202, 206, 216)",
+    padding: "0",
+    maxWidth: "100%",
+    minHeight: "100%",
+    minWidth: variant !== "vertical" && "300px"
+  }, /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true,
+    fillCenter: true
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: variant === "vertical" ? "column" : "row",
+    justify: variant === "vertical" && "center",
+    fullHeight: true,
+    childGap: "0"
+  }, icon && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    background: themeValues.iconBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: variant === "vertical" ? "row" : "column",
+    justify: "center",
+    fullHeight: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: variant === "vertical" ? "0.5rem 0" : isMobile ? "1rem 1.5rem" : "2rem 2.5rem"
+  }, renderIcon(icon)))), /*#__PURE__*/React__default.createElement(CardVariantSwitcher, {
+    variant: variant
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 1rem",
+    width: "100%",
+    extraStyles: "flex-grow: 1; width: 100%;"
+  }, /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true,
+    fillCenter: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h6"
+  }, heading), /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS"
+  }, text)))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0.5rem 1rem 1rem"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "smallPrimary",
+    text: buttonText,
+    action: function action() {
+      return navigate(cardAction);
+    },
+    extraStyles: "width: 100%;"
+  }))))));
+};
+
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$9);
+
+var cardRegistry = {
+  accounts: function accounts(props) {
+    return /*#__PURE__*/React__default.createElement(Card$1, _extends({
+      icon: "accounts",
+      heading: "Add an Account",
+      buttonText: "Add Account",
+      text: "Add your accounts to this profile to make your payments simple.",
+      cardAction: "/profile/accounts"
+    }, props));
+  },
+  properties: function properties(props) {
+    return /*#__PURE__*/React__default.createElement(Card$1, _extends({
+      icon: "properties",
+      heading: "Add a Property",
+      buttonText: "Add Property",
+      text: "Add a home, car, or other types of personal or business property.",
+      cardAction: "/profile/properties"
+    }, props));
+  },
+  payment: function payment(props) {
+    return /*#__PURE__*/React__default.createElement(Card$1, _extends({
+      icon: "payment",
+      heading: "Add a Payment Method",
+      buttonText: "Add Payment Method",
+      text: "Save cards and/or bank accounts to your profile for fast future payments.",
+      cardAction: "/profile/settings"
+    }, props));
+  }
+};
+
+var backgroundColor$2 = {
   "default": "".concat(TRANSPARENT)
 };
 var textFontSize = {
@@ -16303,8 +16493,8 @@ var checkedStyles = {
 var defaultStyles = {
   "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(GHOST_GREY, ";\n")
 };
-var fallbackValues$9 = {
-  backgroundColor: backgroundColor$1,
+var fallbackValues$a = {
+  backgroundColor: backgroundColor$2,
   textFontSize: textFontSize,
   textFontWeight: textFontWeight,
   textLineHeight: textLineHeight,
@@ -16508,7 +16698,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, title)));
 };
 
-var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$9, "default");
+var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$a, "default");
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
@@ -16534,7 +16724,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$a = {
+var fallbackValues$b = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -16738,7 +16928,7 @@ var CheckboxList = function CheckboxList(_ref2) {
   })));
 };
 
-var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$a, "default");
+var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$b, "default");
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -16768,7 +16958,7 @@ var DropdownIcon = function DropdownIcon() {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
-var fallbackValues$b = {
+var fallbackValues$c = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3
 };
@@ -17045,7 +17235,7 @@ var Dropdown = function Dropdown(_ref7) {
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
 };
 
-var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$b);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$c);
 
 function _templateObject4$3() {
   var data = _taggedTemplateLiteral([""]);
@@ -17921,10 +18111,10 @@ var CountryDropdown = function CountryDropdown(_ref) {
   });
 };
 
-var backgroundColor$2 = WHITE;
+var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$c = {
-  backgroundColor: backgroundColor$2,
+var fallbackValues$d = {
+  backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
 
@@ -17944,7 +18134,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$c);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$d);
 
 var fontFamily$3 = {
   p: "Public Sans",
@@ -17962,7 +18152,7 @@ var fontSize$4 = {
   pXXS: "0.65rem",
   pXL: "1.5rem"
 };
-var fallbackValues$d = {
+var fallbackValues$e = {
   fontFamily: fontFamily$3,
   fontSize: fontSize$4
 };
@@ -18008,7 +18198,8 @@ var Paragraph = function Paragraph(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children"]);
+      as = _ref.as,
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"]);
 
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
@@ -18016,12 +18207,13 @@ var Paragraph = function Paragraph(_ref) {
     margin: margin,
     fontFamily: themeValues.fontFamily,
     fontSize: themeValues.fontSize,
+    as: as,
     extraStyles: extraStyles,
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$d, "p");
+var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$e, "p");
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -18414,7 +18606,7 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6E727E;"
 };
-var fallbackValues$e = {
+var fallbackValues$f = {
   linkColor: linkColor,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
@@ -18641,7 +18833,7 @@ var FormInput = function FormInput(_ref13) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$e, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$f, "default");
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -18676,61 +18868,6 @@ var FormInputColumn = function FormInputColumn(_ref) {
   }, rest), children);
 };
 
-var MOBILE_WIDTH = 768;
-
-var throttle = function throttle(delay, fn) {
-  var lastCall = 0;
-  return function () {
-    var now = new Date().getTime();
-
-    if (now - lastCall < delay) {
-      return;
-    }
-
-    lastCall = now;
-    return fn.apply(void 0, arguments);
-  };
-};
-
-var withWindowSize = function withWindowSize(Child) {
-  return function (_ref) {
-    var props = _extends({}, _ref);
-
-    var _useState = React.useState({
-      isMobile: window.innerWidth < MOBILE_WIDTH,
-      mobileWidth: MOBILE_WIDTH,
-      supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
-    }),
-        _useState2 = _slicedToArray(_useState, 2),
-        state = _useState2[0],
-        setState = _useState2[1];
-
-    var isMobileRef = React.useRef(state.isMobile);
-    var onResize = throttle(25, function () {
-      var width = window.innerWidth;
-      var newMobileState = width <= MOBILE_WIDTH;
-
-      if (newMobileState !== isMobileRef.current) {
-        isMobileRef.current = newMobileState;
-        setState({
-          isMobile: width <= MOBILE_WIDTH,
-          mobileWidth: MOBILE_WIDTH,
-          supportsTouch: "ontouchstart" in window || navigator.maxTouchPoints > 1
-        });
-      }
-    });
-    React.useLayoutEffect(function () {
-      window.addEventListener("resize", onResize);
-      return function () {
-        window.removeEventListener("resize", onResize);
-      };
-    }, []);
-    return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-      theme: state
-    }, /*#__PURE__*/React__default.createElement(Child, props));
-  };
-};
-
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
       children = _ref.children,
@@ -18746,7 +18883,7 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$e, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$f, "default");
 
 var fontSize$6 = {
   "default": "1rem",
@@ -18760,7 +18897,7 @@ var color$6 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$f = {
+var fallbackValues$g = {
   fontSize: fontSize$6,
   padding: padding$1,
   color: color$6
@@ -18803,11 +18940,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$f, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$g, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$g = {
+var fallbackValues$h = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -18860,7 +18997,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$g, "default");
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$h, "default");
 
 function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
@@ -18983,7 +19120,7 @@ var fontWeight$3 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$h = {
+var fallbackValues$i = {
   fontWeight: fontWeight$3
 };
 
@@ -19010,7 +19147,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$h, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$i, "default");
 
 var weightTitle = {
   "default": "600",
@@ -19020,7 +19157,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "p"
 };
-var fallbackValues$i = {
+var fallbackValues$j = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -19049,10 +19186,10 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$i, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$j, "default");
 
 var color$7 = "#15749D";
-var fallbackValues$j = {
+var fallbackValues$k = {
   color: color$7
 };
 
@@ -19104,7 +19241,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$j);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$k);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -19349,174 +19486,986 @@ function _templateObject2$h() {
     return data;
   };
 
-  return data;
+  return data;
+}
+
+function _templateObject$t() {
+  var data = _taggedTemplateLiteral(["", " is too short"]);
+
+  _templateObject$t = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
+var MAX_LENGTH_ERROR = "max_length_error";
+var EXACT_LENGTH_ERROR = "exact_length_error";
+var MULTIPLE_LENGTHS_ERROR = "multiple_lengths_error";
+var EMAIL_ERROR = "email_error";
+var HAS_NUMBER_ERROR = "error/HAS_NUMBER";
+var HAS_UPPERCASE_LETTER_ERROR = "error/HAS_UPPERCASE_LETTER";
+var HAS_LOWERCASE_LETTER_ERROR = "error/HAS_LOWERCASE_LETTER";
+var HAS_SPECIAL_CHARACTER_ERROR = "error/HAS_SPECIAL_CHARACTER";
+var ONLY_NUMBERS_ERROR = "only_numbers_error";
+var ONLY_LETTERS_ERROR = "only_letters_error";
+var REQUIRED_FIELD_ERROR = "required_field_error";
+var NUM_GREATER_THAN_ERROR = "num_greater_than_error";
+var NUM_LESS_THAN_ERROR = "num_less_than_error";
+var MATCHES_FIELD_ERROR = "matches_field_error";
+var VALID_SELECT_OPTION_ERROR = "valid_select_option_error"; // Array<String>, Array<String> -> Object -> String
+
+var genErrorMessage = function genErrorMessage(strings) {
+  for (var _len = arguments.length, argKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    argKeys[_key - 1] = arguments[_key];
+  }
+
+  return function (inputState) {
+    return strings.reduce(function (accum, current, index) {
+      return "".concat(accum).concat(current).concat(argKeys[index] ? pathOr("", [argKeys[index]], inputState) : "");
+    }, []);
+  };
+};
+/*
+What's going on here? This looks weird, you may ask...
+DEFAULT_ERROR_MESSAGES is a map between the error constants (which are returned by validators)
+and some tagged template literals.
+In this case, the template tag function is curried and returns a function which accepts an args object
+I'm calling that object inputState, but it could really be anything.
+When the error message string fucntion is called with that arg, it's reduced to produce a custom error message
+with interpolation.
+*/
+
+
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "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
+
+var INPUT_STATE_NEUTRAL = "NEUTRAL";
+var INPUT_STATE_INVALID = "INVALID";
+var INPUT_STATE_VALID = "VALID"; // Function to check the state of an input
+// This function is intended to be used with inputs that have multiple validators
+// Takes an input's state value, destructures for the input's error and showError booleans, list of errors
+// Also takes a list of the specific error constants to look for
+// If the input's showError property is false, the input has not been validated, and input state is NEUTRAL
+// If the input has an error, and showError is true, check if the errors we care about are in the input's error list
+// If yes, input state is INVALID
+// If input has no error and showError is true, or the errors we're looking for aren't present in the list
+// then input state is VALID
+// { error: Boolean, showError: Boolean, errorsList: Array<String> }, Array<String> -> String
+
+var getInputState = function getInputState(_ref) {
+  var dirty = _ref.dirty,
+      hasErrors = _ref.hasErrors,
+      errors = _ref.errors,
+      rawValue = _ref.rawValue;
+  var errorsToCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+  if (!dirty) {
+    return INPUT_STATE_NEUTRAL;
+  } else if (dirty && rawValue === "" || hasErrors && errorsToCheck.some(function (error) {
+    return errors.includes(error);
+  })) {
+    return INPUT_STATE_INVALID;
+  }
+
+  return INPUT_STATE_VALID;
+};
+
+var PasswordRequirements = function PasswordRequirements(_ref) {
+  var _iconMap;
+
+  var password = _ref.password,
+      isMobile = _ref.isMobile;
+  var iconMap = (_iconMap = {}, _defineProperty(_iconMap, INPUT_STATE_NEUTRAL, {
+    icon: /*#__PURE__*/React__default.createElement(IconNeutral, {
+      margin: "0.125rem 0.5rem 0 0"
+    }),
+    color: MINESHAFT_GREY
+  }), _defineProperty(_iconMap, INPUT_STATE_INVALID, {
+    icon: /*#__PURE__*/React__default.createElement(IconInvalid, {
+      margin: "0.125rem 0.5rem 0 0"
+    }),
+    color: RAZZMATAZZ_RED
+  }), _defineProperty(_iconMap, INPUT_STATE_VALID, {
+    icon: /*#__PURE__*/React__default.createElement(IconValid, {
+      margin: "0.125rem 0.5rem 0 0"
+    }),
+    color: FOREST_GREEN
+  }), _iconMap);
+  var validationMap = {
+    charactersValidation: {
+      validationMessage: "Password must be 8 characters",
+      validationRequirement: [MIN_LENGTH_ERROR]
+    },
+    numbersValidation: {
+      validationMessage: "Password must contain at least one number",
+      validationRequirement: [HAS_NUMBER_ERROR]
+    },
+    letterCaseValidation: {
+      validationMessage: "Password must contain an upper and lower case letter",
+      validationRequirement: [HAS_UPPERCASE_LETTER_ERROR, HAS_LOWERCASE_LETTER_ERROR]
+    },
+    specialCharacterValidation: {
+      validationMessage: "Password must contain a special character (!@#$%^&*.?)",
+      validationRequirement: [HAS_SPECIAL_CHARACTER_ERROR]
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Box, {
+    background: ATHENS_GREY,
+    padding: isMobile ? "1rem" : "1.5rem",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Stack, null, Object.values(validationMap).map(function (item) {
+    return /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      key: item.validationMessage
+    }, /*#__PURE__*/React__default.createElement(Sidebar, {
+      width: "24px",
+      childGap: "0rem"
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0",
+      minHeight: "100%"
+    }, /*#__PURE__*/React__default.createElement(Cover, {
+      minHeight: "100%",
+      singleChild: true
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0"
+    }, iconMap[getInputState(password, item.validationRequirement)].icon))), /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0"
+    }, /*#__PURE__*/React__default.createElement(Sidebar, {
+      onRight: true,
+      childGap: "0rem"
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      padding: "0rem"
+    }, /*#__PURE__*/React__default.createElement(Cluster, {
+      justify: "flex-start",
+      align: "center"
+    }, /*#__PURE__*/React__default.createElement(Stack, {
+      fullHeight: true,
+      childGap: "0.25rem"
+    }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+      variant: "pS",
+      color: iconMap[getInputState(password, item.validationRequirement)].color
+    }, item.validationMessage))))))));
+  }))));
+};
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _construct(Parent, args, Class) {
+  if (_isNativeReflectConstruct()) {
+    _construct = Reflect.construct;
+  } else {
+    _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) _setPrototypeOf(instance, Class.prototype);
+      return instance;
+    };
+  }
+
+  return _construct.apply(null, arguments);
+}
+
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : undefined;
+
+  _wrapNativeSuper = function _wrapNativeSuper(Class) {
+    if (Class === null || !_isNativeFunction(Class)) return Class;
+
+    if (typeof Class !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class)) return _cache.get(Class);
+
+      _cache.set(Class, Wrapper);
+    }
+
+    function Wrapper() {
+      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+    }
+
+    Wrapper.prototype = Object.create(Class.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return _setPrototypeOf(Wrapper, Class);
+  };
+
+  return _wrapNativeSuper(Class);
+}
+
+// based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
+
+/**
+ * Parse errors.md and turn it into a simple hash of code: message
+ * @private
+ */
+var ERRORS = {
+  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
+  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
+  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
+  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
+  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
+  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
+  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
+  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
+  "9": "Please provide a number of steps to the modularScale helper.\n\n",
+  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
+  "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
+  "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
+  "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "16": "You must provide a template to this method.\n\n",
+  "17": "You passed an unsupported selector state to this method.\n\n",
+  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "23": "fontFace expects a name of a font-family.\n\n",
+  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "25": "fontFace expects localFonts to be an array.\n\n",
+  "26": "fontFace expects fileFormats to be an array.\n\n",
+  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
+  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
+  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
+  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
+  "36": "Property must be a string value.\n\n",
+  "37": "Syntax Error at %s.\n\n",
+  "38": "Formula contains a function that needs parentheses at %s.\n\n",
+  "39": "Formula is missing closing parenthesis at %s.\n\n",
+  "40": "Formula has too many closing parentheses at %s.\n\n",
+  "41": "All values in a formula must have the same unit or be unitless.\n\n",
+  "42": "Please provide a number of steps to the modularScale helper.\n\n",
+  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
+  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
+  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
+  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
+  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
+  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "53": "fontFace expects localFonts to be an array.\n\n",
+  "54": "fontFace expects fileFormats to be an array.\n\n",
+  "55": "fontFace expects a name of a font-family.\n\n",
+  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
+  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "61": "Property must be a string value.\n\n",
+  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
+  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
+  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
+  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
+  "67": "You must provide a template to this method.\n\n",
+  "68": "You passed an unsupported selector state to this method.\n\n",
+  "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
+  "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
+  "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
+  "73": "Please provide a valid CSS variable.\n\n",
+  "74": "CSS variable not found and no default was provided.\n\n",
+  "75": "important requires a valid style object, got a %s instead.\n\n",
+  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+};
+/**
+ * super basic version of sprintf
+ * @private
+ */
+
+function format() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  var a = args[0];
+  var b = [];
+  var c;
+
+  for (c = 1; c < args.length; c += 1) {
+    b.push(args[c]);
+  }
+
+  b.forEach(function (d) {
+    a = a.replace(/%[a-z]/, d);
+  });
+  return a;
+}
+/**
+ * Create an error file out of errors.md for development and a simple web link to the full errors
+ * in production mode.
+ * @private
+ */
+
+
+var PolishedError = /*#__PURE__*/function (_Error) {
+  _inheritsLoose(PolishedError, _Error);
+
+  function PolishedError(code) {
+    var _this;
+
+    if (process.env.NODE_ENV === 'production') {
+      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
+    } else {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
+    }
+
+    return _assertThisInitialized(_this);
+  }
+
+  return PolishedError;
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+function colorToInt(color) {
+  return Math.round(color * 255);
+}
+
+function convertToInt(red, green, blue) {
+  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+}
+
+function hslToRgb(hue, saturation, lightness, convert) {
+  if (convert === void 0) {
+    convert = convertToInt;
+  }
+
+  if (saturation === 0) {
+    // achromatic
+    return convert(lightness, lightness, lightness);
+  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
+
+  var huePrime = (hue % 360 + 360) % 360 / 60;
+  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  var red = 0;
+  var green = 0;
+  var blue = 0;
+
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma;
+    green = secondComponent;
+  } else if (huePrime >= 1 && huePrime < 2) {
+    red = secondComponent;
+    green = chroma;
+  } else if (huePrime >= 2 && huePrime < 3) {
+    green = chroma;
+    blue = secondComponent;
+  } else if (huePrime >= 3 && huePrime < 4) {
+    green = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 4 && huePrime < 5) {
+    red = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 5 && huePrime < 6) {
+    red = chroma;
+    blue = secondComponent;
+  }
+
+  var lightnessModification = lightness - chroma / 2;
+  var finalRed = red + lightnessModification;
+  var finalGreen = green + lightnessModification;
+  var finalBlue = blue + lightnessModification;
+  return convert(finalRed, finalGreen, finalBlue);
+}
+
+var namedColorMap = {
+  aliceblue: 'f0f8ff',
+  antiquewhite: 'faebd7',
+  aqua: '00ffff',
+  aquamarine: '7fffd4',
+  azure: 'f0ffff',
+  beige: 'f5f5dc',
+  bisque: 'ffe4c4',
+  black: '000',
+  blanchedalmond: 'ffebcd',
+  blue: '0000ff',
+  blueviolet: '8a2be2',
+  brown: 'a52a2a',
+  burlywood: 'deb887',
+  cadetblue: '5f9ea0',
+  chartreuse: '7fff00',
+  chocolate: 'd2691e',
+  coral: 'ff7f50',
+  cornflowerblue: '6495ed',
+  cornsilk: 'fff8dc',
+  crimson: 'dc143c',
+  cyan: '00ffff',
+  darkblue: '00008b',
+  darkcyan: '008b8b',
+  darkgoldenrod: 'b8860b',
+  darkgray: 'a9a9a9',
+  darkgreen: '006400',
+  darkgrey: 'a9a9a9',
+  darkkhaki: 'bdb76b',
+  darkmagenta: '8b008b',
+  darkolivegreen: '556b2f',
+  darkorange: 'ff8c00',
+  darkorchid: '9932cc',
+  darkred: '8b0000',
+  darksalmon: 'e9967a',
+  darkseagreen: '8fbc8f',
+  darkslateblue: '483d8b',
+  darkslategray: '2f4f4f',
+  darkslategrey: '2f4f4f',
+  darkturquoise: '00ced1',
+  darkviolet: '9400d3',
+  deeppink: 'ff1493',
+  deepskyblue: '00bfff',
+  dimgray: '696969',
+  dimgrey: '696969',
+  dodgerblue: '1e90ff',
+  firebrick: 'b22222',
+  floralwhite: 'fffaf0',
+  forestgreen: '228b22',
+  fuchsia: 'ff00ff',
+  gainsboro: 'dcdcdc',
+  ghostwhite: 'f8f8ff',
+  gold: 'ffd700',
+  goldenrod: 'daa520',
+  gray: '808080',
+  green: '008000',
+  greenyellow: 'adff2f',
+  grey: '808080',
+  honeydew: 'f0fff0',
+  hotpink: 'ff69b4',
+  indianred: 'cd5c5c',
+  indigo: '4b0082',
+  ivory: 'fffff0',
+  khaki: 'f0e68c',
+  lavender: 'e6e6fa',
+  lavenderblush: 'fff0f5',
+  lawngreen: '7cfc00',
+  lemonchiffon: 'fffacd',
+  lightblue: 'add8e6',
+  lightcoral: 'f08080',
+  lightcyan: 'e0ffff',
+  lightgoldenrodyellow: 'fafad2',
+  lightgray: 'd3d3d3',
+  lightgreen: '90ee90',
+  lightgrey: 'd3d3d3',
+  lightpink: 'ffb6c1',
+  lightsalmon: 'ffa07a',
+  lightseagreen: '20b2aa',
+  lightskyblue: '87cefa',
+  lightslategray: '789',
+  lightslategrey: '789',
+  lightsteelblue: 'b0c4de',
+  lightyellow: 'ffffe0',
+  lime: '0f0',
+  limegreen: '32cd32',
+  linen: 'faf0e6',
+  magenta: 'f0f',
+  maroon: '800000',
+  mediumaquamarine: '66cdaa',
+  mediumblue: '0000cd',
+  mediumorchid: 'ba55d3',
+  mediumpurple: '9370db',
+  mediumseagreen: '3cb371',
+  mediumslateblue: '7b68ee',
+  mediumspringgreen: '00fa9a',
+  mediumturquoise: '48d1cc',
+  mediumvioletred: 'c71585',
+  midnightblue: '191970',
+  mintcream: 'f5fffa',
+  mistyrose: 'ffe4e1',
+  moccasin: 'ffe4b5',
+  navajowhite: 'ffdead',
+  navy: '000080',
+  oldlace: 'fdf5e6',
+  olive: '808000',
+  olivedrab: '6b8e23',
+  orange: 'ffa500',
+  orangered: 'ff4500',
+  orchid: 'da70d6',
+  palegoldenrod: 'eee8aa',
+  palegreen: '98fb98',
+  paleturquoise: 'afeeee',
+  palevioletred: 'db7093',
+  papayawhip: 'ffefd5',
+  peachpuff: 'ffdab9',
+  peru: 'cd853f',
+  pink: 'ffc0cb',
+  plum: 'dda0dd',
+  powderblue: 'b0e0e6',
+  purple: '800080',
+  rebeccapurple: '639',
+  red: 'f00',
+  rosybrown: 'bc8f8f',
+  royalblue: '4169e1',
+  saddlebrown: '8b4513',
+  salmon: 'fa8072',
+  sandybrown: 'f4a460',
+  seagreen: '2e8b57',
+  seashell: 'fff5ee',
+  sienna: 'a0522d',
+  silver: 'c0c0c0',
+  skyblue: '87ceeb',
+  slateblue: '6a5acd',
+  slategray: '708090',
+  slategrey: '708090',
+  snow: 'fffafa',
+  springgreen: '00ff7f',
+  steelblue: '4682b4',
+  tan: 'd2b48c',
+  teal: '008080',
+  thistle: 'd8bfd8',
+  tomato: 'ff6347',
+  turquoise: '40e0d0',
+  violet: 'ee82ee',
+  wheat: 'f5deb3',
+  white: 'fff',
+  whitesmoke: 'f5f5f5',
+  yellow: 'ff0',
+  yellowgreen: '9acd32'
+};
+/**
+ * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
+ * @private
+ */
+
+function nameToHex(color) {
+  if (typeof color !== 'string') return color;
+  var normalizedColorName = color.toLowerCase();
+  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+}
+
+var hexRegex = /^#[a-fA-F0-9]{6}$/;
+var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
+var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
+var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
+var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+/**
+ * Returns an RgbColor or RgbaColor object. This utility function is only useful
+ * if want to extract a color component. With the color util `toColorString` you
+ * can convert a RgbColor or RgbaColor object back to a string.
+ *
+ * @example
+ * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
+ * const color1 = parseToRgb('rgb(255, 0, 0)');
+ * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
+ * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
+ */
+
+function parseToRgb(color) {
+  if (typeof color !== 'string') {
+    throw new PolishedError(3);
+  }
+
+  var normalizedColor = nameToHex(color);
+
+  if (normalizedColor.match(hexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
+    };
+  }
+
+  if (normalizedColor.match(hexRgbaRegex)) {
+    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
+      alpha: alpha
+    };
+  }
+
+  if (normalizedColor.match(reducedHexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
+    };
+  }
+
+  if (normalizedColor.match(reducedRgbaHexRegex)) {
+    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
+      alpha: _alpha
+    };
+  }
+
+  var rgbMatched = rgbRegex.exec(normalizedColor);
+
+  if (rgbMatched) {
+    return {
+      red: parseInt("" + rgbMatched[1], 10),
+      green: parseInt("" + rgbMatched[2], 10),
+      blue: parseInt("" + rgbMatched[3], 10)
+    };
+  }
+
+  var rgbaMatched = rgbaRegex.exec(normalizedColor);
+
+  if (rgbaMatched) {
+    return {
+      red: parseInt("" + rgbaMatched[1], 10),
+      green: parseInt("" + rgbaMatched[2], 10),
+      blue: parseInt("" + rgbaMatched[3], 10),
+      alpha: parseFloat("" + rgbaMatched[4])
+    };
+  }
+
+  var hslMatched = hslRegex.exec(normalizedColor);
+
+  if (hslMatched) {
+    var hue = parseInt("" + hslMatched[1], 10);
+    var saturation = parseInt("" + hslMatched[2], 10) / 100;
+    var lightness = parseInt("" + hslMatched[3], 10) / 100;
+    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
+    var hslRgbMatched = rgbRegex.exec(rgbColorString);
+
+    if (!hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, rgbColorString);
+    }
+
+    return {
+      red: parseInt("" + hslRgbMatched[1], 10),
+      green: parseInt("" + hslRgbMatched[2], 10),
+      blue: parseInt("" + hslRgbMatched[3], 10)
+    };
+  }
+
+  var hslaMatched = hslaRegex.exec(normalizedColor);
+
+  if (hslaMatched) {
+    var _hue = parseInt("" + hslaMatched[1], 10);
+
+    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+
+    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+
+    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+
+    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+
+    if (!_hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, _rgbColorString);
+    }
+
+    return {
+      red: parseInt("" + _hslRgbMatched[1], 10),
+      green: parseInt("" + _hslRgbMatched[2], 10),
+      blue: parseInt("" + _hslRgbMatched[3], 10),
+      alpha: parseFloat("" + hslaMatched[4])
+    };
+  }
+
+  throw new PolishedError(5);
+}
+
+/**
+ * Reduces hex values if possible e.g. #ff8866 to #f86
+ * @private
+ */
+var reduceHexValue = function reduceHexValue(value) {
+  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
+    return "#" + value[1] + value[3] + value[5];
+  }
+
+  return value;
+};
+
+function numberToHex(value) {
+  var hex = value.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+
+/**
+ * Returns a string value for the color. The returned result is the smallest possible hex notation.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: rgb(255, 205, 100),
+ *   background: rgb({ red: 255, green: 205, blue: 100 }),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${rgb(255, 205, 100)};
+ *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#ffcd64";
+ *   background: "#ffcd64";
+ * }
+ */
+function rgb(value, green, blue) {
+  if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
+    return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+  } else if (typeof value === 'object' && green === undefined && blue === undefined) {
+    return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+  }
+
+  throw new PolishedError(6);
+}
+
+/**
+ * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+ *
+ * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: rgba(255, 205, 100, 0.7),
+ *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
+ *   background: rgba(255, 205, 100, 1),
+ *   background: rgba('#ffffff', 0.4),
+ *   background: rgba('black', 0.7),
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${rgba(255, 205, 100, 0.7)};
+ *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
+ *   background: ${rgba(255, 205, 100, 1)};
+ *   background: ${rgba('#ffffff', 0.4)};
+ *   background: ${rgba('black', 0.7)};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "rgba(255,205,100,0.7)";
+ *   background: "rgba(255,205,100,0.7)";
+ *   background: "#ffcd64";
+ *   background: "rgba(255,255,255,0.4)";
+ *   background: "rgba(0,0,0,0.7)";
+ * }
+ */
+function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
+  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
+    var rgbValue = parseToRgb(firstValue);
+    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
+    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
+    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+  }
+
+  throw new PolishedError(7);
 }
 
-function _templateObject$t() {
-  var data = _taggedTemplateLiteral(["", " is too short"]);
-
-  _templateObject$t = function _templateObject() {
-    return data;
+// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
+// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-redeclare
+function curried(f, length, acc) {
+  return function fn() {
+    // eslint-disable-next-line prefer-rest-params
+    var combined = acc.concat(Array.prototype.slice.call(arguments));
+    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
   };
+} // eslint-disable-next-line no-redeclare
 
-  return data;
-}
 
-var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
-var MAX_LENGTH_ERROR = "max_length_error";
-var EXACT_LENGTH_ERROR = "exact_length_error";
-var MULTIPLE_LENGTHS_ERROR = "multiple_lengths_error";
-var EMAIL_ERROR = "email_error";
-var HAS_NUMBER_ERROR = "error/HAS_NUMBER";
-var HAS_UPPERCASE_LETTER_ERROR = "error/HAS_UPPERCASE_LETTER";
-var HAS_LOWERCASE_LETTER_ERROR = "error/HAS_LOWERCASE_LETTER";
-var HAS_SPECIAL_CHARACTER_ERROR = "error/HAS_SPECIAL_CHARACTER";
-var ONLY_NUMBERS_ERROR = "only_numbers_error";
-var ONLY_LETTERS_ERROR = "only_letters_error";
-var REQUIRED_FIELD_ERROR = "required_field_error";
-var NUM_GREATER_THAN_ERROR = "num_greater_than_error";
-var NUM_LESS_THAN_ERROR = "num_less_than_error";
-var MATCHES_FIELD_ERROR = "matches_field_error";
-var VALID_SELECT_OPTION_ERROR = "valid_select_option_error"; // Array<String>, Array<String> -> Object -> String
+function curry(f) {
+  // eslint-disable-line no-redeclare
+  return curried(f, f.length, []);
+}
 
-var genErrorMessage = function genErrorMessage(strings) {
-  for (var _len = arguments.length, argKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    argKeys[_key - 1] = arguments[_key];
-  }
+/**
+ * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: mix(0.5, '#f00', '#00f')
+ *   background: mix(0.25, '#f00', '#00f')
+ *   background: mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${mix(0.5, '#f00', '#00f')};
+ *   background: ${mix(0.25, '#f00', '#00f')};
+ *   background: ${mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#7f007f";
+ *   background: "#3f00bf";
+ *   background: "rgba(63, 0, 191, 0.75)";
+ * }
+ */
 
-  return function (inputState) {
-    return strings.reduce(function (accum, current, index) {
-      return "".concat(accum).concat(current).concat(argKeys[index] ? pathOr("", [argKeys[index]], inputState) : "");
-    }, []);
-  };
-};
-/*
-What's going on here? This looks weird, you may ask...
-DEFAULT_ERROR_MESSAGES is a map between the error constants (which are returned by validators)
-and some tagged template literals.
-In this case, the template tag function is curried and returns a function which accepts an args object
-I'm calling that object inputState, but it could really be anything.
-When the error message string fucntion is called with that arg, it's reduced to produce a custom error message
-with interpolation.
-*/
+function mix$1(weight, color, otherColor) {
+  if (color === 'transparent') return otherColor;
+  if (otherColor === 'transparent') return color;
+  if (weight === 0) return otherColor;
+  var parsedColor1 = parseToRgb(color);
 
+  var color1 = _extends$1({}, parsedColor1, {
+    alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
+  });
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "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
+  var parsedColor2 = parseToRgb(otherColor);
+
+  var color2 = _extends$1({}, parsedColor2, {
+    alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
+  }); // The formula is copied from the original Sass implementation:
+  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
+
+
+  var alphaDelta = color1.alpha - color2.alpha;
+  var x = parseFloat(weight) * 2 - 1;
+  var y = x * alphaDelta === -1 ? x : x + alphaDelta;
+  var z = 1 + x * alphaDelta;
+  var weight1 = (y / z + 1) / 2.0;
+  var weight2 = 1 - weight1;
+  var mixedColor = {
+    red: Math.floor(color1.red * weight1 + color2.red * weight2),
+    green: Math.floor(color1.green * weight1 + color2.green * weight2),
+    blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),
+    alpha: color1.alpha * (parseFloat(weight) / 1.0) + color2.alpha * (1 - parseFloat(weight) / 1.0)
+  };
+  return rgba$1(mixedColor);
+} // prettier-ignore
 
-var INPUT_STATE_NEUTRAL = "NEUTRAL";
-var INPUT_STATE_INVALID = "INVALID";
-var INPUT_STATE_VALID = "VALID"; // Function to check the state of an input
-// This function is intended to be used with inputs that have multiple validators
-// Takes an input's state value, destructures for the input's error and showError booleans, list of errors
-// Also takes a list of the specific error constants to look for
-// If the input's showError property is false, the input has not been validated, and input state is NEUTRAL
-// If the input has an error, and showError is true, check if the errors we care about are in the input's error list
-// If yes, input state is INVALID
-// If input has no error and showError is true, or the errors we're looking for aren't present in the list
-// then input state is VALID
-// { error: Boolean, showError: Boolean, errorsList: Array<String> }, Array<String> -> String
 
-var getInputState = function getInputState(_ref) {
-  var dirty = _ref.dirty,
-      hasErrors = _ref.hasErrors,
-      errors = _ref.errors,
-      rawValue = _ref.rawValue;
-  var errorsToCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+var curriedMix = /*#__PURE__*/curry
+/* ::<number | string, string, string, string> */
+(mix$1);
 
-  if (!dirty) {
-    return INPUT_STATE_NEUTRAL;
-  } else if (dirty && rawValue === "" || hasErrors && errorsToCheck.some(function (error) {
-    return errors.includes(error);
-  })) {
-    return INPUT_STATE_INVALID;
-  }
+/**
+ * Tints a color by mixing it with white. `tint` can produce
+ * hue shifts, where as `lighten` manipulates the luminance channel and therefore
+ * doesn't produce hue shifts.
+ *
+ * @example
+ * // Styles as object usage
+ * const styles = {
+ *   background: tint(0.25, '#00f')
+ * }
+ *
+ * // styled-components usage
+ * const div = styled.div`
+ *   background: ${tint(0.25, '#00f')};
+ * `
+ *
+ * // CSS in JS Output
+ *
+ * element {
+ *   background: "#bfbfff";
+ * }
+ */
 
-  return INPUT_STATE_VALID;
-};
+function tint(percentage, color) {
+  if (color === 'transparent') return color;
+  return curriedMix(parseFloat(percentage), 'rgb(255, 255, 255)', color);
+} // prettier-ignore
 
-var PasswordRequirements = function PasswordRequirements(_ref) {
-  var _iconMap;
 
-  var password = _ref.password,
-      isMobile = _ref.isMobile;
-  var iconMap = (_iconMap = {}, _defineProperty(_iconMap, INPUT_STATE_NEUTRAL, {
-    icon: /*#__PURE__*/React__default.createElement(IconNeutral, {
-      margin: "0.125rem 0.5rem 0 0"
-    }),
-    color: MINESHAFT_GREY
-  }), _defineProperty(_iconMap, INPUT_STATE_INVALID, {
-    icon: /*#__PURE__*/React__default.createElement(IconInvalid, {
-      margin: "0.125rem 0.5rem 0 0"
-    }),
-    color: RAZZMATAZZ_RED
-  }), _defineProperty(_iconMap, INPUT_STATE_VALID, {
-    icon: /*#__PURE__*/React__default.createElement(IconValid, {
-      margin: "0.125rem 0.5rem 0 0"
-    }),
-    color: FOREST_GREEN
-  }), _iconMap);
-  var validationMap = {
-    charactersValidation: {
-      validationMessage: "Password must be 8 characters",
-      validationRequirement: [MIN_LENGTH_ERROR]
-    },
-    numbersValidation: {
-      validationMessage: "Password must contain at least one number",
-      validationRequirement: [HAS_NUMBER_ERROR]
-    },
-    letterCaseValidation: {
-      validationMessage: "Password must contain an upper and lower case letter",
-      validationRequirement: [HAS_UPPERCASE_LETTER_ERROR, HAS_LOWERCASE_LETTER_ERROR]
-    },
-    specialCharacterValidation: {
-      validationMessage: "Password must contain a special character (!@#$%^&*.?)",
-      validationRequirement: [HAS_SPECIAL_CHARACTER_ERROR]
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(Box, {
-    background: ATHENS_GREY,
-    padding: isMobile ? "1rem" : "1.5rem",
-    width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
-    justify: "center",
-    align: "center"
-  }, /*#__PURE__*/React__default.createElement(Stack, null, Object.values(validationMap).map(function (item) {
-    return /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0",
-      key: item.validationMessage
-    }, /*#__PURE__*/React__default.createElement(Sidebar, {
-      width: "24px",
-      childGap: "0rem"
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0",
-      minHeight: "100%"
-    }, /*#__PURE__*/React__default.createElement(Cover, {
-      minHeight: "100%",
-      singleChild: true
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0"
-    }, iconMap[getInputState(password, item.validationRequirement)].icon))), /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0"
-    }, /*#__PURE__*/React__default.createElement(Sidebar, {
-      onRight: true,
-      childGap: "0rem"
-    }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: "0rem"
-    }, /*#__PURE__*/React__default.createElement(Cluster, {
-      justify: "flex-start",
-      align: "center"
-    }, /*#__PURE__*/React__default.createElement(Stack, {
-      fullHeight: true,
-      childGap: "0.25rem"
-    }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
-      variant: "pS",
-      color: iconMap[getInputState(password, item.validationRequirement)].color
-    }, item.validationMessage))))))));
-  }))));
-};
+var curriedTint = /*#__PURE__*/curry
+/* ::<number | string, string, string> */
+(tint);
 
 var color$8 = {
   "default": "".concat(CHARADE_GREY),
@@ -19526,7 +20475,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$k = {
+var fallbackValues$l = {
   color: color$8,
   height: height$1
 };
@@ -19576,8 +20525,8 @@ var Placeholder = function Placeholder(_ref2) {
     border: "none",
     minHeight: themeValues.height,
     hiddenStyles: !visible,
-    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(STORM_GREY, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(STORM_GREY, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
-    hoverStyles: "background-color: ".concat(GRECIAN_GREY, ";")
+    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
+    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint(0.9, themeValues.color), ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19591,7 +20540,7 @@ var Placeholder = function Placeholder(_ref2) {
     childGap: "0"
   }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: ".fill { \n                    fill: ".concat(CHARADE_GREY, "; \n                  } .stroke { \n                    stroke: ").concat(CHARADE_GREY, "; \n                  }")
+    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  }")
   }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, largeIcon === "accounts" ? /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null) : /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null), /*#__PURE__*/React__default.createElement(Text$1, {
@@ -19615,13 +20564,13 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$k, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$l, "default");
 
-var backgroundColor$3 = {
+var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$l = {
-  backgroundColor: backgroundColor$3
+var fallbackValues$m = {
+  backgroundColor: backgroundColor$4
 };
 
 var ProcessingFee = function ProcessingFee(_ref) {
@@ -19648,11 +20597,11 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$l, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$m, "default");
 
 var activeColor$4 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$m = {
+var fallbackValues$n = {
   activeColor: activeColor$4,
   inactiveColor: inactiveColor
 };
@@ -19748,7 +20697,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$m);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$n);
 
 var borderColor$1 = {
   "default": "".concat(GREY_CHATEAU)
@@ -19756,7 +20705,7 @@ var borderColor$1 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   borderColor: borderColor$1,
   borderSize: borderSize
 };
@@ -19773,7 +20722,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$n, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$o, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -30355,7 +31304,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$o = {
+var fallbackValues$p = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -30557,7 +31506,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$o);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$p);
 
 const validatorToPredicate = (validatorFn, emptyCase) => (
   value,
@@ -32383,7 +33332,7 @@ var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
 var focusStyles = "outline: none;";
-var fallbackValues$p = {
+var fallbackValues$q = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor,
@@ -32466,7 +33415,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.titleColor,
-    "aria-level": "3"
+    as: "h6"
   }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
     style: {
@@ -32487,7 +33436,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$p);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$q);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -32610,8 +33559,7 @@ var EditableList = function EditableList(_ref) {
     variant: "pL",
     weight: titleWeight,
     color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px;",
-    "aria-level": "3"
+    extraStyles: "letter-spacing: 0.29px;"
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -32854,8 +33802,7 @@ var TableListItem = function TableListItem(_ref) {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: CHARADE_GREY,
-    "aria-level": "3"
+    color: CHARADE_GREY
   }, title)), /*#__PURE__*/React__default.createElement(TableItemValue, {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -32976,10 +33923,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
-var backgroundColor$4 = "#182848";
-var fallbackValues$q = {
+var backgroundColor$5 = "#182848";
+var fallbackValues$r = {
   textColor: textColor$2,
-  backgroundColor: backgroundColor$4
+  backgroundColor: backgroundColor$5
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -33021,7 +33968,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter)));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$q));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$r));
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -33935,15 +34882,15 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized$1(self); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -33971,27 +34918,27 @@ function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(Modal)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf$1(Modal)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-    _defineProperty$1(_assertThisInitialized(_this), "getApplicationNode", function () {
+    _defineProperty$1(_assertThisInitialized$1(_this), "getApplicationNode", function () {
       if (_this.props.getApplicationNode) return _this.props.getApplicationNode();
       return _this.props.applicationNode;
     });
 
-    _defineProperty$1(_assertThisInitialized(_this), "checkUnderlayClick", function (event) {
+    _defineProperty$1(_assertThisInitialized$1(_this), "checkUnderlayClick", function (event) {
       if (_this.dialogNode && _this.dialogNode.contains(event.target) || // If the click is on the scrollbar we don't want to close the modal.
       event.pageX > event.target.ownerDocument.documentElement.offsetWidth || event.pageY > event.target.ownerDocument.documentElement.offsetHeight) return;
 
       _this.exit(event);
     });
 
-    _defineProperty$1(_assertThisInitialized(_this), "checkDocumentKeyDown", function (event) {
+    _defineProperty$1(_assertThisInitialized$1(_this), "checkDocumentKeyDown", function (event) {
       if (_this.props.escapeExits && (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27)) {
         _this.exit(event);
       }
     });
 
-    _defineProperty$1(_assertThisInitialized(_this), "exit", function (event) {
+    _defineProperty$1(_assertThisInitialized$1(_this), "exit", function (event) {
       if (_this.props.onExit) {
         _this.props.onExit(event);
       }
@@ -34256,6 +35203,7 @@ var Modal$1 = function Modal(_ref) {
   var ModalLink = _ref.ModalLink,
       hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
+      cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
       modalHeaderText = _ref.modalHeaderText,
       modalBodyText = _ref.modalBodyText,
@@ -34273,7 +35221,9 @@ var Modal$1 = function Modal(_ref) {
       defaultWrapper = _ref$defaultWrapper === void 0 ? true : _ref$defaultWrapper,
       _ref$onlyCloseButton = _ref.onlyCloseButton,
       onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
-      maxHeight = _ref.maxHeight;
+      maxHeight = _ref.maxHeight,
+      _ref$underlayClickExi = _ref.underlayClickExits,
+      underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -34290,7 +35240,8 @@ var Modal$1 = function Modal(_ref) {
     },
     dialogStyle: {
       width: "615px"
-    }
+    },
+    underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -34329,7 +35280,7 @@ var Modal$1 = function Modal(_ref) {
     extraStyles: isMobile ? "flex-grow: 1" : ""
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "secondary",
-    action: hideModal,
+    action: cancelAction ? cancelAction : hideModal,
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: "width: 100%;"
@@ -34388,11 +35339,11 @@ var borderRadius = {
   "default": "0.25rem",
   largeTitle: "0.25rem"
 };
-var backgroundColor$5 = {
+var backgroundColor$6 = {
   "default": WHITE,
   largeTitle: WHITE
 };
-var fallbackValues$r = {
+var fallbackValues$s = {
   fontSize: fontSize$7,
   fontWeight: fontWeight$4,
   fontColor: fontColor,
@@ -34402,7 +35353,7 @@ var fallbackValues$r = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$5
+  backgroundColor: backgroundColor$6
 };
 
 var Module = function Module(_ref) {
@@ -34433,9 +35384,9 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$r, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$s, "default"));
 
-var backgroundColor$6 = {
+var backgroundColor$7 = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -34443,8 +35394,8 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$s = {
-  backgroundColor: backgroundColor$6,
+var fallbackValues$t = {
+  backgroundColor: backgroundColor$7,
   shadowColor: shadowColor
 };
 
@@ -34484,7 +35435,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$s, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$t, "profile");
 
 function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
@@ -34546,7 +35497,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$s, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$t, "profile");
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -36038,18 +36989,17 @@ var TitleModule = function TitleModule(_ref) {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: titleColor,
-    "aria-level": "2"
+    as: "h2"
   }, title), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: subtitleColor,
-    "aria-level": "3"
+    color: subtitleColor
   }, subtitle)));
 };
 
 var color$9 = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
-var fallbackValues$t = {
+var fallbackValues$u = {
   color: color$9,
   hoverColor: hoverColor$4,
   activeColor: activeColor$5
@@ -36120,7 +37070,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps));
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$t);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$u);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -36656,7 +37606,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, backButton, forwardButton)));
 };
 
-var backgroundColor$7 = {
+var backgroundColor$8 = {
   "default": "transparent",
   small: "transparent"
 };
@@ -36672,8 +37622,8 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$u = {
-  backgroundColor: backgroundColor$7,
+var fallbackValues$v = {
+  backgroundColor: backgroundColor$8,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -36836,7 +37786,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$u, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$v, "default");
 
 var linkColor$1 = {
   "default": "#357fb8",
@@ -36858,7 +37808,7 @@ var modalLinkHoverFocus = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$v = {
+var fallbackValues$w = {
   linkColor: linkColor$1,
   fontSize: fontSize$8,
   lineHeight: lineHeight$4,
@@ -36921,7 +37871,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   });
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$v, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$w, "default");
 
 function _templateObject$z() {
   var data = _taggedTemplateLiteral([""]);
@@ -37307,7 +38257,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$2 = "".concat(GREY_CHATEAU);
 var focusStyles$1 = "outline: none;";
-var fallbackValues$w = {
+var fallbackValues$x = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -37471,8 +38421,7 @@ var RadioSection = function RadioSection(_ref) {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
-      color: CHARADE_GREY,
-      "aria-level": "3"
+      color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
       childGap: "0.5rem"
     }, section.rightIcons.map(function (icon) {
@@ -37499,7 +38448,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$w);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$x);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -37786,7 +38735,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$x = {
+var fallbackValues$y = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -37842,9 +38791,9 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$x);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$y);
 
-var backgroundColor$8 = {
+var backgroundColor$9 = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -37872,8 +38821,8 @@ var modalLinkHoverFocus$1 = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$y = {
-  backgroundColor: backgroundColor$8,
+var fallbackValues$z = {
+  backgroundColor: backgroundColor$9,
   linkColor: linkColor$2,
   border: border$2,
   fontSize: fontSize$9,
@@ -37936,7 +38885,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   });
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$y, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$z, "default");
 
 function _templateObject2$l() {
   var data = _taggedTemplateLiteral([""]);
@@ -38060,6 +39009,65 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
+var fontWeight$7 = "600";
+var fontColor$1 = WHITE;
+var textAlign$1 = "left";
+var headerBackgroundColor = BRIGHT_GREY;
+var imageBackgroundColor = MATISSE_BLUE;
+var fallbackValues$A = {
+  fontWeight: fontWeight$7,
+  fontColor: fontColor$1,
+  textAlign: textAlign$1,
+  headerBackgroundColor: headerBackgroundColor,
+  imageBackgroundColor: imageBackgroundColor
+};
+
+function _templateObject$C() {
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n"]);
+
+  _templateObject$C = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var WelcomeImage = styled__default.img(_templateObject$C());
+
+var WelcomeModule = function WelcomeModule(_ref) {
+  var heading = _ref.heading,
+      isMobile = _ref.isMobile,
+      themeValues = _ref.themeValues;
+  var welcomeImage = "https://cb-public-assets.s3-us-west-2.amazonaws.com/profile-assets/profile-welcome-image.png";
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, isMobile && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    background: themeValues.imageBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
+    src: welcomeImage
+  }))), /*#__PURE__*/React__default.createElement(Box, {
+    background: themeValues.headerBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h5",
+    weight: themeValues.fontWeight,
+    color: themeValues.fontColor,
+    textAlign: themeValues.textAlign,
+    as: "h5"
+  }, heading)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    background: themeValues.imageBackgroundColor
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    align: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
+    src: welcomeImage
+  })))));
+};
+
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$A));
+
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
       workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
@@ -38106,7 +39114,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$z = {
+var fallbackValues$B = {
   pageBackground: pageBackground
 };
 
@@ -38153,7 +39161,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$z));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$B));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -38195,7 +39203,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$z));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$B));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -38235,7 +39243,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$z));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$B));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -38289,7 +39297,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$z));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$B));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -38360,7 +39368,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$z));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$B));
 
 
 
@@ -38489,7 +39497,9 @@ exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
+exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;
+exports.cardRegistry = cardRegistry;
 exports.constants = index$4;
 exports.createPartialAmountFormState = createPartialAmountFormState;
 exports.util = index$5;