@atlaskit/primitives 0.15.3 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 1.0.0
+
+### Major Changes
+
+- [`fec62731e2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fec62731e2e) - This package is now in open beta and is no longer considered experimental. We will be making iterative improvements until GA. While the API is likely to be stable, we reserve the right to make changes if required. This version contains no changes whatsoever.
+
+  P.S. The reason for the change is to aid package deduplication in the product.
+
+## 0.16.0
+
+### Minor Changes
+
+- [`fe3ef707163`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe3ef707163) - Initial Pressable primitive (not ready for production)
+
 ## 0.15.3
 
 ### Patch Changes

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"];
+var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "css"];
 /* 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,7 +24,8 @@ var _excluded = ["as", "className", "children", "backgroundColor", "padding", "p
  * @internal
  */
 var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var as = _ref.as,
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     className = _ref.className,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -37,8 +38,9 @@ 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 || 'div';
+  var Component = as;
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
     style: style,
     ref: ref

package/dist/cjs/components/pressable.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _baseBox = _interopRequireDefault(require("./internal/base-box"));
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId"];
+/** @jsx jsx */
+var defaultStyles = (0, _react2.css)({
+  cursor: 'pointer'
+});
+
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [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 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,
+    isDisabled = _ref.isDisabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_baseBox.default, (0, _extends2.default)({}, htmlAttributes, {
+    ref: ref,
+    testId: testId,
+    type: type,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    as: "button",
+    css: defaultStyles,
+    disabled: isDisabled
+  }), children));
+});
+var _default = Pressable;
+exports.default = _default;

package/dist/cjs/index.js

@@ -16,6 +16,12 @@ 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() {
@@ -41,6 +47,7 @@ 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": "0.15.3",
+	"version": "1.0.0",
 	"sideEffects": false
 }

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,
+  as = 'div',
   className,
   children,
   backgroundColor,
@@ -29,9 +29,10 @@ export const BaseBox = /*#__PURE__*/forwardRef(({
   paddingInlineEnd,
   style,
   testId,
+  css,
   ...htmlAttributes
 }, ref) => {
-  const Component = as || 'div';
+  const Component = as;
   const node = jsx(Component, _extends({
     style: style,
     ref: ref

package/dist/es2019/components/pressable.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+import BaseBox from './internal/base-box';
+const defaultStyles = css({
+  cursor: 'pointer'
+});
+
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+const Pressable = /*#__PURE__*/forwardRef(({
+  children,
+  backgroundColor,
+  padding,
+  paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
+  isDisabled,
+  type = 'button',
+  testId,
+  ...htmlAttributes
+}, ref) => {
+  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+    ref: ref,
+    testId: testId,
+    type: type,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    as: "button",
+    css: defaultStyles,
+    disabled: isDisabled
+  }), children));
+});
+export default Pressable;

package/dist/es2019/index.js

@@ -1,4 +1,5 @@
 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": "0.15.3",
+	"version": "1.0.0",
 	"sideEffects": false
 }

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

package/dist/esm/components/pressable.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId"];
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+import BaseBox from './internal/base-box';
+var defaultStyles = css({
+  cursor: 'pointer'
+});
+
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var 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,
+    isDisabled = _ref.isDisabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    testId = _ref.testId,
+    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+    ref: ref,
+    testId: testId,
+    type: type,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    as: "button",
+    css: defaultStyles,
+    disabled: isDisabled
+  }), children));
+});
+export default Pressable;

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 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": "0.15.3",
+	"version": "1.0.0",
 	"sideEffects": false
 }

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

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } fr
 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' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+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`.

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { type ReactElement, type ReactNode } from 'react';
+import { type BaseBoxProps } from './internal/base-box';
+export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+    /**
+     * `children` should be defined to ensure buttons are not empty,
+     * because they should have labels.
+     */
+    children: ReactNode;
+    isDisabled?: boolean;
+};
+type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+declare const Pressable: PressableComponent;
+export default Pressable;

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

@@ -10,9 +10,11 @@ export type BasePrimitiveProps = {
      */
     style?: CSSProperties;
 };
