@spark-web/box 1.0.0

package/dist/spark-web-box.cjs.dev.js

@@ -0,0 +1,320 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var theme = require('@spark-web/theme');
+var _extends = require('@babel/runtime/helpers/esm/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var css = require('@emotion/css');
+var internal = require('@spark-web/utils/internal');
+var ts = require('@spark-web/utils/ts');
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __jsx$1 = React__default["default"].createElement;
+// prepare context
+var backgroundContext = /*#__PURE__*/React.createContext('body');
+var InternalBackgroundProvider = backgroundContext.Provider;
+var useBackground = function useBackground() {
+  return React.useContext(backgroundContext);
+}; // conditional provider
+
+function renderBackgroundProvider(background, element) {
+  return background ? __jsx$1(InternalBackgroundProvider, {
+    value: background
+  }, element) : element;
+} // a11y contrast utility
+
+var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
+  var backgroundFromContext = useBackground();
+  var background = backgroundOverride || backgroundFromContext;
+
+  var _useTheme = theme.useTheme(),
+      backgroundLightness = _useTheme.backgroundLightness;
+
+  var defaultLightness = backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
+
+  if (background === 'UNKNOWN_DARK') {
+    return 'dark';
+  }
+
+  if (background === 'UNKNOWN_LIGHT') {
+    return 'light';
+  }
+
+  return background ? backgroundLightness[background] || defaultLightness : defaultLightness;
+};
+
+/** Enforce background "lightness" without applying a background color. */
+var BackgroundProvider = function BackgroundProvider(_ref) {
+  var type = _ref.type,
+      children = _ref.children;
+  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
+// types
+
+// Hook
+// ------------------------------
+var useBoxStyles = function useBoxStyles(_ref) {
+  var alignItems = _ref.alignItems,
+      alignSelf = _ref.alignSelf,
+      background = _ref.background,
+      border = _ref.border,
+      borderRadius = _ref.borderRadius,
+      _ref$borderWidth = _ref.borderWidth,
+      borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
+      bottom = _ref.bottom,
+      cursor = _ref.cursor,
+      display = _ref.display,
+      flex = _ref.flex,
+      flexDirection = _ref.flexDirection,
+      flexGrow = _ref.flexGrow,
+      flexShrink = _ref.flexShrink,
+      flexWrap = _ref.flexWrap,
+      gap = _ref.gap,
+      height = _ref.height,
+      justifyContent = _ref.justifyContent,
+      left = _ref.left,
+      margin = _ref.margin,
+      marginBottom = _ref.marginBottom,
+      marginLeft = _ref.marginLeft,
+      marginRight = _ref.marginRight,
+      marginTop = _ref.marginTop,
+      marginX = _ref.marginX,
+      marginY = _ref.marginY,
+      minHeight = _ref.minHeight,
+      minWidth = _ref.minWidth,
+      opacity = _ref.opacity,
+      overflow = _ref.overflow,
+      padding = _ref.padding,
+      paddingBottom = _ref.paddingBottom,
+      paddingLeft = _ref.paddingLeft,
+      paddingRight = _ref.paddingRight,
+      paddingTop = _ref.paddingTop,
+      paddingX = _ref.paddingX,
+      paddingY = _ref.paddingY,
+      position = _ref.position,
+      right = _ref.right,
+      shadow = _ref.shadow,
+      top = _ref.top,
+      userSelect = _ref.userSelect,
+      width = _ref.width,
+      zIndex = _ref.zIndex;
+  var theme$1 = theme.useTheme();
+  var unresponsiveProps = {
+    background: background ? theme$1.color.background[background] : undefined,
+    boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
+    cursor: cursor,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    opacity: opacity,
+    overflow: overflow,
+    userSelect: userSelect
+  };
+  var conditionalBorderStyles = border ? {
+    borderStyle: 'solid',
+    borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
+    borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
+  } : null;
+  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
+    // allow padding and height/width props to play nice
+    display: theme$1.utils.mapResponsiveProp(display),
+    // margin
+    marginBottom: theme$1.utils.mapResponsiveScale(marginBottom || marginY || margin, theme$1.spacing),
+    marginTop: theme$1.utils.mapResponsiveScale(marginTop || marginY || margin, theme$1.spacing),
+    marginLeft: theme$1.utils.mapResponsiveScale(marginLeft || marginX || margin, theme$1.spacing),
+    marginRight: theme$1.utils.mapResponsiveScale(marginRight || marginX || margin, theme$1.spacing),
+    // padding
+    paddingBottom: theme$1.utils.mapResponsiveScale(paddingBottom || paddingY || padding, theme$1.spacing),
+    paddingTop: theme$1.utils.mapResponsiveScale(paddingTop || paddingY || padding, theme$1.spacing),
+    paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
+    paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
+    // border
+    borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
+    // flex: parent
+    alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
+    gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
+    flexDirection: theme$1.utils.mapResponsiveScale(flexDirection, flexMap.flexDirection),
+    justifyContent: theme$1.utils.mapResponsiveScale(justifyContent, flexMap.justifyContent),
+    flexWrap: theme$1.utils.mapResponsiveProp(flexWrap),
+    // flex: child
+    alignSelf: theme$1.utils.mapResponsiveScale(alignSelf, flexMap.alignItems),
+    flex: theme$1.utils.mapResponsiveProp(flex),
+    flexGrow: theme$1.utils.mapResponsiveProp(flexGrow),
+    flexShrink: theme$1.utils.mapResponsiveProp(flexShrink),
+    // dimension
+    height: theme$1.utils.mapResponsiveScale(height, theme$1.sizing),
+    width: theme$1.utils.mapResponsiveScale(width, theme$1.sizing),
+    // position
+    position: theme$1.utils.mapResponsiveProp(position),
+    bottom: theme$1.utils.mapResponsiveProp(bottom),
+    left: theme$1.utils.mapResponsiveProp(left),
+    right: theme$1.utils.mapResponsiveProp(right),
+    top: theme$1.utils.mapResponsiveProp(top),
+    zIndex: theme$1.utils.mapResponsiveScale(zIndex, theme$1.elevation)
+  }));
+}; // Flex shorthand / adjustments
+// ------------------------------
+
+var flexMap = {
+  alignItems: {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch'
+  },
+  justifyContent: {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    spaceBetween: 'space-between',
+    stretch: 'stretch'
+  },
+  flexDirection: {
+    row: 'row',
+    rowReverse: 'row-reverse',
+    column: 'column',
+    columnReverse: 'column-reverse'
+  }
+};
+
+var _excluded$1 = ["alignItems", "alignSelf", "background", "border", "borderRadius", "borderWidth", "bottom", "cursor", "display", "flex", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "gap", "height", "justifyContent", "left", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "marginX", "marginY", "minHeight", "minWidth", "opacity", "overflow", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "paddingX", "paddingY", "position", "right", "shadow", "top", "userSelect", "width", "zIndex"];
+/** Separate the style properties from the element attributes. */
+
+function useBoxProps(props) {
+  var alignItems = props.alignItems,
+      alignSelf = props.alignSelf,
+      background = props.background,
+      border = props.border,
+      borderRadius = props.borderRadius,
+      borderWidth = props.borderWidth,
+      bottom = props.bottom,
+      cursor = props.cursor,
+      display = props.display,
+      flex = props.flex,
+      flexDirection = props.flexDirection,
+      flexGrow = props.flexGrow,
+      flexShrink = props.flexShrink,
+      flexWrap = props.flexWrap,
+      gap = props.gap,
+      height = props.height,
+      justifyContent = props.justifyContent,
+      left = props.left,
+      margin = props.margin,
+      marginBottom = props.marginBottom,
+      marginLeft = props.marginLeft,
+      marginRight = props.marginRight,
+      marginTop = props.marginTop,
+      marginX = props.marginX,
+      marginY = props.marginY,
+      minHeight = props.minHeight,
+      minWidth = props.minWidth,
+      opacity = props.opacity,
+      overflow = props.overflow,
+      padding = props.padding,
+      paddingBottom = props.paddingBottom,
+      paddingLeft = props.paddingLeft,
+      paddingRight = props.paddingRight,
+      paddingTop = props.paddingTop,
+      paddingX = props.paddingX,
+      paddingY = props.paddingY,
+      position = props.position,
+      right = props.right,
+      shadow = props.shadow,
+      top = props.top,
+      userSelect = props.userSelect,
+      width = props.width,
+      zIndex = props.zIndex,
+      attributes = _objectWithoutProperties(props, _excluded$1);
+
+  var styles = useBoxStyles({
+    alignItems: alignItems,
+    alignSelf: alignSelf,
+    background: background,
+    border: border,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    bottom: bottom,
+    cursor: cursor,
+    display: display,
+    flex: flex,
+    flexDirection: flexDirection,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    flexWrap: flexWrap,
+    gap: gap,
+    height: height,
+    justifyContent: justifyContent,
+    left: left,
+    margin: margin,
+    marginBottom: marginBottom,
+    marginLeft: marginLeft,
+    marginRight: marginRight,
+    marginTop: marginTop,
+    marginX: marginX,
+    marginY: marginY,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    opacity: opacity,
+    overflow: overflow,
+    padding: padding,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
+    paddingRight: paddingRight,
+    paddingTop: paddingTop,
+    paddingX: paddingX,
+    paddingY: paddingY,
+    position: position,
+    right: right,
+    shadow: shadow,
+    top: top,
+    userSelect: userSelect,
+    width: width,
+    zIndex: zIndex
+  });
+  return {
+    styles: styles,
+    attributes: attributes
+  };
+}
+
+var _excluded = ["as", "asElement", "className", "id"];
+var __jsx = React__default["default"].createElement;
+
+/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
+var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Tag = _ref$as === void 0 ? 'div' : _ref$as,
+      asElement = _ref.asElement,
+      className = _ref.className,
+      id = _ref.id,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useBoxProps = useBoxProps(props),
+      styles = _useBoxProps.styles,
+      attributes = _useBoxProps.attributes;
+
+  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
+
+  var element = __jsx(Tag, _extends({
+    ref: forwardedRef,
+    id: id,
+    className: css.cx(css.css(resetStyles), css.css(styles), className)
+  }, attributes));
+
+  return renderBackgroundProvider(props.background, element);
+});
+
+exports.BackgroundProvider = BackgroundProvider;
+exports.Box = Box;
+exports.useBackground = useBackground;
+exports.useBackgroundLightness = useBackgroundLightness;

