@spark-web/box 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/declarations/src/box.d.ts +3 -3
  3. package/dist/spark-web-box.cjs.dev.js +119 -118
  4. package/dist/spark-web-box.cjs.prod.js +119 -118
  5. package/dist/spark-web-box.esm.js +119 -118
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 1.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#382](https://github.com/brighte-labs/spark-web/pull/382)
8
+ [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
9
+ Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
10
+ version to latest (18.2.0)
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+ [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
16
+ - @spark-web/theme@3.2.0
17
+ - @spark-web/utils@1.3.0
18
+
3
19
  ## 1.1.0
4
20
 
5
21
  ### Minor Changes
package/dist/declarations/src/box.d.ts CHANGED
@@ -20,7 +20,7 @@ export declare type BoxProps = {
20
20
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
21
21
  export declare const Box: <Comp extends import("react").ElementType<any> = "div">(props: {
22
22
  as?: Comp | undefined;
23
- ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "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" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "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" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
23
+ 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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
24
24
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
25
25
  /** Children element to be rendered inside the component. */
26
26
  children?: ReactNode;
@@ -37,11 +37,11 @@ export declare const Box: <Comp extends import("react").ElementType<any> = "div"
37
37
  */
38
38
  asElement?: keyof HTMLElementTagNameMap | undefined;
39
39
  } & {
40
- background?: "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "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;
40
+ 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;
41
41
  cursor?: "default" | "pointer" | undefined;
42
42
  minHeight?: 0 | undefined;
43
43
  minWidth?: 0 | undefined;
44
- overflow?: "scroll" | "hidden" | "auto" | "visible" | undefined;
44
+ overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
45
45
  shadow?: "small" | "large" | "medium" | undefined;
46
46
  userSelect?: "none" | undefined;
47
47
  } & import("./use-box-styles").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/spark-web-box.cjs.dev.js CHANGED
@@ -12,97 +12,104 @@ var internal = require('@spark-web/utils/internal');
12
12
  var ts = require('@spark-web/utils/ts');
13
13
 
14
14
  // prepare context
15
+
15
16
  var backgroundContext = /*#__PURE__*/react.createContext('body');
16
17
  var InternalBackgroundProvider = backgroundContext.Provider;
17
18
  var useBackground = function useBackground() {
18
19
  return react.useContext(backgroundContext);
19
- }; // conditional provider
20
+ };
21
+
22
+ // conditional provider
20
23
 
21
24
  function renderBackgroundProvider(background, element) {
22
25
  return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
23
26
  value: background,
24
27
  children: element
25
28
  }) : element;
26
- } // a11y contrast utility
29
+ }
30
+
31
+ // a11y contrast utility
27
32
 
28
33
  var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
29
34
  var backgroundFromContext = useBackground();
30
35
  var background = backgroundOverride || backgroundFromContext;
31
36
  var theme$1 = theme.useTheme();
32
- var defaultLightness = theme$1.backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
37
+ var defaultLightness = theme$1.backgroundLightness.body;
33
38
 
39
+ // used by the consumer-facing/external BackgroundProvider
34
40
  if (background === 'UNKNOWN_DARK') {
35
41
  return 'dark';
36
42
  }
37
-
38
43
  if (background === 'UNKNOWN_LIGHT') {
39
44
  return 'light';
40
45
  }
41
-
42
46
  return background ? theme$1.backgroundLightness[background] || defaultLightness : defaultLightness;
43
47
  };
44
48
 
45
49
  /** Enforce background "lightness" without applying a background color. */
46
50
  var BackgroundProvider = function BackgroundProvider(_ref) {
47
51
  var type = _ref.type,
48
- children = _ref.children;
52
+ children = _ref.children;
49
53
  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
50
54
  };
51
55
 
56
+ // TODO perf review
52
57
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
58
+
53
59
  // types
54
60
 
55
61
  // Hook
56
62
  // ------------------------------
