@thecb/components 8.4.0-beta.17 → 8.4.0-beta.19

package/dist/index.cjs.js

@@ -19776,9 +19776,9 @@ var fontFamily$2 = {
   primary: "Public Sans",
   secondary: "Open Sans"
 };
-var hoverColor$2 = "#116285";
-var activeColor$3 = "#0E506D";
-var externalLinkColor = "#15749D";
+var hoverColor$2 = SAPPHIRE_BLUE;
+var activeColor$3 = PEACOCK_BLUE;
+var externalLinkColor = MATISSE_BLUE;
 var fallbackValues$a = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
@@ -42844,17 +42844,33 @@ 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),
-  hover: "".concat(CORNFLOWER_BLUE)
+  "default": MOON_RAKER
 };
 var color$b = {
-  "default": "".concat(ROYAL_BLUE_VIVID)
+  "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;&:hover,&:active{cursor:pointer;border-radius:8px;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:0;}&:active{border:1px solid ", ";}"], ROYAL_BLUE_VIVID);
+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;"]);
+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;"]);
+var Footer = styled__default(Stack).withConfig({
+  displayName: "LinkCardstyled__Footer",
+  componentId: "sc-l5q1h2-3"
+})(["align-items:center;width:100%;"]);
+
 var LinkCard = function LinkCard(_ref) {
   var _ref$title = _ref.title,
       title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
@@ -42876,19 +42892,18 @@ var LinkCard = function LinkCard(_ref) {
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
 
-  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__default.createElement(Box, {
-    border: "1px solid ".concat(MOON_RAKER, ";"),
+  return /*#__PURE__*/React__default.createElement(Container, {
+    border: "1px solid ".concat(themeValues.background, ";"),
     borderRadius: "8px",
     dataQa: "link-card-".concat(title),
     width: "100%",
-    maxWidth: "288px",
+    maxWidth: isMobile ? "100%" : "288px",
     minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
     padding: "24px",
-    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        ").concat(extraActiveStyles, "\n      "),
+    extraStyles: extraStyles,
+    hoverStyles: extraHoverStyles,
+    activeStyles: extraActiveStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
@@ -42901,30 +42916,27 @@ var LinkCard = function LinkCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: 0,
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.color,
-    margin: 0,
-    extraStyles: "\n              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-size: 16px;\n              line-height: 150%;\n              background-color: transparent;\n            "
+    margin: 0
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 40px",
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+  }, /*#__PURE__*/React__default.createElement(Subtitle, {
     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; font-size: 14px; line-height: 150%; letter-spacing: 0.14px;"
+    color: themeValues.color
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
     padding: "0",
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Footer, {
     direction: "row",
     childGap: "6px",
-    justify: "space-between",
-    extraStyles: "width: 100%; align-items: flex-end;"
-  }, showLeft && leftContent ? leftContent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), showRight && rightContent))));
+    justify: "space-between"
+  }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
 };
 
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");