@thecb/components 8.0.4-beta.2 → 8.0.4-beta.4

package/dist/index.esm.js

@@ -4779,7 +4779,7 @@ var fontSize = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$1 = {
+var fallbackValues = {
   fontFamily: fontFamily,
   fontSize: fontSize
 };
@@ -4879,7 +4879,7 @@ var createThemeValues = function createThemeValues(themeContext, fallbackValues,
   }, {});
   return createdTheme;
 };
-var themeComponent$1 = function themeComponent(component, componentThemeId, fallbackValues, defaultVariant) {
+var themeComponent = function themeComponent(component, componentThemeId, fallbackValues, defaultVariant) {
   return function (_ref7) {
     var _themeContext$metadat;
 
@@ -4919,7 +4919,7 @@ export const generateImgSrc = (
 var themeUtils = /*#__PURE__*/Object.freeze({
   __proto__: null,
   createThemeValues: createThemeValues,
-  themeComponent: themeComponent$1
+  themeComponent: themeComponent
 });
 
 /* These are constants used by nav frontend components */
@@ -4959,7 +4959,8 @@ var SEASHELL_WHITE = "#F1F1F1";
 var ALABASTER_WHITE = "#F7F7F7";
 var AQUA_HAZE_WHITE = "#F7F9FA";
 var BLEACH_WHITE = "#FEF4d7";
-var CATSKILL_WHITE = "#EAF2F6"; // GREY
+var CATSKILL_WHITE = "#EAF2F6";
+var HALF_COLONIAL_WHITE = "#FDF4D2"; // GREY
 
 var ATHENS_GREY = "#F6F6F9"; // CBS-100
 
@@ -5066,6 +5067,25 @@ var ALERT_COLORS = {
   },
   text: ZODIAC_BLUE,
   link: SCIENCE_BLUE
+}; // These colors match the pill components seen in CityBase UI designs.
+
+var PILL_COLORS = {
+  danger: {
+    background: BLUSH_RED,
+    text: RAZZMATAZZ_RED
+  },
+  neutral: {
+    background: GRECIAN_GREY,
+    text: CHARADE_GREY
+  },
+  success: {
+    background: HINT_GREEN,
+    text: SEA_GREEN
+  },
+  warning: {
+    background: HALF_COLONIAL_WHITE,
+    text: ZEST_ORANGE
+  }
 };
 
 var colors = /*#__PURE__*/Object.freeze({
@@ -5079,6 +5099,7 @@ var colors = /*#__PURE__*/Object.freeze({
   AQUA_HAZE_WHITE: AQUA_HAZE_WHITE,
   BLEACH_WHITE: BLEACH_WHITE,
   CATSKILL_WHITE: CATSKILL_WHITE,
+  HALF_COLONIAL_WHITE: HALF_COLONIAL_WHITE,
   ATHENS_GREY: ATHENS_GREY,
   ALTO_GREY: ALTO_GREY,
   SILVER_GREY: SILVER_GREY,
@@ -5142,6 +5163,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BLUSH_RED: BLUSH_RED,
   RASPBERRY: RASPBERRY,
   ALERT_COLORS: ALERT_COLORS,
+  PILL_COLORS: PILL_COLORS,
   ERROR_COLOR: ERROR_COLOR
 });
 
@@ -6384,7 +6406,7 @@ var Text = function Text(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Text$1 = themeComponent$1(Text, "Text", fallbackValues$1, "p");
+var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
 var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"];
 /*
@@ -6464,8 +6486,9 @@ var BoxWrapper = styled(function (_ref) {
   return textAlign;
 }, function (_ref14) {
   var hoverStyles = _ref14.hoverStyles,
-      as = _ref14.as;
-  return css(["", " ", ""], hoverStyles, as === "button" ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+      as = _ref14.as,
+      disabled = _ref14.disabled;
+  return css(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref15) {
   var as = _ref15.as;
   return css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
@@ -12740,7 +12763,7 @@ var activeColor = {
   whiteSecondary: WHITE,
   whitePrimary: WHITE
 };
-var fallbackValues$2 = {
+var fallbackValues$1 = {
   padding: padding,
   color: color$1,
   fontSizeVariant: fontSizeVariant,
@@ -12900,7 +12923,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
       rest = _objectWithoutProperties(_ref2, _excluded$h);
 
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$2, "Button", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var isMobile = themeContext.isMobile;
   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    cursor: pointer;\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  ");
@@ -12956,7 +12979,7 @@ var singleIconColor = {
   secondary: "".concat(BRIGHT_GREY),
   darkMode: "".concat(WHITE)
 };
-var fallbackValues$3 = {
+var fallbackValues$2 = {
   primaryColor: primaryColor,
   accentColor: accentColor,
   subIconColor: subIconColor,
@@ -12996,7 +13019,7 @@ var AccountsIcon = function AccountsIcon(_ref) {
   })));
 };
 
-var AccountsIcon$1 = themeComponent$1(AccountsIcon, "Icons", fallbackValues$3, "info");
+var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$2, "info");
 
 var AccountsAddIcon = function AccountsAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13035,7 +13058,7 @@ var AccountsAddIcon = function AccountsAddIcon(_ref) {
   })));
 };
 
-var AccountsAddIcon$1 = themeComponent$1(AccountsAddIcon, "Icons", fallbackValues$3, "info");
+var AccountsAddIcon$1 = themeComponent(AccountsAddIcon, "Icons", fallbackValues$2, "info");
 
 var ForgotPasswordIcon = function ForgotPasswordIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13073,7 +13096,7 @@ var ForgotPasswordIcon = function ForgotPasswordIcon(_ref) {
   })));
 };
 
-var ForgotPasswordIcon$1 = themeComponent$1(ForgotPasswordIcon, "Icons", fallbackValues$3, "info");
+var ForgotPasswordIcon$1 = themeComponent(ForgotPasswordIcon, "Icons", fallbackValues$2, "info");
 
 var GoToEmailIcon = function GoToEmailIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13103,7 +13126,7 @@ var GoToEmailIcon = function GoToEmailIcon(_ref) {
   })));
 };
 
-var GoToEmailIcon$1 = themeComponent$1(GoToEmailIcon, "Icons", fallbackValues$3, "info");
+var GoToEmailIcon$1 = themeComponent(GoToEmailIcon, "Icons", fallbackValues$2, "info");
 
 var VerifiedEmailIcon = function VerifiedEmailIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13147,7 +13170,7 @@ var VerifiedEmailIcon = function VerifiedEmailIcon(_ref) {
   })));
 };
 
-var VerifiedEmailIcon$1 = themeComponent$1(VerifiedEmailIcon, "Icons", fallbackValues$3, "info");
+var VerifiedEmailIcon$1 = themeComponent(VerifiedEmailIcon, "Icons", fallbackValues$2, "info");
 
 var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13182,7 +13205,7 @@ var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
   })));
 };
 
-var PaymentMethodIcon$1 = themeComponent$1(PaymentMethodIcon, "Icons", fallbackValues$3, "info");
+var PaymentMethodIcon$1 = themeComponent(PaymentMethodIcon, "Icons", fallbackValues$2, "info");
 
 var AccountsIconSmall = function AccountsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13221,7 +13244,7 @@ var AccountsIconSmall = function AccountsIconSmall(_ref) {
   }))))))));
 };
 
-var AccountsIconSmall$1 = themeComponent$1(AccountsIconSmall, "Icons", fallbackValues$3, "primary");
+var AccountsIconSmall$1 = themeComponent(AccountsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13272,7 +13295,7 @@ var PaymentsIconSmall = function PaymentsIconSmall(_ref) {
   }))))))));
 };
 
-var PaymentsIconSmall$1 = themeComponent$1(PaymentsIconSmall, "Icons", fallbackValues$3, "primary");
+var PaymentsIconSmall$1 = themeComponent(PaymentsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13336,7 +13359,7 @@ var PaymentMethodAddIcon = function PaymentMethodAddIcon(_ref) {
   })))))));
 };
 
-var PaymentMethodAddIcon$1 = themeComponent$1(PaymentMethodAddIcon, "Icons", fallbackValues$3, "info");
+var PaymentMethodAddIcon$1 = themeComponent(PaymentMethodAddIcon, "Icons", fallbackValues$2, "info");
 
 var ProfileIconSmall = function ProfileIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13365,7 +13388,7 @@ var ProfileIconSmall = function ProfileIconSmall(_ref) {
   })))));
 };
 
-var ProfileIconSmall$1 = themeComponent$1(ProfileIconSmall, "Icons", fallbackValues$3, "primary");
+var ProfileIconSmall$1 = themeComponent(ProfileIconSmall, "Icons", fallbackValues$2, "primary");
 
 var SettingsIconSmall = function SettingsIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13416,7 +13439,7 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
   }))))))));
 };
 
-var SettingsIconSmall$1 = themeComponent$1(SettingsIconSmall, "Icons", fallbackValues$3, "primary");
+var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var WalletIconSmall = function WalletIconSmall(_ref) {
   var themeValues = _ref.themeValues,
@@ -13457,7 +13480,7 @@ var WalletIconSmall = function WalletIconSmall(_ref) {
   })));
 };
 
-var WalletIconSmall$1 = themeComponent$1(WalletIconSmall, "Icons", fallbackValues$3, "primary");
+var WalletIconSmall$1 = themeComponent(WalletIconSmall, "Icons", fallbackValues$2, "primary");
 
 var ChevronIcon = function ChevronIcon(_ref) {
   var themeValues = _ref.themeValues,
@@ -13499,7 +13522,7 @@ var ChevronIcon = function ChevronIcon(_ref) {
   }))));
 };
 
-var ChevronIcon$1 = themeComponent$1(ChevronIcon, "Icons", fallbackValues$3, "secondary");
+var ChevronIcon$1 = themeComponent(ChevronIcon, "Icons", fallbackValues$2, "secondary");
 
 var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -13568,7 +13591,7 @@ var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
   })))))));
 };
 
-var PropertiesAddIcon$1 = themeComponent$1(PropertiesAddIcon, "Icons", fallbackValues$3, "info");
+var PropertiesAddIcon$1 = themeComponent(PropertiesAddIcon, "Icons", fallbackValues$2, "info");
 
 var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -13595,7 +13618,7 @@ var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
   })));
 };
 
-var PropertiesIconSmall$1 = themeComponent$1(PropertiesIconSmall, "Icons", fallbackValues$3, "primary");
+var PropertiesIconSmall$1 = themeComponent(PropertiesIconSmall, "Icons", fallbackValues$2, "primary");
 
 var AccountNumberImage = function AccountNumberImage() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -13784,16 +13807,16 @@ var CheckmarkIcon = function CheckmarkIcon() {
     transform: "translate(672.000000, 64.000000)"
   }, /*#__PURE__*/React.createElement("circle", {
     id: "Oval-2",
-    stroke: MATISSE_BLUE,
+    stroke: SEA_GREEN,
     strokeWidth: "2",
-    fill: INFO_BLUE,
+    fill: HINT_GREEN,
     cx: "48",
     cy: "48",
     r: "48"
   }), /*#__PURE__*/React.createElement("g", {
     id: "Group-2",
     transform: "translate(20.800000, 28.400000)",
-    fill: MATISSE_BLUE
+    fill: SEA_GREEN
   }, /*#__PURE__*/React.createElement("polygon", {
     id: "Rectangle-2",
     transform: "translate(12.800000, 30.000000) rotate(-45.000000) translate(-12.800000, -30.000000) ",
@@ -14087,7 +14110,9 @@ var TimeoutImage = function TimeoutImage() {
   })))));
 };
 
-var AutopayOnIcon = function AutopayOnIcon() {
+var AutopayOnIcon = function AutopayOnIcon(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? SEA_GREEN : _ref$color;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
@@ -14100,7 +14125,7 @@ var AutopayOnIcon = function AutopayOnIcon() {
     strokeWidth: "1"
   }, /*#__PURE__*/React.createElement("path", {
     className: "autopayIcon",
-    fill: SEA_GREEN,
+    fill: color,
     fillRule: "nonzero",
     d: "M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
   })));
@@ -14498,7 +14523,7 @@ var WalletIcon = function WalletIcon(_ref) {
   }))));
 };
 
-var WalletIcon$1 = themeComponent$1(WalletIcon, "Icons", fallbackValues$3, "info");
+var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$2, "info");
 
 var AchReturnIcon = function AchReturnIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -14731,7 +14756,29 @@ var FailedIcon = function FailedIcon() {
   }))));
 };
 
-var PendingIcon = function PendingIcon() {
+var PencilIcon = function PencilIcon(_ref) {
+  var _ref$ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref$ariaLabel === void 0 ? "Edit" : _ref$ariaLabel,
+      themeValues = _ref.themeValues;
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-label": ariaLabel,
+    width: "24px",
+    height: "24px",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19.74 6.84a.885.885 0 0 1 0 1.253l-1.626 1.626-3.333-3.333 1.626-1.626a.885.885 0 0 1 1.253 0l2.08 2.08ZM4 20.5v-3.333l9.83-9.83 3.333 3.333-9.83 9.83H4Z",
+    fill: themeValues.subIconColor
+  }));
+};
+
+var PencilIcon$1 = themeComponent(PencilIcon, "Icons", fallbackValues$2, "info");
+
+var PendingIcon = function PendingIcon(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? STORM_GREY : _ref$fill;
   return /*#__PURE__*/React.createElement("svg", {
     width: "32px",
     height: "32px",
@@ -14748,7 +14795,7 @@ var PendingIcon = function PendingIcon() {
   }, /*#__PURE__*/React.createElement("g", {
     id: "Icons",
     transform: "translate(-64.000000, -448.000000)",
-    fill: "#6D717E"
+    fill: fill
   }, /*#__PURE__*/React.createElement("path", {
     d: "M80,480 C88.836556,480 96,472.836556 96,464 C96,455.163444 88.836556,448 80,448 C71.163444,448 64,455.163444 64,464 C64,472.836556 71.163444,480 80,480 Z M87,466 C88.1045695,466 89,465.104569 89,464 C89,462.895431 88.1045695,462 87,462 C85.8954305,462 85,462.895431 85,464 C85,465.104569 85.8954305,466 87,466 Z M80,462 C81.1045695,462 82,462.895431 82,464 C82,465.104569 81.1045695,466 80,466 C78.8954305,466 78,465.104569 78,464 C78,462.895431 78.8954305,462 80,462 Z M73,462 C74.1045695,462 75,462.895431 75,464 C75,465.104569 74.1045695,466 73,466 C71.8954305,466 71,465.104569 71,464 C71,462.895431 71.8954305,462 73,462 Z",
     id: "status-icon---pending"
@@ -14939,7 +14986,7 @@ var CarrotIcon = function CarrotIcon(_ref) {
   }))))))));
 };
 
