@spark-web/box 2.0.0-rc.9 → 5.0.0-rc.25

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 (7) hide show
  1. package/CHANGELOG.md +168 -0
  2. package/dist/declarations/src/box.d.ts +5 -4
  3. package/dist/declarations/src/use-box-styles.d.ts +14 -14
  4. package/dist/spark-web-box.cjs.dev.js +16 -16
  5. package/dist/spark-web-box.cjs.prod.js +16 -16
  6. package/dist/spark-web-box.esm.js +17 -17
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,173 @@
1
1
  # @spark-web/box
2
2
 
3
+ ## 5.0.0-rc.25
4
+
5
+ ### Minor Changes
6
+
7
+ - Implement checkbox tokens for test theme
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/theme@5.0.0-rc.25
13
+ - @spark-web/utils@5.0.0-rc.25
14
+
15
+ ## 5.0.0-rc.24
16
+
17
+ ### Minor Changes
18
+
19
+ - Resolve issues with package build output
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies []:
24
+ - @spark-web/theme@5.0.0-rc.24
25
+ - @spark-web/utils@5.0.0-rc.24
26
+
27
+ ## 2.0.0-rc.21
28
+
29
+ ### Minor Changes
30
+
31
+ - Introduce global theming provider to set global default theme
32
+
33
+ ### Patch Changes
34
+
35
+ - Updated dependencies []:
36
+ - @spark-web/theme@4.0.0-rc.21
37
+ - @spark-web/utils@2.0.0-rc.21
38
+
39
+ ## 2.0.0-rc.20
40
+
41
+ ### Minor Changes
42
+
43
+ - Support for component-level theming; button-level theming
44
+
45
+ ### Patch Changes
46
+
47
+ - Updated dependencies []:
48
+ - @spark-web/theme@4.0.0-rc.20
49
+ - @spark-web/utils@2.0.0-rc.20
50
+
51
+ ## 2.0.0-rc.19
52
+
53
+ ### Major Changes
54
+
55
+ - test
56
+
57
+ ### Patch Changes
58
+
59
+ - Updated dependencies []:
60
+ - @spark-web/theme@4.0.0-rc.19
61
+ - @spark-web/utils@2.0.0-rc.19
62
+
63
+ ## 2.0.0-rc.18
64
+
65
+ ### Major Changes
66
+
67
+ - tests
68
+
69
+ ### Patch Changes
70
+
71
+ - Updated dependencies []:
72
+ - @spark-web/theme@4.0.0-rc.18
73
+ - @spark-web/utils@2.0.0-rc.18
74
+
75
+ ## 2.0.0-rc.17
76
+
77
+ ### Major Changes
78
+
79
+ - test
80
+
81
+ ### Patch Changes
82
+
83
+ - Updated dependencies []:
84
+ - @spark-web/theme@4.0.0-rc.17
85
+ - @spark-web/utils@2.0.0-rc.17
86
+
87
+ ## 2.0.0-rc.16
88
+
89
+ ### Major Changes
90
+
91
+ - test
92
+
93
+ ### Patch Changes
94
+
95
+ - Updated dependencies []:
96
+ - @spark-web/theme@4.0.0-rc.16
97
+ - @spark-web/utils@2.0.0-rc.16
98
+
99
+ ## 2.0.0-rc.15
100
+
101
+ ### Major Changes
102
+
103
+ - test
104
+
105
+ ### Patch Changes
106
+
107
+ - Updated dependencies []:
108
+ - @spark-web/theme@4.0.0-rc.15
109
+ - @spark-web/utils@2.0.0-rc.15
110
+
111
+ ## 2.0.0-rc.14
112
+
113
+ ### Major Changes
114
+
115
+ - test
116
+
117
+ ### Patch Changes
118
+
119
+ - Updated dependencies []:
120
+ - @spark-web/theme@4.0.0-rc.14
121
+ - @spark-web/utils@2.0.0-rc.14
122
+
123
+ ## 2.0.0-rc.13
124
+
125
+ ### Major Changes
126
+
127
+ - test
128
+
129
+ ### Patch Changes
130
+
131
+ - Updated dependencies []:
132
+ - @spark-web/theme@4.0.0-rc.13
133
+ - @spark-web/utils@2.0.0-rc.13
134
+
135
+ ## 2.0.0-rc.12
136
+
137
+ ### Major Changes
138
+
139
+ - test
140
+
141
+ ### Patch Changes
142
+
143
+ - Updated dependencies []:
144
+ - @spark-web/theme@4.0.0-rc.12
145
+ - @spark-web/utils@2.0.0-rc.12
146
+
147
+ ## 2.0.0-rc.11
148
+
149
+ ### Major Changes
150
+
151
+ - test
152
+
153
+ ### Patch Changes
154
+
155
+ - Updated dependencies []:
156
+ - @spark-web/theme@4.0.0-rc.11
157
+ - @spark-web/utils@2.0.0-rc.11
158
+
159
+ ## 2.0.0-rc.10
160
+
161
+ ### Major Changes
162
+
163
+ - test
164
+
165
+ ### Patch Changes
166
+
167
+ - Updated dependencies []:
168
+ - @spark-web/theme@4.0.0-rc.10
169
+ - @spark-web/utils@2.0.0-rc.10
170
+
3
171
  ## 2.0.0-rc.9
