@thecb/components 6.0.0-beta.27 → 6.0.0-beta.28

package/dist/index.cjs.js

@@ -6197,7 +6197,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", "ref"];
+var _excluded$2 = ["activeStyles", "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"
@@ -6226,13 +6226,11 @@ var BoxWrapper = styled__default(function (_ref) {
       hiddenStyles = _ref.hiddenStyles,
       ariaControls = _ref.ariaControls,
       ariaLabel = _ref.ariaLabel,
-      ref = _ref.ref,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default.createElement("div", _extends({
     "aria-controls": ariaControls,
-    "aria-label": ariaLabel,
-    ref: ref
+    "aria-label": ariaLabel
   }, props));
 }).withConfig({
   displayName: "Boxstyled__BoxWrapper",
@@ -6302,7 +6300,7 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["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", "ref", "dataQa", "children"];
+var _excluded$3 = ["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"];
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
@@ -6311,7 +6309,7 @@ var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxS
   completely off screen (only for users of screen readers)
 */
 
-var Box = function Box(_ref) {
+var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? "16px" : _ref$padding,
       _ref$borderSize = _ref.borderSize,
@@ -6347,7 +6345,6 @@ var Box = function Box(_ref) {
       extraStyles = _ref.extraStyles,
       _ref$srOnly = _ref.srOnly,
       srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
-      ref = _ref.ref,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -6385,7 +6382,7 @@ var Box = function Box(_ref) {
     onTouchEnd: onTouchEnd,
     ref: ref
   }, rest), children && safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
-};
+});
 
 var CenterWrapper = styled__default.div.withConfig({
   displayName: "Centerstyled__CenterWrapper",