@atlaskit/primitives 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+### Minor Changes
+
+- [`e379d04c74a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e379d04c74a) - Expose a new form of `xcss` that is parameterised so it can be statically bound to the intended usage context.
+
 ## 0.4.2
 
 ### Patch Changes

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 /** @jsx jsx */
@@ -51,100 +53,30 @@ var flexWrapStyles = (0, _react2.css)({
 
 /**
  * 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)"))
+  }];
+}));
 /**
  * @codegenEnd
  */
@@ -205,7 +137,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
   }) : rawChildren;
   var justifyContent = spread || alignInline;
   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,
     ref: ref
   }, children);

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

@@ -5,48 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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
-
 /**
  * __Box__
  *
@@ -55,50 +20,49 @@ var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyVal
  *
  * @internal
  */
-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
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, htmlAttributes, {
     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
   }), children);
   return node;
@@ -116,9 +80,15 @@ var borderStyleMap = {
   })
 };
 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)"
+  })
 };
 var borderRadiusMap = {
   'radius.100': (0, _react2.css)({
@@ -176,11 +146,21 @@ var alignSelfMap = {
   })
 };
 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'
+  })
 };
 var positionMap = {
   absolute: (0, _react2.css)({
@@ -395,28 +375,30 @@ var maxHeightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding"]
  * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-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)"))
+  }];
+}));
 /**
  * @codegenEnd
  */

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 /** @jsx jsx */
@@ -45,56 +47,30 @@ var flexGrowMap = {
 
 /**
  * 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)"))
+  }];
+}));
 /**
  * @codegenEnd
  */
@@ -131,7 +107,7 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
   var Component = as || 'div';
   var justifyContent = spread || alignBlock;
   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,
     ref: ref
   }, children);

package/dist/cjs/internal/xcss.js

@@ -4,11 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.xcss = exports.transformStyles = exports.parseXcss = void 0;
+exports.transformStyles = exports.parseXcss = void 0;
+exports.xcss = xcss;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
 var _styleMaps = require("./style-maps");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var tokensMap = {
   backgroundColor: _styleMaps.backgroundColorMap,
   borderColor: _styleMaps.borderColorMap,
@@ -82,7 +85,7 @@ var transformStyles = function transformStyles(styleObj) {
   return styleObj;
 };
 exports.transformStyles = transformStyles;
-var xcss = function xcss(style) {
+var baseXcss = function baseXcss(style) {
   var transformedStyles = transformStyles(style);
   return {
     symbol: uniqueSymbol,
@@ -94,7 +97,6 @@ var xcss = function xcss(style) {
  * @internal used in primitives
  * @returns
  */
-exports.xcss = xcss;
 var parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
     // @ts-expect-error FIXME
@@ -107,4 +109,14 @@ var parseXcss = function parseXcss(args) {
   }
   return styles;
 };
-exports.parseXcss = parseXcss;
+exports.parseXcss = parseXcss;
+// unused private functions only so we can extract the return type from a generic function
+var boxWrapper = function boxWrapper(style) {
+  return xcss(style);
+};
+var inlineWrapper = function inlineWrapper(style) {
+  return xcss(style);
+};
+function xcss(style) {
+  return baseXcss(style);
+}

package/dist/cjs/version.json

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