@atlaskit/spotlight 0.3.2 → 0.3.4

package/dist/es2019/ui/popover-target/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/primary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,11 +15,13 @@ const styles = {
  *
  */
 export const SpotlightPrimaryAction = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
   onClick,
   children,
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/es2019/ui/secondary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,11 +15,13 @@ const styles = {
  *
  */
 export const SpotlightSecondaryAction = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
   onClick,
   children,
   testId
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/es2019/ui/show-more-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/step-count/index.js

@@ -1,9 +1,10 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 const styles = {
   root: "_1ul91ris"
 };
@@ -22,5 +23,5 @@ export const SpotlightStepCount = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, " ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

package/dist/esm/controllers/context.js

@@ -1,8 +1,8 @@
-/* context.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* context.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { createContext, useState } from 'react';
+import { createContext, useId, useState } from 'react';
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 
@@ -11,20 +11,35 @@ export var SpotlightContext = /*#__PURE__*/createContext({
   placement: 'bottom-end',
   setPlacement: function setPlacement() {
     return undefined;
+  },
+  heading: {
+    id: '',
+    setId: function setId() {
+      return undefined;
+    }
   }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var SpotlightContextProvider = function SpotlightContextProvider(_ref) {
   var children = _ref.children;
+  var id = useId();
   var _useState = useState('bottom-end'),
     _useState2 = _slicedToArray(_useState, 2),
     placement = _useState2[0],
     setPlacement = _useState2[1];
+  var _useState3 = useState("".concat(id, "-heading")),
+    _useState4 = _slicedToArray(_useState3, 2),
+    headingId = _useState4[0],
+    setHeadingId = _useState4[1];
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       placement: placement,
-      setPlacement: setPlacement
+      setPlacement: setPlacement,
+      heading: {
+        id: headingId,
+        setId: setHeadingId
+      }
     }
   }, children);
 };

package/dist/esm/ui/actions/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/body/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/card/caret/index.compiled.css

@@ -1,10 +1,11 @@
 ._1bsbo7ao{width:15px}
-._1eint94y{border-end-end-radius:1px}
 ._1pby1fw0{z-index:700}
-._1s1gt94y{border-start-start-radius:1px}
 ._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
-._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._kqswh2mm{position:relative}
+._mkrzmhja{clip-path:polygon(0 0,100% 100%,0 100%)}
+._t9ec1hke{transform:rotate(135deg)}
+._t9ec71a3{transform:rotate(315deg)}
+._t9ecebzf{transform:rotate(225deg)}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/esm/ui/card/caret/index.js

@@ -1,21 +1,21 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 var styles = {
-  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1eint94y",
-  'top-center': "_1eint94y",
-  'top-end': "_1eint94y",
-  'bottom-start': "_1s1gt94y",
-  'bottom-center': "_1s1gt94y",
-  'bottom-end': "_1s1gt94y",
-  'right-start': "_1yxnt94y",
-  'right-end': "_1yxnt94y",
-  'left-start': "_5fbct94y",
-  'left-end': "_5fbct94y"
+  root: "_bfhkcdhy _1yxnt94y _mkrzmhja _4t3io7ao _kqswh2mm _1bsbo7ao _1pby1fw0",
+  'top-start': "_t9ec71a3",
+  'top-center': "_t9ec71a3",
+  'top-end': "_t9ec71a3",
+  'bottom-start': "_t9ec1hke",
+  'bottom-center': "_t9ec1hke",
+  'bottom-end': "_t9ec1hke",
+  'right-start': "_t9ecjyd4",
+  'right-end': "_t9ecjyd4",
+  'left-start': "_t9ecebzf",
+  'left-end': "_t9ecebzf"
 };
 /**
  * __Caret__

package/dist/esm/ui/card/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/controls/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/dismiss-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,13 +15,19 @@ var styles = {
  *
  */
 export var SpotlightDismissControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    onClick = _ref.onClick,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(Pressable, {
-    xcss: styles.root,
+  return /*#__PURE__*/React.createElement(Pressable
+  // eslint-disable-next-line jsx-a11y/no-autofocus -- VERIFIED: autoFocus moving to first focusable element on non-modal modal dialog.
+  , {
+    autoFocus: autoFocus,
     onClick: onClick,
     ref: ref,
-    testId: testId
+    testId: testId,
+    xcss: styles.root,
+    "aria-label": "Dismiss"
   }, /*#__PURE__*/React.createElement(CrossIcon, {
     label: "Close"
   }));

package/dist/esm/ui/footer/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/header/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/headline/index.js

@@ -1,8 +1,9 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import Heading from '@atlaskit/heading';
+import { SpotlightContext } from '../../controllers/context';
 /**
  * __SpotlightHeadline__
  *
@@ -12,7 +13,10 @@ import Heading from '@atlaskit/heading';
 export var SpotlightHeadline = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     testId = _ref.testId;
+  var _useContext = useContext(SpotlightContext),
+    heading = _useContext.heading;
   return /*#__PURE__*/React.createElement(Heading, {
+    id: heading.id,
     ref: ref,
     testId: testId,
     size: "xsmall"

package/dist/esm/ui/media/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/popover-content/index.compiled.css

@@ -1,5 +1 @@
-._1pby1fw0{z-index:700}
-._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
-._lcxv1wug{pointer-events:auto}
-._lcxvglyw{pointer-events:none}
+._1pby1fw0{z-index:700}

package/dist/esm/ui/popover-content/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -8,10 +8,6 @@ import { SpotlightContext } from '../../controllers/context';
 var styles = {
   root: "_1pby1fw0"
 };
-var visibilityStyles = {
-  visible: "_lcxv1wug _3um0ewfl",
-  hidden: "_lcxvglyw _3um015vq"
-};
 
 /**
  * The `transform: rotate(45deg);` styles used to rotate the `Caret` component result in the corners of
@@ -50,10 +46,11 @@ export var PopoverContent = function PopoverContent(_ref) {
   var children = _ref.children,
     placement = _ref.placement,
     _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    testId = _ref.testId;
   var _useContext = useContext(SpotlightContext),
-    setPlacement = _useContext.setPlacement;
-  var visibility = isVisible ? 'visible' : 'hidden';
+    setPlacement = _useContext.setPlacement,
+    heading = _useContext.heading;
   useEffect(function () {
     setPlacement(placement);
   }, [placement, setPlacement]);
@@ -63,10 +60,18 @@ export var PopoverContent = function PopoverContent(_ref) {
   }, function (_ref2) {
     var ref = _ref2.ref,
       style = _ref2.style;
+    if (!isVisible) {
+      return;
+    }
     return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+      role: "dialog",
+      "data-testid": testId,
+      "aria-labelledby": heading.id,
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
       style: style,
-      className: ax([styles.root, visibilityStyles[visibility]])
+      className: ax([styles.root])
     }, children);
   });
 };

package/dist/esm/ui/popover-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Manager } from '@atlaskit/popper';

package/dist/esm/ui/popover-target/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/primary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,10 +15,12 @@ var styles = {
  *
  */
 export var SpotlightPrimaryAction = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/esm/ui/secondary-action/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -15,10 +15,12 @@ var styles = {
  *
  */
 export var SpotlightSecondaryAction = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick,
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Pressable, {
+    "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,

package/dist/esm/ui/show-more-control/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/step-count/index.js

@@ -1,9 +1,10 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 var styles = {
   root: "_1ul91ris"
 };
@@ -21,5 +22,5 @@ export var SpotlightStepCount = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Text, {
     ref: ref,
     testId: testId
-  }, children));
+  }, children, " ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "steps")));
 });

package/dist/types/controllers/context.d.ts

@@ -7,6 +7,10 @@ import type { Placement } from '../types';
 interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
+    heading: {
+        id: string;
+        setId: Dispatch<SetStateAction<string>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

package/dist/types/ui/dismiss-control/index.d.ts

@@ -10,6 +10,14 @@ export interface SpotlightDismissControlProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * @default true
+     *
+     * Specifies whether the dismiss button should be focused when the spotlight is rendered.
+     * For spotlights that are triggered by user-action, this should be `true`. In the event that
+     * a spotlight is rendered on pageload, without explicit user interaction, this should be `false`.
+     */
+    autoFocus?: boolean;
 }
 /**
  * __SpotlightDismissControl__

package/dist/types/ui/popover-content/index.d.ts

@@ -5,6 +5,12 @@
 import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
 interface PopoverContentProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
     placement: Placement;
     isVisible?: boolean;
     children: ReactNode;
@@ -14,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId, }: PopoverContentProps) => JSX.Element;
 export {};

package/dist/types/ui/primary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightPrimaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight primary action__

package/dist/types/ui/secondary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightSecondaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight secondary action__

package/dist/types-ts4.5/controllers/context.d.ts

@@ -7,6 +7,10 @@ import type { Placement } from '../types';
 interface SpotlightContextType {
     placement: Placement;
     setPlacement: Dispatch<SetStateAction<Placement>>;
+    heading: {
+        id: string;
+        setId: Dispatch<SetStateAction<string>>;
+    };
 }
 export declare const SpotlightContext: import("react").Context<SpotlightContextType>;
 export declare const SpotlightContextProvider: ({ children }: {

package/dist/types-ts4.5/ui/dismiss-control/index.d.ts

@@ -10,6 +10,14 @@ export interface SpotlightDismissControlProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * @default true
+     *
+     * Specifies whether the dismiss button should be focused when the spotlight is rendered.
+     * For spotlights that are triggered by user-action, this should be `true`. In the event that
+     * a spotlight is rendered on pageload, without explicit user interaction, this should be `false`.
+     */
+    autoFocus?: boolean;
 }
 /**
  * __SpotlightDismissControl__

package/dist/types-ts4.5/ui/popover-content/index.d.ts

@@ -5,6 +5,12 @@
 import { type ReactNode } from 'react';
 import type { Placement } from '../../types';
 interface PopoverContentProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
     placement: Placement;
     isVisible?: boolean;
     children: ReactNode;
@@ -14,5 +20,5 @@ interface PopoverContentProps {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-export declare const PopoverContent: ({ children, placement, isVisible }: PopoverContentProps) => JSX.Element;
+export declare const PopoverContent: ({ children, placement, isVisible, testId, }: PopoverContentProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/primary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightPrimaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight primary action__

package/dist/types-ts4.5/ui/secondary-action/index.d.ts

@@ -19,6 +19,10 @@ export interface SpotlightSecondaryActionProps {
      * The action to take when the button is clicked.
      */
     onClick?: PressableProps['onClick'];
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide anough context.
+     */
+    'aria-label'?: string;
 }
 /**
  * __Spotlight secondary action__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.3.2",
+	"version": "0.3.4",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,11 +29,12 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/tokens": "^6.3.0",
+		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},