@atlaskit/primitives 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.3.2
+
+### Patch Changes
+
+- [`e7b64da97a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7b64da97a1) - Add `rowSpace` prop to override the `space` prop's spacing between rows.
+
+## 0.3.1
+
+### Patch Changes
+
+- [`114d6a73f72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/114d6a73f72) - Cleanup the experimental responsive box utilizing our responsive helpers.
+
 ## 0.3.0
 
 ### Minor Changes

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

@@ -50,10 +50,10 @@ var flexWrapStyles = (0, _react2.css)({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["space", "rowSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 var spaceMap = {
@@ -100,6 +100,50 @@ var spaceMap = {
     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)"
+  })
+};
 /**
  * @codegenEnd
  */
@@ -146,6 +190,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     spread = _ref2.spread,
     grow = _ref2.grow,
     space = _ref2.space,
+    rowSpace = _ref2.rowSpace,
     separator = _ref2.separator,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
@@ -157,7 +202,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
   }) : rawChildren;
   var justifyContent = spread || alignInline;
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

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

@@ -12,18 +12,18 @@ 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", "UNSAFE_style", "testId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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, _constants.BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-    var config = _constants.BREAKPOINTS_CONFIG[breakpoint];
-    return Object.assign(configs, (0, _defineProperty2.default)({}, breakpoint, (0, _react2.css)((0, _defineProperty2.default)({}, "@media (min-width: ".concat(config.min, "px)"), (0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"))))));
-  }, {
+  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)) {
@@ -37,8 +37,8 @@ var getResponsiveVars = function getResponsiveVars(propertyName, 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 (responsiveProp) {
-      return responsiveRules[propertyName][responsiveProp];
+    return Object.keys(propertyValue).map(function (breakpoint) {
+      return responsiveRules[propertyName][breakpoint];
     });
   } else if ((0, _utils.isStaticStyleProp)(propertyValue)) {
     return responsiveRules[propertyName].static;
@@ -55,41 +55,41 @@ var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyVal
  *
  * @internal
  */
-var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var as = _ref2.as,
-    className = _ref2.className,
-    children = _ref2.children,
-    color = _ref2.color,
-    backgroundColor = _ref2.backgroundColor,
-    shadow = _ref2.shadow,
-    borderStyle = _ref2.borderStyle,
-    borderWidth = _ref2.borderWidth,
-    borderRadius = _ref2.borderRadius,
-    borderColor = _ref2.borderColor,
-    layer = _ref2.layer,
-    flex = _ref2.flex,
-    flexGrow = _ref2.flexGrow,
-    flexShrink = _ref2.flexShrink,
-    alignSelf = _ref2.alignSelf,
-    overflow = _ref2.overflow,
-    overflowInline = _ref2.overflowInline,
-    overflowBlock = _ref2.overflowBlock,
-    padding = _ref2.padding,
-    paddingBlock = _ref2.paddingBlock,
-    paddingBlockStart = _ref2.paddingBlockStart,
-    paddingBlockEnd = _ref2.paddingBlockEnd,
-    paddingInline = _ref2.paddingInline,
-    paddingInlineStart = _ref2.paddingInlineStart,
-    paddingInlineEnd = _ref2.paddingInlineEnd,
-    height = _ref2.height,
-    width = _ref2.width,
-    _ref2$display = _ref2.display,
-    display = _ref2$display === void 0 ? displayMap.block : _ref2$display,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'static' : _ref2$position,
-    UNSAFE_style = _ref2.UNSAFE_style,
-    testId = _ref2.testId,
-    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+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,
+    UNSAFE_style = _ref3.UNSAFE_style,
+    testId = _ref3.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
   var Component = as || 'div';
   var inlineStyles = Object.assign({}, UNSAFE_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)({

package/dist/cjs/constants.js

@@ -3,20 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BREAKPOINTS_CONFIG", {
-  enumerable: true,
-  get: function get() {
-    return _dsExplorations.UNSAFE_BREAKPOINTS_CONFIG;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINTS_LIST", {
-  enumerable: true,
-  get: function get() {
-    return _dsExplorations.UNSAFE_BREAKPOINTS_LIST;
-  }
-});
 exports.LAYERS = void 0;
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var LAYERS = {
   card: 100,
   navigation: 200,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"sideEffects": false
 }

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

@@ -43,10 +43,10 @@ const flexWrapStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["space", "rowSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 const spaceMap = {
@@ -93,6 +93,50 @@ const spaceMap = {
     gap: "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)"
+  })
+};
 /**
  * @codegenEnd
  */
@@ -137,6 +181,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   spread,
   grow,
   space,
+  rowSpace,
   separator,
   testId,
   children: rawChildren
@@ -149,7 +194,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) : rawChildren;
   const justifyContent = spread || alignInline;
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

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

@@ -3,26 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, LAYERS } from '../../constants';
+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]: BREAKPOINTS_LIST.reduce((configs, breakpoint) => {
-      const config = BREAKPOINTS_CONFIG[breakpoint];
-      return Object.assign(configs, {
-        [breakpoint]: css({
-          // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-          [`@media (min-width: ${config.min}px)`]: {
-            [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
-          }
-        })
-      });
-    }, {
+    [cssProperty]: {
       static: css({
         [cssProperty]: `var(--ds-box-static-${cssProperty})`
-      })
-    })
+      }),
+      ...UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
+        [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
+      }))
+    }
   });
 }, {});
 const getResponsiveVars = (propertyName, propertyValue, mapping) => {
@@ -40,7 +34,7 @@ const getResponsiveVars = (propertyName, propertyValue, mapping) => {
 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(responsiveProp => responsiveRules[propertyName][responsiveProp]);
+    return Object.keys(propertyValue).map(breakpoint => responsiveRules[propertyName][breakpoint]);
   } else if (isStaticStyleProp(propertyValue)) {
     return responsiveRules[propertyName].static;
   }

package/dist/es2019/constants.js

@@ -1,4 +1,3 @@
-import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export const LAYERS = {
   card: 100,
   navigation: 200,
@@ -9,5 +8,4 @@ export const LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"sideEffects": false
 }

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

@@ -43,10 +43,10 @@ var flexWrapStyles = css({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["space", "rowSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 var spaceMap = {
@@ -93,6 +93,50 @@ var spaceMap = {
     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)"
+  })
+};
 /**
  * @codegenEnd
  */
@@ -139,6 +183,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     spread = _ref2.spread,
     grow = _ref2.grow,
     space = _ref2.space,
+    rowSpace = _ref2.rowSpace,
     separator = _ref2.separator,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
@@ -150,7 +195,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }) : rawChildren;
   var justifyContent = spread || alignInline;
   return jsx("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref
   }, children);

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

