@atlaskit/primitives 0.8.6 → 0.8.8

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 (19) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/internal/style-maps.partial.js +34 -9
  3. package/dist/cjs/internal/xcss.js +37 -1
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/internal/style-maps.partial.js +31 -8
  6. package/dist/es2019/internal/xcss.js +38 -2
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/internal/style-maps.partial.js +31 -8
  9. package/dist/esm/internal/xcss.js +38 -2
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/components/internal/base-box.d.ts +1 -1
  12. package/dist/types/internal/style-maps.partial.d.ts +77 -12
  13. package/package.json +1 -1
  14. package/report.api.md +211 -3
  15. package/scripts/codegen-file-templates/dimensions.tsx +10 -0
  16. package/scripts/codegen-file-templates/display.tsx +9 -6
  17. package/scripts/codegen-styles.tsx +1 -1
  18. package/scripts/spacing-codegen-template.tsx +18 -3
  19. package/tmp/api-report-tmp.d.ts +86 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 0.8.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`5a134a5128a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a134a5128a) - Adds type hinting for boxShadow CSS property. Fixes bug with token to CSS custom property transformation for gap, rowGap, columnGap.
8
+
9
+ ## 0.8.7
10
+
11
+ ### Patch Changes
12
+
13
+ - [`bad2da77917`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bad2da77917) - The Box primitive now accepts more elements for the 'as' prop
14
+
3
15
  ## 0.8.6
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/internal/style-maps.partial.js CHANGED
@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.paddingMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
7
+ exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.positionMap = exports.paddingStylesMap = exports.paddingMap = exports.overflowMap = exports.overflowInlineMap = exports.overflowBlockMap = exports.layerMap = exports.insetMap = exports.flexShrinkMap = exports.flexMap = exports.flexGrowMap = exports.flexDirectionMap = exports.displayMap = exports.dimensionMap = exports.borderWidthMap = exports.borderStyleMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.alignSelfMap = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  /**
11
11
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
12
- * @codegen <<SignedSource::1e44ed8fcd11d2f3864437fa047845a9>>
12
+ * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
13
13
  * @codegenId dimensions
14
14
  * @codegenCommand yarn codegen-styles
15
15
  * @codegenParams ["dimensions"]
16
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
16
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
17
17
  */
18
18
  var dimensionMap = {
19
19
  '100%': '100%',
@@ -32,10 +32,10 @@ exports.dimensionMap = dimensionMap;
32
32
 
33
33
  /**
34
34
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
35
- * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
35
+ * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
36
36
  * @codegenId spacing
37
37
  * @codegenCommand yarn codegen-styles
38
- * @codegenParams ["padding", "space"]
38
+ * @codegenParams ["padding", "space", "inset"]
39
39
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
40
40
  */
41
41
  var paddingMap = {
@@ -72,6 +72,23 @@ var spaceMap = {
72
72
  'space.1000': "var(--ds-space-1000, 80px)"
73
73
  };
74
74
  exports.spaceMap = spaceMap;
75
+ var insetMap = {
76
+ 'space.0': "var(--ds-space-0, 0px)",
77
+ 'space.025': "var(--ds-space-025, 2px)",
78
+ 'space.050': "var(--ds-space-050, 4px)",
79
+ 'space.075': "var(--ds-space-075, 6px)",
80
+ 'space.100': "var(--ds-space-100, 8px)",
81
+ 'space.150': "var(--ds-space-150, 12px)",
82
+ 'space.200': "var(--ds-space-200, 16px)",
83
+ 'space.250': "var(--ds-space-250, 20px)",
84
+ 'space.300': "var(--ds-space-300, 24px)",
85
+ 'space.400': "var(--ds-space-400, 32px)",
86
+ 'space.500': "var(--ds-space-500, 40px)",
87
+ 'space.600': "var(--ds-space-600, 48px)",
88
+ 'space.800': "var(--ds-space-800, 64px)",
89
+ 'space.1000': "var(--ds-space-1000, 80px)"
90
+ };
91
+ exports.insetMap = insetMap;
75
92
  /**
76
93
  * @codegenEnd
77
94
  */
@@ -264,14 +281,14 @@ exports.textColorMap = textColorMap;
264
281
 
265
282
  /**
266
283
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
267
- * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
284
+ * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
268
285
  * @codegenId misc
269
286
  * @codegenCommand yarn codegen-styles
270
287
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
271
288
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
272
289
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
273
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
274
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
290
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
291
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
275
292
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
276
293
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
277
294
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
@@ -293,6 +310,14 @@ var borderStyleMap = {
293
310
  solid: 'solid'
294
311
  };
295
312
  exports.borderStyleMap = borderStyleMap;
313
+ var displayMap = {
314
+ flex: 'flex',
315
+ block: 'block',
316
+ inline: 'inline',
317
+ inlineBlock: 'inline-block',
318
+ inlineFlex: 'inline-flex'
319
+ };
320
+ exports.displayMap = displayMap;
296
321
  var flexDirectionMap = {
297
322
  row: 'row',
298
323
  column: 'column'
@@ -377,7 +402,7 @@ var borderRadiusMap = {
377
402
  * @codegenEnd
378
403
  */
379
404
  exports.borderRadiusMap = borderRadiusMap;
380
- var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap'];
405
+ var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
381
406
  var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
382
407
  return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
383
408
  emotionSpacingMap[token] = (0, _react.css)((0, _defineProperty2.default)({}, cssProperty, tokenMap[token]));
package/dist/cjs/internal/xcss.js CHANGED
@@ -14,24 +14,60 @@ var _styleMaps = require("./style-maps.partial");
14
14
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
15
15
 
16
16
  var tokensMap = {
17
+ alignSelf: _styleMaps.alignSelfMap,
17
18
  backgroundColor: _styleMaps.backgroundColorMap,
19
+ blockSize: _styleMaps.dimensionMap,
18
20
  borderColor: _styleMaps.borderColorMap,
19
21
  borderRadius: _styleMaps.borderRadiusMap,
22
+ borderStyle: _styleMaps.borderStyleMap,
20
23
  borderWidth: _styleMaps.borderWidthMap,
24
+ bottom: _styleMaps.dimensionMap,
25
+ boxShadow: _styleMaps.shadowMap,
21
26
  color: _styleMaps.textColorMap,
27
+ columnGap: _styleMaps.spaceMap,
28
+ display: _styleMaps.displayMap,
29
+ flex: _styleMaps.flexMap,
30
+ flexDirection: _styleMaps.flexDirectionMap,
31
+ flexGrow: _styleMaps.flexGrowMap,
32
+ flexShrink: _styleMaps.flexShrinkMap,
33
+ gap: _styleMaps.spaceMap,
22
34
  height: _styleMaps.dimensionMap,
35
+ inlineSize: _styleMaps.dimensionMap,
36
+ inset: _styleMaps.insetMap,
37
+ insetBlock: _styleMaps.insetMap,
38
+ insetBlockEnd: _styleMaps.insetMap,
39
+ insetBlockStart: _styleMaps.insetMap,
40
+ insetInline: _styleMaps.insetMap,
41
+ insetInlineEnd: _styleMaps.insetMap,
42
+ insetInlineStart: _styleMaps.insetMap,
43
+ layer: _styleMaps.layerMap,
44
+ left: _styleMaps.dimensionMap,
45
+ maxBlockSize: _styleMaps.dimensionMap,
23
46
  maxHeight: _styleMaps.dimensionMap,
47
+ maxInlineSize: _styleMaps.dimensionMap,
24
48
  maxWidth: _styleMaps.dimensionMap,
49
+ minBlockSize: _styleMaps.dimensionMap,
25
50
  minHeight: _styleMaps.dimensionMap,
51
+ minInlineSize: _styleMaps.dimensionMap,
26
52
  minWidth: _styleMaps.dimensionMap,
53
+ overflow: _styleMaps.overflowMap,
54
+ overflowBlock: _styleMaps.overflowBlockMap,
55
+ overflowInline: _styleMaps.overflowInlineMap,
27
56
  padding: _styleMaps.paddingMap,
28
57
  paddingBlock: _styleMaps.paddingMap,
29
58
  paddingBlockEnd: _styleMaps.paddingMap,
30
59
  paddingBlockStart: _styleMaps.paddingMap,
60
+ paddingBottom: _styleMaps.paddingMap,
31
61
  paddingInline: _styleMaps.paddingMap,
32
62
  paddingInlineEnd: _styleMaps.paddingMap,
33
63
  paddingInlineStart: _styleMaps.paddingMap,
34
- boxShadow: _styleMaps.shadowMap,
64
+ paddingLeft: _styleMaps.paddingMap,
65
+ paddingRight: _styleMaps.paddingMap,
66
+ paddingTop: _styleMaps.paddingMap,
67
+ position: _styleMaps.positionMap,
68
+ right: _styleMaps.dimensionMap,
69
+ rowGap: _styleMaps.spaceMap,
70
+ top: _styleMaps.dimensionMap,
35
71
  width: _styleMaps.dimensionMap
36
72
  };
37
73
  var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.6",
3
+ "version": "0.8.8",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/internal/style-maps.partial.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { css } from '@emotion/react';
2
2
  /**
3
3
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
- * @codegen <<SignedSource::1e44ed8fcd11d2f3864437fa047845a9>>
4
+ * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
5
5
  * @codegenId dimensions
6
6
  * @codegenCommand yarn codegen-styles
7
7
  * @codegenParams ["dimensions"]
8
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
8
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
9
9
  */
10
10
  export const dimensionMap = {
11
11
  '100%': '100%',
@@ -22,10 +22,10 @@ export const dimensionMap = {
22
22
  */
23
23
  /**
24
24
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
25
- * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
25
+ * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
26
26
  * @codegenId spacing
27
27
  * @codegenCommand yarn codegen-styles
28
- * @codegenParams ["padding", "space"]
28
+ * @codegenParams ["padding", "space", "inset"]
29
29
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
30
30
  */
31
31
  export const paddingMap = {
@@ -60,6 +60,22 @@ export const spaceMap = {
60
60
  'space.800': "var(--ds-space-800, 64px)",
61
61
  'space.1000': "var(--ds-space-1000, 80px)"
62
62
  };
63
+ export const insetMap = {
64
+ 'space.0': "var(--ds-space-0, 0px)",
65
+ 'space.025': "var(--ds-space-025, 2px)",
66
+ 'space.050': "var(--ds-space-050, 4px)",
67
+ 'space.075': "var(--ds-space-075, 6px)",
68
+ 'space.100': "var(--ds-space-100, 8px)",
69
+ 'space.150': "var(--ds-space-150, 12px)",
70
+ 'space.200': "var(--ds-space-200, 16px)",
71
+ 'space.250': "var(--ds-space-250, 20px)",
72
+ 'space.300': "var(--ds-space-300, 24px)",
73
+ 'space.400': "var(--ds-space-400, 32px)",
74
+ 'space.500': "var(--ds-space-500, 40px)",
75
+ 'space.600': "var(--ds-space-600, 48px)",
76
+ 'space.800': "var(--ds-space-800, 64px)",
77
+ 'space.1000': "var(--ds-space-1000, 80px)"
78
+ };
63
79
  /**
64
80
  * @codegenEnd
65
81
  */
@@ -246,14 +262,14 @@ export const textColorMap = {
246
262
  */
247
263
  /**
248
264
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
249
- * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
265
+ * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
250
266
  * @codegenId misc
251
267
  * @codegenCommand yarn codegen-styles
252
268
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
253
269
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
254
270
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
255
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
256
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
271
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
272
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
257
273
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
258
274
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
259
275
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
@@ -273,6 +289,13 @@ export const borderStyleMap = {
273
289
  none: 'none',
274
290
  solid: 'solid'
275
291
  };
292
+ export const displayMap = {
293
+ flex: 'flex',
294
+ block: 'block',
295
+ inline: 'inline',
296
+ inlineBlock: 'inline-block',
297
+ inlineFlex: 'inline-flex'
298
+ };
276
299
  export const flexDirectionMap = {
277
300
  row: 'row',
278
301
  column: 'column'
@@ -346,7 +369,7 @@ export const borderRadiusMap = {
346
369
  * @codegenEnd
347
370
  */
348
371
 
349
- const spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap'];
372
+ const spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
350
373
  const getSerializedStylesMap = (cssProperty, tokenMap) => {
351
374
  return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {
352
375
  emotionSpacingMap[token] = css({
package/dist/es2019/internal/xcss.js CHANGED
@@ -1,26 +1,62 @@
1
1
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
2
  import { css as cssEmotion } from '@emotion/react';
3
3
  import warnOnce from '@atlaskit/ds-lib/warn-once';
4
- import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, shadowMap, textColorMap } from './style-maps.partial';
4
+ import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, insetMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, paddingMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
5
5
  const tokensMap = {
6
+ alignSelf: alignSelfMap,
6
7
  backgroundColor: backgroundColorMap,
8
+ blockSize: dimensionMap,
7
9
  borderColor: borderColorMap,
8
10
  borderRadius: borderRadiusMap,
11
+ borderStyle: borderStyleMap,
9
12
  borderWidth: borderWidthMap,
13
+ bottom: dimensionMap,
14
+ boxShadow: shadowMap,
10
15
  color: textColorMap,
16
+ columnGap: spaceMap,
17
+ display: displayMap,
18
+ flex: flexMap,
19
+ flexDirection: flexDirectionMap,
20
+ flexGrow: flexGrowMap,
21
+ flexShrink: flexShrinkMap,
22
+ gap: spaceMap,
11
23
  height: dimensionMap,
24
+ inlineSize: dimensionMap,
25
+ inset: insetMap,
26
+ insetBlock: insetMap,
27
+ insetBlockEnd: insetMap,
28
+ insetBlockStart: insetMap,
29
+ insetInline: insetMap,
30
+ insetInlineEnd: insetMap,
31
+ insetInlineStart: insetMap,
32
+ layer: layerMap,
33
+ left: dimensionMap,
34
+ maxBlockSize: dimensionMap,
12
35
  maxHeight: dimensionMap,
36
+ maxInlineSize: dimensionMap,
13
37
  maxWidth: dimensionMap,
38
+ minBlockSize: dimensionMap,
14
39
  minHeight: dimensionMap,
40
+ minInlineSize: dimensionMap,
15
41
  minWidth: dimensionMap,
42
+ overflow: overflowMap,
43
+ overflowBlock: overflowBlockMap,
44
+ overflowInline: overflowInlineMap,
16
45
  padding: paddingMap,
17
46
  paddingBlock: paddingMap,
18
47
  paddingBlockEnd: paddingMap,
19
48
  paddingBlockStart: paddingMap,
49
+ paddingBottom: paddingMap,
20
50
  paddingInline: paddingMap,
21
51
  paddingInlineEnd: paddingMap,
22
52
  paddingInlineStart: paddingMap,
23
- boxShadow: shadowMap,
53
+ paddingLeft: paddingMap,
54
+ paddingRight: paddingMap,
55
+ paddingTop: paddingMap,
56
+ position: positionMap,
57
+ right: dimensionMap,
58
+ rowGap: spaceMap,
59
+ top: dimensionMap,
24
60
  width: dimensionMap
25
61
  };
26
62
  const uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.6",
3
+ "version": "0.8.8",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/internal/style-maps.partial.js CHANGED
@@ -2,11 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { css } from '@emotion/react';
3
3
  /**
4
4
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
5
- * @codegen <<SignedSource::1e44ed8fcd11d2f3864437fa047845a9>>
5
+ * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
6
6
  * @codegenId dimensions
7
7
  * @codegenCommand yarn codegen-styles
8
8
  * @codegenParams ["dimensions"]
9
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
9
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
10
10
  */
11
11
  export var dimensionMap = {
12
12
  '100%': '100%',
@@ -23,10 +23,10 @@ export var dimensionMap = {
23
23
  */
24
24
  /**
25
25
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
26
- * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
26
+ * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
27
27
  * @codegenId spacing
28
28
  * @codegenCommand yarn codegen-styles
29
- * @codegenParams ["padding", "space"]
29
+ * @codegenParams ["padding", "space", "inset"]
30
30
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
31
31
  */
32
32
  export var paddingMap = {
@@ -61,6 +61,22 @@ export var spaceMap = {
61
61
  'space.800': "var(--ds-space-800, 64px)",
62
62
  'space.1000': "var(--ds-space-1000, 80px)"
63
63
  };
64
+ export var insetMap = {
65
+ 'space.0': "var(--ds-space-0, 0px)",
66
+ 'space.025': "var(--ds-space-025, 2px)",
67
+ 'space.050': "var(--ds-space-050, 4px)",
68
+ 'space.075': "var(--ds-space-075, 6px)",
69
+ 'space.100': "var(--ds-space-100, 8px)",
70
+ 'space.150': "var(--ds-space-150, 12px)",
71
+ 'space.200': "var(--ds-space-200, 16px)",
72
+ 'space.250': "var(--ds-space-250, 20px)",
73
+ 'space.300': "var(--ds-space-300, 24px)",
74
+ 'space.400': "var(--ds-space-400, 32px)",
75
+ 'space.500': "var(--ds-space-500, 40px)",
76
+ 'space.600': "var(--ds-space-600, 48px)",
77
+ 'space.800': "var(--ds-space-800, 64px)",
78
+ 'space.1000': "var(--ds-space-1000, 80px)"
79
+ };
64
80
  /**
65
81
  * @codegenEnd
66
82
  */
@@ -247,14 +263,14 @@ export var textColorMap = {
247
263
  */
248
264
  /**
249
265
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
250
- * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
266
+ * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
251
267
  * @codegenId misc
252
268
  * @codegenCommand yarn codegen-styles
253
269
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
254
270
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
255
271
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
256
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
257
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
272
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
273
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
258
274
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
259
275
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
260
276
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
@@ -274,6 +290,13 @@ export var borderStyleMap = {
274
290
  none: 'none',
275
291
  solid: 'solid'
276
292
  };
293
+ export var displayMap = {
294
+ flex: 'flex',
295
+ block: 'block',
296
+ inline: 'inline',
297
+ inlineBlock: 'inline-block',
298
+ inlineFlex: 'inline-flex'
299
+ };
277
300
  export var flexDirectionMap = {
278
301
  row: 'row',
279
302
  column: 'column'
@@ -347,7 +370,7 @@ export var borderRadiusMap = {
347
370
  * @codegenEnd
348
371
  */
349
372
 
350
- var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap'];
373
+ var spacingProperties = ['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'gap', 'rowGap', 'columnGap'];
351
374
  var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenMap) {
352
375
  return Object.keys(tokenMap).reduce(function (emotionSpacingMap, token) {
353
376
  emotionSpacingMap[token] = css(_defineProperty({}, cssProperty, tokenMap[token]));
package/dist/esm/internal/xcss.js CHANGED
@@ -3,26 +3,62 @@ import _typeof from "@babel/runtime/helpers/typeof";
3
3
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
4
4
  import { css as cssEmotion } from '@emotion/react';
5
5
  import warnOnce from '@atlaskit/ds-lib/warn-once';
6
- import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, shadowMap, textColorMap } from './style-maps.partial';
6
+ import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, insetMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, paddingMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
7
7
  var tokensMap = {
8
+ alignSelf: alignSelfMap,
8
9
  backgroundColor: backgroundColorMap,
10
+ blockSize: dimensionMap,
9
11
  borderColor: borderColorMap,
10
12
  borderRadius: borderRadiusMap,
13
+ borderStyle: borderStyleMap,
11
14
  borderWidth: borderWidthMap,
15
+ bottom: dimensionMap,
16
+ boxShadow: shadowMap,
12
17
  color: textColorMap,
18
+ columnGap: spaceMap,
19
+ display: displayMap,
20
+ flex: flexMap,
21
+ flexDirection: flexDirectionMap,
22
+ flexGrow: flexGrowMap,
23
+ flexShrink: flexShrinkMap,
24
+ gap: spaceMap,
13
25
  height: dimensionMap,
26
+ inlineSize: dimensionMap,
27
+ inset: insetMap,
28
+ insetBlock: insetMap,
29
+ insetBlockEnd: insetMap,
30
+ insetBlockStart: insetMap,
31
+ insetInline: insetMap,
32
+ insetInlineEnd: insetMap,
33
+ insetInlineStart: insetMap,
34
+ layer: layerMap,
35
+ left: dimensionMap,
36
+ maxBlockSize: dimensionMap,
14
37
  maxHeight: dimensionMap,
38
+ maxInlineSize: dimensionMap,
15
39
  maxWidth: dimensionMap,
40
+ minBlockSize: dimensionMap,
16
41
  minHeight: dimensionMap,
42
+ minInlineSize: dimensionMap,
17
43
  minWidth: dimensionMap,
44
+ overflow: overflowMap,
45
+ overflowBlock: overflowBlockMap,
46
+ overflowInline: overflowInlineMap,
18
47
  padding: paddingMap,
19
48
  paddingBlock: paddingMap,
20
49
  paddingBlockEnd: paddingMap,
21
50
  paddingBlockStart: paddingMap,
51
+ paddingBottom: paddingMap,
22
52
  paddingInline: paddingMap,
23
53
  paddingInlineEnd: paddingMap,
24
54
  paddingInlineStart: paddingMap,
25
- boxShadow: shadowMap,
55
+ paddingLeft: paddingMap,
56
+ paddingRight: paddingMap,
57
+ paddingTop: paddingMap,
58
+ position: positionMap,
59
+ right: dimensionMap,
60
+ rowGap: spaceMap,
61
+ top: dimensionMap,
26
62
  width: dimensionMap
27
63
  };
28
64
  var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.6",
3
+ "version": "0.8.8",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/internal/base-box.d.ts CHANGED
@@ -7,7 +7,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
7
7
  /**
8
8
  * The DOM element to render as the Box. Defaults to `div`.
9
9
  */
10
- as?: 'div' | 'span' | 'li';
10
+ as?: 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
11
11
  /**
12
12
  * The HTML className attribute.
13
13
  *
package/dist/types/internal/style-maps.partial.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { SerializedStyles } from '@emotion/react';
2
2
  /**
3
3
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
- * @codegen <<SignedSource::1e44ed8fcd11d2f3864437fa047845a9>>
4
+ * @codegen <<SignedSource::fc517b480964965a9d7e6e5c8d921c19>>
5
5
  * @codegenId dimensions
6
6
  * @codegenCommand yarn codegen-styles
7
7
  * @codegenParams ["dimensions"]
8
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
8
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
9
9
  */
10
10
  export declare const dimensionMap: {
11
11
  readonly '100%': "100%";
@@ -23,15 +23,25 @@ export declare type MinWidth = keyof typeof dimensionMap;
23
23
  export declare type MaxWidth = keyof typeof dimensionMap;
24
24
  export declare type MinHeight = keyof typeof dimensionMap;
25
25
  export declare type MaxHeight = keyof typeof dimensionMap;
26
+ export declare type Top = keyof typeof dimensionMap;
27
+ export declare type Left = keyof typeof dimensionMap;
28
+ export declare type Bottom = keyof typeof dimensionMap;
29
+ export declare type Right = keyof typeof dimensionMap;
30
+ export declare type BlockSize = keyof typeof dimensionMap;
31
+ export declare type InlineSize = keyof typeof dimensionMap;
32
+ export declare type MaxBlockSize = keyof typeof dimensionMap;
33
+ export declare type MaxInlineSize = keyof typeof dimensionMap;
34
+ export declare type MinBlockSize = keyof typeof dimensionMap;
35
+ export declare type MinInlineSize = keyof typeof dimensionMap;
26
36
  /**
27
37
  * @codegenEnd
28
38
  */
29
39
  /**
30
40
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
31
- * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
41
+ * @codegen <<SignedSource::8ce817b8abf862e7945a9c9792a1255e>>
32
42
  * @codegenId spacing
33
43
  * @codegenCommand yarn codegen-styles
34
- * @codegenParams ["padding", "space"]
44
+ * @codegenParams ["padding", "space", "inset"]
35
45
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
36
46
  */
37
47
  export declare const paddingMap: {
@@ -52,11 +62,15 @@ export declare const paddingMap: {
52
62
  };
53
63
  export declare type Padding = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
54
64
  export declare type PaddingBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
55
- export declare type PaddingBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
56
65
  export declare type PaddingBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
66
+ export declare type PaddingBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
67
+ export declare type PaddingBottom = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
57
68
  export declare type PaddingInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
58
- export declare type PaddingInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
59
69
  export declare type PaddingInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
70
+ export declare type PaddingInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
71
+ export declare type PaddingLeft = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
72
+ export declare type PaddingRight = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
73
+ export declare type PaddingTop = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
60
74
  export declare const spaceMap: {
61
75
  readonly 'space.0': "var(--ds-space-0)";
62
76
  readonly 'space.025': "var(--ds-space-025)";
@@ -75,6 +89,30 @@ export declare const spaceMap: {
75
89
  };
76
90
  export declare type Gap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
77
91
  export declare type RowGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
92
+ export declare type ColumnGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
93
+ export declare const insetMap: {
94
+ readonly 'space.0': "var(--ds-space-0)";
95
+ readonly 'space.025': "var(--ds-space-025)";
96
+ readonly 'space.050': "var(--ds-space-050)";
97
+ readonly 'space.075': "var(--ds-space-075)";
98
+ readonly 'space.100': "var(--ds-space-100)";
99
+ readonly 'space.150': "var(--ds-space-150)";
100
+ readonly 'space.200': "var(--ds-space-200)";
101
+ readonly 'space.250': "var(--ds-space-250)";
102
+ readonly 'space.300': "var(--ds-space-300)";
103
+ readonly 'space.400': "var(--ds-space-400)";
104
+ readonly 'space.500': "var(--ds-space-500)";
105
+ readonly 'space.600': "var(--ds-space-600)";
106
+ readonly 'space.800': "var(--ds-space-800)";
107
+ readonly 'space.1000': "var(--ds-space-1000)";
108
+ };
109
+ export declare type Inset = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
110
+ export declare type InsetBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
111
+ export declare type InsetBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
112
+ export declare type InsetBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
113
+ export declare type InsetInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
114
+ export declare type InsetInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
115
+ export declare type InsetInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
78
116
  /**
79
117
  * @codegenEnd
80
118
  */
@@ -265,14 +303,14 @@ export declare type TextColor = keyof typeof textColorMap;
265
303
  */
266
304
  /**
267
305
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
268
- * @codegen <<SignedSource::8ab54fc337c6a02f403dad852dd626a0>>
306
+ * @codegen <<SignedSource::8838ca696c1fa533db0eb127be15d81e>>
269
307
  * @codegenId misc
270
308
  * @codegenCommand yarn codegen-styles
271
309
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
272
310
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
273
311
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
274
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::89d19ca3937408eb7de5d72f4476a0f9>>
275
- * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::e6e390f80609060bfd12a55a489d5f54>>
312
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::9e8ad113b10e9429c514c69bd362f479>>
313
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
276
314
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
277
315
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
278
316
  * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
@@ -294,7 +332,14 @@ export declare const borderStyleMap: {
294
332
  readonly solid: "solid";
295
333
  };
296
334
  export declare type BorderStyle = keyof typeof borderStyleMap;
297
- export declare type Display = 'flex' | 'block' | 'inline' | 'inline-block' | 'inline-flex';
335
+ export declare const displayMap: {
336
+ readonly flex: "flex";
337
+ readonly block: "block";
338
+ readonly inline: "inline";
339
+ readonly inlineBlock: "inline-block";
340
+ readonly inlineFlex: "inline-flex";
341
+ };
342
+ export declare type Display = keyof typeof displayMap;
298
343
  export declare const flexDirectionMap: {
299
344
  readonly row: "row";
300
345
  readonly column: "column";
@@ -380,21 +425,39 @@ export declare type BorderRadius = keyof typeof borderRadiusMap;
380
425
  export declare type TokenisedProps = {
381
426
  alignSelf?: AlignSelf;
382
427
  backgroundColor?: BackgroundColor;
428
+ blockSize?: BlockSize;
383
429
  borderColor?: BorderColor;
384
430
  borderRadius?: BorderRadius;
385
431
  borderStyle?: BorderStyle;
386
432
  borderWidth?: BorderWidth;
433
+ bottom?: Bottom;
434
+ boxShadow?: Shadow;
387
435
  color?: TextColor;
436
+ columnGap?: ColumnGap;
388
437
  display?: Display;
389
438
  flex?: Flex;
390
439
  flexDirection?: FlexDirection;
391
440
  flexGrow?: FlexGrow;
392
441
  flexShrink?: FlexShrink;
442
+ gap?: Gap;
393
443
  height?: Height;
444
+ inlineSize?: InlineSize;
445
+ inset?: Inset;
446
+ insetBlock?: InsetBlock;
447
+ insetBlockEnd?: InsetBlockEnd;
448
+ insetBlockStart?: InsetBlockStart;
449
+ insetInline?: InsetInline;
450
+ insetInlineEnd?: InsetInlineEnd;
451
+ insetInlineStart?: InsetInlineStart;
394
452
  layer?: Layer;
453
+ left?: Left;
454
+ maxBlockSize?: MaxBlockSize;
395
455
  maxHeight?: MaxHeight;
456
+ maxInlineSize?: MaxInlineSize;
396
457
  maxWidth?: MaxWidth;
458
+ minBlockSize?: MinBlockSize;
397
459
  minHeight?: MinHeight;
460
+ minInlineSize?: MinInlineSize;
398
461
  minWidth?: MinWidth;
399
462
  overflow?: Overflow;
400
463
  overflowBlock?: OverflowBlock;
@@ -407,10 +470,12 @@ export declare type TokenisedProps = {
407
470
  paddingInlineEnd?: PaddingInlineEnd;
408
471
  paddingInlineStart?: PaddingInlineStart;
409
472
  position?: Position;
410
- shadow?: Shadow;
473
+ right?: Right;
474
+ rowGap?: RowGap;
475
+ top?: Top;
411
476
  width?: Width;
412
477
  };
413
- declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap"];
478
+ declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
414
479
  declare type SpacingProperty = typeof spacingProperties[number];
415
480
  declare type SpacingToken = keyof typeof paddingMap;
416
481
  declare type BackgroundColorToken = keyof typeof backgroundColorMap;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.6",
3
+ "version": "0.8.8",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
package/report.api.md CHANGED
@@ -183,7 +183,20 @@ type BaseBoxProps<T extends ElementType = 'div'> = Omit<
183
183
 
184
184
  // @public (undocumented)
185
185
  type BaseBoxPropsFoundation<T extends ElementType> = {
186
- as?: 'div' | 'li' | 'span';
186
+ as?:
187
+ | 'article'
188
+ | 'aside'
189
+ | 'dialog'
190
+ | 'div'
191
+ | 'footer'
192
+ | 'header'
193
+ | 'li'
194
+ | 'main'
195
+ | 'nav'
196
+ | 'ol'
197
+ | 'section'
198
+ | 'span'
199
+ | 'ul';
187
200
  className?: string;
188
201
  children?: ReactNode;
189
202
  backgroundColor?: BackgroundColor;
@@ -203,6 +216,9 @@ type BasePrimitiveProps = {
203
216
  style?: CSSProperties;
204
217
  };
205
218
 
219
+ // @public (undocumented)
220
+ type BlockSize = keyof typeof dimensionMap;
221
+
206
222
  // @public (undocumented)
207
223
  type BorderColor = keyof typeof borderColorMap;
208
224
 
@@ -264,6 +280,9 @@ const borderWidthMap: {
264
280
  readonly 'width.100': 'var(--ds-width-100)';
265
281
  };
266
282
 
283
+ // @public (undocumented)
284
+ type Bottom = keyof typeof dimensionMap;
285
+
267
286
  // @public
268
287
  export const Box: BoxComponent;
269
288
 
@@ -296,6 +315,23 @@ type BoxXCSS = {
296
315
  readonly styles: BoxStyles;
297
316
  };
298
317
 
318
+ // @public (undocumented)
319
+ type ColumnGap =
320
+ | 'space.0'
321
+ | 'space.025'
322
+ | 'space.050'
323
+ | 'space.075'
324
+ | 'space.100'
325
+ | 'space.1000'
326
+ | 'space.150'
327
+ | 'space.200'
328
+ | 'space.250'
329
+ | 'space.300'
330
+ | 'space.400'
331
+ | 'space.500'
332
+ | 'space.600'
333
+ | 'space.800';
334
+
299
335
  // @public (undocumented)
300
336
  type CSSPseudos = {
301
337
  [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
@@ -314,7 +350,16 @@ const dimensionMap: {
314
350
  };
315
351
 
316
352
  // @public (undocumented)
317
- type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
353
+ type Display = keyof typeof displayMap;
354
+
355
+ // @public (undocumented)
356
+ const displayMap: {
357
+ readonly flex: 'flex';
358
+ readonly block: 'block';
359
+ readonly inline: 'inline';
360
+ readonly inlineBlock: 'inline-block';
361
+ readonly inlineFlex: 'inline-flex';
362
+ };
318
363
 
319
364
  // @public (undocumented)
320
365
  type Flex = keyof typeof flexMap;
@@ -414,6 +459,9 @@ export interface InlineProps<T extends ElementType = 'div'> {
414
459
  testId?: string;
415
460
  }
416
461
 
462
+ // @public (undocumented)
463
+ type InlineSize = keyof typeof dimensionMap;
464
+
417
465
  // @public (undocumented)
418
466
  type InlineStyles = SerializedStyles & {
419
467
  [inlineTag]: true;
@@ -422,6 +470,125 @@ type InlineStyles = SerializedStyles & {
422
470
  // @public (undocumented)
423
471
  const inlineTag: unique symbol;
424
472
 
473
+ // @public (undocumented)
474
+ type Inset =
475
+ | 'space.0'
476
+ | 'space.025'
477
+ | 'space.050'
478
+ | 'space.075'
479
+ | 'space.100'
480
+ | 'space.1000'
481
+ | 'space.150'
482
+ | 'space.200'
483
+ | 'space.250'
484
+ | 'space.300'
485
+ | 'space.400'
486
+ | 'space.500'
487
+ | 'space.600'
488
+ | 'space.800';
489
+
490
+ // @public (undocumented)
491
+ type InsetBlock =
492
+ | 'space.0'
493
+ | 'space.025'
494
+ | 'space.050'
495
+ | 'space.075'
496
+ | 'space.100'
497
+ | 'space.1000'
498
+ | 'space.150'
499
+ | 'space.200'
500
+ | 'space.250'
501
+ | 'space.300'
502
+ | 'space.400'
503
+ | 'space.500'
504
+ | 'space.600'
505
+ | 'space.800';
506
+
507
+ // @public (undocumented)
508
+ type InsetBlockEnd =
509
+ | 'space.0'
510
+ | 'space.025'
511
+ | 'space.050'
512
+ | 'space.075'
513
+ | 'space.100'
514
+ | 'space.1000'
515
+ | 'space.150'
516
+ | 'space.200'
517
+ | 'space.250'
518
+ | 'space.300'
519
+ | 'space.400'
520
+ | 'space.500'
521
+ | 'space.600'
522
+ | 'space.800';
523
+
524
+ // @public (undocumented)
525
+ type InsetBlockStart =
526
+ | 'space.0'
527
+ | 'space.025'
528
+ | 'space.050'
529
+ | 'space.075'
530
+ | 'space.100'
531
+ | 'space.1000'
532
+ | 'space.150'
533
+ | 'space.200'
534
+ | 'space.250'
535
+ | 'space.300'
536
+ | 'space.400'
537
+ | 'space.500'
538
+ | 'space.600'
539
+ | 'space.800';
540
+
541
+ // @public (undocumented)
542
+ type InsetInline =
543
+ | 'space.0'
544
+ | 'space.025'
545
+ | 'space.050'
546
+ | 'space.075'
547
+ | 'space.100'
548
+ | 'space.1000'
549
+ | 'space.150'
550
+ | 'space.200'
551
+ | 'space.250'
552
+ | 'space.300'
553
+ | 'space.400'
554
+ | 'space.500'
555
+ | 'space.600'
556
+ | 'space.800';
557
+
558
+ // @public (undocumented)
559
+ type InsetInlineEnd =
560
+ | 'space.0'
561
+ | 'space.025'
562
+ | 'space.050'
563
+ | 'space.075'
564
+ | 'space.100'
565
+ | 'space.1000'
566
+ | 'space.150'
567
+ | 'space.200'
568
+ | 'space.250'
569
+ | 'space.300'
570
+ | 'space.400'
571
+ | 'space.500'
572
+ | 'space.600'
573
+ | 'space.800';
574
+
575
+ // @public (undocumented)
576
+ type InsetInlineStart =
577
+ | 'space.0'
578
+ | 'space.025'
579
+ | 'space.050'
580
+ | 'space.075'
581
+ | 'space.100'
582
+ | 'space.1000'
583
+ | 'space.150'
584
+ | 'space.200'
585
+ | 'space.250'
586
+ | 'space.300'
587
+ | 'space.400'
588
+ | 'space.500'
589
+ | 'space.600'
590
+ | 'space.800';
591
+
425
592
  // @public (undocumented)
426
593
  type Layer = keyof typeof layerMap;
427
594
 
@@ -438,15 +605,30 @@ const layerMap: {
438
605
  readonly tooltip: 800;
439
606
  };
440
607
 
608
+ // @public (undocumented)
609
+ type Left = keyof typeof dimensionMap;
610
+
611
+ // @public (undocumented)
612
+ type MaxBlockSize = keyof typeof dimensionMap;
613
+
441
614
  // @public (undocumented)
442
615
  type MaxHeight = keyof typeof dimensionMap;
443
616
 
617
+ // @public (undocumented)
618
+ type MaxInlineSize = keyof typeof dimensionMap;
619
+
444
620
  // @public (undocumented)
445
621
  type MaxWidth = keyof typeof dimensionMap;
446
622
 
623
+ // @public (undocumented)
624
+ type MinBlockSize = keyof typeof dimensionMap;
625
+
447
626
  // @public (undocumented)
448
627
  type MinHeight = keyof typeof dimensionMap;
449
628
 
629
+ // @public (undocumented)
630
+ type MinInlineSize = keyof typeof dimensionMap;
631
+
450
632
  // @public (undocumented)
451
633
  type MinWidth = keyof typeof dimensionMap;
452
634
 
@@ -612,6 +794,9 @@ type PublicBoxPropsBase = {
612
794
  xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
613
795
  };
614
796
 
797
+ // @public (undocumented)
798
+ type Right = keyof typeof dimensionMap;
799
+
615
800
  // @public (undocumented)
616
801
  type RowGap =
617
802
  | 'space.0'
@@ -731,21 +916,39 @@ const textColorMap: {
731
916
  type TokenisedProps = {
732
917
  alignSelf?: AlignSelf;
733
918
  backgroundColor?: BackgroundColor;
919
+ blockSize?: BlockSize;
734
920
  borderColor?: BorderColor;
735
921
  borderRadius?: BorderRadius;
736
922
  borderStyle?: BorderStyle;
737
923
  borderWidth?: BorderWidth;
924
+ bottom?: Bottom;
925
+ boxShadow?: Shadow;
738
926
  color?: TextColor;
927
+ columnGap?: ColumnGap;
739
928
  display?: Display;
740
929
  flex?: Flex;
741
930
  flexDirection?: FlexDirection;
742
931
  flexGrow?: FlexGrow;
743
932
  flexShrink?: FlexShrink;
933
+ gap?: Gap;
744
934
  height?: Height;
935
+ inlineSize?: InlineSize;
936
+ inset?: Inset;
937
+ insetBlock?: InsetBlock;
938
+ insetBlockEnd?: InsetBlockEnd;
939
+ insetBlockStart?: InsetBlockStart;
940
+ insetInline?: InsetInline;
941
+ insetInlineEnd?: InsetInlineEnd;
942
+ insetInlineStart?: InsetInlineStart;
745
943
  layer?: Layer;
944
+ left?: Left;
945
+ maxBlockSize?: MaxBlockSize;
746
946
  maxHeight?: MaxHeight;
947
+ maxInlineSize?: MaxInlineSize;
747
948
  maxWidth?: MaxWidth;
949
+ minBlockSize?: MinBlockSize;
748
950
  minHeight?: MinHeight;
951
+ minInlineSize?: MinInlineSize;
749
952
  minWidth?: MinWidth;
750
953
  overflow?: Overflow;
751
954
  overflowBlock?: OverflowBlock;
@@ -758,10 +961,15 @@ type TokenisedProps = {
758
961
  paddingInlineEnd?: PaddingInlineEnd;
759
962
  paddingInlineStart?: PaddingInlineStart;
760
963
  position?: Position;
761
- shadow?: Shadow;
964
+ right?: Right;
965
+ rowGap?: RowGap;
966
+ top?: Top;
762
967
  width?: Width;
763
968
  };
764
969
 
970
+ // @public (undocumented)
971
+ type Top = keyof typeof dimensionMap;
972
+
765
973
  // @public (undocumented)
766
974
  const uniqueSymbol: unique symbol;
767
975
 
package/scripts/codegen-file-templates/dimensions.tsx CHANGED
@@ -15,3 +15,13 @@ export type MinWidth = keyof typeof dimensionMap;
15
15
  export type MaxWidth = keyof typeof dimensionMap;
16
16
  export type MinHeight = keyof typeof dimensionMap;
17
17
  export type MaxHeight = keyof typeof dimensionMap;
18
+ export type Top = keyof typeof dimensionMap;
19
+ export type Left = keyof typeof dimensionMap;
20
+ export type Bottom = keyof typeof dimensionMap;
21
+ export type Right = keyof typeof dimensionMap;
22
+ export type BlockSize = keyof typeof dimensionMap;
23
+ export type InlineSize = keyof typeof dimensionMap;
24
+ export type MaxBlockSize = keyof typeof dimensionMap;
25
+ export type MaxInlineSize = keyof typeof dimensionMap;
26
+ export type MinBlockSize = keyof typeof dimensionMap;
27
+ export type MinInlineSize = keyof typeof dimensionMap;
package/scripts/codegen-file-templates/display.tsx CHANGED
@@ -1,6 +1,9 @@
1
- export type Display =
2
- | 'flex'
3
- | 'block'
4
- | 'inline'
5
- | 'inline-block'
6
- | 'inline-flex';
1
+ export const displayMap = {
2
+ flex: 'flex',
3
+ block: 'block',
4
+ inline: 'inline',
5
+ inlineBlock: 'inline-block',
6
+ inlineFlex: 'inline-flex',
7
+ } as const;
8
+
9
+ export type Display = keyof typeof displayMap;
package/scripts/codegen-styles.tsx CHANGED
@@ -45,7 +45,7 @@ const sourceFns = [
45
45
  dependencies: templateFiles.filter(v => v.includes('dimensions')),
46
46
  },
47
47
  ),
48
- // padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, gap, rowGap
48
+ // padding*, gap*, inset*
49
49
  () =>
50
50
  createPartialSignedArtifact(
51
51
  options => options.map(createSpacingStylesFromTemplate).join('\n'),
package/scripts/spacing-codegen-template.tsx CHANGED
@@ -16,15 +16,30 @@ const spacingProperties: Record<
16
16
  cssProperties: [
17
17
  'padding',
18
18
  'paddingBlock',
19
- 'paddingBlockStart',
20
19
  'paddingBlockEnd',
20
+ 'paddingBlockStart',
21
+ 'paddingBottom',
21
22
  'paddingInline',
22
- 'paddingInlineStart',
23
23
  'paddingInlineEnd',
24
+ 'paddingInlineStart',
25
+ 'paddingLeft',
26
+ 'paddingRight',
27
+ 'paddingTop',
24
28
  ],
25
29
  },
26
30
  space: {
27
- cssProperties: ['gap', 'rowGap'],
31
+ cssProperties: ['gap', 'rowGap', 'columnGap'],
32
+ },
33
+ inset: {
34
+ cssProperties: [
35
+ 'inset',
36
+ 'insetBlock',
37
+ 'insetBlockEnd',
38
+ 'insetBlockStart',
39
+ 'insetInline',
40
+ 'insetInlineEnd',
41
+ 'insetInlineStart',
42
+ ],
28
43
  },
29
44
  } as const;
30
45
 
package/tmp/api-report-tmp.d.ts CHANGED
@@ -167,7 +167,7 @@ type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef
167
167
 
168
168
  // @public (undocumented)
169
169
  type BaseBoxPropsFoundation<T extends ElementType> = {
170
- as?: 'div' | 'li' | 'span';
170
+ as?: 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
171
171
  className?: string;
172
172
  children?: ReactNode;
173
173
  backgroundColor?: BackgroundColor;
@@ -187,6 +187,9 @@ type BasePrimitiveProps = {
187
187
  style?: CSSProperties;
188
188
  };
189
189
 
190
+ // @public (undocumented)
191
+ type BlockSize = keyof typeof dimensionMap;
192
+
190
193
  // @public (undocumented)
191
194
  type BorderColor = keyof typeof borderColorMap;
192
195
 
@@ -248,6 +251,9 @@ const borderWidthMap: {
248
251
  readonly 'width.100': "var(--ds-width-100)";
249
252
  };
250
253
 
254
+ // @public (undocumented)
255
+ type Bottom = keyof typeof dimensionMap;
256
+
251
257
  // @public
252
258
  export const Box: BoxComponent;
253
259
 
@@ -271,6 +277,9 @@ type BoxXCSS = {
271
277
  readonly styles: BoxStyles;
272
278
  };
273
279
 
280
+ // @public (undocumented)
281
+ type ColumnGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
282
+
274
283
  // @public (undocumented)
275
284
  type CSSPseudos = {
276
285
  [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
@@ -289,7 +298,16 @@ const dimensionMap: {
289
298
  };
290
299
 
291
300
  // @public (undocumented)
292
- type Display = 'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex';
301
+ type Display = keyof typeof displayMap;
302
+
303
+ // @public (undocumented)
304
+ const displayMap: {
305
+ readonly flex: "flex";
306
+ readonly block: "block";
307
+ readonly inline: "inline";
308
+ readonly inlineBlock: "inline-block";
309
+ readonly inlineFlex: "inline-flex";
310
+ };
293
311
 
294
312
  // @public (undocumented)
295
313
  type Flex = keyof typeof flexMap;
@@ -357,6 +375,9 @@ export interface InlineProps<T extends ElementType = 'div'> {
357
375
  testId?: string;
358
376
  }
359
377
 
378
+ // @public (undocumented)
379
+ type InlineSize = keyof typeof dimensionMap;
380
+
360
381
  // @public (undocumented)
361
382
  type InlineStyles = SerializedStyles & {
362
383
  [inlineTag]: true;
@@ -365,6 +386,27 @@ type InlineStyles = SerializedStyles & {
365
386
  // @public (undocumented)
366
387
  const inlineTag: unique symbol;
367
388
 
389
+ // @public (undocumented)
390
+ type Inset = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
391
+
392
+ // @public (undocumented)
393
+ type InsetBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
394
+
395
+ // @public (undocumented)
396
+ type InsetBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
397
+
398
+ // @public (undocumented)
399
+ type InsetBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
400
+
401
+ // @public (undocumented)
402
+ type InsetInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
403
+
404
+ // @public (undocumented)
405
+ type InsetInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
406
+
407
+ // @public (undocumented)
408
+ type InsetInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
409
+
368
410
  // @public (undocumented)
369
411
  type Layer = keyof typeof layerMap;
370
412
 
@@ -381,15 +423,30 @@ const layerMap: {
381
423
  readonly tooltip: 800;
382
424
  };
383
425
 
426
+ // @public (undocumented)
427
+ type Left = keyof typeof dimensionMap;
428
+
429
+ // @public (undocumented)
430
+ type MaxBlockSize = keyof typeof dimensionMap;
431
+
384
432
  // @public (undocumented)
385
433
  type MaxHeight = keyof typeof dimensionMap;
386
434
 
435
+ // @public (undocumented)
436
+ type MaxInlineSize = keyof typeof dimensionMap;
437
+
387
438
  // @public (undocumented)
388
439
  type MaxWidth = keyof typeof dimensionMap;
389
440
 
441
+ // @public (undocumented)
442
+ type MinBlockSize = keyof typeof dimensionMap;
443
+
390
444
  // @public (undocumented)
391
445
  type MinHeight = keyof typeof dimensionMap;
392
446
 
447
+ // @public (undocumented)
448
+ type MinInlineSize = keyof typeof dimensionMap;
449
+
393
450
  // @public (undocumented)
394
451
  type MinWidth = keyof typeof dimensionMap;
395
452
 
@@ -457,6 +514,9 @@ type PublicBoxPropsBase = {
457
514
  xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
458
515
  };
459
516
 
517
+ // @public (undocumented)
518
+ type Right = keyof typeof dimensionMap;
519
+
460
520
  // @public (undocumented)
461
521
  type RowGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
462
522
 
@@ -542,21 +602,39 @@ const textColorMap: {
542
602
  type TokenisedProps = {
543
603
  alignSelf?: AlignSelf;
544
604
  backgroundColor?: BackgroundColor;
605
+ blockSize?: BlockSize;
545
606
  borderColor?: BorderColor;
546
607
  borderRadius?: BorderRadius;
547
608
  borderStyle?: BorderStyle;
548
609
  borderWidth?: BorderWidth;
610
+ bottom?: Bottom;
611
+ boxShadow?: Shadow;
549
612
  color?: TextColor;
613
+ columnGap?: ColumnGap;
550
614
  display?: Display;
551
615
  flex?: Flex;
552
616
  flexDirection?: FlexDirection;
553
617
  flexGrow?: FlexGrow;
554
618
  flexShrink?: FlexShrink;
619
+ gap?: Gap;
555
620
  height?: Height;
621
+ inlineSize?: InlineSize;
622
+ inset?: Inset;
623
+ insetBlock?: InsetBlock;
624
+ insetBlockEnd?: InsetBlockEnd;
625
+ insetBlockStart?: InsetBlockStart;
626
+ insetInline?: InsetInline;
627
+ insetInlineEnd?: InsetInlineEnd;
628
+ insetInlineStart?: InsetInlineStart;
556
629
  layer?: Layer;
630
+ left?: Left;
631
+ maxBlockSize?: MaxBlockSize;
557
632
  maxHeight?: MaxHeight;
633
+ maxInlineSize?: MaxInlineSize;
558
634
  maxWidth?: MaxWidth;
635
+ minBlockSize?: MinBlockSize;
559
636
  minHeight?: MinHeight;
637
+ minInlineSize?: MinInlineSize;
560
638
  minWidth?: MinWidth;
561
639
  overflow?: Overflow;
562
640
  overflowBlock?: OverflowBlock;
@@ -569,10 +647,15 @@ type TokenisedProps = {
569
647
  paddingInlineEnd?: PaddingInlineEnd;
570
648
  paddingInlineStart?: PaddingInlineStart;
571
649
  position?: Position;
572
- shadow?: Shadow;
650
+ right?: Right;
651
+ rowGap?: RowGap;
652
+ top?: Top;
573
653
  width?: Width;
574
654
  };
575
655
 
656
+ // @public (undocumented)
657
+ type Top = keyof typeof dimensionMap;
658
+
576
659
  // @public (undocumented)
577
660
  const uniqueSymbol: unique symbol;
578
661