@atlaskit/ds-explorations 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/ds-explorations
 
+## 1.6.1
+
+### Patch Changes
+
+- [`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.
+
+## 1.6.0
+
+### Minor Changes
+
+- [`9f9498aafb1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f9498aafb1) - [ux] Box API introduces `hidden` for `overflow` prop.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/components/box.partial.js

@@ -15,9 +15,11 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
+var _constants = require("../constants");
+
 var _surfaceProvider = require("./surface-provider");
 
-var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
+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"];
 
 /**
  * __Box__
@@ -41,6 +43,8 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       borderStyle = _ref.borderStyle,
       borderWidth = _ref.borderWidth,
       borderRadius = _ref.borderRadius,
+      shadow = _ref.shadow,
+      layer = _ref.layer,
       padding = _ref.padding,
       paddingBlock = _ref.paddingBlock,
       paddingInline = _ref.paddingInline,
@@ -59,7 +63,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   }, htmlAttributes, {
     className: className,
-    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]],
+    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]],
     "data-testid": testId
   }), children);
   return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
@@ -138,6 +142,12 @@ var flexAlignItemsMap = {
   }),
   flexEnd: (0, _react2.css)({
     alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
   })
 };
 /**
@@ -153,6 +163,12 @@ var flexJustifyContentMap = {
   }),
   flexEnd: (0, _react2.css)({
     justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
   })
 };
 var displayMap = {
@@ -173,6 +189,9 @@ var positionMap = {
   absolute: (0, _react2.css)({
     position: 'absolute'
   }),
+  fixed: (0, _react2.css)({
+    position: 'fixed'
+  }),
   relative: (0, _react2.css)({
     position: 'relative'
   }),
@@ -183,6 +202,9 @@ var positionMap = {
 var overflowMap = {
   auto: (0, _react2.css)({
     overflow: 'auto'
+  }),
+  hidden: (0, _react2.css)({
+    overflow: 'hidden'
   })
 };
 var baseStyles = (0, _react2.css)({
@@ -402,10 +424,10 @@ var paddingInlineMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
+ * @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background"]
+ * @codegenParams ["border", "background", "shadow"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var borderColorMap = {
@@ -529,6 +551,64 @@ var backgroundColorMap = {
     backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   })
 };
+var shadowMap = {
+  raised: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
+  }),
+  overflow: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  'overflow.spread': (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
+  'overflow.perimeter': (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
+  }),
+  overlay: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
+ * @codegenId misc
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["layer"]
+ */
+var layerMap = {
+  card: (0, _react2.css)({
+    zIndex: _constants.LAYERS['card']
+  }),
+  navigation: (0, _react2.css)({
+    zIndex: _constants.LAYERS['navigation']
+  }),
+  dialog: (0, _react2.css)({
+    zIndex: _constants.LAYERS['dialog']
+  }),
+  layer: (0, _react2.css)({
+    zIndex: _constants.LAYERS['layer']
+  }),
+  blanket: (0, _react2.css)({
+    zIndex: _constants.LAYERS['blanket']
+  }),
+  modal: (0, _react2.css)({
+    zIndex: _constants.LAYERS['modal']
+  }),
+  flag: (0, _react2.css)({
+    zIndex: _constants.LAYERS['flag']
+  }),
+  spotlight: (0, _react2.css)({
+    zIndex: _constants.LAYERS['spotlight']
+  }),
+  tooltip: (0, _react2.css)({
+    zIndex: _constants.LAYERS['tooltip']
+  })
+};
 /**
  * @codegenEnd
  */

package/dist/cjs/components/inline.partial.js

