@thecb/components 10.2.4-beta.13 → 10.2.4-beta.15

package/dist/index.cjs.js

@@ -12560,6 +12560,7 @@ var Reel = function Reel(_ref) {
 var padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
+  disabledSecondary: "0.75rem 1.5rem",
   back: "0.75rem 1.5rem",
   smallPrimary: "0.75rem 1rem",
   smallSecondary: "0.75rem 1rem",
@@ -12574,6 +12575,7 @@ var padding = {
 var color$1 = {
   primary: WHITE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: MATISSE_BLUE,
   smallPrimary: WHITE,
   smallSecondary: MATISSE_BLUE,
@@ -12588,6 +12590,7 @@ var color$1 = {
 var fontSizeVariant = {
   primary: "pS",
   secondary: "pS",
+  disabledSecondary: "pS",
   back: "pS",
   smallPrimary: "pS",
   smallSecondary: "pS",
@@ -12602,6 +12605,7 @@ var fontSizeVariant = {
 var fontWeight = {
   primary: "600",
   secondary: "600",
+  disabledSecondary: "600",
   back: "600",
   smallPrimary: "600",
   smallSecondary: "600",
@@ -12616,6 +12620,7 @@ var fontWeight = {
 var height = {
   primary: "3rem",
   secondary: "3rem",
+  disabledSecondary: "3rem",
   back: "3rem",
   smallPrimary: "2.5rem",
   smallSecondary: "2.5rem",
@@ -12630,6 +12635,7 @@ var height = {
 var minWidth = {
   primary: "130px",
   secondary: "130px",
+  disabledSecondary: "130px",
   back: "130px",
   smallPrimary: "100px",
   smallSecondary: "100px",
@@ -12644,6 +12650,7 @@ var minWidth = {
 var backgroundColor = {
   primary: MATISSE_BLUE,
   secondary: TRANSPARENT,
+  disabledSecondary: TRANSPARENT,
   back: TRANSPARENT,
   smallPrimary: MATISSE_BLUE,
   smallSecondary: TRANSPARENT,
@@ -12658,6 +12665,7 @@ var backgroundColor = {
 var border = {
   primary: "2px solid " + MATISSE_BLUE,
   secondary: "2px solid " + MATISSE_BLUE,
+  disabledSecondary: "2px solid " + MANATEE_GREY,
   back: "2px solid " + MATISSE_BLUE,
   smallPrimary: "2px solid " + MATISSE_BLUE,
   smallSecondary: "2px solid " + MATISSE_BLUE,
@@ -12672,6 +12680,7 @@ var border = {
 var hoverBackgroundColor = {
   primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
+  disabledSecondary: TRANSPARENT,
   back: TRANSPARENT,
   smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
@@ -12686,6 +12695,7 @@ var hoverBackgroundColor = {
 var hoverBorderColor = {
   primary: SAPPHIRE_BLUE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: "#DCEAF1",
   smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: MATISSE_BLUE,
@@ -12700,6 +12710,7 @@ var hoverBorderColor = {
 var hoverColor = {
   primary: WHITE,
   secondary: SAPPHIRE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: SAPPHIRE_BLUE,
   smallPrimary: WHITE,
   smallSecondary: SAPPHIRE_BLUE,
@@ -12714,6 +12725,7 @@ var hoverColor = {
 var activeBackgroundColor = {
   primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
+  disabledSecondary: TRANSPARENT,
   back: TRANSPARENT,
   smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
@@ -12728,6 +12740,7 @@ var activeBackgroundColor = {
 var activeBorderColor = {
   primary: PEACOCK_BLUE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: PEACOCK_BLUE,
   smallPrimary: PEACOCK_BLUE,
   smallSecondary: MATISSE_BLUE,
@@ -12742,6 +12755,7 @@ var activeBorderColor = {
 var activeColor = {
   primary: WHITE,
   secondary: MATISSE_BLUE,
+  disabledSecondary: MANATEE_GREY,
   back: PEACOCK_BLUE,
   smallPrimary: WHITE,
   smallSecondary: PEACOCK_BLUE,
@@ -12911,13 +12925,12 @@ 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: ".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  ");
+  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    ");
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     ref: ref,
     variant: variant,
@@ -12931,7 +12944,7 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     disabledStyles: disabledStyles,
     "aria-disabled": disabled,
     as: "button",
-    onClick: isLoading || disabled ? noop : action,
+    onClick: isLoading || disabled ? undefined : action,
     borderRadius: "2px",
     theme: themeContext,
     extraStyles: "margin: 0.5rem; ".concat(extraStyles),
@@ -12948,7 +12961,7 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     variant: themeValues.fontSizeVariant,
     color: themeValues.color,
     textWrap: textWrap,
-    extraStyles: disabled ? textExtraStyles + disabledStyles : textExtraStyles
+    extraStyles: textExtraStyles
   }, text)));
 });