@atlaskit/primitives 2.1.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/primitives
 
+## 3.0.0
+
+### Major Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`a45d2049a22c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a45d2049a22c) - The "Link" primitive has been renamed to "Anchor" to avoid confusion with the upcoming "Link" component. Since Link is still in Alpha this should not cause any upgrade friction.
+
+### Minor Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`75b2ade8b254`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/75b2ade8b254) - Both the Pressable and Anchor primitives now support analytics tracking by default.
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`39f3c929f0c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/39f3c929f0c4) - Add Pressable and Anchor primitives (in Alpha) to root export as `UNSAFE_PRESSABLE` and `UNSAFE_LINK`.
+
+### Patch Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`4951390bc0ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4951390bc0ae) - [ux] Adds a default underline style to the Anchor primitive (Alpha)
+
 ## 2.1.0
 
 ### Minor Changes

package/anchor/package.json

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

package/constellation/anchor/code.mdx

@@ -0,0 +1,21 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ERTAnchor from '!!extract-react-types-loader!../../extract-react-types/anchor-props';
+
+## Props
+
+Anchor also supports all valid `HTMLAnchorElement` props.
+
+<PropsTable heading="" props={ERTAnchor} />

package/constellation/anchor/examples.mdx

@@ -0,0 +1,33 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 0
+---
+
+import AnchorDefault from '../../examples/constellation/anchor/default';
+import AnchorStyled from '../../examples/constellation/anchor/styled';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+import SectionMessage from '@atlaskit/section-message';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+Anchor is a primitive used for building custom anchor links, with support for client-side routing and Atlassian Design System styling. This component is used by other design system components, such as the [Link component](/components/link/examples).
+
+For most links, use the [Link component](/components/link/examples) wherever possible, and use [XCSS](/components/primitives/xcss/usage) for any necessary customization. Only use Anchor if you aren't able to use Link.
+
+## Default
+
+Anchor comes unstyled, ready for styles to be applied. Note if you are using the [CSS reset](/components/css-reset/examples), anchor will inherit some default styles.
+
+<Example Component={AnchorDefault} packageName="@atlaskit/primitives/anchor" />
+
+## Styling
+
+Anchor consumes the Box primitive to provide a consistent styling API that supports design tokens. See [Box](/components/primitives/box/examples) for complete styling documentation and examples.
+
+<Example Component={AnchorStyled} packageName="@atlaskit/primitives/anchor" />

package/constellation/anchor/usage.mdx

