@atlaskit/primitives - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

 # @atlaskit/primitives
 
+## 0.6.0
+
+### Minor Changes
+
+- [`4d60ec345a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d60ec345a5) - Remove internal/exploratory responsive props available in BaseBox.
+
 ## 0.5.0
@@ -4,0 +10,0 @@

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");
@@ -55,96 +57,26 @@ var _react2 = require("@emotion/react");
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-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)"
-  }),
-  '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)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  })
-};
-var rowSpaceMap = {
-  '0': (0, _react2.css)({
-    rowGap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    rowGap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    rowGap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    rowGap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    rowGap: "var(--ds-space-100, 8px)"
-  }),
-  '150': (0, _react2.css)({
-    rowGap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    rowGap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    rowGap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    rowGap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    rowGap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    rowGap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    rowGap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    rowGap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': (0, _react2.css)({
-    rowGap: "var(--ds-space-1000, 80px)"
-  })
-};
+var inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].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)"))
+  }];
+}));
 /**
@@ -210,3 +142,3 @@ * @codegenEnd
   return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
+    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
     "data-testid": testId,
@@ -213,0 +145,0 @@ ref: ref

dist/cjs/components/internal/base-box.partial.js

@@ -8,44 +8,9 @@ "use strict";
 exports.default = exports.BaseBox = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _constants = require("../../constants");
-var _responsive = require("../../helpers/responsive");
-var _types = require("./types");
-var _utils = require("./utils");
 var _excluded = ["as", "className", "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", "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; }
-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 responsiveRules = _types.BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
-  return Object.assign(mapping, (0, _defineProperty2.default)({}, cssProperty, _objectSpread({
-    static: (0, _react2.css)((0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-static-".concat(cssProperty, ")")))
-  }, (0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
-    return (0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"));
-  }))));
-}, {});
-var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue, mapping) {
-  if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
-    return Object.keys(propertyValue).reduce(function (vars, breakpoint) {
-      return _objectSpread(_objectSpread({}, vars), {}, (0, _defineProperty2.default)({}, "--ds-box-responsive-".concat(propertyName, "-").concat(breakpoint), mapping[propertyValue[breakpoint]]));
-    }, {});
-  } else if ((0, _utils.isStaticStyleProp)(propertyValue)) {
-    return (0, _defineProperty2.default)({}, "--ds-box-static-".concat(propertyName), mapping[propertyValue]);
-  }
-};
-var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyValue) {
-  (0, _tinyInvariant.default)(typeof responsiveRules[propertyName] !== 'undefined', "Responsive rules for \"".concat(propertyName, "\" have not been statically defined."));
-  if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
-    return Object.keys(propertyValue).map(function (breakpoint) {
-      return responsiveRules[propertyName][breakpoint];
-    });
-  } else if ((0, _utils.isStaticStyleProp)(propertyValue)) {
-    return responsiveRules[propertyName].static;
-  }
-};
-
-// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
-
 /**
@@ -59,41 +24,40 @@ * __Box__
  */
-var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
-  var as = _ref3.as,
-    className = _ref3.className,
-    children = _ref3.children,
-    color = _ref3.color,
-    backgroundColor = _ref3.backgroundColor,
-    shadow = _ref3.shadow,
-    borderStyle = _ref3.borderStyle,
-    borderWidth = _ref3.borderWidth,
-    borderRadius = _ref3.borderRadius,
-    borderColor = _ref3.borderColor,
-    layer = _ref3.layer,
-    flex = _ref3.flex,
-    flexGrow = _ref3.flexGrow,
-    flexShrink = _ref3.flexShrink,
-    alignSelf = _ref3.alignSelf,
-    overflow = _ref3.overflow,
-    overflowInline = _ref3.overflowInline,
-    overflowBlock = _ref3.overflowBlock,
-    padding = _ref3.padding,
-    paddingBlock = _ref3.paddingBlock,
-    paddingBlockStart = _ref3.paddingBlockStart,
-    paddingBlockEnd = _ref3.paddingBlockEnd,
-    paddingInline = _ref3.paddingInline,
-    paddingInlineStart = _ref3.paddingInlineStart,
-    paddingInlineEnd = _ref3.paddingInlineEnd,
-    height = _ref3.height,
-    width = _ref3.width,
-    _ref3$display = _ref3.display,
-    display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
-    _ref3$position = _ref3.position,
-    position = _ref3$position === void 0 ? 'static' : _ref3$position,
-    style = _ref3.style,
-    testId = _ref3.testId,
-    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    className = _ref.className,
+    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,
+    style = _ref.style,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var Component = as || 'div';
-  var inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
-    style: inlineStyles,
+    style: style,
     ref: ref
@@ -103,3 +67,3 @@ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     className: className,
-    css: [baseStyles].concat([getResponsiveStyles('borderWidth', borderWidth), getResponsiveStyles('display', display), getResponsiveStyles('padding', padding), getResponsiveStyles('paddingBlock', paddingBlock), getResponsiveStyles('paddingBlockStart', paddingBlockStart), getResponsiveStyles('paddingBlockEnd', paddingBlockEnd), getResponsiveStyles('paddingInline', paddingInline), getResponsiveStyles('paddingInlineStart', paddingInlineStart), getResponsiveStyles('paddingInlineEnd', paddingInlineEnd)], [backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], position && positionMap[position], borderStyle && borderStyleMap[borderStyle], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]]),
+    css: [baseStyles, alignSelf && alignSelfMap[alignSelf], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderRadius && borderRadiusMap[borderRadius], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], color && textColorMap[color], display && displayMap[display], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], height && heightMap[height], layer && layerMap[layer], overflow && overflowMap[overflow], overflow && overflowMap[overflow], overflowBlock && overflowBlockMap[overflowBlock], overflowInline && overflowInlineMap[overflowInline], padding && paddingMap.padding[padding], paddingBlock && paddingMap.paddingBlock[paddingBlock], paddingBlockStart && paddingMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingMap.paddingInline[paddingInline], paddingInlineStart && paddingMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingMap.paddingInlineEnd[paddingInlineEnd], padding && paddingMap.padding[padding], position && positionMap[position], shadow && shadowMap[shadow], width && widthMap[width]],
     "data-testid": testId
@@ -122,5 +86,11 @@ }), children);
 var borderWidthMap = {
-  'size.0': "var(--ds-width-0, 0)",
-  'size.050': "var(--ds-width-050, 1px)",
-  'size.100': "var(--ds-width-100, 2px)"
+  'size.0': (0, _react2.css)({
+    borderWidth: "var(--ds-width-0, 0)"
+  }),
+  'size.050': (0, _react2.css)({
+    borderWidth: "var(--ds-width-050, 1px)"
+  }),
+  'size.100': (0, _react2.css)({
+    borderWidth: "var(--ds-width-100, 2px)"
+  })
 };
@@ -183,7 +153,17 @@ var borderRadiusMap = {
 var displayMap = {
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  'inline-flex': 'inline-flex',
-  'inline-block': 'inline-block'
+  block: (0, _react2.css)({
+    display: 'block'
+  }),
+  inline: (0, _react2.css)({
+    display: 'inline'
+  }),
+  flex: (0, _react2.css)({
+    display: 'flex'
+  }),
+  'inline-flex': (0, _react2.css)({
+    display: 'inline-flex'
+  }),
+  'inline-block': (0, _react2.css)({
+    display: 'inline-block'
+  })
 };
@@ -403,3 +383,3 @@ var positionMap = {
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
  * @codegenId spacing
@@ -410,18 +390,20 @@ * @codegenCommand yarn codegen-styles
  */
-var paddingMap = {
-  'space.0': "var(--ds-space-0, 0px)",
-  'space.025': "var(--ds-space-025, 2px)",
-  'space.050': "var(--ds-space-050, 4px)",
-  'space.075': "var(--ds-space-075, 6px)",
-  'space.100': "var(--ds-space-100, 8px)",
-  'space.150': "var(--ds-space-150, 12px)",
-  'space.200': "var(--ds-space-200, 16px)",
-  'space.250': "var(--ds-space-250, 20px)",
-  'space.300': "var(--ds-space-300, 24px)",
-  'space.400': "var(--ds-space-400, 32px)",
-  'space.500': "var(--ds-space-500, 40px)",
-  'space.600': "var(--ds-space-600, 48px)",
-  'space.800': "var(--ds-space-800, 64px)",
-  'space.1000': "var(--ds-space-1000, 80px)"
-};
+var paddingMap = Object.fromEntries(['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'].map(function (property) {
+  return [property, {
+    'space.0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
+    'space.025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
+    'space.050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
+    'space.075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
+    'space.100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
+    'space.150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
+    'space.200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
+    'space.250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
+    'space.300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
+    'space.400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
+    'space.500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
+    'space.600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
+    'space.800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
+    'space.1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
@@ -428,0 +410,0 @@ * @codegenEnd

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");
@@ -49,52 +51,26 @@ var _react2 = require("@emotion/react");
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-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)"
-  }),
-  '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)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  })
-};
+var stackSpaceMap = 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)"))
+  }];
+}));
 /**
@@ -136,3 +112,3 @@ * @codegenEnd
   return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && stackSpaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
@@ -139,0 +115,0 @@ ref: ref

dist/cjs/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/es2019/components/inline.partial.js

@@ -47,96 +47,52 @@ /** @jsx jsx */
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const spaceMap = {
+const inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].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)"
   }),
   '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({
-    gap: "var(--ds-space-1000, 80px)"
+    [property]: "var(--ds-space-1000, 80px)"
   })
-};
-const rowSpaceMap = {
-  '0': css({
-    rowGap: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    rowGap: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    rowGap: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    rowGap: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    rowGap: "var(--ds-space-100, 8px)"
-  }),
-  '150': css({
-    rowGap: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    rowGap: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    rowGap: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    rowGap: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    rowGap: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    rowGap: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    rowGap: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    rowGap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': css({
-    rowGap: "var(--ds-space-1000, 80px)"
-  })
-};
+}]));
 /**
@@ -201,3 +157,3 @@ * @codegenEnd
   return jsx(Component, {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
+    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
     "data-testid": testId,
@@ -204,0 +160,0 @@ ref: ref

dist/es2019/components/internal/base-box.partial.js

@@ -5,42 +5,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
 import { LAYERS } from '../../constants';
-import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
-import { BOX_RESPONSIVE_PROPS } from './types';
-import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
-const responsiveRules = BOX_RESPONSIVE_PROPS.reduce((mapping, cssProperty) => {
-  return Object.assign(mapping, {
-    [cssProperty]: {
-      static: css({
-        [cssProperty]: `var(--ds-box-static-${cssProperty})`
-      }),
-      ...UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
-        [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
-      }))
-    }
-  });
-}, {});
-const getResponsiveVars = (propertyName, propertyValue, mapping) => {
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).reduce((vars, breakpoint) => ({
-      ...vars,
-      [`--ds-box-responsive-${propertyName}-${breakpoint}`]: mapping[propertyValue[breakpoint]]
-    }), {});
-  } else if (isStaticStyleProp(propertyValue)) {
-    return {
-      [`--ds-box-static-${propertyName}`]: mapping[propertyValue]
-    };
-  }
-};
-const getResponsiveStyles = (propertyName, propertyValue) => {
-  invariant(typeof responsiveRules[propertyName] !== 'undefined', `Responsive rules for "${propertyName}" have not been statically defined.`);
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).map(breakpoint => responsiveRules[propertyName][breakpoint]);
-  } else if (isStaticStyleProp(propertyValue)) {
-    return responsiveRules[propertyName].static;
-  }
-};
-
-// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
-
 /**
@@ -82,3 +43,3 @@ * __Box__
   width,
-  display = displayMap.block,
+  display = 'block',
   position = 'static',
@@ -90,5 +51,4 @@ style,
   const Component = as || 'div';
-  const inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   const node = jsx(Component, _extends({
-    style: inlineStyles,
+    style: style,
     ref: ref
@@ -98,3 +58,3 @@ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     className: className,
-    css: [baseStyles, ...[getResponsiveStyles('borderWidth', borderWidth), getResponsiveStyles('display', display), getResponsiveStyles('padding', padding), getResponsiveStyles('paddingBlock', paddingBlock), getResponsiveStyles('paddingBlockStart', paddingBlockStart), getResponsiveStyles('paddingBlockEnd', paddingBlockEnd), getResponsiveStyles('paddingInline', paddingInline), getResponsiveStyles('paddingInlineStart', paddingInlineStart), getResponsiveStyles('paddingInlineEnd', paddingInlineEnd)], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], position && positionMap[position], borderStyle && borderStyleMap[borderStyle], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
+    css: [baseStyles, alignSelf && alignSelfMap[alignSelf], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderRadius && borderRadiusMap[borderRadius], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], color && textColorMap[color], display && displayMap[display], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], height && heightMap[height], layer && layerMap[layer], overflow && overflowMap[overflow], overflow && overflowMap[overflow], overflowBlock && overflowBlockMap[overflowBlock], overflowInline && overflowInlineMap[overflowInline], padding && paddingMap.padding[padding], paddingBlock && paddingMap.paddingBlock[paddingBlock], paddingBlockStart && paddingMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingMap.paddingInline[paddingInline], paddingInlineStart && paddingMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingMap.paddingInlineEnd[paddingInlineEnd], padding && paddingMap.padding[padding], position && positionMap[position], shadow && shadowMap[shadow], width && widthMap[width]],
     "data-testid": testId
@@ -118,5 +78,11 @@ }), children);
 const borderWidthMap = {
-  'size.0': "var(--ds-width-0, 0)",
-  'size.050': "var(--ds-width-050, 1px)",
-  'size.100': "var(--ds-width-100, 2px)"
+  'size.0': css({
+    borderWidth: "var(--ds-width-0, 0)"
+  }),
+  'size.050': css({
+    borderWidth: "var(--ds-width-050, 1px)"
+  }),
+  'size.100': css({
+    borderWidth: "var(--ds-width-100, 2px)"
+  })
 };
@@ -179,7 +145,17 @@ const borderRadiusMap = {
 const displayMap = {
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  'inline-flex': 'inline-flex',
-  'inline-block': 'inline-block'
+  block: css({
+    display: 'block'
+  }),
+  inline: css({
+    display: 'inline'
+  }),
+  flex: css({
+    display: 'flex'
+  }),
+  'inline-flex': css({
+    display: 'inline-flex'
+  }),
+  'inline-block': css({
+    display: 'inline-block'
+  })
 };
@@ -399,3 +375,3 @@ const positionMap = {
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
  * @codegenId spacing
@@ -406,18 +382,46 @@ * @codegenCommand yarn codegen-styles
  */
-const paddingMap = {
-  'space.0': "var(--ds-space-0, 0px)",
-  'space.025': "var(--ds-space-025, 2px)",
-  'space.050': "var(--ds-space-050, 4px)",
-  'space.075': "var(--ds-space-075, 6px)",
-  'space.100': "var(--ds-space-100, 8px)",
-  'space.150': "var(--ds-space-150, 12px)",
-  'space.200': "var(--ds-space-200, 16px)",
-  'space.250': "var(--ds-space-250, 20px)",
-  'space.300': "var(--ds-space-300, 24px)",
-  'space.400': "var(--ds-space-400, 32px)",
-  'space.500': "var(--ds-space-500, 40px)",
-  'space.600': "var(--ds-space-600, 48px)",
-  'space.800': "var(--ds-space-800, 64px)",
-  'space.1000': "var(--ds-space-1000, 80px)"
-};
+const paddingMap = Object.fromEntries(['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'].map(property => [property, {
+  'space.0': css({
+    [property]: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': css({
+    [property]: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': css({
+    [property]: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': css({
+    [property]: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': css({
+    [property]: "var(--ds-space-100, 8px)"
+  }),
+  'space.150': css({
+    [property]: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': css({
+    [property]: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': css({
+    [property]: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': css({
+    [property]: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': css({
+    [property]: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': css({
+    [property]: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': css({
+    [property]: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': css({
+    [property]: "var(--ds-space-800, 64px)"
+  }),
+  'space.1000': css({
+    [property]: "var(--ds-space-1000, 80px)"
+  })
+}]));
 /**
@@ -424,0 +428,0 @@ * @codegenEnd

dist/es2019/components/stack.partial.js

@@ -41,52 +41,52 @@ /** @jsx jsx */
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-const spaceMap = {
+const stackSpaceMap = 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)"
   }),
   '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({
-    gap: "var(--ds-space-1000, 80px)"
+    [property]: "var(--ds-space-1000, 80px)"
   })
-};
+}]));
 /**
@@ -129,3 +129,3 @@ * @codegenEnd
   return jsx(Component, {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && stackSpaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
@@ -132,0 +132,0 @@ ref: ref

dist/es2019/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/esm/components/inline.partial.js

@@ -0,1 +1,2 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
@@ -47,96 +48,26 @@ import { Children, forwardRef, Fragment, memo } from 'react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-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)"
-  }),
-  '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)"
-  }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  })
-};
-var rowSpaceMap = {
-  '0': css({
-    rowGap: "var(--ds-space-0, 0px)"
-  }),
-  '025': css({
-    rowGap: "var(--ds-space-025, 2px)"
-  }),
-  '050': css({
-    rowGap: "var(--ds-space-050, 4px)"
-  }),
-  '075': css({
-    rowGap: "var(--ds-space-075, 6px)"
-  }),
-  '100': css({
-    rowGap: "var(--ds-space-100, 8px)"
-  }),
-  '150': css({
-    rowGap: "var(--ds-space-150, 12px)"
-  }),
-  '200': css({
-    rowGap: "var(--ds-space-200, 16px)"
-  }),
-  '250': css({
-    rowGap: "var(--ds-space-250, 20px)"
-  }),
-  '300': css({
-    rowGap: "var(--ds-space-300, 24px)"
-  }),
-  '400': css({
-    rowGap: "var(--ds-space-400, 32px)"
-  }),
-  '500': css({
-    rowGap: "var(--ds-space-500, 40px)"
-  }),
-  '600': css({
-    rowGap: "var(--ds-space-600, 48px)"
-  }),
-  '800': css({
-    rowGap: "var(--ds-space-800, 64px)"
-  }),
-  '1000': css({
-    rowGap: "var(--ds-space-1000, 80px)"
-  })
-};
+var inlineSpaceMap = Object.fromEntries(['gap', 'rowGap'].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)"))
+  }];
+}));
 /**
@@ -202,3 +133,3 @@ * @codegenEnd
   return jsx(Component, {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
+    css: [baseStyles, space && inlineSpaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && inlineSpaceMap.rowGap[rowSpace]],
     "data-testid": testId,
@@ -205,0 +136,0 @@ ref: ref

dist/esm/components/internal/base-box.partial.js

@@ -0,44 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["as", "className", "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", "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; }
-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) { _defineProperty(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; }
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
 import { LAYERS } from '../../constants';
-import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
-import { BOX_RESPONSIVE_PROPS } from './types';
-import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
-var responsiveRules = BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
-  return Object.assign(mapping, _defineProperty({}, cssProperty, _objectSpread({
-    static: css(_defineProperty({}, cssProperty, "var(--ds-box-static-".concat(cssProperty, ")")))
-  }, UNSAFE_buildAboveMediaQueryCSS(function (breakpoint) {
-    return _defineProperty({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"));
-  }))));
-}, {});
-var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue, mapping) {
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).reduce(function (vars, breakpoint) {
-      return _objectSpread(_objectSpread({}, vars), {}, _defineProperty({}, "--ds-box-responsive-".concat(propertyName, "-").concat(breakpoint), mapping[propertyValue[breakpoint]]));
-    }, {});
-  } else if (isStaticStyleProp(propertyValue)) {
-    return _defineProperty({}, "--ds-box-static-".concat(propertyName), mapping[propertyValue]);
-  }
-};
-var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyValue) {
-  invariant(typeof responsiveRules[propertyName] !== 'undefined', "Responsive rules for \"".concat(propertyName, "\" have not been statically defined."));
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).map(function (breakpoint) {
-      return responsiveRules[propertyName][breakpoint];
-    });
-  } else if (isStaticStyleProp(propertyValue)) {
-    return responsiveRules[propertyName].static;
-  }
-};
-
-// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
-
 /**
@@ -52,41 +17,40 @@ * __Box__
  */
-export var BaseBox = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var as = _ref3.as,
-    className = _ref3.className,
-    children = _ref3.children,
-    color = _ref3.color,
-    backgroundColor = _ref3.backgroundColor,
-    shadow = _ref3.shadow,
-    borderStyle = _ref3.borderStyle,
-    borderWidth = _ref3.borderWidth,
-    borderRadius = _ref3.borderRadius,
-    borderColor = _ref3.borderColor,
-    layer = _ref3.layer,
-    flex = _ref3.flex,
-    flexGrow = _ref3.flexGrow,
-    flexShrink = _ref3.flexShrink,
-    alignSelf = _ref3.alignSelf,
-    overflow = _ref3.overflow,
-    overflowInline = _ref3.overflowInline,
-    overflowBlock = _ref3.overflowBlock,
-    padding = _ref3.padding,
-    paddingBlock = _ref3.paddingBlock,
-    paddingBlockStart = _ref3.paddingBlockStart,
-    paddingBlockEnd = _ref3.paddingBlockEnd,
-    paddingInline = _ref3.paddingInline,
-    paddingInlineStart = _ref3.paddingInlineStart,
-    paddingInlineEnd = _ref3.paddingInlineEnd,
-    height = _ref3.height,
-    width = _ref3.width,
-    _ref3$display = _ref3.display,
-    display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
-    _ref3$position = _ref3.position,
-    position = _ref3$position === void 0 ? 'static' : _ref3$position,
-    style = _ref3.style,
-    testId = _ref3.testId,
-    htmlAttributes = _objectWithoutProperties(_ref3, _excluded);
+export var BaseBox = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var as = _ref.as,
+    className = _ref.className,
+    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,
+    style = _ref.style,
+    testId = _ref.testId,
+    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
   var Component = as || 'div';
-  var inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   var node = jsx(Component, _extends({
-    style: inlineStyles,
+    style: style,
     ref: ref
@@ -96,3 +60,3 @@ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     className: className,
-    css: [baseStyles].concat([getResponsiveStyles('borderWidth', borderWidth), getResponsiveStyles('display', display), getResponsiveStyles('padding', padding), getResponsiveStyles('paddingBlock', paddingBlock), getResponsiveStyles('paddingBlockStart', paddingBlockStart), getResponsiveStyles('paddingBlockEnd', paddingBlockEnd), getResponsiveStyles('paddingInline', paddingInline), getResponsiveStyles('paddingInlineStart', paddingInlineStart), getResponsiveStyles('paddingInlineEnd', paddingInlineEnd)], [backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], position && positionMap[position], borderStyle && borderStyleMap[borderStyle], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]]),
+    css: [baseStyles, alignSelf && alignSelfMap[alignSelf], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderRadius && borderRadiusMap[borderRadius], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], color && textColorMap[color], display && displayMap[display], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], height && heightMap[height], layer && layerMap[layer], overflow && overflowMap[overflow], overflow && overflowMap[overflow], overflowBlock && overflowBlockMap[overflowBlock], overflowInline && overflowInlineMap[overflowInline], padding && paddingMap.padding[padding], paddingBlock && paddingMap.paddingBlock[paddingBlock], paddingBlockStart && paddingMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingMap.paddingInline[paddingInline], paddingInlineStart && paddingMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingMap.paddingInlineEnd[paddingInlineEnd], padding && paddingMap.padding[padding], position && positionMap[position], shadow && shadowMap[shadow], width && widthMap[width]],
     "data-testid": testId
@@ -116,5 +80,11 @@ }), children);
 var borderWidthMap = {
-  'size.0': "var(--ds-width-0, 0)",
-  'size.050': "var(--ds-width-050, 1px)",
-  'size.100': "var(--ds-width-100, 2px)"
+  'size.0': css({
+    borderWidth: "var(--ds-width-0, 0)"
+  }),
+  'size.050': css({
+    borderWidth: "var(--ds-width-050, 1px)"
+  }),
+  'size.100': css({
+    borderWidth: "var(--ds-width-100, 2px)"
+  })
 };
@@ -177,7 +147,17 @@ var borderRadiusMap = {
 var displayMap = {
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  'inline-flex': 'inline-flex',
-  'inline-block': 'inline-block'
+  block: css({
+    display: 'block'
+  }),
+  inline: css({
+    display: 'inline'
+  }),
+  flex: css({
+    display: 'flex'
+  }),
+  'inline-flex': css({
+    display: 'inline-flex'
+  }),
+  'inline-block': css({
+    display: 'inline-block'
+  })
 };
@@ -397,3 +377,3 @@ var positionMap = {
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
  * @codegenId spacing
@@ -404,18 +384,20 @@ * @codegenCommand yarn codegen-styles
  */
-var paddingMap = {
-  'space.0': "var(--ds-space-0, 0px)",
-  'space.025': "var(--ds-space-025, 2px)",
-  'space.050': "var(--ds-space-050, 4px)",
-  'space.075': "var(--ds-space-075, 6px)",
-  'space.100': "var(--ds-space-100, 8px)",
-  'space.150': "var(--ds-space-150, 12px)",
-  'space.200': "var(--ds-space-200, 16px)",
-  'space.250': "var(--ds-space-250, 20px)",
-  'space.300': "var(--ds-space-300, 24px)",
-  'space.400': "var(--ds-space-400, 32px)",
-  'space.500': "var(--ds-space-500, 40px)",
-  'space.600': "var(--ds-space-600, 48px)",
-  'space.800': "var(--ds-space-800, 64px)",
-  'space.1000': "var(--ds-space-1000, 80px)"
-};
+var paddingMap = Object.fromEntries(['padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'].map(function (property) {
+  return [property, {
+    'space.0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
+    'space.025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
+    'space.050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
+    'space.075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
+    'space.100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
+    'space.150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
+    'space.200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
+    'space.250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
+    'space.300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
+    'space.400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
+    'space.500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
+    'space.600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
+    'space.800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
+    'space.1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
@@ -422,0 +404,0 @@ * @codegenEnd

dist/esm/components/stack.partial.js

@@ -0,1 +1,2 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
@@ -41,52 +42,26 @@ import { forwardRef, memo } from 'react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-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)"
-  }),
-  '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)"
-  }),
-  '1000': css({
-    gap: "var(--ds-space-1000, 80px)"
-  })
-};
+var stackSpaceMap = 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)"))
+  }];
+}));
 /**
@@ -128,3 +103,3 @@ * @codegenEnd
   return jsx(Component, {
-    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    css: [baseStyles, space && stackSpaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
@@ -131,0 +106,0 @@ ref: ref

dist/esm/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/types/components/box.d.ts

 /** @jsx jsx */
 import { ElementType, FC, ReactElement } from 'react';
 import { BaseBoxProps } from './internal/base-box.partial';
-import type { BoxResponsiveProp } from './internal/types';
 import type { PublicBoxPropsBase } from './types';
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
 declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
@@ -8,0 +7,0 @@ /**

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

@@ -31,3 +31,3 @@ /** @jsx jsx */
      */
-    space?: Space;
+    space?: Gap;
     /**
@@ -37,3 +37,3 @@ * Represents the space between rows when content wraps.
      */
-    rowSpace?: RowSpace;
+    rowSpace?: RowGap;
     /**
@@ -62,42 +62,28 @@ * Renders a separator string between each child.
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-declare const spaceMap: {
-    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;
+declare const inlineSpaceMap: {
+    [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;
-declare const rowSpaceMap: {
-    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 RowSpace = keyof typeof rowSpaceMap;
+export declare type Gap = keyof typeof inlineSpaceMap.gap;
+export declare type RowGap = keyof typeof inlineSpaceMap.rowGap;
 /**
@@ -104,0 +90,0 @@ * __Inline__

dist/types/components/internal/base-box.partial.d.ts

 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
 import { Layer } from '../../constants';
-import { ResponsiveObject } from '../../helpers/responsive';
 import type { BasePrimitiveProps } from '../types';
@@ -35,5 +34,3 @@ export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
     /**
-     * @private
-     * @deprecated Use `xcss` to achieve this functionality.
-     * Token representing background color with a fallback.
+     * Token representing background color with a built-in fallback value.
      */
@@ -58,3 +55,3 @@ backgroundColor?: BackgroundColor;
      */
-    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
+    borderWidth?: BorderWidth;
     /**
@@ -130,3 +127,3 @@ * @private
      */
-    padding?: Padding | ResponsiveObject<Padding>;
+    padding?: Padding;
     /**
@@ -138,11 +135,11 @@ * Tokens representing CSS shorthand `paddingBlock`.
      */
-    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
+    paddingBlock?: PaddingBlock;
     /**
      * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
+    paddingBlockStart?: PaddingBlockStart;
     /**
      * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
+    paddingBlockEnd?: PaddingBlockEnd;
     /**
@@ -154,11 +151,11 @@ * Tokens representing CSS shorthand `paddingInline`.
      */
-    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
+    paddingInline?: PaddingInline;
     /**
      * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
+    paddingInlineStart?: PaddingInlineStart;
     /**
      * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
+    paddingInlineEnd?: PaddingInlineEnd;
     /**
@@ -181,3 +178,3 @@ * @private
      */
-    display?: Display | ResponsiveObject<Display>;
+    display?: Display;
     /**
@@ -212,5 +209,5 @@ * @private
 declare const borderWidthMap: {
-    readonly 'size.0': "var(--ds-width-0)";
-    readonly 'size.050': "var(--ds-width-050)";
-    readonly 'size.100': "var(--ds-width-100)";
+    readonly 'size.0': import("@emotion/react").SerializedStyles;
+    readonly 'size.050': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
 };
@@ -249,7 +246,7 @@ declare type BorderRadius = keyof typeof borderRadiusMap;
 declare const displayMap: {
-    readonly block: "block";
-    readonly inline: "inline";
-    readonly flex: "flex";
-    readonly 'inline-flex': "inline-flex";
-    readonly 'inline-block': "inline-block";
+    readonly block: import("@emotion/react").SerializedStyles;
+    readonly inline: import("@emotion/react").SerializedStyles;
+    readonly flex: import("@emotion/react").SerializedStyles;
+    readonly 'inline-flex': import("@emotion/react").SerializedStyles;
+    readonly 'inline-block': import("@emotion/react").SerializedStyles;
 };
@@ -356,3 +353,3 @@ declare type Position = keyof typeof positionMap;
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
  * @codegenId spacing
@@ -364,24 +361,26 @@ * @codegenCommand yarn codegen-styles
 declare const paddingMap: {
-    readonly 'space.0': "var(--ds-space-0)";
-    readonly 'space.025': "var(--ds-space-025)";
-    readonly 'space.050': "var(--ds-space-050)";
-    readonly 'space.075': "var(--ds-space-075)";
-    readonly 'space.100': "var(--ds-space-100)";
-    readonly 'space.150': "var(--ds-space-150)";
-    readonly 'space.200': "var(--ds-space-200)";
-    readonly 'space.250': "var(--ds-space-250)";
-    readonly 'space.300': "var(--ds-space-300)";
-    readonly 'space.400': "var(--ds-space-400)";
-    readonly 'space.500': "var(--ds-space-500)";
-    readonly 'space.600': "var(--ds-space-600)";
-    readonly 'space.800': "var(--ds-space-800)";
-    readonly 'space.1000': "var(--ds-space-1000)";
+    [k: string]: {
+        readonly 'space.0': import("@emotion/react").SerializedStyles;
+        readonly 'space.025': import("@emotion/react").SerializedStyles;
+        readonly 'space.050': import("@emotion/react").SerializedStyles;
+        readonly 'space.075': import("@emotion/react").SerializedStyles;
+        readonly 'space.100': import("@emotion/react").SerializedStyles;
+        readonly 'space.150': import("@emotion/react").SerializedStyles;
+        readonly 'space.200': import("@emotion/react").SerializedStyles;
+        readonly 'space.250': import("@emotion/react").SerializedStyles;
+        readonly 'space.300': import("@emotion/react").SerializedStyles;
+        readonly 'space.400': import("@emotion/react").SerializedStyles;
+        readonly 'space.500': import("@emotion/react").SerializedStyles;
+        readonly 'space.600': import("@emotion/react").SerializedStyles;
+        readonly 'space.800': import("@emotion/react").SerializedStyles;
+        readonly 'space.1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Padding = keyof typeof paddingMap;
-export declare type PaddingBlock = keyof typeof paddingMap;
-export declare type PaddingBlockStart = keyof typeof paddingMap;
-export declare type PaddingBlockEnd = keyof typeof paddingMap;
-export declare type PaddingInline = keyof typeof paddingMap;
-export declare type PaddingInlineStart = keyof typeof paddingMap;
-export declare type PaddingInlineEnd = keyof typeof paddingMap;
+export declare type Padding = keyof typeof paddingMap.padding;
+export declare type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+export declare type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+export declare type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+export declare type PaddingInline = keyof typeof paddingMap.paddingInline;
+export declare type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
+export declare type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
 /**
@@ -388,0 +387,0 @@ * @codegenEnd

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

@@ -27,3 +27,3 @@ /** @jsx jsx */
      */
-    space?: Space;
+    space?: Gap;
     /**
@@ -48,25 +48,27 @@ * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-declare const spaceMap: {
-    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;
+declare const stackSpaceMap: {
+    [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 Gap = keyof typeof stackSpaceMap.gap;
 /**
@@ -73,0 +75,0 @@ * __Stack__

dist/types/components/types.d.ts

 import type { CSSProperties } from 'react';
 import { type BoxXCSS } from '../internal/xcss';
-import type { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
 export declare type BasePrimitiveProps = {
@@ -16,47 +15,2 @@ /**
     /**
-     * Defines border width.
-     */
-    borderWidth?: BorderWidth;
-    /**
-     * Defines display type and layout. Defaults to `block`.
-     */
-    display?: Display;
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     *
-     * @see paddingBlock
-     * @see paddingInline
-     */
-    padding?: Padding;
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     *
-     * @see paddingBlockStart
-     * @see paddingBlockEnd
-     */
-    paddingBlock?: PaddingBlock;
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: PaddingBlockStart;
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: PaddingBlockEnd;
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     *
-     * @see paddingInlineStart
-     * @see paddingInlineEnd
-     */
-    paddingInline?: PaddingInline;
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: PaddingInlineStart;
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: PaddingInlineEnd;
-    /**
      * Safe subset of styles that can be applied as a classname.
@@ -63,0 +17,0 @@ */

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -44,4 +44,3 @@ "author": "Atlassian Pty Ltd",
     "@emotion/react": "^11.7.1",
-    "@emotion/serialize": "^1.1.0",
-    "tiny-invariant": "^1.2.0"
+    "@emotion/serialize": "^1.1.0"
   },
@@ -48,0 +47,0 @@ "peerDependencies": {

report.api.md

@@ -185,3 +185,3 @@ <!-- API Report Version: 2.3 -->
   borderStyle?: BorderStyle;
-  borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
+  borderWidth?: BorderWidth;
   borderColor?: BorderColor;
@@ -197,14 +197,12 @@ borderRadius?: BorderRadius;
   overflowBlock?: OverflowBlock;
-  padding?: Padding | ResponsiveObject<Padding>;
-  paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
-  paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
-  paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
-  paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
-  paddingInlineStart?:
-    | PaddingInlineStart
-    | ResponsiveObject<PaddingInlineStart>;
-  paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
+  padding?: Padding;
+  paddingBlock?: PaddingBlock;
+  paddingBlockStart?: PaddingBlockStart;
+  paddingBlockEnd?: PaddingBlockEnd;
+  paddingInline?: PaddingInline;
+  paddingInlineStart?: PaddingInlineStart;
+  paddingInlineEnd?: PaddingInlineEnd;
   width?: Width;
   height?: Height;
-  display?: Display | ResponsiveObject<Display>;
+  display?: Display;
   position?: Position;
@@ -298,5 +296,5 @@ ref?: ComponentPropsWithRef<T>['ref'];
 const borderWidthMap: {
-  readonly 'size.0': 'var(--ds-width-0)';
-  readonly 'size.050': 'var(--ds-width-050)';
-  readonly 'size.100': 'var(--ds-width-100)';
+  readonly 'size.0': SerializedStyles;
+  readonly 'size.050': SerializedStyles;
+  readonly 'size.100': SerializedStyles;
 };
@@ -315,15 +313,2 @@
 // @public (undocumented)
-const BOX_RESPONSIVE_PROPS: readonly [
-  'borderWidth',
-  'display',
-  'padding',
-  'paddingBlock',
-  'paddingBlockStart',
-  'paddingBlockEnd',
-  'paddingInline',
-  'paddingInlineStart',
-  'paddingInlineEnd',
-];
-
-// @public (undocumented)
 type BoxComponent<T extends ElementType = 'div'> = (<
@@ -339,3 +324,3 @@ T extends ElementType = 'div',
   BaseBoxProps<T>,
-  'className' | BoxResponsiveProp
+  'className'
 > &
@@ -345,5 +330,2 @@ PublicBoxPropsBase;
 // @public (undocumented)
-type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
-
-// @public (undocumented)
 type BoxStyles = SerializedStyles_2 & {
@@ -362,5 +344,2 @@ [boxTag]: true;
 
-// @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
-
 // @public (undocumented)
@@ -383,7 +362,7 @@ const dimensionMap: {
 const displayMap: {
-  readonly block: 'block';
-  readonly inline: 'inline';
-  readonly flex: 'flex';
-  readonly 'inline-flex': 'inline-flex';
-  readonly 'inline-block': 'inline-block';
+  readonly block: SerializedStyles;
+  readonly inline: SerializedStyles;
+  readonly flex: SerializedStyles;
+  readonly 'inline-flex': SerializedStyles;
+  readonly 'inline-block': SerializedStyles;
 };
@@ -418,2 +397,8 @@
 // @public (undocumented)
+type Gap = keyof typeof inlineSpaceMap.gap;
+
+// @public (undocumented)
+type Gap_2 = keyof typeof stackSpaceMap.gap;
+
+// @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -471,6 +456,6 @@
   ref?: ComponentPropsWithRef<T>['ref'];
-  rowSpace?: RowSpace;
+  rowSpace?: RowGap;
   separator?: string;
   shouldWrap?: boolean;
-  space?: Space;
+  space?: Gap;
   spread?: Spread;
@@ -480,2 +465,22 @@ testId?: string;
 
+// @public
+const inlineSpaceMap: {
+  [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;
+  };
+};
+
 // @public (undocumented)
@@ -545,3 +550,3 @@ type InlineStyles = SerializedStyles_2 & {
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
+type Padding = keyof typeof paddingMap.padding;
 
@@ -552,35 +557,37 @@ // @public (undocumented)
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap;
+type PaddingBlock = keyof typeof paddingMap.paddingBlock;
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap;
+type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap;
+type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap;
+type PaddingInline = keyof typeof paddingMap.paddingInline;
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap;
+type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
 
 // @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap;
+type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
 
 // @public
 const paddingMap: {
-  readonly 'space.0': 'var(--ds-space-0)';
-  readonly 'space.025': 'var(--ds-space-025)';
-  readonly 'space.050': 'var(--ds-space-050)';
-  readonly 'space.075': 'var(--ds-space-075)';
-  readonly 'space.100': 'var(--ds-space-100)';
-  readonly 'space.150': 'var(--ds-space-150)';
-  readonly 'space.200': 'var(--ds-space-200)';
-  readonly 'space.250': 'var(--ds-space-250)';
-  readonly 'space.300': 'var(--ds-space-300)';
-  readonly 'space.400': 'var(--ds-space-400)';
-  readonly 'space.500': 'var(--ds-space-500)';
-  readonly 'space.600': 'var(--ds-space-600)';
-  readonly 'space.800': 'var(--ds-space-800)';
-  readonly 'space.1000': 'var(--ds-space-1000)';
+  [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;
+  };
 };
@@ -619,39 +626,9 @@
 type PublicBoxPropsBase = {
-  borderWidth?: BorderWidth;
-  display?: Display;
-  padding?: Padding;
-  paddingBlock?: PaddingBlock;
-  paddingBlockStart?: PaddingBlockStart;
-  paddingBlockEnd?: PaddingBlockEnd;
-  paddingInline?: PaddingInline;
-  paddingInlineStart?: PaddingInlineStart;
-  paddingInlineEnd?: PaddingInlineEnd;
   xcss?: BoxXCSS;
 };
 
-// @public
-type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
-
 // @public (undocumented)
-type RowSpace = keyof typeof rowSpaceMap;
+type RowGap = keyof typeof inlineSpaceMap.rowGap;
 
 // @public (undocumented)
-const rowSpaceMap: {
-  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;
-};
-
-// @public (undocumented)
 type SafeCSSObject = CSSPseudos &
@@ -680,44 +657,2 @@ TokenisedProps &
 // @public (undocumented)
-type Space = keyof typeof spaceMap;
-
-// @public (undocumented)
-type Space_2 = keyof typeof spaceMap_2;
-
-// @public
-const spaceMap: {
-  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;
-};
-
-// @public
-const spaceMap_2: {
-  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;
-};
-
-// @public (undocumented)
 type Spread = 'space-between';
@@ -754,3 +689,3 @@
   ref?: ComponentPropsWithRef<T>['ref'];
-  space?: Space_2;
+  space?: Gap_2;
   spread?: Spread_2;
@@ -760,2 +695,22 @@ testId?: string;
 
+// @public
+const stackSpaceMap: {
+  [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;
+  };
+};
+
 // @public (undocumented)
@@ -762,0 +717,0 @@ type TextColor = keyof typeof textColorMap;

tmp/api-report-tmp.d.ts

@@ -169,3 +169,3 @@ ## API Report File for "@atlaskit/primitives"
     borderStyle?: BorderStyle;
-    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
+    borderWidth?: BorderWidth;
     borderColor?: BorderColor;
@@ -181,12 +181,12 @@ borderRadius?: BorderRadius;
     overflowBlock?: OverflowBlock;
-    padding?: Padding | ResponsiveObject<Padding>;
-    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
-    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
-    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
-    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
-    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
-    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
+    padding?: Padding;
+    paddingBlock?: PaddingBlock;
+    paddingBlockStart?: PaddingBlockStart;
+    paddingBlockEnd?: PaddingBlockEnd;
+    paddingInline?: PaddingInline;
+    paddingInlineStart?: PaddingInlineStart;
+    paddingInlineEnd?: PaddingInlineEnd;
     width?: Width;
     height?: Height;
-    display?: Display | ResponsiveObject<Display>;
+    display?: Display;
     position?: Position;
@@ -280,5 +280,5 @@ ref?: ComponentPropsWithRef<T>['ref'];
 const borderWidthMap: {
-    readonly 'size.0': "var(--ds-width-0)";
-    readonly 'size.050': "var(--ds-width-050)";
-    readonly 'size.100': "var(--ds-width-100)";
+    readonly 'size.0': SerializedStyles;
+    readonly 'size.050': SerializedStyles;
+    readonly 'size.100': SerializedStyles;
 };
@@ -297,14 +297,8 @@
 // @public (undocumented)
-const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
-
-// @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>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
+export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
 
 // @public (undocumented)
-type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
-
-// @public (undocumented)
 type BoxStyles = SerializedStyles_2 & {
@@ -323,5 +317,2 @@ [boxTag]: true;
 
-// @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
-
 // @public (undocumented)
@@ -344,7 +335,7 @@ const dimensionMap: {
 const displayMap: {
-    readonly block: "block";
-    readonly inline: "inline";
-    readonly flex: "flex";
-    readonly 'inline-flex': "inline-flex";
-    readonly 'inline-block': "inline-block";
+    readonly block: SerializedStyles;
+    readonly inline: SerializedStyles;
+    readonly flex: SerializedStyles;
+    readonly 'inline-flex': SerializedStyles;
+    readonly 'inline-block': SerializedStyles;
 };
@@ -379,2 +370,8 @@
 // @public (undocumented)
+type Gap = keyof typeof inlineSpaceMap.gap;
+
+// @public (undocumented)
+type Gap_2 = keyof typeof stackSpaceMap.gap;
+
+// @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -414,6 +411,6 @@
     ref?: ComponentPropsWithRef<T>['ref'];
-    rowSpace?: RowSpace;
+    rowSpace?: RowGap;
     separator?: string;
     shouldWrap?: boolean;
-    space?: Space;
+    space?: Gap;
     spread?: Spread;
@@ -423,2 +420,22 @@ testId?: string;
 
+// @public
+const inlineSpaceMap: {
+    [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;
+    };
+};
+
 // @public (undocumented)
@@ -488,3 +505,3 @@ type InlineStyles = SerializedStyles_2 & {
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
+type Padding = keyof typeof paddingMap.padding;
 
@@ -495,35 +512,37 @@ // @public (undocumented)
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap;
+type PaddingBlock = keyof typeof paddingMap.paddingBlock;
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap;
+type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap;
+type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap;
+type PaddingInline = keyof typeof paddingMap.paddingInline;
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap;
+type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
 
 // @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap;
+type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
 
 // @public
 const paddingMap: {
-    readonly 'space.0': "var(--ds-space-0)";
-    readonly 'space.025': "var(--ds-space-025)";
-    readonly 'space.050': "var(--ds-space-050)";
-    readonly 'space.075': "var(--ds-space-075)";
-    readonly 'space.100': "var(--ds-space-100)";
-    readonly 'space.150': "var(--ds-space-150)";
-    readonly 'space.200': "var(--ds-space-200)";
-    readonly 'space.250': "var(--ds-space-250)";
-    readonly 'space.300': "var(--ds-space-300)";
-    readonly 'space.400': "var(--ds-space-400)";
-    readonly 'space.500': "var(--ds-space-500)";
-    readonly 'space.600': "var(--ds-space-600)";
-    readonly 'space.800': "var(--ds-space-800)";
-    readonly 'space.1000': "var(--ds-space-1000)";
+    [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;
+    };
 };
@@ -562,39 +581,9 @@
 type PublicBoxPropsBase = {
-    borderWidth?: BorderWidth;
-    display?: Display;
-    padding?: Padding;
-    paddingBlock?: PaddingBlock;
-    paddingBlockStart?: PaddingBlockStart;
-    paddingBlockEnd?: PaddingBlockEnd;
-    paddingInline?: PaddingInline;
-    paddingInlineStart?: PaddingInlineStart;
-    paddingInlineEnd?: PaddingInlineEnd;
     xcss?: BoxXCSS;
 };
 
-// @public
-type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
-
 // @public (undocumented)
-type RowSpace = keyof typeof rowSpaceMap;
+type RowGap = keyof typeof inlineSpaceMap.rowGap;
 
 // @public (undocumented)
-const rowSpaceMap: {
-    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;
-};
-
-// @public (undocumented)
 type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
@@ -618,44 +607,2 @@
 // @public (undocumented)
-type Space = keyof typeof spaceMap;
-
-// @public (undocumented)
-type Space_2 = keyof typeof spaceMap_2;
-
-// @public
-const spaceMap: {
-    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;
-};
-
-// @public
-const spaceMap_2: {
-    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;
-};
-
-// @public (undocumented)
 type Spread = 'space-between';
@@ -677,3 +624,3 @@
     ref?: ComponentPropsWithRef<T>['ref'];
-    space?: Space_2;
+    space?: Gap_2;
     spread?: Spread_2;
@@ -683,2 +630,22 @@ testId?: string;
 
+// @public
+const stackSpaceMap: {
+    [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;
+    };
+};
+
 // @public (undocumented)
@@ -685,0 +652,0 @@ type TextColor = keyof typeof textColorMap;

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

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

Dependency count

5

decreased by-16.67%

Worsened metrics

Total package byte prevSize

316329

decreased by-4.07%

Number of package files

82

decreased by-8.89%

Lines of code

7534

decreased by-4.92%

Dependency changes

• - Removedtiny-invariant@^1.2.0

• - Removedtiny-invariant@1.3.3(transitive)