-var CarrotIcon$1 = themeComponent$1(CarrotIcon, "Icons", fallbackValues$3, "darkMode");
+var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$2, "darkMode");
 
 var ProfileIcon = function ProfileIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -14977,7 +15024,7 @@ var ProfileIcon = function ProfileIcon(_ref) {
   }))));
 };
 
-var ProfileIcon$1 = themeComponent$1(ProfileIcon, "Icons", fallbackValues$3, "info");
+var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$2, "info");
 
 var GenericCardLarge = function GenericCardLarge() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -15038,7 +15085,7 @@ var EmptyCartIcon = function EmptyCartIcon(_ref) {
   })));
 };
 
-var EmptyCartIcon$1 = themeComponent$1(EmptyCartIcon, "Icons", fallbackValues$3, "info");
+var EmptyCartIcon$1 = themeComponent(EmptyCartIcon, "Icons", fallbackValues$2, "info");
 
 var ShoppingCartIcon = function ShoppingCartIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -15110,7 +15157,7 @@ var TrashIcon = function TrashIcon(_ref) {
   })));
 };
 
-var TrashIcon$1 = themeComponent$1(TrashIcon, "Icons", fallbackValues$3, "primary");
+var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$2, "primary");
 
 var NoCustomerResultsIcon = function NoCustomerResultsIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -15703,7 +15750,7 @@ var WalletBannerIcon = function WalletBannerIcon(_ref) {
   }));
 };
 
-var WalletBannerIcon$1 = themeComponent$1(WalletBannerIcon, "Icons", fallbackValues$3, "primary");
+var WalletBannerIcon$1 = themeComponent(WalletBannerIcon, "Icons", fallbackValues$2, "primary");
 
 var StandardCheckoutImage = function StandardCheckoutImage() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -16263,7 +16310,7 @@ var RevenueManagementImage = function RevenueManagementImage() {
     fill: "#15749D"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M132.245 62.7452V65.8824L140.19 70.4222C140.685 70.7055 141.31 70.6219 141.713 70.2182L152.324 59.6079H148.559L141.2 67.5796C141.1 67.688 140.939 67.7129 140.811 67.6398L132.245 62.7452Z",
-    fill: "#3B5BDB"
+    fill: "#15749D"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M145.422 58.353C145.422 57.66 145.983 57.0981 146.677 57.0981H156.716C157.409 57.0981 157.971 57.66 157.971 58.353C157.971 59.0461 157.409 59.6079 156.716 59.6079H146.677C145.983 59.6079 145.422 59.0461 145.422 58.353Z",
     fill: "#15749D"
@@ -16476,6 +16523,705 @@ var RevenueManagementImage = function RevenueManagementImage() {
   }))));
 };
 
