@spark-web/box 1.0.9 → 1.2.0

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

@@ -12,96 +12,104 @@ var internal = require('@spark-web/utils/internal');
 var ts = require('@spark-web/utils/ts');
 
 // prepare context
+
 var backgroundContext = /*#__PURE__*/react.createContext('body');
 var InternalBackgroundProvider = backgroundContext.Provider;
 var useBackground = function useBackground() {
   return react.useContext(backgroundContext);
-}; // conditional provider
+};
+
+// conditional provider
 
 function renderBackgroundProvider(background, element) {
   return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
     value: background,
     children: element
   }) : element;
-} // a11y contrast utility
+}
+
+// a11y contrast utility
 
 var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
   var backgroundFromContext = useBackground();
   var background = backgroundOverride || backgroundFromContext;
+  var theme$1 = theme.useTheme();
+  var defaultLightness = theme$1.backgroundLightness.body;
 
-  var _useTheme = theme.useTheme(),
-      backgroundLightness = _useTheme.backgroundLightness;
-
-  var defaultLightness = backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
-
+  // 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;
+  return background ? theme$1.backgroundLightness[background] || defaultLightness : defaultLightness;
 };
 
 /** Enforce background "lightness" without applying a background color. */
 var BackgroundProvider = function BackgroundProvider(_ref) {
   var type = _ref.type,
-      children = _ref.children;
+    children = _ref.children;
   return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
 };
 
+// TODO perf review
 // 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;
+    alignSelf = _ref.alignSelf,
+    background = _ref.background,
+    border = _ref.border,
+    borderTop = _ref.borderTop,
+    borderBottom = _ref.borderBottom,
+    borderLeft = _ref.borderLeft,
+    borderRight = _ref.borderRight,
+    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,
@@ -113,11 +121,27 @@ var useBoxStyles = function useBoxStyles(_ref) {
     overflow: overflow,
     userSelect: userSelect
   };
-  var conditionalBorderStyles = border ? {
+  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
     borderStyle: 'solid',
     borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
     borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
-  } : null;
+  } : {}), borderTop ? {
+    borderTopStyle: 'solid',
+    borderTopColor: theme$1.utils.mapResponsiveScale(borderTop, theme$1.border.color),
+    borderTopWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
+  } : {}), borderBottom ? {
+    borderBottomStyle: 'solid',
+    borderBottomColor: theme$1.utils.mapResponsiveScale(borderBottom, theme$1.border.color),
+    borderBottomWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
+  } : {}), borderLeft ? {
+    borderLeftStyle: 'solid',
+    borderLeftColor: theme$1.utils.mapResponsiveScale(borderLeft, theme$1.border.color),
+    borderLeftWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
+  } : {}), borderRight ? {
+    borderRightStyle: 'solid',
+    borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
+    borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
+  } : {});
   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),
@@ -155,7 +179,9 @@ var useBoxStyles = function useBoxStyles(_ref) {
     top: theme$1.utils.mapResponsiveProp(top),
     zIndex: theme$1.utils.mapResponsiveScale(zIndex, theme$1.elevation)
   }));
-}; // Flex shorthand / adjustments
+};
+
+// Flex shorthand / adjustments
 // ------------------------------
 
 var flexMap = {
@@ -180,55 +206,58 @@ var flexMap = {
   }
 };
 
-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. */
+var _excluded$1 = ["alignItems", "alignSelf", "background", "border", "borderRadius", "borderWidth", "borderTop", "borderBottom", "borderLeft", "borderRight", "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);
-
+    alignSelf = props.alignSelf,
+    background = props.background,
+    border = props.border,
+    borderRadius = props.borderRadius,
+    borderWidth = props.borderWidth,
+    borderTop = props.borderTop,
+    borderBottom = props.borderBottom,
+    borderLeft = props.borderLeft,
+    borderRight = props.borderRight,
+    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,
@@ -236,6 +265,10 @@ function useBoxProps(props) {
     border: border,
     borderRadius: borderRadius,
     borderWidth: borderWidth,
+    borderBottom: borderBottom,
+    borderLeft: borderLeft,
+    borderRight: borderRight,
+    borderTop: borderTop,
     bottom: bottom,
     cursor: cursor,
     display: display,
@@ -281,29 +314,24 @@ function useBoxProps(props) {
 }
 
 var _excluded = ["as", "asElement", "className", "data", "id"];
-
 /** 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,
-      data = _ref.data,
-      id = _ref.id,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    Tag = _ref$as === void 0 ? 'div' : _ref$as,
+    asElement = _ref.asElement,
+    className = _ref.className,
+    data = _ref.data,
+    id = _ref.id,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useBoxProps = useBoxProps(props),
-      styles = _useBoxProps.styles,
-      attributes = _useBoxProps.attributes;
-
+    styles = _useBoxProps.styles,
+    attributes = _useBoxProps.attributes;
   var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
-
   var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
     ref: forwardedRef,
     id: id,
     className: css.cx(css.css(resetStyles), css.css(styles), className)
   }, attributes));
-
   return renderBackgroundProvider(props.background, element);
 });