@atlaskit/primitives 1.0.10 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 1.0.11
+
+### Patch Changes
+
+- [`30fb9fe0ff4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30fb9fe0ff4) - Mark Pressable exports as unsafe (for internal use only)
+
 ## 1.0.10
 
 ### Patch Changes

package/constellation/flex/examples.mdx

@@ -20,24 +20,20 @@ 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`. Like `Stack` and `Inline`
-`Flex` exclusively supports token-backed `gap` properties to ensure layouts using `Flex` match
-the Atlassian Design System spacing scale.
+The `Flex` component is a basic mapping to the CSS Flexbox API. 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 and justify content
 
-`Flex` applies the `alignItems` and `justifyContent` properties to align content
-along its cross and main axes respectively.
+`Flex` applies the `alignItems` and `justifyContent` properties to align content along its cross and main axes respectively.
 
 <Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />
 
 ## Wrap
 
-Flex-prefixed properties in CSS do not have this prefix in the component API.
-For example `flex-wrap` is instead applied as the `wrap` property.
+Flex-prefixed properties in CSS do not have this prefix in the component API. 
+For example, `flex-wrap` is instead applied as the `wrap` property.
 
 <Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />
 

package/constellation/grid/examples.mdx

@@ -28,9 +28,8 @@ It can be used as an alternative to [Flex](/components/primitives/flex), [Inline
 
 ## Gap properties
 
-Gap properties - `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics
-and keep the whitespace of the grid harmonious with our spacing system.
 
+Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics and keep the whitespace of the grid harmonious with the spacing system.
 <Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
 
 ## Template syntax

package/constellation/inline/examples.mdx

@@ -27,8 +27,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-Inline is an abstraction to efficiently lay-out a group of elements horizontally.
-Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+Inline should be used to efficiently lay-out a group of elements horizontally.
+
+Use the given props to configure display behaviour using designs tokens, as shown in the more complex examples below.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
 
@@ -38,16 +39,15 @@ Spacing between items can be controlled with the `space` prop:
 
 <Example Component={InlineSpaceBasic} packageName="@atlaskit/primitives/inline" />
 
-When content is set to wrap the `space` prop applies equal spacing between rows as well:
+When content is set to wrap, the `space` prop applies equal spacing between rows.
 
-<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
+For a different space value between rows use the `rowSpace` prop.
 
-For a different space value between rows use the `rowSpace` prop, as shown in the dynamic example above.
+<Example Component={InlineSpaceWrap} packageName="@atlaskit/primitives/inline" />
 
 ## Alignment
 
-To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
-alignment in the block and inline directions respectively.
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control alignment in the vertical and horizontal axis respectively.
 
 ### Block alignment
 
@@ -59,7 +59,7 @@ alignment in the block and inline directions respectively.
 
 ## Spread
 
-Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+Elements can be set to stay together, spaced at the given value (default behaviour) or spread equally in the space available.
 
 <Example Component={InlineSpread} packageName="@atlaskit/primitives/inline" />
 
@@ -71,15 +71,14 @@ When the number of items goes beyond the available space `shouldWrap` can be use
 
 ## Separator
 
-For logically related elements it's possible to specify a `separator` value.
+For logically related elements it's possible to specify a `separator` character value.
 
 <Example Component={InlineSeparator} packageName="@atlaskit/primitives/inline" />
 
 ## Width control
 
-By default an `Inline` will have its width influenced by the context where it appears.
-
-To control that the `grow` prop can be used with the values:
+By default an `Inline` will have its width influenced by the context where it appears. 
+To control the width, the `grow` prop can be used with the values:
 
 * `hug` (default) to use space only as required by its children, or
 * `fill` to take all space provided by the parent element.
@@ -92,6 +91,8 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 <Example Component={InlineAs} packageName="@atlaskit/primitives/inline" />
 
-## Practical Use Case
+## Practical use case
+
+An example of how an `Inline` might be used in product, using Atlassian Design System components.
 
 <Example Component={InlinePracticalUseCase} packageName="@atlaskit/primitives/inline" />

package/constellation/inline/usage.mdx

@@ -15,7 +15,8 @@ In its simplest form, `Inline` operates like a flexbox row, however adds the bui
   ...
 </Inline>
 ```
-It also has a flex-direction: row; but that’s the default, so not explicitly applied.
+
+`Inline` also has a flex-direction: row; this is the default for flexbox, so it is not explicitly applied.
 
 ## Use `Inline`
 The purpose of an Inline is primarily as a container element controlling how child components are displayed and positioned horizontally. Inline should be used any time you wish to layout elements or components horizontally.
@@ -31,9 +32,9 @@ The various Inline props can then be used to customize the spacing and styling o
 - `rowSpace`
 - `separator`
 
+- [Learn more about the Primitives](/components/primitives/overview)
 - [Learn more about the Box primitive](/components/primitives/box/usage)
 - [Learn more about the Stack primitive](/components/primitives/stack/usage)
 - [Learn more about the Grid primitive](/components/primitives/grid/examples)
 - [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
 - [Learn more about the Flex primitive](/components/primitives/flex/examples)
-

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

@@ -18,9 +18,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ### Show
 
-This allows you to Show the children using CSS `display: …` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+Using `Show` allows you to show the children using CSS `display: …` when the viewport size is above a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.
 
-Note that this does not skip rendering of your children; the contents are rendered into the DOM at all times, so there is typically little performance savings—primarily that this is not painted.
+Children that are not shown are still rendered into the DOM, so there so there is typically little performance savings — primarily that they are not painted.
 
 <Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
 

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

@@ -17,9 +17,9 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ### Hide
 
-This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+Using Hide allows you to Hide the children using CSS `display: none` when the viewport size is above a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.
 
-When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.
+Children that are hidden are still rendered into the DOM, so there so there is typically little performance savings — primarily that they are not painted.
 
 <Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
 

package/constellation/responsive/usage.mdx

@@ -6,12 +6,13 @@ order: 2
 
 ## Media query helpers
 
-We expose two media query helper objects which map to our [breakpoints](/components/grid/usage#breakpoints) as media queries for use in css-in-js:
- - `media.above[breakpoint]` to target all viewports **above** (larger than) the min-width of a given breakpoint
+The media query helper object `media.above[breakpoint]` maps to our [breakpoints](/components/grid/usage#breakpoints) as a media query for use in css-in-js. `media.above[breakpoint]` targets all viewports **above** (larger than) the min-width of a given breakpoint
+
+These responsive helpers are designed be used in conjunction with [xcss](/components/primitives/xcss). It is recommended that both are used when available as this uses our media queries to allow for safe, responsive styling.
 
 ### A basic example:
 
-Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`
+Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`.
 
 ```tsx
 const customStyles = xcss({
@@ -28,7 +29,7 @@ export const Component = ({ children }: { children: ReactNode }) => (
 
 ### `media.above` usage
 
-Please note that `media.above.xxs` will **always** match; it is explicitly `'@media all'`.  This is only included for easy programatic usage, but it has a negative performance impact.
+It is important to note that the `media.above.xxs` will **always** match, it is explicitly `'@media all'`. This is only included for easy programatic usage, but it has a negative performance impact.
 
 ```tsx
 const customStyles = css({
@@ -47,7 +48,3 @@ This is intentionally excluded at the moment as we're shipping our opinion that
 We understand this will not scale and we're open to change, but we'd like to change this with feedback.
 
 If we do add it back, we'd suggest codebases prefer a single approach (eg. `above` or `below`) and use that consistently.  Mixing them results in confusion (though they can be safely used together and can result in better CSS performance when done correctly).
-
-### Some notes and suggestions
-
-- Please combine this with our [xcss](/components/primitives/xcss) when available as this uses our media queries to allow for safe, responsive styling.

package/constellation/stack/examples.mdx

@@ -23,21 +23,20 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-Stack is an abstraction to lay-out a group of elements vertically.
-Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+Stack should be used to efficiently lay-out a group of elements vertically.
+Use the given props to configure display behaviour using designs tokens, as shown in the more complex examples below.
 
 <Example Component={StackBasic} packageName="@atlaskit/primitives/stack" />
 
 ## Space
 
-Spacing between items can be controlled with the `space` prop:
+Spacing between items can be controlled with the `space` prop.
 
 <Example Component={StackSpaceBasic} packageName="@atlaskit/primitives/stack" />
 
 ## Alignment
 
-To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
-alignment in the block and inline directions respectively.
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control alignment in the vertical and horizontal axis respectively.
 
 ### Block alignment
 
@@ -49,13 +48,13 @@ alignment in the block and inline directions respectively.
 
 ## Spread
 
-Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+Elements can be set to stay together, spaced at the given value (default behaviour) or spread equally in the space available.
 
 <Example Component={StackSpread} packageName="@atlaskit/primitives/stack" />
 
 ## Width control
 
-By default a `Stack` will have its width influenced by the context where it appears.
+By default a `Stack` will have its width influenced by the context where it appears. To control the width the `grow` prop can be used with the values:
 
 To control that the `grow` prop can be used with the values:
 
@@ -70,6 +69,6 @@ It's possible to control the rendered HTML element with the `as` prop.
 
 <Example Component={StackAs} packageName="@atlaskit/primitives/stack" />
 
-## Practical Use Case
+## Practical use case
 
 <Example Component={PracticalUseCase} packageName="@atlaskit/primitives/stack" />

package/constellation/stack/usage.mdx

@@ -27,7 +27,7 @@ The various `Stack` props can then be used to customize the spacing and styling
 - `space`
 
 ## Related
-
+- [Learn more about the Primitives](/components/primitives/overview)
 - [Learn more about the Box primitive](/components/primitives/box/usage)
 - [Learn more about the Inline primitive](/components/primitives/inline/usage)
 - [Learn more about the Grid primitive](/components/primitives/grid/examples)

package/constellation/xcss/examples.mdx

@@ -18,7 +18,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
 ## Basic
 
-`xcss` can pull together different types of interactions and UI in a safer more composable way.
+`xcss` can pull together different types of interactions and UI in a safer, more composable way.
 
 <Example Component={xcssBasic} packageName="@atlaskit/primitives/xcss" />
 
@@ -31,6 +31,6 @@ To enable interactivity, use familiar selectors like `:hover` and `:focus-visibl
 
 ## Responsiveness
 
-xcss also accepts a subset of media queries at predefined breakpoints:
+xCSS also accepts a subset of media queries at [predefined breakpoints](/components/primitives/responsive/breakpoints/examples).
 
 <Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />

package/constellation/xcss/migration.mdx

@@ -105,7 +105,7 @@ const someStyles = xcss({
 #### Moving from the `styled` API
 
 If currently using the `styled` API there are a few steps to migrate.
-The safest approach is to a step change to use object styles, migrate to tokens (optionally) and then migrate to `xcss`.
+The safest approach is to use object styles, migrate to tokens (optionally) and then migrate to `xcss`.
 
 ```tsx
 const MyComponent = styled.div`

package/constellation/xcss/usage.mdx

@@ -51,7 +51,7 @@ const MyBox = () => {
 ```
 The `xcss` prop and the `xcss` function are direct complements and are designed to be used together.
 
-Note: styles generated from `xcss` cannot be applied directly to the `className` property or `css` as they are with other CSS-in-JS libraries.
+It is important to note that styles generated from `xcss` cannot be applied directly to the `className` property or `css` as they are with other CSS-in-JS libraries.
 
 ### Type safety
 
@@ -78,13 +78,6 @@ const someStyles = xcss({
 Selectors cannot be nested or target elements beyond the element on which styles are applied.
 This restriction is intended to encourage better component encapsulation, reduce side-effects and make the codebase more resilient to change.
 
-
-`xcss` is meant to be flexible enough for you to implement any design but it does
-restrict the application of styles in one key way. Selectors cannot be
-nested or target elements beyond the element on which styles are applied.
-This restriction is intended to encourage better component encapsulation, reduce side-effects and make
-your codebase more resilient to change.
-
 ```tsx
 import { xcss } from '@atlaskit/primitives';
 

package/dist/cjs/components/pressable.js

@@ -18,7 +18,9 @@ var defaultStyles = (0, _react2.css)({
 });
 
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -26,7 +28,7 @@ var defaultStyles = (0, _react2.css)({
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     backgroundColor = _ref.backgroundColor,
     padding = _ref.padding,
@@ -58,5 +60,5 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     disabled: isDisabled
   }), children));
 });
-var _default = Pressable;
+var _default = UNSAFE_PRESSABLE;
 exports.default = _default;

package/dist/cjs/index.js

@@ -34,12 +34,6 @@ Object.defineProperty(exports, "Inline", {
     return _inline.default;
   }
 });
-Object.defineProperty(exports, "Pressable", {
-  enumerable: true,
-  get: function get() {
-    return _pressable.default;
-  }
-});
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function get() {
@@ -71,7 +65,6 @@ Object.defineProperty(exports, "xcss", {
   }
 });
 var _box = _interopRequireDefault(require("./components/box"));
-var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));

package/dist/cjs/version.json

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

package/dist/es2019/components/pressable.js

@@ -9,7 +9,9 @@ const defaultStyles = css({
 });
 
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -17,7 +19,7 @@ const defaultStyles = css({
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-const Pressable = /*#__PURE__*/forwardRef(({
+const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
   children,
   backgroundColor,
   padding,
@@ -49,4 +51,4 @@ const Pressable = /*#__PURE__*/forwardRef(({
     disabled: isDisabled
   }), children));
 });
-export default Pressable;
+export default UNSAFE_PRESSABLE;

package/dist/es2019/index.js

@@ -1,5 +1,4 @@
 export { default as Box } from './components/box';
-export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';

package/dist/es2019/version.json

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

package/dist/esm/components/pressable.js

@@ -11,7 +11,9 @@ var defaultStyles = css({
 });
 
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -19,7 +21,7 @@ var defaultStyles = css({
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     backgroundColor = _ref.backgroundColor,
     padding = _ref.padding,
@@ -51,4 +53,4 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled: isDisabled
   }), children));
 });
-export default Pressable;
+export default UNSAFE_PRESSABLE;

package/dist/esm/index.js

@@ -1,5 +1,4 @@
 export { default as Box } from './components/box';
-export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';

package/dist/esm/version.json

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

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

@@ -11,7 +11,9 @@ export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'c
 };
 type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -19,5 +21,5 @@ type PressableComponent = (props: PressableProps, displayName: string) => ReactE
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: PressableComponent;
-export default Pressable;
+declare const UNSAFE_PRESSABLE: PressableComponent;
+export default UNSAFE_PRESSABLE;

package/dist/types/index.d.ts

@@ -1,8 +1,6 @@
 export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
-export { default as Pressable } from './components/pressable';
-export type { PressableProps } from './components/pressable';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';

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

@@ -11,7 +11,9 @@ export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'c
 };
 type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
 /**
- * __Pressable__
+ * __UNSAFE_PRESSABLE__
+ *
+ * @internal Still under development. Do not use.
  *
  * A Pressable is a primitive component that renders a `<button>`.
  *
@@ -19,5 +21,5 @@ type PressableComponent = (props: PressableProps, displayName: string) => ReactE
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
  */
-declare const Pressable: PressableComponent;
-export default Pressable;
+declare const UNSAFE_PRESSABLE: PressableComponent;
+export default UNSAFE_PRESSABLE;

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

@@ -1,8 +1,6 @@
 export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
 export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
-export { default as Pressable } from './components/pressable';
-export type { PressableProps } from './components/pressable';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -178,6 +178,7 @@
     "./box": "./src/components/box.tsx",
     "./stack": "./src/components/stack.tsx",
     "./inline": "./src/components/inline.tsx",
+    "./pressable": "./src/components/pressable.tsx",
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"

package/pressable/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/primitives/pressable",
+  "main": "../dist/cjs/components/pressable.js",
+  "module": "../dist/esm/components/pressable.js",
+  "module:es2019": "../dist/es2019/components/pressable.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/pressable.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/pressable.d.ts"
+      ]
+    }
+  }
+}

package/report.api.md

@@ -218,15 +218,6 @@ const backgroundColorMap: {
   readonly 'elevation.surface.sunken': 'var(--ds-surface-sunken)';
 };
 
-// @public (undocumented)
-type BaseBoxProps<T extends ElementType> = Omit<
-  ComponentPropsWithoutRef<T>,
-  'as' | 'className'
-> &
-  BasePrimitiveProps &
-  BaseBoxPropsFoundation<T> &
-  ClassName;
-
 // @public (undocumented)
 type BaseBoxPropsFoundation<T extends ElementType> = {
   as?: T;
@@ -345,11 +336,6 @@ export type BoxProps<T extends ElementType> = Omit<
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
-// @public (undocumented)
-type ClassName = {
-  className?: string;
-};
-
 // @public (undocumented)
 type CSSAtRules = {
   [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<
@@ -792,24 +778,6 @@ export const media: {
 // @public
 type MediaQuery = (typeof media.above)[Breakpoint];
 
-// @public
-export const Pressable: PressableComponent;
-
-// @public (undocumented)
-type PressableComponent = (
-  props: PressableProps,
-  displayName: string,
-) => ReactElement | null;
-
-// @public (undocumented)
-export type PressableProps = Omit<
-  BaseBoxProps<'button'>,
-  'as' | 'children' | 'disabled' | 'role' | 'style'
-> & {
-  children: ReactNode;
-  isDisabled?: boolean;
-};
-
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   CSSAtRules &

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

@@ -202,9 +202,6 @@ const backgroundColorMap: {
     readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
 };
 
-// @public (undocumented)
-type BaseBoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T> & ClassName;
-
 // @public (undocumented)
 type BaseBoxPropsFoundation<T extends ElementType> = {
     as?: T;
@@ -306,11 +303,6 @@ export type BoxProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>,
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
-// @public (undocumented)
-type ClassName = {
-    className?: string;
-};
-
 // @public (undocumented)
 type CSSAtRules = {
     [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<SafeCSSObject, AtRulesWithoutMedia>;
@@ -537,18 +529,6 @@ export const media: {
 // @public
 type MediaQuery = (typeof media.above)[Breakpoint];
 
-// @public
-export const Pressable: PressableComponent;
-
-// @public (undocumented)
-type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
-
-// @public (undocumented)
-export type PressableProps = Omit<BaseBoxProps<'button'>, 'as' | 'children' | 'disabled' | 'role' | 'style'> & {
-    children: ReactNode;
-    isDisabled?: boolean;
-};
-
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;