@atlaskit/media-viewer 48.3.2 → 48.3.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/media-viewer
 
+## 48.3.3
+
+### Patch Changes
+
+- [#78097](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78097) [`85166d42ab97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85166d42ab97) - Update PDF password form UI styling and messages
+- Updated dependencies
+
 ## 48.3.2
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _mediaCommon = require("@atlaskit/media-common");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "48.3.2";
+var packageVersion = exports.packageVersion = "48.3.3";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 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 packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.3.2";
+var packageVersion = "48.3.3";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/viewers/doc/pdfPasswordInput.js

@@ -8,21 +8,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.PDFPasswordInput = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _primitives = require("@atlaskit/primitives");
+var _react2 = require("@emotion/react");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**@jsx jsx */
+
+var COLOR_SHADE = '#b6c2cf';
+var headingStyle = (0, _react2.css)({
+  fontSize: '14px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: COLOR_SHADE
+});
+var errorMessageWrapperStyle = (0, _react2.css)({
+  marginTop: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#FD9891',
+  fontSize: '12px',
+  display: 'flex'
+});
+var errorMessageStyle = (0, _react2.css)({
+  marginTop: '0px',
+  marginLeft: "var(--ds-space-050, 4px)"
+});
 var headerStyles = (0, _primitives.xcss)({
   textAlign: 'center',
-  marginTop: 'space.300',
-  marginBottom: 'space.100'
+  marginTop: 'space.200',
+  marginBottom: 'space.200'
 });
 var inputStyle = (0, _primitives.xcss)({
   width: '330px'
@@ -54,47 +74,54 @@ var PDFPasswordInput = exports.PDFPasswordInput = function PDFPasswordInput(_ref
       (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 || _passwordInputRef$cur.focus();
     }
   }, [hasPasswordError]);
-  return /*#__PURE__*/_react.default.createElement(_form.default, {
+  return (0, _react2.jsx)(_form.default, {
     onSubmit: onSubmit
   }, function (_ref2) {
     var formProps = _ref2.formProps,
       submitting = _ref2.submitting;
-    return /*#__PURE__*/_react.default.createElement("form", formProps, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
-      justifyContent: "center",
-      "aria-hidden": true
-    }, /*#__PURE__*/_react.default.createElement(_lock.default, {
-      label: "forbidden-lock-icon",
+    return (0, _react2.jsx)("form", formProps, (0, _react2.jsx)(_primitives.Flex, {
+      justifyContent: "center"
+    }, (0, _react2.jsx)(_lock.default, {
+      label: "",
       size: "xlarge",
-      primaryColor: "var(--ds-text, #c7d1db)"
-    })), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      primaryColor: COLOR_SHADE
+    })), (0, _react2.jsx)(_primitives.Box, {
       xcss: headerStyles
-    }, /*#__PURE__*/_react.default.createElement(_heading.default, {
-      as: "h1",
-      level: "h200"
-    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.password_protected_pdf))), /*#__PURE__*/_react.default.createElement(_form.Field, {
+    }, (0, _react2.jsx)("h1", {
+      css: headingStyle
+    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.password_protected_pdf))), (0, _react2.jsx)(_form.Field, {
       "aria-required": true,
       name: "password",
-      label: "Password",
       isRequired: true
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;
-      return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      return (0, _react2.jsx)(_primitives.Box, {
         xcss: inputStyle
-      }, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
         type: "password",
+        "aria-label": intl.formatMessage(_mediaUi.messages.password),
         placeholder: intl.formatMessage(_mediaUi.messages.enter_password),
         ref: passwordInputRef,
         onChange: function onChange(value) {
           fieldProps.onChange(value);
           setFormError(false);
         }
-      })), formError && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.incorrect_password)));
-    }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      })), formError && (0, _react2.jsx)("div", {
+        css: errorMessageWrapperStyle,
+        id: "".concat(fieldProps.id, "-error"),
+        "aria-live": "polite"
+      }, (0, _react2.jsx)(_error.default, {
+        size: "small",
+        label: ""
+      }), (0, _react2.jsx)("p", {
+        css: errorMessageStyle
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.incorrect_password))));
+    }), (0, _react2.jsx)(_primitives.Box, {
       xcss: footerStyles
-    }, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+    }, (0, _react2.jsx)(_loadingButton.default, {
       appearance: "primary",
       type: "submit",
       isLoading: submitting
-    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.submit))));
+    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.submit))));
   });
 };

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.3.2";
+const packageVersion = "48.3.3";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.3.2";
+const packageVersion = "48.3.3";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/viewers/doc/pdfPasswordInput.js

@@ -1,17 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useRef, useState } from 'react';
+/**@jsx jsx */
+import { useEffect, useRef, useState } from 'react';
 import LoadingButton from '@atlaskit/button/loading-button';
 import TextField from '@atlaskit/textfield';
 import LockIcon from '@atlaskit/icon/glyph/lock';