+var KioskImage = function KioskImage() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: 191,
+    height: 96,
+    viewBox: "0 0 191 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.4433 28.1096C12.4164 28.11 12.3894 28.1102 12.3624 28.1102C9.63896 28.1102 7.43115 25.9085 7.43115 23.1926C7.43115 20.4766 9.63896 18.2749 12.3624 18.2749C13.4748 18.2749 14.5012 18.6422 15.3263 19.2619C16.1831 16.4509 18.8028 14.4053 21.9017 14.4053C25.4863 14.4053 28.4299 17.1426 28.7452 20.6355C29.4629 20.0662 30.3716 19.726 31.3599 19.726C33.6816 19.726 35.5636 21.6029 35.5636 23.9181C35.5636 26.2334 33.6816 28.1102 31.3599 28.1102C31.3058 28.1102 31.2519 28.1092 31.1983 28.1072V28.1105H12.4433V28.1096Z",
+    fill: "#3B5BDB",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.077 59.7212C17.0639 59.7214 17.0507 59.7215 17.0375 59.7215C15.7078 59.7215 14.6299 58.6466 14.6299 57.3205C14.6299 55.9945 15.7078 54.9196 17.0375 54.9196C17.5806 54.9196 18.0817 55.0989 18.4845 55.4014C18.9029 54.029 20.1819 53.0303 21.6949 53.0303C23.4451 53.0303 24.8824 54.3669 25.0362 56.0724C25.3866 55.7944 25.8302 55.6283 26.3128 55.6283C27.4463 55.6283 28.3652 56.5447 28.3652 57.6751C28.3652 58.8054 27.4463 59.7218 26.3128 59.7218C26.2864 59.7218 26.26 59.7213 26.2339 59.7203V59.7217H17.077V59.7212Z",
+    fill: "#3B5BDB",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M51.8554 45.6714C51.8755 45.6718 51.8958 45.6719 51.916 45.6719C53.9561 45.6719 55.6099 43.9769 55.6099 41.886C55.6099 39.7952 53.9561 38.1002 51.916 38.1002C51.0827 38.1002 50.3139 38.383 49.6959 38.86C49.0541 36.6959 47.0917 35.1211 44.7705 35.1211C42.0852 35.1211 39.8802 37.2286 39.6442 39.9179C39.1066 39.4796 38.4259 39.2177 37.6855 39.2177C35.9465 39.2177 34.5367 40.6626 34.5367 42.445C34.5367 44.2274 35.9465 45.6723 37.6855 45.6723C37.7261 45.6723 37.7665 45.6715 37.8066 45.67V45.6721H51.8554V45.6714Z",
+    fill: "#3B5BDB",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M150.742 16.4655C150.66 16.4725 150.577 16.476 150.493 16.476C148.894 16.476 147.597 15.183 147.597 13.588C147.597 11.993 148.894 10.7 150.493 10.7C150.688 10.7 150.878 10.7192 151.062 10.7558C151.584 8.82245 153.354 7.39941 155.457 7.39941C157.417 7.39941 159.087 8.63418 159.728 10.366C159.937 10.263 160.173 10.2052 160.422 10.2052C161.008 10.2052 161.518 10.5242 161.789 10.9973C162.175 10.807 162.61 10.7 163.07 10.7C164.669 10.7 165.966 11.993 165.966 13.588C165.966 15.183 164.669 16.476 163.07 16.476C163.042 16.476 163.015 16.4756 162.987 16.4748V16.476H150.742V16.4655Z",
+    fill: "#3B5BDB",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M115.317 86.6337C115.317 88.8967 104.441 90.7313 91.0246 90.7313C77.6081 90.7313 66.7319 88.8967 66.7319 86.6337C66.7319 84.3707 77.6081 82.5361 91.0246 82.5361C104.441 82.5361 115.317 84.3707 115.317 86.6337Z",
+    fill: "#3B5BDB",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M67.656 5.85669C66.0341 5.85669 64.3904 5.64884 64.3904 8.59922V75.4381C64.3904 78.3885 65.9995 78.4389 67.6214 78.4389H115.307C116.929 78.4389 118.244 78.3885 118.244 75.4381L118.209 8.85746C118.209 5.90708 116.271 5.85669 114.649 5.85669H67.656Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M118.209 8.85746C118.209 5.90708 116.271 5.85669 114.649 5.85669H67.656C67.5556 5.85669 67.455 5.85589 67.3548 5.85509C65.8368 5.84305 64.3904 5.83158 64.3904 8.59922V75.4381C64.3904 78.3885 65.9995 78.4389 67.6214 78.4389H115.307C116.929 78.4389 118.244 78.3885 118.244 75.4381L118.209 8.85746ZM115.903 75.4381L115.868 8.85746C115.868 8.55226 115.836 8.36846 115.811 8.27076C115.764 8.25927 115.696 8.24597 115.602 8.23432C115.354 8.20357 115.063 8.19815 114.649 8.19815H67.656C67.5462 8.19815 67.4378 8.19729 67.3401 8.19651L67.3335 8.19646C67.2309 8.19565 67.1397 8.19495 67.051 8.19498C66.9336 8.19503 66.8349 8.19644 66.7493 8.19961C66.7392 8.30204 66.7318 8.43357 66.7318 8.59922V75.4381C66.7318 75.7386 66.7553 75.9409 66.7793 76.0687C66.9759 76.092 67.2256 76.0974 67.6214 76.0974H115.307C115.552 76.0974 115.729 76.0952 115.866 76.0889C115.886 75.9395 115.903 75.7279 115.903 75.4381Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M70.8725 12.8778C70.8727 12.5547 71.1347 12.293 71.4578 12.293H105.366C105.689 12.293 105.951 12.555 105.951 12.8783V63.8052C105.951 64.1285 105.689 64.3905 105.366 64.3905H71.4152C71.0917 64.3905 70.8296 64.1282 70.8298 63.8047L70.8725 12.8778Z",
+    fill: "#EBEFFB"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 162.573,
+    y: 70.0283,
+    width: 12.5769,
+    height: 2.64072,
+    rx: 1.32036,
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M117.073 70.2441H157.463C158.11 70.2441 158.634 70.7683 158.634 71.4149V71.4149C158.634 72.0614 158.11 72.5856 157.463 72.5856H117.073V70.2441Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M28.6829 71.4149C28.6829 70.7683 29.207 70.2441 29.8536 70.2441H66.1463V72.5856H29.8536C29.207 72.5856 28.6829 72.0614 28.6829 71.4149V71.4149Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 17.4429,
+    y: 70.0283,
+    width: 8.10877,
+    height: 2.64072,
+    rx: 1.32036,
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 93.0732,
+    y: 70.2441,
+    width: 8.10877,
+    height: 2.64072,
+    rx: 1.32036,
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 112.689,
+    y: 56.1953,
+    width: 8.10877,
+    height: 2.64072,
+    rx: 1.32036,
+    transform: "rotate(90 112.689 56.1953)",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 104.781,
+    y: 70.2441,
+    width: 8.10877,
+    height: 2.64072,
+    rx: 1.32036,
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M96.4624 31.5838C95.8425 31.5838 95.2796 32.0356 95.1249 32.7055C95.0174 33.1711 94.5519 33.4615 94.0853 33.3542C93.6187 33.2469 93.3276 32.7825 93.4352 32.3169C93.7555 30.9299 94.9667 29.8535 96.4624 29.8535C97.9582 29.8535 99.1694 30.9299 99.4897 32.3169C99.5972 32.7825 99.3062 33.2469 98.8396 33.3542C98.3729 33.4615 97.9075 33.1711 97.8 32.7055C97.6452 32.0356 97.0824 31.5838 96.4624 31.5838Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M80.3179 31.5838C79.6979 31.5838 79.1351 32.0356 78.9804 32.7055C78.8728 33.1711 78.4074 33.4615 77.9408 33.3542C77.4742 33.2469 77.1831 32.7825 77.2907 32.3169C77.611 30.9299 78.8221 29.8535 80.3179 29.8535C81.8137 29.8535 83.0248 30.9299 83.3452 32.3169C83.4527 32.7825 83.1616 33.2469 82.695 33.3542C82.2284 33.4615 81.763 33.1711 81.6554 32.7055C81.5007 32.0356 80.9379 31.5838 80.3179 31.5838Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M82.8702 42.6553C83.349 42.6553 83.7372 43.0426 83.7372 43.5204C83.7372 44.2447 84.3256 44.8319 85.0514 44.8319H91.7293C92.4551 44.8319 93.0435 44.2447 93.0435 43.5204C93.0435 43.0426 93.4317 42.6553 93.9105 42.6553C94.3894 42.6553 94.7775 43.0426 94.7775 43.5204C94.7775 45.2003 93.4128 46.5622 91.7293 46.5622H85.0514C83.3679 46.5622 82.0032 45.2003 82.0032 43.5204C82.0032 43.0426 82.3914 42.6553 82.8702 42.6553Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter0_d_4997_39198)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M118.244 20.1895H151.308C153.794 20.1895 155.809 22.2045 155.809 24.6903V24.9302C155.809 27.416 153.794 29.4311 151.308 29.4311H118.244V20.1895Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 144.722,
+    y: 23.8203,
+    width: 7.44683,
+    height: 1.98054,
+    rx: 0.990269,
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 137.606,
+    y: 23.8203,
+    width: 4.4681,
+    height: 1.98054,
+    rx: 0.990269,
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 124.367,
+    y: 23.8203,
+    width: 10.5911,
+    height: 1.98054,
+    rx: 0.990269,
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M118.244 23.8203H120.729C121.276 23.8203 121.719 24.2637 121.719 24.8106V24.8106C121.719 25.3575 121.276 25.8009 120.729 25.8009H118.244V23.8203Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter1_d_4997_39198)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: 125.836,
+    y: 28.1113,
+    width: 53.2862,
+    height: 9.2416,
+    rx: 4.5008,
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 164.229,
+    y: 31.7422,
+    width: 11.253,
+    height: 1.98054,
+    rx: 0.990269,
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 147.68,
+    y: 31.7422,
+    width: 13.9008,
+    height: 1.98054,
+    rx: 0.990269,
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 140.233,
+    y: 31.7422,
+    width: 4.79907,
+    height: 1.98054,
+    rx: 0.990269,
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 129.477,
+    y: 31.7422,
+    width: 8.10877,
+    height: 1.98054,
+    rx: 0.990269,
+    fill: "#959CA8"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M118.244 57.6594V60.7877L126.495 65.2624C127.195 65.6421 128.062 65.5138 128.622 64.9478L139.261 54.1865H135.62L127.589 62.5156C127.446 62.6637 127.22 62.6953 127.042 62.5919L118.244 57.6594Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M131.708 52.8663C131.708 52.137 132.3 51.5459 133.031 51.5459H143.954C144.685 51.5459 145.277 52.137 145.277 52.8663V52.8663C145.277 53.5955 144.685 54.1866 143.954 54.1866H133.031C132.3 54.1866 131.708 53.5955 131.708 52.8663V52.8663Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M83.3283 63.4473C84.1249 63.5441 84.692 64.267 84.595 65.0618C84.5327 65.5717 84.5006 66.0914 84.5006 66.6193C84.5006 68.5554 84.9326 70.3868 85.7044 72.0265C86.0456 72.7512 85.7333 73.6147 85.007 73.9551C84.2807 74.2955 83.4154 73.984 83.0742 73.2592C82.1247 71.2419 81.5947 68.9903 81.5947 66.6193C81.5947 65.974 81.634 65.3372 81.7104 64.7112C81.8074 63.9164 82.5318 63.3505 83.3283 63.4473Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M64.683 55.0245V58.244L63.1895 58.9406C69.4503 61.6998 83.3787 67.841 83.3787 67.841V70.8672L60.092 60.5667C58.8353 60.0108 58.7888 58.1134 60.0167 57.4871L64.683 55.0245Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter2_d_4997_39198)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: 128.195,
+    y: 30.5869,
+    width: 18.5343,
+    height: 18.4832,
+    rx: 8.439,
+    fill: "#3B5BDB"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M138.41 45.0735V44.0862C139.872 43.8932 140.787 43.0549 140.787 41.8526C140.787 40.6557 140.19 39.7843 138.75 39.4369L137.474 39.1225C136.614 38.8964 136.362 38.6647 136.362 38.2015C136.362 37.6223 136.899 37.2252 137.77 37.2252C138.613 37.2252 138.93 37.6554 139.029 38.3614L140.644 38.3338C140.661 37.1922 139.823 36.2435 138.443 36.0009V34.9033H137.058V35.9953C135.645 36.2104 134.637 37.0874 134.648 38.389C134.665 39.6134 135.442 40.3248 136.652 40.573L137.95 40.8543C138.722 41.0308 139.089 41.2735 139.089 41.8636C139.089 42.4317 138.525 42.8563 137.737 42.8563C136.861 42.8563 136.247 42.4703 136.078 41.7423L134.413 41.7753C134.561 43.1707 135.53 43.9208 137.03 44.0918V45.0735H138.41Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_4997_39198",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: 134,
+    y: 34,
+    width: 7,
+    height: 12
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M138.41 45.0735V44.0862C139.872 43.8932 140.787 43.0549 140.787 41.8526C140.787 40.6557 140.19 39.7843 138.75 39.4369L137.474 39.1225C136.614 38.8964 136.362 38.6647 136.362 38.2015C136.362 37.6223 136.899 37.2252 137.77 37.2252C138.613 37.2252 138.93 37.6554 139.029 38.3614L140.644 38.3338C140.661 37.1922 139.823 36.2435 138.443 36.0009V34.9033H137.058V35.9953C135.645 36.2104 134.637 37.0874 134.648 38.389C134.665 39.6134 135.442 40.3248 136.652 40.573L137.95 40.8543C138.722 41.0308 139.089 41.2735 139.089 41.8636C139.089 42.4317 138.525 42.8563 137.737 42.8563C136.861 42.8563 136.247 42.4703 136.078 41.7423L134.413 41.7753C134.561 43.1707 135.53 43.9208 137.03 44.0918V45.0735H138.41Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_4997_39198)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: 129.951,
+    y: 32.2012,
+    width: 15.2974,
+    height: 15.2552,
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M73.1709 76.0977H108.878V86.0489C108.878 86.6955 108.354 87.2196 107.707 87.2196H74.3416C73.6951 87.2196 73.1709 86.6955 73.1709 86.0489V76.0977Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M106.537 78.4391H75.5124V84.8781H106.537V78.4391ZM73.1709 76.0977V86.0489C73.1709 86.6955 73.6951 87.2196 74.3416 87.2196H107.707C108.354 87.2196 108.878 86.6955 108.878 86.0489V76.0977H73.1709Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "filter0_d_4997_39198",
+    x: 107.093,
+    y: 9.03814,
+    width: 59.8678,
+    height: 31.5438,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 5.57566
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4997_39198"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4997_39198",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("filter", {
+    id: "filter1_d_4997_39198",
+    x: 114.685,
+    y: 16.96,
+    width: 75.5888,
+    height: 31.5438,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 5.57566
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4997_39198"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4997_39198",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("filter", {
+    id: "filter2_d_4997_39198",
+    x: 113.195,
+    y: 15.5869,
+    width: 48.5344,
+    height: 48.4834,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 7.5
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0.0823529 0 0 0 0 0.454902 0 0 0 0 0.615686 0 0 0 0.2 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4997_39198"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4997_39198",
+    result: "shape"
+  }))));
+};
+
+var PointOfSaleImage = function PointOfSaleImage() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: 180,
+    height: 96,
+    viewBox: "0 0 180 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M142.706 17.5583C140.253 17.3968 138.314 15.3563 138.314 12.8627C138.314 10.2637 140.421 8.15681 143.02 8.15681C143.913 8.15681 144.749 8.40592 145.46 8.8385C146.262 5.91385 148.939 3.76465 152.118 3.76465C155.728 3.76465 158.691 6.53709 158.994 10.0693C159.633 9.65335 160.396 9.41171 161.216 9.41171C163.468 9.41171 165.294 11.2377 165.294 13.4901C165.294 15.7426 163.468 17.5686 161.216 17.5686C161.11 17.5686 161.005 17.5646 160.902 17.5567V17.5686H152.118H143.02H142.706V17.5583Z",
+    fill: "#15749D",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.3531 64.627C18.9669 64.627 17.8433 63.5034 17.8433 62.1172C17.8433 60.7311 18.9669 59.6074 20.3531 59.6074C20.7424 59.6074 21.1111 59.6961 21.44 59.8544C21.9913 58.9536 22.9843 58.3525 24.1178 58.3525C25.5139 58.3525 26.6971 59.2646 27.104 60.5253C27.4257 60.3406 27.7986 60.2349 28.1962 60.2349C29.4091 60.2349 30.3923 61.2181 30.3923 62.431C30.3923 63.6438 29.4091 64.627 28.1962 64.627H24.1178H20.3531Z",
+    fill: "#15749D",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M60.8237 8.78431H53.608H49.147V8.77384C49.0663 8.78078 48.9846 8.78431 48.9021 8.78431C47.3428 8.78431 46.0786 7.52018 46.0786 5.96078C46.0786 4.40139 47.3428 3.13726 48.9021 3.13726C49.067 3.13726 49.2286 3.15139 49.3857 3.1785C49.9123 1.34307 51.6033 0 53.608 0C55.4761 0 57.0719 1.1663 57.7068 2.81047C57.8935 2.7321 58.0986 2.68878 58.3139 2.68878C58.8648 2.68878 59.3494 2.97248 59.6292 3.40162C59.992 3.232 60.3968 3.13726 60.8237 3.13726C62.3831 3.13726 63.6472 4.40139 63.6472 5.96078C63.6472 7.43768 62.5133 8.64973 61.0686 8.77384V8.78431H60.8237Z",
+    fill: "#15749D",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M109.451 91.9212C109.451 94.1737 100.883 95.9996 90.3138 95.9996C79.7446 95.9996 71.1765 94.1737 71.1765 91.9212C71.1765 89.6687 79.7446 87.8428 90.3138 87.8428C100.883 87.8428 109.451 89.6687 109.451 91.9212Z",
+    fill: "#15749D",
+    fillOpacity: 0.3
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M49.8433 32H130.784V80.3137C130.784 81.0068 130.223 81.5686 129.53 81.5686H51.0982C50.4051 81.5686 49.8433 81.0068 49.8433 80.3137V32Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.9609 22.9333C47.9609 21.0102 49.5199 19.4512 51.4431 19.4512H129.185C131.108 19.4512 132.667 21.0102 132.667 22.9333V32.0002H47.9609V22.9333Z",
+    fill: "#E5E7EC"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M63.0196 25.7243C63.0196 26.4166 62.4577 26.9778 61.7647 26.9778C61.0716 26.9778 60.5098 26.4166 60.5098 25.7243C60.5098 25.0319 61.0716 24.4707 61.7647 24.4707C62.4577 24.4707 63.0196 25.0319 63.0196 25.7243Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M59.2549 25.7243C59.2549 26.4166 58.6931 26.9778 58 26.9778C57.307 26.9778 56.7451 26.4166 56.7451 25.7243C56.7451 25.0319 57.307 24.4707 58 24.4707C58.6931 24.4707 59.2549 25.0319 59.2549 25.7243Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M55.4903 25.7243C55.4903 26.4166 54.9284 26.9778 54.2354 26.9778C53.5423 26.9778 52.9805 26.4166 52.9805 25.7243C52.9805 25.0319 53.5423 24.4707 54.2354 24.4707C54.9284 24.4707 55.4903 25.0319 55.4903 25.7243Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M129.53 21.3335H51.0982C50.4051 21.3335 49.8433 21.8954 49.8433 22.5884V80.3139C49.8433 81.007 50.4051 81.5688 51.0982 81.5688H129.53C130.223 81.5688 130.784 81.007 130.784 80.3139V22.5884C130.784 21.8954 130.223 21.3335 129.53 21.3335ZM51.0982 19.4512C49.3655 19.4512 47.9609 20.8558 47.9609 22.5884V80.3139C47.9609 82.0466 49.3655 83.4512 51.0982 83.4512H129.53C131.262 83.4512 132.667 82.0466 132.667 80.3139V22.5884C132.667 20.8558 131.262 19.4512 129.53 19.4512H51.0982Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M157.765 75.9219C157.765 75.2288 158.326 74.667 159.02 74.667H169.686C170.379 74.667 170.941 75.2288 170.941 75.9219V75.9219C170.941 76.615 170.379 77.1768 169.686 77.1768H159.02C158.326 77.1768 157.765 76.615 157.765 75.9219V75.9219Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M132.667 74.667H153.252C153.95 74.667 154.517 75.2335 154.517 75.9323V75.9323C154.517 76.6311 153.95 77.1976 153.252 77.1976H132.667V74.667Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M30.3923 75.9219C30.3923 75.2288 30.9542 74.667 31.6472 74.667H47.961V77.1768H31.6472C30.9542 77.1768 30.3923 76.615 30.3923 75.9219V75.9219Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19.7256 75.9219C19.7256 75.2288 20.2874 74.667 20.9805 74.667H26.0001C26.6932 74.667 27.255 75.2288 27.255 75.9219V75.9219C27.255 76.615 26.6932 77.1768 26.0001 77.1768H20.9805C20.2874 77.1768 19.7256 76.615 19.7256 75.9219V75.9219Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M99.7255 48.4773C98.639 48.4773 97.8554 49.1092 97.6631 49.7849C97.5435 50.2053 97.1057 50.4491 96.6854 50.3295C96.265 50.2098 96.0211 49.7721 96.1408 49.3517C96.5631 47.8673 98.0747 46.8945 99.7255 46.8945C101.376 46.8945 102.888 47.8673 103.31 49.3517C103.43 49.7721 103.186 50.2098 102.766 50.3295C102.345 50.4491 101.907 50.2053 101.788 49.7849C101.596 49.1092 100.812 48.4773 99.7255 48.4773Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M82.1569 48.4773C81.0704 48.4773 80.2868 49.1092 80.0945 49.7849C79.9749 50.2053 79.5371 50.4491 79.1167 50.3295C78.6964 50.2098 78.4525 49.7721 78.5722 49.3517C78.9945 47.8673 80.5061 46.8945 82.1569 46.8945C83.8077 46.8945 85.3192 47.8673 85.7416 49.3517C85.8612 49.7721 85.6174 50.2098 85.197 50.3295C84.7766 50.4491 84.3389 50.2053 84.2192 49.7849C84.027 49.1092 83.2434 48.4773 82.1569 48.4773Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M83.098 59.4443C83.5351 59.4443 83.8894 59.7987 83.8894 60.2357C83.8894 61.1848 84.6588 61.9541 85.6078 61.9541H95.0196C95.9687 61.9541 96.738 61.1848 96.738 60.2357C96.738 59.7987 97.0923 59.4443 97.5294 59.4443C97.9665 59.4443 98.3208 59.7987 98.3208 60.2357C98.3208 62.0589 96.8428 63.5369 95.0196 63.5369H85.6078C83.7846 63.5369 82.3066 62.0589 82.3066 60.2357C82.3066 59.7987 82.661 59.4443 83.098 59.4443Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.9609 30.1172H132.667V31.9995H47.9609V30.1172Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter0_d_4979_37133)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M22.2354 35.1377C22.2354 34.4447 22.7972 33.8828 23.4903 33.8828H47.9608V42.0397H23.4903C22.7972 42.0397 22.2354 41.4778 22.2354 40.7848V35.1377Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M25.9323 37.6658C25.5914 37.5877 25.5079 37.5381 25.5079 37.4245V37.4175C25.5079 37.3252 25.5878 37.2577 25.7514 37.2577C25.9455 37.2577 26.1621 37.3239 26.3658 37.4561C26.4039 37.4808 26.4541 37.4725 26.4801 37.4349L26.724 37.0836C26.7499 37.0462 26.7429 36.9935 26.7064 36.9669C26.5557 36.8569 26.3858 36.779 26.1926 36.7335V36.4748C26.1926 36.4294 26.1565 36.3926 26.112 36.3926H25.6219C25.5774 36.3926 25.5413 36.4294 25.5413 36.4748V36.7055C25.0931 36.7813 24.8261 37.0836 24.8261 37.4813V37.4884C24.8261 37.9957 25.2261 38.1448 25.7444 38.2654C26.0783 38.347 26.1584 38.4003 26.1584 38.5066V38.5138C26.1584 38.6202 26.061 38.6839 25.8766 38.6839C25.6183 38.6839 25.3747 38.5976 25.1483 38.4329C25.1127 38.407 25.0633 38.4148 25.0353 38.449L24.7648 38.7786C24.7353 38.8145 24.7391 38.869 24.7752 38.8981C24.9925 39.0729 25.2567 39.1835 25.5413 39.2299V39.4543C25.5413 39.496 25.5745 39.5298 25.6154 39.5298H26.1186C26.1595 39.5298 26.1926 39.496 26.1926 39.4543V39.2163C26.5893 39.1204 26.8366 38.8483 26.8366 38.4463V38.4393C26.8366 37.9744 26.4888 37.7899 25.9323 37.6658Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M40.4314 37.9617C40.4314 37.4419 40.8528 37.0205 41.3726 37.0205H47.9608V38.9029H41.3726C40.8528 38.9029 40.4314 38.4815 40.4314 37.9617V37.9617Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M29.7646 37.9617C29.7646 37.4419 30.186 37.0205 30.7058 37.0205H36.9803C37.5001 37.0205 37.9215 37.4419 37.9215 37.9617V37.9617C37.9215 38.4815 37.5001 38.9029 36.9803 38.9029H30.7058C30.186 38.9029 29.7646 38.4815 29.7646 37.9617V37.9617Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter1_d_4979_37133)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.92163 42.0391C5.92163 41.346 6.48347 40.7842 7.17653 40.7842H55.4903C56.1833 40.7842 56.7452 41.346 56.7452 42.0391V47.6861C56.7452 48.3792 56.1833 48.941 55.4903 48.941H7.17653C6.48347 48.941 5.92163 48.3792 5.92163 47.6861V42.0391Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.61856 44.5671C9.27768 44.4891 9.19416 44.4395 9.19416 44.3259V44.3189C9.19416 44.2266 9.27411 44.1591 9.43766 44.1591C9.63178 44.1591 9.84835 44.2252 10.0521 44.3575C10.0902 44.3822 10.1403 44.3738 10.1664 44.3362L10.4103 43.9849C10.4362 43.9476 10.4292 43.8949 10.3926 43.8683C10.242 43.7583 10.0721 43.6804 9.87892 43.6349V43.3761C9.87892 43.3308 9.84282 43.2939 9.79826 43.2939H9.30818C9.26369 43.2939 9.22759 43.3308 9.22759 43.3761V43.6069C8.77941 43.6827 8.5124 43.9849 8.5124 44.3826V44.3898C8.5124 44.8971 8.91239 45.0461 9.43066 45.1667C9.76462 45.2483 9.84464 45.3016 9.84464 45.4079V45.4152C9.84464 45.5215 9.74727 45.5853 9.56287 45.5853C9.30461 45.5853 9.06097 45.499 8.8346 45.3342C8.799 45.3083 8.74961 45.3162 8.72163 45.3504L8.45105 45.6799C8.4216 45.7159 8.42538 45.7704 8.46148 45.7994C8.67882 45.9743 8.94296 46.0849 9.22759 46.1313V46.3556C9.22759 46.3974 9.26075 46.4312 9.30167 46.4312H9.80484C9.84576 46.4312 9.87892 46.3974 9.87892 46.3556V46.1176C10.2755 46.0218 10.5229 45.7496 10.5229 45.3477V45.3407C10.5229 44.8758 10.1751 44.6913 9.61856 44.5671Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M41.6863 44.8631C41.6863 44.3433 42.1077 43.9219 42.6275 43.9219H52.6667C53.1865 43.9219 53.6078 44.3433 53.6078 44.8631V44.8631C53.6078 45.3828 53.1865 45.8042 52.6667 45.8042H42.6275C42.1077 45.8042 41.6863 45.3828 41.6863 44.8631V44.8631Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M26 44.8631C26 44.3433 26.4214 43.9219 26.9412 43.9219H38.2353C38.7551 43.9219 39.1765 44.3433 39.1765 44.8631V44.8631C39.1765 45.3828 38.7551 45.8042 38.2353 45.8042H26.9412C26.4214 45.8042 26 45.3828 26 44.8631V44.8631Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.4509 44.8631C13.4509 44.3433 13.8723 43.9219 14.3921 43.9219H22.549C23.0688 43.9219 23.4901 44.3433 23.4901 44.8631V44.8631C23.4901 45.3828 23.0688 45.8042 22.549 45.8042H14.3921C13.8723 45.8042 13.4509 45.3828 13.4509 44.8631V44.8631Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter2_d_4979_37133)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M132.667 27.6074H167.804C168.497 27.6074 169.059 28.1693 169.059 28.8623V34.5094C169.059 35.2024 168.497 35.7643 167.804 35.7643H132.667V27.6074Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M157.765 31.6853C157.765 31.1655 158.186 30.7441 158.706 30.7441H164.98C165.5 30.7441 165.922 31.1655 165.922 31.6853V31.6853C165.922 32.2051 165.5 32.6265 164.98 32.6265H158.706C158.186 32.6265 157.765 32.2051 157.765 31.6853V31.6853Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M146.471 31.6853C146.471 31.1655 146.892 30.7441 147.412 30.7441H154.314C154.834 30.7441 155.255 31.1655 155.255 31.6853V31.6853C155.255 32.2051 154.834 32.6265 154.314 32.6265H147.412C146.892 32.6265 146.471 32.2051 146.471 31.6853V31.6853Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M132.667 30.7441H143.02C143.539 30.7441 143.961 31.1655 143.961 31.6853V31.6853C143.961 32.2051 143.539 32.6265 143.02 32.6265H132.667V30.7441Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter3_d_4979_37133)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M123.255 35.7647C123.255 35.0716 123.817 34.5098 124.51 34.5098H172.824C173.517 34.5098 174.078 35.0716 174.078 35.7647V41.4117C174.078 42.1048 173.517 42.6666 172.824 42.6666H124.51C123.817 42.6666 123.255 42.1048 123.255 41.4117V35.7647Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M126.952 38.2927C126.611 38.2147 126.527 38.1651 126.527 38.0515V38.0445C126.527 37.9522 126.607 37.8847 126.771 37.8847C126.965 37.8847 127.182 37.9508 127.385 38.0831C127.423 38.1078 127.474 38.0994 127.5 38.0618L127.744 37.7105C127.769 37.6731 127.762 37.6205 127.726 37.5939C127.575 37.4839 127.405 37.4059 127.212 37.3605V37.1017C127.212 37.0563 127.176 37.0195 127.132 37.0195H126.641C126.597 37.0195 126.561 37.0563 126.561 37.1017V37.3325C126.113 37.4083 125.846 37.7105 125.846 38.1082V38.1153C125.846 38.6227 126.246 38.7717 126.764 38.8923C127.098 38.9739 127.178 39.0272 127.178 39.1335V39.1407C127.178 39.2471 127.081 39.3109 126.896 39.3109C126.638 39.3109 126.394 39.2246 126.168 39.0598C126.132 39.0339 126.083 39.0418 126.055 39.076L125.784 39.4055C125.755 39.4415 125.759 39.496 125.795 39.525C126.012 39.6999 126.276 39.8105 126.561 39.8568V40.0812C126.561 40.123 126.594 40.1568 126.635 40.1568H127.138C127.179 40.1568 127.212 40.123 127.212 40.0812V39.8432C127.609 39.7474 127.856 39.4752 127.856 39.0732V39.0663C127.856 38.6014 127.508 38.4169 126.952 38.2927Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M159.647 38.5886C159.647 38.0688 160.069 37.6475 160.588 37.6475H170C170.52 37.6475 170.941 38.0688 170.941 38.5886V38.5886C170.941 39.1084 170.52 39.5298 170 39.5298H160.588C160.069 39.5298 159.647 39.1084 159.647 38.5886V38.5886Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M143.961 38.5896C143.961 38.0698 144.382 37.6484 144.902 37.6484H156.196C156.716 37.6484 157.137 38.0698 157.137 38.5896V38.5896C157.137 39.1094 156.716 39.5308 156.196 39.5308H144.902C144.382 39.5308 143.961 39.1094 143.961 38.5896V38.5896Z",
+    fill: "#959CA8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M130.784 38.5886C130.784 38.0688 131.206 37.6475 131.726 37.6475H140.51C141.03 37.6475 141.451 38.0688 141.451 38.5886V38.5886C141.451 39.1084 141.03 39.5298 140.51 39.5298H131.726C131.206 39.5298 130.784 39.1084 130.784 38.5886V38.5886Z",
+    fill: "#959CA8"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M86.2354 89.7247V83.4502H88.7452V91.2848C88.7452 91.8093 88.32 92.2345 87.7956 92.2345H82.4707C81.7777 92.2345 81.2158 91.6727 81.2158 90.9796C81.2158 90.2865 81.7777 89.7247 82.4707 89.7247H86.2354Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M91.8823 91.2848V83.4502H94.3921V89.7247H98.1568C98.8499 89.7247 99.4117 90.2865 99.4117 90.9796C99.4117 91.6727 98.8499 92.2345 98.1568 92.2345H92.832C92.3075 92.2345 91.8823 91.8093 91.8823 91.2848Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M132.667 62.7447V65.8819L140.611 70.4217C141.107 70.705 141.731 70.6214 142.135 70.2177L152.745 59.6074H148.98L141.311 67.5835C141.209 67.6894 141.048 67.7113 140.922 67.6364L132.667 62.7447Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M145.843 58.3526C145.843 57.6595 146.405 57.0977 147.098 57.0977H157.137C157.83 57.0977 158.392 57.6595 158.392 58.3526V58.3526C158.392 59.0456 157.83 59.6075 157.137 59.6075H147.098C146.405 59.6075 145.843 59.0456 145.843 58.3526V58.3526Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.9608 65.8814V62.7441L37.054 71.0541C36.1854 71.7159 36.518 73.0945 37.5928 73.2874L59.2549 77.1755V74.6657L40.4314 71.5285L47.9608 65.8814Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M62.3921 71.5283H63.647C64.3401 71.5283 64.902 72.0902 64.902 72.7832C64.902 73.4763 64.3401 74.0381 63.647 74.0381H63.0196C61.98 74.0381 61.1372 74.8809 61.1372 75.9205C61.1372 76.9601 61.98 77.8028 63.0196 77.8028H65.5294C66.2225 77.8028 66.7843 78.3647 66.7843 79.0577C66.7843 79.7508 66.2225 80.3126 65.5294 80.3126H62.3921C60.313 80.3126 58.6274 78.6271 58.6274 76.5479V75.293C58.6274 73.2138 60.313 71.5283 62.3921 71.5283Z",
+    fill: "#15749D"
+  }), /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter4_d_4979_37133)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M140.823 47.0591C140.823 44.6334 142.79 42.667 145.216 42.667H159.02C161.445 42.667 163.412 44.6334 163.412 47.0591V53.3337C163.412 54.0267 162.85 54.5886 162.157 54.5886H142.078C141.385 54.5886 140.823 54.0267 140.823 53.3337V47.0591Z",
+    fill: "#E5E7EC"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M159.02 43.9219H145.216C143.483 43.9219 142.078 45.3265 142.078 47.0591V53.3337H162.157V47.0591C162.157 45.3265 160.752 43.9219 159.02 43.9219ZM145.216 42.667C142.79 42.667 140.823 44.6334 140.823 47.0591V53.3337C140.823 54.0267 141.385 54.5886 142.078 54.5886H162.157C162.85 54.5886 163.412 54.0267 163.412 53.3337V47.0591C163.412 44.6334 161.445 42.667 159.02 42.667H145.216Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M144.588 47.0591C144.588 46.7126 144.869 46.4316 145.216 46.4316H159.02C159.366 46.4316 159.647 46.7126 159.647 47.0591V47.0591C159.647 47.4056 159.366 47.6865 159.02 47.6865H145.216C144.869 47.6865 144.588 47.4056 144.588 47.0591V47.0591Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M145.843 36.3926V47.6867H158.392V39.5299H161.53C161.876 39.5299 162.157 39.249 162.157 38.9024V36.3926C162.157 35.0065 161.033 33.8828 159.647 33.8828H148.353C146.967 33.8828 145.843 35.0065 145.843 36.3926Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M158.392 39.5299H161.53C161.876 39.5299 162.157 39.249 162.157 38.9024V36.3926C162.157 35.0065 161.033 33.8828 159.647 33.8828H148.353C146.967 33.8828 145.843 35.0065 145.843 36.3926V47.6867H158.392V39.5299ZM157.137 46.4318V38.275H160.902V36.3926C160.902 35.6996 160.34 35.1377 159.647 35.1377H148.353C147.66 35.1377 147.098 35.6996 147.098 36.3926V46.4318H157.137Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M157.137 36.3926C157.137 35.0065 158.261 33.8828 159.647 33.8828L-nan -nanL-nan -nanL159.647 33.8828C161.033 33.8828 162.157 35.0065 162.157 36.3926V38.9024C162.157 39.249 161.876 39.5299 161.529 39.5299H157.137V36.3926Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M160.902 38.275V36.3926C160.902 35.6996 160.34 35.1377 159.647 35.1377C158.954 35.1377 158.392 35.6996 158.392 36.3926V38.275H160.902ZM159.647 33.8828C158.261 33.8828 157.137 35.0065 157.137 36.3926V39.5299H161.529C161.876 39.5299 162.157 39.249 162.157 38.9024V36.3926C162.157 35.0065 161.033 33.8828 159.647 33.8828Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M148.98 37.9612C148.98 37.7879 149.121 37.6475 149.294 37.6475H154.941C155.115 37.6475 155.255 37.7879 155.255 37.9612V38.5886C155.255 38.7619 155.115 38.9024 154.941 38.9024H149.294C149.121 38.9024 148.98 38.7619 148.98 38.5886V37.9612Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M148.98 40.471C148.98 40.2977 149.121 40.1572 149.294 40.1572H153.686C153.86 40.1572 154 40.2977 154 40.471V41.0984C154 41.2717 153.86 41.4121 153.686 41.4121H149.294C149.121 41.4121 148.98 41.2717 148.98 41.0984V40.471Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M148.98 42.9807C148.98 42.8075 149.121 42.667 149.294 42.667H154.941C155.115 42.667 155.255 42.8075 155.255 42.9807V43.6082C155.255 43.7814 155.115 43.9219 154.941 43.9219H149.294C149.121 43.9219 148.98 43.7814 148.98 43.6082V42.9807Z",
+    fill: "#292A33"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "filter0_d_4979_37133",
+    x: 17.2354,
+    y: 28.8828,
+    width: 35.7256,
+    height: 18.1572,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 2.5
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4979_37133"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4979_37133",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("filter", {
+    id: "filter1_d_4979_37133",
+    x: 0.921631,
+    y: 35.7842,
+    width: 60.8235,
+    height: 18.1572,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 2.5
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4979_37133"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4979_37133",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("filter", {
+    id: "filter2_d_4979_37133",
+    x: 127.667,
+    y: 22.6074,
+    width: 46.3921,
+    height: 18.1572,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 2.5
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4979_37133"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4979_37133",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("filter", {
+    id: "filter3_d_4979_37133",
+    x: 118.255,
+    y: 29.5098,
+    width: 60.8235,
+    height: 18.1572,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 2.5
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4979_37133"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4979_37133",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("filter", {
+    id: "filter4_d_4979_37133",
+    x: 132.823,
+    y: 25.8828,
+    width: 38.5881,
+    height: 36.7061,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: 0,
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: 4
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4979_37133"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "effect1_dropShadow_4979_37133",
+    result: "shape"
+  }))));
+};
+
 var FindIconSmall = function FindIconSmall(_ref) {
   var themeValues = _ref.themeValues,
       _ref$iconIndex = _ref.iconIndex,
@@ -16516,7 +17262,7 @@ var FindIconSmall = function FindIconSmall(_ref) {
   })));
 };
 