+type BoxXCSSArray = Array<BoxXCSSArray | BoxXCSS | false | undefined>;
 export type PublicBoxPropsBase = {
     /**
      * Safe subset of styles that can be applied as a classname.
      */
-    xcss?: BoxXCSS | Array<BoxXCSS | false | undefined>;
+    xcss?: BoxXCSS | BoxXCSSArray;
 };
+export {};

package/dist/types/index.d.ts

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

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

@@ -11,7 +11,7 @@ declare const uniqueSymbol: unique symbol;
  * @returns a collection of styles that can be applied to the respective primitive
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | XCSSArray) => ParsedXcss;
 type CSSMediaQueries = {
     [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
 };
@@ -27,6 +27,7 @@ declare const inlineWrapper: (style: any) => {
     readonly [uniqueSymbol]: InlineStyles;
 };
 type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+type XCSSArray = Array<XCSS | XCSSArray | false | undefined>;
 type AllowedBoxStyles = keyof SafeCSSObject;
 type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
 /**

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

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } fr
 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' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+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`.

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { type ReactElement, type ReactNode } from 'react';
+import { type BaseBoxProps } from './internal/base-box';
+export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+    /**
+     * `children` should be defined to ensure buttons are not empty,
+     * because they should have labels.
+     */
+    children: ReactNode;
+    isDisabled?: boolean;
+};
+type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+declare const Pressable: PressableComponent;
+export default Pressable;

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

@@ -10,9 +10,11 @@ export type BasePrimitiveProps = {
      */
     style?: CSSProperties;
 };
+type BoxXCSSArray = Array<BoxXCSSArray | BoxXCSS | false | undefined>;
 export type PublicBoxPropsBase = {
     /**
      * Safe subset of styles that can be applied as a classname.
      */
-    xcss?: BoxXCSS | Array<BoxXCSS | false | undefined>;
+    xcss?: BoxXCSS | BoxXCSSArray;
 };
+export {};

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

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

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

@@ -11,7 +11,7 @@ declare const uniqueSymbol: unique symbol;
  * @returns a collection of styles that can be applied to the respective primitive
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | XCSSArray) => ParsedXcss;
 type CSSMediaQueries = {
     [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
 };
@@ -27,6 +27,7 @@ declare const inlineWrapper: (style: any) => {
     readonly [uniqueSymbol]: InlineStyles;
 };
 type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+type XCSSArray = Array<XCSS | XCSSArray | false | undefined>;
 type AllowedBoxStyles = keyof SafeCSSObject;
 type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.15.3",
+  "version": "1.0.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -102,6 +102,7 @@
     "./responsive": "./src/responsive/index.tsx"
   },
   "dependencies": {
+    "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -115,6 +116,8 @@
     "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "*",
     "@atlaskit/ssr": "*",
+    "@atlaskit/theme": "*",
+    "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",

package/report.api.md

@@ -50,6 +50,7 @@ type AllowedBoxStyles = keyof SafeCSSObject;
 type As =
   | 'article'
   | 'aside'
+  | 'button'
   | 'dialog'
   | 'div'
   | 'footer'
@@ -296,6 +297,9 @@ type BoxXCSS = {
   readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public (undocumented)
+type BoxXCSSArray = Array<BoxXCSS | BoxXCSSArray | false | undefined>;
+
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -413,9 +417,27 @@ 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 PublicBoxPropsBase = {
-  xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
+  xcss?: BoxXCSS | BoxXCSSArray;
 };
 
 // @public (undocumented)

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

@@ -36,7 +36,7 @@ type AlignInline_2 = 'center' | 'end' | 'start';
 type AllowedBoxStyles = keyof SafeCSSObject;
 
 // @public (undocumented)
-type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+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;
@@ -258,6 +258,9 @@ type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public (undocumented)
+type BoxXCSSArray = Array<BoxXCSS | BoxXCSSArray | false | undefined>;
+
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -356,9 +359,21 @@ 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 PublicBoxPropsBase = {
-    xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
+    xcss?: BoxXCSS | BoxXCSSArray;
 };
 
 // @public (undocumented)