@atlaskit/primitives 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.0.5
+
+### Patch Changes
+
+- [`3fadbb8bf73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fadbb8bf73) - Internal changes.
+
+## 1.0.4
+
+### Patch Changes
+
+- [`74f7af9882b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74f7af9882b) - [ux] correct fallback color of token color.border.focused to meet contrast requirement
+
 ## 1.0.3
 
 ### Patch Changes

package/constellation/bleed/code.mdx

@@ -0,0 +1,19 @@
+---
+title: Bleed
+description: Bleed is a primitive layout component that controls negative whitespace.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import BleedProps from '!!extract-react-types-loader!../../extract-react-types/bleed-props'
+
+## Props
+
+<PropsTable heading="" props={BleedProps} />

package/constellation/bleed/example.mdx

@@ -0,0 +1,46 @@
+---
+title: Bleed
+description: Bleed is a primitive layout component that controls negative whitespace.
+order: 0
+---
+
+import BleedDefault from '../../examples/constellation/bleed/default';
+import BleedBlock from '../../examples/constellation/bleed/block';
+import BleedInline from '../../examples/constellation/bleed/inline';
+import BleedAll from '../../examples/constellation/bleed/all';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+## Using Bleed
+
+Bleed is a component that allows its children to break the boundaries of its container. This is useful for content
+that wants to negate the padding or whitespace applied by its parent in a controlled manner. For example in the below grid layout, the middle
+item bleeds across the inline and block axes to overlap the gap set by the grid.
+
+<Example Component={BleedAll} packageName="@atlaskit/primitives/bleed" />
+
+## Bleed and no bleed
+
+Bleed might be utilised to create a stacking effect with a group of avatars. Here each avatar is laid out with the `Inline` parent
+container. Without a bleed, each avatar would sit directly adjacent to its sibling. With `Bleed` we can negate the whitespace and force
+each avatar to overlap its direct sibling and create our desired stack.
+
+<Example Component={BleedDefault} packageName="@atlaskit/primitives/bleed" />
+
+## Block whitespace
+
+Bleed can be controlled on the block axis (vertical) with the `block` property. The values of this property are tied to our spacing scale.
+
+<Example Component={BleedBlock} packageName="@atlaskit/primitives/bleed" />
+
+## Inline whitespace
+
+Bleed can also be controlled on the inline axis (horizontal) with the `inline` property. The values of this property are tied to our spacing scale.
+
+<Example Component={BleedInline} packageName="@atlaskit/primitives/bleed" />

package/dist/cjs/components/bleed.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _xcss = require("../xcss/xcss");
+/* eslint-disable @atlaskit/design-system/use-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var baseStyles = (0, _react2.css)({
+  boxSizing: 'border-box'
+});
+var blockBleedMap = {
+  'space.025': (0, _react2.css)({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 2px)", ")")
+  }),
+  'space.050': (0, _react2.css)({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
+  }),
+  'space.100': (0, _react2.css)({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
+  }),
+  'space.200': (0, _react2.css)({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
+  }),
+  'space.150': (0, _react2.css)({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
+  })
+};
+var inlineBleedMap = {
+  'space.025': (0, _react2.css)({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")")
+  }),
+  'space.050': (0, _react2.css)({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
+  }),
+  'space.100': (0, _react2.css)({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
+  }),
+  'space.200': (0, _react2.css)({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
+  }),
+  'space.150': (0, _react2.css)({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
+  })
+};
+
+/**
+ * __Bleed__
+ *
+ * `Bleed` is a primitive layout component that controls negative whitespace.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/bleed/examples)
+ * - [Code](https://atlassian.design/components/primitives/bleed/code)
+ */
+var Bleed = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    inline = _ref.inline,
+    block = _ref.block,
+    all = _ref.all,
+    xcss = _ref.xcss;
+  var xcssStyles = xcss && (0, _xcss.parseXcss)(xcss);
+  return (0, _react2.jsx)("div", {
+    css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssStyles],
+    "data-testid": testId
+  }, children);
+});
+Bleed.displayName = 'Bleed';
+var _default = Bleed;
+exports.default = _default;

