@thecb/components 8.4.4 → 8.4.5-beta.3

package/dist/index.cjs.js

@@ -38107,7 +38107,7 @@ var background$2 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
 var black = "#000";
 var focusBorder = "".concat(MATISSE_BLUE);
-var themeValues = {
+var themeValues$1 = {
   background: background$2,
   white: white$1,
   black: black,
@@ -38117,7 +38117,7 @@ var themeValues = {
 var TypeaheadInputWrapper = styled__default.div.withConfig({
   displayName: "TypeaheadInput__TypeaheadInputWrapper",
   componentId: "sc-cumjdb-0"
-})(["display:flex;align-content:center;align-items:center;background:", ";input{border:0;height:72px;width:100%;padding:1.5rem;padding-left:1rem;min-width:100px;margin:0;box-sizing:border-box;position:relative;font-size:1.1rem;line-height:2rem;font-weight:400;background-color:", ";color:", ";box-shadow:none;border:1px solid transparent;&:focus{border:1px solid ", ";}}"], themeValues.background, themeValues.background, themeValues.black, themeValues.focusBorder);
+})(["display:flex;align-content:center;align-items:center;background:", ";input{border:0;height:72px;width:100%;padding:1.5rem;padding-left:1rem;min-width:100px;margin:0;box-sizing:border-box;position:relative;font-size:1.1rem;line-height:2rem;font-weight:400;background-color:", ";color:", ";box-shadow:none;border:1px solid transparent;&:focus{border:1px solid ", ";}}"], themeValues$1.background, themeValues$1.background, themeValues$1.black, themeValues$1.focusBorder);
 
 var TypeaheadInput = function TypeaheadInput(_ref) {
   var handleChange = _ref.handleChange,
@@ -42951,29 +42951,33 @@ 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": MOON_RAKER
-};
-var color$b = {
-  "default": ROYAL_BLUE_VIVID
-};
-var fallbackValues$I = {
-  background: background$3,
-  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;&: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){border:1px solid ", ";background-color:", ";}&:active{border:1px solid ", ";}"], MOON_RAKER, LINK_WATER, ROYAL_BLUE_VIVID);
+})(["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.cardBackgroundColor, ";\n    border: 1px solid ").concat(themeValues.cardBorderColor, ";\n  ");
+}, function (_ref2) {
+  var themeValues = _ref2.themeValues;
+  return "border: 1px solid ".concat(themeValues.cardBorderColor, ";");
+}, function (_ref3) {
+  var themeValues = _ref3.themeValues;
+  return "\n      background-color: ".concat(themeValues.cardActiveBackgroundColor, ";\n      border: 1px solid ").concat(themeValues.cardColor, ";\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;"]);
+})(["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.cardColor, ";");
+});
 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;"]);
