@atlaskit/primitives 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.0.2
+
+### Patch Changes
+
+- [`45ff2cd234f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ff2cd234f) - Fixes missing type in `Flex` component, adds `Grid` component.
+
+## 1.0.1
+
+### Patch Changes
+
+- [`cac98ccfb7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cac98ccfb7d) - Introduces Flex component as common component for Stack, Inline.
+
 ## 1.0.0
 
 ### Major Changes

package/constellation/flex/code.mdx

@@ -0,0 +1,7 @@
+---
+title: Flex
+description: Flex is a primitive component that leverages the foundations of the Atlassian Design System.
+order: 1
+---
+
+TBD

package/constellation/flex/examples.mdx

@@ -0,0 +1,34 @@
+---
+title: Flex
+description: Flex is a primitive layout component that implements the CSS Flexbox API.
+order: 0
+---
+
+import FlexDirection from '../../examples/constellation/flex/direction';
+import FlexAlignItems from '../../examples/constellation/flex/align-items';
+import FlexJustifyContent from '../../examples/constellation/flex/justify-content';
+import FlexWrap from '../../examples/constellation/flex/wrap';
+
+## 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`.
+
+<Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />
+
+## Align items
+
+<Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />
+
+## Wrap
+
+Flex-prefixed properties in CSS do not have this prefix in the component API.
+For example `flex-wrap` is instead applied as the `wrap` property.
+
+<Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />
+
+## Direction
+
+Flex direction is applied via the `direction` property.
+
+<Example Component={FlexDirection} packageName="@atlaskit/primitives/flex" />

package/constellation/grid/code.mdx

@@ -0,0 +1,7 @@
+---
+title: Grid
+description: Grid is a primitive component that leverages the foundations of the Atlassian Design System.
+order: 1
+---
+
+TBD

package/constellation/grid/examples.mdx