63
+
57
64
  var useBoxStyles = function useBoxStyles(_ref) {
58
65
  var alignItems = _ref.alignItems,
59
- alignSelf = _ref.alignSelf,
60
- background = _ref.background,
61
- border = _ref.border,
62
- borderTop = _ref.borderTop,
63
- borderBottom = _ref.borderBottom,
64
- borderLeft = _ref.borderLeft,
65
- borderRight = _ref.borderRight,
66
- borderRadius = _ref.borderRadius,
67
- _ref$borderWidth = _ref.borderWidth,
68
- borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
69
- bottom = _ref.bottom,
70
- cursor = _ref.cursor,
71
- display = _ref.display,
72
- flex = _ref.flex,
73
- flexDirection = _ref.flexDirection,
74
- flexGrow = _ref.flexGrow,
75
- flexShrink = _ref.flexShrink,
76
- flexWrap = _ref.flexWrap,
77
- gap = _ref.gap,
78
- height = _ref.height,
79
- justifyContent = _ref.justifyContent,
80
- left = _ref.left,
81
- margin = _ref.margin,
82
- marginBottom = _ref.marginBottom,
83
- marginLeft = _ref.marginLeft,
84
- marginRight = _ref.marginRight,
85
- marginTop = _ref.marginTop,
86
- marginX = _ref.marginX,
87
- marginY = _ref.marginY,
88
- minHeight = _ref.minHeight,
89
- minWidth = _ref.minWidth,
90
- opacity = _ref.opacity,
91
- overflow = _ref.overflow,
92
- padding = _ref.padding,
93
- paddingBottom = _ref.paddingBottom,
94
- paddingLeft = _ref.paddingLeft,
95
- paddingRight = _ref.paddingRight,
96
- paddingTop = _ref.paddingTop,
97
- paddingX = _ref.paddingX,
98
- paddingY = _ref.paddingY,
99
- position = _ref.position,
100
- right = _ref.right,
101
- shadow = _ref.shadow,
102
- top = _ref.top,
103
- userSelect = _ref.userSelect,
104
- width = _ref.width,
105
- zIndex = _ref.zIndex;
66
+ alignSelf = _ref.alignSelf,
67
+ background = _ref.background,
68
+ border = _ref.border,
69
+ borderTop = _ref.borderTop,
70
+ borderBottom = _ref.borderBottom,
71
+ borderLeft = _ref.borderLeft,
72
+ borderRight = _ref.borderRight,
73
+ borderRadius = _ref.borderRadius,
74
+ _ref$borderWidth = _ref.borderWidth,
75
+ borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
76
+ bottom = _ref.bottom,
77
+ cursor = _ref.cursor,
78
+ display = _ref.display,
79
+ flex = _ref.flex,
80
+ flexDirection = _ref.flexDirection,
81
+ flexGrow = _ref.flexGrow,
82
+ flexShrink = _ref.flexShrink,
83
+ flexWrap = _ref.flexWrap,
84
+ gap = _ref.gap,
85
+ height = _ref.height,
86
+ justifyContent = _ref.justifyContent,
87
+ left = _ref.left,
88
+ margin = _ref.margin,
89
+ marginBottom = _ref.marginBottom,
90
+ marginLeft = _ref.marginLeft,
91
+ marginRight = _ref.marginRight,
92
+ marginTop = _ref.marginTop,
93
+ marginX = _ref.marginX,
94
+ marginY = _ref.marginY,
95
+ minHeight = _ref.minHeight,
96
+ minWidth = _ref.minWidth,
97
+ opacity = _ref.opacity,
98
+ overflow = _ref.overflow,
99
+ padding = _ref.padding,
100
+ paddingBottom = _ref.paddingBottom,
101
+ paddingLeft = _ref.paddingLeft,
102
+ paddingRight = _ref.paddingRight,
103
+ paddingTop = _ref.paddingTop,
104
+ paddingX = _ref.paddingX,
105
+ paddingY = _ref.paddingY,
106
+ position = _ref.position,
107
+ right = _ref.right,
108
+ shadow = _ref.shadow,
109
+ top = _ref.top,
110
+ userSelect = _ref.userSelect,
111
+ width = _ref.width,
112
+ zIndex = _ref.zIndex;
106
113
  var theme$1 = theme.useTheme();
107
114
  var unresponsiveProps = {
108
115
  background: background ? theme$1.color.background[background] : undefined,
@@ -114,7 +121,6 @@ var useBoxStyles = function useBoxStyles(_ref) {
114
121
  overflow: overflow,
115
122
  userSelect: userSelect
116
123
  };
117
-
118
124
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
119
125
  borderStyle: 'solid',
120
126
  borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
@@ -136,7 +142,6 @@ var useBoxStyles = function useBoxStyles(_ref) {
136
142
  borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
137
143
  borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
138
144
  } : {});
139
-
140
145
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
141
146
  // allow padding and height/width props to play nice
142
147
  display: theme$1.utils.mapResponsiveProp(display),
@@ -174,7 +179,9 @@ var useBoxStyles = function useBoxStyles(_ref) {
174
179
  top: theme$1.utils.mapResponsiveProp(top),
175
180
  zIndex: theme$1.utils.mapResponsiveScale(zIndex, theme$1.elevation)
176
181
  }));
177
- }; // Flex shorthand / adjustments
182
+ };
183
+
184
+ // Flex shorthand / adjustments
178
185
  // ------------------------------
179
186
 
180
187
  var flexMap = {
@@ -200,58 +207,57 @@ var flexMap = {
200
207
  };
201
208
 
202
209
  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"];
203
- /** Separate the style properties from the element attributes. */
204
210
 
211
+ /** Separate the style properties from the element attributes. */
205
212
  function useBoxProps(props) {
206
213
  var alignItems = props.alignItems,
207
- alignSelf = props.alignSelf,
208
- background = props.background,
209
- border = props.border,
210
- borderRadius = props.borderRadius,
211
- borderWidth = props.borderWidth,
212
- borderTop = props.borderTop,
213
- borderBottom = props.borderBottom,
214
- borderLeft = props.borderLeft,
215
- borderRight = props.borderRight,
216
- bottom = props.bottom,
217
- cursor = props.cursor,
218
- display = props.display,
219
- flex = props.flex,
220
- flexDirection = props.flexDirection,
221
- flexGrow = props.flexGrow,
222
- flexShrink = props.flexShrink,
223
- flexWrap = props.flexWrap,
224
- gap = props.gap,
225
- height = props.height,
226
- justifyContent = props.justifyContent,
227
- left = props.left,
228
- margin = props.margin,
229
- marginBottom = props.marginBottom,
230
- marginLeft = props.marginLeft,
231
- marginRight = props.marginRight,
232
- marginTop = props.marginTop,
233
- marginX = props.marginX,
234
- marginY = props.marginY,
235
- minHeight = props.minHeight,
236
- minWidth = props.minWidth,
237
- opacity = props.opacity,
238
- overflow = props.overflow,
239
- padding = props.padding,
240
- paddingBottom = props.paddingBottom,
241
- paddingLeft = props.paddingLeft,
242
- paddingRight = props.paddingRight,
243
- paddingTop = props.paddingTop,
244
- paddingX = props.paddingX,
245
- paddingY = props.paddingY,
246
- position = props.position,
247
- right = props.right,
248
- shadow = props.shadow,
249
- top = props.top,
250
- userSelect = props.userSelect,
251
- width = props.width,
252
- zIndex = props.zIndex,
253
- attributes = _objectWithoutProperties(props, _excluded$1);
254
-
214
+ alignSelf = props.alignSelf,
215
+ background = props.background,
216
+ border = props.border,
217
+ borderRadius = props.borderRadius,
218
+ borderWidth = props.borderWidth,
219
+ borderTop = props.borderTop,
220
+ borderBottom = props.borderBottom,
221
+ borderLeft = props.borderLeft,
222
+ borderRight = props.borderRight,
223
+ bottom = props.bottom,
224
+ cursor = props.cursor,
225
+ display = props.display,
226
+ flex = props.flex,
227
+ flexDirection = props.flexDirection,
228
+ flexGrow = props.flexGrow,
229
+ flexShrink = props.flexShrink,
230
+ flexWrap = props.flexWrap,
231
+ gap = props.gap,
232
+ height = props.height,
233
+ justifyContent = props.justifyContent,
234
+ left = props.left,
235
+ margin = props.margin,
236
+ marginBottom = props.marginBottom,
237
+ marginLeft = props.marginLeft,
238
+ marginRight = props.marginRight,
239
+ marginTop = props.marginTop,
240
+ marginX = props.marginX,
241
+ marginY = props.marginY,
242
+ minHeight = props.minHeight,
243
+ minWidth = props.minWidth,
244
+ opacity = props.opacity,
245
+ overflow = props.overflow,
246
+ padding = props.padding,
247
+ paddingBottom = props.paddingBottom,
248
+ paddingLeft = props.paddingLeft,
249
+ paddingRight = props.paddingRight,
250
+ paddingTop = props.paddingTop,
251
+ paddingX = props.paddingX,
252
+ paddingY = props.paddingY,
253
+ position = props.position,
254
+ right = props.right,
255
+ shadow = props.shadow,
256
+ top = props.top,
257
+ userSelect = props.userSelect,
258
+ width = props.width,
259
+ zIndex = props.zIndex,
260
+ attributes = _objectWithoutProperties(props, _excluded$1);
255
261
  var styles = useBoxStyles({
256
262
  alignItems: alignItems,
257
263
  alignSelf: alignSelf,
@@ -308,29 +314,24 @@ function useBoxProps(props) {
308
314
  }
309
315
 
310
316
  var _excluded = ["as", "asElement", "className", "data", "id"];
311
-
312
317
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
313
318
  var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
314
319
  var _ref$as = _ref.as,
315
- Tag = _ref$as === void 0 ? 'div' : _ref$as,
316
- asElement = _ref.asElement,
317
- className = _ref.className,
318
- data = _ref.data,
319
- id = _ref.id,
320
- props = _objectWithoutProperties(_ref, _excluded);
321
-
320
+ Tag = _ref$as === void 0 ? 'div' : _ref$as,
321
+ asElement = _ref.asElement,
322
+ className = _ref.className,
323
+ data = _ref.data,
324
+ id = _ref.id,
325
+ props = _objectWithoutProperties(_ref, _excluded);
322
326
  var _useBoxProps = useBoxProps(props),
323
- styles = _useBoxProps.styles,
324
- attributes = _useBoxProps.attributes;
325
-
327
+ styles = _useBoxProps.styles,
328
+ attributes = _useBoxProps.attributes;
326
329
  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
327
-
328
330
  var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
329
331
  ref: forwardedRef,
330
332
  id: id,
331
333
  className: css.cx(css.css(resetStyles), css.css(styles), className)
332
334
  }, attributes));
333
-
334
335
  return renderBackgroundProvider(props.background, element);
335
336
  });
336
337
 
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -12,97 +12,104 @@ var internal = require('@spark-web/utils/internal');
12
12
  var ts = require('@spark-web/utils/ts');
13
13
 
14
14
  // prepare context
15
+
15
16
  var backgroundContext = /*#__PURE__*/react.createContext('body');
16
17
  var InternalBackgroundProvider = backgroundContext.Provider;
17
18
  var useBackground = function useBackground() {
18
19
  return react.useContext(backgroundContext);
19
- }; // conditional provider
20
+ };
21
+
22
+ // conditional provider
20
23
 
21
24
  function renderBackgroundProvider(background, element) {
22
25
  return background ? /*#__PURE__*/jsxRuntime.jsx(InternalBackgroundProvider, {
23
26
  value: background,
24
27
  children: element
25
28
  }) : element;
26
- } // a11y contrast utility
29
+ }
30
+
31
+ // a11y contrast utility
27
32
 
28
33
  var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
29
34
  var backgroundFromContext = useBackground();
30
35
  var background = backgroundOverride || backgroundFromContext;
31
36
  var theme$1 = theme.useTheme();
32
- var defaultLightness = theme$1.backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
37
+ var defaultLightness = theme$1.backgroundLightness.body;
33
38
 
39
+ // used by the consumer-facing/external BackgroundProvider
34
40
  if (background === 'UNKNOWN_DARK') {
35
41
  return 'dark';
36
42
  }
37
-
38
43
  if (background === 'UNKNOWN_LIGHT') {
39
44
  return 'light';
40
45
  }
41
-
42
46
  return background ? theme$1.backgroundLightness[background] || defaultLightness : defaultLightness;
43
47
  };
44
48
 
45
49
  /** Enforce background "lightness" without applying a background color. */
46
50
  var BackgroundProvider = function BackgroundProvider(_ref) {
47
51
  var type = _ref.type,
48
- children = _ref.children;
52
+ children = _ref.children;
49
53
  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
50
54
  };
51
55
 
56
+ // TODO perf review
52
57
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
58
+
53
59
  // types
54
60
 
55
61
  // Hook
56
62
  // ------------------------------
63
+
57
64
  var useBoxStyles = function useBoxStyles(_ref) {
58
65
  var alignItems = _ref.alignItems,
59
- alignSelf = _ref.alignSelf,
60
- background = _ref.background,
61
- border = _ref.border,
62
- borderTop = _ref.borderTop,
63
- borderBottom = _ref.borderBottom,
64
- borderLeft = _ref.borderLeft,
65
- borderRight = _ref.borderRight,
66
- borderRadius = _ref.borderRadius,
67
- _ref$borderWidth = _ref.borderWidth,
68
- borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
69
- bottom = _ref.bottom,
70
- cursor = _ref.cursor,
71
- display = _ref.display,
72
- flex = _ref.flex,
73
- flexDirection = _ref.flexDirection,
74
- flexGrow = _ref.flexGrow,
75
- flexShrink = _ref.flexShrink,
76
- flexWrap = _ref.flexWrap,
77
- gap = _ref.gap,
78
- height = _ref.height,
79
- justifyContent = _ref.justifyContent,
80
- left = _ref.left,
81
- margin = _ref.margin,
82
- marginBottom = _ref.marginBottom,
83
- marginLeft = _ref.marginLeft,
84
- marginRight = _ref.marginRight,
85
- marginTop = _ref.marginTop,
86
- marginX = _ref.marginX,
87
- marginY = _ref.marginY,
88
- minHeight = _ref.minHeight,
89
- minWidth = _ref.minWidth,
90
- opacity = _ref.opacity,
91
- overflow = _ref.overflow,
92
- padding = _ref.padding,
93
- paddingBottom = _ref.paddingBottom,
94
- paddingLeft = _ref.paddingLeft,
95
- paddingRight = _ref.paddingRight,
96
- paddingTop = _ref.paddingTop,
97
- paddingX = _ref.paddingX,
98
- paddingY = _ref.paddingY,
99
- position = _ref.position,
100
- right = _ref.right,
101
- shadow = _ref.shadow,
102
- top = _ref.top,
103
- userSelect = _ref.userSelect,
104
- width = _ref.width,
105
- zIndex = _ref.zIndex;
66
+ alignSelf = _ref.alignSelf,
67
+ background = _ref.background,
68
+ border = _ref.border,
69
+ borderTop = _ref.borderTop,
70
+ borderBottom = _ref.borderBottom,
71
+ borderLeft = _ref.borderLeft,
72
+ borderRight = _ref.borderRight,
73
+ borderRadius = _ref.borderRadius,
74
+ _ref$borderWidth = _ref.borderWidth,
75
+ borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
76
+ bottom = _ref.bottom,
77
+ cursor = _ref.cursor,
78
+ display = _ref.display,
79
+ flex = _ref.flex,
80
+ flexDirection = _ref.flexDirection,
81
+ flexGrow = _ref.flexGrow,
82
+ flexShrink = _ref.flexShrink,
83
+ flexWrap = _ref.flexWrap,
84
+ gap = _ref.gap,
85
+ height = _ref.height,
86
+ justifyContent = _ref.justifyContent,
87
+ left = _ref.left,
88
+ margin = _ref.margin,
89
+ marginBottom = _ref.marginBottom,
90
+ marginLeft = _ref.marginLeft,
91
+ marginRight = _ref.marginRight,
92
+ marginTop = _ref.marginTop,
93
+ marginX = _ref.marginX,
94
+ marginY = _ref.marginY,
95
+ minHeight = _ref.minHeight,
96
+ minWidth = _ref.minWidth,
97
+ opacity = _ref.opacity,
98
+ overflow = _ref.overflow,
99
+ padding = _ref.padding,
100
+ paddingBottom = _ref.paddingBottom,
101
+ paddingLeft = _ref.paddingLeft,
102
+ paddingRight = _ref.paddingRight,
103
+ paddingTop = _ref.paddingTop,
104
+ paddingX = _ref.paddingX,
105
+ paddingY = _ref.paddingY,
106
+ position = _ref.position,
107
+ right = _ref.right,
108
+ shadow = _ref.shadow,
109
+ top = _ref.top,
110
+ userSelect = _ref.userSelect,
111
+ width = _ref.width,
112
+ zIndex = _ref.zIndex;
106
113
  var theme$1 = theme.useTheme();
107
114
  var unresponsiveProps = {
108
115
  background: background ? theme$1.color.background[background] : undefined,
@@ -114,7 +121,6 @@ var useBoxStyles = function useBoxStyles(_ref) {
114
121
  overflow: overflow,
115
122
  userSelect: userSelect
116
123
  };
117
-
118
124
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
119
125
  borderStyle: 'solid',
120
126
  borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
@@ -136,7 +142,6 @@ var useBoxStyles = function useBoxStyles(_ref) {
136
142
  borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
137
143
  borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
138
144
  } : {});
139
-
140
145
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
141
146
  // allow padding and height/width props to play nice
142
147
  display: theme$1.utils.mapResponsiveProp(display),
@@ -174,7 +179,9 @@ var useBoxStyles = function useBoxStyles(_ref) {
174
179
  top: theme$1.utils.mapResponsiveProp(top),
175
180
  zIndex: theme$1.utils.mapResponsiveScale(zIndex, theme$1.elevation)
176
181
  }));