@@ -8,16 +8,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, LAYERS } from '../../constants';
+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, BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-    var config = BREAKPOINTS_CONFIG[breakpoint];
-    return Object.assign(configs, _defineProperty({}, breakpoint, css(_defineProperty({}, "@media (min-width: ".concat(config.min, "px)"), _defineProperty({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"))))));
-  }, {
+  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)) {
@@ -31,8 +31,8 @@ var getResponsiveVars = function getResponsiveVars(propertyName, 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 (responsiveProp) {
-      return responsiveRules[propertyName][responsiveProp];
+    return Object.keys(propertyValue).map(function (breakpoint) {
+      return responsiveRules[propertyName][breakpoint];
     });
   } else if (isStaticStyleProp(propertyValue)) {
     return responsiveRules[propertyName].static;
@@ -49,41 +49,41 @@ var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyVal
  *
  * @internal
  */
-export var BaseBox = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var as = _ref2.as,
-    className = _ref2.className,
-    children = _ref2.children,
-    color = _ref2.color,
-    backgroundColor = _ref2.backgroundColor,
-    shadow = _ref2.shadow,
-    borderStyle = _ref2.borderStyle,
-    borderWidth = _ref2.borderWidth,
-    borderRadius = _ref2.borderRadius,
-    borderColor = _ref2.borderColor,
-    layer = _ref2.layer,
-    flex = _ref2.flex,
-    flexGrow = _ref2.flexGrow,
-    flexShrink = _ref2.flexShrink,
-    alignSelf = _ref2.alignSelf,
-    overflow = _ref2.overflow,
-    overflowInline = _ref2.overflowInline,
-    overflowBlock = _ref2.overflowBlock,
-    padding = _ref2.padding,
-    paddingBlock = _ref2.paddingBlock,
-    paddingBlockStart = _ref2.paddingBlockStart,
-    paddingBlockEnd = _ref2.paddingBlockEnd,
-    paddingInline = _ref2.paddingInline,
-    paddingInlineStart = _ref2.paddingInlineStart,
-    paddingInlineEnd = _ref2.paddingInlineEnd,
-    height = _ref2.height,
-    width = _ref2.width,
-    _ref2$display = _ref2.display,
-    display = _ref2$display === void 0 ? displayMap.block : _ref2$display,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'static' : _ref2$position,
-    UNSAFE_style = _ref2.UNSAFE_style,
-    testId = _ref2.testId,
-    htmlAttributes = _objectWithoutProperties(_ref2, _excluded);
+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,
+    UNSAFE_style = _ref3.UNSAFE_style,
+    testId = _ref3.testId,
+    htmlAttributes = _objectWithoutProperties(_ref3, _excluded);
   var Component = as || 'div';
   var inlineStyles = Object.assign({}, UNSAFE_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({

package/dist/esm/constants.js

@@ -1,4 +1,3 @@
-import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export var LAYERS = {
   card: 100,
   navigation: 200,
@@ -9,5 +8,4 @@ export var LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"sideEffects": false
 }

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

@@ -25,6 +25,11 @@ export interface InlineProps {
      * Represents the space between each child.
      */
     space?: Space;
+    /**
+     * Represents the space between rows when content wraps.
+     * Used to override the `space` value in between rows.
+     */
+    rowSpace?: RowSpace;
     /**
      * Renders a separator string between each child.
      */
@@ -44,10 +49,10 @@ export declare type Spread = 'space-between';
 export declare type Grow = 'hug' | 'fill';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["space", "rowSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 declare const spaceMap: {
@@ -67,6 +72,23 @@ declare const spaceMap: {
     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;
 /**
  * __Inline__
  *

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
-import { Breakpoint, Layer } from '../../constants';
+import { Layer } from '../../constants';
+import { ResponsiveObject } from '../../helpers/responsive';
 import type { BasePrimitiveProps } from '../types';
 export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 declare type BaseBoxPropsFoundation<T extends ElementType> = {
@@ -43,7 +44,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines border width.
      */
-    borderWidth?: BorderWidth | Partial<Record<Breakpoint, BorderWidth>>;
+    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
     /**
      * Token representing border color with a fallback.
      */
@@ -94,37 +95,37 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      * @see paddingBlock
      * @see paddingInline
      */
-    padding?: Padding | Partial<Record<Breakpoint, Padding>>;
+    padding?: Padding | ResponsiveObject<Padding>;
     /**
      * Tokens representing CSS shorthand `paddingBlock`.
      *
      * @see paddingBlockStart
      * @see paddingBlockEnd
      */
-    paddingBlock?: PaddingBlock | Partial<Record<Breakpoint, PaddingBlock>>;
+    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
     /**
      * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart | Partial<Record<Breakpoint, PaddingBlockStart>>;
+    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
     /**
      * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd | Partial<Record<Breakpoint, PaddingBlockEnd>>;
+    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
     /**
      * Tokens representing CSS shorthand `paddingInline`.
      *
      * @see paddingInlineStart
      * @see paddingInlineEnd
      */
-    paddingInline?: PaddingInline | Partial<Record<Breakpoint, PaddingInline>>;
+    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
     /**
      * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart | Partial<Record<Breakpoint, PaddingInlineStart>>;
+    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
     /**
      * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd | Partial<Record<Breakpoint, PaddingInlineEnd>>;
+    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
     /**
      * Token representing width.
      * @experimental The existing tokens will be replaced to better reflect dimensions.
@@ -138,7 +139,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines display type and layout. Defaults to `block`.
      */
-    display?: Display | Partial<Record<Breakpoint, Display>>;
+    display?: Display | ResponsiveObject<Display>;
     /**
      * CSS position property.
      */

package/dist/types/components/internal/types.d.ts

@@ -1,6 +1,8 @@
 import { SerializedStyles } from '@emotion/react';
-import { Breakpoint } from '../../constants';
+import { ResponsiveCSSObject, ResponsiveObject } from '../../helpers/responsive';
 export declare const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
 export declare type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
-export declare type BreakpointIndexedStyle = Record<Breakpoint | 'static', SerializedStyles>;
-export declare type GenericPropertyValue = string | Partial<Record<Breakpoint, string>> | undefined;
+export declare type StaticResponsiveCSSObject = ResponsiveCSSObject & {
+    static: SerializedStyles;
+};
+export declare type GenericPropertyValue = string | ResponsiveObject<string> | undefined;

package/dist/types/constants.d.ts

@@ -1,4 +1,3 @@
-import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export declare const LAYERS: {
     readonly card: 100;
     readonly navigation: 200;
@@ -11,4 +10,3 @@ export declare const LAYERS: {
     readonly tooltip: 800;
 };
 export declare type Layer = keyof typeof LAYERS;
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, type Breakpoint, type BreakpointConfig, };

package/dist/types/helpers/responsive/types.d.ts

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 /**
  * The breakpoints we have for responsiveness.
@@ -23,7 +23,7 @@ export declare type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
  * return <div css={setMarginBreakpoints.map(breakpoint => marginMediaQueries[breakpoint])} />
  * ```
  */
-export declare type ResponsiveCSSObject = ResponsiveObject<ReturnType<typeof css>>;
+export declare type ResponsiveCSSObject = ResponsiveObject<SerializedStyles>;
 /**
  * Our internal breakpoint config used to build media queries and define attributes for certain components.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,7 +38,6 @@
     "./responsive": "./src/helpers/responsive/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "*",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -26,7 +26,6 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
-import { UNSAFE_Breakpoint } from '@atlaskit/ds-explorations';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -138,7 +137,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   backgroundColor?: BackgroundColor;
   shadow?: Shadow;
   borderStyle?: BorderStyle;
-  borderWidth?: BorderWidth | Partial<Record<UNSAFE_Breakpoint, BorderWidth>>;
+  borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
   borderColor?: BorderColor;
   borderRadius?: BorderRadius;
   layer?: Layer;
@@ -149,28 +148,18 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
   overflow?: Overflow;
   overflowInline?: OverflowInline;
   overflowBlock?: OverflowBlock;
-  padding?: Padding | Partial<Record<UNSAFE_Breakpoint, Padding>>;
-  paddingBlock?:
-    | PaddingBlock
-    | Partial<Record<UNSAFE_Breakpoint, PaddingBlock>>;
-  paddingBlockStart?:
-    | PaddingBlockStart
-    | Partial<Record<UNSAFE_Breakpoint, PaddingBlockStart>>;
-  paddingBlockEnd?:
-    | PaddingBlockEnd
-    | Partial<Record<UNSAFE_Breakpoint, PaddingBlockEnd>>;
-  paddingInline?:
-    | PaddingInline
-    | Partial<Record<UNSAFE_Breakpoint, PaddingInline>>;
+  padding?: Padding | ResponsiveObject<Padding>;
+  paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
+  paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
+  paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
+  paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
   paddingInlineStart?:
     | PaddingInlineStart
-    | Partial<Record<UNSAFE_Breakpoint, PaddingInlineStart>>;
-  paddingInlineEnd?:
-    | PaddingInlineEnd
-    | Partial<Record<UNSAFE_Breakpoint, PaddingInlineEnd>>;
+    | ResponsiveObject<PaddingInlineStart>;
+  paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
   width?: Width;
   height?: Height;
-  display?: Display | Partial<Record<UNSAFE_Breakpoint, Display>>;
+  display?: Display | ResponsiveObject<Display>;
   position?: Position;
   ref?: ComponentPropsWithRef<T>['ref'];
 };
@@ -275,6 +264,9 @@ export type BoxProps<T extends ElementType = 'div'> = Omit<
 // @public (undocumented)
 type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
 // @public
 type CustomStyles = Pick<
   CSSProperties,
@@ -373,6 +365,7 @@ export interface InlineProps {
   alignInline?: AlignInline;
   children: ReactNode;
   grow?: Grow;
+  rowSpace?: RowSpace;
   separator?: string;
   shouldWrap?: boolean;
   space?: Space;
@@ -487,6 +480,30 @@ type PublicBoxPropsBase = {
   customStyles?: CustomStyles;
 };
 
+// @public
+type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+
+// @public (undocumented)
+type RowSpace = keyof typeof rowSpaceMap;
+
+// @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 Shadow = keyof typeof shadowMap;
 

package/scripts/spacing-codegen-template.tsx

@@ -10,6 +10,7 @@ const spacingProperties: Record<
   {
     cssProperties: readonly string[];
     responsiveOutput?: boolean;
+    propNameFormatter?: (propName: string) => string;
   }
 > = {
   padding: {
@@ -24,17 +25,13 @@ const spacingProperties: Record<
     ],
     responsiveOutput: true,
   },
-  gap: {
-    cssProperties: ['gap'],
-  },
   space: {
     cssProperties: ['gap'],
+    propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
   },
-  columnGap: {
-    cssProperties: ['columnGap'],
-  },
-  rowGap: {
+  rowSpace: {
     cssProperties: ['rowGap'],
+    propNameFormatter: tokenName => tokenName.replace(spacingTokenPrefix, ''),
   },
 } as const;
 
@@ -55,7 +52,7 @@ export const createSpacingStylesFromTemplate = (
     throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
   }
 
-  const { cssProperties, responsiveOutput } =
+  const { cssProperties, responsiveOutput, propNameFormatter } =
     spacingProperties[spacingProperty]!;
 
   return (
@@ -65,10 +62,9 @@ const ${spacingProperty}Map = {
   ${activeTokens
     .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
     .map(token => {
-      const propName =
-        spacingProperty === 'space'
-          ? token.name.replace(spacingTokenPrefix, '')
-          : token.name;
+      const propName = propNameFormatter
+        ? propNameFormatter(token.name)
+        : token.name;
 
       // a responsive output simply prints out a mapping of tokens
       if (responsiveOutput) {

package/tmp/api-report-tmp.d.ts

@@ -15,7 +15,6 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
-import { UNSAFE_Breakpoint } from '@atlaskit/ds-explorations';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -122,7 +121,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
     backgroundColor?: BackgroundColor;
     shadow?: Shadow;
     borderStyle?: BorderStyle;
-    borderWidth?: BorderWidth | Partial<Record<UNSAFE_Breakpoint, BorderWidth>>;
+    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
     borderColor?: BorderColor;
     borderRadius?: BorderRadius;
     layer?: Layer;
@@ -133,16 +132,16 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
     overflow?: Overflow;
     overflowInline?: OverflowInline;
     overflowBlock?: OverflowBlock;
-    padding?: Padding | Partial<Record<UNSAFE_Breakpoint, Padding>>;
-    paddingBlock?: PaddingBlock | Partial<Record<UNSAFE_Breakpoint, PaddingBlock>>;
-    paddingBlockStart?: PaddingBlockStart | Partial<Record<UNSAFE_Breakpoint, PaddingBlockStart>>;
-    paddingBlockEnd?: PaddingBlockEnd | Partial<Record<UNSAFE_Breakpoint, PaddingBlockEnd>>;
-    paddingInline?: PaddingInline | Partial<Record<UNSAFE_Breakpoint, PaddingInline>>;
-    paddingInlineStart?: PaddingInlineStart | Partial<Record<UNSAFE_Breakpoint, PaddingInlineStart>>;
-    paddingInlineEnd?: PaddingInlineEnd | Partial<Record<UNSAFE_Breakpoint, PaddingInlineEnd>>;
+    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>;
     width?: Width;
     height?: Height;
-    display?: Display | Partial<Record<UNSAFE_Breakpoint, Display>>;
+    display?: Display | ResponsiveObject<Display>;
     position?: Position;
     ref?: ComponentPropsWithRef<T>['ref'];
 };
@@ -228,6 +227,9 @@ export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'UNS
 // @public (undocumented)
 type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
 // @public
 type CustomStyles = Pick<CSSProperties, 'flex' | 'flexBasis' | 'float' | 'height' | 'insetBlockStart' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'width'>;
 
@@ -299,6 +301,7 @@ export interface InlineProps {
     alignInline?: AlignInline;
     children: ReactNode;
     grow?: Grow;
+    rowSpace?: RowSpace;
     separator?: string;
     shouldWrap?: boolean;
     space?: Space;
@@ -413,6 +416,30 @@ type PublicBoxPropsBase = {
     customStyles?: CustomStyles;
 };
 
+// @public
+type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
+
+// @public (undocumented)
+type RowSpace = keyof typeof rowSpaceMap;
+
+// @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 Shadow = keyof typeof shadowMap;