@thecb/components 10.6.2-beta.6 → 10.6.2-beta.7

package/dist/index.cjs.js

@@ -6427,7 +6427,7 @@ var Text = function Text(_ref) {
 };
 var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
-var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"];
+var _excluded$2 = ["activeStyles", "focusStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"];
 /*
   The child span selector on hover styles targets the text inside of buttons when a button is hovered,
   as long as the box wrapper has an "as" prop equal to "button"
@@ -6439,6 +6439,7 @@ var _excluded$2 = ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles
 /* eslint-disable no-unused-vars */
 var BoxWrapper = styled__default(function (_ref) {
   var activeStyles = _ref.activeStyles,
+    focusStyles = _ref.focusStyles,
     hoverStyles = _ref.hoverStyles,
     disabledStyles = _ref.disabledStyles,
     extraStyles = _ref.extraStyles,
@@ -6507,8 +6508,9 @@ var BoxWrapper = styled__default(function (_ref) {
     disabled = _ref14.disabled;
   return styled.css(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref15) {
-  var as = _ref15.as;
-  return styled.css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+  var focusStyles = _ref15.focusStyles,
+    as = _ref15.as;
+  return styled.css(["", " outline:3px solid ", ";outline-offset:2px;", ""], focusStyles, ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
 }, function (_ref16) {
   var activeStyles = _ref16.activeStyles,
     as = _ref16.as;
@@ -6533,7 +6535,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", "focusStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 
 /*
   Box component to create generic boxes
@@ -6566,6 +6568,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     disabledStyles = _ref.disabledStyles,
+    focusStyles = _ref.focusStyles,
     variant = _ref.variant,
     as = _ref.as,
     onClick = _ref.onClick,
@@ -6601,6 +6604,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hoverStyles: hoverStyles,
     activeStyles: activeStyles,
     disabledStyles: disabledStyles,
+    focusStyles: focusStyles,
     variant: variant,
     as: as,
     onClick: onClick,
@@ -27635,7 +27639,8 @@ var Placeholder = function Placeholder(_ref4) {
     hiddenStyles: !visible,
     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), ";")
+    focusStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.9, themeValues.color), ";"),
+    activeStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : curriedTint$1(0.8, themeValues.color), "; ").concat(!isDisabled && "background-image:none; border: 2px solid ".concat(borderColor, ";}"))
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {