@atlaskit/ds-explorations 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/ds-explorations
 
+## 0.1.5
+
+### Patch Changes
+
+- [`7014fd08976`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7014fd08976) - [ux] Inline gap prop now internally sets column-gap; Stack gap prop now internally sets row-gap
+- [`ba660f4f76f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba660f4f76f) - Add `start` and `end` values to Stack and Inline flex properties.
+- [`3ee63238f49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ee63238f49) - Update internals of Box, Text, Inline and Stack to handle `children` more accurately.
+  Also update scope of `use-primitives` to suggest Box and Text more selectively.
+- [`9dec0fe6946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9dec0fe6946) - Add overflow prop to Box.
+- [`7a9e73ec430`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a9e73ec430) - [ux] Internal changes to how styles are represented in SectionMessage. Some minor visual changes to the color and spacing of SectionMessage. No changes to the SectionMessage API.
+
 ## 0.1.4
 
 ### Patch Changes

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

@@ -23,7 +23,7 @@ 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", "width", "UNSAFE_style", "testId"];
+var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -58,6 +58,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'relative' : _ref$position,
       height = _ref.height,
+      overflow = _ref.overflow,
       width = _ref.width,
       UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId,
@@ -186,6 +187,11 @@ var baseStyles = (0, _react2.css)({
   appearance: 'none',
   border: 'none'
 });
+var overflowMap = {
+  auto: (0, _react2.css)({
+    overflow: 'auto'
+  })
+};
 var positionMap = {
   absolute: (0, _react2.css)({
     position: 'absolute'

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = require("react");
 
 var _react2 = require("@emotion/react");
@@ -15,7 +17,10 @@ var _constants = require("../constants");
 
 var _text = _interopRequireDefault(require("./text.partial"));
 
-/** @jsx jsx */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -28,6 +33,12 @@ var flexAlignItemsMap = {
   }),
   flexEnd: (0, _react2.css)({
     alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
   })
 };
 var flexJustifyContentMap = {
@@ -39,6 +50,17 @@ var flexJustifyContentMap = {
   }),
   flexEnd: (0, _react2.css)({
     justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
   })
 };
 var baseStyles = (0, _react2.css)({
@@ -58,12 +80,15 @@ var Inline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
+      flexWrap = _ref.flexWrap,
       divider = _ref.divider,
+      UNSAFE_style = _ref.UNSAFE_style,
       children = _ref.children,
       testId = _ref.testId;
   var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(_text.default, null, divider) : divider;
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    style: _objectSpread({}, UNSAFE_style),
+    css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
   }, _react.Children.map(children, function (child, index) {
@@ -74,49 +99,49 @@ Inline.displayName = 'Inline';
 var _default = Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::7a985afa5e15ffd4f6f9c0db0e99ceb6>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["columnGap"]
  */
 
 exports.default = _default;
-var gapMap = {
+var columnGapMap = {
   'sp-0': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-0']
+    columnGap: _constants.SPACING_SCALE['sp-0']
   }),
   'sp-25': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-25']
+    columnGap: _constants.SPACING_SCALE['sp-25']
   }),
   'sp-50': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-50']
+    columnGap: _constants.SPACING_SCALE['sp-50']
   }),
   'sp-75': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-75']
+    columnGap: _constants.SPACING_SCALE['sp-75']
   }),
   'sp-100': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-100']
+    columnGap: _constants.SPACING_SCALE['sp-100']
   }),
   'sp-150': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-150']
+    columnGap: _constants.SPACING_SCALE['sp-150']
   }),
   'sp-200': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-200']
+    columnGap: _constants.SPACING_SCALE['sp-200']
   }),
   'sp-300': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-300']
+    columnGap: _constants.SPACING_SCALE['sp-300']
   }),
   'sp-400': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-400']
+    columnGap: _constants.SPACING_SCALE['sp-400']
   }),
   'sp-500': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-500']
+    columnGap: _constants.SPACING_SCALE['sp-500']
   }),
   'sp-600': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-600']
+    columnGap: _constants.SPACING_SCALE['sp-600']
   }),
   'sp-800': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-800']
+    columnGap: _constants.SPACING_SCALE['sp-800']
   })
 };
 /**

package/dist/cjs/components/interaction-surface.partial.js

@@ -30,8 +30,9 @@ var baseStyles = (0, _react2.css)({
  * ```js
  * // a minimal icon button
  * <Box as="button">
- *   <InteractionSurface />
- *   <WarningIcon label="icon button" />
+ *   <InteractionSurface>
+ *    <WarningIcon label="icon button" />
+ *  </InteractionSurface>
  * </Box>
  * ```
  */

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

@@ -1,17 +1,24 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
 var _constants = require("../constants");
 
-/** @jsx jsx */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -24,6 +31,12 @@ var flexAlignItemsMap = {
   }),
   flexEnd: (0, _react2.css)({
     alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
   })
 };
 var flexJustifyContentMap = {
@@ -35,6 +48,17 @@ var flexJustifyContentMap = {
   }),
   flexEnd: (0, _react2.css)({
     justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
   })
 };
 var baseStyles = (0, _react2.css)({
@@ -54,10 +78,13 @@ var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
+      flexWrap = _ref.flexWrap,
       children = _ref.children,
+      UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId;
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    style: _objectSpread({}, UNSAFE_style),
+    css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
   }, children);
@@ -66,49 +93,49 @@ Stack.displayName = 'Stack';
 var _default = Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::13c9344cdb18845e176c0ca78b2972d3>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["rowGap"]
  */
 
 exports.default = _default;
-var gapMap = {
+var rowGapMap = {
   'sp-0': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-0']
+    rowGap: _constants.SPACING_SCALE['sp-0']
   }),
   'sp-25': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-25']
+    rowGap: _constants.SPACING_SCALE['sp-25']
   }),
   'sp-50': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-50']
+    rowGap: _constants.SPACING_SCALE['sp-50']
   }),
   'sp-75': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-75']
+    rowGap: _constants.SPACING_SCALE['sp-75']
   }),
   'sp-100': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-100']
+    rowGap: _constants.SPACING_SCALE['sp-100']
   }),
   'sp-150': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-150']
+    rowGap: _constants.SPACING_SCALE['sp-150']
   }),
   'sp-200': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-200']
+    rowGap: _constants.SPACING_SCALE['sp-200']
   }),
   'sp-300': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-300']
+    rowGap: _constants.SPACING_SCALE['sp-300']
   }),
   'sp-400': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-400']
+    rowGap: _constants.SPACING_SCALE['sp-400']
   }),
   'sp-500': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-500']
+    rowGap: _constants.SPACING_SCALE['sp-500']
   }),
   'sp-600': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-600']
+    rowGap: _constants.SPACING_SCALE['sp-600']
   }),
   'sp-800': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-800']
+    rowGap: _constants.SPACING_SCALE['sp-800']
   })
 };
 /**

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

@@ -106,6 +106,8 @@ var verticalAlignMap = {
 };
 var baseStyles = (0, _react.css)({
   boxSizing: 'border-box',
+  margin: '0px',
+  padding: '0px',
   fontFamily: fontFamily
 });
 var truncateStyles = (0, _react.css)({

package/dist/cjs/version.json

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

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

@@ -32,6 +32,7 @@ const Box = /*#__PURE__*/forwardRef(({
   paddingInline,
   position = 'relative',
   height,
+  overflow,
   width,
   UNSAFE_style,
   testId,
@@ -154,6 +155,11 @@ const baseStyles = css({
   appearance: 'none',
   border: 'none'
 });
+const overflowMap = {
+  auto: css({
+    overflow: 'auto'
+  })
+};
 const positionMap = {
   absolute: css({
     position: 'absolute'

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

@@ -15,6 +15,12 @@ const flexAlignItemsMap = {
   }),
   flexEnd: css({
     alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
   })
 };
 const flexJustifyContentMap = {
@@ -26,6 +32,17 @@ const flexJustifyContentMap = {
   }),
   flexEnd: css({
     justifyContent: 'flex-end'
+  }),
+  start: css({
+    justifyContent: 'start'
+  }),
+  end: css({
+    justifyContent: 'end'
+  })
+};
+const flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
   })
 };
 const baseStyles = css({
@@ -45,13 +62,17 @@ const Inline = /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
   justifyContent,
+  flexWrap,
   divider,
+  UNSAFE_style,
   children,
   testId
 }, ref) => {
   const dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
   return jsx("div", {
-    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    style: { ...UNSAFE_style
+    },
+    css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
   }, Children.map(children, (child, index) => {
@@ -62,48 +83,48 @@ Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::7a985afa5e15ffd4f6f9c0db0e99ceb6>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["columnGap"]
  */
 
-const gapMap = {
+const columnGapMap = {
   'sp-0': css({
-    gap: SPACING_SCALE['sp-0']
+    columnGap: SPACING_SCALE['sp-0']
   }),
   'sp-25': css({
-    gap: SPACING_SCALE['sp-25']
+    columnGap: SPACING_SCALE['sp-25']
   }),
   'sp-50': css({
-    gap: SPACING_SCALE['sp-50']
+    columnGap: SPACING_SCALE['sp-50']
   }),
   'sp-75': css({
-    gap: SPACING_SCALE['sp-75']
+    columnGap: SPACING_SCALE['sp-75']
   }),
   'sp-100': css({
-    gap: SPACING_SCALE['sp-100']
+    columnGap: SPACING_SCALE['sp-100']
   }),
   'sp-150': css({
-    gap: SPACING_SCALE['sp-150']
+    columnGap: SPACING_SCALE['sp-150']
   }),
   'sp-200': css({
-    gap: SPACING_SCALE['sp-200']
+    columnGap: SPACING_SCALE['sp-200']
   }),
   'sp-300': css({
-    gap: SPACING_SCALE['sp-300']
+    columnGap: SPACING_SCALE['sp-300']
   }),
   'sp-400': css({
-    gap: SPACING_SCALE['sp-400']
+    columnGap: SPACING_SCALE['sp-400']
   }),
   'sp-500': css({
-    gap: SPACING_SCALE['sp-500']
+    columnGap: SPACING_SCALE['sp-500']
   }),
   'sp-600': css({
-    gap: SPACING_SCALE['sp-600']
+    columnGap: SPACING_SCALE['sp-600']
   }),
   'sp-800': css({
-    gap: SPACING_SCALE['sp-800']
+    columnGap: SPACING_SCALE['sp-800']
   })
 };
 /**

package/dist/es2019/components/interaction-surface.partial.js

@@ -20,8 +20,9 @@ const baseStyles = css({
  * ```js
  * // a minimal icon button
  * <Box as="button">
- *   <InteractionSurface />
- *   <WarningIcon label="icon button" />
+ *   <InteractionSurface>
+ *    <WarningIcon label="icon button" />
+ *  </InteractionSurface>
  * </Box>
  * ```
  */

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

@@ -14,6 +14,12 @@ const flexAlignItemsMap = {
   }),
   flexEnd: css({
     alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
   })
 };
 const flexJustifyContentMap = {
@@ -25,6 +31,17 @@ const flexJustifyContentMap = {
   }),
   flexEnd: css({
     justifyContent: 'flex-end'
+  }),
+  start: css({
+    justifyContent: 'start'
+  }),
+  end: css({
+    justifyContent: 'end'
+  })
+};
+const flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
   })
 };
 const baseStyles = css({
@@ -44,11 +61,15 @@ const Stack = /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
   justifyContent,
+  flexWrap,
   children,
+  UNSAFE_style,
   testId
 }, ref) => {
   return jsx("div", {
-    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    style: { ...UNSAFE_style
+    },
+    css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
   }, children);
@@ -57,48 +78,48 @@ Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::13c9344cdb18845e176c0ca78b2972d3>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["rowGap"]
  */
 
-const gapMap = {
+const rowGapMap = {
   'sp-0': css({
-    gap: SPACING_SCALE['sp-0']
+    rowGap: SPACING_SCALE['sp-0']
   }),
   'sp-25': css({
-    gap: SPACING_SCALE['sp-25']
+    rowGap: SPACING_SCALE['sp-25']
   }),
   'sp-50': css({
-    gap: SPACING_SCALE['sp-50']
+    rowGap: SPACING_SCALE['sp-50']
   }),
   'sp-75': css({
-    gap: SPACING_SCALE['sp-75']
+    rowGap: SPACING_SCALE['sp-75']
   }),
   'sp-100': css({
-    gap: SPACING_SCALE['sp-100']
+    rowGap: SPACING_SCALE['sp-100']
   }),
   'sp-150': css({
-    gap: SPACING_SCALE['sp-150']
+    rowGap: SPACING_SCALE['sp-150']
   }),
   'sp-200': css({
-    gap: SPACING_SCALE['sp-200']
+    rowGap: SPACING_SCALE['sp-200']
   }),
   'sp-300': css({
-    gap: SPACING_SCALE['sp-300']
+    rowGap: SPACING_SCALE['sp-300']
   }),
   'sp-400': css({
-    gap: SPACING_SCALE['sp-400']
+    rowGap: SPACING_SCALE['sp-400']
   }),
   'sp-500': css({
-    gap: SPACING_SCALE['sp-500']
+    rowGap: SPACING_SCALE['sp-500']
   }),
   'sp-600': css({
-    gap: SPACING_SCALE['sp-600']
+    rowGap: SPACING_SCALE['sp-600']
   }),
   'sp-800': css({
-    gap: SPACING_SCALE['sp-800']
+    rowGap: SPACING_SCALE['sp-800']
   })
 };
 /**

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

@@ -86,6 +86,8 @@ const verticalAlignMap = {
 };
 const baseStyles = css({
   boxSizing: 'border-box',
+  margin: '0px',
+  padding: '0px',
   fontFamily
 });
 const truncateStyles = css({

package/dist/es2019/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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", "width", "UNSAFE_style", "testId"];
+var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -43,6 +43,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'relative' : _ref$position,
       height = _ref.height,
+      overflow = _ref.overflow,
       width = _ref.width,
       UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId,
@@ -170,6 +171,11 @@ var baseStyles = css({
   appearance: 'none',
   border: 'none'
 });
+var overflowMap = {
+  auto: css({
+    overflow: 'auto'
+  })
+};
 var positionMap = {
   absolute: css({
     position: 'absolute'