@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
@@ -19,8 +19,8 @@ import { MemoExoticComponent } from 'react';
19
19
  import { ReactElement } from 'react';
20
20
  import { ReactNode } from 'react';
21
21
  import { RefAttributes } from 'react';
22
- import { SerializedStyles } from '@emotion/react';
23
- import { SerializedStyles as SerializedStyles_2 } from '@emotion/serialize';
22
+ import { SerializedStyles } from '@emotion/serialize';
23
+ import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
24
24
 
25
25
  // @public (undocumented)
26
26
  type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -37,13 +37,13 @@ type AlignInline_2 = 'center' | 'end' | 'start';
37
37
  // @public (undocumented)
38
38
  type AlignSelf = keyof typeof alignSelfMap;
39
39
 
40
- // @public (undocumented)
40
+ // @public
41
41
  const alignSelfMap: {
42
- readonly center: SerializedStyles;
43
- readonly start: SerializedStyles;
44
- readonly stretch: SerializedStyles;
45
- readonly end: SerializedStyles;
46
- readonly baseline: SerializedStyles;
42
+ readonly center: "center";
43
+ readonly start: "start";
44
+ readonly stretch: "stretch";
45
+ readonly end: "end";
46
+ readonly baseline: "baseline";
47
47
  };
48
48
 
49
49
  // @public (undocumented)
@@ -55,102 +55,111 @@ type AllowedInlineStyles = 'backgroundColor' | 'padding';
55
55
  // @public (undocumented)
56
56
  type BackgroundColor = keyof typeof backgroundColorMap;
57
57
 
58
- // @public (undocumented)
59
- type BackgroundColor_2 = keyof typeof backgroundColorMap_2;
60
-
61
58
  // @public (undocumented)