177
- }; // Flex shorthand / adjustments
182
+ };
183
+
184
+ // Flex shorthand / adjustments
178
185
  // ------------------------------
179
186
 
180
187
  var flexMap = {
@@ -200,58 +207,57 @@ var flexMap = {
200
207
  };
201
208
 
202
209
  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"];
203
- /** Separate the style properties from the element attributes. */
204
210
 
211
+ /** Separate the style properties from the element attributes. */
205
212
  function useBoxProps(props) {
206
213
  var alignItems = props.alignItems,
207
- alignSelf = props.alignSelf,
208
- background = props.background,
209
- border = props.border,
210
- borderRadius = props.borderRadius,
211
- borderWidth = props.borderWidth,
212
- borderTop = props.borderTop,
213
- borderBottom = props.borderBottom,
214
- borderLeft = props.borderLeft,
215
- borderRight = props.borderRight,
216
- bottom = props.bottom,
217
- cursor = props.cursor,
218
- display = props.display,
219
- flex = props.flex,
220
- flexDirection = props.flexDirection,
221
- flexGrow = props.flexGrow,
222
- flexShrink = props.flexShrink,
223
- flexWrap = props.flexWrap,
224
- gap = props.gap,
225
- height = props.height,
226
- justifyContent = props.justifyContent,
227
- left = props.left,
228
- margin = props.margin,
229
- marginBottom = props.marginBottom,
230
- marginLeft = props.marginLeft,
231
- marginRight = props.marginRight,
232
- marginTop = props.marginTop,
233
- marginX = props.marginX,
234
- marginY = props.marginY,
235
- minHeight = props.minHeight,
236
- minWidth = props.minWidth,
237
- opacity = props.opacity,
238
- overflow = props.overflow,
239
- padding = props.padding,
240
- paddingBottom = props.paddingBottom,
241
- paddingLeft = props.paddingLeft,
242
- paddingRight = props.paddingRight,
243
- paddingTop = props.paddingTop,
244
- paddingX = props.paddingX,
245
- paddingY = props.paddingY,
246
- position = props.position,
247
- right = props.right,
248
- shadow = props.shadow,
249
- top = props.top,
250
- userSelect = props.userSelect,
251
- width = props.width,
252
- zIndex = props.zIndex,
253
- attributes = _objectWithoutProperties(props, _excluded$1);
254
-
214
+ alignSelf = props.alignSelf,
215
+ background = props.background,
216
+ border = props.border,
217
+ borderRadius = props.borderRadius,
218
+ borderWidth = props.borderWidth,
219
+ borderTop = props.borderTop,
220
+ borderBottom = props.borderBottom,
221
+ borderLeft = props.borderLeft,
222
+ borderRight = props.borderRight,
223
+ bottom = props.bottom,
224
+ cursor = props.cursor,
225
+ display = props.display,
226
+ flex = props.flex,
227
+ flexDirection = props.flexDirection,
228
+ flexGrow = props.flexGrow,
229
+ flexShrink = props.flexShrink,
230
+ flexWrap = props.flexWrap,
231
+ gap = props.gap,
232
+ height = props.height,
233
+ justifyContent = props.justifyContent,
234
+ left = props.left,
235
+ margin = props.margin,
236
+ marginBottom = props.marginBottom,
237
+ marginLeft = props.marginLeft,
238
+ marginRight = props.marginRight,
239
+ marginTop = props.marginTop,
240
+ marginX = props.marginX,
241
+ marginY = props.marginY,
242
+ minHeight = props.minHeight,
243
+ minWidth = props.minWidth,
244
+ opacity = props.opacity,
245
+ overflow = props.overflow,
246
+ padding = props.padding,
247
+ paddingBottom = props.paddingBottom,
248
+ paddingLeft = props.paddingLeft,
249
+ paddingRight = props.paddingRight,
250
+ paddingTop = props.paddingTop,
251
+ paddingX = props.paddingX,
252
+ paddingY = props.paddingY,
253
+ position = props.position,
254
+ right = props.right,
255
+ shadow = props.shadow,
256
+ top = props.top,
257
+ userSelect = props.userSelect,
258
+ width = props.width,
259
+ zIndex = props.zIndex,
260
+ attributes = _objectWithoutProperties(props, _excluded$1);
255
261
  var styles = useBoxStyles({
256
262
  alignItems: alignItems,
257
263
  alignSelf: alignSelf,
@@ -308,29 +314,24 @@ function useBoxProps(props) {
308
314
  }
309
315
 
310
316
  var _excluded = ["as", "asElement", "className", "data", "id"];
311
-
312
317
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
313
318
  var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
314
319
  var _ref$as = _ref.as,
315
- Tag = _ref$as === void 0 ? 'div' : _ref$as,
316
- asElement = _ref.asElement,
317
- className = _ref.className,
318
- data = _ref.data,
319
- id = _ref.id,
320
- props = _objectWithoutProperties(_ref, _excluded);
321
-
320
+ Tag = _ref$as === void 0 ? 'div' : _ref$as,
321
+ asElement = _ref.asElement,
322
+ className = _ref.className,
323
+ data = _ref.data,
324
+ id = _ref.id,
325
+ props = _objectWithoutProperties(_ref, _excluded);
322
326
  var _useBoxProps = useBoxProps(props),
323
- styles = _useBoxProps.styles,
324
- attributes = _useBoxProps.attributes;
325
-
327
+ styles = _useBoxProps.styles,
328
+ attributes = _useBoxProps.attributes;
326
329
  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
327
-
328
330
  var element = /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
329
331
  ref: forwardedRef,
330
332
  id: id,
331
333
  className: css.cx(css.css(resetStyles), css.css(styles), className)
332
334
  }, attributes));
333
-
334
335
  return renderBackgroundProvider(props.background, element);
335
336
  });
