@atlaskit/primitives 13.2.0 → 13.3.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/primitives
 
+## 13.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.3.0
+
+### Minor Changes
+
+- [#165860](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165860)
+  [`c2dec1ca710f3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c2dec1ca710f3) -
+  Adds an experimental Focusable component under the Compiled entrypoint, which requires a specific
+  setup.
+
 ## 13.2.0
 
 ### Minor Changes

package/dist/cjs/compiled/components/anchor.compiled.css

@@ -1,12 +1,4 @@
-
 ._1hms8stv{text-decoration-line:underline}
 ._4bfu18uv{text-decoration-color:initial}
 ._ajmmnqa1{text-decoration-style:solid}
-._vchhusvi{box-sizing:border-box}
-._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
-._ypr0glyw:focus:not(:focus-visible){outline-style:none}
-._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/compiled/components/anchor.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react2 = require("@compiled/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _appProvider = require("@atlaskit/app-provider");
@@ -21,13 +22,13 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _focusable = _interopRequireDefault(require("./focusable"));
 var _excluded = ["href", "children", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss", "opensInNewWindowLabel"],
   _excluded2 = ["className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
-  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1",
-  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1"
 };
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
@@ -69,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -93,23 +94,28 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
   (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
   var Component = isRouterLink ? RouterLink : 'a';
-  return /*#__PURE__*/React.createElement(Component
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  return /*#__PURE__*/React.createElement(_focusable.default
+  // @ts-expect-error we don't allow `a` on Focusable for makers as they should use Anchor instead
   , (0, _extends2.default)({
-    className: (0, _runtime.ax)([styles.root, styles.focusRing, xcss])
+    as: Component
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+    ,
+    className: xcss
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style,
     ref: ref
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
-    // @ts-expect-error
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(opensInNewWindowLabel) : ariaLabel,
-    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
-    "data-testid": testId,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    ,
+    xcss: (0, _react2.cx)(styles.root, xcss),
+    testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(_visuallyHidden.default, {
     id: opensNewWindowLabelId

package/dist/cjs/compiled/components/focusable.compiled.css

@@ -0,0 +1,6 @@
+._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._1ah3115h:focus-visible{outline-offset:var(--_1203r2w)}
+._1ah31bk5:focus-visible{outline-offset:var(--ds-border-width-outline,2px)}
+._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}._2mwq115h:focus-visible{outline-offset:var(--_1203r2w)}}

package/dist/cjs/compiled/components/focusable.js

@@ -0,0 +1,59 @@
+/* focusable.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./focusable.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _excluded = ["as", "children", "isInset", "testId", "style", "xcss"],
+  _excluded2 = ["className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var focusRingStyles = null;
+var insetFocusRingStyles = null;
+/**
+ * __Focus ring__
+ *
+ * A focus ring visually indicates the currently focused item.
+ *
+ */
+var Focusable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'button' : _ref$as,
+    children = _ref.children,
+    isInset = _ref.isInset,
+    testId = _ref.testId,
+    style = _ref.style,
+    xcss = _ref.xcss,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  var _spreadClass = htmlAttributes.className,
+    safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
+  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, safeHtmlAttributes, {
+    // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y", isInset && "_1ah3115h _2mwq115h", xcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+
+    "data-testid": testId,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_1203r2w": (0, _runtime.ix)("calc(0px - ".concat("var(--ds-border-width-outline, 2px)", ")"))
+    })
+  }), children);
+});
+var _default = exports.default = Focusable;

package/dist/cjs/compiled/components/pressable.compiled.css

@@ -2,12 +2,4 @@
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
-._vchhusvi{box-sizing:border-box}
-._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
-._ypr0glyw:focus:not(:focus-visible){outline-style:none}
-._zcxs1o36:focus:not(:focus-visible){outline-width:medium}
-._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/compiled/components/pressable.js

@@ -13,17 +13,18 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react2 = require("@compiled/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+var _focusable = _interopRequireDefault(require("./focusable"));
 var _excluded = ["children", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss"],
   _excluded2 = ["className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
   root: "_vchhusvi _r06hglyw _19itglyw _80omtlke",
-  disabled: "_80om13gf",
-  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+  disabled: "_80om13gf"
 };
 
 /**
@@ -59,7 +60,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -68,9 +69,10 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
-  return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
-    className: (0, _runtime.ax)([styles.root, styles.focusRing, isDisabled && styles.disabled, xcss])
+  return /*#__PURE__*/React.createElement(_focusable.default
+  // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
+  , (0, _extends2.default)({
+    as: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style
@@ -79,8 +81,11 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     // eslint-disable-next-line react/button-has-type
     type: type,
     onClick: onClick,
-    disabled: isDisabled,
-    "data-testid": testId,
+    disabled: isDisabled
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    ,
+    xcss: (0, _react2.cx)(styles.root, isDisabled && styles.disabled, xcss),
+    testId: testId,
     ref: ref
   }), children);
 });

package/dist/cjs/compiled/index.js

@@ -28,6 +28,12 @@ Object.defineProperty(exports, "Flex", {
     return _flex.default;
   }
 });
+Object.defineProperty(exports, "Focusable", {
+  enumerable: true,
+  get: function get() {
+    return _focusable.default;
+  }
+});
 Object.defineProperty(exports, "Grid", {
   enumerable: true,
   get: function get() {
@@ -58,6 +64,12 @@ Object.defineProperty(exports, "Text", {
     return _text.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_useMediaQuery", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.UNSAFE_useMediaQuery;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_useSurface", {
   enumerable: true,
   get: function get() {
@@ -80,4 +92,5 @@ var _text = _interopRequireDefault(require("./components/text"));
 var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _anchor = _interopRequireDefault(require("./components/anchor"));
 var _responsive = require("./responsive");
+var _focusable = _interopRequireDefault(require("./components/focusable"));
 var _surfaceProvider = require("./components/internal/surface-provider");

package/dist/cjs/components/anchor.js

@@ -100,7 +100,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/pressable.js

@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/compiled/components/anchor.compiled.css

@@ -1,12 +1,4 @@
-
 ._1hms8stv{text-decoration-line:underline}
 ._4bfu18uv{text-decoration-color:initial}
 ._ajmmnqa1{text-decoration-style:solid}
-._vchhusvi{box-sizing:border-box}
-._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
-._ypr0glyw:focus:not(:focus-visible){outline-style:none}
-._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/compiled/components/anchor.js

@@ -4,6 +4,7 @@ import "./anchor.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
+import { cx } from '@compiled/react';
 import invariant from 'tiny-invariant';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useRouterLink } from '@atlaskit/app-provider';
@@ -11,9 +12,9 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import InteractionContext from '@atlaskit/interaction-context';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import Focusable from './focusable';
 const styles = {
-  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1",
-  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1"
 };
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
@@ -54,7 +55,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -80,23 +81,28 @@ const AnchorNoRef = ({
   const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';
   invariant(!hrefObjectUsedWithoutRouterLink, `@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider`);
   const Component = isRouterLink ? RouterLink : 'a';
-  return /*#__PURE__*/React.createElement(Component
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  return /*#__PURE__*/React.createElement(Focusable
+  // @ts-expect-error we don't allow `a` on Focusable for makers as they should use Anchor instead
   , _extends({
-    className: ax([styles.root, styles.focusRing, xcss])
+    as: Component
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+    ,
+    className: xcss
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style,
     ref: ref
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
-    // @ts-expect-error
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} ${opensInNewWindowLabel}` : ariaLabel,
-    "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy,
-    "data-testid": testId,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    ,
+    xcss: cx(styles.root, xcss),
+    testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
     id: opensNewWindowLabelId

package/dist/es2019/compiled/components/focusable.compiled.css

@@ -0,0 +1,6 @@
+._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._1ah311pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}
+._1ah31bk5:focus-visible{outline-offset:var(--ds-border-width-outline,2px)}
+._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}._2mwq11pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}}