62
59
  const backgroundColorMap: {
63
- readonly 'accent.red.subtlest': SerializedStyles;
64
- readonly 'accent.red.subtler': SerializedStyles;
65
- readonly 'accent.red.subtle': SerializedStyles;
66
- readonly 'accent.red.bolder': SerializedStyles;
67
- readonly 'accent.orange.subtlest': SerializedStyles;
68
- readonly 'accent.orange.subtler': SerializedStyles;
69
- readonly 'accent.orange.subtle': SerializedStyles;
70
- readonly 'accent.orange.bolder': SerializedStyles;
71
- readonly 'accent.yellow.subtlest': SerializedStyles;
72
- readonly 'accent.yellow.subtler': SerializedStyles;
73
- readonly 'accent.yellow.subtle': SerializedStyles;
74
- readonly 'accent.yellow.bolder': SerializedStyles;
75
- readonly 'accent.green.subtlest': SerializedStyles;
76
- readonly 'accent.green.subtler': SerializedStyles;
77
- readonly 'accent.green.subtle': SerializedStyles;
78
- readonly 'accent.green.bolder': SerializedStyles;
79
- readonly 'accent.teal.subtlest': SerializedStyles;
80
- readonly 'accent.teal.subtler': SerializedStyles;
81
- readonly 'accent.teal.subtle': SerializedStyles;
82
- readonly 'accent.teal.bolder': SerializedStyles;
83
- readonly 'accent.blue.subtlest': SerializedStyles;
84
- readonly 'accent.blue.subtler': SerializedStyles;
85
- readonly 'accent.blue.subtle': SerializedStyles;
86
- readonly 'accent.blue.bolder': SerializedStyles;
87
- readonly 'accent.purple.subtlest': SerializedStyles;
88
- readonly 'accent.purple.subtler': SerializedStyles;
89
- readonly 'accent.purple.subtle': SerializedStyles;
90
- readonly 'accent.purple.bolder': SerializedStyles;
91
- readonly 'accent.magenta.subtlest': SerializedStyles;
92
- readonly 'accent.magenta.subtler': SerializedStyles;
93
- readonly 'accent.magenta.subtle': SerializedStyles;
94
- readonly 'accent.magenta.bolder': SerializedStyles;
95
- readonly 'accent.gray.subtlest': SerializedStyles;
96
- readonly 'accent.gray.subtler': SerializedStyles;
97
- readonly 'accent.gray.subtle': SerializedStyles;
98
- readonly 'accent.gray.bolder': SerializedStyles;
99
- readonly disabled: SerializedStyles;
100
- readonly input: SerializedStyles;
101
- readonly 'inverse.subtle': SerializedStyles;
102
- readonly neutral: SerializedStyles;
103
- readonly 'neutral.subtle': SerializedStyles;
104
- readonly 'neutral.bold': SerializedStyles;
105
- readonly selected: SerializedStyles;
106
- readonly 'selected.bold': SerializedStyles;
107
- readonly 'brand.bold': SerializedStyles;
108
- readonly danger: SerializedStyles;
109
- readonly 'danger.bold': SerializedStyles;
110
- readonly warning: SerializedStyles;
111
- readonly 'warning.bold': SerializedStyles;
112
- readonly success: SerializedStyles;
113
- readonly 'success.bold': SerializedStyles;
114
- readonly discovery: SerializedStyles;
115
- readonly 'discovery.bold': SerializedStyles;
116
- readonly information: SerializedStyles;
117
- readonly 'information.bold': SerializedStyles;
118
- readonly 'color.blanket': SerializedStyles;
119
- readonly 'color.blanket.selected': SerializedStyles;
120
- readonly 'color.blanket.danger': SerializedStyles;
121
- readonly 'elevation.surface': SerializedStyles;
122
- readonly 'elevation.surface.overlay': SerializedStyles;
123
- readonly 'elevation.surface.raised': SerializedStyles;
124
- readonly 'elevation.surface.sunken': SerializedStyles;
125
- };
126
-
127
- // @public (undocumented)
128
- const backgroundColorMap_2: {
60
+ readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
61
+ readonly 'accent.red.subtler': "var(--ds-background-accent-red-subtler)";
62
+ readonly 'accent.red.subtle': "var(--ds-background-accent-red-subtle)";
63
+ readonly 'accent.red.bolder': "var(--ds-background-accent-red-bolder)";
64
+ readonly 'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
65
+ readonly 'accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
66
+ readonly 'accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
67
+ readonly 'accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
68
+ readonly 'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
69
+ readonly 'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
70
+ readonly 'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
71
+ readonly 'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
72
+ readonly 'accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
73
+ readonly 'accent.green.subtler': "var(--ds-background-accent-green-subtler)";
74
+ readonly 'accent.green.subtle': "var(--ds-background-accent-green-subtle)";
75
+ readonly 'accent.green.bolder': "var(--ds-background-accent-green-bolder)";
76
+ readonly 'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
77
+ readonly 'accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
78
+ readonly 'accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
79
+ readonly 'accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
80
+ readonly 'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
81
+ readonly 'accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
82
+ readonly 'accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
83
+ readonly 'accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
84
+ readonly 'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
85
+ readonly 'accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
86
+ readonly 'accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
87
+ readonly 'accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
88
+ readonly 'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
89
+ readonly 'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
90
+ readonly 'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
91
+ readonly 'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
92
+ readonly 'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
93
+ readonly 'accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
94
+ readonly 'accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
95
+ readonly 'accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
129
96
  readonly disabled: "var(--ds-background-disabled)";
130
97
  readonly input: "var(--ds-background-input)";
98
+ readonly 'input.hovered': "var(--ds-background-input-hovered)";
99
+ readonly 'input.pressed': "var(--ds-background-input-pressed)";
131
100
  readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
101
+ readonly 'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
102
+ readonly 'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
132
103
  readonly neutral: "var(--ds-background-neutral)";
104
+ readonly 'neutral.hovered': "var(--ds-background-neutral-hovered)";
105
+ readonly 'neutral.pressed': "var(--ds-background-neutral-pressed)";
133
106
  readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
107
+ readonly 'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
108
+ readonly 'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
134
109
  readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
110
+ readonly 'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
111
+ readonly 'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
135
112
  readonly selected: "var(--ds-background-selected)";
113
+ readonly 'selected.hovered': "var(--ds-background-selected-hovered)";
114
+ readonly 'selected.pressed': "var(--ds-background-selected-pressed)";
136
115
  readonly 'selected.bold': "var(--ds-background-selected-bold)";
116
+ readonly 'selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
117
+ readonly 'selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
137
118
  readonly 'brand.bold': "var(--ds-background-brand-bold)";
119
+ readonly 'brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
120
+ readonly 'brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
138
121
  readonly danger: "var(--ds-background-danger)";
122
+ readonly 'danger.hovered': "var(--ds-background-danger-hovered)";
123
+ readonly 'danger.pressed': "var(--ds-background-danger-pressed)";
139
124
  readonly 'danger.bold': "var(--ds-background-danger-bold)";
125
+ readonly 'danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
126
+ readonly 'danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
140
127
  readonly warning: "var(--ds-background-warning)";
128
+ readonly 'warning.hovered': "var(--ds-background-warning-hovered)";
129
+ readonly 'warning.pressed': "var(--ds-background-warning-pressed)";
141
130
  readonly 'warning.bold': "var(--ds-background-warning-bold)";
131
+ readonly 'warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
132
+ readonly 'warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
142
133
  readonly success: "var(--ds-background-success)";
134
+ readonly 'success.hovered': "var(--ds-background-success-hovered)";
135
+ readonly 'success.pressed': "var(--ds-background-success-pressed)";
143
136
  readonly 'success.bold': "var(--ds-background-success-bold)";
137
+ readonly 'success.bold.hovered': "var(--ds-background-success-bold-hovered)";
138
+ readonly 'success.bold.pressed': "var(--ds-background-success-bold-pressed)";
144
139
  readonly discovery: "var(--ds-background-discovery)";
140
+ readonly 'discovery.hovered': "var(--ds-background-discovery-hovered)";
141
+ readonly 'discovery.pressed': "var(--ds-background-discovery-pressed)";
145
142
  readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
143
+ readonly 'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
144
+ readonly 'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
146
145
  readonly information: "var(--ds-background-information)";
146
+ readonly 'information.hovered': "var(--ds-background-information-hovered)";
147
+ readonly 'information.pressed': "var(--ds-background-information-pressed)";
147
148
  readonly 'information.bold': "var(--ds-background-information-bold)";
149
+ readonly 'information.bold.hovered': "var(--ds-background-information-bold-hovered)";
150
+ readonly 'information.bold.pressed': "var(--ds-background-information-bold-pressed)";
148
151
  readonly 'color.blanket': "var(--ds-blanket)";
149
152
  readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
150
153
  readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
151
154
  readonly 'elevation.surface': "var(--ds-surface)";
155
+ readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
156
+ readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
152
157
  readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
158
+ readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
159
+ readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
153
160
  readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
161
+ readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
162
+ readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
154
163
  readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
155
164
  };
