@atlaskit/primitives 0.6.0 → 0.7.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 (62) hide show
  1. package/.eslintrc.js +3 -0
  2. package/CHANGELOG.md +8 -0
  3. package/dist/cjs/components/box.js +3 -40
  4. package/dist/cjs/components/inline.partial.js +1 -0
  5. package/dist/cjs/components/internal/base-box.js +61 -0
  6. package/dist/cjs/components/stack.partial.js +1 -0
  7. package/dist/cjs/internal/style-maps.partial.js +370 -0
  8. package/dist/cjs/internal/xcss.js +17 -7
  9. package/dist/cjs/version.json +1 -1
  10. package/dist/es2019/components/box.js +1 -37
  11. package/dist/es2019/components/inline.partial.js +1 -0
  12. package/dist/es2019/components/internal/base-box.js +52 -0
  13. package/dist/es2019/components/stack.partial.js +1 -0
  14. package/dist/es2019/internal/style-maps.partial.js +341 -0
  15. package/dist/es2019/internal/xcss.js +13 -7
  16. package/dist/es2019/version.json +1 -1
  17. package/dist/esm/components/box.js +2 -40
  18. package/dist/esm/components/inline.partial.js +1 -0
  19. package/dist/esm/components/internal/base-box.js +53 -0
  20. package/dist/esm/components/stack.partial.js +1 -0
  21. package/dist/esm/internal/style-maps.partial.js +340 -0
  22. package/dist/esm/internal/xcss.js +17 -7
  23. package/dist/esm/version.json +1 -1
  24. package/dist/types/components/box.d.ts +1 -1
  25. package/dist/types/components/internal/base-box.d.ts +83 -0
  26. package/dist/types/components/types.d.ts +1 -1
  27. package/dist/types/internal/style-maps.partial.d.ts +396 -0
  28. package/dist/types/internal/xcss.d.ts +5 -5
  29. package/package.json +2 -1
  30. package/report.api.md +206 -327
  31. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +313 -363
  32. package/scripts/border-codegen-template.tsx +79 -0
  33. package/scripts/codegen-file-templates/align-self.tsx +9 -0
  34. package/scripts/codegen-file-templates/border-style.tsx +6 -0
  35. package/scripts/codegen-file-templates/dimensions.tsx +17 -0
  36. package/scripts/codegen-file-templates/display.tsx +6 -0
  37. package/scripts/codegen-file-templates/flex-grow.tsx +6 -0
  38. package/scripts/codegen-file-templates/flex-shrink.tsx +6 -0
  39. package/scripts/codegen-file-templates/flex.tsx +5 -0
  40. package/scripts/codegen-file-templates/layer.tsx +13 -0
  41. package/scripts/codegen-file-templates/overflow.tsx +20 -0
  42. package/scripts/codegen-file-templates/position.tsx +8 -0
  43. package/scripts/codegen-styles.tsx +80 -120
  44. package/scripts/color-codegen-template.tsx +9 -19
  45. package/scripts/misc-codegen-template.tsx +20 -40
  46. package/scripts/spacing-codegen-template.tsx +5 -12
  47. package/scripts/utils.tsx +15 -4
  48. package/tmp/api-report-tmp.d.ts +201 -326
  49. package/dist/cjs/components/internal/base-box.partial.js +0 -825
  50. package/dist/cjs/internal/color-map.js +0 -42
  51. package/dist/cjs/internal/style-maps.js +0 -130
  52. package/dist/es2019/components/internal/base-box.partial.js +0 -842
  53. package/dist/es2019/internal/color-map.js +0 -35
  54. package/dist/es2019/internal/style-maps.js +0 -117
  55. package/dist/esm/components/internal/base-box.partial.js +0 -820
  56. package/dist/esm/internal/color-map.js +0 -35
  57. package/dist/esm/internal/style-maps.js +0 -117
  58. package/dist/types/components/internal/base-box.partial.d.ts +0 -521
  59. package/dist/types/internal/color-map.d.ts +0 -36
  60. package/dist/types/internal/style-maps.d.ts +0 -151
  61. package/scripts/color-map-template.tsx +0 -52
  62. package/scripts/dimension-codegen-template.tsx +0 -75
package/report.api.md CHANGED
@@ -30,8 +30,8 @@ import { MemoExoticComponent } from 'react';
30
30
  import { ReactElement } from 'react';
31
31
  import { ReactNode } from 'react';
32
32
  import { RefAttributes } from 'react';
33
- import { SerializedStyles } from '@emotion/react';
34
- import { SerializedStyles as SerializedStyles_2 } from '@emotion/serialize';
33
+ import { SerializedStyles } from '@emotion/serialize';
34
+ import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
35
35
 
36
36
  // @public (undocumented)
37
37
  type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -48,13 +48,13 @@ type AlignInline_2 = 'center' | 'end' | 'start';
48
48
  // @public (undocumented)
49
49
  type AlignSelf = keyof typeof alignSelfMap;
50
50
 
51
- // @public (undocumented)
51
+ // @public
52
52
  const alignSelfMap: {
53
- readonly center: SerializedStyles;
54
- readonly start: SerializedStyles;
55
- readonly stretch: SerializedStyles;
56
- readonly end: SerializedStyles;
57
- readonly baseline: SerializedStyles;
53
+ readonly center: 'center';
54
+ readonly start: 'start';
55
+ readonly stretch: 'stretch';
56
+ readonly end: 'end';
57
+ readonly baseline: 'baseline';
58
58
  };
59
59
 
60
60
  // @public (undocumented)
@@ -66,102 +66,111 @@ type AllowedInlineStyles = 'backgroundColor' | 'padding';
66
66
  // @public (undocumented)