4
172
 
5
173
  ### Major Changes
package/dist/declarations/src/box.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /** @jsxImportSource @emotion/react */
1
2
  import { type SerializedStyles } from '@emotion/react';
2
3
  import type { DataAttributeMap } from '@spark-web/utils/internal';
3
4
  import type { ReactNode } from 'react';
@@ -21,7 +22,7 @@ export declare type BoxProps = {
21
22
  /** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
22
23
  export declare const Box: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
23
24
  as?: Comp | undefined;
24
- ref?: import("react").Ref<Comp extends "symbol" | "text" | "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" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "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" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
25
+ 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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | 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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
25
26
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
26
27
  /** Children element to be rendered inside the component. */
27
28
  children?: ReactNode;
@@ -38,11 +39,11 @@ export declare const Box: <Comp extends import("react").ElementType<any, keyof i
38
39
  */
39
40
  asElement?: keyof HTMLElementTagNameMap | undefined;
40
41
  } & {
41
- background?: "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "body" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "input" | "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;
42
+ background?: string | number | undefined;
42
43
  cursor?: "default" | "pointer" | undefined;
43
44
  minHeight?: 0 | undefined;
44
45
  minWidth?: 0 | undefined;
45
- overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
46
- shadow?: "small" | "large" | "medium" | undefined;
46
+ overflow?: "hidden" | "scroll" | "auto" | "visible" | undefined;
47
+ shadow?: "small" | "medium" | "large" | undefined;
47
48
  userSelect?: "none" | undefined;
48
49
  } & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/declarations/src/use-box-styles.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import type { BrighteTheme, ResponsiveProp } from '@spark-web/theme';
