@spark-web/box 2.0.0-rc.0 → 2.0.0-rc.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @spark-web/box
 
+## 2.0.0-rc.1
+
+### Major Changes
+
+- rc
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.1
+  - @spark-web/utils@2.0.0-rc.1
+
 ## 2.0.0-rc.0
 
 ### Major Changes

package/dist/declarations/src/background-provider.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+export declare type BackgroundProviderProps = {
+    type: 'light' | 'dark';
+    children: ReactElement;
+};
+/** Enforce background "lightness" without applying a background color. */
+export declare const BackgroundProvider: ({ type, children, }: BackgroundProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/declarations/src/box.d.ts

@@ -0,0 +1,47 @@
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ReactNode } from 'react';
+import type { BoxStyleProps } from "./use-box-styles.js";
+export declare type BoxProps = {
+    /** Children element to be rendered inside the component. */
+    children?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+    /** An identifier which must be unique in the whole document. */
+    id?: string;
+    /** Custom css styles. */
+    className?: string;
+    /**
+     * When providing a component using the "as" prop, optionally tell the system
+     * what the underlying element will be. Used internally to manage reset
+     * styles.
+     */
+    asElement?: keyof HTMLElementTagNameMap;
+} & BoxStyleProps;
+/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
+export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
+    as?: Comp | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
+    /** Children element to be rendered inside the component. */
+    children?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap | undefined;
+    /** An identifier which must be unique in the whole document. */
+    id?: string | undefined;
+    /** Custom css styles. */
+    className?: string | undefined;
+    /**
+     * When providing a component using the "as" prop, optionally tell the system
+     * what the underlying element will be. Used internally to manage reset
+     * styles.
+     */
+    asElement?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    background?: "body" | "input" | "disabled" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
+    cursor?: "default" | "pointer" | undefined;
+    minHeight?: 0 | undefined;
+    minWidth?: 0 | undefined;
+    overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
+    shadow?: "small" | "large" | "medium" | undefined;
+    userSelect?: "none" | undefined;
+} & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/declarations/src/context.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { BoxStyleProps } from "./use-box-styles.js";
+export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
+export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
+export declare const useBackground: () => BackgroundVariant;
+export declare function renderBackgroundProvider(background: BackgroundVariant | undefined, element: ReactElement | null): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const useBackgroundLightness: (backgroundOverride?: ReturnType<typeof useBackground>) => "light" | "dark";

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,5 @@
+export { BackgroundProvider } from "./background-provider.js";
+export { Box } from "./box.js";
+export { useBackground, useBackgroundLightness } from "./context.js";
+export type { BackgroundProviderProps } from "./background-provider.js";
+export type { BoxProps } from "./box.js";

package/dist/declarations/src/use-box-styles.d.ts

