@atlaskit/primitives 1.2.3 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 1.3.0
+
+### Minor Changes
+
+- [`abfe7585461`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abfe7585461) - Improved type safety for Box.
+
 ## 1.2.3
 
 ### Patch Changes

package/dist/cjs/components/box.js

@@ -4,19 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Box = void 0;
 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 _styleMaps = require("../xcss/style-maps.partial");
 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"];
 /** @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.
+// Can either Exclude or Extract - here we're excluding all SVG-related elements
+
+// Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 /**
  * __Box__
  *
@@ -28,7 +30,8 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var as = _ref.as,
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
     padding = _ref.padding,
@@ -42,28 +45,33 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     testId = _ref.testId,
     xcss = _ref.xcss,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var Component = as;
   // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
   var className = xcss && (0, _xcss.parseXcss)(xcss);
-  return (0, _react2.jsx)(_baseBox.BaseBox, (0, _extends2.default)({
-    as: as,
-    backgroundColor: backgroundColor,
-    padding: padding,
-    paddingBlock: paddingBlock,
-    paddingBlockStart: paddingBlockStart,
-    paddingBlockEnd: paddingBlockEnd,
-    paddingInline: paddingInline,
-    paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd,
-    style: style,
-    testId: testId,
-    ref: ref
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: className
-  }, safeHtmlAttributes), children);
+  return (
+    // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
+    (0, _react2.jsx)(Component, (0, _extends2.default)({
+      style: style
+      // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+      ,
+      ref: ref
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    }, safeHtmlAttributes, {
+      css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      className],
+      "data-testid": testId
+    }), children)
+  );
 });
-Box.displayName = 'Box';
+exports.Box = Box;
 var _default = Box;
-exports.default = _default;
+exports.default = _default;
+var baseStyles = (0, _react2.css)({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
+});

package/dist/cjs/components/internal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/components/box.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
+import { backgroundColorStylesMap, paddingStylesMap } from '../xcss/style-maps.partial';
 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.
+// Can either Exclude or Extract - here we're excluding all SVG-related elements
+
+// Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 /**
  * __Box__
  *
@@ -18,8 +19,8 @@ import { BaseBox } from './internal/base-box';
  * - [Code](https://atlassian.design/components/primitives/box/code)
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
-const Box = /*#__PURE__*/forwardRef(({
-  as,
+export const Box = /*#__PURE__*/forwardRef(({
+  as = 'div',
   children,
   backgroundColor,
   padding,
@@ -34,29 +35,33 @@ const Box = /*#__PURE__*/forwardRef(({
   xcss,
   ...htmlAttributes
 }, ref) => {
+  const Component = as;
   // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   const {
     className: _spreadClass,
     ...safeHtmlAttributes
   } = htmlAttributes;
   const className = xcss && parseXcss(xcss);
-  return jsx(BaseBox, _extends({
-    as: as,
-    backgroundColor: backgroundColor,
-    padding: padding,
-    paddingBlock: paddingBlock,
-    paddingBlockStart: paddingBlockStart,
-    paddingBlockEnd: paddingBlockEnd,
-    paddingInline: paddingInline,
-    paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd,
-    style: style,
-    testId: testId,
-    ref: ref
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: className
-  }, safeHtmlAttributes), children);
+  return (
+    // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
+    jsx(Component, _extends({
+      style: style
+      // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+      ,
+      ref: ref
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    }, safeHtmlAttributes, {
+      css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      className],
+      "data-testid": testId
+    }), children)
+  );
 });
-Box.displayName = 'Box';
-export default Box;
+export default Box;
+const baseStyles = css({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
+});

package/dist/es2019/components/internal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/box.js

@@ -4,13 +4,14 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
   _excluded2 = ["className"];
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
+import { backgroundColorStylesMap, paddingStylesMap } from '../xcss/style-maps.partial';
 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.
+// Can either Exclude or Extract - here we're excluding all SVG-related elements
+
+// Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 /**
  * __Box__
  *
@@ -21,8 +22,9 @@ import { BaseBox } from './internal/base-box';
  * - [Code](https://atlassian.design/components/primitives/box/code)
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
-var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var as = _ref.as,
+export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
     padding = _ref.padding,
@@ -36,27 +38,31 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+  var Component = as;
   // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
   var className = xcss && parseXcss(xcss);
-  return jsx(BaseBox, _extends({
-    as: as,
-    backgroundColor: backgroundColor,
-    padding: padding,
-    paddingBlock: paddingBlock,
-    paddingBlockStart: paddingBlockStart,
-    paddingBlockEnd: paddingBlockEnd,
-    paddingInline: paddingInline,
-    paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd,
-    style: style,
-    testId: testId,
-    ref: ref
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: className
-  }, safeHtmlAttributes), children);
+  return (
+    // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
+    jsx(Component, _extends({
+      style: style
+      // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+      ,
+      ref: ref
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    }, safeHtmlAttributes, {
+      css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      className],
+      "data-testid": testId
+    }), children)
+  );
 });
-Box.displayName = 'Box';
-export default Box;
+export default Box;
+var baseStyles = css({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
+});

package/dist/esm/components/internal/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,9 +1,69 @@
 /** @jsx jsx */
-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>>;
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
+import { SVGElements } from './internal/types';
+import type { BasePrimitiveProps } from './types';
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
+type CustomElementType<P = any> = {
+    [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[AllowedElements];
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+type BaseBoxProps<T extends CustomElementType> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: T;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
+    /**
+     * Token representing background color with a built-in fallback value.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+    /**
+     * Forwarded ref
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
 /**
  * __Box__
  *
@@ -14,5 +74,5 @@ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(prop
  * - [Code](https://atlassian.design/components/primitives/box/code)
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
-declare const Box: BoxComponent;
+export declare const Box: BoxComponent;
 export default Box;

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

@@ -0,0 +1 @@
+export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';

package/dist/types-ts4.5/components/box.d.ts

@@ -1,9 +1,69 @@
 /** @jsx jsx */
-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>>;
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
+import { SVGElements } from './internal/types';
+import type { BasePrimitiveProps } from './types';
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
+type CustomElementType<P = any> = {
+    [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[AllowedElements];
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+type BaseBoxProps<T extends CustomElementType> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: T;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
+    /**
+     * Token representing background color with a built-in fallback value.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+    /**
+     * Forwarded ref
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
 /**
  * __Box__
  *
@@ -14,5 +74,5 @@ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(prop
  * - [Code](https://atlassian.design/components/primitives/box/code)
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
-declare const Box: BoxComponent;
+export declare const Box: BoxComponent;
 export default Box;

package/dist/types-ts4.5/components/internal/types.d.ts

@@ -0,0 +1 @@
+export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -21,7 +21,6 @@ import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
 import { ElementType } from 'react';
-import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { MemoExoticComponent } from 'react';
@@ -82,6 +81,9 @@ type AllMedia =
   | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)'
   | MediaQuery;
 
+// @public (undocumented)
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
+
 // @public (undocumented)
 type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
 
@@ -213,7 +215,7 @@ const backgroundColorMap: {
 };
 
 // @public (undocumented)
-type BaseBoxPropsFoundation<T extends ElementType> = {
+type BaseBoxProps<T extends CustomElementType> = {
   as?: T;
   children?: ReactNode;
   backgroundColor?: BackgroundColor;
@@ -314,18 +316,17 @@ const borderWidthMap: {
 export const Box: BoxComponent;
 
 // @public (undocumented)
-type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(
+type BoxComponent = <T extends CustomElementType>(
   props: BoxProps<T>,
-) => ReactElement | null) &
-  FC<BoxProps<T>>;
+) => ReactElement | null;
 
 // @public (undocumented)
-export type BoxProps<T extends ElementType> = Omit<
+export type BoxProps<T extends CustomElementType> = Omit<
   ComponentPropsWithoutRef<T>,
   'as' | 'className'
 > &
   BasePrimitiveProps &
-  BaseBoxPropsFoundation<T>;
+  BaseBoxProps<T>;
 
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
@@ -348,6 +349,11 @@ type CSSPseudos = {
   [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, AllMedia | CSS_2.Pseudos>;
 };
 
+// @public (undocumented)
+type CustomElementType<P = any> = {
+  [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[AllowedElements];
+
 // @public (undocumented)
 export type Dimension = keyof typeof dimensionMap;
 
@@ -874,6 +880,67 @@ export type StackProps<T extends ElementType = 'div'> = {
   ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type SVGElements =
+  | 'animate'
+  | 'animateMotion'
+  | 'animateTransform'
+  | 'circle'
+  | 'clipPath'
+  | 'defs'
+  | 'desc'
+  | 'ellipse'
+  | 'feBlend'
+  | 'feColorMatrix'
+  | 'feComponentTransfer'
+  | 'feComposite'
+  | 'feConvolveMatrix'
+  | 'feDiffuseLighting'
+  | 'feDisplacementMap'
+  | 'feDistantLight'
+  | 'feDropShadow'
+  | 'feFlood'
+  | 'feFuncA'
+  | 'feFuncB'
+  | 'feFuncG'
+  | 'feFuncR'
+  | 'feGaussianBlur'
+  | 'feImage'
+  | 'feMerge'
+  | 'feMergeNode'
+  | 'feMorphology'
+  | 'feOffset'
+  | 'fePointLight'
+  | 'feSpecularLighting'
+  | 'feSpotLight'
+  | 'feTile'
+  | 'feTurbulence'
+  | 'filter'
+  | 'foreignObject'
+  | 'g'
+  | 'image'
+  | 'line'
+  | 'linearGradient'
+  | 'marker'
+  | 'mask'
+  | 'metadata'
+  | 'mpath'
+  | 'path'
+  | 'pattern'
+  | 'polygon'
+  | 'polyline'
+  | 'radialGradient'
+  | 'rect'
+  | 'stop'
+  | 'svg'
+  | 'switch'
+  | 'symbol'
+  | 'text'
+  | 'textPath'
+  | 'tspan'
+  | 'use'
+  | 'view';
+
 // @public (undocumented)
 export type TextColor = keyof typeof textColorMap;
 

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

@@ -10,7 +10,6 @@ import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
 import { ElementType } from 'react';
-import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { MemoExoticComponent } from 'react';
@@ -66,6 +65,9 @@ const alignItemsMap_2: {
 // @public (undocumented)
 type AllMedia = '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)' | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | MediaQuery;
 
+// @public (undocumented)
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
+
 // @public (undocumented)
 type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
 
@@ -197,7 +199,7 @@ const backgroundColorMap: {
 };
 
 // @public (undocumented)
-type BaseBoxPropsFoundation<T extends ElementType> = {
+type BaseBoxProps<T extends CustomElementType> = {
     as?: T;
     children?: ReactNode;
     backgroundColor?: BackgroundColor;
@@ -289,10 +291,10 @@ const borderWidthMap: {
 export const Box: BoxComponent;
 
 // @public (undocumented)
-type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
 
 // @public (undocumented)
-export type BoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
 
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
@@ -312,6 +314,11 @@ type CSSPseudos = {
     [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, AllMedia | CSS_2.Pseudos>;
 };
 
+// @public (undocumented)
+type CustomElementType<P = any> = {
+    [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[AllowedElements];
+
 // @public (undocumented)
 export type Dimension = keyof typeof dimensionMap;
 
@@ -586,6 +593,9 @@ export type StackProps<T extends ElementType = 'div'> = {
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type SVGElements = 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'svg' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
+
 // @public (undocumented)
 export type TextColor = keyof typeof textColorMap;
 

package/dist/cjs/components/internal/base-box.js

@@ -1,61 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BaseBox = void 0;
-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 _styleMaps = require("../../xcss/style-maps.partial");
-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
-
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var as = _ref.as,
-    className = _ref.className,
-    children = _ref.children,
-    backgroundColor = _ref.backgroundColor,
-    padding = _ref.padding,
-    paddingBlock = _ref.paddingBlock,
-    paddingBlockStart = _ref.paddingBlockStart,
-    paddingBlockEnd = _ref.paddingBlockEnd,
-    paddingInline = _ref.paddingInline,
-    paddingInlineStart = _ref.paddingInlineStart,
-    paddingInlineEnd = _ref.paddingInlineEnd,
-    style = _ref.style,
-    testId = _ref.testId,
-    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var Component = as || 'div';
-  var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
-    style: style,
-    ref: ref
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, htmlAttributes, {
-    className: className,
-    css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd]],
-    "data-testid": testId
-  }), children);
-  return node;
-});
-exports.BaseBox = BaseBox;
-BaseBox.displayName = 'BaseBox';
-var _default = BaseBox;
-exports.default = _default;
-var baseStyles = (0, _react2.css)({
-  boxSizing: 'border-box',
-  appearance: 'none',
-  border: 'none'
-});

package/dist/es2019/components/internal/base-box.js

@@ -1,52 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @repo/internal/styles/no-exported-styles */
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-maps.partial';
-
-// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
-
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-export const BaseBox = /*#__PURE__*/forwardRef(({
-  as,
-  className,
-  children,
-  backgroundColor,
-  padding,
-  paddingBlock,
-  paddingBlockStart,
-  paddingBlockEnd,
-  paddingInline,
-  paddingInlineStart,
-  paddingInlineEnd,
-  style,
-  testId,
-  ...htmlAttributes
-}, ref) => {
-  const Component = as || 'div';
-  const node = jsx(Component, _extends({
-    style: style,
-    ref: ref
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, htmlAttributes, {
-    className: className,
-    css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd]],
-    "data-testid": testId
-  }), children);
-  return node;
-});
-BaseBox.displayName = 'BaseBox';
-export default BaseBox;
-const baseStyles = css({
-  boxSizing: 'border-box',
-  appearance: 'none',
-  border: 'none'
-});

package/dist/esm/components/internal/base-box.js

@@ -1,53 +0,0 @@
-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"];
-/* eslint-disable @repo/internal/styles/no-exported-styles */
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-maps.partial';
-
-// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
-
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-export var BaseBox = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var as = _ref.as,
-    className = _ref.className,
-    children = _ref.children,
-    backgroundColor = _ref.backgroundColor,
-    padding = _ref.padding,
-    paddingBlock = _ref.paddingBlock,
-    paddingBlockStart = _ref.paddingBlockStart,
-    paddingBlockEnd = _ref.paddingBlockEnd,
-    paddingInline = _ref.paddingInline,
-    paddingInlineStart = _ref.paddingInlineStart,
-    paddingInlineEnd = _ref.paddingInlineEnd,
-    style = _ref.style,
-    testId = _ref.testId,
-    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  var Component = as || 'div';
-  var node = jsx(Component, _extends({
-    style: style,
-    ref: ref
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, htmlAttributes, {
-    className: className,
-    css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd]],
-    "data-testid": testId
-  }), children);
-  return node;
-});
-BaseBox.displayName = 'BaseBox';
-export default BaseBox;
-var baseStyles = css({
-  boxSizing: 'border-box',
-  appearance: 'none',
-  border: 'none'
-});

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

@@ -1,85 +0,0 @@
-/** @jsx jsx */
-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> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T> & ClassName;
-type ClassName = {
-    /**
-     * The HTML className attribute.
-     *
-     * Before using this prop please ensure:
-     * - The styles cannot otherwise be achieved through `Box` directly.
-     * - The use case needs custom styles that cannot be designed or implemented differently
-     *
-     * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
-     *
-     * @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.
-     */
-    children?: ReactNode;
-    /**
-     * Token representing background color with a built-in fallback value.
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     *
-     * @see paddingBlock
-     * @see paddingInline
-     */
-    padding?: Space;
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     *
-     * @see paddingBlockStart
-     * @see paddingBlockEnd
-     */
-    paddingBlock?: Space;
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: Space;
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: Space;
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     *
-     * @see paddingInlineStart
-     * @see paddingInlineEnd
-     */
-    paddingInline?: Space;
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: Space;
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: Space;
-    /**
-     * Forwarded ref element
-     */
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-export type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-export declare const BaseBox: BaseBoxComponent;
-export default BaseBox;

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

@@ -1,85 +0,0 @@
-/** @jsx jsx */
-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> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T> & ClassName;
-type ClassName = {
-    /**
-     * The HTML className attribute.
-     *
-     * Before using this prop please ensure:
-     * - The styles cannot otherwise be achieved through `Box` directly.
-     * - The use case needs custom styles that cannot be designed or implemented differently
-     *
-     * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
-     *
-     * @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.
-     */
-    children?: ReactNode;
-    /**
-     * Token representing background color with a built-in fallback value.
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     *
-     * @see paddingBlock
-     * @see paddingInline
-     */
-    padding?: Space;
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     *
-     * @see paddingBlockStart
-     * @see paddingBlockEnd
-     */
-    paddingBlock?: Space;
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: Space;
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: Space;
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     *
-     * @see paddingInlineStart
-     * @see paddingInlineEnd
-     */
-    paddingInline?: Space;
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: Space;
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: Space;
-    /**
-     * Forwarded ref element
-     */
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-export type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-export declare const BaseBox: BaseBoxComponent;
-export default BaseBox;