@atlaskit/primitives 1.0.1 → 1.0.3

package/dist/cjs/components/inline.js

@@ -1,64 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
+var _flex = _interopRequireDefault(require("./flex"));
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
-var alignItemsMap = {
-  center: (0, _react2.css)({
-    alignItems: 'center'
-  }),
-  baseline: (0, _react2.css)({
-    alignItems: 'baseline'
-  }),
-  start: (0, _react2.css)({
-    alignItems: 'flex-start'
-  }),
-  end: (0, _react2.css)({
-    alignItems: 'flex-end'
-  }),
-  stretch: (0, _react2.css)({
-    alignItems: 'stretch'
-  })
-};
-var justifyContentMap = {
-  start: (0, _react2.css)({
-    justifyContent: 'flex-start'
-  }),
-  center: (0, _react2.css)({
-    justifyContent: 'center'
-  }),
-  end: (0, _react2.css)({
-    justifyContent: 'flex-end'
-  }),
-  'space-between': (0, _react2.css)({
-    justifyContent: 'space-between'
-  })
-};
 var flexGrowMap = {
-  hug: (0, _react2.css)({
+  hug: (0, _xcss.xcss)({
     flexGrow: 0
   }),
-  fill: (0, _react2.css)({
+  fill: (0, _xcss.xcss)({
     width: '100%',
     flexGrow: 1
   })
 };
-var flexWrapStyles = (0, _react2.css)({
-  flexWrap: 'wrap'
-});
-var baseStyles = (0, _react2.css)({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'row'
-});
 var separatorStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
@@ -103,7 +66,6 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
-  var Component = as || 'div';
   var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
   var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return (0, _react2.jsx)(_react.Fragment, {
@@ -111,12 +73,18 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
-  var className = xcss && (0, _xcss.parseXcss)(xcss);
-  return (0, _react2.jsx)(Component, {
-    css: [
+  return (0, _react2.jsx)(_flex.default, {
+    as: as,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    direction: "row",
+    gap: space,
+    rowGap: rowSpace,
+    wrap: shouldWrap ? 'wrap' : undefined,
+    xcss: grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) :
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className, baseStyles, space && _styleMaps.spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && _styleMaps.spaceStylesMap.rowGap[rowSpace]],
-    "data-testid": testId,
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/cjs/components/stack.js

@@ -1,59 +1,32 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _styleMaps = require("../xcss/style-maps.partial");
+var _xcss = require("../xcss/xcss");
+var _flex = _interopRequireDefault(require("./flex"));
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
-var justifyContentMap = {
-  start: (0, _react2.css)({
-    justifyContent: 'start'
-  }),
-  center: (0, _react2.css)({
-    justifyContent: 'center'
-  }),
-  end: (0, _react2.css)({
-    justifyContent: 'end'
-  }),
-  'space-between': (0, _react2.css)({
-    justifyContent: 'space-between'
-  })
-};
-var alignItemsMap = {
-  start: (0, _react2.css)({
-    alignItems: 'start'
-  }),
-  center: (0, _react2.css)({
-    alignItems: 'center'
-  }),
-  end: (0, _react2.css)({
-    alignItems: 'end'
-  })
-};
 var flexGrowMap = {
-  hug: (0, _react2.css)({
+  hug: (0, _xcss.xcss)({
     flexGrow: 0
   }),
-  fill: (0, _react2.css)({
+  fill: (0, _xcss.xcss)({
     width: '100%',
     flexGrow: 1
   })
 };
-var baseStyles = (0, _react2.css)({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'column'
-});
 
 /**
  * __Stack__
  *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -72,12 +45,19 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     grow = _ref.grow,
     space = _ref.space,
     children = _ref.children,
-    testId = _ref.testId;
-  var Component = as || 'div';
+    testId = _ref.testId,
+    xcss = _ref.xcss;
   var justifyContent = spread || alignBlock;
-  return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && _styleMaps.spaceStylesMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
-    "data-testid": testId,
+  return (0, _react2.jsx)(_flex.default, {
+    as: as,
+    gap: space,
+    direction: "column",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    xcss: grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/cjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "Flex", {
     return _flex.default;
   }
 });
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _grid.default;
+  }
+});
 Object.defineProperty(exports, "Inline", {
   enumerable: true,
   get: function get() {
@@ -46,6 +52,12 @@ Object.defineProperty(exports, "UNSAFE_media", {
     return _responsive.UNSAFE_media;
   }
 });
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.media;
+  }
+});
 Object.defineProperty(exports, "xcss", {
   enumerable: true,
   get: function get() {
@@ -58,4 +70,5 @@ var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));
 var _flex = _interopRequireDefault(require("./components/flex"));
+var _grid = _interopRequireDefault(require("./components/grid"));
 var _responsive = require("./responsive");

package/dist/cjs/version.json

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

package/dist/cjs/xcss/style-maps.partial.js

@@ -60,11 +60,11 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
+ * @codegen <<SignedSource::ce1e2114942246d556d0b102fe77b724>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -155,9 +155,15 @@ var backgroundColorMap = {
   'color.background.selected.bold': "var(--ds-background-selected-bold, #0052CC)",
   'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
   'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
+  'color.background.brand.subtlest': "var(--ds-background-brand-subtlest, #B3D4FF)",
+  'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered, #DEEBFF)",
+  'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed, #4C9AFF)",
   'color.background.brand.bold': "var(--ds-background-brand-bold, #0052CC)",
   'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
   'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
+  'color.background.brand.boldest': "var(--ds-background-brand-boldest, #0747A6)",
+  'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered, #0052CC)",
+  'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed, #0747A6)",
   'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
   'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
   'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",

package/dist/cjs/xcss/xcss.js

@@ -161,7 +161,7 @@ exports.parseXcss = parseXcss;
 var boxWrapper = function boxWrapper(style) {
   return xcss(style);
 };
-var inlineWrapper = function inlineWrapper(style) {
+var spaceWrapper = function spaceWrapper(style) {
   return xcss(style);
 };
 /**

package/dist/es2019/components/flex.js

@@ -55,6 +55,9 @@ const alignItemsMap = {
   }),
   end: css({
     alignItems: 'end'
+  }),
+  stretch: css({
+    alignItems: 'stretch'
   })
 };
 const baseStyles = css({
@@ -83,10 +86,11 @@ const baseStyles = css({
  * ```
  */
 const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  as,
+  as: Component = 'div',
   alignItems,
   justifyContent,
   gap,
+  columnGap,
   rowGap,
   children,
   testId,
@@ -94,10 +98,9 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   wrap,
   xcss
 }, ref) => {
-  const Component = as || 'div';
   const xcssClassName = xcss && parseXcss(xcss);
   return jsx(Component, {
-    css: [baseStyles, gap && spaceStylesMap.gap[gap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],
     "data-testid": testId,

package/dist/es2019/components/grid.js

@@ -0,0 +1,118 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+const justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  'space-around': css({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': css({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: css({
+    justifyContent: 'stretch'
+  })
+};
+const alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+const baseStyles = css({
+  display: 'grid',
+  boxSizing: 'border-box'
+});
+const gridAutoFlowMap = {
+  row: css({
+    gridAutoFlow: 'row'
+  }),
+  column: css({
+    gridAutoFlow: 'column'
+  }),
+  dense: css({
+    gridAutoFlow: 'dense'
+  }),
+  'row dense': css({
+    gridAutoFlow: 'row dense'
+  }),
+  'column dense': css({
+    gridAutoFlow: 'column dense'
+  })
+};
+
+/**
+ * __Grid__
+ *
+ * `Grid` is a primitive component that implements the CSS Grid API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/grid/examples)
+ * - [Code](https://atlassian.design/components/primitives/grid/code)
+ *
+ * @example
+ * ```tsx
+ * import { Grid, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Grid gap="space.100" gridColumns="1fr 1fr">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Grid>
+ * )
+ * ```
+ */
+const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
+  alignItems,
+  justifyContent,
+  gap,
+  columnGap,
+  rowGap,
+  children,
+  testId,
+  autoFlow,
+  templateAreas: gridTemplateAreas,
+  templateRows: gridTemplateRows,
+  templateColumns: gridTemplateColumns,
+  xcss
+}, ref) => {
+  const Component = as || 'div';
+  const xcssClassName = xcss && parseXcss(xcss);
+  const style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
+    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(str => `"${str}"`).join('\n') : undefined,
+    gridTemplateColumns,
+    gridTemplateRows
+  }) : undefined;
+  return jsx(Component, {
+    style: style,
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Grid.displayName = 'Grid';
+export default Grid;

package/dist/es2019/components/inline.js

@@ -2,56 +2,17 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-import { parseXcss } from '../xcss/xcss';
-const alignItemsMap = {
-  center: css({
-    alignItems: 'center'
-  }),
-  baseline: css({
-    alignItems: 'baseline'
-  }),
-  start: css({
-    alignItems: 'flex-start'
-  }),
-  end: css({
-    alignItems: 'flex-end'
-  }),
-  stretch: css({
-    alignItems: 'stretch'
-  })
-};
-const justifyContentMap = {
-  start: css({
-    justifyContent: 'flex-start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'flex-end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 const flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-const flexWrapStyles = css({
-  flexWrap: 'wrap'
-});
-const baseStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'row'
-});
 const separatorStyles = css({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
@@ -94,7 +55,6 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   testId,
   children: rawChildren
 }, ref) => {
-  const Component = as || 'div';
   const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
   const children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
     return jsx(Fragment, {
@@ -102,12 +62,18 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   const justifyContent = spread || alignInline;
-  const className = xcss && parseXcss(xcss);
-  return jsx(Component, {
-    css: [
+  return jsx(Flex, {
+    as: as,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    direction: "row",
+    gap: space,
+    rowGap: rowSpace,
+    wrap: shouldWrap ? 'wrap' : undefined,
+    xcss: grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] :
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className, baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
-    "data-testid": testId,
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/es2019/components/stack.js

@@ -1,52 +1,23 @@
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-const justifyContentMap = {
-  start: css({
-    justifyContent: 'start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
-const alignItemsMap = {
-  start: css({
-    alignItems: 'start'
-  }),
-  center: css({
-    alignItems: 'center'
-  }),
-  end: css({
-    alignItems: 'end'
-  })
-};
+import { jsx } from '@emotion/react';
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 const flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-const baseStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'column'
-});
 
 /**
  * __Stack__
  *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -65,13 +36,20 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   grow,
   space,
   children,
-  testId
+  testId,
+  xcss
 }, ref) => {
-  const Component = as || 'div';
   const justifyContent = spread || alignBlock;
-  return jsx(Component, {
-    css: [baseStyles, space && spaceStylesMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
-    "data-testid": testId,
+  return jsx(Flex, {
+    as: as,
+    gap: space,
+    direction: "column",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    xcss: grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/es2019/index.js

@@ -4,4 +4,5 @@ export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { default as Grid } from './components/grid';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/es2019/responsive/build-media-query-css.js

@@ -30,7 +30,6 @@ export const UNSAFE_buildAboveMediaQueryCSS = input => {
   return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => ({
     ...acc,
     [breakpoint]: css({
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
       [media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
     })
   }), {});

package/dist/es2019/version.json

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

package/dist/es2019/xcss/style-maps.partial.js

@@ -48,11 +48,11 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
+ * @codegen <<SignedSource::ce1e2114942246d556d0b102fe77b724>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 export const borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -142,9 +142,15 @@ export const backgroundColorMap = {
   'color.background.selected.bold': "var(--ds-background-selected-bold, #0052CC)",
   'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered, #2684FF)",
   'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed, #0052CC)",
+  'color.background.brand.subtlest': "var(--ds-background-brand-subtlest, #B3D4FF)",
+  'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered, #DEEBFF)",
+  'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed, #4C9AFF)",
   'color.background.brand.bold': "var(--ds-background-brand-bold, #0052CC)",
   'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered, #0065FF)",
   'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed, #0747A6)",
+  'color.background.brand.boldest': "var(--ds-background-brand-boldest, #0747A6)",
+  'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered, #0052CC)",
+  'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed, #0747A6)",
   'color.background.danger': "var(--ds-background-danger, #FFEBE6)",
   'color.background.danger.hovered': "var(--ds-background-danger-hovered, #FFBDAD)",
   'color.background.danger.pressed': "var(--ds-background-danger-pressed, #FF8F73)",

package/dist/es2019/xcss/xcss.js

@@ -142,7 +142,7 @@ export const parseXcss = args => {
 
 // unused private functions only so we can extract the return type from a generic function
 const boxWrapper = style => xcss(style);
-const inlineWrapper = style => xcss(style);
+const spaceWrapper = style => xcss(style);
 /**
  * ### xcss
  *