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

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({
@@ -27577,18 +27578,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) {
@@ -27605,6 +27606,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,
@@ -27618,7 +27620,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, {
@@ -42516,7 +42518,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;
@@ -42530,10 +42534,11 @@ var LinkCard = function LinkCard(_ref) {
     minHeight: "141px",
     padding: "24px",
     theme: themeValues,
-    extraStyles: extraStyles,
-    hoverStyles: extraHoverStyles,
-    activeStyles: extraActiveStyles,
-    onClick: onClick
+    extraStyles: disabled ? extraStyles + "background-color: ".concat(ATHENS_GREY, " !important; cursor: default;") : extraStyles,
+    hoverStyles: disabled ? "" : extraHoverStyles,
+    activeStyles: disabled ? "" : extraActiveStyles,
+    onClick: disabled ? noop : onClick,
+    "aria-disabled": disabled
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -42544,14 +42549,16 @@ var LinkCard = function LinkCard(_ref) {
     fullHeight: true
   }, /*#__PURE__*/React.createElement(Box, {
     padding: 0,
-    width: "100%"
+    width: "100%",
+    extraStyles: disabled ? "opacity: 0.5;" : ""
   }, /*#__PURE__*/React.createElement(Title$2, {
     variant: titleVariant,
     theme: themeValues,
     margin: 0
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 40px",
-    width: "100%"
+    width: "100%",
+    extraStyles: disabled ? "opacity: 0.5;" : ""
   }, /*#__PURE__*/React.createElement(Subtitle, {
     variant: "pS",
     theme: themeValues
@@ -42559,7 +42566,8 @@ var LinkCard = function LinkCard(_ref) {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
     padding: "0",
-    width: "100%"
+    width: "100%",
+    extraStyles: disabled ? "opacity: 0.5;" : ""
   }, /*#__PURE__*/React.createElement(Footer, {
     direction: "row",
     childGap: "6px",