@@ -0,0 +1,38 @@
+---
+title: Grid
+description: Grid is a primitive layout component that implements the CSS Grid API.
+order: 0
+---
+
+import GridBasic from '../../examples/constellation/grid/basic';
+import GridGap from '../../examples/constellation/grid/gap';
+import GridTemplate from '../../examples/constellation/grid/template';
+import GridAutoFlow from '../../examples/constellation/grid/auto-flow';
+
+## Basic
+
+The `Grid` component is designed as a very basic mapping to the CSS Grid API.
+It can be used as an alternative to [Flex](/components/primitives/flex), [Inline](/components/primitives/inline) or [Stack](/components/primitives/stack).
+
+<Example Component={GridBasic} packageName="@atlaskit/primitives/grid" />
+
+## Gap properties
+
+Gap properties - `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics
+and keep the whitespace of the grid harmonious with our spacing system.
+
+<Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
+
+## Template syntax
+
+Grid-prefixed template properties in CSS do not have this prefix in the component API.
+For example `grid-template-*` are instead applied as `templateColumns`, `templateRows` and `templateArea` properties.
+
+<Example Component={GridTemplate} packageName="@atlaskit/primitives/grid" />
+
+## Autoflow syntax
+
+Grid-prefixed properties in CSS do not have this prefix in the component API. `grid-auto-flow` is instead applied via `autoFlow`.
+
+<Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
+

package/constellation/overview/index.mdx

@@ -1,7 +1,6 @@
 ---
 title: Primitives
 description: Primitives are composable components that solve common layout problems.
-
 order: 1
 ---
 
@@ -12,25 +11,30 @@ import boxUsageExample from './images/box-usage-example.png';
 import inlineUsageExample from './images/inline-usage-example.png';
 import stackUsageExample from './images/stack-usage-example.png';
 
-<SectionMessage title="This is a preview of our new primitive components." appearance="warning">
-Expect frequent changes as we iterate over the coming months. For early access and release updates for Atlassian employees, see details.
-</SectionMessage>
-
-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, from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured). 
+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,
+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. 
+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. 
+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.
 
 ## 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 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.
 
-Currently, three primitive components are available for use in Closed Beta they are Box, Inline and Stack. These were chosen because a large amount of layout problems can be reduced to laying out content:
+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))
 - horizontally (see [inline](/components/primitives/inline))
 - vertically (see [stack](/components/primitives/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))
+
 ## Installation
 
 To install primitive components, add @atlaskit/primitives as a dependency on your project:
@@ -40,17 +44,19 @@ $ yarn add @atlaskit/primitives
 
 ## Using Primitives
 
-Use primitives for general layout styles for components. 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.
+Use primitives for general layout styles for components.
+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 could be skipped 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.
+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} />
 
-The behavior within and around these boxes can then be broken down into their horizontal Inline and vertical Stack components. 
+The behavior within and around these boxes can then be broken down into their horizontal `Inline` and vertical `Stack` components.
 
 <SectionMessage>
 The ESLint rule use-primitives offers suggestions for possible primitives in a layout.

package/dist/cjs/components/flex.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 = {
+  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'
+  }),
+  'space-around': (0, _react2.css)({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': (0, _react2.css)({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: (0, _react2.css)({
+    justifyContent: 'stretch'
+  })
+};
+var flexDirectionMap = {
+  column: (0, _react2.css)({
+    flexDirection: 'column'
+  }),
+  row: (0, _react2.css)({
+    flexDirection: 'row'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
+  }),
+  nowrap: (0, _react2.css)({
+    flexWrap: 'nowrap'
+  })
+};
+var alignItemsMap = {
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  }),
+  stretch: (0, _react2.css)({
+    alignItems: 'stretch'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box'
+});
+
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    direction = _ref.direction,
+    wrap = _ref.wrap,
+    xcss = _ref.xcss;
+  var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
+  return (0, _react2.jsx)(Component, {
+    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.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,
+    ref: ref
+  }, children);
+}));
+Flex.displayName = 'Flex';
+var _default = Flex;
+exports.default = _default;

package/dist/cjs/components/grid.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 = {
+  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'
+  }),
+  'space-around': (0, _react2.css)({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': (0, _react2.css)({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: (0, _react2.css)({
+    justifyContent: 'stretch'
+  })
+};
+var alignItemsMap = {
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'grid',
+  boxSizing: 'border-box'
+});
+var gridAutoFlowMap = {
+  row: (0, _react2.css)({
+    gridAutoFlow: 'row'
+  }),
+  column: (0, _react2.css)({
+    gridAutoFlow: 'column'
+  }),
+  dense: (0, _react2.css)({
+    gridAutoFlow: 'dense'
+  }),
+  'row dense': (0, _react2.css)({
+    gridAutoFlow: 'row dense'
+  }),
+  'column dense': (0, _react2.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>
+ * )
+ * ```
+ */
+var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    autoFlow = _ref.autoFlow,
+    gridTemplateAreas = _ref.templateAreas,
+    gridTemplateRows = _ref.templateRows,
+    gridTemplateColumns = _ref.templateColumns,
+    xcss = _ref.xcss;
+  var Component = as || 'div';
+  var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
+  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
+    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+      return "\"".concat(str, "\"");
+    }).join('\n') : undefined,
+    gridTemplateColumns: gridTemplateColumns,
+    gridTemplateRows: gridTemplateRows
+  }) : undefined;
+  return (0, _react2.jsx)(Component, {
+    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],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Grid.displayName = 'Grid';
+var _default = Grid;
+exports.default = _default;

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

@@ -10,6 +10,18 @@ Object.defineProperty(exports, "Box", {
     return _box.default;
   }
 });
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function get() {
+    return _flex.default;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _grid.default;
+  }
+});
 Object.defineProperty(exports, "Inline", {
   enumerable: true,
   get: function get() {
@@ -40,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() {
@@ -51,4 +69,6 @@ var _pressable = _interopRequireDefault(require("./components/pressable"));
 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");