-var FindIconSmall$1 = themeComponent$1(FindIconSmall, "Icons", fallbackValues$3, "primary");
+var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
 
 var HistoryIconSmall = function HistoryIconSmall(_ref) {
   var themeValues = _ref.themeValues;
@@ -16542,7 +17288,7 @@ var HistoryIconSmall = function HistoryIconSmall(_ref) {
   }));
 };
 
-var HistoryIconSmall$1 = themeComponent$1(HistoryIconSmall, "Icons", fallbackValues$3, "primary");
+var HistoryIconSmall$1 = themeComponent(HistoryIconSmall, "Icons", fallbackValues$2, "primary");
 
 var ChargebackIconSmall = function ChargebackIconSmall(_ref) {
   var _ref$color = _ref.color,
@@ -17277,7 +18023,7 @@ var ChargebackReversalIconMedium = function ChargebackReversalIconMedium(_ref) {
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
-var fallbackValues$4 = {
+var fallbackValues$3 = {
   color: color$2,
   hoverColor: hoverColor$1,
   activeColor: activeColor$1
@@ -17319,7 +18065,7 @@ var AddObligation = function AddObligation(_ref) {
   })))));
 };
 
-var AddObligation$1 = themeComponent$1(AddObligation, "AddObligation", fallbackValues$4);
+var AddObligation$1 = themeComponent(AddObligation, "AddObligation", fallbackValues$3);
 
 var IconChevron = function IconChevron(_ref) {
   var _ref$fill = _ref.fill,
@@ -17708,7 +18454,7 @@ var link = {
   error: "".concat(SCIENCE_BLUE),
   success: "".concat(SCIENCE_BLUE)
 };
-var fallbackValues$5 = {
+var fallbackValues$4 = {
   background: background,
   border: border$1,
   iconBackground: iconBackground,
@@ -17717,7 +18463,63 @@ var fallbackValues$5 = {
   link: link
 };
 
+/* 
+
+A utility function that can generate box-shadow values for components
+Takes a string representing an rgb color value and returns an object
+with values for standard, inset, and overlay shadows.
+
+The objects for standard and inset shadows contain versions approiate
+for base, hover, and active interaction states.
+
+*/
+
+/* 
+  Function to convert string representing rgb color to rgba value with provided opacity
+  ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
+
+*/
+var rgbToRgba = function rgbToRgba() {
+  var rgbValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+
+  if (typeof rgbValue !== "string" || typeof opacity !== "string" || rgbValue.charAt(0) === "#") {
+    return "";
+  }
+
+  return "".concat(rgbValue.slice(0, 3), "a").concat(rgbValue.slice(3, -1), ", ").concat(opacity).concat(rgbValue.slice(-1));
+};
+
+var generateShadows = function generateShadows() {
+  var baseColorRGB = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(41, 42, 51)";
+  var colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
+  var colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
+  var colorTwentyFive = rgbToRgba(baseColorRGB, "0.25") || "rgba(41, 42, 51, 0.25)";
+  var colorThirty = rgbToRgba(baseColorRGB, "0.3") || "rgba(41, 42, 51, 0.3)";
+  var blackTwentyFive = "rgba(0, 0, 0, 0.25)";
+  var standard = {
+    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 6px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
+    hover: "0px 1px 2px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(blackTwentyFive, ", 0px 6px 12px 0px ").concat(colorTen),
+    active: "0px 2px 8px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(colorThirty, ", 0px 6px 12px 0px ").concat(colorTwentyFive)
+  };
+  var inset = {
+    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
+    hover: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwentyFive, ", 0px 4px 8px 0px ").concat(colorTen),
+    active: "0px 1px 2px 2px ".concat(colorTwenty, ", 0px 3px 6px 0px ").concat(colorThirty, ", 0px 4px 8px 0px ").concat(colorTwenty)
+  };
+  var overlay = {
+    base: "0px 7px 32px 0px ".concat(colorTwenty, ", 0px 1px 4px 0px ").concat(colorTwenty, ", 0px 1px 8px -1px ").concat(colorThirty)
+  };
+  return {
+    standard: standard,
+    inset: inset,
+    overlay: overlay
+  };
+};
+
 var Alert = function Alert(_ref) {
+  var _generateShadows, _generateShadows$inse;
+
   var heading = _ref.heading,
       text = _ref.text,
       textOverride = _ref.textOverride,
@@ -17731,13 +18533,26 @@ var Alert = function Alert(_ref) {
       showQuitLink = _ref$showQuitLink === void 0 ? true : _ref$showQuitLink,
       themeValues = _ref.themeValues,
       extraStyles = _ref.extraStyles,
-      maxContentWidth = _ref.maxContentWidth;
+      maxContentWidth = _ref.maxContentWidth,
+      _ref$noBorder = _ref.noBorder,
+      noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder,
+      _ref$enableBoxShadow = _ref.enableBoxShadow,
+      enableBoxShadow = _ref$enableBoxShadow === void 0 ? false : _ref$enableBoxShadow,
+      _ref$enableSmallText = _ref.enableSmallText,
+      enableSmallText = _ref$enableSmallText === void 0 ? false : _ref$enableSmallText,
+      _ref$innerContentPadd = _ref.innerContentPadding,
+      innerContentPadding = _ref$innerContentPadd === void 0 ? "1rem" : _ref$innerContentPadd,
+      _ref$iconPadding = _ref.iconPadding,
+      iconPadding = _ref$iconPadding === void 0 ? "0 0 0 1rem" : _ref$iconPadding,
+      _ref$contentFullHeigh = _ref.contentFullHeight,
+      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh;
   var Icon = AlertIcons[variant];
+  var contentPadding = maxContentWidth ? "".concat(padding, " 1rem") : innerContentPadding;
   var content = /*#__PURE__*/React.createElement(Sidebar, {
     width: "24px",
     childGap: "0rem"
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0 1rem",
+    padding: iconPadding,
     minHeight: "100%"
   }, /*#__PURE__*/React.createElement(Cover, {
     minHeight: "100%",
@@ -17751,17 +18566,18 @@ var Alert = function Alert(_ref) {
   }, /*#__PURE__*/React.createElement(Sidebar, {
     sidebarOnRight: true,
     width: "24px",
-    childGap: "0rem"
+    childGap: "0rem",
+    fullHeight: contentFullHeight
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: maxContentWidth ? "".concat(padding, " 1rem") : "1rem"
+    padding: contentPadding
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
   }, textOverride ? textOverride : /*#__PURE__*/React.createElement(Stack, {
     fullHeight: true,
-    childGap: "0.25rem"
+    childGap: "0"
   }, /*#__PURE__*/React.createElement(Text$1, {
-    variant: "p",
+    variant: enableSmallText ? "pS" : "p",
     color: themeValues.text,
     weight: "600"
   }, heading), /*#__PURE__*/React.createElement(Text$1, {
@@ -17783,14 +18599,15 @@ var Alert = function Alert(_ref) {
     background: themeValues.background,
     borderRadius: "4px",
     borderColor: themeValues.border,
-    borderSize: "1px",
+    borderSize: noBorder ? "0px" : "1px",
+    boxShadow: enableBoxShadow ? (_generateShadows = generateShadows()) === null || _generateShadows === void 0 ? void 0 : (_generateShadows$inse = _generateShadows.inset) === null || _generateShadows$inse === void 0 ? void 0 : _generateShadows$inse.base : "",
     extraStyles: extraStyles
   }, maxContentWidth ? /*#__PURE__*/React.createElement(Center, {
     maxWidth: maxContentWidth
   }, content) : content);
 };
 
-var Alert$1 = themeComponent$1(Alert, "Alert", fallbackValues$5, "info");
+var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$4, "info");
 
 var TitleText = styled.h1.withConfig({
   displayName: "Titlestyled__TitleText",
@@ -17835,7 +18652,7 @@ var mobileFontSize = {
   small: "1.2142rem" // 17px
 
 };
-var fallbackValues$6 = {
+var fallbackValues$5 = {
   fontFamily: fontFamily$1,
   fontSize: fontSize$1
 };
@@ -17872,7 +18689,7 @@ var _excluded$i = ["themeValues", "weight", "color", "margin", "textAlign", "ext
 var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
 var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice$1;
-var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues$6;
+var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues$5;
 
 var Title = function Title(_ref) {
   var themeValues = _ref.themeValues,
@@ -17909,10 +18726,10 @@ var Title = function Title(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Title$1 = themeComponent$1(Title, "Title", fallbacks, "large");
+var Title$1 = themeComponent(Title, "Title", fallbacks, "large");
 
 var color$3 = "#292A33";
-var fallbackValues$7 = {
+var fallbackValues$6 = {
   color: color$3
 };
 
@@ -17931,7 +18748,7 @@ var AmountCallout = function AmountCallout(_ref) {
   }, amount));
 };
 
-var AmountCallout$1 = themeComponent$1(AmountCallout, "AmountCallout", fallbackValues$7);
+var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$6);
 
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -18750,7 +19567,7 @@ var curriedTint = /*#__PURE__*/curry
 var curriedTint$1 = curriedTint;
 
 var linkColor = MATISSE_BLUE;
-var fallbackValues$8 = {
+var fallbackValues$7 = {
   linkColor: linkColor
 };
 
@@ -18777,7 +19594,7 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
   }, props), children);
 };
 
-var BoxWithShadow$1 = themeComponent$1(BoxWithShadow, "BoxWithShadow", fallbackValues$8);
+var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$7);
 
 // import theme from "styled-theming";
 /*
@@ -18793,7 +19610,7 @@ var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
 var margin = "0.5rem";
 var hover = "text-decoration: none;";
-var fallbackValues$9 = {
+var fallbackValues$8 = {
   color: color$4,
   activeColor: activeColor$2,
   activeBreadcrumbColor: activeBreadcrumbColor,
@@ -18811,7 +19628,7 @@ var fontFamily$2 = {
 var hoverColor$2 = "#116285";
 var activeColor$3 = "#0E506D";
 var externalLinkColor = "#15749D";
-var fallbackValues$a = {
+var fallbackValues$9 = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
   activeColor: activeColor$3,
@@ -18886,7 +19703,7 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ariaLabel = _ref.ariaLabel,
       children = _ref.children;
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React.createElement(StyledExternalLink, {
     href: href,
     target: newTab ? "_blank" : "",
@@ -18978,7 +19795,7 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
+  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
   return /*#__PURE__*/React.createElement(StyledInternalLink, {
     to: to,
     color: color,
@@ -19001,7 +19818,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var _ref$breadcrumbsList = _ref.breadcrumbsList,
       breadcrumbsList = _ref$breadcrumbsList === void 0 ? [] : _ref$breadcrumbsList;
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$9, "Breadcrumb");
+  var themeValues = createThemeValues(themeContext, fallbackValues$8, "Breadcrumb");
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     as: "nav",
@@ -20682,7 +21499,7 @@ var fontSize$3 = {
   pXL: "1.5rem" // 24px
 
 };
-var fallbackValues$b = {
+var fallbackValues$a = {
   fontFamily: fontFamily$3,
   fontSize: fontSize$3
 };
@@ -20739,11 +21556,11 @@ var Paragraph = function Paragraph(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Paragraph$1 = themeComponent$1(Paragraph, "Paragraph", fallbackValues$b, "p");
+var Paragraph$1 = themeComponent(Paragraph, "Paragraph", fallbackValues$a, "p");
 
 var backgroundColor$1 = WHITE;
 var iconBackgroundColor = GRECIAN_GREY;
-var fallbackValues$c = {
+var fallbackValues$b = {
   backgroundColor: backgroundColor$1,
   iconBackgroundColor: iconBackgroundColor
 };
@@ -20886,7 +21703,7 @@ var CardRegistryCard = function CardRegistryCard(_ref2) {
   }))))));
 };
 
-var CardRegistryCard$1 = themeComponent$1(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$c);
+var CardRegistryCard$1 = themeComponent(withWindowSize(CardRegistryCard), "CardRegistryCard", fallbackValues$b);
 
 var cardRegistry = {
   accounts: function accounts(props) {
@@ -20957,7 +21774,7 @@ var checkedStyles = {
 var defaultStyles = {
   "default": "\n  background: ".concat(WHITE, "; \n  border: 1px solid ").concat(STORM_GREY, ";\n")
 };
-var fallbackValues$d = {
+var fallbackValues$c = {
   backgroundColor: backgroundColor$2,
   textFontSize: textFontSize,
   textFontWeight: textFontWeight,
@@ -20980,7 +21797,7 @@ var CheckboxContainer = styled.div.withConfig({
 var CheckboxLabelContainer = styled.label.withConfig({
   displayName: "Checkbox__CheckboxLabelContainer",
   componentId: "sc-36kqbv-1"
-})(["display:flex;align-items:center;"]);
+})(["display:flex;align-items:center;column-gap:1rem;"]);
 var CheckboxIcon = styled.svg.withConfig({
   displayName: "Checkbox__CheckboxIcon",
   componentId: "sc-36kqbv-2"
@@ -20999,7 +21816,7 @@ var HiddenCheckbox = styled.input.attrs({
 var StyledCheckbox = styled.div.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
-})(["display:inline-block;margin-right:16px;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
+})(["display:inline-block;width:24px;height:24px;border-radius:2px;transition:all 150ms;", "{visibility:", ";}", ";"], CheckboxIcon, function (_ref2) {
   var checked = _ref2.checked;
   return checked ? "visible" : "hidden";
 }, function (_ref3) {
@@ -21029,6 +21846,8 @@ var Checkbox = function Checkbox(_ref4) {
       hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
       _ref4$error = _ref4.error,
       error = _ref4$error === void 0 ? false : _ref4$error,
+      _ref4$checkboxMargin = _ref4.checkboxMargin,
+      checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles;
 
@@ -21057,7 +21876,7 @@ var Checkbox = function Checkbox(_ref4) {
     },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "outline: none; ".concat(extraStyles)
+    extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
   }, /*#__PURE__*/React.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React.createElement(HiddenCheckbox, {
@@ -21069,7 +21888,7 @@ var Checkbox = function Checkbox(_ref4) {
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
-    "aria-describedby": "".concat(name, "-error-message")
+    "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }), /*#__PURE__*/React.createElement(StyledCheckbox, {
     error: error,
     disabled: disabled,
@@ -21088,7 +21907,7 @@ var Checkbox = function Checkbox(_ref4) {
     checkColor: themeValues.checkColor
   }, /*#__PURE__*/React.createElement("polyline", {
     points: "20 6 9 17 4 12"
-  })))), /*#__PURE__*/React.createElement(Text$1, {
+  })))), title && /*#__PURE__*/React.createElement(Text$1, {
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
@@ -21096,7 +21915,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, title)));
 };
 
-var Checkbox$1 = themeComponent$1(Checkbox, "Checkbox", fallbackValues$d, "default");
+var Checkbox$1 = themeComponent(Checkbox, "Checkbox", fallbackValues$c, "default");
 
 var listBackgroundColor = {
   "default": "".concat(ATHENS_GREY),
@@ -21122,7 +21941,7 @@ var radioButtonInactive = {
   "default": "".concat(GHOST_GREY),
   disabled: "".concat(GHOST_GREY)
 };
-var fallbackValues$e = {
+var fallbackValues$d = {
   listBackgroundColor: listBackgroundColor,
   listItemColor: listItemColor,
   listItemBackgroundColor: listItemBackgroundColor,
@@ -21293,7 +22112,7 @@ var CheckboxList = function CheckboxList(_ref2) {
   })));
 };
 
-var CheckboxList$1 = themeComponent$1(CheckboxList, "CheckboxList", fallbackValues$e, "default");
+var CheckboxList$1 = themeComponent(CheckboxList, "CheckboxList", fallbackValues$d, "default");
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -22594,7 +23413,7 @@ exportTypedArrayMethod$1('at', function at(index) {
 
 var selectedColor = "".concat(MATISSE_BLUE);
 var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
-var fallbackValues$f = {
+var fallbackValues$e = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3
 };
@@ -22989,7 +23808,7 @@ var Dropdown = function Dropdown(_ref8) {
   }))) : /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
-var Dropdown$1 = themeComponent$1(Dropdown, "Dropdown", fallbackValues$f);
+var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
 
 var SelectContainer = styled.div.withConfig({
   displayName: "FormSelectstyled__SelectContainer",
@@ -23060,7 +23879,7 @@ var hoverFocusStyles = {
   "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
   disabled: "color: #6D717E;"
 };
-var fallbackValues$g = {
+var fallbackValues$f = {
   linkColor: linkColor$1,
   formBackgroundColor: formBackgroundColor,
   inputBackgroundColor: inputBackgroundColor,
@@ -23163,7 +23982,7 @@ var FormSelect = function FormSelect(_ref) {
   })));
 };
 
-var FormSelect$1 = themeComponent$1(FormSelect, "FormSelect", fallbackValues$g, "default");
+var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$f, "default");
 
 var options = [{
   text: "Afghanistan",
@@ -23980,7 +24799,7 @@ var mobileFontSize$1 = {
   extraSmall: "0.71428rem" // 10px
 
 };
-var fallbackValues$h = {
+var fallbackValues$g = {
   fontFamily: fontFamily$4,
   fontSize: fontSize$5
 };
@@ -24020,7 +24839,7 @@ var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "ext
 var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
 var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
-var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$h;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$g;
 
 var Detail = function Detail(_ref) {
   var themeValues = _ref.themeValues,
@@ -24057,11 +24876,11 @@ var Detail = function Detail(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Detail$1 = themeComponent$1(Detail, "Detail", fallbacks$1, "regular");
+var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
 var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$i = {
+var fallbackValues$h = {
   backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
@@ -24082,7 +24901,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent$1(DisplayBox, "DisplayBox", fallbackValues$i);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$h);
 
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
@@ -24473,7 +25292,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
 var hoverColor$4 = "#116285";
 var activeColor$4 = "#0E506D";
 var popoverTriggerColor = "#15749D";
-var fallbackValues$j = {
+var fallbackValues$i = {
   hoverColor: hoverColor$4,
   activeColor: activeColor$4,
   popoverTriggerColor: popoverTriggerColor
@@ -24631,7 +25450,7 @@ var Popover = function Popover(_ref) {
   })));
 };
 
-var Popover$1 = themeComponent$1(Popover, "Popover", fallbackValues$j);
+var Popover$1 = themeComponent(Popover, "Popover", fallbackValues$i);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -24749,7 +25568,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$k = {
+var fallbackValues$j = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -24971,7 +25790,7 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent$1(FormInput, "FormInput", fallbackValues$k, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$j, "default");
 
 var _excluded$q = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
@@ -25027,7 +25846,7 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent$1(withWindowSize(FormContainer), "FormContainer", fallbackValues$k, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$j, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -25051,7 +25870,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
   })));
 };
 
-var FormFooterPanel$1 = themeComponent$1(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$k, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$j, "default");
 
 var fontSize$7 = {
   "default": "1rem",
@@ -25065,7 +25884,7 @@ var color$7 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$l = {
+var fallbackValues$k = {
   fontSize: fontSize$7,
   padding: padding$1,
   color: color$7
@@ -25108,11 +25927,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent$1(FormattedAddress, "FormattedAddress", fallbackValues$l, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$k, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$m = {
+var fallbackValues$l = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -25152,11 +25971,11 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
   }, "Autopay Enabled")));
 };
 
-var FormattedBankAccount$1 = themeComponent$1(FormattedBankAccount, "FormattedBankAccount", fallbackValues$m);
+var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$l);
 
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
-var fallbackValues$n = {
+var fallbackValues$m = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
 };
@@ -25193,7 +26012,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent$1(FormattedCreditCard, "FormattedCreditCard", fallbackValues$n);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$m);
 
 var Hamburger = styled.button.withConfig({
   displayName: "HamburgerButton__Hamburger",
@@ -25275,7 +26094,7 @@ var fontSize$8 = {
   h5: "1.375rem",
   h6: "1.25rem"
 };
-var fallbackValues$o = {
+var fallbackValues$n = {
   fontFamily: fontFamily$5,
   fontSize: fontSize$8
 };
@@ -25317,7 +26136,7 @@ var Heading = function Heading(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Heading$1 = themeComponent$1(Heading, "Heading", fallbackValues$o, "h1");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
 
 var Image = styled.img.withConfig({
   displayName: "ImageBoxstyled__Image",
@@ -25444,7 +26263,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$p = {
+var fallbackValues$o = {
   fontWeight: fontWeight$4
 };
 
@@ -25472,7 +26291,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent$1(LabeledAmount, "LabeledAmount", fallbackValues$p, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$o, "default");
 
 var weightTitle = {
   "default": "600",
@@ -25482,7 +26301,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$q = {
+var fallbackValues$p = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -25491,7 +26310,9 @@ var LineItem = function LineItem(_ref) {
   var description = _ref.description,
       subDescription = _ref.subDescription,
       amount = _ref.amount,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$displayQuantity = _ref.displayQuantity,
+      displayQuantity = _ref$displayQuantity === void 0 ? null : _ref$displayQuantity;
   return /*#__PURE__*/React.createElement(Cluster, {
     nowrap: true,
     justify: "space-between",
@@ -25504,24 +26325,27 @@ var LineItem = function LineItem(_ref) {
   }, description), /*#__PURE__*/React.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: "400"
-  }, subDescription)), /*#__PURE__*/React.createElement(Paragraph$1, {
+  }, subDescription)), !!displayQuantity && /*#__PURE__*/React.createElement(Paragraph$1, {
+    variant: themeValues.paragraphVariant,
+    weight: themeValues.weightTitle
+  }, "x".concat(displayQuantity)), /*#__PURE__*/React.createElement(Paragraph$1, {
     variant: themeValues.paragraphVariant,
     weight: "600",
     extraStyles: "margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
   }, amount));
 };
 
-var LineItem$1 = themeComponent$1(LineItem, "LineItem", fallbackValues$q, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$p, "default");
 
 var color$8 = "#15749D";
-var fallbackValues$r = {
+var fallbackValues$q = {
   color: color$8
 };
 
 var SpinnerSvgAnimation = styled.svg.withConfig({
   displayName: "Spinner__SpinnerSvgAnimation",
   componentId: "sc-vhupl9-0"
-})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"], function (_ref) {
+})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", ""], function (_ref) {
   var size = _ref.size;
   return size;
 }, function (_ref2) {
@@ -25530,19 +26354,36 @@ var SpinnerSvgAnimation = styled.svg.withConfig({
 }, function (_ref3) {
   var color = _ref3.color;
   return color;
+}, function (_ref4) {
+  var centerSpinner = _ref4.centerSpinner;
+  return centerSpinner ? css(["margin:0;"]) : "";
 });
 var SpinnerContainer$2 = styled.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
   componentId: "sc-vhupl9-1"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;"]);
+})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
+  var centerSpinner = _ref5.centerSpinner,
+      size = _ref5.size;
+  return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
+});
+/*
+  `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
+  containers. Default is false to preserve legacy behavior for past uses.
+*/
 
-var Spinner$1 = function Spinner(_ref4) {
-  var _ref4$size = _ref4.size,
-      size = _ref4$size === void 0 ? "24" : _ref4$size,
-      themeValues = _ref4.themeValues;
-  return /*#__PURE__*/React.createElement(SpinnerContainer$2, null, /*#__PURE__*/React.createElement(SpinnerSvgAnimation, {
+var Spinner$1 = function Spinner(_ref6) {
+  var _ref6$size = _ref6.size,
+      size = _ref6$size === void 0 ? "24" : _ref6$size,
+      _ref6$centerSpinner = _ref6.centerSpinner,
+      centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
+      themeValues = _ref6.themeValues;
+  return /*#__PURE__*/React.createElement(SpinnerContainer$2, {
+    centerSpinner: centerSpinner,
+    size: size
+  }, /*#__PURE__*/React.createElement(SpinnerSvgAnimation, {
     size: size,
-    color: themeValues.color
+    color: themeValues.color,
+    centerSpinner: centerSpinner
   }, /*#__PURE__*/React.createElement("circle", {
     className: "path",
     cx: "50",
@@ -25553,7 +26394,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent$1(Spinner$1, "Spinner", fallbackValues$r);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$q);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React.createElement(Box, {
@@ -25819,7 +26660,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$s = {
+var fallbackValues$r = {
   color: color$9,
   height: height$1
 };
@@ -25928,12 +26769,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent$1(Placeholder, "Placeholder", fallbackValues$s, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$r, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$t = {
+var fallbackValues$s = {
   backgroundColor: backgroundColor$4
 };
 
@@ -25961,15 +26802,14 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent$1(ProcessingFee, "ProcessingFee", fallbackValues$t, "default");
-
-
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$s, "default");
 
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
+var backgroundColor$5 = MATISSE_BLUE;
+var borderColor$2 = GREY_CHATEAU;
+var fallbackValues$t = {
+  borderColor: borderColor$2,
+  backgroundColor: backgroundColor$5
+};
 
 var HiddenRadioInput = styled.input.withConfig({
   displayName: "RadioButtonWithLabel__HiddenRadioInput",
@@ -26033,7 +26873,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   }, /*#__PURE__*/React.createElement(Circle, null), labelText));
 };
 
-var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues);
+var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$t);
 
 var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
@@ -26059,6 +26899,8 @@ var RadioButton$1 = function RadioButton(_ref2) {
       name = _ref2.name,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$ariaDescribedBy = _ref2.ariaDescribedBy,
+      ariaDescribedBy = _ref2$ariaDescribedBy === void 0 ? "" : _ref2$ariaDescribedBy,
       themeValues = _ref2.themeValues;
   var buttonBorder = {
     onFocused: {
@@ -26110,6 +26952,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     "aria-label": name,
     disabled: disabled,
     onClick: toggleRadio,
+    "aria-describedby": ariaDescribedBy,
     tabIndex: "-1"
   }), /*#__PURE__*/React.createElement(Motion, {
     borderWidth: "1px",
@@ -26127,7 +26970,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent$1(RadioButton$1, "RadioButton", fallbackValues$u);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$u);
 
 var border$2 = {
   "default": "1px solid #caced8"
@@ -26209,16 +27052,16 @@ var SearchableSelect = function SearchableSelect(_ref) {
   }))));
 };
 
-var SearchableSelect$1 = themeComponent$1(SearchableSelect, "SearchableSelect", fallbackValues$v, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$v, "default");
 
-var borderColor$2 = {
+var borderColor$3 = {
   "default": "".concat(GREY_CHATEAU)
 };
 var borderSize = {
   "default": "1px"
 };
 var fallbackValues$w = {
-  borderColor: borderColor$2,
+  borderColor: borderColor$3,
   borderSize: borderSize
 };
 
@@ -26234,7 +27077,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent$1(SolidDivider, "SolidDivider", fallbackValues$w, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$w, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -36994,7 +37837,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent$1(ToggleSwitch, "ToggleSwitch", fallbackValues$x);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$x);
 
 var background$1 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -37039,12 +37882,12 @@ var TypeaheadInput = function TypeaheadInput(_ref) {
   }));
 };
 
-var backgroundColor$5 = WHITE;
+var backgroundColor$6 = WHITE;
 var imageBackgroundColor = INFO_BLUE;
 var headerBackgroundColor = STORM_GREY;
 var headerColor = WHITE;
 var fallbackValues$y = {
-  backgroundColor: backgroundColor$5,
+  backgroundColor: backgroundColor$6,
   imageBackgroundColor: imageBackgroundColor,
   headerBackgroundColor: headerBackgroundColor,
   headerColor: headerColor
@@ -37091,7 +37934,7 @@ var CardText = function CardText(_ref) {
     color: themeValues.textColor
   }, text))));
 };
-var CardText$1 = themeComponent$1(withWindowSize(CardText), "CardText", fallbackValues$z);
+var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$z);
 
 var CardHeader = function CardHeader(_ref) {
   var backgroundColor = _ref.backgroundColor,
@@ -37149,11 +37992,10 @@ var Card = function Card(_ref) {
     minWidth: width,
     extraStyles: extraStyles
   }, /*#__PURE__*/React.createElement(Cover, {
-    singleChild: true,
-    fillCenter: true
+    singleChild: true
   }, /*#__PURE__*/React.createElement(Stack, {
     fullHeight: true,
-    childGap: "0",
+    childGap: "1.5rem",
     bottomItem: numberOfChildren
   }, headerText && /*#__PURE__*/React.createElement(CardHeader, {
     headerText: headerText,
@@ -37163,7 +38005,10 @@ var Card = function Card(_ref) {
     borderRadius: borderRadius,
     padding: padding,
     as: headerAs
-  }), Image && !imgSrc && /*#__PURE__*/React.createElement(Box, {
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    childGap: "0"
+  }, Image && !imgSrc && /*#__PURE__*/React.createElement(Box, {
     minHeight: imgHeight,
     padding: "0",
     background: themeValues.imageBackgroundColor
@@ -37180,15 +38025,19 @@ var Card = function Card(_ref) {
     backgroundColor: themeValues.imageBackgroundColor,
     src: imgSrc,
     alt: imgAltText
-  }), text && /*#__PURE__*/React.createElement(CardText$1, {
+  }), /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    width: "100%",
+    extraStyles: "flex-basis: 100%;"
+  }, text && /*#__PURE__*/React.createElement(CardText$1, {
     padding: padding,
     titleText: titleText,
     text: text,
     titleVariant: titleVariant
-  }), children)));
+  }), children)))));
 };
 