336
337
 
package/dist/spark-web-box.esm.js CHANGED
@@ -8,97 +8,104 @@ import { resetElementStyles, buildDataAttributes } from '@spark-web/utils/intern
8
8
  import { forwardRefWithAs } from '@spark-web/utils/ts';
9
9
 
10
10
  // prepare context
11
+
11
12
  var backgroundContext = /*#__PURE__*/createContext('body');
12
13
  var InternalBackgroundProvider = backgroundContext.Provider;
13
14
  var useBackground = function useBackground() {
14
15
  return useContext(backgroundContext);
15
- }; // conditional provider
16
+ };
17
+
18
+ // conditional provider
16
19
 
17
20
  function renderBackgroundProvider(background, element) {
18
21
  return background ? /*#__PURE__*/jsx(InternalBackgroundProvider, {
19
22
  value: background,
20
23
  children: element
21
24
  }) : element;
22
- } // a11y contrast utility
25
+ }
26
+
27
+ // a11y contrast utility
23
28
 
24
29
  var useBackgroundLightness = function useBackgroundLightness(backgroundOverride) {
25
30
  var backgroundFromContext = useBackground();
26
31
  var background = backgroundOverride || backgroundFromContext;
27
32
  var theme = useTheme();
28
- var defaultLightness = theme.backgroundLightness.body; // used by the consumer-facing/external BackgroundProvider
33
+ var defaultLightness = theme.backgroundLightness.body;
29
34
 
35
+ // used by the consumer-facing/external BackgroundProvider
30
36
  if (background === 'UNKNOWN_DARK') {
31
37
  return 'dark';
32
38
  }
33
-
34
39
  if (background === 'UNKNOWN_LIGHT') {
35
40
  return 'light';
36
41
  }
37
-
38
42
  return background ? theme.backgroundLightness[background] || defaultLightness : defaultLightness;
39
43
  };
40
44
 
41
45
  /** Enforce background "lightness" without applying a background color. */
42
46
  var BackgroundProvider = function BackgroundProvider(_ref) {
43
47
  var type = _ref.type,
44
- children = _ref.children;
48
+ children = _ref.children;
45
49
  return renderBackgroundProvider(type === 'dark' ? 'UNKNOWN_DARK' : 'UNKNOWN_LIGHT', children);
46
50
  };
47
51
 
52
+ // TODO perf review
48
53
  // TODO: review responsive props! Now that we're using object syntax, un-mapped properties don't behave as expected
54
+
49
55
  // types
50
56
 
51
57
  // Hook
52
58
  // ------------------------------