2
- declare type ValidGapKeys = keyof Omit<BrighteTheme['spacing'], 'none' | 'full'>;
3
- declare type ResponsiveSpacing = ResponsiveProp<keyof BrighteTheme['spacing']>;
4
- declare type ResponsiveSizing = ResponsiveProp<keyof BrighteTheme['sizing']>;
1
+ import type { ResponsiveProp, SparkTheme } from '@spark-web/theme';
2
+ declare type ValidGapKeys = keyof Omit<SparkTheme['spacing'], 'none' | 'full'>;
3
+ declare type ResponsiveSpacing = ResponsiveProp<keyof SparkTheme['spacing']>;
4
+ declare type ResponsiveSizing = ResponsiveProp<keyof SparkTheme['sizing']>;
5
5
  export declare type ResponsiveBoxProps = {
6
6
  /**
7
7
  * The `margin` shorthand property sets the margin area on all four sides of
@@ -74,24 +74,24 @@ export declare type ResponsiveBoxProps = {
74
74
  */
75
75
  paddingX?: ResponsiveSpacing;
76
76
  /** The `border` property sets the color of an element's border. */
77
- border?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
77
+ border?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
78
78
  /** The `border` property sets the color of an element's border on the top side. */
79
- borderTop?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
79
+ borderTop?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
80
80
  /** The `border` property sets the color of an element's border on the bottom side. */
81
- borderBottom?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
81
+ borderBottom?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
82
82
  /** The `border` property sets the color of an element's border on the left side. */
83
- borderLeft?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
83
+ borderLeft?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
84
84
  /** The `border` property sets the color of an element's border on the right side. */
85
- borderRight?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
85
+ borderRight?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
86
86
  /**
87
87
  * The `borderRadius` property rounds the corners of an element's outer
88
88
  * border edge.
89
89
  */
90
- borderRadius?: ResponsiveProp<keyof BrighteTheme['border']['radius']>;
90
+ borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']>;
91
91
  /**
92
92
  * The `borderWidth` property sets the width of an element's border.
93
93
  */
94
- borderWidth?: ResponsiveProp<keyof BrighteTheme['border']['width']>;
94
+ borderWidth?: ResponsiveProp<keyof SparkTheme['border']['width']>;
95
95
  /** Sets the element's height. */
96
96
  height?: ResponsiveSizing;
97
97
  /** Sets the element's width. */
@@ -158,7 +158,7 @@ export declare type ResponsiveBoxProps = {
158
158
  * descendants or flex items. Overlapping elements with a larger z-index cover
159
159
  * those with a smaller one.
160
160
  */
161
- zIndex?: ResponsiveProp<keyof BrighteTheme['elevation']>;
161
+ zIndex?: ResponsiveProp<keyof SparkTheme['elevation']>;
162
162
  /**
163
163
  * Sets whether an element is treated as a block or inline element and the
164
164
  * layout used for its children.
@@ -172,7 +172,7 @@ export declare type ResponsiveBoxProps = {
172
172
  };
173
173
  declare type UnresponsiveBoxProps = {
174
174
  /** The `background` property sets the background color of an element. */
175
- background?: keyof BrighteTheme['color']['background'];
175
+ background?: keyof SparkTheme['color']['background'];
176
176
  /**
177
177
  * The `cursor` property sets the type of mouse cursor, if any, to show when
178
178
  * the mouse pointer is over an element.
@@ -197,7 +197,7 @@ declare type UnresponsiveBoxProps = {
197
197
  */
198
198
  overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
199
199
  /** The `boxShadow` property adds shadow effects around an element's frame. */
200
- shadow?: keyof BrighteTheme['shadow'];
200
+ shadow?: keyof SparkTheme['shadow'];
201
201
  /** The `userSelect` property controls whether the user can select text. */
202
202
  userSelect?: 'none';
203
203
  };
package/dist/spark-web-box.cjs.dev.js CHANGED
@@ -121,25 +121,31 @@ var useBoxStyles = function useBoxStyles(_ref) {
121
121
  overflow: overflow,
122
122
  userSelect: userSelect
123
123
  };
124
+ var convertBorderValue = function convertBorderValue(value, scaleDefinition) {
125
+ if (!(typeof value === 'string' && value in scaleDefinition)) {
126
+ return value;
127
+ }
128
+ return theme$1.utils.mapResponsiveScale(value, scaleDefinition);
129
+ };
124
130
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
125
131
  borderStyle: 'solid',
126
- borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
132
+ borderColor: convertBorderValue(border, theme$1.border.color),
127
133
  borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
128
134
  } : {}), borderTop ? {
129
135
  borderTopStyle: 'solid',
130
- borderTopColor: theme$1.utils.mapResponsiveScale(borderTop, theme$1.border.color),
136
+ borderTopColor: convertBorderValue(borderTop, theme$1.border.color),
131
137
  borderTopWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
132
138
  } : {}), borderBottom ? {
133
139
  borderBottomStyle: 'solid',
134
- borderBottomColor: theme$1.utils.mapResponsiveScale(borderBottom, theme$1.border.color),
140
+ borderBottomColor: convertBorderValue(borderBottom, theme$1.border.color),
135
141
  borderBottomWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
136
142
  } : {}), borderLeft ? {
137
143
  borderLeftStyle: 'solid',
138
- borderLeftColor: theme$1.utils.mapResponsiveScale(borderLeft, theme$1.border.color),
144
+ borderLeftColor: convertBorderValue(borderLeft, theme$1.border.color),
139
145
  borderLeftWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
140
146
  } : {}), borderRight ? {
141
147
  borderRightStyle: 'solid',
142
- borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
148
+ borderRightColor: convertBorderValue(borderRight, theme$1.border.color),
143
149
  borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
144
150
  } : {});
