@atlaskit/primitives 0.8.7 → 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 (18) hide show
  1. package/CHANGELOG.md +6 -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/internal/style-maps.partial.d.ts +77 -12
  12. package/package.json +1 -1
  13. package/report.api.md +197 -2
  14. package/scripts/codegen-file-templates/dimensions.tsx +10 -0
  15. package/scripts/codegen-file-templates/display.tsx +9 -6
  16. package/scripts/codegen-styles.tsx +1 -1
  17. package/scripts/spacing-codegen-template.tsx +18 -3
  18. package/tmp/api-report-tmp.d.ts +85 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
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
+
3
9
  ## 0.8.7
4
10
 
5
11
  ### 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.7",
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.7",
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.7",
3
+ "version": "0.8.8",
4
4
  "sideEffects": false
5
5
  }
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.7",
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
@@ -216,6 +216,9 @@ type BasePrimitiveProps = {
216
216
  style?: CSSProperties;
217
217
  };
218
218
 
219
+ // @public (undocumented)
220
+ type BlockSize = keyof typeof dimensionMap;
221
+
219
222
  // @public (undocumented)
220
223
  type BorderColor = keyof typeof borderColorMap;
221
224
 
@@ -277,6 +280,9 @@ const borderWidthMap: {
277
280
  readonly 'width.100': 'var(--ds-width-100)';
278
281
  };
279
282
 
283
+ // @public (undocumented)
284
+ type Bottom = keyof typeof dimensionMap;
285
+
280
286
  // @public
281
287
  export const Box: BoxComponent;
282
288
 
@@ -309,6 +315,23 @@ type BoxXCSS = {
309
315
  readonly styles: BoxStyles;
310
316
  };
311
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
+
312
335
  // @public (undocumented)
313
336
  type CSSPseudos = {
314
337
  [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
@@ -327,7 +350,16 @@ const dimensionMap: {
327
350
  };
328
351
 
329
352
  // @public (undocumented)
330
- 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
+ };
331
363
 
332
364
  // @public (undocumented)
333
365
  type Flex = keyof typeof flexMap;
@@ -427,6 +459,9 @@ export interface InlineProps<T extends ElementType = 'div'> {
427
459
  testId?: string;
428
460
  }
429
461
 
462
+ // @public (undocumented)
463
+ type InlineSize = keyof typeof dimensionMap;
464
+
430
465
  // @public (undocumented)
431
466
  type InlineStyles = SerializedStyles & {
432
467
  [inlineTag]: true;
@@ -435,6 +470,125 @@ type InlineStyles = SerializedStyles & {
435
470
  // @public (undocumented)
436
471
  const inlineTag: unique symbol;
437
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
+
438
592
  // @public (undocumented)
439
593
  type Layer = keyof typeof layerMap;
440
594
 
@@ -451,15 +605,30 @@ const layerMap: {
451
605
  readonly tooltip: 800;
452
606
  };
453
607
 
608
+ // @public (undocumented)
609
+ type Left = keyof typeof dimensionMap;
610
+
611
+ // @public (undocumented)
612
+ type MaxBlockSize = keyof typeof dimensionMap;
613
+
454
614
  // @public (undocumented)
455
615
  type MaxHeight = keyof typeof dimensionMap;
456
616
 
617
+ // @public (undocumented)
618
+ type MaxInlineSize = keyof typeof dimensionMap;
619
+
457
620
  // @public (undocumented)
458
621
  type MaxWidth = keyof typeof dimensionMap;
459
622
 
623
+ // @public (undocumented)
624
+ type MinBlockSize = keyof typeof dimensionMap;
625
+
460
626
  // @public (undocumented)
461
627
  type MinHeight = keyof typeof dimensionMap;
462
628
 
629
+ // @public (undocumented)
630
+ type MinInlineSize = keyof typeof dimensionMap;
631
+
463
632
  // @public (undocumented)
464
633
  type MinWidth = keyof typeof dimensionMap;
465
634
 
@@ -625,6 +794,9 @@ type PublicBoxPropsBase = {
625
794
  xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
626
795
  };
627
796
 
797
+ // @public (undocumented)
798
+ type Right = keyof typeof dimensionMap;
799
+
628
800
  // @public (undocumented)
629
801
  type RowGap =
630
802
  | 'space.0'
@@ -744,21 +916,39 @@ const textColorMap: {
744
916
  type TokenisedProps = {
745
917
  alignSelf?: AlignSelf;
746
918
  backgroundColor?: BackgroundColor;
919
+ blockSize?: BlockSize;
747
920
  borderColor?: BorderColor;
748
921
  borderRadius?: BorderRadius;
749
922
  borderStyle?: BorderStyle;
750
923
  borderWidth?: BorderWidth;
924
+ bottom?: Bottom;
925
+ boxShadow?: Shadow;
751
926
  color?: TextColor;
927
+ columnGap?: ColumnGap;
752
928
  display?: Display;
753
929
  flex?: Flex;
754
930
  flexDirection?: FlexDirection;
755
931
  flexGrow?: FlexGrow;
756
932
  flexShrink?: FlexShrink;
933
+ gap?: Gap;
757
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;
758
943
  layer?: Layer;
944
+ left?: Left;
945
+ maxBlockSize?: MaxBlockSize;
759
946
  maxHeight?: MaxHeight;
947
+ maxInlineSize?: MaxInlineSize;
760
948
  maxWidth?: MaxWidth;
949
+ minBlockSize?: MinBlockSize;
761
950
  minHeight?: MinHeight;
951
+ minInlineSize?: MinInlineSize;
762
952
  minWidth?: MinWidth;
763
953
  overflow?: Overflow;
764
954
  overflowBlock?: OverflowBlock;
@@ -771,10 +961,15 @@ type TokenisedProps = {
771
961
  paddingInlineEnd?: PaddingInlineEnd;
772
962
  paddingInlineStart?: PaddingInlineStart;
773
963
  position?: Position;
774
- shadow?: Shadow;
964
+ right?: Right;
965
+ rowGap?: RowGap;
966
+ top?: Top;
775
967
  width?: Width;
776
968
  };
777
969
 
970
+ // @public (undocumented)
971
+ type Top = keyof typeof dimensionMap;
972
+
778
973
  // @public (undocumented)
779
974
  const uniqueSymbol: unique symbol;
780
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
@@ -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