59
+
53
60
  var useBoxStyles = function useBoxStyles(_ref) {
54
61
  var alignItems = _ref.alignItems,
55
- alignSelf = _ref.alignSelf,
56
- background = _ref.background,
57
- border = _ref.border,
58
- borderTop = _ref.borderTop,
59
- borderBottom = _ref.borderBottom,
60
- borderLeft = _ref.borderLeft,
61
- borderRight = _ref.borderRight,
62
- borderRadius = _ref.borderRadius,
63
- _ref$borderWidth = _ref.borderWidth,
64
- borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
65
- bottom = _ref.bottom,
66
- cursor = _ref.cursor,
67
- display = _ref.display,
68
- flex = _ref.flex,
69
- flexDirection = _ref.flexDirection,
70
- flexGrow = _ref.flexGrow,
71
- flexShrink = _ref.flexShrink,
72
- flexWrap = _ref.flexWrap,
73
- gap = _ref.gap,
74
- height = _ref.height,
75
- justifyContent = _ref.justifyContent,
76
- left = _ref.left,
77
- margin = _ref.margin,
78
- marginBottom = _ref.marginBottom,
79
- marginLeft = _ref.marginLeft,
80
- marginRight = _ref.marginRight,
81
- marginTop = _ref.marginTop,
82
- marginX = _ref.marginX,
83
- marginY = _ref.marginY,
84
- minHeight = _ref.minHeight,
85
- minWidth = _ref.minWidth,
86
- opacity = _ref.opacity,
87
- overflow = _ref.overflow,
88
- padding = _ref.padding,
89
- paddingBottom = _ref.paddingBottom,
90
- paddingLeft = _ref.paddingLeft,
91
- paddingRight = _ref.paddingRight,
92
- paddingTop = _ref.paddingTop,
93
- paddingX = _ref.paddingX,
94
- paddingY = _ref.paddingY,
95
- position = _ref.position,
96
- right = _ref.right,
97
- shadow = _ref.shadow,
98
- top = _ref.top,
99
- userSelect = _ref.userSelect,
100
- width = _ref.width,
101
- zIndex = _ref.zIndex;
62
+ alignSelf = _ref.alignSelf,
63
+ background = _ref.background,
64
+ border = _ref.border,
65
+ borderTop = _ref.borderTop,
66
+ borderBottom = _ref.borderBottom,
67
+ borderLeft = _ref.borderLeft,
68
+ borderRight = _ref.borderRight,
69
+ borderRadius = _ref.borderRadius,
70
+ _ref$borderWidth = _ref.borderWidth,
71
+ borderWidth = _ref$borderWidth === void 0 ? 'standard' : _ref$borderWidth,
72
+ bottom = _ref.bottom,
73
+ cursor = _ref.cursor,
74
+ display = _ref.display,
75
+ flex = _ref.flex,
76
+ flexDirection = _ref.flexDirection,
77
+ flexGrow = _ref.flexGrow,
78
+ flexShrink = _ref.flexShrink,
79
+ flexWrap = _ref.flexWrap,
80
+ gap = _ref.gap,
81
+ height = _ref.height,
82
+ justifyContent = _ref.justifyContent,
83
+ left = _ref.left,
84
+ margin = _ref.margin,
85
+ marginBottom = _ref.marginBottom,
86
+ marginLeft = _ref.marginLeft,
87
+ marginRight = _ref.marginRight,
88
+ marginTop = _ref.marginTop,
89
+ marginX = _ref.marginX,
90
+ marginY = _ref.marginY,
91
+ minHeight = _ref.minHeight,
92
+ minWidth = _ref.minWidth,
93
+ opacity = _ref.opacity,
94
+ overflow = _ref.overflow,
95
+ padding = _ref.padding,
96
+ paddingBottom = _ref.paddingBottom,
97
+ paddingLeft = _ref.paddingLeft,
98
+ paddingRight = _ref.paddingRight,
99
+ paddingTop = _ref.paddingTop,
100
+ paddingX = _ref.paddingX,
101
+ paddingY = _ref.paddingY,
102
+ position = _ref.position,
103
+ right = _ref.right,
104
+ shadow = _ref.shadow,
105
+ top = _ref.top,
106
+ userSelect = _ref.userSelect,
107
+ width = _ref.width,
108
+ zIndex = _ref.zIndex;
102
109
  var theme = useTheme();
103
110
  var unresponsiveProps = {
104
111
  background: background ? theme.color.background[background] : undefined,
@@ -110,7 +117,6 @@ var useBoxStyles = function useBoxStyles(_ref) {
110
117
  overflow: overflow,
111
118
  userSelect: userSelect
112
119
  };
113
-
114
120
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
115
121
  borderStyle: 'solid',
116
122
  borderColor: theme.utils.mapResponsiveScale(border, theme.border.color),
@@ -132,7 +138,6 @@ var useBoxStyles = function useBoxStyles(_ref) {
132
138
  borderRightColor: theme.utils.mapResponsiveScale(borderRight, theme.border.color),
133
139
  borderRightWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
134
140
  } : {});
135
-
136
141
  return theme.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
137
142
  // allow padding and height/width props to play nice
138
143
  display: theme.utils.mapResponsiveProp(display),
@@ -170,7 +175,9 @@ var useBoxStyles = function useBoxStyles(_ref) {
170
175
  top: theme.utils.mapResponsiveProp(top),
171
176
  zIndex: theme.utils.mapResponsiveScale(zIndex, theme.elevation)
172
177
  }));
173
- }; // Flex shorthand / adjustments
178
+ };
179
+
180
+ // Flex shorthand / adjustments
174
181
  // ------------------------------
175
182
 