145
151
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
@@ -327,17 +333,11 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
327
333
  styles = _useBoxProps.styles,
328
334
  attributes = _useBoxProps.attributes;
329
335
  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
330
- var element = jsxRuntime.jsx(react$1.ClassNames, {
331
- children: function children(_ref2) {
332
- var css = _ref2.css,
333
- cx = _ref2.cx;
334
- return jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
- ref: forwardedRef,
336
- id: id,
337
- css: cx(css(resetStyles), css(styles, cssProps))
338
- }, attributes));
339
- }
340
- });
336
+ var element = jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
337
+ ref: forwardedRef,
338
+ id: id,
339
+ css: [react$1.css(resetStyles), react$1.css(styles), cssProps]
340
+ }, attributes));
341
341
  return renderBackgroundProvider(props.background, element);
342
342
  });
343
343
 
package/dist/spark-web-box.cjs.prod.js CHANGED
@@ -121,25 +121,31 @@ var useBoxStyles = function useBoxStyles(_ref) {
121
121
  overflow: overflow,
122
122
  userSelect: userSelect
123
123
  };
124
+ var convertBorderValue = function convertBorderValue(value, scaleDefinition) {
125
+ if (!(typeof value === 'string' && value in scaleDefinition)) {
126
+ return value;
127
+ }
128
+ return theme$1.utils.mapResponsiveScale(value, scaleDefinition);
129
+ };
124
130
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
125
131
  borderStyle: 'solid',
126
- borderColor: theme$1.utils.mapResponsiveScale(border, theme$1.border.color),
132
+ borderColor: convertBorderValue(border, theme$1.border.color),
127
133
  borderWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
128
134
  } : {}), borderTop ? {
129
135
  borderTopStyle: 'solid',
130
- borderTopColor: theme$1.utils.mapResponsiveScale(borderTop, theme$1.border.color),
136
+ borderTopColor: convertBorderValue(borderTop, theme$1.border.color),
131
137
  borderTopWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
132
138
  } : {}), borderBottom ? {
133
139
  borderBottomStyle: 'solid',
134
- borderBottomColor: theme$1.utils.mapResponsiveScale(borderBottom, theme$1.border.color),
140
+ borderBottomColor: convertBorderValue(borderBottom, theme$1.border.color),
135
141
  borderBottomWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
136
142
  } : {}), borderLeft ? {
137
143
  borderLeftStyle: 'solid',
138
- borderLeftColor: theme$1.utils.mapResponsiveScale(borderLeft, theme$1.border.color),
144
+ borderLeftColor: convertBorderValue(borderLeft, theme$1.border.color),
139
145
  borderLeftWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
140
146
  } : {}), borderRight ? {
141
147
  borderRightStyle: 'solid',
142
- borderRightColor: theme$1.utils.mapResponsiveScale(borderRight, theme$1.border.color),
148
+ borderRightColor: convertBorderValue(borderRight, theme$1.border.color),
143
149
  borderRightWidth: theme$1.utils.mapResponsiveScale(borderWidth, theme$1.border.width)
144
150
  } : {});
145
151
  return theme$1.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
@@ -327,17 +333,11 @@ var Box = ts.forwardRefWithAs(function (_ref, forwardedRef) {
327
333
  styles = _useBoxProps.styles,
328
334
  attributes = _useBoxProps.attributes;
329
335
  var resetStyles = internal.resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
330
- var element = jsxRuntime.jsx(react$1.ClassNames, {
331
- children: function children(_ref2) {
332
- var css = _ref2.css,
333
- cx = _ref2.cx;
334
- return jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
335
- ref: forwardedRef,
336
- id: id,
337
- css: cx(css(resetStyles), css(styles, cssProps))
338
- }, attributes));
339
- }
340
- });
336
+ var element = jsxRuntime.jsx(Tag, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
337
+ ref: forwardedRef,
338
+ id: id,
339
+ css: [react$1.css(resetStyles), react$1.css(styles), cssProps]
340
+ }, attributes));
341
341
  return renderBackgroundProvider(props.background, element);