package/dist/spark-web-box.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-box.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-box.cjs.dev.js");
+}

package/dist/spark-web-box.cjs.prod.js

@@ -0,0 +1,320 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var theme = require('@spark-web/theme');
+var _extends = require('@babel/runtime/helpers/esm/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var css = require('@emotion/css');
+var internal = require('@spark-web/utils/internal');
+var ts = require('@spark-web/utils/ts');
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __jsx$1 = React__default["default"].createElement;
+// prepare context
+var backgroundContext = /*#__PURE__*/React.createContext('body');
+var InternalBackgroundProvider = backgroundContext.Provider;
+var useBackground = function useBackground() {
+  return React.useContext(backgroundContext);
+}; // conditional provider
+
+function renderBackgroundProvider(background, element) {
+  return background ? __jsx$1(InternalBackgroundProvider, {
+    value: background
+  }, element) : element;
+} // a11y contrast utility
+
+var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
+  var backgroundFromContext = useBackground();
+  var background = backgroundOverride || backgroundFromContext;
+
+  var _useTheme = theme.useTheme(),
+      backgroundLightness = _useTheme.backgroundLightness;
+
+  var defaultLightness = backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
+
+  if (background === 'UNKNOWN_DARK') {
+    return 'dark';
+  }
+
+  if (background === 'UNKNOWN_LIGHT') {
+    return 'light';
+  }
+
+  return background ? backgroundLightness[background] || defaultLightness : defaultLightness;
+};
+
+/** Enforce background "lightness" without applying a background color. */
+var BackgroundProvider = function BackgroundProvider(_ref) {
+  var type = _ref.type,
+      children = _ref.children;
+  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
+// types
+
+// Hook
+// ------------------------------
+var useBoxStyles = function useBoxStyles(_ref) {
+  var alignItems = _ref.alignItems,
+      alignSelf = _ref.alignSelf,
+      background = _ref.background,
+      border = _ref.border,
+      borderRadius = _ref.borderRadius,
+      _ref$borderWidth = _ref.borderWidth,
+      borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
+      bottom = _ref.bottom,
+      cursor = _ref.cursor,
+      display = _ref.display,
+      flex = _ref.flex,
+      flexDirection = _ref.flexDirection,
+      flexGrow = _ref.flexGrow,
+      flexShrink = _ref.flexShrink,
+      flexWrap = _ref.flexWrap,
+      gap = _ref.gap,
+      height = _ref.height,
+      justifyContent = _ref.justifyContent,
+      left = _ref.left,
+      margin = _ref.margin,
+      marginBottom = _ref.marginBottom,
+      marginLeft = _ref.marginLeft,
+      marginRight = _ref.marginRight,
+      marginTop = _ref.marginTop,
+      marginX = _ref.marginX,
+      marginY = _ref.marginY,
+      minHeight = _ref.minHeight,
+      minWidth = _ref.minWidth,
+      opacity = _ref.opacity,
+      overflow = _ref.overflow,
+      padding = _ref.padding,
+      paddingBottom = _ref.paddingBottom,
+      paddingLeft = _ref.paddingLeft,
+      paddingRight = _ref.paddingRight,
+      paddingTop = _ref.paddingTop,
+      paddingX = _ref.paddingX,
+      paddingY = _ref.paddingY,
+      position = _ref.position,
+      right = _ref.right,
+      shadow = _ref.shadow,
+      top = _ref.top,
+      userSelect = _ref.userSelect,
+      width = _ref.width,
+      zIndex = _ref.zIndex;
+  var theme$1 = theme.useTheme();
+  var unresponsiveProps = {
+    background: background ? theme$1.color.background[background] : undefined,
+    boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
+    cursor: cursor,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    opacity: opacity,
+    overflow: overflow,
+    userSelect: userSelect
+  };
+  var conditionalBorderStyles = border ? {
+    borderStyle: 'solid',
+    borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
+    borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
+  } : null;
+  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
+    // allow padding and height/width props to play nice
+    display: theme$1.utils.mapResponsiveProp(display),
+    // margin
+    marginBottom: theme$1.utils.mapResponsiveScale(marginBottom || marginY || margin, theme$1.spacing),
+    marginTop: theme$1.utils.mapResponsiveScale(marginTop || marginY || margin, theme$1.spacing),
+    marginLeft: theme$1.utils.mapResponsiveScale(marginLeft || marginX || margin, theme$1.spacing),
+    marginRight: theme$1.utils.mapResponsiveScale(marginRight || marginX || margin, theme$1.spacing),
+    // padding
+    paddingBottom: theme$1.utils.mapResponsiveScale(paddingBottom || paddingY || padding, theme$1.spacing),
+    paddingTop: theme$1.utils.mapResponsiveScale(paddingTop || paddingY || padding, theme$1.spacing),
+    paddingLeft: theme$1.utils.mapResponsiveScale(paddingLeft || paddingX || padding, theme$1.spacing),
+    paddingRight: theme$1.utils.mapResponsiveScale(paddingRight || paddingX || padding, theme$1.spacing),
+    // border
+    borderRadius: theme$1.utils.mapResponsiveScale(borderRadius, theme$1.border.radius),
+    // flex: parent
+    alignItems: theme$1.utils.mapResponsiveScale(alignItems, flexMap.alignItems),
+    gap: theme$1.utils.mapResponsiveScale(gap, theme$1.spacing),
+    flexDirection: theme$1.utils.mapResponsiveScale(flexDirection, flexMap.flexDirection),
+    justifyContent: theme$1.utils.mapResponsiveScale(justifyContent, flexMap.justifyContent),
+    flexWrap: theme$1.utils.mapResponsiveProp(flexWrap),
+    // flex: child
+    alignSelf: theme$1.utils.mapResponsiveScale(alignSelf, flexMap.alignItems),
+    flex: theme$1.utils.mapResponsiveProp(flex),
+    flexGrow: theme$1.utils.mapResponsiveProp(flexGrow),
+    flexShrink: theme$1.utils.mapResponsiveProp(flexShrink),
+    // dimension
+    height: theme$1.utils.mapResponsiveScale(height, theme$1.sizing),
+    width: theme$1.utils.mapResponsiveScale(width, theme$1.sizing),
+    // position
+    position: theme$1.utils.mapResponsiveProp(position),
+    bottom: theme$1.utils.mapResponsiveProp(bottom),
+    left: theme$1.utils.mapResponsiveProp(left),
+    right: theme$1.utils.mapResponsiveProp(right),
+    top: theme$1.utils.mapResponsiveProp(top),
+    zIndex: theme$1.utils.mapResponsiveScale(zIndex, theme$1.elevation)
+  }));
+}; // Flex shorthand / adjustments
+// ------------------------------
+
+var flexMap = {
+  alignItems: {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch'
+  },
+  justifyContent: {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    spaceBetween: 'space-between',
+    stretch: 'stretch'
+  },
+  flexDirection: {
+    row: 'row',
+    rowReverse: 'row-reverse',
+    column: 'column',
+    columnReverse: 'column-reverse'
+  }
+};
+
+var _excluded$1 = ["alignItems", "alignSelf", "background", "border", "borderRadius", "borderWidth", "bottom", "cursor", "display", "flex", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "gap", "height", "justifyContent", "left", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "marginX", "marginY", "minHeight", "minWidth", "opacity", "overflow", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "paddingX", "paddingY", "position", "right", "shadow", "top", "userSelect", "width", "zIndex"];
+/** Separate the style properties from the element attributes. */
+
+function useBoxProps(props) {
+  var alignItems = props.alignItems,
+      alignSelf = props.alignSelf,
+      background = props.background,
+      border = props.border,
+      borderRadius = props.borderRadius,
+      borderWidth = props.borderWidth,
+      bottom = props.bottom,
+      cursor = props.cursor,
+      display = props.display,
+      flex = props.flex,
+      flexDirection = props.flexDirection,
+      flexGrow = props.flexGrow,
+      flexShrink = props.flexShrink,
+      flexWrap = props.flexWrap,
+      gap = props.gap,
+      height = props.height,
+      justifyContent = props.justifyContent,
+      left = props.left,
+      margin = props.margin,
+      marginBottom = props.marginBottom,
+      marginLeft = props.marginLeft,
+      marginRight = props.marginRight,
+      marginTop = props.marginTop,
+      marginX = props.marginX,
+      marginY = props.marginY,
+      minHeight = props.minHeight,
+      minWidth = props.minWidth,
+      opacity = props.opacity,
+      overflow = props.overflow,
+      padding = props.padding,
+      paddingBottom = props.paddingBottom,
+      paddingLeft = props.paddingLeft,
+      paddingRight = props.paddingRight,
+      paddingTop = props.paddingTop,
+      paddingX = props.paddingX,
+      paddingY = props.paddingY,
+      position = props.position,
+      right = props.right,
+      shadow = props.shadow,
+      top = props.top,
+      userSelect = props.userSelect,
+      width = props.width,
+      zIndex = props.zIndex,
+      attributes = _objectWithoutProperties(props, _excluded$1);
+
+  var styles = useBoxStyles({
+    alignItems: alignItems,
+    alignSelf: alignSelf,
+    background: background,
+    border: border,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    bottom: bottom,
+    cursor: cursor,
+    display: display,
+    flex: flex,
+    flexDirection: flexDirection,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    flexWrap: flexWrap,
+    gap: gap,
+    height: height,
+    justifyContent: justifyContent,
+    left: left,
+    margin: margin,
+    marginBottom: marginBottom,
+    marginLeft: marginLeft,
+    marginRight: marginRight,
+    marginTop: marginTop,
+    marginX: marginX,
+    marginY: marginY,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    opacity: opacity,
+    overflow: overflow,
+    padding: padding,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
+    paddingRight: paddingRight,
+    paddingTop: paddingTop,
+    paddingX: paddingX,
+    paddingY: paddingY,
+    position: position,
+    right: right,
+    shadow: shadow,
+    top: top,
+    userSelect: userSelect,
+    width: width,
+    zIndex: zIndex
+  });
+  return {
+    styles: styles,
+    attributes: attributes
+  };
+}
+
+var _excluded = ["as", "asElement", "className", "id"];
+var __jsx = React__default["default"].createElement;
+
+/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
+var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Tag = _ref$as === void 0 ? 'div' : _ref$as,
+      asElement = _ref.asElement,
+      className = _ref.className,
+      id = _ref.id,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useBoxProps = useBoxProps(props),
+      styles = _useBoxProps.styles,
+      attributes = _useBoxProps.attributes;
+
+  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
+
+  var element = __jsx(Tag, _extends({
+    ref: forwardedRef,
+    id: id,
+    className: css.cx(css.css(resetStyles), css.css(styles), className)
+  }, attributes));
+
+  return renderBackgroundProvider(props.background, element);
+});
+
+exports.BackgroundProvider = BackgroundProvider;
+exports.Box = Box;
+exports.useBackground = useBackground;
+exports.useBackgroundLightness = useBackgroundLightness;