@atlaskit/primitives 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.0.6
+
+### Patch Changes
+
+- [`aa8ec75ace3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aa8ec75ace3) - Simplify types for `Show` and `Hide` components. There should be no difference in behavior.
+
+## 1.0.5
+
+### Patch Changes
+
+- [`3fadbb8bf73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fadbb8bf73) - Internal changes.
+
 ## 1.0.4
 
 ### 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,48 @@
+---
+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.
+Note, in the context of a flex container bleed will collapse the whitespace around its child element.
+
+<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.
+Note, in the context of a flex container bleed will collapse the whitespace around its child element.
+
+<Example Component={BleedInline} packageName="@atlaskit/primitives/bleed" />

package/constellation/box/examples.mdx

@@ -8,6 +8,8 @@ import BoxBasic from '../../examples/constellation/box/basic';
 import BoxPadding from '../../examples/constellation/box/padding';
 import BoxBackgroundColor from '../../examples/constellation/box/background-color';
 import BoxXcss from '../../examples/constellation/box/xcss';
+import PracticalUseCase from '../../examples/constellation/box/practical-use-case';
+
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 <CodeDocsHeader
@@ -43,3 +45,7 @@ Box also exposes an `xcss` prop. This prop can take `xcss` function calls that c
 <Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
 
 For more information on xCSS, see the dedicated [xCSS](/components/primitives/xcss) documentation.
+
+## Practical Use Case
+
+<Example Component={PracticalUseCase} packageName="@atlaskit/primitives/box" />

package/constellation/flex/examples.mdx

@@ -21,11 +21,16 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 ## Basic
 
 The `Flex` component is designed as a very basic mapping to the CSS Flexbox API.
-It can be used as a less richly-configured `Inline` or `Stack`.
+It can be used as a less richly-configured `Inline` or `Stack`. Like `Stack` and `Inline`
+`Flex` exclusively supports token-backed `gap` properties to ensure layouts using `Flex` match
+the Atlassian Design System spacing scale.
 
 <Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />
 
-## Align items
+## Align items and justify content
+
+`Flex` applies the `alignItems` and `justifyContent` properties to align content
+along its cross and main axes respectively.
 
 <Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />
 

package/constellation/grid/examples.mdx

