@atlaskit/primitives 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.0.7
+
+### Patch Changes
+
+- [`6070ef412be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6070ef412be) - Box now accepts any HTML element for its `as` prop. Fixed issue where types may be incorrect depending on element used for the `as` prop.
+
+## 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

package/constellation/bleed/code.mdx

@@ -12,8 +12,8 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import BleedProps from '!!extract-react-types-loader!../../extract-react-types/bleed-props'
+import ERTBleed from '!!extract-react-types-loader!../../extract-react-types/bleed-props'
 
 ## Props
 
-<PropsTable heading="" props={BleedProps} />
+<PropsTable heading="" props={ERTBleed} />

package/constellation/bleed/example.mdx

@@ -36,11 +36,13 @@ each avatar to overlap its direct sibling and create our desired stack.
 ## 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/code.mdx

@@ -12,8 +12,8 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import BoxProps from '!!extract-react-types-loader!../../extract-react-types/box-props'
+import ERTBox from '!!extract-react-types-loader!../../extract-react-types/box-props'
 
 ## Props
 
-<PropsTable heading="" props={BoxProps} />
+<PropsTable heading="" props={ERTBox} />

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/code.mdx

@@ -12,8 +12,8 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import FlexProps from '!!extract-react-types-loader!../../extract-react-types/flex-props'
+import ERTFlex from '!!extract-react-types-loader!../../extract-react-types/flex-props'
 
 ## Props
 
-<PropsTable heading="" props={FlexProps} />
+<PropsTable heading="" props={ERTFlex} />

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/code.mdx

@@ -12,8 +12,8 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import BoxProps from '!!extract-react-types-loader!../../extract-react-types/grid-props'
+import ERTGrid from '!!extract-react-types-loader!../../extract-react-types/grid-props'
 
 ## Props
 
-<PropsTable heading="" props={BoxProps} />
+<PropsTable heading="" props={ERTGrid} />

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/code.mdx

@@ -12,8 +12,8 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import InlineProps from '!!extract-react-types-loader!../../extract-react-types/inline-props'
+import ERTInline from '!!extract-react-types-loader!../../extract-react-types/inline-props'
 
 ## Props
 
-<PropsTable heading="" props={InlineProps} />
+<PropsTable heading="" props={ERTInline} />

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/code.mdx

@@ -12,8 +12,8 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
   directoryName="primitives"
 />
 
-import StackProps from '!!extract-react-types-loader!../../extract-react-types/stack-props'
+import ERTStack from '!!extract-react-types-loader!../../extract-react-types/stack-props'
 
 ## Props
 
-<PropsTable heading="" props={StackProps} />
+<PropsTable heading="" props={ERTStack} />

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/box.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _xcss = require("../xcss/xcss");
 var _baseBox = require("./internal/base-box");
-var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
-  _excluded2 = ["className"];
+var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"];
 /** @jsx jsx */
+// Ideally we'd just Omit className from BaseBoxProps however that isn't working as expected
+// So, we're reconstructing the type: this should be the same as BaseBoxProps minus className
+// TODO: Merge Box and BaseBox so there is only one component. There's probably no need for BaseBox anymore.
 /**
  * __Box__
  *
@@ -39,8 +42,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     testId = _ref.testId,
     xcss = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var spreadClass = htmlAttributes.className,
-    safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
+  var safeHtmlAttributes = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(htmlAttributes), htmlAttributes));
   var className = xcss && (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(_baseBox.BaseBox, (0, _extends2.default)({
     as: as,

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/components/internal/base-box.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../../xcss/style-maps.partial");
-var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "css"];
+var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId"];
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 // Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
@@ -24,8 +24,7 @@ var _excluded = ["as", "className", "children", "backgroundColor", "padding", "p
  * @internal
  */
 var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'div' : _ref$as,
+  var as = _ref.as,
     className = _ref.className,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -38,9 +37,8 @@ var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     paddingInlineEnd = _ref.paddingInlineEnd,
     style = _ref.style,
     testId = _ref.testId,
-    css = _ref.css,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var Component = as;
+  var Component = as || 'div';
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
     style: style,
     ref: ref

package/dist/cjs/version.json

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

package/dist/es2019/components/box.js

@@ -4,6 +4,10 @@ import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';
 import { BaseBox } from './internal/base-box';
+
+// Ideally we'd just Omit className from BaseBoxProps however that isn't working as expected
+// So, we're reconstructing the type: this should be the same as BaseBoxProps minus className
+// TODO: Merge Box and BaseBox so there is only one component. There's probably no need for BaseBox anymore.
 /**
  * __Box__
  *
@@ -31,7 +35,6 @@ const Box = /*#__PURE__*/forwardRef(({
   ...htmlAttributes
 }, ref) => {
   const {
-    className: spreadClass,
     ...safeHtmlAttributes
   } = htmlAttributes;
   const className = xcss && parseXcss(xcss);

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/components/internal/base-box.js

@@ -16,7 +16,7 @@ import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-map
  * @internal
  */
 export const BaseBox = /*#__PURE__*/forwardRef(({
-  as = 'div',
+  as,
   className,
   children,
   backgroundColor,
@@ -29,10 +29,9 @@ export const BaseBox = /*#__PURE__*/forwardRef(({
   paddingInlineEnd,
   style,
   testId,
-  css,
   ...htmlAttributes
 }, ref) => {
-  const Component = as;
+  const Component = as || 'div';
   const node = jsx(Component, _extends({
     style: style,
     ref: ref

package/dist/es2019/version.json

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

package/dist/esm/components/box.js

@@ -1,12 +1,16 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
-  _excluded2 = ["className"];
+var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"];
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';
 import { parseXcss } from '../xcss/xcss';
 import { BaseBox } from './internal/base-box';
+
+// Ideally we'd just Omit className from BaseBoxProps however that isn't working as expected
+// So, we're reconstructing the type: this should be the same as BaseBoxProps minus className
+// TODO: Merge Box and BaseBox so there is only one component. There's probably no need for BaseBox anymore.
 /**
  * __Box__
  *
@@ -32,8 +36,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  var spreadClass = htmlAttributes.className,
-    safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
+  var safeHtmlAttributes = _extends({}, (_objectDestructuringEmpty(htmlAttributes), htmlAttributes));
   var className = xcss && parseXcss(xcss);
   return jsx(BaseBox, _extends({
     as: as,

package/dist/esm/components/inline.js

@@ -31,8 +31,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/esm/components/internal/base-box.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "css"];
+var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId"];
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef } from 'react';
@@ -18,8 +18,7 @@ import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-map
  * @internal
  */
 export var BaseBox = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'div' : _ref$as,
+  var as = _ref.as,
     className = _ref.className,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -32,9 +31,8 @@ export var BaseBox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingInlineEnd = _ref.paddingInlineEnd,
     style = _ref.style,
     testId = _ref.testId,
-    css = _ref.css,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  var Component = as;
+  var Component = as || 'div';
   var node = jsx(Component, _extends({
     style: style,
     ref: ref

package/dist/esm/version.json

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

package/dist/types/components/box.d.ts

@@ -1,8 +1,9 @@
 /** @jsx jsx */
-import { ElementType, FC, ReactElement } from 'react';
-import { BaseBoxProps } from './internal/base-box';
-export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'>;
-type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+import { ComponentPropsWithoutRef, ElementType, FC, ReactElement } from 'react';
+import { BaseBoxPropsFoundation } from './internal/base-box';
+import { BasePrimitiveProps } from './types';
+export type BoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
  * __Box__
  *

package/dist/types/components/flex.d.ts

@@ -133,5 +133,5 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "wrap"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | "wrap" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
 export default Flex;

package/dist/types/components/grid.d.ts

@@ -191,5 +191,5 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "as" | "children" | keyof BasePrimitiveProps | "id" | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "as" | "id" | "children" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
 export default Grid;

package/dist/types/components/inline.d.ts

@@ -56,8 +56,7 @@ export type Grow = 'hug' | 'fill';
 /**
  * __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
@@ -114,5 +113,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "as" | "children" | keyof BasePrimitiveProps | "space" | "separator" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "as" | "children" | "space" | "separator" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
 export default Inline;

package/dist/types/components/internal/base-box.d.ts

@@ -1,14 +1,9 @@
 /** @jsx jsx */
-import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
 import { BackgroundColor, type Space } from '../../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from '../types';
-export type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
-export type As = 'article' | 'aside' | 'button' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
-type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
-    /**
-     * The DOM element to render as the Box. Defaults to `div`.
-     */
-    as?: As;
+export type BaseBoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T> & ClassName;
+type ClassName = {
     /**
      * The HTML className attribute.
      *
@@ -21,6 +16,12 @@ type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
      * @see `@atlaskit/eslint-plugin-design-system`
      */
     className?: string;
+};
+export type BaseBoxPropsFoundation<T extends ElementType> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: T;
     /**
      * Elements to be rendered inside the Box.
      */
@@ -69,9 +70,9 @@ type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
     /**
      * Forwarded ref element
      */
-    ref?: React.ComponentPropsWithRef<T>['ref'];
+    ref?: ComponentPropsWithRef<T>['ref'];
 };
-export type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
+export type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
 /**
  * __Box__
  *

package/dist/types/components/stack.d.ts

@@ -87,5 +87,5 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "as" | "children" | keyof BasePrimitiveProps | "space" | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "as" | "children" | "space" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
 export default Stack;