@thecb/components 8.4.4 → 8.4.5-beta.2

package/dist/index.esm.js

@@ -42943,29 +42943,52 @@ 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 = {
+var activeBackgroundColor$1 = {
+  "default": CORNFLOWER_BLUE
+};
+var backgroundColor$9 = {
+  "default": LINK_WATER
+};
+var borderColor$5 = {
   "default": MOON_RAKER
 };
 var color$b = {
   "default": ROYAL_BLUE_VIVID
 };
 var fallbackValues$I = {
-  background: background$3,
+  activeBackgroundColor: activeBackgroundColor$1,
+  backgroundColor: backgroundColor$9,
+  borderColor: borderColor$5,
   color: color$b
 };
 
 var Container = styled(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.backgroundColor, ";\n    border: 1px solid ").concat(themeValues.borderColor, ";\n  ");
+}, function (_ref2) {
+  var themeValues = _ref2.themeValues;
+  return "border: 1px solid ".concat(themeValues.borderColor, ";");
+}, function (_ref3) {
+  var themeValues = _ref3.themeValues;
+  return "\n      background-color: ".concat(themeValues.activeBackgroundColor, ";\n      border: 1px solid ").concat(themeValues.color, ";\n    ;");
+});
 var Title$2 = styled(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.color, ";");
+});
 var Subtitle = styled(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.color, ";");
+});
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
   componentId: "sc-l5q1h2-3"
@@ -42990,6 +43013,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 = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -42997,7 +43021,6 @@ var LinkCard = function LinkCard(_ref) {
   var regex = /\W/g;
   var locatorSlug = title.toLowerCase().replaceAll(regex, "-");
   return /*#__PURE__*/React.createElement(Container, {
-    border: "1px solid ".concat(themeValues.background, ";"),
     borderRadius: "8px",
     dataQa: "link-card-".concat(locatorSlug),
     width: "100%",
@@ -43005,6 +43028,7 @@ var LinkCard = function LinkCard(_ref) {
     minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
     padding: "24px",
+    themeValues: themeValues,
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
@@ -43022,21 +43046,21 @@ var LinkCard = function LinkCard(_ref) {
     width: "100%"
   }, /*#__PURE__*/React.createElement(Title$2, {
     variant: titleVariant,
-    weight: FONT_WEIGHT_SEMIBOLD,
-    color: themeValues.color,
+    themeValues: themeValues,
     margin: 0
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 40px",
     width: "100%"
   }, /*#__PURE__*/React.createElement(Subtitle, {
     variant: "pS",
-    color: themeValues.color
+    themeValues: themeValues
   }, subtitle)), /*#__PURE__*/React.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
     padding: "0",
     width: "100%"
   }, /*#__PURE__*/React.createElement(Footer, {
+    themeValues: themeValues,
     direction: "row",
     childGap: "6px",
     justify: "space-between"
@@ -46739,7 +46763,7 @@ var borderRadius = {
   largeTitle: "0.25rem",
   small: "0.25rem"
 };
-var backgroundColor$9 = {
+var backgroundColor$a = {
   "default": WHITE,
   largeTitle: WHITE,
   small: WHITE
@@ -46754,7 +46778,7 @@ var fallbackValues$J = {
   titleSpacing: titleSpacing,
   boxShadow: boxShadow$1,
   borderRadius: borderRadius,
-  backgroundColor: backgroundColor$9
+  backgroundColor: backgroundColor$a
 };
 
 /*
@@ -46814,7 +46838,7 @@ var Module = function Module(_ref) {
 
 var Module$1 = /*#__PURE__*/memo(themeComponent(Module, "Module", fallbackValues$J, "default"));
 
-var backgroundColor$a = {
+var backgroundColor$b = {
   profile: "#3b414d",
   cms: "#3b414d"
 };
@@ -46823,7 +46847,7 @@ var shadowColor = {
   cms: "#292A33"
 };
 var fallbackValues$K = {
-  backgroundColor: backgroundColor$a,
+  backgroundColor: backgroundColor$b,
   shadowColor: shadowColor
 };
 
@@ -47785,11 +47809,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$M = {
   activeColor: activeColor$9,
-  activeBackgroundColor: activeBackgroundColor$1,
+  activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
   numberColor: numberColor
@@ -48063,7 +48087,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
   }, !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"
 };
@@ -48080,7 +48104,7 @@ var labeledAmountTotal = {
   small: "p"
 };
 var fallbackValues$N = {
-  backgroundColor: backgroundColor$b,
+  backgroundColor: backgroundColor$c,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
   labeledAmountTotal: labeledAmountTotal
@@ -48477,7 +48501,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
 
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$O, "default");
 
-var backgroundColor$c = {
+var backgroundColor$d = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
@@ -48507,7 +48531,7 @@ var modalLinkHoverFocus$2 = {
   footer: standardInteractionStyles
 };
 var fallbackValues$P = {
-  backgroundColor: backgroundColor$c,
+  backgroundColor: backgroundColor$d,
   linkColor: linkColor$6,
   border: border$3,
   fontSize: fontSize$b,
@@ -49368,13 +49392,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$Q = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
-  borderColor: borderColor$5,
+  borderColor: borderColor$6,
   focusStyles: focusStyles
 };