@@ -0,0 +1,227 @@
+import type { BrighteTheme, ResponsiveProp } from '@spark-web/theme';
+declare type ValidGapKeys = keyof Omit<BrighteTheme['spacing'], 'none' | 'full'>;
+declare type ResponsiveSpacing = ResponsiveProp<keyof BrighteTheme['spacing']>;
+declare type ResponsiveSizing = ResponsiveProp<keyof BrighteTheme['sizing']>;
+export declare type ResponsiveBoxProps = {
+    /**
+     * The `margin` shorthand property sets the margin area on all four sides of
+     * an element at once.
+     */
+    margin?: ResponsiveSpacing;
+    /**
+     * The `marginTop` property sets the margin area on the top side of an
+     * element.
+     */
+    marginTop?: ResponsiveSpacing;
+    /**
+     * The `marginRight` property sets the margin area on the right side of an
+     * element.
+     */
+    marginRight?: ResponsiveSpacing;
+    /**
+     * The `marginBottom` property sets the margin area on the bottom side of an
+     * element.
+     */
+    marginBottom?: ResponsiveSpacing;
+    /**
+     * The `marginLeft` property sets the margin area on the left side of an
+     * element.
+     */
+    marginLeft?: ResponsiveSpacing;
+    /**
+     * The `marginY` shorthand property sets the margin area on the top and
+     * bottom of the element.
+     */
+    marginY?: ResponsiveSpacing;
+    /**
+     * The `marginY` shorthand property sets the margin area on the left and
+     * right of the element.
+     */
+    marginX?: ResponsiveSpacing;
+    /**
+     * The `padding` shorthand property sets the padding area on all four sides
+     * of an element at once.
+     */
+    padding?: ResponsiveSpacing;
+    /**
+     * The `paddingTop` property sets the height of the padding area on the top
+     * of an element.
+     */
+    paddingTop?: ResponsiveSpacing;
+    /**
+     * The `paddingRight` property sets the width of the padding area on the
+     * right of an element.
+     */
+    paddingRight?: ResponsiveSpacing;
+    /**
+     * The `paddingBottom` property sets the height of the padding area on the
+     * bottom of an element.
+     */
+    paddingBottom?: ResponsiveSpacing;
+    /**
+     * The `paddingLeft` property sets the width of the padding area on the left
+     * of an element.
+     */
+    paddingLeft?: ResponsiveSpacing;
+    /**
+     * The `paddingY` shorthand property sets the padding area on the top and
+     * bottom of the element.
+     */
+    paddingY?: ResponsiveSpacing;
+    /**
+     * The `paddingX` shorthand property sets the padding area on the left and
+     * right of the element.
+     */
+    paddingX?: ResponsiveSpacing;
+    /** The `border` property sets the color of an element's border. */
+    border?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
+    /** The `border` property sets the color of an element's border on the top side. */
+    borderTop?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
+    /** The `border` property sets the color of an element's border on the bottom side. */
+    borderBottom?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
+    /** The `border` property sets the color of an element's border on the left side. */
+    borderLeft?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
+    /** The `border` property sets the color of an element's border on the right side. */
+    borderRight?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
+    /**
+     * The `borderRadius` property rounds the corners of an element's outer
+     * border edge.
+     */
+    borderRadius?: ResponsiveProp<keyof BrighteTheme['border']['radius']>;
+    /**
+     * The `borderWidth` property sets the width of an element's border.
+     */
+    borderWidth?: ResponsiveProp<keyof BrighteTheme['border']['width']>;
+    /** Sets the element's height. */
+    height?: ResponsiveSizing;
+    /** Sets the element's width. */
+    width?: ResponsiveSizing;
+    /** Controls the alignment of items on the cross axis. */
+    alignItems?: ResponsiveProp<keyof typeof flexMap.alignItems>;
+    /** The size of the gap between each child element. */
+    gap?: ResponsiveProp<ValidGapKeys>;
+    /** Defines the main axis, or how the children are placed. */
+    flexDirection?: ResponsiveProp<keyof typeof flexMap.flexDirection>;
+    /**
+     * defines how the browser distributes space between and around content items
+     * along the main-axis.
+     */
+    justifyContent?: ResponsiveProp<keyof typeof flexMap.justifyContent>;
+    /** Allow flex items to flow onto multiple lines. */
+    flexWrap?: ResponsiveProp<'nowrap' | 'wrap'>;
+    /**
+     * Overrides the parent's `align-items` value. Controls the alignment of
+     * item's on the cross axis.
+     */
+    alignSelf?: ResponsiveProp<keyof typeof flexMap.alignItems>;
+    /**
+     * The `flex` shorthand property sets how a flex item will grow or shrink to
+     * fit the space available in its flex container.
+     */
+    flex?: ResponsiveProp<0 | 1>;
+    /** The `flexGrow` property sets the flex grow factor of a flex item main size. */
+    flexGrow?: ResponsiveProp<0 | 1>;
+    /**
+     * The `flexShrink` property sets the flex shrink factor of a flex item. If
+     * the size of all flex items is larger than the flex container, items shrink
+     * to fit according to `flex-shrink`.
+     */
+    flexShrink?: ResponsiveProp<0 | 1>;
+    /**
+     * The `position` property sets how an element is positioned in a document.
+     * The `top`, `right`, `bottom`, and `left` properties determine the final
+     * location of positioned elements.
+     */
+    position?: ResponsiveProp<'absolute' | 'fixed' | 'relative' | 'sticky'>;
+    /**
+     * The `top` property participates in specifying the vertical position of a
+     * positioned element. It has no effect on non-positioned elements.
+     */
+    top?: ResponsiveProp<0>;
+    /**
+     * The `right` property participates in specifying the horizontal position of
+     * a positioned element. It has no effect on non-positioned elements.
+     */
+    right?: ResponsiveProp<0>;
+    /**
+     * The `bottom` property participates in setting the vertical position of a
+     * positioned element. It has no effect on non-positioned elements.
+     */
+    bottom?: ResponsiveProp<0>;
+    /**
+     * The `left` property participates in specifying the horizontal position of a
+     * positioned element. It has no effect on non-positioned elements.
+     */
+    left?: ResponsiveProp<0>;
+    /**
+     * The `zIndex` property sets the "z-order" of a positioned element and its
+     * descendants or flex items. Overlapping elements with a larger z-index cover
+     * those with a smaller one.
+     */
+    zIndex?: ResponsiveProp<keyof BrighteTheme['elevation']>;
+    /**
+     * Sets whether an element is treated as a block or inline element and the
+     * layout used for its children.
+     */
+    display?: ResponsiveProp<'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'none'>;
+    /**
+     * Sets the opacity of the element. Opacity is the degree to which content
+     * behind an element is hidden, and is the opposite of transparency.
+     */
+    opacity?: ResponsiveProp<number>;
+};
+declare type UnresponsiveBoxProps = {
+    /** The `background` property sets the background color of an element. */
+    background?: keyof BrighteTheme['color']['background'];
+    /**
+     * The `cursor` property sets the type of mouse cursor, if any, to show when
+     * the mouse pointer is over an element.
+     */
+    cursor?: 'default' | 'pointer';
+    /**
+     * The `minHeight` property sets the minimum height of an element. It prevents
+     * the used value of the height property from becoming smaller than the value
+     * specified for `minHeight`.
+     */
+    minHeight?: 0;
+    /**
+     * The `minWidth` property sets the minimum width of an element. It prevents
+     * the used value of the width property from becoming smaller than the value
+     * specified for `minWidth`.
+     */
+    minWidth?: 0;
+    /**
+     * The `overflow` shorthand property sets the desired behavior for an
+     * element's overflow — i.e. when an element's content is too big to fit in
+     * its block formatting context — in both directions.
+     */
+    overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
+    /** The `boxShadow` property adds shadow effects around an element's frame. */
+    shadow?: keyof BrighteTheme['shadow'];
+    /** The `userSelect` property controls whether the user can select text. */
+    userSelect?: 'none';
+};
+export declare type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
+export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderTop, borderBottom, borderLeft, borderRight, 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, }: BoxStyleProps) => import("facepaint").DynamicStyle[];
+declare const flexMap: {
+    readonly alignItems: {
+        readonly start: "flex-start";
+        readonly center: "center";
+        readonly end: "flex-end";
+        readonly stretch: "stretch";
+    };
+    readonly justifyContent: {
+        readonly start: "flex-start";
+        readonly center: "center";
+        readonly end: "flex-end";
+        readonly spaceBetween: "space-between";
+        readonly stretch: "stretch";
+    };
+    readonly flexDirection: {
+        readonly row: "row";
+        readonly rowReverse: "row-reverse";
+        readonly column: "column";
+        readonly columnReverse: "column-reverse";
+    };
+};
+export {};