156
165
 
@@ -162,21 +171,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
162
171
  as?: 'div' | 'li' | 'span';
163
172
  className?: string;
164
173
  children?: ReactNode;
165
- color?: TextColor;
166
174
  backgroundColor?: BackgroundColor;
167
- shadow?: Shadow;
168
- borderStyle?: BorderStyle;
169
- borderWidth?: BorderWidth;
170
- borderColor?: BorderColor;
171
- borderRadius?: BorderRadius;
172
- layer?: Layer;
173
- flex?: Flex;
174
- flexGrow?: FlexGrow;
175
- flexShrink?: FlexShrink;
176
- alignSelf?: AlignSelf;
177
- overflow?: Overflow;
178
- overflowInline?: OverflowInline;
179
- overflowBlock?: OverflowBlock;
180
175
  padding?: Padding;
181
176
  paddingBlock?: PaddingBlock;
182
177
  paddingBlockStart?: PaddingBlockStart;
@@ -184,10 +179,6 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
184
179
  paddingInline?: PaddingInline;
185
180
  paddingInlineStart?: PaddingInlineStart;
186
181
  paddingInlineEnd?: PaddingInlineEnd;
187
- width?: Width;
188
- height?: Height;
189
- display?: Display;
190
- position?: Position;
191
182
  ref?: ComponentPropsWithRef<T>['ref'];
192
183
  };
193
184
 