-var Card$1 = themeComponent$1(withWindowSize(Card), "Card", fallbackValues$y);
+var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$y);
 
 var fontFamily$6 = "Public Sans, sans-serif";
 var activeColor$6 = MATISSE_BLUE;
@@ -37226,7 +38075,7 @@ var NavTab = function NavTab(_ref) {
   }, label));
 };
 
-var NavTab$1 = themeComponent$1(NavTab, "NavTab", fallbackValues$A);
+var NavTab$1 = themeComponent(NavTab, "NavTab", fallbackValues$A);
 
 var NavTabs = function NavTabs(_ref) {
   var tabsConfig = _ref.tabsConfig,
@@ -37250,6 +38099,14 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
 var shineFrames = keyframes$3(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -37317,11 +38174,11 @@ var TableCell_styled = styled.td.withConfig({
   return extraStyles;
 });
 
-var backgroundColor$6 = ALABASTER_WHITE;
-var borderColor$3 = GREY_CHATEAU;
+var backgroundColor$7 = ALABASTER_WHITE;
+var borderColor$4 = GREY_CHATEAU;
 var fallbackValues$B = {
-  backgroundColor: backgroundColor$6,
-  borderColor: borderColor$3
+  backgroundColor: backgroundColor$7,
+  borderColor: borderColor$4
 };
 
 var StyledTableHead = styled.thead.withConfig({
@@ -37339,10 +38196,10 @@ var StyledTableHead = styled.thead.withConfig({
   return fontSize;
 });
 
-var borderColor$4 = GREY_CHATEAU;
+var borderColor$5 = GREY_CHATEAU;
 var hoverBackgroundColor$1 = HOVER_LIGHT_BLUE;
 var fallbackValues$C = {
-  borderColor: borderColor$4,
+  borderColor: borderColor$5,
   hoverBackgroundColor: hoverBackgroundColor$1
 };
 
@@ -37383,7 +38240,7 @@ var TableRow = function TableRow(_ref) {
   }, props), children);
 };
 
-var TableRow$1 = themeComponent$1(TableRow, "TableRow", fallbackValues$C);
+var TableRow$1 = themeComponent(TableRow, "TableRow", fallbackValues$C);
 
 var TableHead = function TableHead(_ref) {
   var children = _ref.children,
@@ -37399,7 +38256,7 @@ var TableHead = function TableHead(_ref) {
   }, children));
 };
 