@@ -48,6 +48,9 @@ var flexJustifyContentMap = {
   }),
   end: (0, _react2.css)({
     justifyContent: 'end'
+  }),
+  spaceBetween: (0, _react2.css)({
+    justifyContent: 'space-between'
   })
 };
 var flexWrapMap = {

package/dist/cjs/components/text.partial.js

@@ -191,7 +191,7 @@ var Text = function Text(_ref) {
 var _default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
+ * @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]

package/dist/cjs/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LAYERS = void 0;
+var LAYERS = {
+  card: 100,
+  navigation: 200,
+  dialog: 300,
+  layer: 400,
+  blanket: 500,
+  modal: 510,
+  flag: 600,
+  spotlight: 700,
+  tooltip: 800
+};
+exports.LAYERS = LAYERS;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.5.0",
+	"version": "1.6.1",
 	"sideEffects": false
 }

package/dist/es2019/components/box.partial.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { LAYERS } from '../constants';
 import { SurfaceContext } from './surface-provider';
 
 /**
@@ -26,6 +27,8 @@ export const Box = /*#__PURE__*/forwardRef(({
   borderStyle,
   borderWidth,
   borderRadius,
+  shadow,
+  layer,
   padding,
   paddingBlock,
   paddingInline,
@@ -44,7 +47,7 @@ export const Box = /*#__PURE__*/forwardRef(({
 
   }, htmlAttributes, {
     className: className,
-    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]],
+    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]],
     "data-testid": testId
   }), children);
   return backgroundColor ? jsx(SurfaceContext.Provider, {
@@ -121,6 +124,12 @@ const flexAlignItemsMap = {
   }),
   flexEnd: css({
     alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
   })
 };
 /**
@@ -136,6 +145,12 @@ const flexJustifyContentMap = {
   }),
   flexEnd: css({
     justifyContent: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
   })
 };
 const displayMap = {
@@ -156,6 +171,9 @@ const positionMap = {
   absolute: css({
     position: 'absolute'
   }),
+  fixed: css({
+    position: 'fixed'
+  }),
   relative: css({
     position: 'relative'
   }),
@@ -166,6 +184,9 @@ const positionMap = {
 const overflowMap = {
   auto: css({
     overflow: 'auto'
+  }),
+  hidden: css({
+    overflow: 'hidden'
   })
 };
 const baseStyles = css({
@@ -385,10 +406,10 @@ const paddingInlineMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
+ * @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background"]
+ * @codegenParams ["border", "background", "shadow"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 const borderColorMap = {
@@ -512,6 +533,64 @@ const backgroundColorMap = {
     backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   })
 };
+const shadowMap = {
+  raised: css({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
+  }),
+  overflow: css({
+    boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  'overflow.spread': css({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
+  'overflow.perimeter': css({
+    boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
+  }),
+  overlay: css({
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
+ * @codegenId misc
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["layer"]
+ */
+const layerMap = {
+  card: css({
+    zIndex: LAYERS['card']
+  }),
+  navigation: css({
+    zIndex: LAYERS['navigation']
+  }),
+  dialog: css({
+    zIndex: LAYERS['dialog']
+  }),
+  layer: css({
+    zIndex: LAYERS['layer']
+  }),
+  blanket: css({
+    zIndex: LAYERS['blanket']
+  }),
+  modal: css({
+    zIndex: LAYERS['modal']
+  }),
+  flag: css({
+    zIndex: LAYERS['flag']
+  }),
+  spotlight: css({
+    zIndex: LAYERS['spotlight']
+  }),
+  tooltip: css({
+    zIndex: LAYERS['tooltip']
+  })
+};
 /**
  * @codegenEnd
  */

package/dist/es2019/components/inline.partial.js