176
183
  var flexMap = {
@@ -196,58 +203,57 @@ var flexMap = {
196
203
  };
197
204
 
198
205
  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"];
199
- /** Separate the style properties from the element attributes. */
200
206
 
207
+ /** Separate the style properties from the element attributes. */
201
208
  function useBoxProps(props) {
202
209
  var alignItems = props.alignItems,
203
- alignSelf = props.alignSelf,
204
- background = props.background,
205
- border = props.border,
206
- borderRadius = props.borderRadius,
207
- borderWidth = props.borderWidth,
208
- borderTop = props.borderTop,
209
- borderBottom = props.borderBottom,
210
- borderLeft = props.borderLeft,
211
- borderRight = props.borderRight,
212
- bottom = props.bottom,
213
- cursor = props.cursor,
214
- display = props.display,
215
- flex = props.flex,
216
- flexDirection = props.flexDirection,
217
- flexGrow = props.flexGrow,
218
- flexShrink = props.flexShrink,
219
- flexWrap = props.flexWrap,
220
- gap = props.gap,
221
- height = props.height,
222
- justifyContent = props.justifyContent,
223
- left = props.left,
224
- margin = props.margin,
225
- marginBottom = props.marginBottom,
226
- marginLeft = props.marginLeft,
227
- marginRight = props.marginRight,
228
- marginTop = props.marginTop,
229
- marginX = props.marginX,
230
- marginY = props.marginY,
231
- minHeight = props.minHeight,
232
- minWidth = props.minWidth,
233
- opacity = props.opacity,
234
- overflow = props.overflow,
235
- padding = props.padding,
236
- paddingBottom = props.paddingBottom,
237
- paddingLeft = props.paddingLeft,
238
- paddingRight = props.paddingRight,
239
- paddingTop = props.paddingTop,
240
- paddingX = props.paddingX,
241
- paddingY = props.paddingY,
242
- position = props.position,
243
- right = props.right,
244
- shadow = props.shadow,
245
- top = props.top,
246
- userSelect = props.userSelect,
247
- width = props.width,
248
- zIndex = props.zIndex,
249
- attributes = _objectWithoutProperties(props, _excluded$1);
250
-
210
+ alignSelf = props.alignSelf,
211
+ background = props.background,
212
+ border = props.border,
213
+ borderRadius = props.borderRadius,
214
+ borderWidth = props.borderWidth,
215
+ borderTop = props.borderTop,
216
+ borderBottom = props.borderBottom,
217
+ borderLeft = props.borderLeft,
218
+ borderRight = props.borderRight,
219
+ bottom = props.bottom,
220
+ cursor = props.cursor,
221
+ display = props.display,
222
+ flex = props.flex,
223
+ flexDirection = props.flexDirection,
224
+ flexGrow = props.flexGrow,
225
+ flexShrink = props.flexShrink,
226
+ flexWrap = props.flexWrap,
227
+ gap = props.gap,
228
+ height = props.height,
229
+ justifyContent = props.justifyContent,
230
+ left = props.left,
231
+ margin = props.margin,
232
+ marginBottom = props.marginBottom,
233
+ marginLeft = props.marginLeft,
234
+ marginRight = props.marginRight,
235
+ marginTop = props.marginTop,
236
+ marginX = props.marginX,
237
+ marginY = props.marginY,
238
+ minHeight = props.minHeight,
239
+ minWidth = props.minWidth,
240
+ opacity = props.opacity,
241
+ overflow = props.overflow,
242
+ padding = props.padding,
243
+ paddingBottom = props.paddingBottom,
244
+ paddingLeft = props.paddingLeft,
245
+ paddingRight = props.paddingRight,
246
+ paddingTop = props.paddingTop,
247
+ paddingX = props.paddingX,
248
+ paddingY = props.paddingY,
249
+ position = props.position,
250
+ right = props.right,
251
+ shadow = props.shadow,
252
+ top = props.top,
253
+ userSelect = props.userSelect,
254
+ width = props.width,
255
+ zIndex = props.zIndex,
256
+ attributes = _objectWithoutProperties(props, _excluded$1);
251
257
  var styles = useBoxStyles({
252
258
  alignItems: alignItems,
253
259
  alignSelf: alignSelf,
@@ -304,29 +310,24 @@ function useBoxProps(props) {
304
310
  }
305
311
 
306
312
  var _excluded = ["as", "asElement", "className", "data", "id"];
307
-
308
313
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
309
314
  var Box = forwardRefWithAs(function (_ref, forwardedRef) {
310
315
  var _ref$as = _ref.as,
311
- Tag = _ref$as === void 0 ? 'div' : _ref$as,
312
- asElement = _ref.asElement,
313
- className = _ref.className,
314
- data = _ref.data,
315
- id = _ref.id,
316
- props = _objectWithoutProperties(_ref, _excluded);
317
-
316
+ Tag = _ref$as === void 0 ? 'div' : _ref$as,
317
+ asElement = _ref.asElement,
318
+ className = _ref.className,
319
+ data = _ref.data,
320
+ id = _ref.id,
321
+ props = _objectWithoutProperties(_ref, _excluded);
318
322
  var _useBoxProps = useBoxProps(props),
319
- styles = _useBoxProps.styles,
320
- attributes = _useBoxProps.attributes;
321
-
323
+ styles = _useBoxProps.styles,
324
+ attributes = _useBoxProps.attributes;
322
325
  var resetStyles = resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
323
-
324
326
  var element = /*#__PURE__*/jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
325
327
  ref: forwardedRef,
326
328
  id: id,
327
329
  className: cx(css(resetStyles), css(styles), className)
328
330
  }, attributes));
329
-
330
331
  return renderBackgroundProvider(props.background, element);
331
332
  });
332
333
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/box",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,12 +17,12 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.19.0",
19
19
  "@emotion/css": "^11.9.0",
20
- "@spark-web/theme": "^3.1.0",
21
- "@spark-web/utils": "^1.2.3"
20
+ "@spark-web/theme": "^3.2.0",
21
+ "@spark-web/utils": "^1.3.0"
22
22
  },
23
23
  "devDependencies": {
24
- "@types/react": "^17.0.12",
25
- "react": "^17.0.2"
24
+ "@types/react": "^18.2.0",
25
+ "react": "^18.2.0"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "react": ">=17.0.2"