@thecb/components 8.4.5-beta.6 → 8.4.5-beta.8

package/dist/index.cjs.js

@@ -42951,32 +42951,43 @@ 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 activeBackgroundColor$1 = CORNFLOWER_BLUE;
+var backgroundColor$9 = LINK_WATER;
+var borderColor$5 = MOON_RAKER;
+var color$b = ROYAL_BLUE_VIVID;
+var fallbackValues$I = {
+  activeBackgroundColor: activeBackgroundColor$1,
+  backgroundColor: backgroundColor$9,
+  borderColor: borderColor$5,
+  color: color$b
+};
+
 var Container = styled__default(Box).withConfig({
   displayName: "LinkCardstyled__Container",
   componentId: "sc-l5q1h2-0"
 })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " transition:all .2s ease-in-out;&:hover,&:active{cursor:pointer;box-shadow:0px 0px 0px 0px rgba(41,42,51,0.1),0px 5px 11px 0px rgba(41,42,51,0.1),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);}&:hover:not(:active){", "}&:active{", "}"], function (_ref) {
-  var themeValues = _ref.themeValues;
-  return "\n    background-color: ".concat(themeValues.backgroundColor, ";\n    border: 1px solid ").concat(themeValues.borderColor, ";\n  ");
+  var theme = _ref.theme;
+  return "\n    background-color: ".concat(theme.backgroundColor, ";\n    border: 1px solid ").concat(theme.borderColor, ";\n  ");
 }, function (_ref2) {
-  var themeValues = _ref2.themeValues;
-  return "border: 1px solid ".concat(themeValues.borderColor, ";");
+  var theme = _ref2.theme;
+  return "border: 1px solid ".concat(theme.borderColor, ";");
 }, function (_ref3) {
-  var themeValues = _ref3.themeValues;
-  return "\n      background-color: ".concat(themeValues.activeBackgroundColor, ";\n      border: 1px solid ").concat(themeValues.color, ";\n    ;");
+  var theme = _ref3.theme;
+  return "\n      background-color: ".concat(theme.activeBackgroundColor, ";\n      border: 1px solid ").concat(theme.color, ";\n    ;");
 });
 var Title$2 = styled__default(Heading$1).withConfig({
   displayName: "LinkCardstyled__Title",
   componentId: "sc-l5q1h2-1"
 })(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref4) {
-  var themeValues = _ref4.themeValues;
-  return "color: ".concat(themeValues.color, ";");
+  var theme = _ref4.theme;
+  return "color: ".concat(theme.color, ";");
 });
 var Subtitle = styled__default(Paragraph$1).withConfig({
   displayName: "LinkCardstyled__Subtitle",
   componentId: "sc-l5q1h2-2"
 })(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150 %;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref5) {
-  var themeValues = _ref5.themeValues;
-  return "color: ".concat(themeValues.color, ";");
+  var theme = _ref5.theme;
+  return "color: ".concat(theme.color, ";");
 });
 var Footer = styled__default(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
@@ -43002,7 +43013,6 @@ var LinkCard = function LinkCard(_ref) {
       themeValues = _ref.themeValues,
       _ref$titleVariant = _ref.titleVariant,
       titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant;
-  console.log("LinkCard themeValues", themeValues);
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -43017,7 +43027,7 @@ var LinkCard = function LinkCard(_ref) {
     minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
     padding: "24px",
-    themeValues: themeValues,
+    theme: themeValues,
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
@@ -43035,26 +43045,27 @@ var LinkCard = function LinkCard(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: titleVariant,
-    themeValues: themeValues,
+    theme: themeValues,
     margin: 0
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 40px",
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
-    themeValues: themeValues
+    theme: themeValues
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
     padding: "0",
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Footer, {
-    themeValues: themeValues,
     direction: "row",
     childGap: "6px",
     justify: "space-between"
   }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
-}; // export default themeComponent(LinkCard, "LinkCard", fallbackValues, "default");
+};
+
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I); // export default LinkCard;
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -46750,12 +46761,12 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$9 = {
+var backgroundColor$a = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$I = {
+var fallbackValues$J = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -46765,7 +46776,7 @@ var fallbackValues$I = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$a
 };
 
 /*
@@ -46823,9 +46834,9 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$I, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$J, "default"));
 
-var backgroundColor$a = {
+var backgroundColor$b = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46833,8 +46844,8 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$J = {
-  backgroundColor: backgroundColor$a,
+var fallbackValues$K = {
+  backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
 
@@ -46874,7 +46885,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: {
@@ -46936,7 +46947,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";
@@ -46991,14 +47002,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,
@@ -47123,7 +47134,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,
@@ -47796,11 +47807,11 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
 var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
-var activeBackgroundColor$1 = WHITE;
+var activeBackgroundColor$2 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$L = {
+var fallbackValues$M = {
   activeColor: activeColor$9,
-  activeBackgroundColor: activeBackgroundColor$1,
+  activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
   numberColor: numberColor
@@ -48006,7 +48017,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,
@@ -48074,7 +48085,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !hideBackButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, backButton), !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
 };
 
-var backgroundColor$b = {
+var backgroundColor$c = {
   "default": "transparent",
   small: "transparent"
 };
@@ -48090,8 +48101,8 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$M = {
-  backgroundColor: backgroundColor$b,
+var fallbackValues$N = {
+  backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48410,7 +48421,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"
@@ -48427,7 +48438,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,
@@ -48486,9 +48497,9 @@ 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 = {
+var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -48517,8 +48528,8 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$O = {
-  backgroundColor: backgroundColor$c,
+var fallbackValues$P = {
+  backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -48582,7 +48593,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,
@@ -49379,13 +49390,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$P = {
+var fallbackValues$Q = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$5,
+  borderColor: borderColor$6,
   focusStyles: focusStyles
 };
 
@@ -49571,7 +49582,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;
@@ -49868,7 +49879,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
@@ -49947,12 +49958,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
@@ -50008,7 +50019,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;
@@ -50052,7 +50063,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,
@@ -50099,7 +50110,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$S));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50154,7 +50165,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$T = {
+var fallbackValues$U = {
   pageBackground: pageBackground
 };
 
@@ -50203,7 +50214,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,
@@ -50245,7 +50256,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,
@@ -50290,7 +50301,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,
@@ -50344,7 +50355,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,
@@ -50415,7 +50426,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$T));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
 
 exports.AccountNumberImage = AccountNumberImage;
 exports.AccountsAddIcon = AccountsAddIcon$1;
@@ -50517,7 +50528,7 @@ exports.Jumbo = Jumbo$1;
 exports.KioskImage = KioskImage;
 exports.LabeledAmount = LabeledAmount$1;
 exports.LineItem = LineItem$1;
-exports.LinkCard = LinkCard;
+exports.LinkCard = LinkCard$1;
 exports.Loading = Loading;
 exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;