@thecb/components 10.4.0-beta.7 → 10.4.0-beta.8

package/dist/index.esm.js

@@ -42640,23 +42640,31 @@ 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 disabledBackgroundColor$1 = {
+  primary: TRANSPARENT
+};
+var disabledBorderColor$1 = {
+  primary: GHOST_GREY
+};
+var disabledColor$1 = {
+  primary: MANATEE_GREY
+};
 var activeBackgroundColor$1 = {
-  primary: "".concat(CORNFLOWER_BLUE),
-  disabled: "".concat(TRANSPARENT)
+  primary: CORNFLOWER_BLUE
 };
 var backgroundColor$9 = {
-  primary: "".concat(LINK_WATER),
-  disabled: "".concat(TRANSPARENT)
+  primary: LINK_WATER
 };
 var borderColor$5 = {
-  primary: "".concat(MOON_RAKER),
-  disabled: "".concat(GHOST_GREY)
+  primary: MOON_RAKER
 };
 var color$b = {
-  primary: "".concat(ROYAL_BLUE_VIVID),
-  disabled: "".concat(MANATEE_GREY)
+  primary: ROYAL_BLUE_VIVID
 };
 var fallbackValues$I = {
+  disabledBackgroundColor: disabledBackgroundColor$1,
+  disabledBorderColor: disabledBorderColor$1,
+  disabledColor: disabledColor$1,
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$9,
   borderColor: borderColor$5,
@@ -42666,35 +42674,30 @@ var fallbackValues$I = {
 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;", " transition:all .2s ease-in-out;&:hover,&:active{cursor:", ";box-shadow:", ";}&:hover:not(:active){", "}&:active{", "}"], function (_ref) {
-  var theme = _ref.theme;
-  return "\n    background-color: ".concat(theme.backgroundColor, ";\n    border: 1px solid ").concat(theme.borderColor, ";\n  ");
+})(["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;", ""], function (_ref) {
+  var isDisabled = _ref.isDisabled,
+    theme = _ref.theme;
+  return "\n    background-color: ".concat(isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n    border: 1px solid ").concat(isDisabled ? theme.disabledBorderColor : theme.borderColor, ";\n  ");
 }, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? "default" : "pointer";
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return "\n      ".concat(disabled ? "none" : "0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n      0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n      0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n      0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n      0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n      0px 80px 33px 0px rgba(41, 42, 51, 0);", "\n    ");
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return "border: 1px solid ".concat(theme.borderColor, ";");
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return "\n      background-color: ".concat(theme.activeBackgroundColor, ";\n      border: 1px solid ").concat(theme.borderColor, ";\n    ;");
+  var isDisabled = _ref2.isDisabled,
+    theme = _ref2.theme;
+  return isDisabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n\n        &:hover:not(:active) {\n          border: 1px solid ".concat(theme.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(theme.activeBackgroundColor, ";\n          border: 1px solid ").concat(theme.borderColor, ";\n        }\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;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref6) {
-  var theme = _ref6.theme;
-  return "color: ".concat(theme.color, ";");
+})(["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 (_ref3) {
+  var isDisabled = _ref3.isDisabled,
+    theme = _ref3.theme;
+  return "color: ".concat(isDisabled ? theme.disabledColor : theme.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;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref7) {
-  var theme = _ref7.theme;
-  return "color: ".concat(theme.color, ";");
+})(["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 (_ref4) {
+  var isDisabled = _ref4.isDisabled,
+    theme = _ref4.theme;
+  return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
 });
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
@@ -42702,8 +42705,7 @@ var Footer = styled(Stack).withConfig({
 })(["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,
@@ -42740,7 +42742,8 @@ var LinkCard = function LinkCard(_ref) {
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
     onClick: disabled ? noop$1 : onClick,
-    "aria-disabled": disabled
+    "aria-disabled": disabled,
+    isDisabled: disabled
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -42755,13 +42758,15 @@ var LinkCard = function LinkCard(_ref) {
   }, /*#__PURE__*/React.createElement(Title$2, {
     variant: titleVariant,
     theme: themeValues,
-    margin: 0
+    margin: 0,
+    isDisabled: disabled
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 40px",
     width: "100%"
   }, /*#__PURE__*/React.createElement(Subtitle, {
     variant: "pS",
-    theme: themeValues
+    theme: themeValues,
+    isDisabled: disabled
   }, subtitle)), /*#__PURE__*/React.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",