@atlaskit/media-test-helpers 34.1.1 → 34.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-test-helpers
 
+## 34.2.0
+
+### Minor Changes
+
+- [#138969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138969)
+  [`a4b5df20bef88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a4b5df20bef88) -
+  Replace hardcoded spacing values with design system tokens
+
 ## 34.1.1
 
 ### Patch Changes

package/dist/cjs/I18nWrapper.js

@@ -12,8 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _LocaleSelect = _interopRequireWildcard(require("@atlaskit/locale/LocaleSelect"));
 var _locales = require("@atlaskit/media-ui/locales");
+var _primitives = require("@atlaskit/primitives");
 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 && Object.prototype.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 _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 getMessages(localeValue) {
   var lang = localeValue.substring(0, 2);
   var langWithRegion = localeValue.replace('-', '_');
@@ -36,11 +37,8 @@ var I18NWrapper = exports.I18NWrapper = function I18NWrapper(_ref) {
     setLocale = _useState2[1];
   var lang = locale.value.substring(0, 2);
   var messages = getMessages(locale.value);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginBottom: 10,
-      marginTop: 10
-    }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: localeBoxStyles
   }, /*#__PURE__*/_react.default.createElement(_LocaleSelect.default, {
     onLocaleChange: setLocale,
     locales: selectableLocales
@@ -52,4 +50,8 @@ var I18NWrapper = exports.I18NWrapper = function I18NWrapper(_ref) {
     ,
     key: locale.value
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children)));
-};
+};
+var localeBoxStyles = (0, _primitives.xcss)({
+  marginBottom: 'space.150',
+  marginTop: 'space.150'
+});

package/dist/cjs/MockGlobalImage.js

@@ -11,7 +11,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var globalImage = globalThis.Image;
 var isErrorInsteadOfLoad;

package/dist/cjs/clipboardEventMocks.js

@@ -12,7 +12,7 @@ var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/w
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // this isn't implemented by JSDOM so we've implemented it to make Typescript happy
 // see https://github.com/tmpvar/jsdom/issues/1568

package/dist/cjs/docs-content-tabs.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = require("@emotion/react");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 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 && Object.prototype.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 _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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/dist/cjs/featureFlagsWrapper/dropdown.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _primitives = require("@atlaskit/primitives");
 var _react = _interopRequireWildcard(require("react"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _helpers = require("./helpers");
@@ -21,7 +22,7 @@ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _checkbox = require("@atlaskit/checkbox");
 var _mediaCommon = require("@atlaskit/media-common");
 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 && Object.prototype.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 _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; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var camelCaseToSentenceCase = function camelCaseToSentenceCase(text) {
@@ -35,19 +36,11 @@ var Container = _styled.default.div({
   flexDirection: 'row',
   margin: "var(--ds-space-250, 20px)".concat(" auto")
 });
-var ItemWrapper = function ItemWrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: "10px ".concat("var(--ds-space-250, 20px)")
-    }
-  }, children);
-};
-var CheckboxItem = function CheckboxItem(_ref2) {
-  var name = _ref2.name,
-    initialValue = _ref2.initialValue,
-    _onChange = _ref2.onChange;
-  return /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+var CheckboxItem = function CheckboxItem(_ref) {
+  var name = _ref.name,
+    initialValue = _ref.initialValue,
+    _onChange = _ref.onChange;
+  return /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
     defaultChecked: initialValue,
     label: camelCaseToSentenceCase(name),
     onChange: function onChange() {
@@ -56,19 +49,19 @@ var CheckboxItem = function CheckboxItem(_ref2) {
       _onChange();
     },
     name: "media-feature-flag-check-".concat(name)
-  }));
+  });
 };
-var TextFieldItem = function TextFieldItem(_ref3) {
-  var name = _ref3.name,
-    value = _ref3.value,
-    isNumber = _ref3.isNumber,
-    onChange = _ref3.onChange;
+var TextFieldItem = function TextFieldItem(_ref2) {
+  var name = _ref2.name,
+    value = _ref2.value,
+    isNumber = _ref2.isNumber,
+    onChange = _ref2.onChange;
   var fieldChanged = (0, _mediaCommon.debounce)(function (newValue) {
     var formattedValue = isNumber ? isNaN(Number(newValue)) ? 0 : Number(newValue) : newValue;
     (0, _helpers.setLocalFeatureFlag)(name, formattedValue);
     onChange();
   }, 500);
-  return /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement("label", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "media-feature-flag-text-".concat(name)
   }, camelCaseToSentenceCase(name), ":"), /*#__PURE__*/_react.default.createElement(_textfield.default, {
     name: "media-feature-flag-text-".concat(name),
@@ -79,21 +72,18 @@ var TextFieldItem = function TextFieldItem(_ref3) {
     type: isNumber ? 'number' : 'text'
   }));
 };
-var FeatureFlagItems = function FeatureFlagItems(_ref4) {
-  var onUpdate = _ref4.onUpdate;
+var FeatureFlagItems = function FeatureFlagItems(_ref3) {
+  var onUpdate = _ref3.onUpdate;
   var flagItems = Object.entries((0, _helpers.getMediaFeatureFlags)());
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    _react.default.createElement("div", {
-      style: {
-        maxHeight: '200px',
-        padding: '10px 0'
-      }
-    }, flagItems.length > 0 ? flagItems.map(function (_ref5) {
-      var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        key = _ref6[0],
-        currentValue = _ref6[1];
+    _react.default.createElement(_primitives.Stack, {
+      xcss: featureFlagItemStyles
+    }, flagItems.length > 0 ? flagItems.map(function (_ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        key = _ref5[0],
+        currentValue = _ref5[1];
       var name = key;
       var ffType = (0, _typeof2.default)(currentValue);
       var isNumber = ffType === 'number';
@@ -115,11 +105,16 @@ var FeatureFlagItems = function FeatureFlagItems(_ref4) {
             isNumber: isNumber
           });
       }
-    }) : /*#__PURE__*/_react.default.createElement(ItemWrapper, null, "No flags available"))
+    }) : /*#__PURE__*/_react.default.createElement("div", null, "No flags available"))
   );
 };
-var MediaFeatureFlagsDropdown = function MediaFeatureFlagsDropdown(_ref7) {
-  var onFlagChanged = _ref7.onFlagChanged;
+var featureFlagItemStyles = (0, _primitives.xcss)({
+  maxHeight: '200px',
+  gap: 'space.100',
+  padding: 'space.150'
+});
+var MediaFeatureFlagsDropdown = function MediaFeatureFlagsDropdown(_ref6) {
+  var onFlagChanged = _ref6.onFlagChanged;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],

package/dist/cjs/featureFlagsWrapper/index.js

@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _dropdown = _interopRequireDefault(require("./dropdown"));
 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 && Object.prototype.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 _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 isLocalStorageSupported = function isLocalStorageSupported() {
   try {
     if (typeof window !== 'undefined' && !!window.localStorage) {

package/dist/cjs/fileReader.js

@@ -13,7 +13,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _getJest = _interopRequireDefault(require("./getJest"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var jestHelper = (0, _getJest.default)();
 var MockFileReader = /*#__PURE__*/(0, _createClass2.default)(function MockFileReader() {

package/dist/cjs/fileStateFactory/factory/factory.js

@@ -22,7 +22,7 @@ var _helpers = require("./helpers");
 var _nextTick = require("../../nextTick");
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var MediaClientMock = exports.MediaClientMock = /*#__PURE__*/function (_MediaClient) {
   (0, _inherits2.default)(MediaClientMock, _MediaClient);

package/dist/cjs/keyboardEventWithKeyCode.js

@@ -13,8 +13,8 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var exenv = _interopRequireWildcard(require("exenv"));
 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 && Object.prototype.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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+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 _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var FakeKeyboardEvent = /*#__PURE__*/(0, _createClass2.default)(function FakeKeyboardEvent(_, __) {
   (0, _classCallCheck2.default)(this, FakeKeyboardEvent);

package/dist/cjs/mockData/handlers/copyWithToken.js

@@ -11,7 +11,7 @@ var _ = require("..");
 var uuid = _interopRequireWildcard(require("uuid"));
 var _staticCommon = require("../staticCommon");
 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 && Object.prototype.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 _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 copyWithToken = exports.copyWithToken = function copyWithToken(context) {
   return function (req, res) {
     var data = context().userContext.collection.map(function (item) {

package/dist/cjs/mocks/database/collection-item.js

@@ -11,7 +11,7 @@ var uuid = _interopRequireWildcard(require("uuid"));
 var _mockData = require("../../utils/mockData");
 var _utils = require("../../utils");
 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 && Object.prototype.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 _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 isMediaItemDetails = exports.isMediaItemDetails = function isMediaItemDetails(mediaCollectionItem) {
   return !!mediaCollectionItem['mediaType'] && !!mediaCollectionItem['mimeType'] && !!mediaCollectionItem['processingStatus'];
 };

package/dist/cjs/mocks/database/upload.js

@@ -8,7 +8,7 @@ exports.createUpload = createUpload;
 var uuid = _interopRequireWildcard(require("uuid"));
 var _mockData = require("../../utils/mockData");
 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 && Object.prototype.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 _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 createUpload() {
   return {
     id: uuid.v4(),

package/dist/cjs/mocks/fileAndDirectoriesUtils.js

@@ -90,17 +90,9 @@ var createFileSystemFileEntry = exports.createFileSystemFileEntry = function cre
     isFile: true,
     name: name,
     fullPath: fullPath,
-    file: function (_file) {
-      function file(_x) {
-        return _file.apply(this, arguments);
-      }
-      file.toString = function () {
-        return _file.toString();
-      };
-      return file;
-    }(function (resolve) {
+    file: function file(resolve) {
       return resolve(imageFile);
-    })
+    }
   };
 };
 var createFileSystemDirectoryEntry = exports.createFileSystemDirectoryEntry = function createFileSystemDirectoryEntry(name, fullPath, fileEntries) {

package/dist/cjs/mocks/media-mock.js

@@ -23,7 +23,7 @@ var _util = require("@atlaskit/media-ui/util");
 var _smallImageURI = require("../dataURIs/smallImageURI");
 var _fileAndDirectoriesUtils = require("./fileAndDirectoriesUtils");
 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 && Object.prototype.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 _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 blob = (0, _util.dataURItoFile)(_smallImageURI.smallImage);
 var imageFile = new File([blob], 'image.png', {
   type: 'image/png'

package/dist/cjs/mocks/routers/api-router.js

@@ -27,7 +27,7 @@ var _mockData = require("../../utils/mockData");
 var _utils = require("../../utils");
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-line no-console
 var RouterWithLogging = /*#__PURE__*/function (_Router) {
   (0, _inherits2.default)(RouterWithLogging, _Router);

package/dist/cjs/story-list.js

@@ -13,28 +13,27 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireWildcard(require("react"));
 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 && Object.prototype.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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+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 _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // Simple component which wraps stories and creates a styled list out of it
 var styles = {
   column: {
     statesWrapper: {
       listStyle: 'none',
-      padding: '10px',
-      margin: '10px',
-      borderRadius: '3px',
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)",
+      borderRadius: "var(--ds-border-radius, 4px)",
       display: 'inline-block'
     },
     stateItem: {
-      // TODO: From AK2 migration – TypeScript error, doesn't make sense
       flexDirection: 'column',
-      borderRadius: '3px',
-      padding: '10px',
-      margin: '10px'
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)"
     },
     stateTitle: {
       borderBottom: "1px solid ".concat("var(--ds-border, #ccc)"),
-      marginBottom: '7px',
+      marginBottom: "var(--ds-space-100, 8px)",
       color: "var(--ds-text, #606369)",
       width: '100%',
       textTransform: 'capitalize'
@@ -43,21 +42,20 @@ var styles = {
   row: {
     statesWrapper: {
       listStyle: 'none',
-      padding: '10px',
-      margin: '10px',
-      borderRadius: '3px'
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)",
+      borderRadius: "var(--ds-border-radius, 4px)"
     },
     stateItem: {
       display: 'inline-flex',
-      // TODO: From AK2 migration – TypeScript error, doesn't make sense
       flexDirection: 'column',
-      borderRadius: '3px',
-      padding: '10px',
-      margin: '10px'
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)"
     },
     stateTitle: {
       borderBottom: "1px solid ".concat("var(--ds-border, #ccc)"),
-      marginBottom: '7px',
+      marginBottom: "var(--ds-space-100, 8px)",
       color: "var(--ds-text, #606369)",
       width: '100%',
       textTransform: 'capitalize'

package/dist/cjs/story-styles.js

@@ -15,15 +15,14 @@ var Matrix = exports.Matrix = _styled.default.table({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     td: {
       textAlign: 'center',
-      fontWeight: 'bold',
-      fontSize: '20px'
+      font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   tbody: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     td: {
-      padding: '25px 10px'
+      padding: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-150, 12px)")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -33,8 +32,7 @@ var Matrix = exports.Matrix = _styled.default.table({
     verticalAlign: 'middle',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&:first-child': {
-      fontWeight: 'bold',
-      fontSize: '20px'
+      font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {

package/dist/cjs/utils/index.js

@@ -8,7 +8,7 @@ exports.getWsUrl = getWsUrl;
 exports.mapDataUriToBlob = mapDataUriToBlob;
 var url = _interopRequireWildcard(require("url"));
 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 && Object.prototype.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 _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 mapDataUriToBlob(dataUri) {
   var arr = dataUri.split(',');
   var mime = arr[0].match(/:(.*?);/)[1];

package/dist/es2019/I18nWrapper.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { IntlProvider } from 'react-intl-next';
 import LocaleSelect, { defaultLocales } from '@atlaskit/locale/LocaleSelect';
 import { locales } from '@atlaskit/media-ui/locales';
+import { Box, xcss } from '@atlaskit/primitives';
 function getMessages(localeValue) {
   const lang = localeValue.substring(0, 2);
   const langWithRegion = localeValue.replace('-', '_');
@@ -22,11 +23,8 @@ export const I18NWrapper = ({
   });
   const lang = locale.value.substring(0, 2);
   const messages = getMessages(locale.value);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: 10,
-      marginTop: 10
-    }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: localeBoxStyles
   }, /*#__PURE__*/React.createElement(LocaleSelect, {
     onLocaleChange: setLocale,
     locales: selectableLocales
@@ -38,4 +36,8 @@ export const I18NWrapper = ({
     ,
     key: locale.value
   }, /*#__PURE__*/React.createElement(React.Fragment, null, children)));
-};
+};
+const localeBoxStyles = xcss({
+  marginBottom: 'space.150',
+  marginTop: 'space.150'
+});

package/dist/es2019/featureFlagsWrapper/dropdown.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import { Stack, xcss } from '@atlaskit/primitives';
 import React, { useState } from 'react';
 import Textfield from '@atlaskit/textfield';
 import { getMediaFeatureFlags, clearAllLocalFeatureFlags, setLocalFeatureFlag } from './helpers';
@@ -22,18 +23,11 @@ const Container = styled.div({
   flexDirection: 'row',
   margin: `${"var(--ds-space-250, 20px)"} auto`
 });
-const ItemWrapper = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  style: {
-    padding: `10px ${"var(--ds-space-250, 20px)"}`
-  }
-}, children);
 const CheckboxItem = ({
   name,
   initialValue,
   onChange
-}) => /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Checkbox, {
+}) => /*#__PURE__*/React.createElement(Checkbox, {
   defaultChecked: initialValue,
   label: camelCaseToSentenceCase(name),
   onChange: () => {
@@ -42,7 +36,7 @@ const CheckboxItem = ({
     onChange();
   },
   name: `media-feature-flag-check-${name}`
-}));
+});
 const TextFieldItem = ({
   name,
   value,
@@ -54,7 +48,7 @@ const TextFieldItem = ({
     setLocalFeatureFlag(name, formattedValue);
     onChange();
   }, 500);
-  return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     htmlFor: `media-feature-flag-text-${name}`
   }, camelCaseToSentenceCase(name), ":"), /*#__PURE__*/React.createElement(Textfield, {
     name: `media-feature-flag-text-${name}`,
@@ -70,11 +64,8 @@ const FeatureFlagItems = ({
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    React.createElement("div", {
-      style: {
-        maxHeight: '200px',
-        padding: '10px 0'
-      }
+    React.createElement(Stack, {
+      xcss: featureFlagItemStyles
     }, flagItems.length > 0 ? flagItems.map(([key, currentValue]) => {
       const name = key;
       const ffType = typeof currentValue;
@@ -97,9 +88,14 @@ const FeatureFlagItems = ({
             isNumber: isNumber
           });
       }
-    }) : /*#__PURE__*/React.createElement(ItemWrapper, null, "No flags available"))
+    }) : /*#__PURE__*/React.createElement("div", null, "No flags available"))
   );
 };
+const featureFlagItemStyles = xcss({
+  maxHeight: '200px',
+  gap: 'space.100',
+  padding: 'space.150'
+});
 const MediaFeatureFlagsDropdown = ({
   onFlagChanged
 }) => {

package/dist/es2019/story-list.js

@@ -5,21 +5,20 @@ const styles = {
   column: {
     statesWrapper: {
       listStyle: 'none',
-      padding: '10px',
-      margin: '10px',
-      borderRadius: '3px',
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)",
+      borderRadius: "var(--ds-border-radius, 4px)",
       display: 'inline-block'
     },
     stateItem: {
-      // TODO: From AK2 migration – TypeScript error, doesn't make sense
       flexDirection: 'column',
-      borderRadius: '3px',
-      padding: '10px',
-      margin: '10px'
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)"
     },
     stateTitle: {
       borderBottom: `1px solid ${"var(--ds-border, #ccc)"}`,
-      marginBottom: '7px',
+      marginBottom: "var(--ds-space-100, 8px)",
       color: "var(--ds-text, #606369)",
       width: '100%',
       textTransform: 'capitalize'
@@ -28,21 +27,20 @@ const styles = {
   row: {
     statesWrapper: {
       listStyle: 'none',
-      padding: '10px',
-      margin: '10px',
-      borderRadius: '3px'
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)",
+      borderRadius: "var(--ds-border-radius, 4px)"
     },
     stateItem: {
       display: 'inline-flex',
-      // TODO: From AK2 migration – TypeScript error, doesn't make sense
       flexDirection: 'column',
-      borderRadius: '3px',
-      padding: '10px',
-      margin: '10px'
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)"
     },
     stateTitle: {
       borderBottom: `1px solid ${"var(--ds-border, #ccc)"}`,
-      marginBottom: '7px',
+      marginBottom: "var(--ds-space-100, 8px)",
       color: "var(--ds-text, #606369)",
       width: '100%',
       textTransform: 'capitalize'

package/dist/es2019/story-styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Matrix = styled.table({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -8,15 +7,14 @@ export const Matrix = styled.table({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     td: {
       textAlign: 'center',
-      fontWeight: 'bold',
-      fontSize: '20px'
+      font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   tbody: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     td: {
-      padding: '25px 10px'
+      padding: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-150, 12px)"}`
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -26,8 +24,7 @@ export const Matrix = styled.table({
     verticalAlign: 'middle',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&:first-child': {
-      fontWeight: 'bold',
-      fontSize: '20px'
+      font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {

package/dist/esm/I18nWrapper.js

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { IntlProvider } from 'react-intl-next';
 import LocaleSelect, { defaultLocales } from '@atlaskit/locale/LocaleSelect';
 import { locales } from '@atlaskit/media-ui/locales';
+import { Box, xcss } from '@atlaskit/primitives';
 function getMessages(localeValue) {
   var lang = localeValue.substring(0, 2);
   var langWithRegion = localeValue.replace('-', '_');
@@ -26,11 +27,8 @@ export var I18NWrapper = function I18NWrapper(_ref) {
     setLocale = _useState2[1];
   var lang = locale.value.substring(0, 2);
   var messages = getMessages(locale.value);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: 10,
-      marginTop: 10
-    }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: localeBoxStyles
   }, /*#__PURE__*/React.createElement(LocaleSelect, {
     onLocaleChange: setLocale,
     locales: selectableLocales
@@ -42,4 +40,8 @@ export var I18NWrapper = function I18NWrapper(_ref) {
     ,
     key: locale.value
   }, /*#__PURE__*/React.createElement(React.Fragment, null, children)));
-};
+};
+var localeBoxStyles = xcss({
+  marginBottom: 'space.150',
+  marginTop: 'space.150'
+});

package/dist/esm/MockGlobalImage.js

@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var globalImage = globalThis.Image;
 var isErrorInsteadOfLoad;

package/dist/esm/clipboardEventMocks.js

@@ -5,7 +5,7 @@ import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // this isn't implemented by JSDOM so we've implemented it to make Typescript happy
 // see https://github.com/tmpvar/jsdom/issues/1568

package/dist/esm/featureFlagsWrapper/dropdown.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Stack, xcss } from '@atlaskit/primitives';
 import React, { useState } from 'react';
 import Textfield from '@atlaskit/textfield';
 import { getMediaFeatureFlags, clearAllLocalFeatureFlags, setLocalFeatureFlag } from './helpers';
@@ -24,19 +25,11 @@ var Container = styled.div({
   flexDirection: 'row',
   margin: "var(--ds-space-250, 20px)".concat(" auto")
 });
-var ItemWrapper = function ItemWrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: "10px ".concat("var(--ds-space-250, 20px)")
-    }
-  }, children);
-};
-var CheckboxItem = function CheckboxItem(_ref2) {
-  var name = _ref2.name,
-    initialValue = _ref2.initialValue,
-    _onChange = _ref2.onChange;
-  return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Checkbox, {
+var CheckboxItem = function CheckboxItem(_ref) {
+  var name = _ref.name,
+    initialValue = _ref.initialValue,
+    _onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement(Checkbox, {
     defaultChecked: initialValue,
     label: camelCaseToSentenceCase(name),
     onChange: function onChange() {
@@ -45,19 +38,19 @@ var CheckboxItem = function CheckboxItem(_ref2) {
       _onChange();
     },
     name: "media-feature-flag-check-".concat(name)
-  }));
+  });
 };