+})(["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.cardColor, ";");
+});
 var Footer = styled__default(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
   componentId: "sc-l5q1h2-3"
@@ -42984,7 +42988,7 @@ var LinkCard = function LinkCard(_ref) {
       title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
       _ref$subtitle = _ref.subtitle,
       subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
-      themeValues = _ref.themeValues,
+      parentThemeValues = _ref.parentThemeValues,
       showLeft = _ref.showLeft,
       leftContent = _ref.leftContent,
       showRight = _ref.showRight,
@@ -42998,6 +43002,7 @@ var LinkCard = function LinkCard(_ref) {
       extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle,
       _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;
@@ -43005,7 +43010,6 @@ var LinkCard = function LinkCard(_ref) {
   var regex = /\W/g;
   var locatorSlug = title.toLowerCase().replaceAll(regex, "-");
   return /*#__PURE__*/React__default.createElement(Container, {
-    border: "1px solid ".concat(themeValues.background, ";"),
     borderRadius: "8px",
     dataQa: "link-card-".concat(locatorSlug),
     width: "100%",
@@ -43013,6 +43017,7 @@ var LinkCard = function LinkCard(_ref) {
     minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
     padding: "24px",
+    themeValues: parentThemeValues,
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
@@ -43030,28 +43035,26 @@ var LinkCard = function LinkCard(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: titleVariant,
-    weight: FONT_WEIGHT_SEMIBOLD,
-    color: themeValues.color,
+    themeValues: parentThemeValues,
     margin: 0
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 40px",
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
-    color: themeValues.color
+    themeValues: parentThemeValues
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
     padding: "0",
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Footer, {
+    themeValues: parentThemeValues,
     direction: "row",
     childGap: "6px",
     justify: "space-between"
   }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
-};
-
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");
+}; // export default themeComponent(LinkCard, "LinkCard", fallbackValues, "default");
 
 var LoginForm = function LoginForm(_ref) {
   var _emailErrorMessages;
@@ -46752,7 +46755,7 @@ var backgroundColor$9 = {
   largeTitle: WHITE,
   small: WHITE
 };
-var fallbackValues$J = {
+var fallbackValues$I = {
   fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
@@ -46820,7 +46823,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$J, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$I, "default"));
 
 var backgroundColor$a = {
   profile: "#3b414d",
@@ -46830,7 +46833,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$K = {
+var fallbackValues$J = {
   backgroundColor: backgroundColor$a,
   shadowColor: shadowColor
 };
@@ -46871,7 +46874,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$K, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$J, "profile");
 
 var menu = posed.div({
   invisible: {
@@ -46933,7 +46936,7 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$J, "profile");
 
 var ACH_METHOD = "BANK_ACCOUNT";
 var CC_METHOD = "CREDIT_CARD";
@@ -46988,14 +46991,14 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
-var color$c = "#15749D";
+var color$b = "#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$L = {
-  color: color$c,
+var fallbackValues$K = {
+  color: color$b,
   hoverColor: hoverColor$5,
   activeColor: activeColor$8,
   linkColor: linkColor$4,
@@ -47120,7 +47123,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, modalExtraProps), renderAutoPayControl());
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$L);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$K);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -47795,7 +47798,7 @@ var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
 var activeBackgroundColor$1 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
-var fallbackValues$M = {
+var fallbackValues$L = {
   activeColor: activeColor$9,
   activeBackgroundColor: activeBackgroundColor$1,
   arrowColor: arrowColor,
@@ -48003,7 +48006,7 @@ var Pagination = function Pagination(_ref3) {
   }));
 };
 
-var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$M);
+var Pagination$1 = themeComponent(Pagination, "Pagination", fallbackValues$L);
 
 var PaymentButtonBar = function PaymentButtonBar(_ref) {
   var _ref$isForwardButtonD = _ref.isForwardButtonDisabled,
@@ -48087,7 +48090,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "p"
 };
-var fallbackValues$N = {
+var fallbackValues$M = {
   backgroundColor: backgroundColor$b,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -48407,7 +48410,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$N, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$M, "default");
 
 var linkColor$5 = {
   "default": "#3176AA"
@@ -48424,7 +48427,7 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$O = {
+var fallbackValues$N = {
   linkColor: linkColor$5,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
@@ -48483,7 +48486,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$O, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$N, "default");
 
 var backgroundColor$c = {
   "default": "#ffffff",
@@ -48514,7 +48517,7 @@ var modalLinkHoverFocus$2 = {
   "default": standardInteractionStyles,
   footer: standardInteractionStyles
 };
-var fallbackValues$P = {
+var fallbackValues$O = {
   backgroundColor: backgroundColor$c,
   linkColor: linkColor$6,
   border: border$3,
@@ -48579,7 +48582,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$P, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$O, "default");
 
 var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   var onCheck = _ref.onCheck,
@@ -49378,7 +49381,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$5 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$Q = {
+var fallbackValues$P = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -49568,7 +49571,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$Q);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$P);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -49865,7 +49868,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$R = {
+var fallbackValues$Q = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -49944,12 +49947,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$R);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$Q);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$S = {
+var fallbackValues$R = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -50005,7 +50008,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$S);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$R);
 
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;
@@ -50049,7 +50052,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
-var fallbackValues$T = {
+var fallbackValues$S = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -50096,7 +50099,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$T));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$S));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -50151,7 +50154,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#FBFCFD";
-var fallbackValues$U = {
+var fallbackValues$T = {
   pageBackground: pageBackground
 };
 
@@ -50200,7 +50203,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$U));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$T));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -50242,7 +50245,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$U));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$T));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -50287,7 +50290,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$U));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$T));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -50341,7 +50344,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$U));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$T));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -50412,7 +50415,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$T));
 
 exports.AccountNumberImage = AccountNumberImage;
 exports.AccountsAddIcon = AccountsAddIcon$1;
@@ -50514,7 +50517,7 @@ exports.Jumbo = Jumbo$1;
 exports.KioskImage = KioskImage;
 exports.LabeledAmount = LabeledAmount$1;
 exports.LineItem = LineItem$1;
-exports.LinkCard = LinkCard$1;
+exports.LinkCard = LinkCard;
 exports.Loading = Loading;
 exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;