342
342
  });
343
343
 
package/dist/spark-web-box.esm.js CHANGED
@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react';
3
3
  import { jsx } from '@emotion/react/jsx-runtime';
4
4
  import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
5
5
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
6
- import { ClassNames } from '@emotion/react';
6
+ import { css } from '@emotion/react';
7
7
  import { resetElementStyles, buildDataAttributes } from '@spark-web/utils/internal';
8
8
  import { forwardRefWithAs } from '@spark-web/utils/ts';
9
9
 
@@ -117,25 +117,31 @@ var useBoxStyles = function useBoxStyles(_ref) {
117
117
  overflow: overflow,
118
118
  userSelect: userSelect
119
119
  };
120
+ var convertBorderValue = function convertBorderValue(value, scaleDefinition) {
121
+ if (!(typeof value === 'string' && value in scaleDefinition)) {
122
+ return value;
123
+ }
124
+ return theme.utils.mapResponsiveScale(value, scaleDefinition);
125
+ };
120
126
  var conditionalBorderStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, border ? {
121
127
  borderStyle: 'solid',
122
- borderColor: theme.utils.mapResponsiveScale(border, theme.border.color),
128
+ borderColor: convertBorderValue(border, theme.border.color),
123
129
  borderWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
124
130
  } : {}), borderTop ? {
125
131
  borderTopStyle: 'solid',
126
- borderTopColor: theme.utils.mapResponsiveScale(borderTop, theme.border.color),
132
+ borderTopColor: convertBorderValue(borderTop, theme.border.color),
127
133
  borderTopWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
128
134
  } : {}), borderBottom ? {
129
135
  borderBottomStyle: 'solid',
130
- borderBottomColor: theme.utils.mapResponsiveScale(borderBottom, theme.border.color),
136
+ borderBottomColor: convertBorderValue(borderBottom, theme.border.color),
131
137
  borderBottomWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
132
138
  } : {}), borderLeft ? {
133
139
  borderLeftStyle: 'solid',
134
- borderLeftColor: theme.utils.mapResponsiveScale(borderLeft, theme.border.color),
140
+ borderLeftColor: convertBorderValue(borderLeft, theme.border.color),
135
141
  borderLeftWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
136
142
  } : {}), borderRight ? {
137
143
  borderRightStyle: 'solid',
138
- borderRightColor: theme.utils.mapResponsiveScale(borderRight, theme.border.color),
144
+ borderRightColor: convertBorderValue(borderRight, theme.border.color),
139
145
  borderRightWidth: theme.utils.mapResponsiveScale(borderWidth, theme.border.width)
140
146
  } : {});
141
147
  return theme.utils.resolveResponsiveProps(_objectSpread(_objectSpread(_objectSpread({}, unresponsiveProps), conditionalBorderStyles), {}, {
@@ -323,17 +329,11 @@ var Box = forwardRefWithAs(function (_ref, forwardedRef) {
323
329
  styles = _useBoxProps.styles,
324
330
  attributes = _useBoxProps.attributes;
325
331
  var resetStyles = resetElementStyles(asElement !== null && asElement !== void 0 ? asElement : Tag);
326
- var element = jsx(ClassNames, {
327
- children: function children(_ref2) {
328
- var css = _ref2.css,
329
- cx = _ref2.cx;
330
- return jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
331
- ref: forwardedRef,
332
- id: id,
333
- css: cx(css(resetStyles), css(styles, cssProps))
334
- }, attributes));
335
- }
336
- });
332
+ var element = jsx(Tag, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
333
+ ref: forwardedRef,
334
+ id: id,
335
+ css: [css(resetStyles), css(styles), cssProps]
336
+ }, attributes));
337
337
  return renderBackgroundProvider(props.background, element);
338
338
  });
339
339
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/box",
3
- "version": "2.0.0-rc.9",
3
+ "version": "5.0.0-rc.25",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,8 +17,8 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/theme": "^4.0.0-rc.9",
21
- "@spark-web/utils": "^2.0.0-rc.9"
20
+ "@spark-web/theme": "^5.0.0-rc.25",
21
+ "@spark-web/utils": "^5.0.0-rc.25"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/react": "^18.2.0",