@thecb/components 10.6.1 → 10.6.2-beta.1

package/dist/index.cjs.js

@@ -28114,7 +28114,11 @@ var renderContent = function renderContent(_ref2) {
     padding: "0",
     minHeight: "100%",
     extraStyles: "cursor: pointer;",
-    dataQa: dataQa
+    dataQa: dataQa,
+    tabIndex: "0",
+    onKeyPress: function onKeyPress(e) {
+      return e.key === "Enter" && action();
+    }
   }, children);
 };
 var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref3) {
@@ -28149,6 +28153,7 @@ var Placeholder = function Placeholder(_ref4) {
     _ref4$isDisabled = _ref4.isDisabled,
     isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
     dataQa = _ref4.dataQa;
+  var borderColor = isDisabled ? MANATEE_GREY : themeValues.color;
   return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
@@ -28161,16 +28166,13 @@ var Placeholder = function Placeholder(_ref4) {
     border: "none",
     minHeight: themeValues.height,
     hiddenStyles: !visible,
-    extraStyles: isDisabled ? "border: 1px dashed ".concat(MANATEE_GREY, "; \n        display: flex;\n        justify-content: center;\n        align-items:center;") : "\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(isDisabled ? TRANSPARENT : variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
+    extraStyles: "\n          display: flex;\n          justify-content: center;\n          align-items:center;\n          background-image: repeating-linear-gradient(0deg, ".concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(90deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(180deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px), repeating-linear-gradient(270deg, ").concat(borderColor, ", ").concat(borderColor, " 2px, transparent 2px, transparent 4px, ").concat(borderColor, " 4px);\n          background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;\n          background-position: 0 0, 0 0, 100% 0, 0 100%;\n          background-repeat: no-repeat;\n        "),
+    hoverStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.9, themeValues.color), ";"),
+    activeStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.8, themeValues.color), ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    tabIndex: "0",
-    onKeyPress: function onKeyPress(e) {
-      return isDisabled ? noop : e.key === "Enter" && action();
-    }
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center",
@@ -28181,7 +28183,7 @@ var Placeholder = function Placeholder(_ref4) {
   }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     "aria-disabled": isDisabled,
-    extraStyles: ".fill { \n                    fill: ".concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } ")
+    extraStyles: ".fill { \n                    fill: ".concat(isDisabled ? MANATEE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(isDisabled ? MANATEE_GREY : themeValues.color, "; \n                  } ")
   }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, getLargeIcon(largeIcon, isDisabled), /*#__PURE__*/React__default.createElement(Text$1, {
@@ -28195,9 +28197,8 @@ var Placeholder = function Placeholder(_ref4) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(IconAdd, {
-    fill: isDisabled ? MANATEE_GREY : WHITE,
-    strokeWidth: "2"
+  }, /*#__PURE__*/React__default.createElement(PlusCircleIcon, {
+    color: isDisabled ? MANATEE_GREY : themeValues.color
   }), /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Text$1, {