@thecb/components 8.3.0-beta.0 → 8.4.0-beta.0

package/dist/index.d.ts

@@ -106,7 +106,12 @@ interface FieldActions {
   clear?: () => ClearAction;
 }
 
-interface ErrorMessage {
+interface FormSelectOption {
+  text?: string;
+  value?: string;
+}
+
+interface ErrorMessageDictionary {
   [fieldName: string]: string;
 }
 
@@ -115,7 +120,7 @@ interface FormInputProps {
   field?: Field;
   fieldActions?: FieldActions;
   disabled?: boolean;
-  errorMessages?: ErrorMessage[];
+  errorMessages?: ErrorMessageDictionary;
   helperModal?: boolean;
   isEmail?: boolean;
   isNum?: boolean;
@@ -127,19 +132,14 @@ interface FormInputProps {
 declare const FormInput: React.FC<Expand<FormInputProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-interface Option {
-  text?: string;
-  value?: string | number;
-}
-
 interface FormSelectProps {
   disabled?: boolean;
   dropdownMaxHeight?: string;
   labelTextWhenNoError?: string;
-  options?: Option[];
+  options?: FormSelectOption[];
   fieldActions?: FieldActions;
   showErrors?: boolean;
-  errorMessages?: ErrorMessage[];
+  errorMessages?: ErrorMessageDictionary;
   field?: Field;
 }
 
@@ -698,5 +698,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RevenueManagementImage, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps };
+export { AddValidatorAction, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -4994,7 +4994,6 @@ var COOL_GREY_05 = "#fbfcfd"; // CBS-050
 var CLOUDBURST_BLUE = "#26395c";
 var ZODIAC_BLUE = "#14284b";
 var CONGRESS_BLUE = "#005095";
-var ROYAL_BLUE = "#3B5BDB";
 var SCIENCE_BLUE = "#0074D9";
 var MARINER_BLUE = "#2E75D2";
 var CURIOUS_BLUE = "#27A9E1";
@@ -5009,6 +5008,8 @@ var INFO_BLUE = "#E4F4FD";
 var CORNFLOWER_BLUE = "#EBEFFB";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
+var ROYAL_BLUE = "#3181E3";
+var ROYAL_BLUE_VIVID = "#3B5BDB";
 var ASTRAL_BLUE = "#3176AA";
 var SAPPHIRE_BLUE = "#116285";
 var PEACOCK_BLUE = "#0E506D"; // GREEN
@@ -5139,6 +5140,7 @@ var colors = /*#__PURE__*/Object.freeze({
   HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
   MATISSE_BLUE: MATISSE_BLUE,
   ROYAL_BLUE: ROYAL_BLUE,
+  ROYAL_BLUE_VIVID: ROYAL_BLUE_VIVID,
   ASTRAL_BLUE: ASTRAL_BLUE,
   SAPPHIRE_BLUE: SAPPHIRE_BLUE,
   PEACOCK_BLUE: PEACOCK_BLUE,
@@ -17662,6 +17664,44 @@ var ArrowRightCircleIconSmall = function ArrowRightCircleIconSmall(_ref) {
   })));
 };
 
+var ArrowRightIcon = function ArrowRightIcon(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.17828 4.15501C8.98314 4.35015 8.983 4.66649 9.17796 4.8618L13.475 9.16659H3.83337C3.55723 9.16659 3.33337 9.39044 3.33337 9.66659V10.3333C3.33337 10.6094 3.55723 10.8333 3.83337 10.8333H13.475L9.17796 15.138C8.983 15.3333 8.98314 15.6497 9.17828 15.8448L9.64649 16.313C9.84175 16.5083 10.1583 16.5083 10.3536 16.313L16.3132 10.3535C16.5084 10.1582 16.5084 9.84163 16.3132 9.64637L10.3536 3.6868C10.1583 3.49154 9.84175 3.49154 9.64649 3.68681L9.17828 4.15501Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_6329_1483",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "3",
+    y: "3",
+    width: "14",
+    height: "14"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.17828 4.15501C8.98314 4.35015 8.983 4.66649 9.17796 4.8618L13.475 9.16659H3.83337C3.55723 9.16659 3.33337 9.39044 3.33337 9.66659V10.3333C3.33337 10.6094 3.55723 10.8333 3.83337 10.8333H13.475L9.17796 15.138C8.983 15.3333 8.98314 15.6497 9.17828 15.8448L9.64649 16.313C9.84175 16.5083 10.1583 16.5083 10.3536 16.313L16.3132 10.3535C16.5084 10.1582 16.5084 9.84163 16.3132 9.64637L10.3536 3.6868C10.1583 3.49154 9.84175 3.49154 9.64649 3.68681L9.17828 4.15501Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_6329_1483)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "20",
+    height: "20",
+    fill: color
+  })));
+};
+
 var ArrowUpCircleIconSmall = function ArrowUpCircleIconSmall(_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "#15749D" : _ref$color,
@@ -18052,6 +18092,23 @@ var ChargebackReversalIconMedium = function ChargebackReversalIconMedium(_ref) {
   })));
 };
 