-var TableHead$1 = themeComponent$1(TableHead, "TableHead", fallbackValues$B);
+var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$B);
 
 var TableHeading_styled = styled.th.withConfig({
   displayName: "TableHeadingstyled",
@@ -39319,9 +40176,9 @@ AddressForm.reducer = reducer;
 AddressForm.mapStateToProps = mapStateToProps$1;
 AddressForm.mapDispatchToProps = mapDispatchToProps;
 
-var backgroundColor$7 = "#ebeffb";
+var backgroundColor$8 = "#ebeffb";
 var fallbackValues$D = {
-  backgroundColor: backgroundColor$7
+  backgroundColor: backgroundColor$8
 };
 
 var Banner = function Banner(_ref) {
@@ -39372,7 +40229,7 @@ var Banner = function Banner(_ref) {
   }, /*#__PURE__*/React.createElement(Image, null))));
 };
 
-var Banner$1 = themeComponent$1(Banner, "Banner", fallbackValues$D);
+var Banner$1 = themeComponent(Banner, "Banner", fallbackValues$D);
 
 var ChangePasswordForm = function ChangePasswordForm(_ref) {
   var _newPasswordErrorMess;
@@ -39545,7 +40402,9 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       _ref$index = _ref.index,
-      index = _ref$index === void 0 ? 1 : _ref$index;
+      index = _ref$index === void 0 ? 1 : _ref$index,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -39605,7 +40464,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    extraStyles: "z-index: 25;",
+    extraStyles: "z-index: 25; ".concat(extraStyles),
     role: "button",
     "aria-expanded": isOpen.toString(),
     "aria-controls": id,
@@ -39641,7 +40500,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent$1(CollapsibleSection, "CollapsibleSection", fallbackValues$E);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$E);
 
 var ClipboardIcon = function ClipboardIcon(_ref) {
   var themeValues = _ref.themeValues;
@@ -39675,7 +40534,7 @@ var ClipboardIcon = function ClipboardIcon(_ref) {
   })));
 };
 