package/dist/es2019/compiled/components/focusable.js

@@ -0,0 +1,42 @@
+/* focusable.tsx generated by @compiled/babel-plugin v0.32.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./focusable.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+const focusRingStyles = null;
+const insetFocusRingStyles = null;
+/**
+ * __Focus ring__
+ *
+ * A focus ring visually indicates the currently focused item.
+ *
+ */
+const Focusable = /*#__PURE__*/forwardRef(({
+  as: Component = 'button',
+  children,
+  isInset,
+  testId,
+  style,
+  xcss,
+  ...htmlAttributes
+}, ref) => {
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  const {
+    className: _spreadClass,
+    ...safeHtmlAttributes
+  } = htmlAttributes;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, safeHtmlAttributes, {
+    // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y", isInset && "_1ah311pw _2mwq11pw", xcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: style,
+    "data-testid": testId
+  }), children);
+});
+export default Focusable;

package/dist/es2019/compiled/components/pressable.compiled.css

@@ -2,12 +2,4 @@
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
-._vchhusvi{box-sizing:border-box}
-._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
-._ypr0glyw:focus:not(:focus-visible){outline-style:none}
-._zcxs1o36:focus:not(:focus-visible){outline-width:medium}
-._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/compiled/components/pressable.js

@@ -4,13 +4,14 @@ import "./pressable.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
+import { cx } from '@compiled/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
+import Focusable from './focusable';
 const styles = {
   root: "_vchhusvi _r06hglyw _19itglyw _80omtlke",
-  disabled: "_80om13gf",
-  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+  disabled: "_80om13gf"
 };
 
 /**
@@ -45,7 +46,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -56,9 +57,10 @@ const Pressable = /*#__PURE__*/forwardRef(({
     className: _spreadClass,
     ...safeHtmlAttributes
   } = htmlAttributes;
-  return /*#__PURE__*/React.createElement("button", _extends({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
-    className: ax([styles.root, styles.focusRing, isDisabled && styles.disabled, xcss])
+  return /*#__PURE__*/React.createElement(Focusable
+  // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
+  , _extends({
+    as: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style
@@ -67,8 +69,11 @@ const Pressable = /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line react/button-has-type
     type: type,
     onClick: onClick,
-    disabled: isDisabled,
-    "data-testid": testId,
+    disabled: isDisabled
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    ,
+    xcss: cx(styles.root, isDisabled && styles.disabled, xcss),
+    testId: testId,
     ref: ref
   }), children);
 });

package/dist/es2019/compiled/index.js

@@ -7,7 +7,7 @@ export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
 export { default as Pressable } from './components/pressable';
 export { default as Anchor } from './components/anchor';
-export { media } from './responsive';
-
+export { media, UNSAFE_useMediaQuery } from './responsive';
+export { default as Focusable } from './components/focusable';
 // TODO: This is still not figured out from before…
 export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';

package/dist/es2019/components/anchor.js

@@ -90,7 +90,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/compiled/components/anchor.compiled.css

@@ -1,12 +1,4 @@
-
 ._1hms8stv{text-decoration-line:underline}
 ._4bfu18uv{text-decoration-color:initial}
 ._ajmmnqa1{text-decoration-style:solid}
-._vchhusvi{box-sizing:border-box}
-._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
-._ypr0glyw:focus:not(:focus-visible){outline-style:none}
-._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/compiled/components/anchor.js

@@ -8,6 +8,7 @@ import "./anchor.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
+import { cx } from '@compiled/react';
 import invariant from 'tiny-invariant';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useRouterLink } from '@atlaskit/app-provider';
@@ -15,9 +16,9 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import InteractionContext from '@atlaskit/interaction-context';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import Focusable from './focusable';
 var styles = {
-  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1",
-  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1"
 };
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
@@ -59,7 +60,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -83,23 +84,28 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
   invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
   var Component = isRouterLink ? RouterLink : 'a';
-  return /*#__PURE__*/React.createElement(Component
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  return /*#__PURE__*/React.createElement(Focusable
+  // @ts-expect-error we don't allow `a` on Focusable for makers as they should use Anchor instead
   , _extends({
-    className: ax([styles.root, styles.focusRing, xcss])
+    as: Component
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+    ,
+    className: xcss
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style,
     ref: ref
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
-    // @ts-expect-error
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
     onClick: onClick,
     "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(opensInNewWindowLabel) : ariaLabel,
-    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
-    "data-testid": testId,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    ,
+    xcss: cx(styles.root, xcss),
+    testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
     id: opensNewWindowLabelId

package/dist/esm/compiled/components/focusable.compiled.css

@@ -0,0 +1,6 @@
+._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._1ah3115h:focus-visible{outline-offset:var(--_1203r2w)}
+._1ah31bk5:focus-visible{outline-offset:var(--ds-border-width-outline,2px)}
+._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
+._ra3xnqa1:focus-visible{outline-style:solid}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}._2mwq115h:focus-visible{outline-offset:var(--_1203r2w)}}

package/dist/esm/compiled/components/focusable.js

@@ -0,0 +1,49 @@
+/* focusable.tsx generated by @compiled/babel-plugin v0.32.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "children", "isInset", "testId", "style", "xcss"],
+  _excluded2 = ["className"];
+import "./focusable.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { forwardRef } from 'react';
+var focusRingStyles = null;
+var insetFocusRingStyles = null;
+/**
+ * __Focus ring__
+ *
+ * A focus ring visually indicates the currently focused item.
+ *
+ */
+var Focusable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'button' : _ref$as,
+    children = _ref.children,
+    isInset = _ref.isInset,
+    testId = _ref.testId,
+    style = _ref.style,
+    xcss = _ref.xcss,
+    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  var _spreadClass = htmlAttributes.className,
+    safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, safeHtmlAttributes, {
+    // @ts-ignore Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_mizu194a _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y", isInset && "_1ah3115h _2mwq115h", xcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+
+    "data-testid": testId,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_1203r2w": ix("calc(0px - ".concat("var(--ds-border-width-outline, 2px)", ")"))
+    })
+  }), children);
+});
+export default Focusable;