-var TextFieldItem = function TextFieldItem(_ref3) {
-  var name = _ref3.name,
-    value = _ref3.value,
-    isNumber = _ref3.isNumber,
-    onChange = _ref3.onChange;
+var TextFieldItem = function TextFieldItem(_ref2) {
+  var name = _ref2.name,
+    value = _ref2.value,
+    isNumber = _ref2.isNumber,
+    onChange = _ref2.onChange;
   var fieldChanged = debounce(function (newValue) {
     var formattedValue = isNumber ? isNaN(Number(newValue)) ? 0 : Number(newValue) : newValue;
     setLocalFeatureFlag(name, formattedValue);
     onChange();
   }, 500);
-  return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     htmlFor: "media-feature-flag-text-".concat(name)
   }, camelCaseToSentenceCase(name), ":"), /*#__PURE__*/React.createElement(Textfield, {
     name: "media-feature-flag-text-".concat(name),
@@ -68,21 +61,18 @@ var TextFieldItem = function TextFieldItem(_ref3) {
     type: isNumber ? 'number' : 'text'
   }));
 };
-var FeatureFlagItems = function FeatureFlagItems(_ref4) {
-  var onUpdate = _ref4.onUpdate;
+var FeatureFlagItems = function FeatureFlagItems(_ref3) {
+  var onUpdate = _ref3.onUpdate;
   var flagItems = Object.entries(getMediaFeatureFlags());
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    React.createElement("div", {
-      style: {
-        maxHeight: '200px',
-        padding: '10px 0'
-      }
-    }, flagItems.length > 0 ? flagItems.map(function (_ref5) {
-      var _ref6 = _slicedToArray(_ref5, 2),
-        key = _ref6[0],
-        currentValue = _ref6[1];
+    React.createElement(Stack, {
+      xcss: featureFlagItemStyles
+    }, flagItems.length > 0 ? flagItems.map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        currentValue = _ref5[1];
       var name = key;
       var ffType = _typeof(currentValue);
       var isNumber = ffType === 'number';
@@ -104,11 +94,16 @@ var FeatureFlagItems = function FeatureFlagItems(_ref4) {
             isNumber: isNumber
           });
       }
-    }) : /*#__PURE__*/React.createElement(ItemWrapper, null, "No flags available"))
+    }) : /*#__PURE__*/React.createElement("div", null, "No flags available"))
   );
 };
