@thecb/components 10.2.4-beta.0 → 10.2.4-beta.10

package/dist/index.esm.js

@@ -6496,7 +6496,7 @@ var BoxWrapper = styled(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
@@ -6544,6 +6544,7 @@ var Box = /*#__PURE__*/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.createElement(BoxWrapper, _extends({
@@ -12902,12 +12903,13 @@ var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     children = _ref2.children,
     extraDisabledStyles = _ref2.extraDisabledStyles,
     rest = _objectWithoutProperties(_ref2, _excluded$h);
+  var isGhostVariant = variant === "ghost" || variant === "smallGhost";
   var themeContext = useContext(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.createElement(Box, _extends({
     ref: ref,
     variant: variant,
@@ -12938,7 +12940,7 @@ var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     variant: themeValues.fontSizeVariant,
     color: themeValues.color,
     textWrap: textWrap,
-    extraStyles: textExtraStyles
+    extraStyles: disabled ? textExtraStyles + disabledStyles : textExtraStyles
   }, text)));
 });
 
@@ -13006,7 +13008,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.createElement("svg", {
     width: "16",
     height: "16",
@@ -13030,7 +13034,7 @@ var AutopayIcon = function AutopayIcon(_ref) {
     mask: "url(#mask0_5560_39870)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0 0H16V16H0V0Z",
-    fill: fill
+    fill: fill || color
   })));
 };
 
@@ -18977,13 +18981,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,
@@ -19007,10 +19013,12 @@ var Badge = function Badge(_ref) {
   return /*#__PURE__*/React.createElement(StyledBadgeContainer, {
     background: themeValues.background
   }, iconOnLeft && Icon && /*#__PURE__*/React.createElement(Icon, {
+    color: themeValues.color,
     fill: themeValues.color
   }), /*#__PURE__*/React.createElement(StyledBadge, {
     color: themeValues.color
   }, label), !iconOnLeft && Icon && /*#__PURE__*/React.createElement(Icon, {
+    color: themeValues.color,
     fill: themeValues.color
   }));
 };
@@ -27576,18 +27584,18 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
   return isLink ? /*#__PURE__*/React.createElement(Link, {
     to: destination,
     "data-qa": dataQa,
-    disabled: disabled
+    "aria-disabled": disabled
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minHeight: "100%",
-    extraStyles: "cursor: pointer;"
+    extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
   }, children)) : /*#__PURE__*/React.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) {
@@ -27604,6 +27612,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.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
@@ -27617,7 +27626,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.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -42454,10 +42463,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(ATHENS_GREY)
+};
+var backgroundColor$9 = {
+  primary: "".concat(LINK_WATER),
+  disabled: "".concat(ATHENS_GREY)
+};
+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,
@@ -42498,7 +42519,8 @@ 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,
+    _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,
@@ -42515,7 +42537,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 = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   var regex = /\W/g;
@@ -42532,7 +42556,8 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: onClick
+    onClick: disabled ? noop : onClick,
+    "aria-disabled": disabled
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -42563,9 +42588,11 @@ var LinkCard = function LinkCard(_ref) {
     direction: "row",
     childGap: "6px",
     justify: "space-between"
-  }, showLeft && !leftContent && /*#__PURE__*/React.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
+  }, showLeft && !!leftContent ? leftContent : /*#__PURE__*/React.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,