package/dist/esm/compiled/components/pressable.compiled.css

@@ -2,12 +2,4 @@
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
 ._r06hglyw{-webkit-appearance:none;appearance:none}
-._vchhusvi{box-sizing:border-box}
-._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
-._ypr0glyw:focus:not(:focus-visible){outline-style:none}
-._zcxs1o36:focus:not(:focus-visible){outline-width:medium}
-._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
-._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
-._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
-@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/compiled/components/pressable.js

@@ -7,13 +7,14 @@ import "./pressable.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
+import { cx } from '@compiled/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
+import Focusable from './focusable';
 var styles = {
   root: "_vchhusvi _r06hglyw _19itglyw _80omtlke",
-  disabled: "_80om13gf",
-  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+  disabled: "_80om13gf"
 };
 
 /**
@@ -49,7 +50,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -58,9 +59,10 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
-    className: ax([styles.root, styles.focusRing, isDisabled && styles.disabled, xcss])
+  return /*#__PURE__*/React.createElement(Focusable
+  // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
+  , _extends({
+    as: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style
@@ -69,8 +71,11 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // eslint-disable-next-line react/button-has-type
     type: type,
     onClick: onClick,
-    disabled: isDisabled,
-    "data-testid": testId,
+    disabled: isDisabled
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    ,
+    xcss: cx(styles.root, isDisabled && styles.disabled, xcss),
+    testId: testId,
     ref: ref
   }), children);
 });