+var PlusCircleIcon = function PlusCircleIcon(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 1.25C5.16751 1.25 1.25 5.16751 1.25 10C1.25 14.8325 5.16751 18.75 10 18.75C14.8325 18.75 18.75 14.8325 18.75 10C18.75 5.16751 14.8325 1.25 10 1.25ZM2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10ZM10.75 9.25V5.25H9.25V9.25H5.25V10.75H9.25V14.75H10.75V10.75H14.75V9.25H10.75Z",
+    fill: color
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18791,7 +18848,7 @@ var background$1 = {
 var color$4 = {
   info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
-  primary: "".concat(ROYAL_BLUE),
+  primary: "".concat(ROYAL_BLUE_VIVID),
   success: "".concat(SEA_GREEN)
 };
 var fallbackValues$7 = {
@@ -18806,7 +18863,7 @@ var StyledBadgeContainer = styled(Box).withConfig({
 var StyledBadge = styled(Text$1).withConfig({
   displayName: "Badge__StyledBadge",
   componentId: "sc-1g438j-1"
-})(["font-family:\"Public Sans\",sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:150%;letter-spacing:0.2px;@media screen and (min-width:1049px){font-size:12px;line-height:150%;letter-spacing:0.24px;}"]);
+})(["font-family:\"Public Sans\",sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:150%;letter-spacing:0.2px;white-space:nowrap;@media screen and (min-width:1049px){font-size:12px;line-height:150%;letter-spacing:0.24px;}"]);
 
 var Badge = function Badge(_ref) {
   var label = _ref.label,
@@ -42769,6 +42826,94 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), _defineProperty(_iconsMap, ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), _defineProperty(_iconsMap, ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), _defineProperty(_iconsMap, ACCOUNTS_DENTAL_ICON, AccountDentalIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), _defineProperty(_iconsMap, PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), _defineProperty(_iconsMap, PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), _defineProperty(_iconsMap, PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), _defineProperty(_iconsMap, PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), _defineProperty(_iconsMap, PROPERTIES_LAND_ICON, PropertyLandIcon), _defineProperty(_iconsMap, PROPERTIES_CAR_ICON, PropertyCarIcon), _defineProperty(_iconsMap, PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), _defineProperty(_iconsMap, PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), _defineProperty(_iconsMap, MISC_BILL_ICON, AccountBillIcon), _iconsMap);
 
+var background$3 = {
+  "default": "".concat(WHITE)
+};
+var color$b = {
+  "default": "".concat(ROYAL_BLUE_VIVID)
+};
+var fallbackValues$I = {
+  background: background$3,
+  color: color$b
+};
+
+var LinkCard = function LinkCard(_ref) {
+  var _ref$variant = _ref.variant,
+      _ref$workflowName = _ref.workflowName,
+      workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
+      _ref$workflowDescript = _ref.workflowDescription,
+      workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
+      _ref$workflowActionNa = _ref.workflowActionName,
+      workflowActionName = _ref$workflowActionNa === void 0 ? "Find" : _ref$workflowActionNa,
+      themeValues = _ref.themeValues,
+      slug = _ref.slug;
+  var navigate = useNavigate();
+  return /*#__PURE__*/React.createElement(Box, {
+    background: "#FEFEFE" // --grays-cool-gray-00
+    ,
+    border: "1px solid #C4CEF4;" // --primary-color-primary-30
+    ,
+    padding: 0,
+    borderRadius: "8px",
+    dataQa: "link-card-".concat(workflowDescription),
+    hoverStyles: "\n        border-radius: 8px;\n        cursor: pointer;\n        border: 1px solid ".concat(ROYAL_BLUE_VIVID, ";\n        background: var(--primary-color-primary-10, #EBEFFB);\n        /* Primitives/New Shadow/3-Pressed-New */\n        box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);\n        .show-on-hover {color: ").concat(ROYAL_BLUE_VIVID, ";}\n      "),
+    extraStyles: "display: flex; width: 288px;  min-width: 240px;  max-width: 288px;  min-height: 141px;  padding: 16px 24px;  flex-direction: column;  align-items: flex-start;  gap: 40px;  flex-shrink: 0;  align-self: stretch;",
+    onClick: function onClick() {
+      // @TODO replace with something valid like navigate
+      console.log("attempting navigation..."); // window.location.pathname = `/service/${slug}`;
+
+      navigate("/service/".concat(slug));
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: 0,
+    bottomItem: 3,
+    fullHeight: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "1rem 1rem 0 1rem"
+  }, /*#__PURE__*/React.createElement(Heading$1, {
+    variant: "h6",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    color: themeValues.color,
+    margin: "0 0 0.5rem 0",
+    extraStyles: "display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; font-family: Public Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%;"
+  }, workflowName)), /*#__PURE__*/React.createElement(Box, {
+    padding: "0 1rem 1rem",
+    minHeight: "4.25rem"
+  }, /*#__PURE__*/React.createElement(Paragraph$1, {
+    variant: "pS",
+    color: themeValues.color,
+    extraStyles: "overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; /* CB Standard/Desktop/D - P Small - Regular */ font-family: Public Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 0.14px;"
+  }, workflowDescription)), /*#__PURE__*/React.createElement(Box, {
+    background: "transparent",
+    borderWidthOverride: "0 0 0 0",
+    padding: "1.5rem 0 1.5rem 1rem"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justify: "space-between"
+  }, /*#__PURE__*/React.createElement(Box, {
+    background: "transparent",
+    borderWidthOverride: "0 0 0 0",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Badge$1, {
+    label: "Autopay Available",
+    Icon: AutopayIcon
+  })), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    childGap: "6px"
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    variant: "pS",
+    color: themeValues.color,
+    extraStyles: "text-align: right; color: transparent;",
+    className: "show-on-hover"
+  }, workflowActionName), workflowActionName === "Find" && /*#__PURE__*/React.createElement(PlusCircleIcon, {
+    color: themeValues.color
+  }), workflowActionName === "Pay" && /*#__PURE__*/React.createElement(ArrowRightIcon, {
+    color: themeValues.color
+  }))))));
+};
+
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");
+
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
 
