@atlaskit/primitives - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

 # @atlaskit/primitives
 
+## 0.2.0
+
+### Minor Changes
+
+- [`228cce759e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/228cce759e8) - Create Box component.
+
 ## 0.1.1
@@ -4,0 +10,0 @@

dist/cjs/components/box.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Box", {
-  enumerable: true,
-  get: function get() {
-    return _box.default;
-  }
+exports.Box = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _baseBox = require("./internal/base-box.partial");
+var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "customStyles", "testId"],
+  _excluded2 = ["style", "className"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    children = _ref.children,
+    color = _ref.color,
+    backgroundColor = _ref.backgroundColor,
+    shadow = _ref.shadow,
+    borderStyle = _ref.borderStyle,
+    borderWidth = _ref.borderWidth,
+    borderRadius = _ref.borderRadius,
+    borderColor = _ref.borderColor,
+    layer = _ref.layer,
+    flex = _ref.flex,
+    flexGrow = _ref.flexGrow,
+    flexShrink = _ref.flexShrink,
+    alignSelf = _ref.alignSelf,
+    overflow = _ref.overflow,
+    overflowInline = _ref.overflowInline,
+    overflowBlock = _ref.overflowBlock,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    height = _ref.height,
+    width = _ref.width,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'static' : _ref$position,
+    customStyles = _ref.customStyles,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var style = htmlAttributes.style,
+    className = htmlAttributes.className,
+    safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(_baseBox.BaseBox, (0, _extends2.default)({
+    as: as,
+    color: color,
+    backgroundColor: backgroundColor,
+    shadow: shadow,
+    borderStyle: borderStyle,
+    borderWidth: borderWidth,
+    borderRadius: borderRadius,
+    borderColor: borderColor,
+    layer: layer,
+    flex: flex,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    alignSelf: alignSelf,
+    overflow: overflow,
+    overflowInline: overflowInline,
+    overflowBlock: overflowBlock,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    height: height,
+    width: width,
+    display: display,
+    position: position,
+    UNSAFE_style: customStyles,
+    testId: testId,
+    ref: ref
+  }, safeHtmlAttributes), children);
 });
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+exports.Box = Box;

dist/cjs/components/inline.partial.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -7,2 +8,3 @@ value: true
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
@@ -54,3 +56,3 @@ var _react2 = require("@emotion/react");
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -61,46 +63,20 @@ * @codegenCommand yarn codegen-styles
  */
-var spaceMap = {
-  '0': (0, _react2.css)({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
-  '150': (0, _react2.css)({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    gap: "var(--ds-space-800, 64px)"
-  })
-};
+var spaceMap = Object.fromEntries(['gap'].map(function (property) {
+  return [property, {
+    '0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
+    '025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
+    '050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
+    '075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
+    '100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
+    '150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
+    '200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
+    '250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
+    '300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
+    '400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
+    '500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
+    '600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
+    '800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
+    '1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
@@ -163,3 +139,3 @@ * @codegenEnd
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
     "data-testid": testId,
@@ -166,0 +142,0 @@ ref: ref

dist/cjs/components/stack.partial.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -7,2 +8,3 @@ value: true
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
@@ -48,3 +50,3 @@ var _react2 = require("@emotion/react");
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -55,46 +57,20 @@ * @codegenCommand yarn codegen-styles
  */
-var spaceMap = {
-  '0': (0, _react2.css)({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
-  '150': (0, _react2.css)({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    gap: "var(--ds-space-800, 64px)"
-  })
-};
+var spaceMap = Object.fromEntries(['gap'].map(function (property) {
+  return [property, {
+    '0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
+    '025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
+    '050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
+    '075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
+    '100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
+    '150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
+    '200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
+    '250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
+    '300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
+    '400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
+    '500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
+    '600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
+    '800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
+    '1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
@@ -134,3 +110,3 @@ * @codegenEnd
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
@@ -137,0 +113,0 @@ ref: ref

dist/cjs/index.js

@@ -25,4 +25,4 @@ "use strict";
 });
-var _stack = _interopRequireDefault(require("./components/stack.partial"));
 var _box = require("./components/box");
-var _inline = _interopRequireDefault(require("./components/inline.partial"));
+var _inline = _interopRequireDefault(require("./components/inline.partial"));
+var _stack = _interopRequireDefault(require("./components/stack.partial"));

dist/cjs/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"sideEffects": false
 }

dist/es2019/components/box.js

@@ -1,1 +0,75 @@
-export { default as Box } from '@atlaskit/ds-explorations/box';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { BaseBox } from './internal/base-box.partial';
+const Box = /*#__PURE__*/forwardRef(({
+  as,
+  children,
+  color,
+  backgroundColor,
+  shadow,
+  borderStyle,
+  borderWidth,
+  borderRadius,
+  borderColor,
+  layer,
+  flex,
+  flexGrow,
+  flexShrink,
+  alignSelf,
+  overflow,
+  overflowInline,
+  overflowBlock,
+  padding,
+  paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
+  height,
+  width,
+  display = 'block',
+  position = 'static',
+  customStyles,
+  testId,
+  ...htmlAttributes
+}, ref) => {
+  const {
+    style,
+    className,
+    ...safeHtmlAttributes
+  } = htmlAttributes;
+  return /*#__PURE__*/React.createElement(BaseBox, _extends({
+    as: as,
+    color: color,
+    backgroundColor: backgroundColor,
+    shadow: shadow,
+    borderStyle: borderStyle,
+    borderWidth: borderWidth,
+    borderRadius: borderRadius,
+    borderColor: borderColor,
+    layer: layer,
+    flex: flex,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    alignSelf: alignSelf,
+    overflow: overflow,
+    overflowInline: overflowInline,
+    overflowBlock: overflowBlock,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    height: height,
+    width: width,
+    display: display,
+    position: position,
+    UNSAFE_style: customStyles,
+    testId: testId,
+    ref: ref
+  }, safeHtmlAttributes), children);
+});
+export { Box };

dist/es2019/components/inline.partial.js

@@ -46,3 +46,3 @@ /** @jsx jsx */
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -53,46 +53,46 @@ * @codegenCommand yarn codegen-styles
  */
-const spaceMap = {
+const spaceMap = Object.fromEntries(['gap'].map(property => [property, {
   '0': css({
-    gap: "var(--ds-space-0, 0px)"
+    [property]: "var(--ds-space-0, 0px)"
   }),
   '025': css({
-    gap: "var(--ds-space-025, 2px)"
+    [property]: "var(--ds-space-025, 2px)"
   }),
   '050': css({
-    gap: "var(--ds-space-050, 4px)"
+    [property]: "var(--ds-space-050, 4px)"
   }),
   '075': css({
-    gap: "var(--ds-space-075, 6px)"
+    [property]: "var(--ds-space-075, 6px)"
   }),
   '100': css({
-    gap: "var(--ds-space-100, 8px)"
+    [property]: "var(--ds-space-100, 8px)"
   }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
   '150': css({
-    gap: "var(--ds-space-150, 12px)"
+    [property]: "var(--ds-space-150, 12px)"
   }),
   '200': css({
-    gap: "var(--ds-space-200, 16px)"
+    [property]: "var(--ds-space-200, 16px)"
   }),
   '250': css({
-    gap: "var(--ds-space-250, 20px)"
+    [property]: "var(--ds-space-250, 20px)"
   }),
   '300': css({
-    gap: "var(--ds-space-300, 24px)"
+    [property]: "var(--ds-space-300, 24px)"
   }),
   '400': css({
-    gap: "var(--ds-space-400, 32px)"
+    [property]: "var(--ds-space-400, 32px)"
   }),
   '500': css({
-    gap: "var(--ds-space-500, 40px)"
+    [property]: "var(--ds-space-500, 40px)"
   }),
   '600': css({
-    gap: "var(--ds-space-600, 48px)"
+    [property]: "var(--ds-space-600, 48px)"
   }),
   '800': css({
-    gap: "var(--ds-space-800, 64px)"
+    [property]: "var(--ds-space-800, 64px)"
+  }),
+  '1000': css({
+    [property]: "var(--ds-space-1000, 80px)"
   })
-};
+}]));
 /**
@@ -154,3 +154,3 @@ * @codegenEnd
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
     "data-testid": testId,
@@ -157,0 +157,0 @@ ref: ref

dist/es2019/components/stack.partial.js

@@ -40,3 +40,3 @@ /** @jsx jsx */
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -47,46 +47,46 @@ * @codegenCommand yarn codegen-styles
  */
-const spaceMap = {
+const spaceMap = Object.fromEntries(['gap'].map(property => [property, {
   '0': css({
-    gap: "var(--ds-space-0, 0px)"
+    [property]: "var(--ds-space-0, 0px)"
   }),
   '025': css({
-    gap: "var(--ds-space-025, 2px)"
+    [property]: "var(--ds-space-025, 2px)"
   }),
   '050': css({
-    gap: "var(--ds-space-050, 4px)"
+    [property]: "var(--ds-space-050, 4px)"
   }),
   '075': css({
-    gap: "var(--ds-space-075, 6px)"
+    [property]: "var(--ds-space-075, 6px)"
   }),
   '100': css({
-    gap: "var(--ds-space-100, 8px)"
+    [property]: "var(--ds-space-100, 8px)"
   }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
   '150': css({
-    gap: "var(--ds-space-150, 12px)"
+    [property]: "var(--ds-space-150, 12px)"
   }),
   '200': css({
-    gap: "var(--ds-space-200, 16px)"
+    [property]: "var(--ds-space-200, 16px)"
   }),
   '250': css({
-    gap: "var(--ds-space-250, 20px)"
+    [property]: "var(--ds-space-250, 20px)"
   }),
   '300': css({
-    gap: "var(--ds-space-300, 24px)"
+    [property]: "var(--ds-space-300, 24px)"
   }),
   '400': css({
-    gap: "var(--ds-space-400, 32px)"
+    [property]: "var(--ds-space-400, 32px)"
   }),
   '500': css({
-    gap: "var(--ds-space-500, 40px)"
+    [property]: "var(--ds-space-500, 40px)"
   }),
   '600': css({
-    gap: "var(--ds-space-600, 48px)"
+    [property]: "var(--ds-space-600, 48px)"
   }),
   '800': css({
-    gap: "var(--ds-space-800, 64px)"
+    [property]: "var(--ds-space-800, 64px)"
+  }),
+  '1000': css({
+    [property]: "var(--ds-space-1000, 80px)"
   })
-};
+}]));
 /**
@@ -127,3 +127,3 @@ * @codegenEnd
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
@@ -130,0 +130,0 @@ ref: ref

dist/es2019/index.js

@@ -1,3 +0,3 @@
-export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { default as Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';
+export { default as Stack } from './components/stack.partial';

dist/es2019/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"sideEffects": false
 }

dist/esm/components/box.js

@@ -1,1 +0,77 @@
-export { default as Box } from '@atlaskit/ds-explorations/box';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "customStyles", "testId"],
+  _excluded2 = ["style", "className"];
+import React, { forwardRef } from 'react';
+import { BaseBox } from './internal/base-box.partial';
+var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var as = _ref.as,
+    children = _ref.children,
+    color = _ref.color,
+    backgroundColor = _ref.backgroundColor,
+    shadow = _ref.shadow,
+    borderStyle = _ref.borderStyle,
+    borderWidth = _ref.borderWidth,
+    borderRadius = _ref.borderRadius,
+    borderColor = _ref.borderColor,
+    layer = _ref.layer,
+    flex = _ref.flex,
+    flexGrow = _ref.flexGrow,
+    flexShrink = _ref.flexShrink,
+    alignSelf = _ref.alignSelf,
+    overflow = _ref.overflow,
+    overflowInline = _ref.overflowInline,
+    overflowBlock = _ref.overflowBlock,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    height = _ref.height,
+    width = _ref.width,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'static' : _ref$position,
+    customStyles = _ref.customStyles,
+    testId = _ref.testId,
+    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+  var style = htmlAttributes.style,
+    className = htmlAttributes.className,
+    safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
+  return /*#__PURE__*/React.createElement(BaseBox, _extends({
+    as: as,
+    color: color,
+    backgroundColor: backgroundColor,
+    shadow: shadow,
+    borderStyle: borderStyle,
+    borderWidth: borderWidth,
+    borderRadius: borderRadius,
+    borderColor: borderColor,
+    layer: layer,
+    flex: flex,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    alignSelf: alignSelf,
+    overflow: overflow,
+    overflowInline: overflowInline,
+    overflowBlock: overflowBlock,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    height: height,
+    width: width,
+    display: display,
+    position: position,
+    UNSAFE_style: customStyles,
+    testId: testId,
+    ref: ref
+  }, safeHtmlAttributes), children);
+});
+export { Box };

dist/esm/components/inline.partial.js

@@ -0,1 +1,2 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
@@ -46,3 +47,3 @@ import { Children, forwardRef, Fragment, memo } from 'react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -53,46 +54,20 @@ * @codegenCommand yarn codegen-styles
  */
-var spaceMap = {
-  '0': css({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
-  '150': css({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    gap: "var(--ds-space-800, 64px)"
-  })
-};
+var spaceMap = Object.fromEntries(['gap'].map(function (property) {
+  return [property, {
+    '0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
+    '025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
+    '050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
+    '075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
+    '100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
+    '150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
+    '200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
+    '250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
+    '300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
+    '400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
+    '500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
+    '600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
+    '800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
+    '1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
@@ -155,3 +130,3 @@ * @codegenEnd
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
     "data-testid": testId,
@@ -158,0 +133,0 @@ ref: ref

dist/esm/components/stack.partial.js

@@ -0,1 +1,2 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
@@ -40,3 +41,3 @@ import { forwardRef, memo } from 'react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -47,46 +48,20 @@ * @codegenCommand yarn codegen-styles
  */
-var spaceMap = {
-  '0': css({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
-  '150': css({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    gap: "var(--ds-space-800, 64px)"
-  })
-};
+var spaceMap = Object.fromEntries(['gap'].map(function (property) {
+  return [property, {
+    '0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
+    '025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
+    '050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
+    '075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
+    '100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
+    '150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
+    '200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
+    '250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
+    '300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
+    '400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
+    '500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
+    '600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
+    '800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
+    '1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
@@ -126,3 +101,3 @@ * @codegenEnd
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
@@ -129,0 +104,0 @@ ref: ref

dist/esm/index.js

@@ -1,3 +0,3 @@
-export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { default as Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';
+export { default as Stack } from './components/stack.partial';

dist/esm/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"sideEffects": false
 }

dist/types/components/box.d.ts

@@ -1,1 +0,10 @@
-export { default as Box } from '@atlaskit/ds-explorations/box';
+import { ElementType, FC, ReactElement } from 'react';
+import { BaseBoxProps } from './internal/base-box.partial';
+import { CustomStyles } from './types';
+declare type BoxPropsBase = {
+    customStyles?: CustomStyles;
+};
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | 'UNSAFE_style'> & BoxPropsBase;
+declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+declare const Box: BoxComponent;
+export { Box };

dist/types/components/inline.partial.d.ts

@@ -47,3 +47,3 @@ /** @jsx jsx */
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -55,18 +55,20 @@ * @codegenCommand yarn codegen-styles
 declare const spaceMap: {
-    '0': import("@emotion/react").SerializedStyles;
-    '025': import("@emotion/react").SerializedStyles;
-    '050': import("@emotion/react").SerializedStyles;
-    '075': import("@emotion/react").SerializedStyles;
-    '100': import("@emotion/react").SerializedStyles;
-    '1000': import("@emotion/react").SerializedStyles;
-    '150': import("@emotion/react").SerializedStyles;
-    '200': import("@emotion/react").SerializedStyles;
-    '250': import("@emotion/react").SerializedStyles;
-    '300': import("@emotion/react").SerializedStyles;
-    '400': import("@emotion/react").SerializedStyles;
-    '500': import("@emotion/react").SerializedStyles;
-    '600': import("@emotion/react").SerializedStyles;
-    '800': import("@emotion/react").SerializedStyles;
+    [k: string]: {
+        readonly '0': import("@emotion/react").SerializedStyles;
+        readonly '025': import("@emotion/react").SerializedStyles;
+        readonly '050': import("@emotion/react").SerializedStyles;
+        readonly '075': import("@emotion/react").SerializedStyles;
+        readonly '100': import("@emotion/react").SerializedStyles;
+        readonly '150': import("@emotion/react").SerializedStyles;
+        readonly '200': import("@emotion/react").SerializedStyles;
+        readonly '250': import("@emotion/react").SerializedStyles;
+        readonly '300': import("@emotion/react").SerializedStyles;
+        readonly '400': import("@emotion/react").SerializedStyles;
+        readonly '500': import("@emotion/react").SerializedStyles;
+        readonly '600': import("@emotion/react").SerializedStyles;
+        readonly '800': import("@emotion/react").SerializedStyles;
+        readonly '1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Space = keyof typeof spaceMap;
+export declare type Space = keyof typeof spaceMap.gap;
 /**
@@ -73,0 +75,0 @@ * __Inline__

dist/types/components/stack.partial.d.ts

@@ -39,3 +39,3 @@ /** @jsx jsx */
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
@@ -47,18 +47,20 @@ * @codegenCommand yarn codegen-styles
 declare const spaceMap: {
-    '0': import("@emotion/react").SerializedStyles;
-    '025': import("@emotion/react").SerializedStyles;
-    '050': import("@emotion/react").SerializedStyles;
-    '075': import("@emotion/react").SerializedStyles;
-    '100': import("@emotion/react").SerializedStyles;
-    '1000': import("@emotion/react").SerializedStyles;
-    '150': import("@emotion/react").SerializedStyles;
-    '200': import("@emotion/react").SerializedStyles;
-    '250': import("@emotion/react").SerializedStyles;
-    '300': import("@emotion/react").SerializedStyles;
-    '400': import("@emotion/react").SerializedStyles;
-    '500': import("@emotion/react").SerializedStyles;
-    '600': import("@emotion/react").SerializedStyles;
-    '800': import("@emotion/react").SerializedStyles;
+    [k: string]: {
+        readonly '0': import("@emotion/react").SerializedStyles;
+        readonly '025': import("@emotion/react").SerializedStyles;
+        readonly '050': import("@emotion/react").SerializedStyles;
+        readonly '075': import("@emotion/react").SerializedStyles;
+        readonly '100': import("@emotion/react").SerializedStyles;
+        readonly '150': import("@emotion/react").SerializedStyles;
+        readonly '200': import("@emotion/react").SerializedStyles;
+        readonly '250': import("@emotion/react").SerializedStyles;
+        readonly '300': import("@emotion/react").SerializedStyles;
+        readonly '400': import("@emotion/react").SerializedStyles;
+        readonly '500': import("@emotion/react").SerializedStyles;
+        readonly '600': import("@emotion/react").SerializedStyles;
+        readonly '800': import("@emotion/react").SerializedStyles;
+        readonly '1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Space = keyof typeof spaceMap;
+export declare type Space = keyof typeof spaceMap.gap;
 /**
@@ -65,0 +67,0 @@ * __Stack__

dist/types/components/types.d.ts

 import type { CSSProperties } from 'react';
+/**
+ * Restricted set of inline styles to be applied to the primitive.
+ * Should be avoided where possible, in favor of the pre-defined props and values on the primitive itself.
+ * Tokens should be used where possible.
+ */
+export declare type CustomStyles = Pick<CSSProperties, 'flexBasis' | 'flex' | 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight' | 'insetInlineStart' | 'insetInlineEnd' | 'insetBlockStart' | 'float' | 'margin' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInline' | 'marginBlock' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom'>;
 export interface BasePrimitiveProps {
@@ -10,5 +16,6 @@ /**
      * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
-     * Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
+     * Effectively equivalent to the standard `style` prop but marked with a special name.
+     * Used only internally.
      */
     UNSAFE_style?: CSSProperties;
 }

dist/types/index.d.ts

@@ -1,3 +0,3 @@
-export { default as Stack } from './components/stack.partial';
-export { Box } from './components/box';
-export { default as Inline } from './components/inline.partial';
+export { Box, type BoxProps } from './components/box';
+export { default as Inline, type InlineProps, } from './components/inline.partial';
+export { default as Stack, type StackProps } from './components/stack.partial';

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -40,3 +40,2 @@ "author": "Atlassian Pty Ltd",
   "dependencies": {
-    "@atlaskit/ds-explorations": "^2.0.1",
     "@atlaskit/tokens": "^1.2.0",
@@ -43,0 +42,0 @@ "@babel/runtime": "^7.0.0",

report.api.md

@@ -18,5 +18,10 @@ <!-- API Report Version: 2.3 -->
 ```ts
-import { default as Box } from '@atlaskit/ds-explorations/box';
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import type { CSSProperties } from 'react';
+import { ElementType } from 'react';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { MemoExoticComponent } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -27,6 +32,6 @@ import { RefAttributes } from 'react';
 // @public (undocumented)
-type AlignBlock = 'center' | 'end' | 'start';
+type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
 
 // @public (undocumented)
-type AlignBlock_2 = 'baseline' | 'center' | 'end' | 'start';
+type AlignBlock_2 = 'center' | 'end' | 'start';
 
@@ -39,5 +44,280 @@ // @public (undocumented)
 
-export { Box };
+// @public (undocumented)
+type AlignSelf = keyof typeof alignSelfMap;
 
 // @public (undocumented)
+const alignSelfMap: {
+  readonly center: SerializedStyles;
+  readonly start: SerializedStyles;
+  readonly stretch: SerializedStyles;
+  readonly end: SerializedStyles;
+  readonly baseline: SerializedStyles;
+};
+
+// @public (undocumented)
+type BackgroundColor = keyof typeof backgroundColorMap;
+
+// @public (undocumented)
+const backgroundColorMap: {
+  readonly 'accent.red.subtlest': SerializedStyles;
+  readonly 'accent.red.subtler': SerializedStyles;
+  readonly 'accent.red.subtle': SerializedStyles;
+  readonly 'accent.red.bolder': SerializedStyles;
+  readonly 'accent.orange.subtlest': SerializedStyles;
+  readonly 'accent.orange.subtler': SerializedStyles;
+  readonly 'accent.orange.subtle': SerializedStyles;
+  readonly 'accent.orange.bolder': SerializedStyles;
+  readonly 'accent.yellow.subtlest': SerializedStyles;
+  readonly 'accent.yellow.subtler': SerializedStyles;
+  readonly 'accent.yellow.subtle': SerializedStyles;
+  readonly 'accent.yellow.bolder': SerializedStyles;
+  readonly 'accent.green.subtlest': SerializedStyles;
+  readonly 'accent.green.subtler': SerializedStyles;
+  readonly 'accent.green.subtle': SerializedStyles;
+  readonly 'accent.green.bolder': SerializedStyles;
+  readonly 'accent.teal.subtlest': SerializedStyles;
+  readonly 'accent.teal.subtler': SerializedStyles;
+  readonly 'accent.teal.subtle': SerializedStyles;
+  readonly 'accent.teal.bolder': SerializedStyles;
+  readonly 'accent.blue.subtlest': SerializedStyles;
+  readonly 'accent.blue.subtler': SerializedStyles;
+  readonly 'accent.blue.subtle': SerializedStyles;
+  readonly 'accent.blue.bolder': SerializedStyles;
+  readonly 'accent.purple.subtlest': SerializedStyles;
+  readonly 'accent.purple.subtler': SerializedStyles;
+  readonly 'accent.purple.subtle': SerializedStyles;
+  readonly 'accent.purple.bolder': SerializedStyles;
+  readonly 'accent.magenta.subtlest': SerializedStyles;
+  readonly 'accent.magenta.subtler': SerializedStyles;
+  readonly 'accent.magenta.subtle': SerializedStyles;
+  readonly 'accent.magenta.bolder': SerializedStyles;
+  readonly 'accent.gray.subtlest': SerializedStyles;
+  readonly 'accent.gray.subtler': SerializedStyles;
+  readonly 'accent.gray.subtle': SerializedStyles;
+  readonly 'accent.gray.bolder': SerializedStyles;
+  readonly disabled: SerializedStyles;
+  readonly input: SerializedStyles;
+  readonly 'inverse.subtle': SerializedStyles;
+  readonly neutral: SerializedStyles;
+  readonly 'neutral.subtle': SerializedStyles;
+  readonly 'neutral.bold': SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly 'selected.bold': SerializedStyles;
+  readonly 'brand.bold': SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly 'danger.bold': SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly 'warning.bold': SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly 'success.bold': SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly 'discovery.bold': SerializedStyles;
+  readonly information: SerializedStyles;
+  readonly 'information.bold': SerializedStyles;
+  readonly 'color.blanket': SerializedStyles;
+  readonly 'color.blanket.selected': SerializedStyles;
+  readonly 'color.blanket.danger': SerializedStyles;
+  readonly 'elevation.surface': SerializedStyles;
+  readonly 'elevation.surface.overlay': SerializedStyles;
+  readonly 'elevation.surface.raised': SerializedStyles;
+  readonly 'elevation.surface.sunken': SerializedStyles;
+};
+
+// @public (undocumented)
+type BaseBoxProps<T extends ElementType = 'div'> = Omit<
+  ComponentPropsWithoutRef<T>,
+  'as' | 'className' | 'style'
+> &
+  BasePrimitiveProps &
+  BaseBoxPropsFoundation<T>;
+
+// @public (undocumented)
+type BaseBoxPropsFoundation<T extends ElementType> = {
+  as?: 'div' | 'span';
+  className?: string;
+  children?: ReactNode;
+  color?: TextColor;
+  backgroundColor?: BackgroundColor;
+  shadow?: Shadow;
+  borderStyle?: BorderStyle;
+  borderWidth?: BorderWidth;
+  borderColor?: BorderColor;
+  borderRadius?: BorderRadius;
+  layer?: Layer;
+  flex?: Flex;
+  flexGrow?: FlexGrow;
+  flexShrink?: FlexShrink;
+  alignSelf?: AlignSelf;
+  overflow?: Overflow;
+  overflowInline?: OverflowInline;
+  overflowBlock?: OverflowBlock;
+  padding?: Padding;
+  paddingBlock?: PaddingBlock;
+  paddingBlockStart?: PaddingBlockStart;
+  paddingBlockEnd?: PaddingBlockEnd;
+  paddingInline?: PaddingInline;
+  paddingInlineStart?: PaddingInlineStart;
+  paddingInlineEnd?: PaddingInlineEnd;
+  width?: Width;
+  height?: Height;
+  display?: Display;
+  position?: Position;
+  ref?: ComponentPropsWithRef<T>['ref'];
+};
+
+// @public (undocumented)
+interface BasePrimitiveProps {
+  testId?: string;
+  UNSAFE_style?: CSSProperties;
+}
+
+// @public (undocumented)
+type BorderColor = keyof typeof borderColorMap;
+
+// @public
+const borderColorMap: {
+  readonly 'color.border': SerializedStyles;
+  readonly 'accent.red': SerializedStyles;
+  readonly 'accent.orange': SerializedStyles;
+  readonly 'accent.yellow': SerializedStyles;
+  readonly 'accent.green': SerializedStyles;
+  readonly 'accent.teal': SerializedStyles;
+  readonly 'accent.blue': SerializedStyles;
+  readonly 'accent.purple': SerializedStyles;
+  readonly 'accent.magenta': SerializedStyles;
+  readonly 'accent.gray': SerializedStyles;
+  readonly disabled: SerializedStyles;
+  readonly focused: SerializedStyles;
+  readonly input: SerializedStyles;
+  readonly inverse: SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly brand: SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly information: SerializedStyles;
+  readonly bold: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderRadius = keyof typeof borderRadiusMap;
+
+// @public (undocumented)
+const borderRadiusMap: {
+  'radius.100': SerializedStyles;
+  'radius.200': SerializedStyles;
+  'radius.round': SerializedStyles;
+  'radius.300': SerializedStyles;
+  'radius.400': SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderStyle = keyof typeof borderStyleMap;
+
+// @public (undocumented)
+const borderStyleMap: {
+  readonly none: SerializedStyles;
+  readonly solid: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderWidth = keyof typeof borderWidthMap;
+
+// @public (undocumented)
+const borderWidthMap: {
+  readonly 'size.050': SerializedStyles;
+  readonly 'size.100': SerializedStyles;
+};
+
+// @public (undocumented)
+export const Box: BoxComponent;
+
+// @public (undocumented)
+type BoxComponent<T extends ElementType = 'div'> = (<
+  T extends ElementType = 'div',
+>(
+  props: BoxProps<T>,
+) => ReactElement | null) &
+  FC<BoxProps<T>>;
+
+// @public (undocumented)
+export type BoxProps<T extends ElementType = 'div'> = Omit<
+  BaseBoxProps<T>,
+  'UNSAFE_style' | 'className'
+> &
+  BoxPropsBase;
+
+// @public (undocumented)
+type BoxPropsBase = {
+  customStyles?: CustomStyles;
+};
+
+// @public
+type CustomStyles = Pick<
+  CSSProperties,
+  | 'flex'
+  | 'flexBasis'
+  | 'float'
+  | 'height'
+  | 'insetBlockStart'
+  | 'insetInlineEnd'
+  | 'insetInlineStart'
+  | 'margin'
+  | 'marginBlock'
+  | 'marginBlockEnd'
+  | 'marginBlockStart'
+  | 'marginInline'
+  | 'marginInlineEnd'
+  | 'marginInlineStart'
+  | 'maxHeight'
+  | 'maxWidth'
+  | 'minHeight'
+  | 'minWidth'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingRight'
+  | 'paddingTop'
+  | 'width'
+>;
+
+// @public (undocumented)
+type Display = keyof typeof displayMap;
+
+// @public (undocumented)
+const displayMap: {
+  readonly block: SerializedStyles;
+  readonly inline: SerializedStyles;
+  readonly flex: SerializedStyles;
+  readonly 'inline-flex': SerializedStyles;
+  readonly 'inline-block': SerializedStyles;
+};
+
+// @public (undocumented)
+type Flex = keyof typeof flexMap;
+
+// @public (undocumented)
+type FlexGrow = keyof typeof flexGrowMap;
+
+// @public (undocumented)
+const flexGrowMap: {
+  readonly '0': SerializedStyles;
+  readonly '1': SerializedStyles;
+};
+
+// @public (undocumented)
+const flexMap: {
+  readonly '1': SerializedStyles;
+};
+
+// @public (undocumented)
+type FlexShrink = keyof typeof flexShrinkMap;
+
+// @public (undocumented)
+const flexShrinkMap: {
+  readonly '0': SerializedStyles;
+  readonly '1': SerializedStyles;
+};
+
+// @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -48,2 +328,17 @@
 
+// @public (undocumented)
+type Height = keyof typeof heightMap;
+
+// @public (undocumented)
+const heightMap: {
+  readonly '100%': SerializedStyles;
+  readonly 'size.100': SerializedStyles;
+  readonly 'size.200': SerializedStyles;
+  readonly 'size.300': SerializedStyles;
+  readonly 'size.400': SerializedStyles;
+  readonly 'size.500': SerializedStyles;
+  readonly 'size.600': SerializedStyles;
+  readonly 'size.1000': SerializedStyles;
+};
+
 // @public
@@ -55,11 +350,11 @@ export const Inline: MemoExoticComponent<
 // @public (undocumented)
-interface InlineProps {
-  alignBlock?: AlignBlock_2;
-  alignInline?: AlignInline_2;
+export interface InlineProps {
+  alignBlock?: AlignBlock;
+  alignInline?: AlignInline;
   children: ReactNode;
-  grow?: Grow_2;
+  grow?: Grow;
   separator?: string;
   shouldWrap?: boolean;
-  space?: Space_2;
-  spread?: Spread_2;
+  space?: Space;
+  spread?: Spread;
   testId?: string;
@@ -69,23 +364,132 @@ }
 // @public (undocumented)
-type Space = keyof typeof spaceMap;
+type Layer = keyof typeof LAYERS;
 
 // @public (undocumented)
-type Space_2 = keyof typeof spaceMap_2;
+const LAYERS: {
+  readonly card: 100;
+  readonly navigation: 200;
+  readonly dialog: 300;
+  readonly layer: 400;
+  readonly blanket: 500;
+  readonly modal: 510;
+  readonly flag: 600;
+  readonly spotlight: 700;
+  readonly tooltip: 800;
+};
 
+// @public (undocumented)
+type Overflow = keyof typeof overflowMap;
+
+// @public (undocumented)
+type OverflowBlock = keyof typeof overflowBlockMap;
+
+// @public (undocumented)
+const overflowBlockMap: {
+  readonly auto: SerializedStyles;
+  readonly hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+type OverflowInline = keyof typeof overflowInlineMap;
+
+// @public (undocumented)
+const overflowInlineMap: {
+  readonly auto: SerializedStyles;
+  readonly hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+const overflowMap: {
+  readonly auto: SerializedStyles;
+  readonly hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+type Padding = keyof typeof paddingMap.padding;
+
+// @public (undocumented)
+type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+
+// @public (undocumented)
+type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+
+// @public (undocumented)
+type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+
+// @public (undocumented)
+type PaddingInline = keyof typeof paddingMap.paddingInline;
+
+// @public (undocumented)
+type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
+
+// @public (undocumented)
+type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
+
 // @public
+const paddingMap: {
+  [k: string]: {
+    readonly 'space.0': SerializedStyles;
+    readonly 'space.025': SerializedStyles;
+    readonly 'space.050': SerializedStyles;
+    readonly 'space.075': SerializedStyles;
+    readonly 'space.100': SerializedStyles;
+    readonly 'space.150': SerializedStyles;
+    readonly 'space.200': SerializedStyles;
+    readonly 'space.250': SerializedStyles;
+    readonly 'space.300': SerializedStyles;
+    readonly 'space.400': SerializedStyles;
+    readonly 'space.500': SerializedStyles;
+    readonly 'space.600': SerializedStyles;
+    readonly 'space.800': SerializedStyles;
+    readonly 'space.1000': SerializedStyles;
+  };
+};
+
+// @public (undocumented)
+type Position = keyof typeof positionMap;
+
+// @public (undocumented)
+const positionMap: {
+  readonly absolute: SerializedStyles;
+  readonly fixed: SerializedStyles;
+  readonly relative: SerializedStyles;
+  readonly static: SerializedStyles;
+};
+
+// @public (undocumented)
+type Shadow = keyof typeof shadowMap;
+
+// @public (undocumented)
+const shadowMap: {
+  readonly overflow: SerializedStyles;
+  readonly 'overflow.perimeter': SerializedStyles;
+  readonly 'overflow.spread': SerializedStyles;
+  readonly overlay: SerializedStyles;
+  readonly raised: SerializedStyles;
+};
+
+// @public (undocumented)
+type Space = keyof typeof spaceMap.gap;
+
+// @public (undocumented)
+type Space_2 = keyof typeof spaceMap_2.gap;
+
+// @public
 const spaceMap: {
-  '0': SerializedStyles;
-  '025': SerializedStyles;
-  '050': SerializedStyles;
-  '075': SerializedStyles;
-  '100': SerializedStyles;
-  '1000': SerializedStyles;
-  '150': SerializedStyles;
-  '200': SerializedStyles;
-  '250': SerializedStyles;
-  '300': SerializedStyles;
-  '400': SerializedStyles;
-  '500': SerializedStyles;
-  '600': SerializedStyles;
-  '800': SerializedStyles;
+  [k: string]: {
+    readonly '0': SerializedStyles;
+    readonly '025': SerializedStyles;
+    readonly '050': SerializedStyles;
+    readonly '075': SerializedStyles;
+    readonly '100': SerializedStyles;
+    readonly '150': SerializedStyles;
+    readonly '200': SerializedStyles;
+    readonly '250': SerializedStyles;
+    readonly '300': SerializedStyles;
+    readonly '400': SerializedStyles;
+    readonly '500': SerializedStyles;
+    readonly '600': SerializedStyles;
+    readonly '800': SerializedStyles;
+    readonly '1000': SerializedStyles;
+  };
 };
@@ -95,16 +499,18 @@
 const spaceMap_2: {
-  '0': SerializedStyles;
-  '025': SerializedStyles;
-  '050': SerializedStyles;
-  '075': SerializedStyles;
-  '100': SerializedStyles;
-  '1000': SerializedStyles;
-  '150': SerializedStyles;
-  '200': SerializedStyles;
-  '250': SerializedStyles;
-  '300': SerializedStyles;
-  '400': SerializedStyles;
-  '500': SerializedStyles;
-  '600': SerializedStyles;
-  '800': SerializedStyles;
+  [k: string]: {
+    readonly '0': SerializedStyles;
+    readonly '025': SerializedStyles;
+    readonly '050': SerializedStyles;
+    readonly '075': SerializedStyles;
+    readonly '100': SerializedStyles;
+    readonly '150': SerializedStyles;
+    readonly '200': SerializedStyles;
+    readonly '250': SerializedStyles;
+    readonly '300': SerializedStyles;
+    readonly '400': SerializedStyles;
+    readonly '500': SerializedStyles;
+    readonly '600': SerializedStyles;
+    readonly '800': SerializedStyles;
+    readonly '1000': SerializedStyles;
+  };
 };
@@ -124,12 +530,65 @@
 // @public (undocumented)
-interface StackProps {
-  alignBlock?: AlignBlock;
-  alignInline?: AlignInline;
+export interface StackProps {
+  alignBlock?: AlignBlock_2;
+  alignInline?: AlignInline_2;
   children: ReactNode;
-  grow?: Grow;
-  space?: Space;
-  spread?: Spread;
+  grow?: Grow_2;
+  space?: Space_2;
+  spread?: Spread_2;
   testId?: string;
 }
 
+// @public (undocumented)
+type TextColor = keyof typeof textColorMap;
+
+// @public (undocumented)
+const textColorMap: {
+  readonly 'color.text': SerializedStyles;
+  readonly 'accent.red': SerializedStyles;
+  readonly 'accent.red.bolder': SerializedStyles;
+  readonly 'accent.orange': SerializedStyles;
+  readonly 'accent.orange.bolder': SerializedStyles;
+  readonly 'accent.yellow': SerializedStyles;
+  readonly 'accent.yellow.bolder': SerializedStyles;
+  readonly 'accent.green': SerializedStyles;
+  readonly 'accent.green.bolder': SerializedStyles;
+  readonly 'accent.teal': SerializedStyles;
+  readonly 'accent.teal.bolder': SerializedStyles;
+  readonly 'accent.blue': SerializedStyles;
+  readonly 'accent.blue.bolder': SerializedStyles;
+  readonly 'accent.purple': SerializedStyles;
+  readonly 'accent.purple.bolder': SerializedStyles;
+  readonly 'accent.magenta': SerializedStyles;
+  readonly 'accent.magenta.bolder': SerializedStyles;
+  readonly 'accent.gray': SerializedStyles;
+  readonly 'accent.gray.bolder': SerializedStyles;
+  readonly disabled: SerializedStyles;
+  readonly inverse: SerializedStyles;
+  readonly selected: SerializedStyles;
+  readonly brand: SerializedStyles;
+  readonly danger: SerializedStyles;
+  readonly warning: SerializedStyles;
+  readonly 'warning.inverse': SerializedStyles;
+  readonly success: SerializedStyles;
+  readonly discovery: SerializedStyles;
+  readonly information: SerializedStyles;
+  readonly subtlest: SerializedStyles;
+  readonly subtle: SerializedStyles;
+};
+
+// @public (undocumented)
+type Width = keyof typeof widthMap;
+
+// @public
+const widthMap: {
+  readonly '100%': SerializedStyles;
+  readonly 'size.100': SerializedStyles;
+  readonly 'size.200': SerializedStyles;
+  readonly 'size.300': SerializedStyles;
+  readonly 'size.400': SerializedStyles;
+  readonly 'size.500': SerializedStyles;
+  readonly 'size.600': SerializedStyles;
+  readonly 'size.1000': SerializedStyles;
+};
+
 // (No @packageDocumentation comment for this package)
@@ -136,0 +595,0 @@ ```

tmp/api-report-tmp.d.ts

@@ -7,5 +7,10 @@ ## API Report File for "@atlaskit/primitives"
 
-import { default as Box } from '@atlaskit/ds-explorations/box';
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import type { CSSProperties } from 'react';
+import { ElementType } from 'react';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { MemoExoticComponent } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -16,6 +21,6 @@ import { RefAttributes } from 'react';
 // @public (undocumented)
-type AlignBlock = 'center' | 'end' | 'start';
+type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
 
 // @public (undocumented)
-type AlignBlock_2 = 'baseline' | 'center' | 'end' | 'start';
+type AlignBlock_2 = 'center' | 'end' | 'start';
 
@@ -28,5 +33,241 @@ // @public (undocumented)
 
-export { Box }
+// @public (undocumented)
+type AlignSelf = keyof typeof alignSelfMap;
 
 // @public (undocumented)
+const alignSelfMap: {
+    readonly center: SerializedStyles;
+    readonly start: SerializedStyles;
+    readonly stretch: SerializedStyles;
+    readonly end: SerializedStyles;
+    readonly baseline: SerializedStyles;
+};
+
+// @public (undocumented)
+type BackgroundColor = keyof typeof backgroundColorMap;
+
+// @public (undocumented)
+const backgroundColorMap: {
+    readonly 'accent.red.subtlest': SerializedStyles;
+    readonly 'accent.red.subtler': SerializedStyles;
+    readonly 'accent.red.subtle': SerializedStyles;
+    readonly 'accent.red.bolder': SerializedStyles;
+    readonly 'accent.orange.subtlest': SerializedStyles;
+    readonly 'accent.orange.subtler': SerializedStyles;
+    readonly 'accent.orange.subtle': SerializedStyles;
+    readonly 'accent.orange.bolder': SerializedStyles;
+    readonly 'accent.yellow.subtlest': SerializedStyles;
+    readonly 'accent.yellow.subtler': SerializedStyles;
+    readonly 'accent.yellow.subtle': SerializedStyles;
+    readonly 'accent.yellow.bolder': SerializedStyles;
+    readonly 'accent.green.subtlest': SerializedStyles;
+    readonly 'accent.green.subtler': SerializedStyles;
+    readonly 'accent.green.subtle': SerializedStyles;
+    readonly 'accent.green.bolder': SerializedStyles;
+    readonly 'accent.teal.subtlest': SerializedStyles;
+    readonly 'accent.teal.subtler': SerializedStyles;
+    readonly 'accent.teal.subtle': SerializedStyles;
+    readonly 'accent.teal.bolder': SerializedStyles;
+    readonly 'accent.blue.subtlest': SerializedStyles;
+    readonly 'accent.blue.subtler': SerializedStyles;
+    readonly 'accent.blue.subtle': SerializedStyles;
+    readonly 'accent.blue.bolder': SerializedStyles;
+    readonly 'accent.purple.subtlest': SerializedStyles;
+    readonly 'accent.purple.subtler': SerializedStyles;
+    readonly 'accent.purple.subtle': SerializedStyles;
+    readonly 'accent.purple.bolder': SerializedStyles;
+    readonly 'accent.magenta.subtlest': SerializedStyles;
+    readonly 'accent.magenta.subtler': SerializedStyles;
+    readonly 'accent.magenta.subtle': SerializedStyles;
+    readonly 'accent.magenta.bolder': SerializedStyles;
+    readonly 'accent.gray.subtlest': SerializedStyles;
+    readonly 'accent.gray.subtler': SerializedStyles;
+    readonly 'accent.gray.subtle': SerializedStyles;
+    readonly 'accent.gray.bolder': SerializedStyles;
+    readonly disabled: SerializedStyles;
+    readonly input: SerializedStyles;
+    readonly 'inverse.subtle': SerializedStyles;
+    readonly neutral: SerializedStyles;
+    readonly 'neutral.subtle': SerializedStyles;
+    readonly 'neutral.bold': SerializedStyles;
+    readonly selected: SerializedStyles;
+    readonly 'selected.bold': SerializedStyles;
+    readonly 'brand.bold': SerializedStyles;
+    readonly danger: SerializedStyles;
+    readonly 'danger.bold': SerializedStyles;
+    readonly warning: SerializedStyles;
+    readonly 'warning.bold': SerializedStyles;
+    readonly success: SerializedStyles;
+    readonly 'success.bold': SerializedStyles;
+    readonly discovery: SerializedStyles;
+    readonly 'discovery.bold': SerializedStyles;
+    readonly information: SerializedStyles;
+    readonly 'information.bold': SerializedStyles;
+    readonly 'color.blanket': SerializedStyles;
+    readonly 'color.blanket.selected': SerializedStyles;
+    readonly 'color.blanket.danger': SerializedStyles;
+    readonly 'elevation.surface': SerializedStyles;
+    readonly 'elevation.surface.overlay': SerializedStyles;
+    readonly 'elevation.surface.raised': SerializedStyles;
+    readonly 'elevation.surface.sunken': SerializedStyles;
+};
+
+// @public (undocumented)
+type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+
+// @public (undocumented)
+type BaseBoxPropsFoundation<T extends ElementType> = {
+    as?: 'div' | 'span';
+    className?: string;
+    children?: ReactNode;
+    color?: TextColor;
+    backgroundColor?: BackgroundColor;
+    shadow?: Shadow;
+    borderStyle?: BorderStyle;
+    borderWidth?: BorderWidth;
+    borderColor?: BorderColor;
+    borderRadius?: BorderRadius;
+    layer?: Layer;
+    flex?: Flex;
+    flexGrow?: FlexGrow;
+    flexShrink?: FlexShrink;
+    alignSelf?: AlignSelf;
+    overflow?: Overflow;
+    overflowInline?: OverflowInline;
+    overflowBlock?: OverflowBlock;
+    padding?: Padding;
+    paddingBlock?: PaddingBlock;
+    paddingBlockStart?: PaddingBlockStart;
+    paddingBlockEnd?: PaddingBlockEnd;
+    paddingInline?: PaddingInline;
+    paddingInlineStart?: PaddingInlineStart;
+    paddingInlineEnd?: PaddingInlineEnd;
+    width?: Width;
+    height?: Height;
+    display?: Display;
+    position?: Position;
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+
+// @public (undocumented)
+interface BasePrimitiveProps {
+    testId?: string;
+    UNSAFE_style?: CSSProperties;
+}
+
+// @public (undocumented)
+type BorderColor = keyof typeof borderColorMap;
+
+// @public
+const borderColorMap: {
+    readonly 'color.border': SerializedStyles;
+    readonly 'accent.red': SerializedStyles;
+    readonly 'accent.orange': SerializedStyles;
+    readonly 'accent.yellow': SerializedStyles;
+    readonly 'accent.green': SerializedStyles;
+    readonly 'accent.teal': SerializedStyles;
+    readonly 'accent.blue': SerializedStyles;
+    readonly 'accent.purple': SerializedStyles;
+    readonly 'accent.magenta': SerializedStyles;
+    readonly 'accent.gray': SerializedStyles;
+    readonly disabled: SerializedStyles;
+    readonly focused: SerializedStyles;
+    readonly input: SerializedStyles;
+    readonly inverse: SerializedStyles;
+    readonly selected: SerializedStyles;
+    readonly brand: SerializedStyles;
+    readonly danger: SerializedStyles;
+    readonly warning: SerializedStyles;
+    readonly success: SerializedStyles;
+    readonly discovery: SerializedStyles;
+    readonly information: SerializedStyles;
+    readonly bold: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderRadius = keyof typeof borderRadiusMap;
+
+// @public (undocumented)
+const borderRadiusMap: {
+    'radius.100': SerializedStyles;
+    'radius.200': SerializedStyles;
+    'radius.round': SerializedStyles;
+    'radius.300': SerializedStyles;
+    'radius.400': SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderStyle = keyof typeof borderStyleMap;
+
+// @public (undocumented)
+const borderStyleMap: {
+    readonly none: SerializedStyles;
+    readonly solid: SerializedStyles;
+};
+
+// @public (undocumented)
+type BorderWidth = keyof typeof borderWidthMap;
+
+// @public (undocumented)
+const borderWidthMap: {
+    readonly 'size.050': SerializedStyles;
+    readonly 'size.100': SerializedStyles;
+};
+
+// @public (undocumented)
+export const Box: BoxComponent;
+
+// @public (undocumented)
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+
+// @public (undocumented)
+export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'UNSAFE_style' | 'className'> & BoxPropsBase;
+
+// @public (undocumented)
+type BoxPropsBase = {
+    customStyles?: CustomStyles;
+};
+
+// @public
+type CustomStyles = Pick<CSSProperties, 'flex' | 'flexBasis' | 'float' | 'height' | 'insetBlockStart' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'width'>;
+
+// @public (undocumented)
+type Display = keyof typeof displayMap;
+
+// @public (undocumented)
+const displayMap: {
+    readonly block: SerializedStyles;
+    readonly inline: SerializedStyles;
+    readonly flex: SerializedStyles;
+    readonly 'inline-flex': SerializedStyles;
+    readonly 'inline-block': SerializedStyles;
+};
+
+// @public (undocumented)
+type Flex = keyof typeof flexMap;
+
+// @public (undocumented)
+type FlexGrow = keyof typeof flexGrowMap;
+
+// @public (undocumented)
+const flexGrowMap: {
+    readonly '0': SerializedStyles;
+    readonly '1': SerializedStyles;
+};
+
+// @public (undocumented)
+const flexMap: {
+    readonly '1': SerializedStyles;
+};
+
+// @public (undocumented)
+type FlexShrink = keyof typeof flexShrinkMap;
+
+// @public (undocumented)
+const flexShrinkMap: {
+    readonly '0': SerializedStyles;
+    readonly '1': SerializedStyles;
+};
+
+// @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -37,2 +278,17 @@
 
+// @public (undocumented)
+type Height = keyof typeof heightMap;
+
+// @public (undocumented)
+const heightMap: {
+    readonly '100%': SerializedStyles;
+    readonly 'size.100': SerializedStyles;
+    readonly 'size.200': SerializedStyles;
+    readonly 'size.300': SerializedStyles;
+    readonly 'size.400': SerializedStyles;
+    readonly 'size.500': SerializedStyles;
+    readonly 'size.600': SerializedStyles;
+    readonly 'size.1000': SerializedStyles;
+};
+
 // @public
@@ -42,11 +298,11 @@ export const Inline: MemoExoticComponent<ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>>;
 // @public (undocumented)
-interface InlineProps {
-    alignBlock?: AlignBlock_2;
-    alignInline?: AlignInline_2;
+export interface InlineProps {
+    alignBlock?: AlignBlock;
+    alignInline?: AlignInline;
     children: ReactNode;
-    grow?: Grow_2;
+    grow?: Grow;
     separator?: string;
     shouldWrap?: boolean;
-    space?: Space_2;
-    spread?: Spread_2;
+    space?: Space;
+    spread?: Spread;
     testId?: string;
@@ -56,23 +312,132 @@ }
 // @public (undocumented)
-type Space = keyof typeof spaceMap;
+type Layer = keyof typeof LAYERS;
 
 // @public (undocumented)
-type Space_2 = keyof typeof spaceMap_2;
+const LAYERS: {
+    readonly card: 100;
+    readonly navigation: 200;
+    readonly dialog: 300;
+    readonly layer: 400;
+    readonly blanket: 500;
+    readonly modal: 510;
+    readonly flag: 600;
+    readonly spotlight: 700;
+    readonly tooltip: 800;
+};
 
+// @public (undocumented)
+type Overflow = keyof typeof overflowMap;
+
+// @public (undocumented)
+type OverflowBlock = keyof typeof overflowBlockMap;
+
+// @public (undocumented)
+const overflowBlockMap: {
+    readonly auto: SerializedStyles;
+    readonly hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+type OverflowInline = keyof typeof overflowInlineMap;
+
+// @public (undocumented)
+const overflowInlineMap: {
+    readonly auto: SerializedStyles;
+    readonly hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+const overflowMap: {
+    readonly auto: SerializedStyles;
+    readonly hidden: SerializedStyles;
+};
+
+// @public (undocumented)
+type Padding = keyof typeof paddingMap.padding;
+
+// @public (undocumented)
+type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+
+// @public (undocumented)
+type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+
+// @public (undocumented)
+type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+
+// @public (undocumented)
+type PaddingInline = keyof typeof paddingMap.paddingInline;
+
+// @public (undocumented)
+type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
+
+// @public (undocumented)
+type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
+
 // @public
+const paddingMap: {
+    [k: string]: {
+        readonly 'space.0': SerializedStyles;
+        readonly 'space.025': SerializedStyles;
+        readonly 'space.050': SerializedStyles;
+        readonly 'space.075': SerializedStyles;
+        readonly 'space.100': SerializedStyles;
+        readonly 'space.150': SerializedStyles;
+        readonly 'space.200': SerializedStyles;
+        readonly 'space.250': SerializedStyles;
+        readonly 'space.300': SerializedStyles;
+        readonly 'space.400': SerializedStyles;
+        readonly 'space.500': SerializedStyles;
+        readonly 'space.600': SerializedStyles;
+        readonly 'space.800': SerializedStyles;
+        readonly 'space.1000': SerializedStyles;
+    };
+};
+
+// @public (undocumented)
+type Position = keyof typeof positionMap;
+
+// @public (undocumented)
+const positionMap: {
+    readonly absolute: SerializedStyles;
+    readonly fixed: SerializedStyles;
+    readonly relative: SerializedStyles;
+    readonly static: SerializedStyles;
+};
+
+// @public (undocumented)
+type Shadow = keyof typeof shadowMap;
+
+// @public (undocumented)
+const shadowMap: {
+    readonly overflow: SerializedStyles;
+    readonly 'overflow.perimeter': SerializedStyles;
+    readonly 'overflow.spread': SerializedStyles;
+    readonly overlay: SerializedStyles;
+    readonly raised: SerializedStyles;
+};
+
+// @public (undocumented)
+type Space = keyof typeof spaceMap.gap;
+
+// @public (undocumented)
+type Space_2 = keyof typeof spaceMap_2.gap;
+
+// @public
 const spaceMap: {
-    '0': SerializedStyles;
-    '025': SerializedStyles;
-    '050': SerializedStyles;
-    '075': SerializedStyles;
-    '100': SerializedStyles;
-    '1000': SerializedStyles;
-    '150': SerializedStyles;
-    '200': SerializedStyles;
-    '250': SerializedStyles;
-    '300': SerializedStyles;
-    '400': SerializedStyles;
-    '500': SerializedStyles;
-    '600': SerializedStyles;
-    '800': SerializedStyles;
+    [k: string]: {
+        readonly '0': SerializedStyles;
+        readonly '025': SerializedStyles;
+        readonly '050': SerializedStyles;
+        readonly '075': SerializedStyles;
+        readonly '100': SerializedStyles;
+        readonly '150': SerializedStyles;
+        readonly '200': SerializedStyles;
+        readonly '250': SerializedStyles;
+        readonly '300': SerializedStyles;
+        readonly '400': SerializedStyles;
+        readonly '500': SerializedStyles;
+        readonly '600': SerializedStyles;
+        readonly '800': SerializedStyles;
+        readonly '1000': SerializedStyles;
+    };
 };
@@ -82,16 +447,18 @@
 const spaceMap_2: {
-    '0': SerializedStyles;
-    '025': SerializedStyles;
-    '050': SerializedStyles;
-    '075': SerializedStyles;
-    '100': SerializedStyles;
-    '1000': SerializedStyles;
-    '150': SerializedStyles;
-    '200': SerializedStyles;
-    '250': SerializedStyles;
-    '300': SerializedStyles;
-    '400': SerializedStyles;
-    '500': SerializedStyles;
-    '600': SerializedStyles;
-    '800': SerializedStyles;
+    [k: string]: {
+        readonly '0': SerializedStyles;
+        readonly '025': SerializedStyles;
+        readonly '050': SerializedStyles;
+        readonly '075': SerializedStyles;
+        readonly '100': SerializedStyles;
+        readonly '150': SerializedStyles;
+        readonly '200': SerializedStyles;
+        readonly '250': SerializedStyles;
+        readonly '300': SerializedStyles;
+        readonly '400': SerializedStyles;
+        readonly '500': SerializedStyles;
+        readonly '600': SerializedStyles;
+        readonly '800': SerializedStyles;
+        readonly '1000': SerializedStyles;
+    };
 };
@@ -109,14 +476,67 @@
 // @public (undocumented)
-interface StackProps {
-    alignBlock?: AlignBlock;
-    alignInline?: AlignInline;
+export interface StackProps {
+    alignBlock?: AlignBlock_2;
+    alignInline?: AlignInline_2;
     children: ReactNode;
-    grow?: Grow;
-    space?: Space;
-    spread?: Spread;
+    grow?: Grow_2;
+    space?: Space_2;
+    spread?: Spread_2;
     testId?: string;
 }
 
+// @public (undocumented)
+type TextColor = keyof typeof textColorMap;
+
+// @public (undocumented)
+const textColorMap: {
+    readonly 'color.text': SerializedStyles;
+    readonly 'accent.red': SerializedStyles;
+    readonly 'accent.red.bolder': SerializedStyles;
+    readonly 'accent.orange': SerializedStyles;
+    readonly 'accent.orange.bolder': SerializedStyles;
+    readonly 'accent.yellow': SerializedStyles;
+    readonly 'accent.yellow.bolder': SerializedStyles;
+    readonly 'accent.green': SerializedStyles;
+    readonly 'accent.green.bolder': SerializedStyles;
+    readonly 'accent.teal': SerializedStyles;
+    readonly 'accent.teal.bolder': SerializedStyles;
+    readonly 'accent.blue': SerializedStyles;
+    readonly 'accent.blue.bolder': SerializedStyles;
+    readonly 'accent.purple': SerializedStyles;
+    readonly 'accent.purple.bolder': SerializedStyles;
+    readonly 'accent.magenta': SerializedStyles;
+    readonly 'accent.magenta.bolder': SerializedStyles;
+    readonly 'accent.gray': SerializedStyles;
+    readonly 'accent.gray.bolder': SerializedStyles;
+    readonly disabled: SerializedStyles;
+    readonly inverse: SerializedStyles;
+    readonly selected: SerializedStyles;
+    readonly brand: SerializedStyles;
+    readonly danger: SerializedStyles;
+    readonly warning: SerializedStyles;
+    readonly 'warning.inverse': SerializedStyles;
+    readonly success: SerializedStyles;
+    readonly discovery: SerializedStyles;
+    readonly information: SerializedStyles;
+    readonly subtlest: SerializedStyles;
+    readonly subtle: SerializedStyles;
+};
+
+// @public (undocumented)
+type Width = keyof typeof widthMap;
+
+// @public
+const widthMap: {
+    readonly '100%': SerializedStyles;
+    readonly 'size.100': SerializedStyles;
+    readonly 'size.200': SerializedStyles;
+    readonly 'size.300': SerializedStyles;
+    readonly 'size.400': SerializedStyles;
+    readonly 'size.500': SerializedStyles;
+    readonly 'size.600': SerializedStyles;
+    readonly 'size.1000': SerializedStyles;
+};
+
 // (No @packageDocumentation comment for this package)
 
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

211946

increased by64.6%

Dependency count

4

decreased by-20%

Lines of code

5389

increased by34.69%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@atlaskit/ds-explorations@^2.0.1

• - Removed@atlaskit/ds-explorations@2.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedtiny-invariant@1.3.3(transitive)