-var ClipboardIcon$1 = themeComponent$1(ClipboardIcon, "Icons", fallbackValues$3, "primary");
+var ClipboardIcon$1 = themeComponent(ClipboardIcon, "Icons", fallbackValues$2, "primary");
 
 /*
 This component will render `content` and a clipboard icon.
@@ -39932,13 +40791,16 @@ var EditableList = function EditableList(_ref) {
       autoPayMethods = _ref.autoPayMethods,
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "p" : _ref$as,
+      _ref$listPadding = _ref.listPadding,
+      listPadding = _ref$listPadding === void 0 ? "0rem 0rem 1.5rem 0rem" : _ref$listPadding,
       qaPrefix = _ref.qaPrefix,
       ariaLabel = _ref.ariaLabel;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React.createElement(Box, {
-    padding: "0rem 0rem 1.5rem 0rem",
+    padding: listPadding,
     as: "section",
-    "aria-labelledby": "li"
+    "aria-labelledby": typeof title === "string" ? "editable-list-".concat(createIdFromString(title)) : "",
+    "aria-label": !title && typeof itemName === "string" ? "editable-list-".concat(createIdFromString(itemName)) : ""
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0rem"
   }, title !== "" && /*#__PURE__*/React.createElement(Box, {
@@ -39947,7 +40809,8 @@ var EditableList = function EditableList(_ref) {
     as: as,
     weight: titleWeight,
     color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;"
+    extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;",
+    id: typeof title === "string" ? "editable-list-".concat(createIdFromString(title)) : ""
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -40259,7 +41122,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
   }));
 };
 
-var FooterWithSubfooter$1 = themeComponent$1(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$F);
+var FooterWithSubfooter$1 = themeComponent(FooterWithSubfooter, "FooterWithSubfooter", fallbackValues$F);
 
 var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
   var _EmailErrorMessages;
@@ -40310,10 +41173,10 @@ ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$4 = "#ffffff";
-var backgroundColor$8 = "#182848";
+var backgroundColor$9 = "#182848";
 var fallbackValues$G = {
   textColor: textColor$4,
-  backgroundColor: backgroundColor$8
+  backgroundColor: backgroundColor$9
 };
 
 var HighlightTabRow = function HighlightTabRow(_ref) {
@@ -40371,7 +41234,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = themeComponent$1(HighlightTabRow, "HighlightTabRow", fallbackValues$G);
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$G);
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -45518,7 +46381,7 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$9 = {
+var backgroundColor$a = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
@@ -45533,7 +46396,7 @@ var fallbackValues$H = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$a
 };
 
 /*
@@ -45591,9 +46454,9 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/memo(themeComponent$1(Module, "Module", fallbackValues$H, "default"));
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$H, "default"));
 
-var backgroundColor$a = {
+var backgroundColor$b = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -45602,7 +46465,7 @@ var shadowColor = {
   cms: "#292A33"
 };
 var fallbackValues$I = {
-  backgroundColor: backgroundColor$a,
+  backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
 
@@ -45642,7 +46505,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent$1(NavMenuDesktop, "NavMenu", fallbackValues$I, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$I, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -45677,19 +46540,25 @@ var menu = posed.div({
 var ImposterMenu = styled(menu).withConfig({
   displayName: "NavMenuMobile__ImposterMenu",
   componentId: "sc-1pf0qp7-0"
-})(["position:fixed;top:72px;"]);
+})(["position:fixed;top:", ";"], function (_ref) {
+  var headerSize = _ref.headerSize;
+  return headerSize;
+});
 
-var NavMenuMobile = function NavMenuMobile(_ref) {
-  var id = _ref.id,
-      _ref$menuContent = _ref.menuContent,
-      menuContent = _ref$menuContent === void 0 ? [] : _ref$menuContent,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      themeValues = _ref.themeValues;
+var NavMenuMobile = function NavMenuMobile(_ref2) {
+  var id = _ref2.id,
+      _ref2$menuContent = _ref2.menuContent,
+      menuContent = _ref2$menuContent === void 0 ? [] : _ref2$menuContent,
+      _ref2$visible = _ref2.visible,
+      visible = _ref2$visible === void 0 ? false : _ref2$visible,
+      _ref2$headerSize = _ref2.headerSize,
+      headerSize = _ref2$headerSize === void 0 ? "72px" : _ref2$headerSize,
+      themeValues = _ref2.themeValues;
   return /*#__PURE__*/React.createElement(ImposterMenu, {
     id: id,
     initialPose: "invisible",
-    pose: visible ? "visible" : "invisible"
+    pose: visible ? "visible" : "invisible",
+    headerSize: headerSize
   }, /*#__PURE__*/React.createElement(Box, {
     width: "100vw",
     padding: "1rem 0.5rem",
@@ -45698,7 +46567,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent$1(NavMenuMobile, "NavMenu", fallbackValues$I, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$I, "profile");
 
 var ACH_METHOD = "BANK_ACCOUNT";
 var CC_METHOD = "CREDIT_CARD";
@@ -45792,7 +46661,7 @@ var AutopayModal = function AutopayModal(_ref) {
     var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
     var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
     var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
-    return "To setup ".concat(planText, " you must have a saved ").concat(methodRequired, " and address in your profile. Do you want to save these now?");
+    return "To setup ".concat(planText, " you must have a saved ").concat(methodRequired, " and address. Do you want to save these now?");
   };
 
   var plan = isPaymentPlan ? "your payment plan" : "autopay";
@@ -45803,7 +46672,7 @@ var AutopayModal = function AutopayModal(_ref) {
   var modalExtraProps = {
     modalHeaderText: autoPayActive ? titleCaseString(deactivateText) : titleCaseString(activateText),
     modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(plan, "? ").concat(!inactive && nextDate ? "Your next payment will be due on ".concat(nextDate, ".") : "") : generateMethodNeededText(plan, allowedPaymentInstruments),
-    continueButtonText: autoPayActive ? "Disable ".concat(shortPlan) : "Add to Profile",
+    continueButtonText: autoPayActive ? "Disable ".concat(shortPlan) : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
       deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
@@ -45885,7 +46754,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps), renderAutoPayControl());
 };
 
-var AutopayModalModule = themeComponent$1(AutopayModal, "AutopayModal", fallbackValues$J);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$J);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -46111,7 +46980,7 @@ var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
     },
     modalOpen: modalIsOpen,
     modalHeaderText: "Remove ".concat(accountType),
-    modalBodyText: "Are you sure you want to remove the ".concat(identifier, " ").concat(accounts, " from your profile? Any autopay scheduled against ").concat(obligations.length > 1 ? "them" : "it", " will be deactivated."),
+    modalBodyText: "Are you sure you want to remove the ".concat(identifier, " ").concat(accounts, "? Any autopay scheduled against ").concat(obligations.length > 1 ? "them" : "it", " will be deactivated."),
     continueButtonText: "Remove",
     continueAction: function continueAction() {
       removeAccount();
@@ -46451,6 +47320,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
       maximum = _ref.maximum,
       _ref$minimum = _ref.minimum,
       minimum = _ref$minimum === void 0 ? 1 : _ref$minimum,
+      blockPartialPaymentOverpay = _ref.blockPartialPaymentOverpay,
       clearOnDismount = _ref.clearOnDismount,
       fields = _ref.fields,
       actions = _ref.actions,
@@ -46466,6 +47336,18 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
   }
 
   var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThanOrEqualTo.error, "There is a minimum payment of ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "There is a maximum payment of ".concat(displayCurrency(maximum))), _amountErrors);
+
+  var getPartialAmountFormErrors = function getPartialAmountFormErrors(itemAmount) {
+    var errorMessages = amountErrors;
+
+    if (blockPartialPaymentOverpay) {
+      var maxAmountError = "There is a maximum payment of ".concat(displayCurrency(itemAmount));
+      return _objectSpread2(_objectSpread2({}, errorMessages), {}, _defineProperty({}, numberLessThanOrEqualTo.error, maxAmountError));
+    }
+
+    return errorMessages;
+  };
+
   var lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
@@ -46484,7 +47366,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
       field: fields[li.id],
       fieldActions: actions.fields[li.id],
       showErrors: showErrors,
-      errorMessages: amountErrors,
+      errorMessages: getPartialAmountFormErrors(li.amount),
       style: {
         textAlign: "right"
       },
@@ -46503,6 +47385,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
 
 var createPartialAmountFormState = function createPartialAmountFormState(lineItems, maximum) {
   var minimum = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var blockPartialPaymentOverpay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var formConfig = lineItems.reduce(function (acc, item) {
     var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
       return lineItem != item;
@@ -46518,6 +47401,10 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
       }, [])));
     }
 
+    if (blockPartialPaymentOverpay) {
+      validators.push(numberLessThanOrEqualTo(item.amount));
+    }
+
     return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, item.id, {
       validators: validators,
       constraints: [onlyNaturals()],
@@ -46750,10 +47637,12 @@ var Pagination = function Pagination(_ref3) {
   }));
 };
 
-var Pagination$1 = themeComponent$1(Pagination, "Pagination", fallbackValues$K);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$K);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
-  var _ref$forwardButtonTex = _ref.forwardButtonText,
+  var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
+      isForwardButtonDisabled = _ref$isForwardButtonD === void 0 ? false : _ref$isForwardButtonD,
+      _ref$forwardButtonTex = _ref.forwardButtonText,
       forwardButtonText = _ref$forwardButtonTex === void 0 ? "Next" : _ref$forwardButtonTex,
       forwardButtonAction = _ref.forwardButtonAction,
       forwardButtonLoading = _ref.forwardButtonLoading,
@@ -46770,7 +47659,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       redirectText = _ref$redirectText === void 0 ? "Return" : _ref$redirectText,
       buttonFlexOverride = _ref.buttonFlexOverride,
       _ref$hideForwardButto = _ref.hideForwardButton,
-      hideForwardButton = _ref$hideForwardButto === void 0 ? false : _ref$hideForwardButto;
+      hideForwardButton = _ref$hideForwardButto === void 0 ? false : _ref$hideForwardButto,
+      _ref$hideBackButton = _ref.hideBackButton,
+      hideBackButton = _ref$hideBackButton === void 0 ? false : _ref$hideBackButton;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -46793,14 +47684,16 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     text: redirectText,
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: redirectText
+    dataQa: redirectText,
+    disabled: isForwardButtonDisabled
   }) : forwardButtonAction && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: forwardButtonText,
     variant: forwardButtonVariant,
     action: forwardButtonAction,
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: forwardButtonText
+    dataQa: forwardButtonText,
+    disabled: isForwardButtonDisabled
   });
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Box, {
     padding: "1.25rem 0"
@@ -46809,10 +47702,10 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: buttonFlexOverride ? buttonFlexOverride : !!backButton ? "space-between" : "flex-end",
     align: "center"
-  }, backButton, !hideForwardButton && /*#__PURE__*/React.createElement(Fragment$1, null, forwardButton))));
+  }, !hideBackButton && /*#__PURE__*/React.createElement(Fragment$1, null, backButton), !hideForwardButton && /*#__PURE__*/React.createElement(Fragment$1, null, forwardButton))));
 };
 
-var backgroundColor$b = {
+var backgroundColor$c = {
   "default": "transparent",
   small: "transparent"
 };
@@ -46829,7 +47722,7 @@ var labeledAmountTotal = {
   small: "p"
 };
 var fallbackValues$L = {
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -46877,7 +47770,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       },
       text: "Void",
       padding: "0",
-      extraStyles: "\n                  min-width: 65px; \n                  margin: 0px;\n                  min-height: 0px;\n                ",
+      extraStyles: "\n                  min-width: 65px;\n                  margin: 0px;\n                  min-height: 0px;\n                ",
       textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;")
     })), /*#__PURE__*/React.createElement(Box, {
       padding: "0",
@@ -46905,12 +47798,69 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }));
 };
 