package/dist/cjs/components/flex.js

@@ -8,7 +8,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
-/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
 var justifyContentMap = {

package/dist/cjs/components/grid.js

@@ -8,7 +8,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
-/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
 var justifyContentMap = {
@@ -34,6 +33,43 @@ var justifyContentMap = {
     justifyContent: 'stretch'
   })
 };
+var justifyItemsMap = {
+  start: (0, _react2.css)({
+    justifyItems: 'start'
+  }),
+  center: (0, _react2.css)({
+    justifyItems: 'center'
+  }),
+  end: (0, _react2.css)({
+    justifyItems: 'end'
+  }),
+  stretch: (0, _react2.css)({
+    justifyItems: 'stretch'
+  })
+};
+var alignContentMap = {
+  start: (0, _react2.css)({
+    alignContent: 'start'
+  }),
+  center: (0, _react2.css)({
+    alignContent: 'center'
+  }),
+  end: (0, _react2.css)({
+    alignContent: 'end'
+  }),
+  'space-between': (0, _react2.css)({
+    alignContent: 'space-between'
+  }),
+  'space-around': (0, _react2.css)({
+    alignContent: 'space-around'
+  }),
+  'space-evenly': (0, _react2.css)({
+    alignContent: 'space-evenly'
+  }),
+  stretch: (0, _react2.css)({
+    alignContent: 'stretch'
+  })
+};
 var alignItemsMap = {
   start: (0, _react2.css)({
     alignItems: 'start'
@@ -93,11 +129,14 @@ var gridAutoFlowMap = {
 var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var as = _ref.as,
     alignItems = _ref.alignItems,
+    alignContent = _ref.alignContent,
     justifyContent = _ref.justifyContent,
     gap = _ref.gap,
     columnGap = _ref.columnGap,
     rowGap = _ref.rowGap,
     children = _ref.children,
+    id = _ref.id,
+    role = _ref.role,
     testId = _ref.testId,
     autoFlow = _ref.autoFlow,
     gridTemplateAreas = _ref.templateAreas,
@@ -114,8 +153,10 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     gridTemplateRows: gridTemplateRows
   }) : undefined;
   return (0, _react2.jsx)(Component, {
+    id: id,
+    role: role,
     style: style,
-    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],
     "data-testid": testId,

package/dist/cjs/index.js

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Bleed", {
+  enumerable: true,
+  get: function get() {
+    return _bleed.default;
+  }
+});
 Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function get() {
@@ -71,4 +77,5 @@ var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));
 var _flex = _interopRequireDefault(require("./components/flex"));
 var _grid = _interopRequireDefault(require("./components/grid"));
+var _bleed = _interopRequireDefault(require("./components/bleed"));
 var _responsive = require("./responsive");

package/dist/cjs/version.json

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

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