@@ -39,6 +39,9 @@ const flexJustifyContentMap = {
   }),
   end: css({
     justifyContent: 'end'
+  }),
+  spaceBetween: css({
+    justifyContent: 'space-between'
   })
 };
 const flexWrapMap = {

package/dist/es2019/components/text.partial.js

@@ -174,7 +174,7 @@ const Text = ({
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
+ * @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]

package/dist/es2019/constants.js

@@ -0,0 +1,11 @@
+export const LAYERS = {
+  card: 100,
+  navigation: 200,
+  dialog: 300,
+  layer: 400,
+  blanket: 500,
+  modal: 510,
+  flag: 600,
+  spotlight: 700,
+  tooltip: 800
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.5.0",
+	"version": "1.6.1",
 	"sideEffects": false
 }

package/dist/esm/components/box.partial.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
+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"];
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { LAYERS } from '../constants';
 import { SurfaceContext } from './surface-provider';
 
 /**
@@ -29,6 +30,8 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       borderStyle = _ref.borderStyle,
       borderWidth = _ref.borderWidth,
       borderRadius = _ref.borderRadius,
+      shadow = _ref.shadow,
+      layer = _ref.layer,
       padding = _ref.padding,
       paddingBlock = _ref.paddingBlock,
       paddingInline = _ref.paddingInline,
@@ -48,7 +51,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   }, htmlAttributes, {
     className: className,
-    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]],
+    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]],
     "data-testid": testId
   }), children);
   return backgroundColor ? jsx(SurfaceContext.Provider, {
@@ -125,6 +128,12 @@ var flexAlignItemsMap = {
   }),
   flexEnd: css({
     alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
   })
 };
 /**
@@ -140,6 +149,12 @@ var flexJustifyContentMap = {
   }),
   flexEnd: css({
     justifyContent: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
   })
 };
 var displayMap = {
@@ -160,6 +175,9 @@ var positionMap = {
   absolute: css({
     position: 'absolute'
   }),
+  fixed: css({
+    position: 'fixed'
+  }),
   relative: css({
     position: 'relative'
   }),
@@ -170,6 +188,9 @@ var positionMap = {
 var overflowMap = {
   auto: css({
     overflow: 'auto'
+  }),
+  hidden: css({
+    overflow: 'hidden'
   })
 };
 var baseStyles = css({
@@ -389,10 +410,10 @@ var paddingInlineMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
+ * @codegen <<SignedSource::f8adab4246a66543cd1350e53abf9293>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background"]
+ * @codegenParams ["border", "background", "shadow"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 var borderColorMap = {
@@ -516,6 +537,64 @@ var backgroundColorMap = {
     backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   })
 };
+var shadowMap = {
+  raised: css({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
+  }),
+  overflow: css({
+    boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  'overflow.spread': css({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
+  'overflow.perimeter': css({
+    boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
+  }),
+  overlay: css({
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
+ * @codegenId misc
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["layer"]
+ */
+var layerMap = {
+  card: css({
+    zIndex: LAYERS['card']
+  }),
+  navigation: css({
+    zIndex: LAYERS['navigation']
+  }),
+  dialog: css({
+    zIndex: LAYERS['dialog']
+  }),
+  layer: css({
+    zIndex: LAYERS['layer']
+  }),
+  blanket: css({
+    zIndex: LAYERS['blanket']
+  }),
+  modal: css({
+    zIndex: LAYERS['modal']
+  }),
+  flag: css({
+    zIndex: LAYERS['flag']
+  }),
+  spotlight: css({
+    zIndex: LAYERS['spotlight']
+  }),
+  tooltip: css({
+    zIndex: LAYERS['tooltip']
+  })
+};
 /**
  * @codegenEnd
  */

package/dist/esm/components/inline.partial.js

@@ -39,6 +39,9 @@ var flexJustifyContentMap = {
   }),
   end: css({
     justifyContent: 'end'
+  }),
+  spaceBetween: css({
+    justifyContent: 'space-between'
   })
 };
 var flexWrapMap = {

package/dist/esm/components/text.partial.js

@@ -179,7 +179,7 @@ var Text = function Text(_ref) {
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
+ * @codegen <<SignedSource::920426feace841166c6f4ffdc49ae26d>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]

package/dist/esm/constants.js

@@ -0,0 +1,11 @@
+export var LAYERS = {
+  card: 100,
+  navigation: 200,
+  dialog: 300,
+  layer: 400,
+  blanket: 500,
+  modal: 510,
+  flag: 600,
+  spotlight: 700,
+  tooltip: 800
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.5.0",
+	"version": "1.6.1",
 	"sideEffects": false
 }