@thecb/components 10.2.4-beta.4 → 10.2.4-beta.5

package/dist/index.esm.js

@@ -18979,13 +18979,15 @@ var background$1 = {
   info: "".concat(INFO_BLUE),
   warn: "".concat(HALF_COLONIAL_WHITE),
   primary: "".concat(CORNFLOWER_BLUE),
-  success: "".concat(HINT_GREEN)
+  success: "".concat(HINT_GREEN),
+  disabled: "".concat(ATHENS_GREY)
 };
 var color$4 = {
   info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
   primary: "".concat(ROYAL_BLUE_VIVID),
-  success: "".concat(SEA_GREEN)
+  success: "".concat(SEA_GREEN),
+  disabled: "".concat(GHOST_GREY)
 };
 var fallbackValues$7 = {
   background: background$1,
@@ -42457,10 +42459,22 @@ var PROPERTIES_COMMERCIAL_AUTO_ICON = "PROPERTIES_COMMERCIAL_AUTO";
 var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), ACCOUNTS_DENTAL_ICON, AccountDentalIcon), ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), PROPERTIES_LAND_ICON, PropertyLandIcon), PROPERTIES_CAR_ICON, PropertyCarIcon), PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), MISC_BILL_ICON, AccountBillIcon));
 
-var activeBackgroundColor$1 = CORNFLOWER_BLUE;
-var backgroundColor$9 = LINK_WATER;
-var borderColor$5 = MOON_RAKER;
-var color$b = ROYAL_BLUE_VIVID;
+var activeBackgroundColor$1 = {
+  primary: "".concat(CORNFLOWER_BLUE),
+  disabled: "".concat(GHOST_GREY)
+};
+var backgroundColor$9 = {
+  primary: "".concat(LINK_WATER),
+  disabled: "".concat(ATHENS_GREY)
+};
+var borderColor$5 = {
+  primary: "".concat(MOON_RAKER),
+  disabled: "".concat(STORM_GREY)
+};
+var color$b = {
+  primary: "".concat(ROYAL_BLUE_VIVID),
+  disabled: "".concat(GHOST_GREY)
+};
 var fallbackValues$I = {
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$9,
@@ -42501,7 +42515,9 @@ var Footer = styled(Stack).withConfig({
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
-  var _ref$title = _ref.title,
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
+    _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,
@@ -42534,10 +42550,10 @@ var LinkCard = function LinkCard(_ref) {
     minHeight: "141px",
     padding: "24px",
     theme: themeValues,
-    extraStyles: disabled ? extraStyles + "background-color: ".concat(ATHENS_GREY, " !important; cursor: default;") : extraStyles,
-    hoverStyles: disabled ? "" : extraHoverStyles,
-    activeStyles: disabled ? "" : extraActiveStyles,
-    onClick: disabled ? noop : onClick,
+    extraStyles: extraStyles,
+    hoverStyles: extraHoverStyles,
+    activeStyles: extraActiveStyles,
+    onClick: variant === "disabled" || disabled ? noop : onClick,
     "aria-disabled": disabled
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
@@ -42549,16 +42565,14 @@ var LinkCard = function LinkCard(_ref) {
     fullHeight: true
   }, /*#__PURE__*/React.createElement(Box, {
     padding: 0,
-    width: "100%",
-    extraStyles: disabled ? "opacity: 0.5;" : ""
+    width: "100%"
   }, /*#__PURE__*/React.createElement(Title$2, {
     variant: titleVariant,
     theme: themeValues,
     margin: 0
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 40px",
-    width: "100%",
-    extraStyles: disabled ? "opacity: 0.5;" : ""
+    width: "100%"
   }, /*#__PURE__*/React.createElement(Subtitle, {
     variant: "pS",
     theme: themeValues
@@ -42566,15 +42580,14 @@ var LinkCard = function LinkCard(_ref) {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
     padding: "0",
-    width: "100%",
-    extraStyles: disabled ? "opacity: 0.5;" : ""
+    width: "100%"
   }, /*#__PURE__*/React.createElement(Footer, {
     direction: "row",
     childGap: "6px",
     justify: "space-between"
   }, showLeft && !leftContent && /*#__PURE__*/React.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
 };
-var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I);
+var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "primary");
 
 var LoginForm = function LoginForm(_ref) {
   var clearOnDismount = _ref.clearOnDismount,