@atlaskit/primitives 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/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/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/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/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/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/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/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.6",
+	"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/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.6",
+	"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/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.6",
+	"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

@@ -113,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;

package/dist/types/xcss/xcss.d.ts

@@ -43,7 +43,7 @@ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' |
  * ```
  */
 export declare function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
-    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
+    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any>>(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
 };
 declare const boxTag: unique symbol;
 declare const spaceTag: unique symbol;

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/components/inline.d.ts

@@ -113,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-ts4.5/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-ts4.5/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;

package/dist/types-ts4.5/xcss/xcss.d.ts

@@ -43,7 +43,7 @@ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' |
  * ```
  */
 export declare function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
-    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
+    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any>>(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
 };
 declare const boxTag: unique symbol;
 declare const spaceTag: unique symbol;

package/extract-react-types/box-props.tsx

@@ -1,7 +1,6 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 
-import { As } from '../src/components/internal/base-box';
 import { BasePrimitiveProps } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -31,7 +30,7 @@ export default function Box(
     /**
      * The DOM element to render as the Box. Defaults to `div`.
      */
-    as?: As;
+    as?: ElementType;
 
     /**
      * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
@@ -82,6 +81,6 @@ export default function Box(
     /**
      * Forwarded ref element.
      */
-    ref?: React.ComponentPropsWithRef<As>['ref'];
+    ref?: React.ComponentPropsWithRef<ElementType>['ref'];
   } & BasePrimitiveProps,
 ) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,7 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "team": "Design System Team",
+    "team": "Design System Pyxis",
     "inPublicMirror": false,
     "releaseModel": "continuous",
     "website": {
@@ -181,4 +181,4 @@
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/report.api.md

@@ -18,6 +18,7 @@
 /// <reference types="react" />
 
 import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
@@ -85,23 +86,6 @@ const alignItemsMap_2: {
 // @public (undocumented)
 type AllowedBoxStyles = keyof SafeCSSObject;
 
-// @public (undocumented)
-type As =
-  | 'article'
-  | 'aside'
-  | 'button'
-  | 'dialog'
-  | 'div'
-  | 'footer'
-  | 'header'
-  | 'li'
-  | 'main'
-  | 'nav'
-  | 'ol'
-  | 'section'
-  | 'span'
-  | 'ul';
-
 // @public (undocumented)
 type AutoComplete<T extends string> = Omit<string, T> | T;
 
@@ -230,17 +214,17 @@ const backgroundColorMap: {
 };
 
 // @public (undocumented)
-type BaseBoxProps<T extends ElementType = 'div'> = Omit<
+type BaseBoxProps<T extends ElementType> = Omit<
   ComponentPropsWithoutRef<T>,
   'as' | 'className'
 > &
   BasePrimitiveProps &
-  BaseBoxPropsFoundation<T>;
+  BaseBoxPropsFoundation<T> &
+  ClassName;
 
 // @public (undocumented)
-type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
-  as?: As;
-  className?: string;
+type BaseBoxPropsFoundation<T extends ElementType> = {
+  as?: T;
   children?: ReactNode;
   backgroundColor?: BackgroundColor;
   padding?: Space;
@@ -250,7 +234,7 @@ type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
   paddingInline?: Space;
   paddingInlineStart?: Space;
   paddingInlineEnd?: Space;
-  ref?: React.ComponentPropsWithRef<T>['ref'];
+  ref?: ComponentPropsWithRef<T>['ref'];
 };
 
 // @public (undocumented)
@@ -340,18 +324,18 @@ const borderWidthMap: {
 export const Box: BoxComponent;
 
 // @public (undocumented)
-type BoxComponent<T extends ElementType = 'div'> = (<
-  T extends ElementType = 'div',
->(
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(
   props: BoxProps<T>,
 ) => ReactElement | null) &
   FC<BoxProps<T>>;
 
 // @public (undocumented)
-export type BoxProps<T extends ElementType = 'div'> = Omit<
-  BaseBoxProps<T>,
-  'className'
->;
+export type BoxProps<T extends ElementType> = Omit<
+  ComponentPropsWithoutRef<T>,
+  'as' | 'className'
+> &
+  BasePrimitiveProps &
+  BaseBoxPropsFoundation<T>;
 
 // @public (undocumented)
 type BoxStyles = SerializedStyles & {
@@ -372,6 +356,11 @@ type BoxXCSS =
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
+// @public (undocumented)
+type ClassName = {
+  className?: string;
+};
+
 // @public (undocumented)
 type CSSMediaQueries = {
   [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
@@ -1147,9 +1136,7 @@ export function xcss<Primitive extends typeof Box | void = typeof Box>(
     ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[]
     : never,
 ): {
-  readonly [uniqueSymbol]: Primitive extends (<
-    T extends ElementType<any> = 'div',
-  >(
+  readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any>>(
     props: BoxProps<T>,
   ) => ReactElement<any, JSXElementConstructor<any> | string> | null) &
     FC<BoxProps<'div'>>

package/tmp/api-report-tmp.d.ts

@@ -7,6 +7,7 @@
 /// <reference types="react" />
 
 import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
@@ -74,9 +75,6 @@ const alignItemsMap_2: {
 // @public (undocumented)
 type AllowedBoxStyles = keyof SafeCSSObject;
 
-// @public (undocumented)
-type As = 'article' | 'aside' | 'button' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
-
 // @public (undocumented)
 type AutoComplete<T extends string> = Omit<string, T> | T;
 
@@ -205,12 +203,11 @@ const backgroundColorMap: {
 };
 
 // @public (undocumented)
-type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+type BaseBoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T> & ClassName;
 
 // @public (undocumented)
-type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
-    as?: As;
-    className?: string;
+type BaseBoxPropsFoundation<T extends ElementType> = {
+    as?: T;
     children?: ReactNode;
     backgroundColor?: BackgroundColor;
     padding?: Space;
@@ -220,7 +217,7 @@ type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
     paddingInline?: Space;
     paddingInlineStart?: Space;
     paddingInlineEnd?: Space;
-    ref?: React.ComponentPropsWithRef<T>['ref'];
+    ref?: ComponentPropsWithRef<T>['ref'];
 };
 
 // @public (undocumented)
@@ -301,10 +298,10 @@ const borderWidthMap: {
 export const Box: BoxComponent;
 
 // @public (undocumented)
-type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 
 // @public (undocumented)
-export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'>;
+export type BoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 
 // @public (undocumented)
 type BoxStyles = SerializedStyles & {
@@ -322,6 +319,11 @@ type BoxXCSS = false | undefined | {
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
+// @public (undocumented)
+type ClassName = {
+    className?: string;
+};
+
 // @public (undocumented)
 type CSSMediaQueries = {
     [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
@@ -800,7 +802,7 @@ type Wrap = keyof typeof flexWrapMap;
 
 // @public
 export function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
-    readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
+    readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any>>(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends void ? SpaceStyles : never;
 };
 
 // (No @packageDocumentation comment for this package)