-var MediaFeatureFlagsDropdown = function MediaFeatureFlagsDropdown(_ref7) {
-  var onFlagChanged = _ref7.onFlagChanged;
+var featureFlagItemStyles = xcss({
+  maxHeight: '200px',
+  gap: 'space.100',
+  padding: 'space.150'
+});
+var MediaFeatureFlagsDropdown = function MediaFeatureFlagsDropdown(_ref6) {
+  var onFlagChanged = _ref6.onFlagChanged;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],

package/dist/esm/fileReader.js

@@ -5,7 +5,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import getJest from './getJest';
 var jestHelper = getJest();

package/dist/esm/fileStateFactory/factory/factory.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { tallImage } from '../../images';
 import { dataURItoBlob } from '../../mockData';

package/dist/esm/keyboardEventWithKeyCode.js

@@ -3,7 +3,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import * as exenv from 'exenv';
 var FakeKeyboardEvent = /*#__PURE__*/_createClass(function FakeKeyboardEvent(_, __) {

package/dist/esm/mocks/fileAndDirectoriesUtils.js

@@ -83,17 +83,9 @@ export var createFileSystemFileEntry = function createFileSystemFileEntry(name,
     isFile: true,
     name: name,
     fullPath: fullPath,
-    file: function (_file) {
-      function file(_x) {
-        return _file.apply(this, arguments);
-      }
-      file.toString = function () {
-        return _file.toString();
-      };
-      return file;
-    }(function (resolve) {
+    file: function file(resolve) {
       return resolve(imageFile);
-    })
+    }
   };
 };
 export var createFileSystemDirectoryEntry = function createFileSystemDirectoryEntry(name, fullPath, fileEntries) {

package/dist/esm/mocks/routers/api-router.js

@@ -10,7 +10,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // eslint-disable-line no-console
 import { Router, KakapoResponse } from 'kakapo';

package/dist/esm/story-list.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // Simple component which wraps stories and creates a styled list out of it
 import React from 'react';
@@ -12,21 +12,20 @@ var styles = {
   column: {
     statesWrapper: {
       listStyle: 'none',
-      padding: '10px',
-      margin: '10px',
-      borderRadius: '3px',
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)",
+      borderRadius: "var(--ds-border-radius, 4px)",
       display: 'inline-block'
     },
     stateItem: {
-      // TODO: From AK2 migration – TypeScript error, doesn't make sense
       flexDirection: 'column',
-      borderRadius: '3px',
-      padding: '10px',
-      margin: '10px'
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)"
     },
     stateTitle: {
       borderBottom: "1px solid ".concat("var(--ds-border, #ccc)"),
-      marginBottom: '7px',
+      marginBottom: "var(--ds-space-100, 8px)",
       color: "var(--ds-text, #606369)",
       width: '100%',
       textTransform: 'capitalize'
@@ -35,21 +34,20 @@ var styles = {
   row: {
     statesWrapper: {
       listStyle: 'none',
-      padding: '10px',
-      margin: '10px',
-      borderRadius: '3px'
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)",
+      borderRadius: "var(--ds-border-radius, 4px)"
     },
     stateItem: {
       display: 'inline-flex',
-      // TODO: From AK2 migration – TypeScript error, doesn't make sense
       flexDirection: 'column',
-      borderRadius: '3px',
-      padding: '10px',
-      margin: '10px'
+      borderRadius: "var(--ds-border-radius, 4px)",
+      padding: "var(--ds-space-100, 8px)",
+      margin: "var(--ds-space-100, 8px)"
     },
     stateTitle: {
       borderBottom: "1px solid ".concat("var(--ds-border, #ccc)"),
-      marginBottom: '7px',
+      marginBottom: "var(--ds-space-100, 8px)",
       color: "var(--ds-text, #606369)",
       width: '100%',
       textTransform: 'capitalize'

package/dist/esm/story-styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var Matrix = styled.table({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -8,15 +7,14 @@ export var Matrix = styled.table({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     td: {
       textAlign: 'center',
-      fontWeight: 'bold',
-      fontSize: '20px'
+      font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   tbody: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     td: {
-      padding: '25px 10px'
+      padding: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-150, 12px)")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -26,8 +24,7 @@ export var Matrix = styled.table({
     verticalAlign: 'middle',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&:first-child': {
-      fontWeight: 'bold',
-      fontSize: '20px'
+      font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-test-helpers",
-	"version": "34.1.1",
+	"version": "34.2.0",
 	"description": "Collection of test helpers used in media component stories and specs",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,12 +28,13 @@
 	"dependencies": {
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/checkbox": "^14.0.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/locale": "^2.8.0",
 		"@atlaskit/media-client": "^27.6.0",
 		"@atlaskit/media-common": "^11.4.0",
 		"@atlaskit/media-ui": "^25.11.0",
-		"@atlaskit/popup": "^1.24.0",
+		"@atlaskit/popup": "^1.25.0",
+		"@atlaskit/primitives": "12.1.1",
 		"@atlaskit/tabs": "^16.4.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/tokens": "^1.59.0",

package/dist/cjs/styled.js

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LocaleSelectorWrapper = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var LocaleSelectorWrapper = exports.LocaleSelectorWrapper = _styled.default.div({
-  position: 'fixed',
-  right: "var(--ds-space-250, 20px)",
-  top: "var(--ds-space-250, 20px)",
-  width: '200px',
-  border: "1px solid ".concat("var(--ds-border, #ccc)"),
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-  padding: '10px',
-  borderRadius: '3px',
-  backgroundColor: "var(--ds-surface, white)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  h2: {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-    marginBottom: '10px'
-  }
-});

package/dist/es2019/styled.js

@@ -1,19 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LocaleSelectorWrapper = styled.div({
-  position: 'fixed',
-  right: "var(--ds-space-250, 20px)",
-  top: "var(--ds-space-250, 20px)",
-  width: '200px',
-  border: `1px solid ${"var(--ds-border, #ccc)"}`,
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-  padding: '10px',
-  borderRadius: '3px',
-  backgroundColor: "var(--ds-surface, white)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  h2: {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-    marginBottom: '10px'
-  }
-});

package/dist/esm/styled.js

@@ -1,19 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var LocaleSelectorWrapper = styled.div({
-  position: 'fixed',
-  right: "var(--ds-space-250, 20px)",
-  top: "var(--ds-space-250, 20px)",
-  width: '200px',
-  border: "1px solid ".concat("var(--ds-border, #ccc)"),
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-  padding: '10px',
-  borderRadius: '3px',
-  backgroundColor: "var(--ds-surface, white)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  h2: {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-    marginBottom: '10px'
-  }
-});

package/dist/types/styled.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const LocaleSelectorWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const LocaleSelectorWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;