package/dist/spark-web-box.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJveC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
+export * from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJveC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

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

@@ -0,0 +1,347 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var theme = require('@spark-web/theme');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@emotion/react');
+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
+
+function renderBackgroundProvider(background, element) {
+  return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
+    value: background,
+    children: element
+  }) : element;
+}
+
+// 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;
+
+  // used by the consumer-facing/external BackgroundProvider
+  if (background === 'UNKNOWN_DARK') {
+    return 'dark';
+  }
+  if (background === 'UNKNOWN_LIGHT') {
+    return 'light';
+  }
+  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;
+  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,
+    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,
+    boxShadow: shadow ? theme$1.shadow[shadow] : undefined,
+    cursor: cursor,
+    minHeight: minHeight,
+    minWidth: minWidth,
+    opacity: opacity,
+    overflow: overflow,
+    userSelect: userSelect
+  };
+  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)
+  } : {}), 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),
+    // 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", "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,
+    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,
+    background: background,
+    border: border,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    borderBottom: borderBottom,
+    borderLeft: borderLeft,
+    borderRight: borderRight,
+    borderTop: borderTop,
+    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", "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);
+  var _useBoxProps = useBoxProps(props),
+    styles = _useBoxProps.styles,
+    attributes = _useBoxProps.attributes;
+  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
+  var element = /*#__PURE__*/jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref2) {
+      var css = _ref2.css,
+        cx = _ref2.cx;
+      return /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
+        ref: forwardedRef,
+        id: id,
+        className: cx(css(resetStyles), css(styles), className)
+      }, attributes));
+    }
+  });
+  return renderBackgroundProvider(props.background, element);
+});
+
+exports.BackgroundProvider = BackgroundProvider;
+exports.Box = Box;
+exports.useBackground = useBackground;
+exports.useBackgroundLightness = useBackgroundLightness;