67
67
  type BackgroundColor = keyof typeof backgroundColorMap;
68
68
 
69
- // @public (undocumented)
70
- type BackgroundColor_2 = keyof typeof backgroundColorMap_2;
71
-
72
69
  // @public (undocumented)
73
70
  const backgroundColorMap: {
74
- readonly 'accent.red.subtlest': SerializedStyles;
75
- readonly 'accent.red.subtler': SerializedStyles;
76
- readonly 'accent.red.subtle': SerializedStyles;
77
- readonly 'accent.red.bolder': SerializedStyles;
78
- readonly 'accent.orange.subtlest': SerializedStyles;
79
- readonly 'accent.orange.subtler': SerializedStyles;
80
- readonly 'accent.orange.subtle': SerializedStyles;
81
- readonly 'accent.orange.bolder': SerializedStyles;
82
- readonly 'accent.yellow.subtlest': SerializedStyles;
83
- readonly 'accent.yellow.subtler': SerializedStyles;
84
- readonly 'accent.yellow.subtle': SerializedStyles;
85
- readonly 'accent.yellow.bolder': SerializedStyles;
86
- readonly 'accent.green.subtlest': SerializedStyles;
87
- readonly 'accent.green.subtler': SerializedStyles;
88
- readonly 'accent.green.subtle': SerializedStyles;
89
- readonly 'accent.green.bolder': SerializedStyles;
90
- readonly 'accent.teal.subtlest': SerializedStyles;
91
- readonly 'accent.teal.subtler': SerializedStyles;
92
- readonly 'accent.teal.subtle': SerializedStyles;
93
- readonly 'accent.teal.bolder': SerializedStyles;
94
- readonly 'accent.blue.subtlest': SerializedStyles;
95
- readonly 'accent.blue.subtler': SerializedStyles;
96
- readonly 'accent.blue.subtle': SerializedStyles;
97
- readonly 'accent.blue.bolder': SerializedStyles;
98
- readonly 'accent.purple.subtlest': SerializedStyles;
99
- readonly 'accent.purple.subtler': SerializedStyles;
100
- readonly 'accent.purple.subtle': SerializedStyles;
101
- readonly 'accent.purple.bolder': SerializedStyles;
102
- readonly 'accent.magenta.subtlest': SerializedStyles;
103
- readonly 'accent.magenta.subtler': SerializedStyles;
104
- readonly 'accent.magenta.subtle': SerializedStyles;
105
- readonly 'accent.magenta.bolder': SerializedStyles;
106
- readonly 'accent.gray.subtlest': SerializedStyles;
107
- readonly 'accent.gray.subtler': SerializedStyles;
108
- readonly 'accent.gray.subtle': SerializedStyles;
109
- readonly 'accent.gray.bolder': SerializedStyles;
110
- readonly disabled: SerializedStyles;
111
- readonly input: SerializedStyles;
112
- readonly 'inverse.subtle': SerializedStyles;
113
- readonly neutral: SerializedStyles;
114
- readonly 'neutral.subtle': SerializedStyles;
115
- readonly 'neutral.bold': SerializedStyles;
116
- readonly selected: SerializedStyles;
117
- readonly 'selected.bold': SerializedStyles;
118
- readonly 'brand.bold': SerializedStyles;
119
- readonly danger: SerializedStyles;
120
- readonly 'danger.bold': SerializedStyles;
121
- readonly warning: SerializedStyles;
122
- readonly 'warning.bold': SerializedStyles;
123
- readonly success: SerializedStyles;
124
- readonly 'success.bold': SerializedStyles;
125
- readonly discovery: SerializedStyles;
126
- readonly 'discovery.bold': SerializedStyles;
127
- readonly information: SerializedStyles;
128
- readonly 'information.bold': SerializedStyles;
129
- readonly 'color.blanket': SerializedStyles;
130
- readonly 'color.blanket.selected': SerializedStyles;
131
- readonly 'color.blanket.danger': SerializedStyles;
132
- readonly 'elevation.surface': SerializedStyles;
133
- readonly 'elevation.surface.overlay': SerializedStyles;
134
- readonly 'elevation.surface.raised': SerializedStyles;
135
- readonly 'elevation.surface.sunken': SerializedStyles;
136
- };
137
-
138
- // @public (undocumented)
139
- const backgroundColorMap_2: {
71
+ readonly 'accent.red.subtlest': 'var(--ds-background-accent-red-subtlest)';
72
+ readonly 'accent.red.subtler': 'var(--ds-background-accent-red-subtler)';
73
+ readonly 'accent.red.subtle': 'var(--ds-background-accent-red-subtle)';
74
+ readonly 'accent.red.bolder': 'var(--ds-background-accent-red-bolder)';
75
+ readonly 'accent.orange.subtlest': 'var(--ds-background-accent-orange-subtlest)';
76
+ readonly 'accent.orange.subtler': 'var(--ds-background-accent-orange-subtler)';
77
+ readonly 'accent.orange.subtle': 'var(--ds-background-accent-orange-subtle)';
78
+ readonly 'accent.orange.bolder': 'var(--ds-background-accent-orange-bolder)';
79
+ readonly 'accent.yellow.subtlest': 'var(--ds-background-accent-yellow-subtlest)';
80
+ readonly 'accent.yellow.subtler': 'var(--ds-background-accent-yellow-subtler)';
81
+ readonly 'accent.yellow.subtle': 'var(--ds-background-accent-yellow-subtle)';
82
+ readonly 'accent.yellow.bolder': 'var(--ds-background-accent-yellow-bolder)';
83
+ readonly 'accent.green.subtlest': 'var(--ds-background-accent-green-subtlest)';
84
+ readonly 'accent.green.subtler': 'var(--ds-background-accent-green-subtler)';
85
+ readonly 'accent.green.subtle': 'var(--ds-background-accent-green-subtle)';
86
+ readonly 'accent.green.bolder': 'var(--ds-background-accent-green-bolder)';
87
+ readonly 'accent.teal.subtlest': 'var(--ds-background-accent-teal-subtlest)';
88
+ readonly 'accent.teal.subtler': 'var(--ds-background-accent-teal-subtler)';
89
+ readonly 'accent.teal.subtle': 'var(--ds-background-accent-teal-subtle)';
90
+ readonly 'accent.teal.bolder': 'var(--ds-background-accent-teal-bolder)';
91
+ readonly 'accent.blue.subtlest': 'var(--ds-background-accent-blue-subtlest)';
92
+ readonly 'accent.blue.subtler': 'var(--ds-background-accent-blue-subtler)';
93
+ readonly 'accent.blue.subtle': 'var(--ds-background-accent-blue-subtle)';
94
+ readonly 'accent.blue.bolder': 'var(--ds-background-accent-blue-bolder)';
95
+ readonly 'accent.purple.subtlest': 'var(--ds-background-accent-purple-subtlest)';
96
+ readonly 'accent.purple.subtler': 'var(--ds-background-accent-purple-subtler)';
97
+ readonly 'accent.purple.subtle': 'var(--ds-background-accent-purple-subtle)';
98
+ readonly 'accent.purple.bolder': 'var(--ds-background-accent-purple-bolder)';
99
+ readonly 'accent.magenta.subtlest': 'var(--ds-background-accent-magenta-subtlest)';
100
+ readonly 'accent.magenta.subtler': 'var(--ds-background-accent-magenta-subtler)';
101
+ readonly 'accent.magenta.subtle': 'var(--ds-background-accent-magenta-subtle)';
102
+ readonly 'accent.magenta.bolder': 'var(--ds-background-accent-magenta-bolder)';
103
+ readonly 'accent.gray.subtlest': 'var(--ds-background-accent-gray-subtlest)';
104
+ readonly 'accent.gray.subtler': 'var(--ds-background-accent-gray-subtler)';
105
+ readonly 'accent.gray.subtle': 'var(--ds-background-accent-gray-subtle)';
106
+ readonly 'accent.gray.bolder': 'var(--ds-background-accent-gray-bolder)';
140
107
  readonly disabled: 'var(--ds-background-disabled)';
141
108
  readonly input: 'var(--ds-background-input)';
109
+ readonly 'input.hovered': 'var(--ds-background-input-hovered)';
110
+ readonly 'input.pressed': 'var(--ds-background-input-pressed)';
142
111
  readonly 'inverse.subtle': 'var(--ds-background-inverse-subtle)';
112
+ readonly 'inverse.subtle.hovered': 'var(--ds-background-inverse-subtle-hovered)';
113
+ readonly 'inverse.subtle.pressed': 'var(--ds-background-inverse-subtle-pressed)';
143
114
  readonly neutral: 'var(--ds-background-neutral)';
115
+ readonly 'neutral.hovered': 'var(--ds-background-neutral-hovered)';
116
+ readonly 'neutral.pressed': 'var(--ds-background-neutral-pressed)';
144
117
  readonly 'neutral.subtle': 'var(--ds-background-neutral-subtle)';
118
+ readonly 'neutral.subtle.hovered': 'var(--ds-background-neutral-subtle-hovered)';
119
+ readonly 'neutral.subtle.pressed': 'var(--ds-background-neutral-subtle-pressed)';
145
120
  readonly 'neutral.bold': 'var(--ds-background-neutral-bold)';
121
+ readonly 'neutral.bold.hovered': 'var(--ds-background-neutral-bold-hovered)';
122
+ readonly 'neutral.bold.pressed': 'var(--ds-background-neutral-bold-pressed)';
146
123
  readonly selected: 'var(--ds-background-selected)';
124
+ readonly 'selected.hovered': 'var(--ds-background-selected-hovered)';
125
+ readonly 'selected.pressed': 'var(--ds-background-selected-pressed)';
147
126
  readonly 'selected.bold': 'var(--ds-background-selected-bold)';
127
+ readonly 'selected.bold.hovered': 'var(--ds-background-selected-bold-hovered)';
128
+ readonly 'selected.bold.pressed': 'var(--ds-background-selected-bold-pressed)';
148
129
  readonly 'brand.bold': 'var(--ds-background-brand-bold)';
130
+ readonly 'brand.bold.hovered': 'var(--ds-background-brand-bold-hovered)';
131
+ readonly 'brand.bold.pressed': 'var(--ds-background-brand-bold-pressed)';
149
132
  readonly danger: 'var(--ds-background-danger)';
133
+ readonly 'danger.hovered': 'var(--ds-background-danger-hovered)';
134
+ readonly 'danger.pressed': 'var(--ds-background-danger-pressed)';
150
135
  readonly 'danger.bold': 'var(--ds-background-danger-bold)';
136
+ readonly 'danger.bold.hovered': 'var(--ds-background-danger-bold-hovered)';
137
+ readonly 'danger.bold.pressed': 'var(--ds-background-danger-bold-pressed)';
151
138
  readonly warning: 'var(--ds-background-warning)';
139
+ readonly 'warning.hovered': 'var(--ds-background-warning-hovered)';
140
+ readonly 'warning.pressed': 'var(--ds-background-warning-pressed)';
152
141
  readonly 'warning.bold': 'var(--ds-background-warning-bold)';
142
+ readonly 'warning.bold.hovered': 'var(--ds-background-warning-bold-hovered)';
143
+ readonly 'warning.bold.pressed': 'var(--ds-background-warning-bold-pressed)';
153
144
  readonly success: 'var(--ds-background-success)';
145
+ readonly 'success.hovered': 'var(--ds-background-success-hovered)';
146
+ readonly 'success.pressed': 'var(--ds-background-success-pressed)';
154
147
  readonly 'success.bold': 'var(--ds-background-success-bold)';
148
+ readonly 'success.bold.hovered': 'var(--ds-background-success-bold-hovered)';
149
+ readonly 'success.bold.pressed': 'var(--ds-background-success-bold-pressed)';
155
150
  readonly discovery: 'var(--ds-background-discovery)';
151
+ readonly 'discovery.hovered': 'var(--ds-background-discovery-hovered)';
152
+ readonly 'discovery.pressed': 'var(--ds-background-discovery-pressed)';
156
153
  readonly 'discovery.bold': 'var(--ds-background-discovery-bold)';
154
+ readonly 'discovery.bold.hovered': 'var(--ds-background-discovery-bold-hovered)';
155
+ readonly 'discovery.bold.pressed': 'var(--ds-background-discovery-bold-pressed)';
157
156
  readonly information: 'var(--ds-background-information)';
157
+ readonly 'information.hovered': 'var(--ds-background-information-hovered)';
158
+ readonly 'information.pressed': 'var(--ds-background-information-pressed)';
158
159
  readonly 'information.bold': 'var(--ds-background-information-bold)';
160
+ readonly 'information.bold.hovered': 'var(--ds-background-information-bold-hovered)';
161
+ readonly 'information.bold.pressed': 'var(--ds-background-information-bold-pressed)';
159
162
  readonly 'color.blanket': 'var(--ds-blanket)';
160
163
  readonly 'color.blanket.selected': 'var(--ds-blanket-selected)';
161
164
  readonly 'color.blanket.danger': 'var(--ds-blanket-danger)';
162
165
  readonly 'elevation.surface': 'var(--ds-surface)';
166
+ readonly 'elevation.surface.hovered': 'var(--ds-surface-hovered)';
167
+ readonly 'elevation.surface.pressed': 'var(--ds-surface-pressed)';
163
168
  readonly 'elevation.surface.overlay': 'var(--ds-surface-overlay)';
169
+ readonly 'elevation.surface.overlay.hovered': 'var(--ds-surface-overlay-hovered)';
170
+ readonly 'elevation.surface.overlay.pressed': 'var(--ds-surface-overlay-pressed)';
164
171
  readonly 'elevation.surface.raised': 'var(--ds-surface-raised)';
172
+ readonly 'elevation.surface.raised.hovered': 'var(--ds-surface-raised-hovered)';
173
+ readonly 'elevation.surface.raised.pressed': 'var(--ds-surface-raised-pressed)';
165
174
  readonly 'elevation.surface.sunken': 'var(--ds-surface-sunken)';
166
175
  };