@@ -46468,7 +46613,7 @@ var backgroundColor$9 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$I = {
+var fallbackValues$J = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -46536,7 +46681,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$I, "default"));
+var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$J, "default"));
 
 var backgroundColor$a = {
   profile: "#3b414d",
@@ -46546,7 +46691,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$J = {
+var fallbackValues$K = {
   backgroundColor: backgroundColor$a,
   shadowColor: shadowColor
 };
@@ -46587,7 +46732,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$J, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$K, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -46649,7 +46794,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$J, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
 
 var ACH_METHOD = "BANK_ACCOUNT";
 var CC_METHOD = "CREDIT_CARD";
@@ -46704,14 +46849,14 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$b = "#15749D";
+var color$c = "#15749D";
 var hoverColor$5 = "#116285";
 var activeColor$8 = "#0E506D";
 var linkColor$4 = "#3176AA";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$K = {
-  color: color$b,
+var fallbackValues$L = {
+  color: color$c,
   hoverColor: hoverColor$5,
   activeColor: activeColor$8,
   linkColor: linkColor$4,
@@ -46836,7 +46981,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps), renderAutoPayControl());
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$K);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$L);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -47511,7 +47656,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$1 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$L = {
+var fallbackValues$M = {
   activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$1,
   arrowColor: arrowColor,
@@ -47719,7 +47864,7 @@ var Pagination = function Pagination(_ref3) {
   }));
 };
 
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$L);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$M);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -47803,7 +47948,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$M = {
+var fallbackValues$N = {
   backgroundColor: backgroundColor$b,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48123,7 +48268,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$M, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$N, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -48140,7 +48285,7 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$N = {
+var fallbackValues$O = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48199,7 +48344,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$N, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$O, "default");
 
 var backgroundColor$c = {
   "default": "#ffffff",
@@ -48230,7 +48375,7 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$O = {
+var fallbackValues$P = {
   backgroundColor: backgroundColor$c,
   linkColor: linkColor$6,
   border: border$3,
@@ -48295,7 +48440,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$O, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$P, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49094,7 +49239,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$5 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$P = {
+var fallbackValues$Q = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49284,7 +49429,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$P);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$Q);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -49581,7 +49726,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$Q = {
+var fallbackValues$R = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49660,12 +49805,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$Q);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$R = {
+var fallbackValues$S = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -49721,7 +49866,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$R);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -49765,7 +49910,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$S = {
+var fallbackValues$T = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -49812,7 +49957,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$S));
+var WelcomeModule$1 = /*#__PURE__*/memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -49867,7 +50012,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$T = {
+var fallbackValues$U = {
   pageBackground: pageBackground
 };
 
@@ -49916,7 +50061,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$T));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$U));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -49958,7 +50103,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$T));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$U));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -50003,7 +50148,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$T));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$U));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50057,7 +50202,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$T));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$U));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50128,7 +50273,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$T));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
 
-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, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, 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 };
+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, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, 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, LinkCard$1 as LinkCard, 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, PlusCircleIcon, 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