@@ -200,38 +191,18 @@ type BasePrimitiveProps = {
200
191
  // @public (undocumented)
201
192
  type BorderColor = keyof typeof borderColorMap;
202
193
 
203
- // @public (undocumented)
204
- type BorderColor_2 = keyof typeof borderColorMap_2;
205
-
206
194
  // @public
207
195
  const borderColorMap: {
208
- readonly 'color.border': SerializedStyles;
209
- readonly 'accent.red': SerializedStyles;
210
- readonly 'accent.orange': SerializedStyles;
211
- readonly 'accent.yellow': SerializedStyles;
212
- readonly 'accent.green': SerializedStyles;
213
- readonly 'accent.teal': SerializedStyles;
214
- readonly 'accent.blue': SerializedStyles;
215
- readonly 'accent.purple': SerializedStyles;
216
- readonly 'accent.magenta': SerializedStyles;
217
- readonly 'accent.gray': SerializedStyles;
218
- readonly disabled: SerializedStyles;
219
- readonly focused: SerializedStyles;
220
- readonly input: SerializedStyles;
221
- readonly inverse: SerializedStyles;
222
- readonly selected: SerializedStyles;
223
- readonly brand: SerializedStyles;
224
- readonly danger: SerializedStyles;
225
- readonly warning: SerializedStyles;
226
- readonly success: SerializedStyles;
227
- readonly discovery: SerializedStyles;
228
- readonly information: SerializedStyles;
229
- readonly bold: SerializedStyles;
230
- };
231
-
232
- // @public (undocumented)
233
- const borderColorMap_2: {
234
196
  readonly 'color.border': "var(--ds-border)";
197
+ readonly 'accent.red': "var(--ds-border-accent-red)";
198
+ readonly 'accent.orange': "var(--ds-border-accent-orange)";
199
+ readonly 'accent.yellow': "var(--ds-border-accent-yellow)";
200
+ readonly 'accent.green': "var(--ds-border-accent-green)";
201
+ readonly 'accent.teal': "var(--ds-border-accent-teal)";
202
+ readonly 'accent.blue': "var(--ds-border-accent-blue)";
203
+ readonly 'accent.purple': "var(--ds-border-accent-purple)";
204
+ readonly 'accent.magenta': "var(--ds-border-accent-magenta)";
205
+ readonly 'accent.gray': "var(--ds-border-accent-gray)";
235
206
  readonly disabled: "var(--ds-border-disabled)";
236
207
  readonly focused: "var(--ds-border-focused)";
237
208
  readonly input: "var(--ds-border-input)";
@@ -251,11 +222,12 @@ type BorderRadius = keyof typeof borderRadiusMap;
251
222
 
252
223
  // @public (undocumented)
253
224
  const borderRadiusMap: {
254
- 'radius.100': SerializedStyles;
255
- 'radius.200': SerializedStyles;
256
- 'radius.round': SerializedStyles;
257
- 'radius.300': SerializedStyles;
258
- 'radius.400': SerializedStyles;
225
+ readonly 'radius.050': "var(--ds-radius-050)";
226
+ readonly 'radius.100': "var(--ds-radius-100)";
227
+ readonly 'radius.200': "var(--ds-radius-200)";
228
+ readonly 'radius.300': "var(--ds-radius-300)";
229
+ readonly 'radius.400': "var(--ds-radius-400)";
230
+ readonly 'radius.round': "var(--ds-radius-round)";
259
231
  };
260
232
 
261
233
  // @public (undocumented)
@@ -263,28 +235,18 @@ type BorderStyle = keyof typeof borderStyleMap;
263
235
 
264
236
  // @public (undocumented)
265
237
  const borderStyleMap: {
266
- readonly none: SerializedStyles;
267
- readonly solid: SerializedStyles;
238
+ readonly none: "none";
239
+ readonly solid: "solid";
268
240
  };
269
241
 
270
242
  // @public (undocumented)
271
243
  type BorderWidth = keyof typeof borderWidthMap;
272
244
 
273
- // @public (undocumented)
274
- type BorderWidth_2 = keyof typeof borderWidthMap_2;
275
-
276
- // @public (undocumented)
245
+ // @public
277
246
  const borderWidthMap: {
278
- readonly 'size.0': SerializedStyles;
279
- readonly 'size.050': SerializedStyles;
280
- readonly 'size.100': SerializedStyles;
281
- };
282
-
283
- // @public (undocumented)
284
- const borderWidthMap_2: {
285
- readonly 'size.0': "var(--ds-width-0)";
286
- readonly 'size.050': "var(--ds-width-050)";
287
- readonly 'size.100': "var(--ds-width-100)";
247
+ readonly 'width.0': "var(--ds-width-0)";
248
+ readonly 'width.050': "var(--ds-width-050)";
249
+ readonly 'width.100': "var(--ds-width-100)";
288
250
  };
289
251
 
290
252
  // @public
@@ -297,7 +259,7 @@ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'di
297
259
  export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
298
260
 
299
261
  // @public (undocumented)
300
- type BoxStyles = SerializedStyles_2 & {
262
+ type BoxStyles = SerializedStyles & {
301
263
  [boxTag]: true;
302
264
  };
303
265
 
@@ -310,7 +272,7 @@ type BoxXCSS = {
310
272
  readonly styles: BoxStyles;
311
273
  };
312
274
 
313
- // @public (undocumented)
275
+ // @public
314
276
  const dimensionMap: {
315
277
  readonly '100%': "100%";
316
278
  readonly 'size.100': "16px";
@@ -323,16 +285,7 @@ const dimensionMap: {
323
285
  };
324
286
 
325
287
  // @public (undocumented)
326
- type Display = keyof typeof displayMap;
327
-
328
- // @public (undocumented)
329
- const displayMap: {
330
- readonly block: SerializedStyles;
331
- readonly inline: SerializedStyles;
332
- readonly flex: SerializedStyles;
333
- readonly 'inline-flex': SerializedStyles;
334
- readonly 'inline-block': SerializedStyles;
335
- };
288
+ type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
336
289
 
337
290
  // @public (undocumented)
338
291
  type Flex = keyof typeof flexMap;
@@ -342,13 +295,13 @@ type FlexGrow = keyof typeof flexGrowMap;
342
295
 
343
296
  // @public (undocumented)
344
297
  const flexGrowMap: {
345
- readonly '0': SerializedStyles;
346
- readonly '1': SerializedStyles;
298
+ readonly '0': 0;
299
+ readonly '1': 1;
347
300
  };
348
301
 
349
302
  // @public (undocumented)
350
303
  const flexMap: {
351
- readonly '1': SerializedStyles;
304
+ readonly '1': 1;
352
305
  };
353
306
 
354
307
  // @public (undocumented)
@@ -356,8 +309,8 @@ type FlexShrink = keyof typeof flexShrinkMap;
356
309
 
357
310
  // @public (undocumented)
358
311
  const flexShrinkMap: {
359
- readonly '0': SerializedStyles;
360
- readonly '1': SerializedStyles;
312
+ readonly '0': 0;
313
+ readonly '1': 1;
361
314
  };
362
315
 
363
316
  // @public (undocumented)
@@ -373,22 +326,7 @@ type Grow = 'fill' | 'hug';
373
326
  type Grow_2 = 'fill' | 'hug';
374
327
 
375
328
  // @public (undocumented)
376
- type Height = keyof typeof heightMap;
377
-
378
- // @public (undocumented)
379
- type Height_2 = keyof typeof dimensionMap;
380
-
381
- // @public (undocumented)
382
- const heightMap: {
383
- readonly '100%': SerializedStyles;
384
- readonly 'size.100': SerializedStyles;
385
- readonly 'size.200': SerializedStyles;
386
- readonly 'size.300': SerializedStyles;
387
- readonly 'size.400': SerializedStyles;
388
- readonly 'size.500': SerializedStyles;
389
- readonly 'size.600': SerializedStyles;
390
- readonly 'size.1000': SerializedStyles;
391
- };
329
+ type Height = keyof typeof dimensionMap;
392
330
 
393
331
  // @public
394
332
  export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
@@ -412,25 +350,25 @@ export interface InlineProps<T extends ElementType = 'div'> {
412
350
  // @public
413
351
  const inlineSpaceMap: {
414
352
  [k: string]: {
415
- readonly '0': SerializedStyles;
416
- readonly '025': SerializedStyles;
417
- readonly '050': SerializedStyles;
418
- readonly '075': SerializedStyles;
419
- readonly '100': SerializedStyles;
420
- readonly '150': SerializedStyles;
421
- readonly '200': SerializedStyles;
422
- readonly '250': SerializedStyles;
423
- readonly '300': SerializedStyles;
424
- readonly '400': SerializedStyles;
425
- readonly '500': SerializedStyles;
426
- readonly '600': SerializedStyles;
427
- readonly '800': SerializedStyles;
428
- readonly '1000': SerializedStyles;
353
+ readonly '0': SerializedStyles_2;
354
+ readonly '025': SerializedStyles_2;
355
+ readonly '050': SerializedStyles_2;
356
+ readonly '075': SerializedStyles_2;
357
+ readonly '100': SerializedStyles_2;
358
+ readonly '150': SerializedStyles_2;
359
+ readonly '200': SerializedStyles_2;
360
+ readonly '250': SerializedStyles_2;
361
+ readonly '300': SerializedStyles_2;
362
+ readonly '400': SerializedStyles_2;
363
+ readonly '500': SerializedStyles_2;
364
+ readonly '600': SerializedStyles_2;
365
+ readonly '800': SerializedStyles_2;
366
+ readonly '1000': SerializedStyles_2;
429
367
  };
430
368
  };
431
369
 
432
370
  // @public (undocumented)
433
- type InlineStyles = SerializedStyles_2 & {
371
+ type InlineStyles = SerializedStyles & {
434
372
  [inlineTag]: true;
435
373
  };
436
374
 
@@ -438,10 +376,10 @@ type InlineStyles = SerializedStyles_2 & {
438
376
  const inlineTag: unique symbol;
439
377
 
440
378
  // @public (undocumented)
441
- type Layer = keyof typeof LAYERS;
379
+ type Layer = keyof typeof layerMap;
442
380
 
443
381
  // @public (undocumented)
444
- const LAYERS: {
382
+ const layerMap: {
445
383
  readonly card: 100;
446
384
  readonly navigation: 200;
447
385
  readonly dialog: 300;
@@ -473,8 +411,8 @@ type OverflowBlock = keyof typeof overflowBlockMap;
473
411
 
474
412
  // @public (undocumented)
475
413
  const overflowBlockMap: {
476
- readonly auto: SerializedStyles;
477
- readonly hidden: SerializedStyles;
414
+ readonly auto: "auto";
415
+ readonly hidden: "hidden";
478
416
  };
479
417
 
480
418
  // @public (undocumented)
@@ -482,62 +420,39 @@ type OverflowInline = keyof typeof overflowInlineMap;
482
420
 
483
421
  // @public (undocumented)
484
422
  const overflowInlineMap: {
485
- readonly auto: SerializedStyles;
486
- readonly hidden: SerializedStyles;
423
+ readonly auto: "auto";
424
+ readonly hidden: "hidden";
487
425
  };
488
426
 
489
427
  // @public (undocumented)
490
428
  const overflowMap: {
491
- readonly auto: SerializedStyles;
492
- readonly hidden: SerializedStyles;
429
+ readonly auto: "auto";
430
+ readonly hidden: "hidden";
493
431
  };
494
432
 
495
433
  // @public (undocumented)
496
- type Padding = keyof typeof paddingMap.padding;
497
-
498
- // @public (undocumented)
499
- type Padding_2 = keyof typeof paddingMap_2;
434
+ type Padding = keyof typeof paddingMap;
500
435
 
501
436
  // @public (undocumented)
502
- type PaddingBlock = keyof typeof paddingMap.paddingBlock;
437
+ type PaddingBlock = keyof typeof paddingMap;
503
438
 
504
439
  // @public (undocumented)
505
- type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
440
+ type PaddingBlockEnd = keyof typeof paddingMap;
506
441
 
507
442
  // @public (undocumented)
508
- type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
443
+ type PaddingBlockStart = keyof typeof paddingMap;
509
444
 
510
445
  // @public (undocumented)
511
- type PaddingInline = keyof typeof paddingMap.paddingInline;
446
+ type PaddingInline = keyof typeof paddingMap;
512
447
 
513
448
  // @public (undocumented)
514
- type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
449
+ type PaddingInlineEnd = keyof typeof paddingMap;
515
450
 
516
451
  // @public (undocumented)
517
- type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
452
+ type PaddingInlineStart = keyof typeof paddingMap;
518
453
 
519
454
  // @public
520
455
  const paddingMap: {
521
- [k: string]: {
522
- readonly 'space.0': SerializedStyles;
523
- readonly 'space.025': SerializedStyles;
524
- readonly 'space.050': SerializedStyles;
525
- readonly 'space.075': SerializedStyles;
526
- readonly 'space.100': SerializedStyles;
527
- readonly 'space.150': SerializedStyles;
528
- readonly 'space.200': SerializedStyles;
529
- readonly 'space.250': SerializedStyles;
530
- readonly 'space.300': SerializedStyles;
531
- readonly 'space.400': SerializedStyles;
532
- readonly 'space.500': SerializedStyles;
533
- readonly 'space.600': SerializedStyles;
534
- readonly 'space.800': SerializedStyles;
535
- readonly 'space.1000': SerializedStyles;
536
- };
537
- };
538
-
539
- // @public (undocumented)
540
- const paddingMap_2: {
541
456
  readonly 'space.0': "var(--ds-space-0)";
542
457
  readonly 'space.025': "var(--ds-space-025)";
543
458
  readonly 'space.050': "var(--ds-space-050)";
@@ -559,15 +474,15 @@ type Position = keyof typeof positionMap;
559
474
 
560
475
  // @public (undocumented)
561
476
  const positionMap: {
562
- readonly absolute: SerializedStyles;
563
- readonly fixed: SerializedStyles;
564
- readonly relative: SerializedStyles;
565
- readonly static: SerializedStyles;
477
+ readonly absolute: "absolute";
478
+ readonly fixed: "fixed";
479
+ readonly relative: "relative";
480
+ readonly static: "static";
566
481
  };
567
482
 
568
483
  // @public (undocumented)
569
484
  type PublicBoxPropsBase = {
570
- xcss?: BoxXCSS;
485
+ xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
571
486
  };
572
487
 
573
488
  // @public (undocumented)
@@ -584,11 +499,11 @@ type Shadow = keyof typeof shadowMap;
584
499
 
585
500
  // @public (undocumented)
586
501
  const shadowMap: {
587
- readonly overflow: SerializedStyles;
588
- readonly 'overflow.perimeter': SerializedStyles;
589
- readonly 'overflow.spread': SerializedStyles;
590
- readonly overlay: SerializedStyles;
591
- readonly raised: SerializedStyles;
502
+ readonly overflow: "var(--ds-shadow-overflow)";
503
+ readonly 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
504
+ readonly 'overflow.spread': "var(--ds-shadow-overflow-spread)";
505
+ readonly overlay: "var(--ds-shadow-overlay)";
506
+ readonly raised: "var(--ds-shadow-raised)";
592
507
  };
593
508
 
594
509
  // @public (undocumented)
@@ -616,66 +531,28 @@ export interface StackProps<T extends ElementType = 'div'> {
616
531
  // @public
617
532
  const stackSpaceMap: {
618
533
  [k: string]: {
619
- readonly '0': SerializedStyles;
620
- readonly '025': SerializedStyles;
621
- readonly '050': SerializedStyles;
622
- readonly '075': SerializedStyles;
623
- readonly '100': SerializedStyles;
624
- readonly '150': SerializedStyles;
625
- readonly '200': SerializedStyles;
626
- readonly '250': SerializedStyles;
627
- readonly '300': SerializedStyles;
628
- readonly '400': SerializedStyles;
629
- readonly '500': SerializedStyles;
630
- readonly '600': SerializedStyles;
631
- readonly '800': SerializedStyles;
632
- readonly '1000': SerializedStyles;
534
+ readonly '0': SerializedStyles_2;
535
+ readonly '025': SerializedStyles_2;
536
+ readonly '050': SerializedStyles_2;
537
+ readonly '075': SerializedStyles_2;
538
+ readonly '100': SerializedStyles_2;
539
+ readonly '150': SerializedStyles_2;
540
+ readonly '200': SerializedStyles_2;
541
+ readonly '250': SerializedStyles_2;
542
+ readonly '300': SerializedStyles_2;
543
+ readonly '400': SerializedStyles_2;
544
+ readonly '500': SerializedStyles_2;
545
+ readonly '600': SerializedStyles_2;
546
+ readonly '800': SerializedStyles_2;
547
+ readonly '1000': SerializedStyles_2;
633
548
  };
634
549
  };
635
550
 
636
551
  // @public (undocumented)
637
552
  type TextColor = keyof typeof textColorMap;
638
553
 
639
- // @public (undocumented)
640
- type TextColor_2 = keyof typeof textColorMap_2;
641
-
642
554
  // @public (undocumented)
643
555
  const textColorMap: {
644
- readonly 'color.text': SerializedStyles;
645
- readonly 'accent.red': SerializedStyles;
646
- readonly 'accent.red.bolder': SerializedStyles;
647
- readonly 'accent.orange': SerializedStyles;
648
- readonly 'accent.orange.bolder': SerializedStyles;
649
- readonly 'accent.yellow': SerializedStyles;
650
- readonly 'accent.yellow.bolder': SerializedStyles;
651
- readonly 'accent.green': SerializedStyles;
652
- readonly 'accent.green.bolder': SerializedStyles;
653
- readonly 'accent.teal': SerializedStyles;
654
- readonly 'accent.teal.bolder': SerializedStyles;
655
- readonly 'accent.blue': SerializedStyles;
656
- readonly 'accent.blue.bolder': SerializedStyles;
657
- readonly 'accent.purple': SerializedStyles;
658
- readonly 'accent.purple.bolder': SerializedStyles;
659
- readonly 'accent.magenta': SerializedStyles;
660
- readonly 'accent.magenta.bolder': SerializedStyles;
661
- readonly 'accent.gray': SerializedStyles;
662
- readonly 'accent.gray.bolder': SerializedStyles;
663
- readonly disabled: SerializedStyles;
664
- readonly inverse: SerializedStyles;
665
- readonly selected: SerializedStyles;
666
- readonly brand: SerializedStyles;
667
- readonly danger: SerializedStyles;
668
- readonly warning: SerializedStyles;
669
- readonly 'warning.inverse': SerializedStyles;
670
- readonly success: SerializedStyles;
671
- readonly discovery: SerializedStyles;
672
- readonly information: SerializedStyles;
673
- readonly subtlest: SerializedStyles;
674
- readonly subtle: SerializedStyles;
675
- };
676
-
677
- // @public (undocumented)
678
- const textColorMap_2: {
679
556
  readonly 'color.text': "var(--ds-text)";
680
557
  readonly 'accent.red': "var(--ds-text-accent-red)";
681
558
  readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
@@ -711,48 +588,46 @@ const textColorMap_2: {
711
588
 
712
589
  // @public (undocumented)
713
590
  type TokenisedProps = {
714
- backgroundColor?: BackgroundColor_2;
715
- borderColor?: BorderColor_2;
716
- borderWidth?: BorderWidth_2;
717
- color?: TextColor_2;
718
- height?: Height_2;
719
- minHeight?: MinHeight;
720
- minWidth?: MinWidth;
721
- maxHeight?: MaxHeight;
591
+ alignSelf?: AlignSelf;
592
+ backgroundColor?: BackgroundColor;
593
+ borderColor?: BorderColor;
594
+ borderStyle?: BorderStyle;
595
+ borderRadius?: BorderRadius;
596
+ borderWidth?: BorderWidth;
597
+ display?: Display;
598
+ flex?: Flex;
599
+ flexGrow?: FlexGrow;
600
+ flexShrink?: FlexShrink;
601
+ height?: Height;
602
+ layer?: Layer;
722
603
  maxWidth?: MaxWidth;
723
- padding?: Padding_2;
724
- paddingBlock?: Padding_2;
725
- paddingInline?: Padding_2;
726
- paddingBlockStart?: Padding_2;
727
- paddingBlockEnd?: Padding_2;
728
- paddingInlineStart?: Padding_2;
729
- paddingInlineEnd?: Padding_2;
730
- width?: Width_2;
604
+ maxHeight?: MaxHeight;
605
+ minWidth?: MinWidth;
606
+ minHeight?: MinHeight;
607
+ overflow?: Overflow;
608
+ overflowInline?: OverflowInline;
609
+ overflowBlock?: OverflowBlock;
610
+ padding?: Padding;
611
+ paddingBlock?: PaddingBlock;
612
+ paddingBlockStart?: PaddingBlockStart;
613
+ paddingBlockEnd?: PaddingBlockEnd;
614
+ paddingInline?: PaddingInline;
615
+ paddingInlineStart?: PaddingInlineStart;
616
+ paddingInlineEnd?: PaddingInlineEnd;
617
+ position?: Position;
618
+ shadow?: Shadow;
619
+ textColor?: TextColor;
620
+ width?: Width;
731
621
  };
732
622
 
733
623
  // @public (undocumented)
734
624
  const uniqueSymbol: unique symbol;
735
625
 
736
626
  // @public (undocumented)
737
- type Width = keyof typeof widthMap;
738
-
739
- // @public (undocumented)
740
- type Width_2 = keyof typeof dimensionMap;
741
-
742
- // @public
743
- const widthMap: {
744
- readonly '100%': SerializedStyles;
745
- readonly 'size.100': SerializedStyles;
746
- readonly 'size.200': SerializedStyles;
747
- readonly 'size.300': SerializedStyles;
748
- readonly 'size.400': SerializedStyles;
749
- readonly 'size.500': SerializedStyles;
750
- readonly 'size.600': SerializedStyles;
751
- readonly 'size.1000': SerializedStyles;
752
- };
627
+ type Width = keyof typeof dimensionMap;
753
628
 
754
629
  // @public (undocumented)
755
- export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
630
+ export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {
756
631
  readonly symbol: typeof uniqueSymbol;
757
632
  readonly styles: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>> ? InlineStyles : never;
758
633
  };