@thecb/components 10.2.4-beta.1 → 10.2.4-beta.11

package/dist/index.cjs.js

@@ -6504,7 +6504,7 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
+var _excluded$3 = ["autocompleteValue", "padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "disabled", "children"];
 
 /*
   Box component to create generic boxes
@@ -6552,6 +6552,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$srOnly = _ref.srOnly,
     srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
     dataQa = _ref.dataQa,
+    _ref$disabled = _ref.disabled,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(BoxWrapper, _extends({
@@ -12910,12 +12911,13 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     children = _ref2.children,
     extraDisabledStyles = _ref2.extraDisabledStyles,
     rest = _objectWithoutProperties(_ref2, _excluded$h);
+  var isGhostVariant = variant === "ghost" || variant === "smallGhost";
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var isMobile = themeContext.isMobile;
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
-  var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      outline: 3px solid #6D717E;\n      outline-offset: 2px;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
+  var disabledStyles = "\n    background-color: ".concat(isGhostVariant ? "transparent;" : "#6D717E;", ";\n    border-color: ").concat(isGhostVariant ? "transparent;" : "#6D717E;", ";\n    color: ").concat(isGhostVariant ? "#6D717E;" : "#FFFFFF", ";\n    cursor: default;\n    &:focus {\n      outline: 3px solid #6D717E;\n      outline-offset: 2px;\n    }\n    ").concat(extraDisabledStyles, "\n  ");
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     variant: variant,
@@ -13014,7 +13016,9 @@ var AccountsIcon$1 = themeComponent(AccountsIcon, "Icons", fallbackValues$2, "in
 // Fill color based on default "success" variant color
 var AutopayIcon = function AutopayIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? "#317D4F" : _ref$fill;
+    fill = _ref$fill === void 0 ? "#317D4F" : _ref$fill,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#317D4F" : _ref$color;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "16",
     height: "16",
@@ -13038,7 +13042,7 @@ var AutopayIcon = function AutopayIcon(_ref) {
     mask: "url(#mask0_5560_39870)"
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M0 0H16V16H0V0Z",
-    fill: fill
+    fill: fill || color
   })));
 };
 
@@ -18985,13 +18989,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(GRECIAN_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(MANATEE_GREY)
 };
 var fallbackValues$7 = {
   background: background$1,
@@ -19015,10 +19021,12 @@ var Badge = function Badge(_ref) {
   return /*#__PURE__*/React__default.createElement(StyledBadgeContainer, {
     background: themeValues.background
   }, iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    color: themeValues.color,
     fill: themeValues.color
   }), /*#__PURE__*/React__default.createElement(StyledBadge, {
     color: themeValues.color
   }, label), !iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    color: themeValues.color,
     fill: themeValues.color
   }));
 };
@@ -27584,18 +27592,18 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
   return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
     "data-qa": dataQa,
-    disabled: disabled
+    "aria-disabled": disabled
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
-    extraStyles: "cursor: pointer;"
+    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
   }, children)) : /*#__PURE__*/React__default.createElement(Box, {
     onClick: disabled ? noop : action,
     padding: "0",
     minHeight: "100%",
     dataQa: dataQa,
     "aria-disabled": disabled,
-    extraStyles: disabled ? "cursor: default; opacity: 0.7;" : "cursor: pointer; opacity: 1;"
+    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
   }, children);
 };
 var Placeholder = function Placeholder(_ref2) {
@@ -27612,6 +27620,7 @@ var Placeholder = function Placeholder(_ref2) {
     dataQa = _ref2.dataQa,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+  var tintedColor = "".concat(curriedTint$1(0.9, themeValues.color));
   return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
@@ -27625,7 +27634,7 @@ var Placeholder = function Placeholder(_ref2) {
     minHeight: themeValues.height,
     hiddenStyles: !visible,
     extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
-    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
+    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : tintedColor, ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -42462,10 +42471,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(TRANSPARENT)
+};
+var backgroundColor$9 = {
+  primary: "".concat(LINK_WATER),
+  disabled: "".concat(TRANSPARENT)
+};
+var borderColor$5 = {
+  primary: "".concat(MOON_RAKER),
+  disabled: "".concat(GHOST_GREY)
+};
+var color$b = {
+  primary: "".concat(ROYAL_BLUE_VIVID),
+  disabled: "".concat(MANATEE_GREY)
+};
 var fallbackValues$I = {
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$9,
@@ -42476,28 +42497,34 @@ var fallbackValues$I = {
 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;", " transition:all .2s ease-in-out;&:hover,&:active{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){", "}&:active{", "}"], function (_ref) {
+})(["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  ");
+  return "\n    background-color: ".concat(theme.backgroundColor, ";\n    border: 1px solid ").concat(theme.color, ";\n  ");
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return "border: 1px solid ".concat(theme.borderColor, ";");
+  var disabled = _ref2.disabled;
+  return disabled ? "default" : "pointer";
 }, function (_ref3) {
-  var theme = _ref3.theme;
+  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.color, ";\n    ;");
 });
 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;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref4) {
-  var theme = _ref4.theme;
+})(["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, ";");
 });
 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;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref5) {
-  var theme = _ref5.theme;
+})(["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, ";");
 });
 var Footer = styled__default(Stack).withConfig({
@@ -42506,7 +42533,8 @@ var Footer = styled__default(Stack).withConfig({
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
-  var _ref$title = _ref.title,
+  var _ref$variant = _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,
@@ -42523,7 +42551,9 @@ var LinkCard = function LinkCard(_ref) {
     extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle,
     themeValues = _ref.themeValues,
     _ref$titleVariant = _ref.titleVariant,
-    titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant;
+    titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var regex = /\W/g;
@@ -42540,7 +42570,8 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: onClick
+    onClick: disabled ? noop : onClick,
+    disabled: disabled
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -42571,9 +42602,11 @@ var LinkCard = function LinkCard(_ref) {
     direction: "row",
     childGap: "6px",
     justify: "space-between"
-  }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
+  }, showLeft && !!leftContent ? leftContent : /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "margin-right: auto;"
+  }), showRight && !!rightContent && 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,