167
176
 
@@ -178,21 +187,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
178
187
  as?: 'div' | 'li' | 'span';
179
188
  className?: string;
180
189
  children?: ReactNode;
181
- color?: TextColor;
182
190
  backgroundColor?: BackgroundColor;
183
- shadow?: Shadow;
184
- borderStyle?: BorderStyle;
185
- borderWidth?: BorderWidth;
186
- borderColor?: BorderColor;
187
- borderRadius?: BorderRadius;
188
- layer?: Layer;
189
- flex?: Flex;
190
- flexGrow?: FlexGrow;
191
- flexShrink?: FlexShrink;
192
- alignSelf?: AlignSelf;
193
- overflow?: Overflow;
194
- overflowInline?: OverflowInline;
195
- overflowBlock?: OverflowBlock;
196
191
  padding?: Padding;
197
192
  paddingBlock?: PaddingBlock;
198
193
  paddingBlockStart?: PaddingBlockStart;
@@ -200,10 +195,6 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
200
195
  paddingInline?: PaddingInline;
201
196
  paddingInlineStart?: PaddingInlineStart;
202
197
  paddingInlineEnd?: PaddingInlineEnd;
203
- width?: Width;
204
- height?: Height;
205
- display?: Display;
206
- position?: Position;
207
198
  ref?: ComponentPropsWithRef<T>['ref'];
