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

package/dist/index.esm.js

@@ -42830,7 +42830,8 @@ 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)
+  "default": "".concat(WHITE),
+  hover: "".concat(CORNFLOWER_BLUE)
 };
 var color$b = {
   "default": "".concat(ROYAL_BLUE_VIVID)
@@ -42855,10 +42856,11 @@ var LinkCard = function LinkCard(_ref) {
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       _ref$extraHoverStyles = _ref.extraHoverStyles,
-      extraHoverStyles = _ref$extraHoverStyles === void 0 ? "" : _ref$extraHoverStyles;
-  var activeHoverStyles = "\n    border-radius: 8px;\n    cursor: pointer;\n    border: 1px solid ".concat(themeValues.color, ";\n    background: ").concat(LINK_WATER, ";\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    ").concat(extraHoverStyles, "\n  ");
+      extraHoverStyles = _ref$extraHoverStyles === void 0 ? "" : _ref$extraHoverStyles,
+      _ref$extraActiveStyle = _ref.extraActiveStyles,
+      extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle;
+  var activeAndHoverStyles = "cursor: pointer;\n    border-radius: 8px;\n    border: 1px solid ".concat(themeValues.color, ";\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);");
   return /*#__PURE__*/React.createElement(Box, {
-    background: LINK_WATER,
     border: "1px solid ".concat(MOON_RAKER, ";"),
     borderRadius: "8px",
     dataQa: "link-card-".concat(title),
@@ -42867,24 +42869,30 @@ var LinkCard = function LinkCard(_ref) {
     minWidth: "240px",
     minHeight: "141px",
     padding: "24px",
-    extraStyles: "\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 40px;\n        flex-shrink: 0;\n        align-self: stretch;\n        ".concat(extraStyles, "\n      "),
-    hoverStyles: activeHoverStyles,
-    activeStyles: activeHoverStyles,
+    extraStyles: "\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n        gap: 40px;\n        flex-shrink: 0;\n        align-self: stretch;\n        ".concat(extraStyles, "\n      "),
+    hoverStyles: "".concat(activeAndHoverStyles, "\n        border: 0;\n        ").concat(extraHoverStyles, "\n      "),
+    activeStyles: "".concat(activeAndHoverStyles, "\n        background-color: ").concat(CORNFLOWER_BLUE, ";\n        ").concat(extraActiveStyles, "\n      "),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
     fullHeight: true
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: 0
+    padding: 0,
+    width: "100%"
   }, /*#__PURE__*/React.createElement(Heading$1, {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.color,
     margin: 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%;"
+    extraStyles: "display: -webkit-box; \n              -webkit-box-orient: vertical; \n              -webkit-line-clamp: 2; \n              align-self: stretch;\n              overflow: hidden; \n              text-overflow: ellipsis; \n              font-family: Public Sans; \n              font-size: 16px; \n              font-style: normal; \n              font-weight: 600; \n              line-height: 150%;\n              ".concat(extraStyles, "\n            ")
   }, title)), /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 40px"
+    padding: "0 0 40px",
+    width: "100%"
   }, /*#__PURE__*/React.createElement(Paragraph$1, {
     variant: "pS",
     color: themeValues.color,
@@ -42892,14 +42900,14 @@ var LinkCard = function LinkCard(_ref) {
   }, subtitle)), /*#__PURE__*/React.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
-    padding: "0"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    justify: "space-between"
+    padding: "0",
+    width: "100%"
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
-    childGap: "6px"
-  }, showLeft && leftContent, showRight && rightContent)))));
+    childGap: "6px",
+    justify: "space-between",
+    extraStyles: "width: 100%; justify-content: space-between"
+  }, showLeft && leftContent, showRight && rightContent))));
 };
 
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");