@thecb/components 8.4.0-beta.2 → 8.4.0-beta.20

package/dist/index.cjs.js

@@ -4959,8 +4959,8 @@ Name already taken? If you can't use the existing color, then use thesaurus.com
 to the one generated by name-that-color.
 */
 var BLACK = "#000000";
-var TRANSPARENT = "transparent"; // WHITE
-
+var TRANSPARENT = "transparent";
+var LINK_WATER = "#FEFEFE";
 var WHITE = "#FFFFFF";
 var SOLITUDE_WHITE = "#EBEDF1";
 var SEASHELL_WHITE = "#F1F1F1";
@@ -5007,6 +5007,7 @@ var MARINER_BLUE = "#2E75D2";
 var CURIOUS_BLUE = "#27A9E1";
 var SELAGO_BLUE = "#F2F8FD";
 var ONAHAU_BLUE = "#D1ECFF";
+var MOON_RAKER = "#C4CEF4";
 var PICKLED_BLUE = "#2C3E50";
 var CERULEAN_BLUE = "#0D8DC4";
 var FOAM_BLUE = "#EFF4FD";
@@ -5103,6 +5104,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BLACK: BLACK,
   TRANSPARENT: TRANSPARENT,
   WHITE: WHITE,
+  LINK_WATER: LINK_WATER,
   SOLITUDE_WHITE: SOLITUDE_WHITE,
   SEASHELL_WHITE: SEASHELL_WHITE,
   ALABASTER_WHITE: ALABASTER_WHITE,
@@ -5140,6 +5142,7 @@ var colors = /*#__PURE__*/Object.freeze({
   CURIOUS_BLUE: CURIOUS_BLUE,
   SELAGO_BLUE: SELAGO_BLUE,
   ONAHAU_BLUE: ONAHAU_BLUE,
+  MOON_RAKER: MOON_RAKER,
   PICKLED_BLUE: PICKLED_BLUE,
   CERULEAN_BLUE: CERULEAN_BLUE,
   FOAM_BLUE: FOAM_BLUE,
@@ -17674,13 +17677,16 @@ var ArrowRightCircleIconSmall = function ArrowRightCircleIconSmall(_ref) {
 
 var ArrowRightIcon = function ArrowRightIcon(_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
+      _ref$labeledBy = _ref.labeledBy,
+      labeledBy = _ref$labeledBy === void 0 ? "" : _ref$labeledBy;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
-    fill: "none"
+    fill: "none",
+    "aria-labeledBy": labeledBy
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18102,13 +18108,16 @@ var ChargebackReversalIconMedium = function ChargebackReversalIconMedium(_ref) {
 
 var PlusCircleIcon = function PlusCircleIcon(_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
+      _ref$labeledBy = _ref.labeledBy,
+      labeledBy = _ref$labeledBy === void 0 ? "" : _ref$labeledBy;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
-    fill: "none"
+    fill: "none",
+    "aria-labelledby": labeledBy
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -19767,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,
@@ -42835,78 +42844,99 @@ 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": MOON_RAKER
 };
 var color$b = {
-  "default": "".concat(ROYAL_BLUE_VIVID)
+  "default": ROYAL_BLUE_VIVID
 };
 var fallbackValues$I = {
   background: background$3,
   color: color$b
 };
 
-// import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+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{margin-top:2px;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: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$variant = _ref.variant,
-      _ref$title = _ref.title,
+  var _ref$title = _ref.title,
       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,
-      path = _ref.path,
       showLeft = _ref.showLeft,
       leftContent = _ref.leftContent,
       showRight = _ref.showRight,
-      rightContent = _ref.rightContent;
-  var navigate = reactRouterDom.useNavigate();
-  var activeHoverStyles = "\n    border-radius: 8px;\n    cursor: pointer;\n    border: 1px solid ".concat(themeValues.color, ";\n    background: var(--primary-color-primary-10, #EBEFFB);\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    .show-on-hover {color: ").concat(themeValues.color, ";}\n  ");
-  return /*#__PURE__*/React__default.createElement(Box, {
-    background: "#FEFEFE" // --grays-cool-gray-00
-    ,
-    border: "1px solid #C4CEF4;" // --primary-color-primary-30
-    ,
+      rightContent = _ref.rightContent,
+      onClick = _ref.onClick,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+      _ref$extraHoverStyles = _ref.extraHoverStyles,
+      extraHoverStyles = _ref$extraHoverStyles === void 0 ? "" : _ref$extraHoverStyles,
+      _ref$extraActiveStyle = _ref.extraActiveStyles,
+      extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  return /*#__PURE__*/React__default.createElement(Container, {
+    border: "1px solid ".concat(themeValues.background, ";"),
     borderRadius: "8px",
     dataQa: "link-card-".concat(title),
     width: "100%",
-    maxWidth: "288px",
-    minWidth: "240px",
+    maxWidth: isMobile ? "100%" : "288px",
+    minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
-    padding: "16px 24px",
-    extraStyles: " display: flex; flex-direction: column; align-items: flex-start; gap: 40px; flex-shrink: 0; align-self: stretch;",
-    hoverStyles: activeHoverStyles,
-    activeStyles: activeHoverStyles,
-    onClick: function onClick() {
-      navigate(path);
-    }
+    padding: "24px",
+    extraStyles: extraStyles,
+    hoverStyles: extraHoverStyles,
+    activeStyles: extraActiveStyles,
+    onClick: onClick
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
     fullHeight: true
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "1rem 1rem 0 1rem"
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    padding: 0,
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Title$2, {
     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%;"
+    margin: 0
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 1rem 40px"
-    /* minHeight={"4.25rem"}*/
-
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    padding: "0 0 40px",
+    width: "100%"
+  }, /*#__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; /* CB Standard/Desktop/D - P Small - Regular */ font-family: Public Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 0.14px;"
+    color: themeValues.color
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
-    padding: "0 1rem 1rem 1rem"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Footer, {
     direction: "row",
+    childGap: "6px",
     justify: "space-between"
-  }, showLeft && leftContent, showRight && rightContent))));
+  }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
 };
 
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");