208
199
  };
209
200
 
@@ -216,38 +207,18 @@ type BasePrimitiveProps = {
216
207
  // @public (undocumented)
217
208
  type BorderColor = keyof typeof borderColorMap;
218
209
 
219
- // @public (undocumented)
220
- type BorderColor_2 = keyof typeof borderColorMap_2;
221
-
222
210
  // @public
223
211
  const borderColorMap: {
224
- readonly 'color.border': SerializedStyles;
225
- readonly 'accent.red': SerializedStyles;
226
- readonly 'accent.orange': SerializedStyles;
227
- readonly 'accent.yellow': SerializedStyles;
228
- readonly 'accent.green': SerializedStyles;
229
- readonly 'accent.teal': SerializedStyles;
230
- readonly 'accent.blue': SerializedStyles;
231
- readonly 'accent.purple': SerializedStyles;
232
- readonly 'accent.magenta': SerializedStyles;
233
- readonly 'accent.gray': SerializedStyles;
234
- readonly disabled: SerializedStyles;
235
- readonly focused: SerializedStyles;
236
- readonly input: SerializedStyles;
237
- readonly inverse: SerializedStyles;
238
- readonly selected: SerializedStyles;
239
- readonly brand: SerializedStyles;
240
- readonly danger: SerializedStyles;
241
- readonly warning: SerializedStyles;
242
- readonly success: SerializedStyles;
243
- readonly discovery: SerializedStyles;
244
- readonly information: SerializedStyles;
245
- readonly bold: SerializedStyles;
246
- };
247
-
248
- // @public (undocumented)
249
- const borderColorMap_2: {
250
212
  readonly 'color.border': 'var(--ds-border)';
213
+ readonly 'accent.red': 'var(--ds-border-accent-red)';
214
+ readonly 'accent.orange': 'var(--ds-border-accent-orange)';
215
+ readonly 'accent.yellow': 'var(--ds-border-accent-yellow)';
216
+ readonly 'accent.green': 'var(--ds-border-accent-green)';
217
+ readonly 'accent.teal': 'var(--ds-border-accent-teal)';
218
+ readonly 'accent.blue': 'var(--ds-border-accent-blue)';
219
+ readonly 'accent.purple': 'var(--ds-border-accent-purple)';
220
+ readonly 'accent.magenta': 'var(--ds-border-accent-magenta)';
221
+ readonly 'accent.gray': 'var(--ds-border-accent-gray)';
251
222
  readonly disabled: 'var(--ds-border-disabled)';
252
223
  readonly focused: 'var(--ds-border-focused)';
253
224
  readonly input: 'var(--ds-border-input)';
@@ -267,11 +238,12 @@ type BorderRadius = keyof typeof borderRadiusMap;
267
238
 
268
239
  // @public (undocumented)
269
240
  const borderRadiusMap: {
270
- 'radius.100': SerializedStyles;
271
- 'radius.200': SerializedStyles;
272
- 'radius.round': SerializedStyles;
273
- 'radius.300': SerializedStyles;
274
- 'radius.400': SerializedStyles;
241
+ readonly 'radius.050': 'var(--ds-radius-050)';
242
+ readonly 'radius.100': 'var(--ds-radius-100)';
243
+ readonly 'radius.200': 'var(--ds-radius-200)';
244
+ readonly 'radius.300': 'var(--ds-radius-300)';
245
+ readonly 'radius.400': 'var(--ds-radius-400)';
246
+ readonly 'radius.round': 'var(--ds-radius-round)';
275
247
  };
276
248
 
277
249
  // @public (undocumented)
@@ -279,28 +251,18 @@ type BorderStyle = keyof typeof borderStyleMap;
279
251
 
280
252
  // @public (undocumented)
281
253
  const borderStyleMap: {
282
- readonly none: SerializedStyles;
283
- readonly solid: SerializedStyles;
254
+ readonly none: 'none';
255
+ readonly solid: 'solid';
284
256
  };
285
257
 
286
258
  // @public (undocumented)
287
259
  type BorderWidth = keyof typeof borderWidthMap;
288
260
 
289
- // @public (undocumented)
290
- type BorderWidth_2 = keyof typeof borderWidthMap_2;
291
-
292
- // @public (undocumented)
261
+ // @public
293
262
  const borderWidthMap: {
294
- readonly 'size.0': SerializedStyles;
295
- readonly 'size.050': SerializedStyles;
296
- readonly 'size.100': SerializedStyles;
297
- };
298
-
299
- // @public (undocumented)
300
- const borderWidthMap_2: {
301
- readonly 'size.0': 'var(--ds-width-0)';
302
- readonly 'size.050': 'var(--ds-width-050)';
303
- readonly 'size.100': 'var(--ds-width-100)';
263
+ readonly 'width.0': 'var(--ds-width-0)';
264
+ readonly 'width.050': 'var(--ds-width-050)';
265
+ readonly 'width.100': 'var(--ds-width-100)';
304
266
  };
305
267
 
306
268
  // @public
@@ -322,7 +284,7 @@ export type BoxProps<T extends ElementType = 'div'> = Omit<
322
284
  PublicBoxPropsBase;
323
285
 
324
286
  // @public (undocumented)
325
- type BoxStyles = SerializedStyles_2 & {
287
+ type BoxStyles = SerializedStyles & {
326
288
  [boxTag]: true;
327
289
  };
328
290
 
@@ -335,7 +297,7 @@ type BoxXCSS = {
335
297
  readonly styles: BoxStyles;
336
298
  };
337
299
 
338
- // @public (undocumented)
300
+ // @public
339
301
  const dimensionMap: {
340
302
  readonly '100%': '100%';
341
303
  readonly 'size.100': '16px';
@@ -348,16 +310,7 @@ const dimensionMap: {
348
310
  };
349
311
 
350
312
  // @public (undocumented)
351
- type Display = keyof typeof displayMap;
352
-
353
- // @public (undocumented)
354
- const displayMap: {
355
- readonly block: SerializedStyles;
356
- readonly inline: SerializedStyles;
357
- readonly flex: SerializedStyles;
358
- readonly 'inline-flex': SerializedStyles;
359
- readonly 'inline-block': SerializedStyles;
360
- };
313
+ type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
361
314
 
362
315
  // @public (undocumented)
363
316
  type Flex = keyof typeof flexMap;
@@ -367,13 +320,13 @@ type FlexGrow = keyof typeof flexGrowMap;
367
320
 
368
321
  // @public (undocumented)
369
322
  const flexGrowMap: {
370
- readonly '0': SerializedStyles;
371
- readonly '1': SerializedStyles;
323
+ readonly '0': 0;
324
+ readonly '1': 1;
372
325
  };
373
326
 
374
327
  // @public (undocumented)
375
328
  const flexMap: {
376
- readonly '1': SerializedStyles;
329
+ readonly '1': 1;
377
330
  };
378
331
 
379
332
  // @public (undocumented)
@@ -381,8 +334,8 @@ type FlexShrink = keyof typeof flexShrinkMap;
381
334
 
382
335
  // @public (undocumented)
383
336
  const flexShrinkMap: {
384
- readonly '0': SerializedStyles;
385
- readonly '1': SerializedStyles;
337
+ readonly '0': 0;
338
+ readonly '1': 1;
386
339
  };
387
340
 
388
341
  // @public (undocumented)
@@ -398,22 +351,7 @@ type Grow = 'fill' | 'hug';
398
351
  type Grow_2 = 'fill' | 'hug';
399
352
 
400
353
  // @public (undocumented)
401
- type Height = keyof typeof heightMap;
402
-
403
- // @public (undocumented)
404
- type Height_2 = keyof typeof dimensionMap;
405
-
406
- // @public (undocumented)
407
- const heightMap: {
408
- readonly '100%': SerializedStyles;
409
- readonly 'size.100': SerializedStyles;
410
- readonly 'size.200': SerializedStyles;
411
- readonly 'size.300': SerializedStyles;
412
- readonly 'size.400': SerializedStyles;
413
- readonly 'size.500': SerializedStyles;
414
- readonly 'size.600': SerializedStyles;
415
- readonly 'size.1000': SerializedStyles;
416
- };
354
+ type Height = keyof typeof dimensionMap;
417
355
 
418
356
  // @public
419
357
  export const Inline: MemoExoticComponent<
@@ -455,25 +393,25 @@ export interface InlineProps<T extends ElementType = 'div'> {
455
393
  // @public
456
394
  const inlineSpaceMap: {
457
395
  [k: string]: {
458
- readonly '0': SerializedStyles;
459
- readonly '025': SerializedStyles;
460
- readonly '050': SerializedStyles;
461
- readonly '075': SerializedStyles;
462
- readonly '100': SerializedStyles;
463
- readonly '150': SerializedStyles;
464
- readonly '200': SerializedStyles;
465
- readonly '250': SerializedStyles;
466
- readonly '300': SerializedStyles;
467
- readonly '400': SerializedStyles;
468
- readonly '500': SerializedStyles;
469
- readonly '600': SerializedStyles;
470
- readonly '800': SerializedStyles;
471
- readonly '1000': SerializedStyles;
396
+ readonly '0': SerializedStyles_2;
397
+ readonly '025': SerializedStyles_2;
398
+ readonly '050': SerializedStyles_2;
399
+ readonly '075': SerializedStyles_2;
400
+ readonly '100': SerializedStyles_2;
401
+ readonly '150': SerializedStyles_2;
402
+ readonly '200': SerializedStyles_2;
403
+ readonly '250': SerializedStyles_2;
404
+ readonly '300': SerializedStyles_2;
405
+ readonly '400': SerializedStyles_2;
406
+ readonly '500': SerializedStyles_2;
407
+ readonly '600': SerializedStyles_2;
408
+ readonly '800': SerializedStyles_2;
409
+ readonly '1000': SerializedStyles_2;
472
410
  };
473
411
  };
474
412
 
475
413
  // @public (undocumented)
476
- type InlineStyles = SerializedStyles_2 & {
414
+ type InlineStyles = SerializedStyles & {
477
415
  [inlineTag]: true;
478
416
  };
479
417
 
@@ -481,10 +419,10 @@ type InlineStyles = SerializedStyles_2 & {
481
419
  const inlineTag: unique symbol;
482
420
 
483
421
  // @public (undocumented)
484
- type Layer = keyof typeof LAYERS;
422
+ type Layer = keyof typeof layerMap;
485
423
 
486
424
  // @public (undocumented)
487
- const LAYERS: {
425
+ const layerMap: {
488
426
  readonly card: 100;
489
427
  readonly navigation: 200;
490
428
  readonly dialog: 300;
@@ -516,8 +454,8 @@ type OverflowBlock = keyof typeof overflowBlockMap;
516
454
 
517
455
  // @public (undocumented)
518
456
  const overflowBlockMap: {
519
- readonly auto: SerializedStyles;
520
- readonly hidden: SerializedStyles;
457
+ readonly auto: 'auto';
458
+ readonly hidden: 'hidden';
521
459
  };
522
460
 
523
461
  // @public (undocumented)
@@ -525,62 +463,39 @@ type OverflowInline = keyof typeof overflowInlineMap;
525
463
 
526
464
  // @public (undocumented)
527
465
  const overflowInlineMap: {
528
- readonly auto: SerializedStyles;
529
- readonly hidden: SerializedStyles;
466
+ readonly auto: 'auto';
467
+ readonly hidden: 'hidden';
530
468
  };
531
469
 
532
470
  // @public (undocumented)
533
471
  const overflowMap: {
534
- readonly auto: SerializedStyles;
535
- readonly hidden: SerializedStyles;
472
+ readonly auto: 'auto';
473
+ readonly hidden: 'hidden';
536
474
  };
537
475
 
538
476
  // @public (undocumented)
539
- type Padding = keyof typeof paddingMap.padding;
540
-
541
- // @public (undocumented)
542
- type Padding_2 = keyof typeof paddingMap_2;
477
+ type Padding = keyof typeof paddingMap;
543
478
 
544
479
  // @public (undocumented)
545
- type PaddingBlock = keyof typeof paddingMap.paddingBlock;
480
+ type PaddingBlock = keyof typeof paddingMap;
546
481
 
547
482
  // @public (undocumented)
548
- type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
483
+ type PaddingBlockEnd = keyof typeof paddingMap;
549
484
 
550
485
  // @public (undocumented)
551
- type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
486
+ type PaddingBlockStart = keyof typeof paddingMap;
552
487
 
553
488
  // @public (undocumented)
554
- type PaddingInline = keyof typeof paddingMap.paddingInline;
489
+ type PaddingInline = keyof typeof paddingMap;
555
490
 
556
491
  // @public (undocumented)
557
- type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
492
+ type PaddingInlineEnd = keyof typeof paddingMap;
558
493
 
559
494
  // @public (undocumented)
560
- type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
495
+ type PaddingInlineStart = keyof typeof paddingMap;
561
496
 
562
497
  // @public
563
498
  const paddingMap: {
564
- [k: string]: {
565
- readonly 'space.0': SerializedStyles;
566
- readonly 'space.025': SerializedStyles;
567
- readonly 'space.050': SerializedStyles;
568
- readonly 'space.075': SerializedStyles;
569
- readonly 'space.100': SerializedStyles;
570
- readonly 'space.150': SerializedStyles;
571
- readonly 'space.200': SerializedStyles;
572
- readonly 'space.250': SerializedStyles;
573
- readonly 'space.300': SerializedStyles;
574
- readonly 'space.400': SerializedStyles;
575
- readonly 'space.500': SerializedStyles;
576
- readonly 'space.600': SerializedStyles;
577
- readonly 'space.800': SerializedStyles;
578
- readonly 'space.1000': SerializedStyles;
579
- };
580
- };
581
-
582
- // @public (undocumented)
583
- const paddingMap_2: {
584
499
  readonly 'space.0': 'var(--ds-space-0)';
585
500
  readonly 'space.025': 'var(--ds-space-025)';
586
501
  readonly 'space.050': 'var(--ds-space-050)';
@@ -602,15 +517,15 @@ type Position = keyof typeof positionMap;
602
517
 
603
518
  // @public (undocumented)
604
519
  const positionMap: {
605
- readonly absolute: SerializedStyles;
606
- readonly fixed: SerializedStyles;
607
- readonly relative: SerializedStyles;
608
- readonly static: SerializedStyles;
520
+ readonly absolute: 'absolute';
521
+ readonly fixed: 'fixed';
522
+ readonly relative: 'relative';
523
+ readonly static: 'static';
609
524
  };
610
525
 
611
526
  // @public (undocumented)
612
527
  type PublicBoxPropsBase = {
613
- xcss?: BoxXCSS;
528
+ xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
614
529
  };
615
530
 
616
531
  // @public (undocumented)
@@ -632,11 +547,11 @@ type Shadow = keyof typeof shadowMap;
632
547
 
633
548
  // @public (undocumented)
634
549
  const shadowMap: {
635
- readonly overflow: SerializedStyles;
636
- readonly 'overflow.perimeter': SerializedStyles;
637
- readonly 'overflow.spread': SerializedStyles;
638
- readonly overlay: SerializedStyles;
639
- readonly raised: SerializedStyles;
550
+ readonly overflow: 'var(--ds-shadow-overflow)';
551
+ readonly 'overflow.perimeter': 'var(--ds-shadow-overflow-perimeter)';
552
+ readonly 'overflow.spread': 'var(--ds-shadow-overflow-spread)';
553
+ readonly overlay: 'var(--ds-shadow-overlay)';
554
+ readonly raised: 'var(--ds-shadow-raised)';
640
555
  };
641
556
 
642
557
  // @public (undocumented)
@@ -679,66 +594,28 @@ export interface StackProps<T extends ElementType = 'div'> {
679
594
  // @public
680
595
  const stackSpaceMap: {
681
596
  [k: string]: {
682
- readonly '0': SerializedStyles;
683
- readonly '025': SerializedStyles;
684
- readonly '050': SerializedStyles;
685
- readonly '075': SerializedStyles;
686
- readonly '100': SerializedStyles;
687
- readonly '150': SerializedStyles;
688
- readonly '200': SerializedStyles;
689
- readonly '250': SerializedStyles;
690
- readonly '300': SerializedStyles;
691
- readonly '400': SerializedStyles;
692
- readonly '500': SerializedStyles;
693
- readonly '600': SerializedStyles;
694
- readonly '800': SerializedStyles;
695
- readonly '1000': SerializedStyles;
597
+ readonly '0': SerializedStyles_2;
598
+ readonly '025': SerializedStyles_2;
599
+ readonly '050': SerializedStyles_2;
600
+ readonly '075': SerializedStyles_2;
601
+ readonly '100': SerializedStyles_2;
602
+ readonly '150': SerializedStyles_2;
603
+ readonly '200': SerializedStyles_2;
604
+ readonly '250': SerializedStyles_2;
605
+ readonly '300': SerializedStyles_2;
606
+ readonly '400': SerializedStyles_2;
607
+ readonly '500': SerializedStyles_2;
608
+ readonly '600': SerializedStyles_2;
609
+ readonly '800': SerializedStyles_2;
610
+ readonly '1000': SerializedStyles_2;
696
611
  };
697
612
  };
698
613
 
699
614
  // @public (undocumented)
700
615
  type TextColor = keyof typeof textColorMap;
701
616
 
702
- // @public (undocumented)
703
- type TextColor_2 = keyof typeof textColorMap_2;
704
-
705
617
  // @public (undocumented)
706
618
  const textColorMap: {
707
- readonly 'color.text': SerializedStyles;
708
- readonly 'accent.red': SerializedStyles;
709
- readonly 'accent.red.bolder': SerializedStyles;
710
- readonly 'accent.orange': SerializedStyles;
711
- readonly 'accent.orange.bolder': SerializedStyles;
712
- readonly 'accent.yellow': SerializedStyles;
713
- readonly 'accent.yellow.bolder': SerializedStyles;
714
- readonly 'accent.green': SerializedStyles;
715
- readonly 'accent.green.bolder': SerializedStyles;
716
- readonly 'accent.teal': SerializedStyles;
717
- readonly 'accent.teal.bolder': SerializedStyles;
718
- readonly 'accent.blue': SerializedStyles;
719
- readonly 'accent.blue.bolder': SerializedStyles;
720
- readonly 'accent.purple': SerializedStyles;
721
- readonly 'accent.purple.bolder': SerializedStyles;
722
- readonly 'accent.magenta': SerializedStyles;
723
- readonly 'accent.magenta.bolder': SerializedStyles;
724
- readonly 'accent.gray': SerializedStyles;
725
- readonly 'accent.gray.bolder': SerializedStyles;
726
- readonly disabled: SerializedStyles;
727
- readonly inverse: SerializedStyles;
728
- readonly selected: SerializedStyles;
729
- readonly brand: SerializedStyles;
730
- readonly danger: SerializedStyles;
731
- readonly warning: SerializedStyles;
732
- readonly 'warning.inverse': SerializedStyles;
733
- readonly success: SerializedStyles;
734
- readonly discovery: SerializedStyles;
735
- readonly information: SerializedStyles;
736
- readonly subtlest: SerializedStyles;
737
- readonly subtle: SerializedStyles;
738
- };
739
-
740
- // @public (undocumented)
741
- const textColorMap_2: {
742
619
  readonly 'color.text': 'var(--ds-text)';
743
620
  readonly 'accent.red': 'var(--ds-text-accent-red)';
744
621
  readonly 'accent.red.bolder': 'var(--ds-text-accent-red-bolder)';
@@ -774,52 +651,54 @@ const textColorMap_2: {
774
651
 
775
652
  // @public (undocumented)
776
653
  type TokenisedProps = {
777
- backgroundColor?: BackgroundColor_2;
778
- borderColor?: BorderColor_2;
779
- borderWidth?: BorderWidth_2;
780
- color?: TextColor_2;
781
- height?: Height_2;
782
- minHeight?: MinHeight;
783
- minWidth?: MinWidth;
784
- maxHeight?: MaxHeight;
654
+ alignSelf?: AlignSelf;
655
+ backgroundColor?: BackgroundColor;
656
+ borderColor?: BorderColor;
657
+ borderStyle?: BorderStyle;
658
+ borderRadius?: BorderRadius;
659
+ borderWidth?: BorderWidth;
660
+ display?: Display;
661
+ flex?: Flex;
662
+ flexGrow?: FlexGrow;
663
+ flexShrink?: FlexShrink;
664
+ height?: Height;
665
+ layer?: Layer;
785
666
  maxWidth?: MaxWidth;
786
- padding?: Padding_2;
787
- paddingBlock?: Padding_2;
788
- paddingInline?: Padding_2;
789
- paddingBlockStart?: Padding_2;
790
- paddingBlockEnd?: Padding_2;
791
- paddingInlineStart?: Padding_2;
792
- paddingInlineEnd?: Padding_2;
793
- width?: Width_2;
667
+ maxHeight?: MaxHeight;
668
+ minWidth?: MinWidth;
669
+ minHeight?: MinHeight;
670
+ overflow?: Overflow;
671
+ overflowInline?: OverflowInline;
672
+ overflowBlock?: OverflowBlock;
673
+ padding?: Padding;
674
+ paddingBlock?: PaddingBlock;
675
+ paddingBlockStart?: PaddingBlockStart;
676
+ paddingBlockEnd?: PaddingBlockEnd;
677
+ paddingInline?: PaddingInline;
678
+ paddingInlineStart?: PaddingInlineStart;
679
+ paddingInlineEnd?: PaddingInlineEnd;
680
+ position?: Position;
681
+ shadow?: Shadow;
682
+ textColor?: TextColor;
683
+ width?: Width;
794
684
  };
795
685
 
796
686
  // @public (undocumented)
797
687
  const uniqueSymbol: unique symbol;
798
688
 
799
689
  // @public (undocumented)
800
- type Width = keyof typeof widthMap;
801
-
802
- // @public (undocumented)
803
- type Width_2 = keyof typeof dimensionMap;
804
-
805
- // @public
806
- const widthMap: {
807
- readonly '100%': SerializedStyles;
808
- readonly 'size.100': SerializedStyles;
809
- readonly 'size.200': SerializedStyles;
810
- readonly 'size.300': SerializedStyles;
811
- readonly 'size.400': SerializedStyles;
812
- readonly 'size.500': SerializedStyles;
813
- readonly 'size.600': SerializedStyles;
814
- readonly 'size.1000': SerializedStyles;
815
- };
690
+ type Width = keyof typeof dimensionMap;
816
691
 
817
692
  // @public (undocumented)
818
693
  export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
819
694
  style: Primitive extends typeof Box
820
- ? ScopedSafeCSSObject<AllowedBoxStyles>
695
+ ?
696
+ | ScopedSafeCSSObject<AllowedBoxStyles>
697
+ | ScopedSafeCSSObject<AllowedBoxStyles>[]
821
698
  : Primitive extends typeof Inline
822
- ? ScopedSafeCSSObject<AllowedInlineStyles>
699
+ ?
700
+ | ScopedSafeCSSObject<AllowedInlineStyles>
701
+ | ScopedSafeCSSObject<AllowedInlineStyles>[]
823
702
  : never,
824
703
  ): {
825
704
  readonly symbol: typeof uniqueSymbol;