-import Form, { ErrorMessage, Field } from '@atlaskit/form';
+import Form, { Field } from '@atlaskit/form';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
-import Heading from '@atlaskit/heading';
 import { xcss, Box, Flex } from '@atlaskit/primitives';
+import { jsx, css } from '@emotion/react';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+const COLOR_SHADE = '#b6c2cf';
+const headingStyle = css({
+  fontSize: '14px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: COLOR_SHADE
+});
+const errorMessageWrapperStyle = css({
+  marginTop: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#FD9891',
+  fontSize: '12px',
+  display: 'flex'
+});
+const errorMessageStyle = css({
+  marginTop: '0px',
+  marginLeft: "var(--ds-space-050, 4px)"
+});
 const headerStyles = xcss({
   textAlign: 'center',
-  marginTop: 'space.300',
-  marginBottom: 'space.100'
+  marginTop: 'space.200',
+  marginBottom: 'space.200'
 });
 const inputStyle = xcss({
   width: '330px'
@@ -41,45 +60,52 @@ export const PDFPasswordInput = ({
       (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 ? void 0 : _passwordInputRef$cur.focus();
     }
   }, [hasPasswordError]);
-  return /*#__PURE__*/React.createElement(Form, {
+  return jsx(Form, {
     onSubmit: onSubmit
   }, ({
     formProps,
     submitting
-  }) => /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "center",
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(LockIcon, {
-    label: "forbidden-lock-icon",
+  }) => jsx("form", formProps, jsx(Flex, {
+    justifyContent: "center"
+  }, jsx(LockIcon, {
+    label: "",
     size: "xlarge",
-    primaryColor: "var(--ds-text, #c7d1db)"
-  })), /*#__PURE__*/React.createElement(Box, {
+    primaryColor: COLOR_SHADE
+  })), jsx(Box, {
     xcss: headerStyles
-  }, /*#__PURE__*/React.createElement(Heading, {
-    as: "h1",
-    level: "h200"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.password_protected_pdf))), /*#__PURE__*/React.createElement(Field, {
+  }, jsx("h1", {
+    css: headingStyle
+  }, jsx(FormattedMessage, messages.password_protected_pdf))), jsx(Field, {
     "aria-required": true,
     name: "password",
-    label: "Password",
     isRequired: true
   }, ({
     fieldProps
-  }) => /*#__PURE__*/React.createElement(Box, {
+  }) => jsx(Box, {
     xcss: inputStyle
-  }, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+  }, jsx(TextField, _extends({}, fieldProps, {
     type: "password",
+    "aria-label": intl.formatMessage(messages.password),
     placeholder: intl.formatMessage(messages.enter_password),
     ref: passwordInputRef,
     onChange: value => {
       fieldProps.onChange(value);
       setFormError(false);
     }
-  })), formError && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.incorrect_password)))), /*#__PURE__*/React.createElement(Box, {
+  })), formError && jsx("div", {
+    css: errorMessageWrapperStyle,
+    id: `${fieldProps.id}-error`,
+    "aria-live": "polite"
+  }, jsx(ErrorIcon, {
+    size: "small",
+    label: ""
+  }), jsx("p", {
+    css: errorMessageStyle
+  }, jsx(FormattedMessage, messages.incorrect_password))))), jsx(Box, {
     xcss: footerStyles
-  }, /*#__PURE__*/React.createElement(LoadingButton, {
+  }, jsx(LoadingButton, {
     appearance: "primary",
     type: "submit",
     isLoading: submitting
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.submit)))));
+  }, jsx(FormattedMessage, messages.submit)))));
 };

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.3.2";
+var packageVersion = "48.3.3";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.3.2";
+var packageVersion = "48.3.3";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/viewers/doc/pdfPasswordInput.js

@@ -1,18 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useRef, useState } from 'react';
+/**@jsx jsx */
+import { useEffect, useRef, useState } from 'react';
 import LoadingButton from '@atlaskit/button/loading-button';
 import TextField from '@atlaskit/textfield';
 import LockIcon from '@atlaskit/icon/glyph/lock';
-import Form, { ErrorMessage, Field } from '@atlaskit/form';
+import Form, { Field } from '@atlaskit/form';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
-import Heading from '@atlaskit/heading';
 import { xcss, Box, Flex } from '@atlaskit/primitives';