@@ -60,7 +60,7 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ce1e2114942246d556d0b102fe77b724>>
+ * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -79,7 +79,7 @@ var borderColorMap = {
   'color.border.accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
   'color.border.accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
   'color.border.disabled': "var(--ds-border-disabled, #FAFBFC)",
-  'color.border.focused': "var(--ds-border-focused, #4C9AFF)",
+  'color.border.focused': "var(--ds-border-focused, #2684FF)",
   'color.border.input': "var(--ds-border-input, #FAFBFC)",
   'color.border.inverse': "var(--ds-border-inverse, #FFFFFF)",
   'color.border.selected': "var(--ds-border-selected, #0052CC)",

package/dist/es2019/components/bleed.js

@@ -0,0 +1,72 @@
+/* eslint-disable @atlaskit/design-system/use-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { parseXcss } from '../xcss/xcss';
+const baseStyles = css({
+  boxSizing: 'border-box'
+});
+const blockBleedMap = {
+  'space.025': css({
+    marginBlock: `calc(-1 * ${"var(--ds-space-050, 2px)"})`
+  }),
+  'space.050': css({
+    marginBlock: `calc(-1 * ${"var(--ds-space-050, 4px)"})`
+  }),
+  'space.100': css({
+    marginBlock: `calc(-1 * ${"var(--ds-space-100, 8px)"})`
+  }),
+  'space.200': css({
+    marginBlock: `calc(-1 * ${"var(--ds-space-200, 16px)"})`
+  }),
+  'space.150': css({
+    marginBlock: `calc(-1 * ${"var(--ds-space-150, 12px)"})`
+  })
+};
+const inlineBleedMap = {
+  'space.025': css({
+    marginInline: `calc(-1 * ${"var(--ds-space-025, 2px)"})`
+  }),
+  'space.050': css({
+    marginInline: `calc(-1 * ${"var(--ds-space-050, 4px)"})`
+  }),
+  'space.100': css({
+    marginInline: `calc(-1 * ${"var(--ds-space-100, 8px)"})`
+  }),
+  'space.200': css({
+    marginInline: `calc(-1 * ${"var(--ds-space-200, 16px)"})`
+  }),
+  'space.150': css({
+    marginInline: `calc(-1 * ${"var(--ds-space-150, 12px)"})`
+  })
+};
+
+/**
+ * __Bleed__
+ *
+ * `Bleed` is a primitive layout component that controls negative whitespace.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/bleed/examples)
+ * - [Code](https://atlassian.design/components/primitives/bleed/code)
+ */
+const Bleed = /*#__PURE__*/memo(({
+  children,
+  testId,
+  inline,
+  block,
+  all,
+  xcss
+}) => {
+  const xcssStyles = xcss && parseXcss(xcss);
+  return jsx("div", {
+    css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssStyles],
+    "data-testid": testId
+  }, children);
+});
+Bleed.displayName = 'Bleed';
+export default Bleed;

package/dist/es2019/components/flex.js

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/es2019/components/grid.js

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -27,6 +26,43 @@ const justifyContentMap = {
     justifyContent: 'stretch'
   })
 };