+var LoadingDetails = function LoadingDetails() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    background: GRECIAN_GREY,
+    borderRadius: "4px",
+    minHeight: "196px"
+  }, /*#__PURE__*/React.createElement(Cover, {
+    minHeight: "196px",
+    singleChild: true,
+    fillCenter: true
+  }, /*#__PURE__*/React.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "flex-grow: 1; display: flex; justify-content: center; align-items: center;"
+  }, /*#__PURE__*/React.createElement(Spinner$2, {
+    size: "100",
+    centerSpinner: true
+  })))));
+};
+
+var ErrorDetails = function ErrorDetails() {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Alert$1, {
+    variant: "error",
+    heading: "Error Loading Payment",
+    text: "Please go back and try again.",
+    showQuitLink: false,
+    noBorder: true,
+    enableBoxShadow: true,
+    enableSmallText: true,
+    innerContentPadding: "0 0 0 0.75rem",
+    iconPadding: "0 0 0 0",
+    height: "67px",
+    minHeight: "67px",
+    padding: "0.75rem"
+  }));
+};
+
+var getLoadingOrErrorContent = function getLoadingOrErrorContent() {
+  var isLoading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var isError = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(LoadingDetails, null);
+  } else if (isError) {
+    return /*#__PURE__*/React.createElement(ErrorDetails, null);
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment$1, null);
+};
+
 var Collapsible = function Collapsible(_ref2) {
   var content = _ref2.content,
       title = _ref2.title,
       supportsTouch = _ref2.supportsTouch,
       isOpen = _ref2.isOpen,
-      setIsOpen = _ref2.setIsOpen;
+      setIsOpen = _ref2.setIsOpen,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      _ref2$isError = _ref2.isError,
+      isError = _ref2$isError === void 0 ? false : _ref2$isError;
   return /*#__PURE__*/React.createElement(CollapsibleSection$1, {
     isMobile: true,
     supportsTouch: supportsTouch,
@@ -46933,13 +47883,17 @@ var Collapsible = function Collapsible(_ref2) {
     },
     positionTransition: true,
     initial: "closed"
-  }, content));
+  }, isLoading || isError ? getLoadingOrErrorContent(isLoading, isError) : content));
 };
 
 var NonCollapsible = function NonCollapsible(_ref3) {
   var title = _ref3.title,
-      content = _ref3.content;
-  return /*#__PURE__*/React.createElement(Stack, null, title, content);
+      content = _ref3.content,
+      _ref3$isLoading = _ref3.isLoading,
+      isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
+      _ref3$isError = _ref3.isError,
+      isError = _ref3$isError === void 0 ? false : _ref3$isError;
+  return /*#__PURE__*/React.createElement(Stack, null, title, isLoading || isError ? getLoadingOrErrorContent(isLoading, isError) : content);
 };
 
 var PaymentDetails = function PaymentDetails(_ref4) {
@@ -46969,7 +47923,11 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       _ref4$voidableAmountP = _ref4.voidableAmountPaid,
       voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
       _ref4$remainingBalanc = _ref4.remainingBalance,
-      remainingBalance = _ref4$remainingBalanc === void 0 ? false : _ref4$remainingBalanc;
+      remainingBalance = _ref4$remainingBalanc === void 0 ? false : _ref4$remainingBalanc,
+      _ref4$isLoading = _ref4.isLoading,
+      isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+      _ref4$isError = _ref4.isError,
+      isError = _ref4$isError === void 0 ? false : _ref4$isError;
 
   var _useState = useState(initiallyOpen),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47072,14 +48030,18 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     isMobile: isMobile,
-    supportsTouch: supportsTouch
+    supportsTouch: supportsTouch,
+    isLoading: isLoading,
+    isError: isError
   }) : /*#__PURE__*/React.createElement(NonCollapsible, {
     title: title,
-    content: content
+    content: content,
+    isLoading: isLoading,
+    isError: isError
   });
 };
 
-var PaymentDetails$1 = themeComponent$1(PaymentDetails, "PaymentDetails", fallbackValues$L, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$L, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -47155,9 +48117,9 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent$1(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$M, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$M, "default");
 
-var backgroundColor$c = {
+var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -47187,7 +48149,7 @@ var modalLinkHoverFocus$2 = {
   footer: standardInteractionStyles
 };
 var fallbackValues$N = {
-  backgroundColor: backgroundColor$c,
+  backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -47222,7 +48184,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       background: themeValues.backgroundColor,
       border: "1px solid ".concat(themeValues.border),
       borderRadius: "3px",
-      extraStyles: "overflow: scroll; max-height: 20rem;"
+      extraStyles: "overflow: scroll; max-height: 20rem;",
+      id: "terms-body-text"
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       extraStyles: "& a { text-decoration: underline; }"
@@ -47250,7 +48213,175 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent$1(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$N, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$N, "default");
+
+var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
+  var onCheck = _ref.onCheck,
+      isChecked = _ref.isChecked,
+      html = _ref.html,
+      terms = _ref.terms,
+      _ref$error = _ref.error,
+      error = _ref$error === void 0 ? false : _ref$error,
+      linkVariant = _ref.linkVariant;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showTerms = _useState2[0],
+      toggleShowTerms = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(DisplayBox$1, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Checkbox$1, {
+    name: "terms",
+    title: "Terms and Conditions",
+    error: error,
+    checked: isChecked,
+    onChange: onCheck
+  }), /*#__PURE__*/React.createElement(Box, {
+    padding: "0 0 0 58px"
+  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, html), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
+    link: "Learn More",
+    terms: terms,
+    isOpen: showTerms,
+    toggleOpen: toggleShowTerms,
+    linkVariant: linkVariant
+  })))));
+};
+
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+var useScrollTo = function useScrollTo(id) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
+  var delay = arguments.length > 4 ? arguments[4] : undefined;
+  var scrollItem;
+
+  if (delay) {
+    setTimeout(function () {
+      var _scrollItem;
+
+      scrollItem = document.getElementById(id);
+      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
+
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
+      top: top,
+      left: left,
+      behavior: behavior
+    });
+  }
+};
+
+var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
+  var _ref$showCheckbox = _ref.showCheckbox,
+      showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
+      onCheck = _ref.onCheck,
+      isChecked = _ref.isChecked,
+      hasError = _ref.hasError,
+      _ref$errorMessage = _ref.errorMessage,
+      errorMessage = _ref$errorMessage === void 0 ? "Please accept Terms and Conditions" : _ref$errorMessage,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? "" : _ref$description,
+      _ref$linkText = _ref.linkText,
+      linkText = _ref$linkText === void 0 ? "Terms and Conditions" : _ref$linkText,
+      html = _ref.html,
+      terms = _ref.terms,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "terms-and-conditions" : _ref$id,
+      _ref$displayInline = _ref.displayInline,
+      displayInline = _ref$displayInline === void 0 ? true : _ref$displayInline,
+      _ref$modalVariant = _ref.modalVariant,
+      modalVariant = _ref$modalVariant === void 0 ? "default" : _ref$modalVariant,
+      _ref$containerBackgro = _ref.containerBackground,
+      containerBackground = _ref$containerBackgro === void 0 ? ATHENS_GREY : _ref$containerBackgro,
+      _ref$checkboxMargin = _ref.checkboxMargin,
+      checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
+      _ref$modalTitle = _ref.modalTitle,
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showTerms = _useState2[0],
+      toggleShowTerms = _useState2[1];
+
+  var standardBoxShadow = generateShadows().standard.base;
+
+  var toggleTerms = function toggleTerms(termsOpen) {
+    toggleShowTerms(termsOpen);
+
+    if (termsOpen) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: displayInline ? "0" : "1.5rem",
+    minWidth: displayInline ? "0" : "100%",
+    background: displayInline ? "transparent" : containerBackground,
+    boxShadow: displayInline ? "none" : standardBoxShadow,
+    borderRadius: displayInline ? "0" : "4px"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "0"
+  }, html && /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, html), /*#__PURE__*/React.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center",
+    nowrap: true
+  }, showCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
+    name: id,
+    error: hasError,
+    checked: isChecked,
+    onChange: onCheck,
+    checkboxMargin: checkboxMargin,
+    extraStyles: "align-self: flex-start;"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    childGap: "0.25rem",
+    fullHeight: true
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center",
+    nowrap: true,
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
+  }, description && /*#__PURE__*/React.createElement(Text$1, {
+    color: CHARADE_GREY
+  }, description), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
+    link: linkText,
+    terms: terms,
+    isOpen: showTerms,
+    toggleOpen: toggleTerms,
+    linkVariant: modalVariant,
+    title: modalTitle
+  })), showCheckbox && hasError && /*#__PURE__*/React.createElement(Text$1, {
+    variant: "pXS",
+    color: ERROR_COLOR,
+    id: "".concat(id, "-error-message")
+  }, errorMessage)))));
+};
+
+var _excluded$y = ["version"];
+
+var TermsAndConditions = function TermsAndConditions(_ref) {
+  var _ref$version = _ref.version,
+      version = _ref$version === void 0 ? "v1" : _ref$version,
+      rest = _objectWithoutProperties(_ref, _excluded$y);
+
+  var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
+  return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
+};
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -47271,9 +48402,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
-      termsContent = _ref.termsContent,
-      _ref$termsTitle = _ref.termsTitle,
-      termsTitle = _ref$termsTitle === void 0 ? "Terms &amp; Conditions" : _ref$termsTitle;
+      termsContent = _ref.termsContent;
 
   if (clearOnDismount) {
     useEffect$1(function () {
@@ -47293,13 +48422,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       showAccount = _useState4[0],
       toggleShowAccount = _useState4[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      termsModalOpen = _useState6[0],
-      setTermsModalOpen = _useState6[1];
-
   var showTerms = !!termsContent;
-  var showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   var nameErrors = _defineProperty({}, required.error, "Name is required");
 
@@ -47410,7 +48533,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
   }), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
-    childGap: "4px"
+    childGap: "4px",
+    align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "bank checkbox",
     title: "Save checking account to wallet.",
@@ -47418,18 +48542,12 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: saveToWallet
   }), showTerms && /*#__PURE__*/React.createElement(Cover, {
     singleChild: true
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    childGap: 0
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    variant: showTermsLinkVariant
-  }, "View\xA0"), /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
-    link: termsTitle,
-    linkVariant: showTermsLinkVariant,
-    terms: termsContent,
-    title: termsTitle,
-    isOpen: termsModalOpen,
-    toggleOpen: setTermsModalOpen
-  }))))));
+  }, /*#__PURE__*/React.createElement(TermsAndConditions, {
+    version: "v2",
+    showCheckbox: false,
+    description: "View",
+    terms: termsContent
+  })))));
 };
 
 var formConfig$6 = {
@@ -47484,20 +48602,12 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
       deniedCards = _ref.deniedCards,
-      termsContent = _ref.termsContent,
-      _ref$termsTitle = _ref.termsTitle,
-      termsTitle = _ref$termsTitle === void 0 ? "Terms &amp; Conditions" : _ref$termsTitle;
+      termsContent = _ref.termsContent;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      termsModalOpen = _useState2[0],
-      setTermsModalOpen = _useState2[1];
-
   var showTerms = !!termsContent;
-  var showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
   useEffect$1(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -47607,7 +48717,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     autocomplete: "billing postal-code"
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
-    childGap: "4px"
+    childGap: "4px",
+    align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "credit card checkbox",
     title: "Save credit card to wallet.",
@@ -47615,18 +48726,12 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onChange: saveToWallet
   }), showTerms && /*#__PURE__*/React.createElement(Cover, {
     singleChild: true
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    childGap: 0
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    variant: showTermsLinkVariant
-  }, "View\xA0"), /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
-    link: termsTitle,
-    linkVariant: showTermsLinkVariant,
-    terms: termsContent,
-    title: termsTitle,
-    isOpen: termsModalOpen,
-    toggleOpen: setTermsModalOpen
-  }))))));
+  }, /*#__PURE__*/React.createElement(TermsAndConditions, {
+    version: "v2",
+    showCheckbox: false,
+    description: "View",
+    terms: termsContent
+  })))));
 };
 
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
@@ -47905,13 +49010,13 @@ var RadioGroup = function RadioGroup(_ref) {
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
-var borderColor$5 = "".concat(GREY_CHATEAU);
+var borderColor$6 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
 var fallbackValues$O = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$5,
+  borderColor: borderColor$6,
   focusStyles: focusStyles
 };
 
@@ -47952,7 +49057,8 @@ var RadioSection = function RadioSection(_ref) {
       _ref$initiallyOpen = _ref.initiallyOpen,
       initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
       _ref$openHeight = _ref.openHeight,
-      openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight;
+      openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
+      ariaDescribedBy = _ref.ariaDescribedBy;
 
   var handleKeyDown = function handleKeyDown(id, e) {
     if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
@@ -48029,7 +49135,7 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React.createElement(Box, {
-      padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem 1.25rem 1.25rem",
+      padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem",
       background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
       onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
@@ -48046,7 +49152,7 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React.createElement(Cluster, {
       justify: "space-between",
       align: "center",
-      childGap: "0.5rem",
+      childGap: "1px",
       nowrap: true
     }, /*#__PURE__*/React.createElement(Cluster, {
       justify: "flex-start",
@@ -48055,7 +49161,8 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React.createElement(RadioButton$2, {
-      name: section.id,
+      name: typeof section.title === "string" ? createIdFromString(section.title) : section.id,
+      ariaDescribedBy: ariaDescribedBy,
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
       toggleRadio: section.disabled ? noop : function () {
@@ -48095,7 +49202,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent$1(RadioSection, "RadioSection", fallbackValues$O);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$O);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -48471,7 +49578,7 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent$1(Tabs, "NavigationTab", fallbackValues$P);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$P);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
@@ -48532,40 +49639,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent$1(TabSidebar, "ProfileTab", fallbackValues$Q);
-
-var TermsAndConditions = function TermsAndConditions(_ref) {
-  var onCheck = _ref.onCheck,
-      isChecked = _ref.isChecked,
-      html = _ref.html,
-      terms = _ref.terms,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showTerms = _useState2[0],
-      toggleShowTerms = _useState2[1];
-
-  return /*#__PURE__*/React.createElement(DisplayBox$1, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Checkbox$1, {
-    name: "terms",
-    title: "Terms and Conditions",
-    error: error,
-    checked: isChecked,
-    onChange: onCheck
-  }), /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0 58px"
-  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-    padding: "0"
-  }, html), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
-    link: "Learn More",
-    terms: terms,
-    isOpen: showTerms,
-    toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant
-  })))));
-};
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$Q);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -48656,7 +49730,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent$1(WelcomeModule, "WelcomeModule", fallbackValues$R));
+var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$R));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -48728,13 +49802,15 @@ var CenterSingle = function CenterSingle(_ref) {
       _ref$centeredMobileCo = _ref.centeredMobileContent,
       centeredMobileContent = _ref$centeredMobileCo === void 0 ? false : _ref$centeredMobileCo,
       content = _ref.content,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? COOL_GREY_05 : _ref$backgroundColor,
       themeValues = _ref.themeValues;
   var themeContext = useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: COOL_GREY_05,
+    background: backgroundColor,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     centerOverride: isMobile && !centeredMobileContent
@@ -48758,7 +49834,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent$1(CenterSingle, "Global", fallbackValues$S));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$S));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -48800,7 +49876,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent$1(CenterStack, "Global", fallbackValues$S));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$S));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -48845,7 +49921,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent$1(CenterSingle$2, "Global", fallbackValues$S));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$S));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -48899,7 +49975,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent$1(SidebarSingleContent, "Global", fallbackValues$S));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$S));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -48970,7 +50046,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent$1(SidebarStackContent, "Global", fallbackValues$S));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$S));
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowUpCircleIconSmall, AutopayOnIcon, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowUpCircleIconSmall, AutopayOnIcon, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map