@atlaskit/ds-explorations 1.6.0 → 1.6.2

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 (36) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/components/box.partial.js +81 -4
  3. package/dist/cjs/components/inline.partial.js +3 -0
  4. package/dist/cjs/components/text.partial.js +1 -1
  5. package/dist/cjs/constants.js +18 -0
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/components/box.partial.js +79 -3
  8. package/dist/es2019/components/inline.partial.js +3 -0
  9. package/dist/es2019/components/text.partial.js +1 -1
  10. package/dist/es2019/constants.js +11 -0
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/components/box.partial.js +80 -4
  13. package/dist/esm/components/inline.partial.js +3 -0
  14. package/dist/esm/components/text.partial.js +1 -1
  15. package/dist/esm/constants.js +11 -0
  16. package/dist/esm/version.json +1 -1
  17. package/dist/types/components/box.partial.d.ts +64 -43
  18. package/dist/types/components/inline.partial.d.ts +1 -0
  19. package/dist/types/components/text.partial.d.ts +14 -14
  20. package/dist/types/constants.d.ts +12 -0
  21. package/examples/01-box.tsx +54 -0
  22. package/package.json +2 -2
  23. package/report.api.md +89 -56
  24. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +3 -3
  25. package/scripts/codegen-styles.tsx +19 -0
  26. package/scripts/color-codegen-template.tsx +25 -14
  27. package/scripts/misc-codegen-template.tsx +43 -0
  28. package/scripts/utils.tsx +23 -1
  29. package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-layer-should-match-snapshot-1-snap.png +3 -0
  30. package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-shadow-should-match-snapshot-1-snap.png +3 -0
  31. package/src/components/__tests__/visual-regression/box-snapshot-test.tsx +2 -0
  32. package/src/components/box.partial.tsx +76 -7
  33. package/src/components/inline.partial.tsx +1 -0
  34. package/src/components/text.partial.tsx +2 -2
  35. package/src/constants.tsx +13 -0
  36. package/tmp/api-report-tmp.d.ts +89 -56
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 1.6.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.6.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`f7b2dbd6eba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7b2dbd6eba) - Add fontWeight 600 to Text. Add justifyContent spaceBetween to Inline. Add overflow hidden, position fixed, and start/end flex values to Box. Add shadow and layer props to Box.
14
+
3
15
  ## 1.6.0
4
16
 
5
17
  ### Minor Changes
@@ -15,9 +15,11 @@ var _react = require("react");
15
15
 
16
16
  var _react2 = require("@emotion/react");
17
17
 
18
+ var _constants = require("../constants");
19
+
18
20
  var _surfaceProvider = require("./surface-provider");
19
21
 
20
- var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
22
+ var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "shadow", "layer", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
21
23
 
22
24
  /**
23
25
  * __Box__
@@ -41,6 +43,8 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
41
43
  borderStyle = _ref.borderStyle,
42
44
  borderWidth = _ref.borderWidth,
43
45
  borderRadius = _ref.borderRadius,
46
+ shadow = _ref.shadow,
47
+ layer = _ref.layer,
44
48
  padding = _ref.padding,
45
49
  paddingBlock = _ref.paddingBlock,
46
50
  paddingInline = _ref.paddingInline,
@@ -59,7 +63,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
59
63
 
60
64
  }, htmlAttributes, {
61
65
  className: className,
62
- css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
66
+ css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
63
67
  "data-testid": testId
64
68
  }), children);
65
69
  return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
@@ -138,6 +142,12 @@ var flexAlignItemsMap = {
138
142
  }),
139
143
  flexEnd: (0, _react2.css)({
140
144
  alignItems: 'flex-end'
145
+ }),
146
+ start: (0, _react2.css)({
147
+ alignItems: 'start'
148
+ }),
149
+ end: (0, _react2.css)({
150
+ alignItems: 'end'
141
151
  })
142
152
  };
143
153
  /**
@@ -153,6 +163,12 @@ var flexJustifyContentMap = {
153
163
  }),
154
164
  flexEnd: (0, _react2.css)({
155
165
  justifyContent: 'flex-end'
166
+ }),
167
+ start: (0, _react2.css)({
168
+ alignItems: 'start'
169
+ }),
170
+ end: (0, _react2.css)({
171
+ alignItems: 'end'
156
172
  })
157
173
  };
158
174
  var displayMap = {
@@ -173,6 +189,9 @@ var positionMap = {
173
189
  absolute: (0, _react2.css)({
174
190
  position: 'absolute'
175
191
  }),
192
+ fixed: (0, _react2.css)({
193
+ position: 'fixed'
194
+ }),
176
195
  relative: (0, _react2.css)({
177
196
  position: 'relative'
178
197
  }),
@@ -405,10 +424,10 @@ var paddingInlineMap = {
405
424
 
406
425
  /**
407
426
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
408
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
427
+ * @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
409
428
  * @codegenId colors
410
429
  * @codegenCommand yarn codegen-styles
411
- * @codegenParams ["border", "background"]
430
+ * @codegenParams ["border", "background", "shadow"]
412
431
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
413
432
  */
414
433
  var borderColorMap = {
@@ -532,6 +551,64 @@ var backgroundColorMap = {
532
551
  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
533
552
  })
534
553
  };
554
+ var shadowMap = {
555
+ raised: (0, _react2.css)({
556
+ boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
557
+ }),
558
+ overflow: (0, _react2.css)({
559
+ boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
560
+ }),
561
+ 'overflow.spread': (0, _react2.css)({
562
+ boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
563
+ }),
564
+ 'overflow.perimeter': (0, _react2.css)({
565
+ boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
566
+ }),
567
+ overlay: (0, _react2.css)({
568
+ boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
569
+ })
570
+ };
571
+
572
+ /**
573
+ * @codegenEnd
574
+ */
575
+
576
+ /**
577
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
578
+ * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
579
+ * @codegenId misc
580
+ * @codegenCommand yarn codegen-styles
581
+ * @codegenParams ["layer"]
582
+ */
583
+ var layerMap = {
584
+ card: (0, _react2.css)({
585
+ zIndex: _constants.LAYERS['card']
586
+ }),
587
+ navigation: (0, _react2.css)({
588
+ zIndex: _constants.LAYERS['navigation']
589
+ }),
590
+ dialog: (0, _react2.css)({
591
+ zIndex: _constants.LAYERS['dialog']
592
+ }),
593
+ layer: (0, _react2.css)({
594
+ zIndex: _constants.LAYERS['layer']
595
+ }),
596
+ blanket: (0, _react2.css)({
597
+ zIndex: _constants.LAYERS['blanket']
598
+ }),
599
+ modal: (0, _react2.css)({
600
+ zIndex: _constants.LAYERS['modal']
601
+ }),
602
+ flag: (0, _react2.css)({
603
+ zIndex: _constants.LAYERS['flag']
604
+ }),
605
+ spotlight: (0, _react2.css)({
606
+ zIndex: _constants.LAYERS['spotlight']
607
+ }),
608
+ tooltip: (0, _react2.css)({
609
+ zIndex: _constants.LAYERS['tooltip']
610
+ })
611
+ };
535
612
  /**
536
613
  * @codegenEnd
537
614
  */
@@ -48,6 +48,9 @@ var flexJustifyContentMap = {
48
48
  }),
49
49
  end: (0, _react2.css)({
50
50
  justifyContent: 'end'
51
+ }),
52
+ spaceBetween: (0, _react2.css)({
53
+ justifyContent: 'space-between'
51
54
  })
52
55
  };
53
56
  var flexWrapMap = {
@@ -191,7 +191,7 @@ var Text = function Text(_ref) {
191
191
  var _default = Text;
192
192
  /**
193
193
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
194
- * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
194
+ * @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
195
195
  * @codegenId colors
196
196
  * @codegenCommand yarn codegen-styles
197
197
  * @codegenParams ["text"]
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.LAYERS = void 0;
7
+ var LAYERS = {
8
+ card: 100,
9
+ navigation: 200,
10
+ dialog: 300,
11
+ layer: 400,
12
+ blanket: 500,
13
+ modal: 510,
14
+ flag: 600,
15
+ spotlight: 700,
16
+ tooltip: 800
17
+ };
18
+ exports.LAYERS = LAYERS;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "1.6.0",
3
+ "version": "1.6.2",
4
4
  "sideEffects": false
5
5
  }
@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  /** @jsx jsx */
4
4
  import { forwardRef } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
+ import { LAYERS } from '../constants';
6
7
  import { SurfaceContext } from './surface-provider';
7
8
 
8
9
  /**
@@ -26,6 +27,8 @@ export const Box = /*#__PURE__*/forwardRef(({
26
27
  borderStyle,
27
28
  borderWidth,
28
29
  borderRadius,
30
+ shadow,
31
+ layer,
29
32
  padding,
30
33
  paddingBlock,
31
34
  paddingInline,
@@ -44,7 +47,7 @@ export const Box = /*#__PURE__*/forwardRef(({
44
47
 
45
48
  }, htmlAttributes, {
46
49
  className: className,
47
- css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
50
+ css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
48
51
  "data-testid": testId
49
52
  }), children);
50
53
  return backgroundColor ? jsx(SurfaceContext.Provider, {
@@ -121,6 +124,12 @@ const flexAlignItemsMap = {
121
124
  }),
122
125
  flexEnd: css({
123
126
  alignItems: 'flex-end'
127
+ }),
128
+ start: css({
129
+ alignItems: 'start'
130
+ }),
131
+ end: css({
132
+ alignItems: 'end'
124
133
  })
125
134
  };
126
135
  /**
@@ -136,6 +145,12 @@ const flexJustifyContentMap = {
136
145
  }),
137
146
  flexEnd: css({
138
147
  justifyContent: 'flex-end'
148
+ }),
149
+ start: css({
150
+ alignItems: 'start'
151
+ }),
152
+ end: css({
153
+ alignItems: 'end'
139
154
  })
140
155
  };
141
156
  const displayMap = {
@@ -156,6 +171,9 @@ const positionMap = {
156
171
  absolute: css({
157
172
  position: 'absolute'
158
173
  }),
174
+ fixed: css({
175
+ position: 'fixed'
176
+ }),
159
177
  relative: css({
160
178
  position: 'relative'
161
179
  }),
@@ -388,10 +406,10 @@ const paddingInlineMap = {
388
406
 
389
407
  /**
390
408
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
391
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
409
+ * @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
392
410
  * @codegenId colors
393
411
  * @codegenCommand yarn codegen-styles
394
- * @codegenParams ["border", "background"]
412
+ * @codegenParams ["border", "background", "shadow"]
395
413
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
396
414
  */
397
415
  const borderColorMap = {
@@ -515,6 +533,64 @@ const backgroundColorMap = {
515
533
  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
516
534
  })
517
535
  };
536
+ const shadowMap = {
537
+ raised: css({
538
+ boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
539
+ }),
540
+ overflow: css({
541
+ boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
542
+ }),
543
+ 'overflow.spread': css({
544
+ boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
545
+ }),
546
+ 'overflow.perimeter': css({
547
+ boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
548
+ }),
549
+ overlay: css({
550
+ boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
551
+ })
552
+ };
553
+
554
+ /**
555
+ * @codegenEnd
556
+ */
557
+
558
+ /**
559
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
560
+ * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
561
+ * @codegenId misc
562
+ * @codegenCommand yarn codegen-styles
563
+ * @codegenParams ["layer"]
564
+ */
565
+ const layerMap = {
566
+ card: css({
567
+ zIndex: LAYERS['card']
568
+ }),
569
+ navigation: css({
570
+ zIndex: LAYERS['navigation']
571
+ }),
572
+ dialog: css({
573
+ zIndex: LAYERS['dialog']
574
+ }),
575
+ layer: css({
576
+ zIndex: LAYERS['layer']
577
+ }),
578
+ blanket: css({
579
+ zIndex: LAYERS['blanket']
580
+ }),
581
+ modal: css({
582
+ zIndex: LAYERS['modal']
583
+ }),
584
+ flag: css({
585
+ zIndex: LAYERS['flag']
586
+ }),
587
+ spotlight: css({
588
+ zIndex: LAYERS['spotlight']
589
+ }),
590
+ tooltip: css({
591
+ zIndex: LAYERS['tooltip']
592
+ })
593
+ };
518
594
  /**
519
595
  * @codegenEnd
520
596
  */
@@ -39,6 +39,9 @@ const flexJustifyContentMap = {
39
39
  }),
40
40
  end: css({
41
41
  justifyContent: 'end'
42
+ }),
43
+ spaceBetween: css({
44
+ justifyContent: 'space-between'
42
45
  })
43
46
  };
44
47
  const flexWrapMap = {
@@ -174,7 +174,7 @@ const Text = ({
174
174
  export default Text;
175
175
  /**
176
176
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
177
- * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
177
+ * @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
178
178
  * @codegenId colors
179
179
  * @codegenCommand yarn codegen-styles
180
180
  * @codegenParams ["text"]
@@ -0,0 +1,11 @@
1
+ export const LAYERS = {
2
+ card: 100,
3
+ navigation: 200,
4
+ dialog: 300,
5
+ layer: 400,
6
+ blanket: 500,
7
+ modal: 510,
8
+ flag: 600,
9
+ spotlight: 700,
10
+ tooltip: 800
11
+ };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "1.6.0",
3
+ "version": "1.6.2",
4
4
  "sideEffects": false
5
5
  }
@@ -1,10 +1,11 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
3
+ var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "shadow", "layer", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
4
4
 
5
5
  /** @jsx jsx */
6
6
  import { forwardRef } from 'react';
7
7
  import { css, jsx } from '@emotion/react';
8
+ import { LAYERS } from '../constants';
8
9
  import { SurfaceContext } from './surface-provider';
9
10
 
10
11
  /**
@@ -29,6 +30,8 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
29
30
  borderStyle = _ref.borderStyle,
30
31
  borderWidth = _ref.borderWidth,
31
32
  borderRadius = _ref.borderRadius,
33
+ shadow = _ref.shadow,
34
+ layer = _ref.layer,
32
35
  padding = _ref.padding,
33
36
  paddingBlock = _ref.paddingBlock,
34
37
  paddingInline = _ref.paddingInline,
@@ -48,7 +51,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
48
51
 
49
52
  }, htmlAttributes, {
50
53
  className: className,
51
- css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
54
+ css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
52
55
  "data-testid": testId
53
56
  }), children);
54
57
  return backgroundColor ? jsx(SurfaceContext.Provider, {
@@ -125,6 +128,12 @@ var flexAlignItemsMap = {
125
128
  }),
126
129
  flexEnd: css({
127
130
  alignItems: 'flex-end'
131
+ }),
132
+ start: css({
133
+ alignItems: 'start'
134
+ }),
135
+ end: css({
136
+ alignItems: 'end'
128
137
  })
129
138
  };
130
139
  /**
@@ -140,6 +149,12 @@ var flexJustifyContentMap = {
140
149
  }),
141
150
  flexEnd: css({
142
151
  justifyContent: 'flex-end'
152
+ }),
153
+ start: css({
154
+ alignItems: 'start'
155
+ }),
156
+ end: css({
157
+ alignItems: 'end'
143
158
  })
144
159
  };
145
160
  var displayMap = {
@@ -160,6 +175,9 @@ var positionMap = {
160
175
  absolute: css({
161
176
  position: 'absolute'
162
177
  }),
178
+ fixed: css({
179
+ position: 'fixed'
180
+ }),
163
181
  relative: css({
164
182
  position: 'relative'
165
183
  }),
@@ -392,10 +410,10 @@ var paddingInlineMap = {
392
410
 
393
411
  /**
394
412
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
395
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
413
+ * @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
396
414
  * @codegenId colors
397
415
  * @codegenCommand yarn codegen-styles
398
- * @codegenParams ["border", "background"]
416
+ * @codegenParams ["border", "background", "shadow"]
399
417
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
400
418
  */
401
419
  var borderColorMap = {
@@ -519,6 +537,64 @@ var backgroundColorMap = {
519
537
  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
520
538
  })
521
539
  };
540
+ var shadowMap = {
541
+ raised: css({
542
+ boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
543
+ }),
544
+ overflow: css({
545
+ boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
546
+ }),
547
+ 'overflow.spread': css({
548
+ boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
549
+ }),
550
+ 'overflow.perimeter': css({
551
+ boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
552
+ }),
553
+ overlay: css({
554
+ boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
555
+ })
556
+ };
557
+
558
+ /**
559
+ * @codegenEnd
560
+ */
561
+
562
+ /**
563
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
564
+ * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
565
+ * @codegenId misc
566
+ * @codegenCommand yarn codegen-styles
567
+ * @codegenParams ["layer"]
568
+ */
569
+ var layerMap = {
570
+ card: css({
571
+ zIndex: LAYERS['card']
572
+ }),
573
+ navigation: css({
574
+ zIndex: LAYERS['navigation']
575
+ }),
576
+ dialog: css({
577
+ zIndex: LAYERS['dialog']
578
+ }),
579
+ layer: css({
580
+ zIndex: LAYERS['layer']
581
+ }),
582
+ blanket: css({
583
+ zIndex: LAYERS['blanket']
584
+ }),
585
+ modal: css({
586
+ zIndex: LAYERS['modal']
587
+ }),
588
+ flag: css({
589
+ zIndex: LAYERS['flag']
590
+ }),
591
+ spotlight: css({
592
+ zIndex: LAYERS['spotlight']
593
+ }),
594
+ tooltip: css({
595
+ zIndex: LAYERS['tooltip']
596
+ })
597
+ };
522
598
  /**
523
599
  * @codegenEnd
524
600
  */
@@ -39,6 +39,9 @@ var flexJustifyContentMap = {
39
39
  }),
40
40
  end: css({
41
41
  justifyContent: 'end'
42
+ }),
43
+ spaceBetween: css({
44
+ justifyContent: 'space-between'
42
45
  })
43
46
  };
44
47
  var flexWrapMap = {
@@ -179,7 +179,7 @@ var Text = function Text(_ref) {
179
179
  export default Text;
180
180
  /**
181
181
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
182
- * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
182
+ * @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
183
183
  * @codegenId colors
184
184
  * @codegenCommand yarn codegen-styles
185
185
  * @codegenParams ["text"]
@@ -0,0 +1,11 @@
1
+ export var LAYERS = {
2
+ card: 100,
3
+ navigation: 200,
4
+ dialog: 300,
5
+ layer: 400,
6
+ blanket: 500,
7
+ modal: 510,
8
+ flag: 600,
9
+ spotlight: 700,
10
+ tooltip: 800
11
+ };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "1.6.0",
3
+ "version": "1.6.2",
4
4
  "sideEffects": false
5
5
  }