@@ -0,0 +1,47 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 2
+---
+
+## When not to use Anchor
+
+The [Link component](/components/link/usage) should be used whenever possible for links to maintain visual consistency. Only use Anchor when building custom links beyond the capabilities of the Link component. The decision to use Anchor should involve checking if the Link component can be customized to fit your needs using [XCSS](/components/primitives/XCSS/usage).
+
+Do not use Anchor for buttons that perform actions rather than navigation. Use the equivalent [Pressable primitive](/components/primitives/pressable/usage) instead.
+
+## Link types
+
+External links starting with `http://` or `https://` will automatically render with `target="_blank"` and `rel="noopener noreferrer"` attributes.
+
+### Router links
+
+Anchor supports automatic consumption of configured router link components through the [App Provider](/components/app-provider/examples#router-links). If an App Provider is not present or a router link component is not configured, the link will render as a standard anchor link.
+
+External links and non-HTTP-based links such as `tel:` and `mailto:` will not use router links and always render as standard anchor links.
+
+Anchor accepts a generic type object matching the router link configuration, allowing advanced usage of `href` prop. These values can be mapped to the underlying router link component in the App Provider.
+
+```jsx
+<Anchor<MyRouterLinkConfig>
+  href={{
+    to: '/home',
+    replace: true
+  }}
+>
+  Home
+</Anchor>
+```
+
+## Styling
+
+Display behavior follows the same patterns as [Box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.
+
+## Related
+
+- [Configuring router link components with AppProvider](/components/app-provider/examples#router-links)
+- [The underlying box component](/components/primitives/box/usage)
+- [Counterpart pressable primitive for button tags](/components/primitives/button/usage)
+- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
+- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
+- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)

package/constellation/box/examples.mdx

@@ -53,13 +53,15 @@ For more information on XCSS, see the dedicated [XCSS documentation](/components
 
 ## Conditional styles
 
-To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
+To achieve conditional styles, we suggest composing conditional styles via the `props.xcss` API rather than applying conditional behaviour to individual props.
 
 <Example Component={BoxConditional} packageName="@atlaskit/primitives/box" />
 
-## Practical use case
+## Practical card example
 
-Box is designed to be used in conjunction with the inline and stack components to create layouts. This example demonstrates how these can be used to create familiar components and patterns.
+Box is designed to be composed with inline, stack, and other components to create layouts.
+
+Atlassian uses dozens of distinct card-like components across products. Therefore, rather than providing a strict component, the Atlassian Design System empowers and supports you to build your own card components in ways that are consistent and will scale over time.
 
 <Example
   Component={BoxPracticalUseCase}

package/constellation/pressable/code.mdx

@@ -0,0 +1,21 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ERTPressable from '!!extract-react-types-loader!../../extract-react-types/pressable-props';
+
+## Props
+
+Pressable also supports all valid `HTMLButtonElement` props, except for `disabled` which is replaced by the `isDisabled` prop.
+
+<PropsTable heading="" props={ERTPressable} />

package/constellation/pressable/examples.mdx

@@ -0,0 +1,39 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 0
+---
+
+import PressableDefault from '../../examples/constellation/pressable/default';
+import PressableStyled from '../../examples/constellation/pressable/styled';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+import SectionMessage from '@atlaskit/section-message';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+Pressable is a primitive used for building custom buttons with Atlassian Design System styling. This component is used by other design system components, such as the [Button component](/components/button/examples).
+
+For most buttons, use the [Button component](/components/button/examples) wherever possible, and use [XCSS](/components/primitives/xcss/usage) for any necessary customization. Only use pressable if you aren't able to use the button component.
+
+## Default
+
+Pressable comes unstyled, ready for styles to be applied.
+
+<Example
+  Component={PressableDefault}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+## Styling
+
+Pressable consumes the Box primitive to provide a consistent styling API that supports design tokens. See [Box](/components/primitives/box/examples) for complete styling documentation and examples.
+
+<Example
+  Component={PressableStyled}
+  packageName="@atlaskit/primitives/pressable"
+/>

package/constellation/pressable/usage.mdx

@@ -0,0 +1,23 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 2
+---
+
+## When not to use pressable
+
+The [Button component](/components/button/usage) should be used whenever possible for buttons to maintain visual consistency. Only use pressable when building custom buttons beyond the capabilities of the button component. The decision to use pressable should involve checking if the button component can be customized to fit your needs using [XCSS](/components/primitives/XCSS/usage).
+
+Do not use Pressable for links (anchor tags). Use the equivalent [Anchor primitive](/components/primitives/anchor/usage) instead.
+
+## Styling
+
+Display behavior follows the same patterns as [Box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.
+
+## Related
+
+- [The underlying box component](/components/primitives/box/usage)
+- [Counterpart anchor primitive for anchor tags](/components/primitives/anchor/usage)
+- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
+- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
+- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)

package/constellation/xcss/examples.mdx

@@ -37,6 +37,6 @@ XCSS also accepts a subset of media queries at [predefined breakpoints](/compone
 
 ## Conditional styles
 
-To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
+For conditional styles, try composing styles together via the array with ternary or boolean operators.
 
 <Example Component={xcssConditional} packageName="@atlaskit/primitives/xcss" />

package/dist/cjs/components/{link.js → anchor.js}

@@ -29,6 +29,9 @@ var baseFocusRingStyles = {
   outlineStyle: 'solid',
   outlineOffset: 'space.025'
 };
+var defaultStyles = (0, _xcss.xcss)({
+  textDecoration: 'underline'
+});
 var focusRingStyles = (0, _xcss.xcss)({
   ':focus-visible': baseFocusRingStyles,
   '@supports not selector(*:focus-visible)': {
@@ -42,7 +45,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-var Link = function Link(_ref, ref) {
+var Anchor = function Anchor(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -73,14 +76,14 @@ var Link = function Link(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
   var RouterLink = (0, _appProvider.useRouterLink)();
 
   // Combine default styles with supplied styles. XCSS does not support deep nested arrays
-  var styles = Array.isArray(xcssStyles) ? [focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [focusRingStyles, xcssStyles];
+  var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
   var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
 
@@ -93,7 +96,7 @@ var Link = function Link(_ref, ref) {
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
-  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
   return /*#__PURE__*/_react.default.createElement(_box.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, htmlAttributes, {
@@ -112,12 +115,8 @@ var Link = function Link(_ref, ref) {
     paddingBlockEnd: paddingBlockEnd,
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick
+    paddingInlineEnd: paddingInlineEnd,
+    onClick: onClick
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
@@ -126,17 +125,17 @@ var Link = function Link(_ref, ref) {
 
 // Workarounds to support generic types with forwardRef
 /**
- * __UNSAFE_LINK__
+ * __UNSAFE_ANCHOR__
  *
  * @internal Still under development. Do not use.
  *
- * Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
  *
  * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
  *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(Link);
-var _default = exports.default = UNSAFE_LINK;
+var UNSAFE_ANCHOR = /*#__PURE__*/(0, _react.forwardRef)(Anchor);
+var _default = exports.default = UNSAFE_ANCHOR;

package/dist/cjs/components/pressable.js

@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -94,12 +94,8 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     as: "button",
     ref: ref,
     testId: testId,
-    type: type
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick,
+    type: type,
+    onClick: onClick,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,

package/dist/cjs/index.js

@@ -46,13 +46,19 @@ Object.defineProperty(exports, "Text", {
     return _text.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_ANCHOR", {
+  enumerable: true,
+  get: function get() {
+    return _anchor.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
   enumerable: true,
   get: function get() {
     return _responsive.UNSAFE_BREAKPOINTS_CONFIG;
   }
 });
-Object.defineProperty(exports, "UNSAFE_Pressable", {
+Object.defineProperty(exports, "UNSAFE_PRESSABLE", {
   enumerable: true,
   get: function get() {
     return _pressable.default;
@@ -91,4 +97,5 @@ var _grid = _interopRequireDefault(require("./components/grid"));
 var _bleed = _interopRequireDefault(require("./components/bleed"));
 var _text = _interopRequireDefault(require("./components/text"));
 var _pressable = _interopRequireDefault(require("./components/pressable"));
+var _anchor = _interopRequireDefault(require("./components/anchor"));
 var _responsive = require("./responsive");

package/dist/es2019/components/{link.js → anchor.js}

@@ -15,6 +15,9 @@ const baseFocusRingStyles = {
   outlineStyle: 'solid',
   outlineOffset: 'space.025'
 };
+const defaultStyles = xcss({
+  textDecoration: 'underline'
+});
 const focusRingStyles = xcss({
   ':focus-visible': baseFocusRingStyles,
   '@supports not selector(*:focus-visible)': {
@@ -28,7 +31,7 @@ const focusRingStyles = xcss({
 });
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-const Link = ({
+const Anchor = ({
   href,
   children,
   backgroundColor,
@@ -59,14 +62,14 @@ const Link = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
   const RouterLink = useRouterLink();
 
   // Combine default styles with supplied styles. XCSS does not support deep nested arrays
-  const styles = Array.isArray(xcssStyles) ? [focusRingStyles, ...xcssStyles] : [focusRingStyles, xcssStyles];
+  const styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles, ...xcssStyles] : [defaultStyles, focusRingStyles, xcssStyles];
   const isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   const isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
 
@@ -79,7 +82,7 @@ const Link = ({
    */
   const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';
-  invariant(!hrefObjectUsedWithoutRouterLink, `@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider`);
+  invariant(!hrefObjectUsedWithoutRouterLink, `@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider`);
   return /*#__PURE__*/React.createElement(Box
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, htmlAttributes, {
@@ -98,12 +101,8 @@ const Link = ({
     paddingBlockEnd: paddingBlockEnd,
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick
+    paddingInlineEnd: paddingInlineEnd,
+    onClick: onClick
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
@@ -112,17 +111,17 @@ const Link = ({
 
 // Workarounds to support generic types with forwardRef
 /**
- * __UNSAFE_LINK__
+ * __UNSAFE_ANCHOR__
  *
  * @internal Still under development. Do not use.
  *
- * Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
  *
  * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
  *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-const UNSAFE_LINK = /*#__PURE__*/forwardRef(Link);
-export default UNSAFE_LINK;
+const UNSAFE_ANCHOR = /*#__PURE__*/forwardRef(Anchor);
+export default UNSAFE_ANCHOR;

package/dist/es2019/components/pressable.js

@@ -66,7 +66,7 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -80,12 +80,8 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     as: "button",
     ref: ref,
     testId: testId,
-    type: type
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick,
+    type: type,
+    onClick: onClick,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,

package/dist/es2019/index.js

@@ -6,5 +6,6 @@ export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';
 export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
-export { default as UNSAFE_Pressable } from './components/pressable';
+export { default as UNSAFE_PRESSABLE } from './components/pressable';
+export { default as UNSAFE_ANCHOR } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/esm/components/{link.js → anchor.js}

@@ -19,6 +19,9 @@ var baseFocusRingStyles = {
   outlineStyle: 'solid',
   outlineOffset: 'space.025'
 };
+var defaultStyles = xcss({
+  textDecoration: 'underline'
+});
 var focusRingStyles = xcss({
   ':focus-visible': baseFocusRingStyles,
   '@supports not selector(*:focus-visible)': {
@@ -32,7 +35,7 @@ var focusRingStyles = xcss({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-var Link = function Link(_ref, ref) {
+var Anchor = function Anchor(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -63,14 +66,14 @@ var Link = function Link(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
   var RouterLink = useRouterLink();
 
   // Combine default styles with supplied styles. XCSS does not support deep nested arrays
-  var styles = Array.isArray(xcssStyles) ? [focusRingStyles].concat(_toConsumableArray(xcssStyles)) : [focusRingStyles, xcssStyles];
+  var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat(_toConsumableArray(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
   var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
 
@@ -83,7 +86,7 @@ var Link = function Link(_ref, ref) {
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
-  invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
   return /*#__PURE__*/React.createElement(Box
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, htmlAttributes, {
@@ -102,12 +105,8 @@ var Link = function Link(_ref, ref) {
     paddingBlockEnd: paddingBlockEnd,
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick
+    paddingInlineEnd: paddingInlineEnd,
+    onClick: onClick
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
@@ -116,17 +115,17 @@ var Link = function Link(_ref, ref) {
 
 // Workarounds to support generic types with forwardRef
 /**
- * __UNSAFE_LINK__
+ * __UNSAFE_ANCHOR__
  *
  * @internal Still under development. Do not use.
  *
- * Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
  *
  * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
  *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-var UNSAFE_LINK = /*#__PURE__*/forwardRef(Link);
-export default UNSAFE_LINK;
+var UNSAFE_ANCHOR = /*#__PURE__*/forwardRef(Anchor);
+export default UNSAFE_ANCHOR;

package/dist/esm/components/pressable.js

@@ -70,7 +70,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "2.1.0",
+    packageVersion: "3.0.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -84,12 +84,8 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     as: "button",
     ref: ref,
     testId: testId,
-    type: type
-    // TODO: This only tracks events if componentName is supplied, which makes tracking opt-in during
-    // the transition period. This will be removed once `@atlaskit/button` is bumped to use the latest
-    // version of primitives
-    ,
-    onClick: componentName ? onClick : providedOnClick,
+    type: type,
+    onClick: onClick,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,

package/dist/esm/index.js

@@ -6,5 +6,6 @@ export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';
 export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
-export { default as UNSAFE_Pressable } from './components/pressable';
+export { default as UNSAFE_PRESSABLE } from './components/pressable';
+export { default as UNSAFE_ANCHOR } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/{types-ts4.5/components/link.d.ts → types/components/anchor.d.ts}

@@ -2,7 +2,7 @@ import React, { type ReactNode, type Ref } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
+export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
     /**
      * `children` should be defined to ensure links have text.
      */
@@ -10,7 +10,7 @@ export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = Ro
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
@@ -26,21 +26,21 @@ export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = Ro
      */
     analyticsContext?: Record<string, any>;
 };
-declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
- * __UNSAFE_LINK__
+ * __UNSAFE_ANCHOR__
  *
  * @internal Still under development. Do not use.
  *
- * Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
  *
  * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
  *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & {
+declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & {
     /**
      * `children` should be defined to ensure links have text.
      */
@@ -48,7 +48,7 @@ declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: ((e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
@@ -65,5 +65,5 @@ declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never
     analyticsContext?: Record<string, any> | undefined;
 } & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
-}) => ReturnType<typeof Link>;
-export default UNSAFE_LINK;
+}) => ReturnType<typeof Anchor>;
+export default UNSAFE_ANCHOR;

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

@@ -11,7 +11,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
@@ -48,7 +48,7 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).

package/dist/types/index.d.ts

@@ -15,7 +15,9 @@ export { default as Bleed } from './components/bleed';
 export type { BleedProps } from './components/bleed';
 export { default as Text } from './components/text';
 export type { TextProps } from './components/text';
-export { default as UNSAFE_Pressable } from './components/pressable';
+export { default as UNSAFE_PRESSABLE } from './components/pressable';
 export type { PressableProps as UNSAFE_PressableProps } from './components/pressable';
+export { default as UNSAFE_ANCHOR } from './components/anchor';
+export type { AnchorProps as UNSAFE_AnchorProps } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
 export type { Breakpoint, MediaQuery } from './responsive';

package/dist/{types/components/link.d.ts → types-ts4.5/components/anchor.d.ts}

@@ -2,7 +2,7 @@ import React, { type ReactNode, type Ref } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
+export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
     /**
      * `children` should be defined to ensure links have text.
      */
@@ -10,7 +10,7 @@ export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = Ro
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
@@ -26,21 +26,21 @@ export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = Ro
      */
     analyticsContext?: Record<string, any>;
 };
-declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
- * __UNSAFE_LINK__
+ * __UNSAFE_ANCHOR__
  *
  * @internal Still under development. Do not use.
  *
- * Link is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
  *
  * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
  *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & {
+declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & {
     /**
      * `children` should be defined to ensure links have text.
      */
@@ -48,7 +48,7 @@ declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: ((e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
@@ -65,5 +65,5 @@ declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never
     analyticsContext?: Record<string, any> | undefined;
 } & {
     ref?: React.Ref<HTMLAnchorElement> | undefined;
-}) => ReturnType<typeof Link>;
-export default UNSAFE_LINK;
+}) => ReturnType<typeof Anchor>;
+export default UNSAFE_ANCHOR;

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

@@ -11,7 +11,7 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'child
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
@@ -48,7 +48,7 @@ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxPro
     /**
      * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
-    onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent?: UIAnalyticsEvent) => void) | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
     /**
      * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
      * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).

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

@@ -15,7 +15,9 @@ export { default as Bleed } from './components/bleed';
 export type { BleedProps } from './components/bleed';
 export { default as Text } from './components/text';
 export type { TextProps } from './components/text';
-export { default as UNSAFE_Pressable } from './components/pressable';
+export { default as UNSAFE_PRESSABLE } from './components/pressable';
 export type { PressableProps as UNSAFE_PressableProps } from './components/pressable';
+export { default as UNSAFE_ANCHOR } from './components/anchor';
+export type { AnchorProps as UNSAFE_AnchorProps } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
 export type { Breakpoint, MediaQuery } from './responsive';

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

@@ -0,0 +1,103 @@
+// TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
+import React, { ReactNode } from 'react';
+
+import { BasePrimitiveProps, StyleProp } from '../src/components/types';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace Token {
+  // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
+  export type BackgroundColor = 'BackgroundColor';
+}
+
+type Space =
+  | 'space.0'
+  | 'space.025'
+  | 'space.050'
+  | 'space.075'
+  | 'space.100'
+  | 'space.150'
+  | 'space.200'
+  | 'space.250'
+  | 'space.300'
+  | 'space.400'
+  | 'space.500'
+  | 'space.600'
+  | 'space.800'
+  | 'space.1000';
+
+export default function Anchor<
+  RouterLinkConfig extends Record<string, any> = never,
+>(
+  _: {
+    /**
+     * A link can be provided as a string. If a router link configuration is set
+     * it can be mapped to the underlying router link component,
+     * or optionally a custom object defined in the generic type for advanced use.
+     */
+    href: string | RouterLinkConfig;
+
+    /**
+     * The `target` attribute of the anchor HTML element. Defaults to `_blank` for external links.
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+
+    /**
+     * The `rel` attribute of the anchor HTML element. Defaults to `noopener noreferrer` for external links.
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     */
+    padding?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     */
+    paddingBlock?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     */
+    paddingInline?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+
+    /**
+     * A token alias for background color. See:<br>
+     * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
+     * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
+     * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Box styles.
+     */
+    backgroundColor?: Token.BackgroundColor;
+
+    /**
+     * Elements to be rendered inside the primitive.
+     */
+    children: ReactNode;
+
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<'a'>['ref'];
+  } & BasePrimitiveProps &
+    StyleProp,
+) {}

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

@@ -0,0 +1,94 @@
+// TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
+import React, { ReactNode } from 'react';
+
+import { BasePrimitiveProps, StyleProp } from '../src/components/types';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace Token {
+  // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
+  export type BackgroundColor = 'BackgroundColor';
+}
+
+type Space =
+  | 'space.0'
+  | 'space.025'
+  | 'space.050'
+  | 'space.075'
+  | 'space.100'
+  | 'space.150'
+  | 'space.200'
+  | 'space.250'
+  | 'space.300'
+  | 'space.400'
+  | 'space.500'
+  | 'space.600'
+  | 'space.800'
+  | 'space.1000';
+
+export default function Pressable(
+  _: {
+    /**
+     * Controls whether the button is disabled.
+     */
+    isDisabled?: boolean;
+
+    /**
+     * The `type` attribute of the Button HTML element. Defaults to `button`.
+     */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     */
+    padding?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     */
+    paddingBlock?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     */
+    paddingInline?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+
+    /**
+     * A token alias for background color. See:<br>
+     * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
+     * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
+     * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Box styles.
+     */
+    backgroundColor?: Token.BackgroundColor;
+
+    /**
+     * Elements to be rendered inside the primitive.
+     */
+    children: ReactNode;
+
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<'button'>['ref'];
+  } & BasePrimitiveProps &
+    StyleProp,
+) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -96,6 +96,24 @@
           "status": {
             "type": "closed-beta"
           }
+        },
+        {
+          "title": "Pressable",
+          "folder": "pressable",
+          "slug": "primitives/pressable",
+          "id": "@atlaskit/primitives/pressable",
+          "status": {
+            "type": "alpha"
+          }
+        },
+        {
+          "title": "Anchor",
+          "folder": "anchor",
+          "slug": "primitives/anchor",
+          "id": "@atlaskit/primitives/anchor",
+          "status": {
+            "type": "alpha"
+          }
         }
       ]
     }
@@ -174,7 +192,7 @@
     "./inline": "./src/components/inline.tsx",
     "./text": "./src/components/text.tsx",
     "./pressable": "./src/components/pressable.tsx",
-    "./link": "./src/components/link.tsx",
+    "./anchor": "./src/components/anchor.tsx",
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"

package/link/package.json

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