+import { jsx, css } from '@emotion/react';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+var COLOR_SHADE = '#b6c2cf';
+var headingStyle = css({
+  fontSize: '14px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: COLOR_SHADE
+});
+var errorMessageWrapperStyle = css({
+  marginTop: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#FD9891',
+  fontSize: '12px',
+  display: 'flex'
+});
+var errorMessageStyle = css({
+  marginTop: '0px',
+  marginLeft: "var(--ds-space-050, 4px)"
+});
 var headerStyles = xcss({
   textAlign: 'center',
-  marginTop: 'space.300',
-  marginBottom: 'space.100'
+  marginTop: 'space.200',
+  marginBottom: 'space.200'
 });
 var inputStyle = xcss({
   width: '330px'
@@ -44,47 +63,54 @@ export var PDFPasswordInput = function PDFPasswordInput(_ref) {
       (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 || _passwordInputRef$cur.focus();
     }
   }, [hasPasswordError]);
-  return /*#__PURE__*/React.createElement(Form, {
+  return jsx(Form, {
     onSubmit: onSubmit
   }, function (_ref2) {
     var formProps = _ref2.formProps,
       submitting = _ref2.submitting;
-    return /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Flex, {
-      justifyContent: "center",
-      "aria-hidden": true
-    }, /*#__PURE__*/React.createElement(LockIcon, {
-      label: "forbidden-lock-icon",
+    return jsx("form", formProps, jsx(Flex, {
+      justifyContent: "center"
+    }, jsx(LockIcon, {
+      label: "",
       size: "xlarge",
-      primaryColor: "var(--ds-text, #c7d1db)"
-    })), /*#__PURE__*/React.createElement(Box, {
+      primaryColor: COLOR_SHADE
+    })), jsx(Box, {
       xcss: headerStyles
-    }, /*#__PURE__*/React.createElement(Heading, {
-      as: "h1",
-      level: "h200"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.password_protected_pdf))), /*#__PURE__*/React.createElement(Field, {
+    }, jsx("h1", {
+      css: headingStyle
+    }, jsx(FormattedMessage, messages.password_protected_pdf))), jsx(Field, {
       "aria-required": true,
       name: "password",
-      label: "Password",
       isRequired: true
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;
-      return /*#__PURE__*/React.createElement(Box, {
+      return jsx(Box, {
         xcss: inputStyle
-      }, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+      }, jsx(TextField, _extends({}, fieldProps, {
         type: "password",
+        "aria-label": intl.formatMessage(messages.password),
         placeholder: intl.formatMessage(messages.enter_password),
         ref: passwordInputRef,
         onChange: function onChange(value) {
           fieldProps.onChange(value);
           setFormError(false);
         }
-      })), formError && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.incorrect_password)));
-    }), /*#__PURE__*/React.createElement(Box, {
+      })), formError && jsx("div", {
+        css: errorMessageWrapperStyle,
+        id: "".concat(fieldProps.id, "-error"),
+        "aria-live": "polite"
+      }, jsx(ErrorIcon, {
+        size: "small",
+        label: ""
+      }), jsx("p", {
+        css: errorMessageStyle
+      }, jsx(FormattedMessage, messages.incorrect_password))));
+    }), jsx(Box, {
       xcss: footerStyles
-    }, /*#__PURE__*/React.createElement(LoadingButton, {
+    }, jsx(LoadingButton, {
       appearance: "primary",
       type: "submit",
       isLoading: submitting
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.submit))));
+    }, jsx(FormattedMessage, messages.submit))));
   });
 };

package/dist/types/viewers/doc/pdfPasswordInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { OnSubmitHandler } from '@atlaskit/form';
+import { jsx } from '@emotion/react';
 interface PDFPasswordInputProps {
     onSubmit: OnSubmitHandler<{
         password: string;
@@ -7,5 +7,5 @@ interface PDFPasswordInputProps {
     hasPasswordError?: boolean;
     onRender?: () => void;
 }
-export declare const PDFPasswordInput: ({ onSubmit, hasPasswordError, onRender, }: PDFPasswordInputProps) => JSX.Element;
+export declare const PDFPasswordInput: ({ onSubmit, hasPasswordError, onRender, }: PDFPasswordInputProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/viewers/doc/pdfPasswordInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { OnSubmitHandler } from '@atlaskit/form';
+import { jsx } from '@emotion/react';
 interface PDFPasswordInputProps {
     onSubmit: OnSubmitHandler<{
         password: string;
@@ -7,5 +7,5 @@ interface PDFPasswordInputProps {
     hasPasswordError?: boolean;
     onRender?: () => void;
 }
-export declare const PDFPasswordInput: ({ onSubmit, hasPasswordError, onRender, }: PDFPasswordInputProps) => JSX.Element;
+export declare const PDFPasswordInput: ({ onSubmit, hasPasswordError, onRender, }: PDFPasswordInputProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "48.3.2",
+  "version": "48.3.3",
   "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,13 +39,12 @@
     "@atlaskit/button": "^17.6.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/form": "^9.0.3",
-    "@atlaskit/heading": "^1.6.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",
-    "@atlaskit/media-ui": "^25.3.0",
+    "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.4",
     "@atlaskit/primitives": "^4.0.0",
     "@atlaskit/side-navigation": "^3.0.0",