+const justifyItemsMap = {
+  start: css({
+    justifyItems: 'start'
+  }),
+  center: css({
+    justifyItems: 'center'
+  }),
+  end: css({
+    justifyItems: 'end'
+  }),
+  stretch: css({
+    justifyItems: 'stretch'
+  })
+};
+const alignContentMap = {
+  start: css({
+    alignContent: 'start'
+  }),
+  center: css({
+    alignContent: 'center'
+  }),
+  end: css({
+    alignContent: 'end'
+  }),
+  'space-between': css({
+    alignContent: 'space-between'
+  }),
+  'space-around': css({
+    alignContent: 'space-around'
+  }),
+  'space-evenly': css({
+    alignContent: 'space-evenly'
+  }),
+  stretch: css({
+    alignContent: 'stretch'
+  })
+};
 const alignItemsMap = {
   start: css({
     alignItems: 'start'
@@ -86,11 +122,14 @@ const gridAutoFlowMap = {
 const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   as,
   alignItems,
+  alignContent,
   justifyContent,
   gap,
   columnGap,
   rowGap,
   children,
+  id,
+  role,
   testId,
   autoFlow,
   templateAreas: gridTemplateAreas,
@@ -106,8 +145,10 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     gridTemplateRows
   }) : undefined;
   return jsx(Component, {
+    id: id,
+    role: role,
     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],
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],
     "data-testid": testId,

package/dist/es2019/index.js

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

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

@@ -67,7 +67,7 @@ export const UNSAFE_buildBelowMediaQueryCSS = input => {
     return {
       ...acc,
       [breakpoint]: css({
-        // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+        // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
         [UNSAFE_media.below[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
       })
     };

package/dist/es2019/version.json

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

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

@@ -48,7 +48,7 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ce1e2114942246d556d0b102fe77b724>>
+ * @codegen <<SignedSource::58f7acf912c1f55cbaa7a5be887f1b44>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
@@ -67,7 +67,7 @@ export const borderColorMap = {
   'color.border.accent.magenta': "var(--ds-border-accent-magenta, #CD519D)",
   'color.border.accent.gray': "var(--ds-border-accent-gray, #5E6C84)",
   'color.border.disabled': "var(--ds-border-disabled, #FAFBFC)",
-  'color.border.focused': "var(--ds-border-focused, #4C9AFF)",
+  'color.border.focused': "var(--ds-border-focused, #2684FF)",
   'color.border.input': "var(--ds-border-input, #FAFBFC)",
   'color.border.inverse': "var(--ds-border-inverse, #FFFFFF)",
   'color.border.selected': "var(--ds-border-selected, #0052CC)",

package/dist/esm/components/bleed.js

@@ -0,0 +1,71 @@
+/* eslint-disable @atlaskit/design-system/use-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { parseXcss } from '../xcss/xcss';
+var baseStyles = css({
+  boxSizing: 'border-box'
+});
+var blockBleedMap = {
+  'space.025': css({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 2px)", ")")
+  }),
+  'space.050': css({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
+  }),
+  'space.100': css({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
+  }),
+  'space.200': css({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
+  }),
+  'space.150': css({
+    marginBlock: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
+  })
+};
+var inlineBleedMap = {
+  'space.025': css({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")")
+  }),
+  'space.050': css({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
+  }),
+  'space.100': css({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
+  }),
+  'space.200': css({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
+  }),
+  'space.150': css({
+    marginInline: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
+  })
+};
+
+/**
+ * __Bleed__
+ *
+ * `Bleed` is a primitive layout component that controls negative whitespace.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/bleed/examples)
+ * - [Code](https://atlassian.design/components/primitives/bleed/code)
+ */
+var Bleed = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    inline = _ref.inline,
+    block = _ref.block,
+    all = _ref.all,
+    xcss = _ref.xcss;
+  var xcssStyles = xcss && parseXcss(xcss);
+  return jsx("div", {
+    css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssStyles],
+    "data-testid": testId
+  }, children);
+});
+Bleed.displayName = 'Bleed';
+export default Bleed;

package/dist/esm/components/flex.js

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/esm/components/grid.js

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -27,6 +26,43 @@ var justifyContentMap = {
     justifyContent: 'stretch'
   })
 };
+var justifyItemsMap = {
+  start: css({
+    justifyItems: 'start'
+  }),
+  center: css({
+    justifyItems: 'center'
+  }),
+  end: css({
+    justifyItems: 'end'
+  }),
+  stretch: css({
+    justifyItems: 'stretch'
+  })
+};
+var alignContentMap = {
+  start: css({
+    alignContent: 'start'
+  }),
+  center: css({
+    alignContent: 'center'
+  }),
+  end: css({
+    alignContent: 'end'
+  }),
+  'space-between': css({
+    alignContent: 'space-between'
+  }),
+  'space-around': css({
+    alignContent: 'space-around'
+  }),
+  'space-evenly': css({
+    alignContent: 'space-evenly'
+  }),
+  stretch: css({
+    alignContent: 'stretch'
+  })
+};
 var alignItemsMap = {
   start: css({
     alignItems: 'start'
@@ -86,11 +122,14 @@ var gridAutoFlowMap = {
 var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     alignItems = _ref.alignItems,
+    alignContent = _ref.alignContent,
     justifyContent = _ref.justifyContent,
     gap = _ref.gap,
     columnGap = _ref.columnGap,
     rowGap = _ref.rowGap,
     children = _ref.children,
+    id = _ref.id,
+    role = _ref.role,
     testId = _ref.testId,
     autoFlow = _ref.autoFlow,
     gridTemplateAreas = _ref.templateAreas,
@@ -107,8 +146,10 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     gridTemplateRows: gridTemplateRows
   }) : undefined;
   return jsx(Component, {
+    id: id,
+    role: role,
     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],
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],
     "data-testid": testId,

package/dist/esm/index.js

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

package/dist/esm/version.json

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