package/dist/esm/compiled/index.js

@@ -7,7 +7,7 @@ export { default as Bleed } from './components/bleed';
 export { default as Text } from './components/text';
 export { default as Pressable } from './components/pressable';
 export { default as Anchor } from './components/anchor';
-export { media } from './responsive';
-
+export { media, UNSAFE_useMediaQuery } from './responsive';
+export { default as Focusable } from './components/focusable';
 // TODO: This is still not figured out from before…
 export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';

package/dist/esm/components/anchor.js

@@ -94,7 +94,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/pressable.js

@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "13.2.0",
+    packageVersion: "13.3.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

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

@@ -0,0 +1,36 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactElement, type ReactNode } from 'react';
+import type { BasePrimitiveProps, StyleProp } from '../components/types';
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, 'button' | 'a'>;
+type CustomElement<P = any> = {
+    [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[AllowedElements];
+export type FocusableProps<T extends CustomElement> = Omit<ComponentPropsWithoutRef<T>, keyof BaseFocusableProps<T> | 'className' | 'style'> & BasePrimitiveProps & StyleProp & BaseFocusableProps<T>;
+type BaseFocusableProps<T extends CustomElement> = {
+    /**
+     * The DOM element to render as the Focusable element.
+     * @default 'button'
+     */
+    as?: T;
+    children?: ReactNode;
+    /**
+     * Controls whether the focus ring should be applied around or within the composed element.
+     */
+    isInset?: boolean;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+type FocusableComponent = <T extends CustomElement>(props: FocusableProps<T>) => ReactElement;
+/**
+ * __Focus ring__
+ *
+ * A focus ring visually indicates the currently focused item.
+ *
+ */
+declare const Focusable: FocusableComponent;
+export default Focusable;

package/dist/types/compiled/index.d.ts

@@ -7,6 +7,8 @@ export { default as Bleed, type BleedProps } from './components/bleed';
 export { default as Text, type TextProps } from './components/text';
 export { default as Pressable, type PressableProps } from './components/pressable';
 export { default as Anchor, type AnchorProps } from './components/anchor';
-export { media, type Breakpoint, type MediaQuery } from './responsive';
+export { media, type Breakpoint, type MediaQuery, UNSAFE_useMediaQuery } from './responsive';
+export { default as Focusable } from './components/focusable';
+export type { FocusableProps } from './components/focusable';
 export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
 export type { BackgroundColorToken as BackgroundColor, PositiveSpaceToken as Space, TextColor, } from './components/types';

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

@@ -0,0 +1,36 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactElement, type ReactNode } from 'react';
+import type { BasePrimitiveProps, StyleProp } from '../components/types';
+type AllowedElements = Exclude<keyof JSX.IntrinsicElements, 'button' | 'a'>;
+type CustomElement<P = any> = {
+    [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[AllowedElements];
+export type FocusableProps<T extends CustomElement> = Omit<ComponentPropsWithoutRef<T>, keyof BaseFocusableProps<T> | 'className' | 'style'> & BasePrimitiveProps & StyleProp & BaseFocusableProps<T>;
+type BaseFocusableProps<T extends CustomElement> = {
+    /**
+     * The DOM element to render as the Focusable element.
+     * @default 'button'
+     */
+    as?: T;
+    children?: ReactNode;
+    /**
+     * Controls whether the focus ring should be applied around or within the composed element.
+     */
+    isInset?: boolean;
+    /**
+     * Forwarded ref.
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+type FocusableComponent = <T extends CustomElement>(props: FocusableProps<T>) => ReactElement;
+/**
+ * __Focus ring__
+ *
+ * A focus ring visually indicates the currently focused item.
+ *
+ */
+declare const Focusable: FocusableComponent;
+export default Focusable;

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

@@ -7,6 +7,8 @@ export { default as Bleed, type BleedProps } from './components/bleed';
 export { default as Text, type TextProps } from './components/text';
 export { default as Pressable, type PressableProps } from './components/pressable';
 export { default as Anchor, type AnchorProps } from './components/anchor';
-export { media, type Breakpoint, type MediaQuery } from './responsive';
+export { media, type Breakpoint, type MediaQuery, UNSAFE_useMediaQuery } from './responsive';
+export { default as Focusable } from './components/focusable';
+export type { FocusableProps } from './components/focusable';
 export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
 export type { BackgroundColorToken as BackgroundColor, PositiveSpaceToken as Space, TextColor, } from './components/types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "13.2.0",
+	"version": "13.3.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -19,8 +19,8 @@
 	"atlassian": {
 		"team": "Design System Team",
 		"website": {
-			"category": "Primitives",
 			"name": "Primitives",
+			"category": "Primitives",
 			"status": {
 				"type": "beta"
 			},
@@ -126,11 +126,11 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/app-provider": "^1.4.0",
-		"@atlaskit/css": "^0.6.0",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/css": "^0.7.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/interaction-context": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.1",
@@ -145,6 +145,7 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/formatting": "*",
+		"@af/visual-regression": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tooltip": "^18.9.0",