@@ -44,3 +44,6 @@ Grid-prefixed properties in CSS do not have this prefix in the component API. `g
 
 <Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
 
+You may also be looking for:
+* [responsive layout grid](/components/grid)
+* [legacy page grid](/components/page/grid)

package/constellation/inline/examples.mdx

@@ -14,6 +14,7 @@ import InlineWrap from '../../examples/constellation/inline/wrap';
 import InlineSeparator from '../../examples/constellation/inline/separator';
 import InlineGrow from '../../examples/constellation/inline/grow';
 import InlineAs from '../../examples/constellation/inline/as';
+import InlinePracticalUseCase from '../../examples/constellation/inline/practical-use-case';
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
@@ -23,6 +24,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
+
 ## Basic
 
 Inline is an abstraction to efficiently lay-out a group of elements horizontally.
@@ -89,3 +91,7 @@ To control that the `grow` prop can be used with the values:
 It's possible to control the rendered HTML element with the `as` prop.
 
 <Example Component={InlineAs} packageName="@atlaskit/primitives/inline" />
+
+## Practical Use Case
+
+<Example Component={InlinePracticalUseCase} packageName="@atlaskit/primitives/inline" />

package/constellation/overview/index.mdx

@@ -19,19 +19,18 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-Primitive components are a new type of component for layouts and placement of elements.
-They act as building blocks to compose different parts of the user experience,
+Primitives are a new type of component for layouts and the placement of elements.
+They act as simple building blocks to compose different parts of the user experience,
 from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).
 
-Primitives are designed to work hand in hand with design tokens,
-to provide opinionated solutions for common low-level design decisions that engineers often have to make.
-They are designed to reduce cognitive overhead for engineers by providing guardrails around what is recommended within our design system.
-
-A primitive component is a pre-built solution in that they will only accept values that are valid in the Atlassian Design System, and help to implement common layout patterns. This reduces the need to look up documentation and write custom CSS.
+Primitives are a combination of design tokens that go a step further.
+These are component-like abstractions powered by design tokens that add a layer of ergonomics and accessibility. Tokens are great at describing the what of a design decision;
+primitives make it easier to reason about the when and how. This reduces cognitive overhead and prevents accidents or mistakes.
 
 ## Available Primitives
 
-Each primitive is designed to have a single responsibility, and it should be immediately clear where each primitive should be used. However, they are also flexible enough that they should be able to be used to compose complex designs not otherwise covered in the Design Systems.
+Each primitive is designed to have a single responsibility, and it should be immediately clear where and when each primitive should be used.
+However, they are also flexible enough that they should be able to be used together to compose complex designs not otherwise implemented directly in the Design Systems.
 
 Currently, three core primitive components are available - Box, Inline and Stack. A large amount of layout problems can be reduced to laying out content:
 - in a container (see [box](/components/primitives/box))
@@ -41,7 +40,7 @@ Currently, three core primitive components are available - Box, Inline and Stack
 Additional layouts not well-expressed by these core primitives can also be composed using:
 - CSS Flexbox (see [flex](/components/primitives/flex))
 - CSS Grid (see [grid](/components/primitives/grid))
-- Divider (see [divider](/components/primitives/divider))
+- Bleed (see [bleed](/components/primitives/bleed))
 
 ## Installation
 
@@ -52,15 +51,13 @@ $ yarn add @atlaskit/primitives
 
 ## Using Primitives
 
-Use primitives for general layout styles for components.
+Use primitives for composing layouts.
 Primitives are not currently available in Figma, so the first step in implementing primitive components is identifying where they might fit in a given design.
 This involves breaking down a design into its core layout components to as granular level as is useful.
 
-<SectionMessage appearance="warning">
-Primitives should be avoided where absolute DOM control is required or very specific styling values are needed, however, this approach is more likely to produce visual elements that fail to adhere to the guidelines of the Atlassian Design System.
-</SectionMessage>
-
-You might like to think first about breaking down a page into `Box` containers, identifying larger pieces of a design that function in a similar manner or fulfill a singular purpose in a layout and grouping them together under a Box.
+You might like to think first about breaking down a page into `Box` containers,
+identifying larger pieces of a design that function in a similar manner or fulfill a singular purpose
+in a layout and grouping them together under a Box.
 
 <Image src={boxUsageExample} />
 

package/constellation/responsive/01-show/code.mdx

@@ -0,0 +1,19 @@
+---
+title: Show
+description: Show is a responsive primitive that displays children at specified breakpoints
+order: 2
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ShowProps from '!!extract-react-types-loader!../../../extract-react-types/show-props'
+
+## Props
+
+<PropsTable heading="" props={ShowProps} />

package/constellation/responsive/02-hide/code.mdx

@@ -0,0 +1,19 @@
+---
+title: Hide
+description: Hide is a responsive primitive that hides children at specified breakpoints
+order: 2
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import HideProps from '!!extract-react-types-loader!../../../extract-react-types/hide-props'
+
+## Props
+
+<PropsTable heading="" props={HideProps} />

package/constellation/stack/examples.mdx

@@ -5,6 +5,7 @@ order: 0
 ---
 
 import StackBasic from '../../examples/constellation/stack/basic';
+import PracticalUseCase from '../../examples/constellation/stack/practical-use-case';
 import StackSpaceBasic from '../../examples/constellation/stack/space-basic';
 import StackAlignBlock from '../../examples/constellation/stack/align-block';
 import StackAlignInline from '../../examples/constellation/stack/align-inline';
@@ -68,3 +69,7 @@ To control that the `grow` prop can be used with the values:
 It's possible to control the rendered HTML element with the `as` prop.
 
 <Example Component={StackAs} packageName="@atlaskit/primitives/stack" />
+
+## Practical Use Case
+
+<Example Component={PracticalUseCase} packageName="@atlaskit/primitives/stack" />

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/components/inline.js

@@ -39,8 +39,7 @@ var Separator = function Separator(_ref) {
 /**
  * __Inline__
  *
- * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
- *
+ * Inline is a primitive component based on CSS Flexbox that manages the horizontal layout of direct children.
  *
  * @example
  * ```tsx

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.4",
+	"version": "1.0.6",
 	"sideEffects": false
 }

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/components/inline.js

@@ -29,8 +29,7 @@ const Separator = ({
 /**
  * __Inline__
  *
- * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
- *
+ * Inline is a primitive component based on CSS Flexbox that manages the horizontal layout of direct children.
  *
  * @example
  * ```tsx

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
       })
     };