@atlaskit/editor-synced-block-renderer 4.0.2 → 4.0.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 4.0.3
+
+### Patch Changes
+
+- [`dcc6a3e73f414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcc6a3e73f414) -
+  [ux] EDITOR-3304 add offline error state for sync blocks and update other error UI to match new
+  designs
+- Updated dependencies
+
 ## 4.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -4,7 +4,8 @@
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-synced-block-renderer",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",
@@ -14,8 +15,12 @@
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
 		"../src/**/test.*",
-		"../src/**/mocks/*",
-		"../src/**/examples.*"
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{
@@ -36,6 +41,9 @@
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/image/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -4,7 +4,8 @@
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__editor-synced-block-renderer/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/dist/cjs/getSyncedBlockRenderer.js

@@ -11,10 +11,12 @@ var _SyncedBlockRenderer = require("./ui/SyncedBlockRenderer");
 var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
   var syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   return function (_ref2) {
-    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData;
+    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
+      api = _ref2.api;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.SyncedBlockRenderer, {
       syncBlockRendererOptions: syncBlockRendererOptions,
-      useFetchSyncBlockData: useFetchSyncBlockData
+      useFetchSyncBlockData: useFetchSyncBlockData,
+      api: api
     });
   };
 };

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -10,6 +10,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncedBlockGenericError = require("./SyncedBlockGenericError");
 var _SyncedBlockLoadError = require("./SyncedBlockLoadError");
+var _SyncedBlockOfflineError = require("./SyncedBlockOfflineError");
 var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
@@ -20,6 +21,8 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
     sourceProduct = _ref.sourceProduct;
   var getErrorContent = (0, _react.useMemo)(function () {
     switch (error) {
+      case _editorSyncedBlockProvider.SyncBlockError.Offline:
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockOfflineError.SyncedBlockOfflineError, null);
       case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
         if (!sourceAri || !sourceProduct) {
           return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);

package/dist/cjs/ui/SyncedBlockErrorStateCard.compiled.css

@@ -1,11 +1,8 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
-._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
-._ca0qv47k{padding-top:var(--ds-space-250,20px)}
-._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
-._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -9,33 +9,20 @@ exports.SyncedBlockErrorStateCard = void 0;
 require("./SyncedBlockErrorStateCard.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/warning-outline"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
+  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
-    imageAltText = _ref.imageAltText,
-    imageSrc = _ref.imageSrc,
-    primaryMessage = _ref.primaryMessage,
-    secondaryMessage = _ref.secondaryMessage;
+    description = _ref.description;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_image.default, {
-    src: imageSrc,
-    alt: imageAltText,
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, primaryMessage && /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "xsmall"
-  }, primaryMessage), secondaryMessage && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_warningOutline.default, {
+    color: "var(--ds-icon-subtle, #505258)",
+    label: ""
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.subtle"
-  }, secondaryMessage), children));
+  }, description), children);
 };

package/dist/cjs/ui/SyncedBlockGenericError.js

@@ -8,13 +8,11 @@ exports.SyncedBlockGenericError = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
-var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 var SyncedBlockGenericError = exports.SyncedBlockGenericError = function SyncedBlockGenericError() {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    imageSrc: _ExclamationWarning.default,
-    secondaryMessage: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
+    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
   });
 };

package/dist/cjs/ui/SyncedBlockLoadError.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _messages = require("@atlaskit/editor-common/messages");
-var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var onRetry = _ref.onRetry,
@@ -17,9 +16,7 @@ var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLo
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    imageSrc: _ExclamationWarning.default,
-    imageAltText: formatMessage(_messages.syncBlockMessages.notFoundAltText),
-    secondaryMessage: formatMessage(_messages.syncBlockMessages.notFoundDescription)
+    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
   }, onRetry && /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "default",
     spacing: "compact",

package/dist/cjs/ui/SyncedBlockLoadingState.compiled.css

@@ -1,5 +1,3 @@
-._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tkevbgk{min-height:4pc}

package/dist/cjs/ui/SyncedBlockLoadingState.js

@@ -9,16 +9,23 @@ exports.SyncedBlockLoadingState = void 0;
 require("./SyncedBlockLoadingState.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var styles = {
-  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+  wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 var SyncedBlockLoadingState = exports.SyncedBlockLoadingState = function SyncedBlockLoadingState() {
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-    size: "small",
-    label: "Loading synced content"
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
+    _react.default.createElement("div", {
+      className: _syncBlock.SyncBlockSharedCssClassName.loading
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.wrapper
+    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      size: "small",
+      label: "Loading synced content"
+    })))
+  );
 };

package/dist/cjs/ui/SyncedBlockOfflineError.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockOfflineError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var SyncedBlockOfflineError = exports.SyncedBlockOfflineError = function SyncedBlockOfflineError() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: formatMessage(_messages.syncBlockMessages.offlineError)
+  });
+};

package/dist/cjs/ui/SyncedBlockPermissionDenied.compiled.css

@@ -0,0 +1,8 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

package/dist/cjs/ui/SyncedBlockPermissionDenied.js

@@ -1,3 +1,4 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockPermissionDenied = void 0;
+require("./SyncedBlockPermissionDenied.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _SyncedBlockPermissionDeniedRequestAccessMutation2 = _interopRequireDefault(require("./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql"));
 var _react = _interopRequireWildcard(require("react"));
@@ -14,12 +17,16 @@ var _reactRelay = require("react-relay");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
+var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _PermissionDenied = _interopRequireDefault(require("./assets/PermissionDenied.svg"));
-var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 var _SyncedBlockGenericError = require("./SyncedBlockGenericError");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  wrapper: "_zulppxbi _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k _1e0c1txw _1bahv2br _4cvr1h6o"
+};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -60,12 +67,20 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    imageSrc: _PermissionDenied.default,
-    imageAltText: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
-    primaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedHeading),
-    secondaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)
-  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
+    src: _PermissionDenied.default,
+    alt: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.100"
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall"
+  }, formatMessage(_messages.syncBlockMessages.permissionDeniedHeading)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtle"
+  }, formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
@@ -88,7 +103,7 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
   }, formatMessage(_messages.syncBlockMessages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(_messages.syncBlockMessages.requestAccessError))));
+  }, formatMessage(_messages.syncBlockMessages.requestAccessError)))));
 };
 var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref2) {
   var sourceAri = _ref2.sourceAri,

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncedBlockRenderer = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _AKRendererWrapper = require("./AKRendererWrapper");
 var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
@@ -13,12 +14,25 @@ var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions,
+    api = _ref.api;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     providerFactory = _useFetchSyncBlockDat.providerFactory,
     isLoading = _useFetchSyncBlockDat.isLoading,
     reloadData = _useFetchSyncBlockDat.reloadData;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (_ref2) {
+      var connectivityState = _ref2.connectivityState;
+      return {
+        isOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline'
+      };
+    }),
+    isOffline = _useSharedPluginState.isOffline;
+  if (isOffline) {
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
+      error: _editorSyncedBlockProvider.SyncBlockError.Offline
+    });
+  }
   if (!syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }

package/dist/es2019/getSyncedBlockRenderer.js

@@ -4,10 +4,12 @@ import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
 export const getSyncedBlockRenderer = ({
   syncBlockRendererOptions
 }) => ({
-  useFetchSyncBlockData
+  useFetchSyncBlockData,
+  api
 }) => {
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
     syncBlockRendererOptions: syncBlockRendererOptions,
-    useFetchSyncBlockData: useFetchSyncBlockData
+    useFetchSyncBlockData: useFetchSyncBlockData,
+    api: api
   });
 };

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -3,6 +3,7 @@ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block'
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
 import { SyncedBlockLoadError } from './SyncedBlockLoadError';
+import { SyncedBlockOfflineError } from './SyncedBlockOfflineError';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export const SyncedBlockErrorComponent = ({
   error,
@@ -13,6 +14,8 @@ export const SyncedBlockErrorComponent = ({
 }) => {
   const getErrorContent = useMemo(() => {
     switch (error) {
+      case SyncBlockError.Offline:
+        return /*#__PURE__*/React.createElement(SyncedBlockOfflineError, null);
       case SyncBlockError.Forbidden:
         if (!sourceAri || !sourceProduct) {
           return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);

package/dist/es2019/ui/SyncedBlockErrorStateCard.compiled.css

@@ -1,11 +1,8 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
-._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
-._ca0qv47k{padding-top:var(--ds-space-250,20px)}
-._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
-._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -2,34 +2,21 @@
 import "./SyncedBlockErrorStateCard.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import Heading from '@atlaskit/heading';
-import Image from '@atlaskit/image';
-import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
+import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 const styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
+  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 export const SyncedBlockErrorStateCard = ({
   children,
-  imageAltText,
-  imageSrc,
-  primaryMessage,
-  secondaryMessage
+  description
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: imageSrc,
-    alt: imageAltText,
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, primaryMessage && /*#__PURE__*/React.createElement(Heading, {
-    size: "xsmall"
-  }, primaryMessage), secondaryMessage && /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+    color: "var(--ds-icon-subtle, #505258)",
+    label: ""
+  }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, secondaryMessage), children));
+  }, description), children);
 };

package/dist/es2019/ui/SyncedBlockGenericError.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export const SyncedBlockGenericError = () => {
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    secondaryMessage: formatMessage(messages.generalErrorDescription)
+    description: formatMessage(messages.generalErrorDescription)
   });
 };

package/dist/es2019/ui/SyncedBlockLoadError.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export const SyncedBlockLoadError = ({
   onRetry,
@@ -12,9 +11,7 @@ export const SyncedBlockLoadError = ({
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    imageAltText: formatMessage(messages.notFoundAltText),
-    secondaryMessage: formatMessage(messages.notFoundDescription)
+    description: formatMessage(messages.generalErrorDescription)
   }, onRetry && /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     spacing: "compact",

package/dist/es2019/ui/SyncedBlockLoadingState.compiled.css

@@ -1,5 +1,3 @@
-._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tkevbgk{min-height:4pc}

package/dist/es2019/ui/SyncedBlockLoadingState.js

@@ -2,16 +2,23 @@
 import "./SyncedBlockLoadingState.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 const styles = {
-  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+  wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 export const SyncedBlockLoadingState = () => {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    size: "small",
-    label: "Loading synced content"
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
+    React.createElement("div", {
+      className: SyncBlockSharedCssClassName.loading
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.wrapper
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small",
+      label: "Loading synced content"
+    })))
+  );
 };

package/dist/es2019/ui/SyncedBlockOfflineError.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export const SyncedBlockOfflineError = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: formatMessage(messages.offlineError)
+  });
+};

package/dist/es2019/ui/SyncedBlockPermissionDenied.compiled.css

@@ -0,0 +1,8 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

package/dist/es2019/ui/SyncedBlockPermissionDenied.js

@@ -1,3 +1,6 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockPermissionDenied.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl-next';
@@ -5,11 +8,15 @@ import { useMutation, graphql } from 'react-relay';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
+import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
-import { Text, Flex } from '@atlaskit/primitives/compiled';
+import Image from '@atlaskit/image';
+import { Text, Flex, Stack, Box } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
-import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
+const styles = {
+  wrapper: "_zulppxbi _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k _1e0c1txw _1bahv2br _4cvr1h6o"
+};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -47,12 +54,20 @@ const SyncedBlockPermissionDeniedConfluencePage = ({
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: PermissionDenied,
-    imageAltText: formatMessage(messages.permissionDeniedAltText),
-    primaryMessage: formatMessage(messages.permissionDeniedHeading),
-    secondaryMessage: formatMessage(messages.permissionDeniedDescription)
-  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: PermissionDenied,
+    alt: formatMessage(messages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
@@ -75,7 +90,7 @@ const SyncedBlockPermissionDeniedConfluencePage = ({
   }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(messages.requestAccessError))));
+  }, formatMessage(messages.requestAccessError)))));
 };
 export const SyncedBlockPermissionDenied = ({
   sourceAri,

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -1,11 +1,13 @@
 import React, { memo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { AKRendererWrapper } from './AKRendererWrapper';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 const SyncedBlockRendererComponent = ({
   useFetchSyncBlockData,
-  syncBlockRendererOptions
+  syncBlockRendererOptions,
+  api
 }) => {
   const {
     syncBlockInstance,
@@ -13,6 +15,18 @@ const SyncedBlockRendererComponent = ({
     isLoading,
     reloadData
   } = useFetchSyncBlockData();
+  const {
+    isOffline
+  } = useSharedPluginStateWithSelector(api, ['connectivity'], ({
+    connectivityState
+  }) => ({
+    isOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline'
+  }));
+  if (isOffline) {
+    return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+      error: SyncBlockError.Offline
+    });
+  }
   if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }

package/dist/esm/getSyncedBlockRenderer.js

@@ -4,10 +4,12 @@ import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
 export var getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
   var syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   return function (_ref2) {
-    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData;
+    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
+      api = _ref2.api;
     return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
       syncBlockRendererOptions: syncBlockRendererOptions,
-      useFetchSyncBlockData: useFetchSyncBlockData
+      useFetchSyncBlockData: useFetchSyncBlockData,
+      api: api
     });
   };
 };

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -3,6 +3,7 @@ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block'
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
 import { SyncedBlockLoadError } from './SyncedBlockLoadError';
+import { SyncedBlockOfflineError } from './SyncedBlockOfflineError';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
   var error = _ref.error,
@@ -12,6 +13,8 @@ export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref)
     sourceProduct = _ref.sourceProduct;
   var getErrorContent = useMemo(function () {
     switch (error) {
+      case SyncBlockError.Offline:
+        return /*#__PURE__*/React.createElement(SyncedBlockOfflineError, null);
       case SyncBlockError.Forbidden:
         if (!sourceAri || !sourceProduct) {
           return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);

package/dist/esm/ui/SyncedBlockErrorStateCard.compiled.css

@@ -1,11 +1,8 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
-._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
-._ca0qv47k{padding-top:var(--ds-space-250,20px)}
-._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
-._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/esm/ui/SyncedBlockErrorStateCard.js

@@ -2,33 +2,20 @@
 import "./SyncedBlockErrorStateCard.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import Heading from '@atlaskit/heading';
-import Image from '@atlaskit/image';
-import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
+import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 var styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
+  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 export var SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
-    imageAltText = _ref.imageAltText,
-    imageSrc = _ref.imageSrc,
-    primaryMessage = _ref.primaryMessage,
-    secondaryMessage = _ref.secondaryMessage;
+    description = _ref.description;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: imageSrc,
-    alt: imageAltText,
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, primaryMessage && /*#__PURE__*/React.createElement(Heading, {
-    size: "xsmall"
-  }, primaryMessage), secondaryMessage && /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+    color: "var(--ds-icon-subtle, #505258)",
+    label: ""
+  }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, secondaryMessage), children));
+  }, description), children);
 };

package/dist/esm/ui/SyncedBlockGenericError.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export var SyncedBlockGenericError = function SyncedBlockGenericError() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    secondaryMessage: formatMessage(messages.generalErrorDescription)
+    description: formatMessage(messages.generalErrorDescription)
   });
 };

package/dist/esm/ui/SyncedBlockLoadError.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export var SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var onRetry = _ref.onRetry,
@@ -10,9 +9,7 @@ export var SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    imageAltText: formatMessage(messages.notFoundAltText),
-    secondaryMessage: formatMessage(messages.notFoundDescription)
+    description: formatMessage(messages.generalErrorDescription)
   }, onRetry && /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     spacing: "compact",

package/dist/esm/ui/SyncedBlockLoadingState.compiled.css

@@ -1,5 +1,3 @@
-._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tkevbgk{min-height:4pc}

package/dist/esm/ui/SyncedBlockLoadingState.js

@@ -2,16 +2,23 @@
 import "./SyncedBlockLoadingState.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 var styles = {
-  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+  wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 export var SyncedBlockLoadingState = function SyncedBlockLoadingState() {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    size: "small",
-    label: "Loading synced content"
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
+    React.createElement("div", {
+      className: SyncBlockSharedCssClassName.loading
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.wrapper
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small",
+      label: "Loading synced content"
+    })))
+  );
 };

package/dist/esm/ui/SyncedBlockOfflineError.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export var SyncedBlockOfflineError = function SyncedBlockOfflineError() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: formatMessage(messages.offlineError)
+  });
+};

package/dist/esm/ui/SyncedBlockPermissionDenied.compiled.css

@@ -0,0 +1,8 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

package/dist/esm/ui/SyncedBlockPermissionDenied.js

@@ -1,4 +1,7 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./SyncedBlockPermissionDenied.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl-next';
@@ -6,11 +9,15 @@ import { useMutation, graphql } from 'react-relay';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
+import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
-import { Text, Flex } from '@atlaskit/primitives/compiled';
+import Image from '@atlaskit/image';
+import { Text, Flex, Stack, Box } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
-import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
+var styles = {
+  wrapper: "_zulppxbi _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k _1e0c1txw _1bahv2br _4cvr1h6o"
+};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -51,12 +58,20 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: PermissionDenied,
-    imageAltText: formatMessage(messages.permissionDeniedAltText),
-    primaryMessage: formatMessage(messages.permissionDeniedHeading),
-    secondaryMessage: formatMessage(messages.permissionDeniedDescription)
-  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: PermissionDenied,
+    alt: formatMessage(messages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
@@ -79,7 +94,7 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
   }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(messages.requestAccessError))));
+  }, formatMessage(messages.requestAccessError)))));
 };
 export var SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref2) {
   var sourceAri = _ref2.sourceAri,

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -1,16 +1,30 @@
 import React, { memo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { AKRendererWrapper } from './AKRendererWrapper';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions,
+    api = _ref.api;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     providerFactory = _useFetchSyncBlockDat.providerFactory,
     isLoading = _useFetchSyncBlockDat.isLoading,
     reloadData = _useFetchSyncBlockDat.reloadData;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (_ref2) {
+      var connectivityState = _ref2.connectivityState;
+      return {
+        isOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline'
+      };
+    }),
+    isOffline = _useSharedPluginState.isOffline;
+  if (isOffline) {
+    return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+      error: SyncBlockError.Offline
+    });
+  }
   if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }

package/dist/types/getSyncedBlockRenderer.d.ts

@@ -4,5 +4,5 @@ import type { SyncedBlockRendererOptions } from './types';
 type GetSyncedBlockRendererProps = {
     syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
 };
-export declare const getSyncedBlockRenderer: ({ syncBlockRendererOptions }: GetSyncedBlockRendererProps) => ({ useFetchSyncBlockData }: SyncedBlockRendererProps) => React.JSX.Element;
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererOptions }: GetSyncedBlockRendererProps) => ({ useFetchSyncBlockData, api }: SyncedBlockRendererProps) => React.JSX.Element;
 export {};

package/dist/types/ui/SyncedBlockErrorStateCard.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
 interface SyncedBlockErrorStateCardProps {
     children?: React.ReactNode;
-    imageAltText?: string;
-    imageSrc: string;
-    primaryMessage?: string;
-    secondaryMessage?: string;
+    description: string;
 }
-export declare const SyncedBlockErrorStateCard: ({ children, imageAltText, imageSrc, primaryMessage, secondaryMessage, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export declare const SyncedBlockErrorStateCard: ({ children, description, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
 export {};

package/dist/types/ui/SyncedBlockOfflineError.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SyncedBlockOfflineError: () => React.JSX.Element;

package/dist/types/ui/SyncedBlockRenderer.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SyncedBlockPlugin } from '@atlaskit/editor-plugin-synced-block';
 import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockRendererOptions } from '../types';
 export type SyncedBlockRendererProps = {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
     useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
-export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererOptions, }: SyncedBlockRendererProps) => React.JSX.Element>;
+export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererOptions, api, }: SyncedBlockRendererProps) => React.JSX.Element>;

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

@@ -4,5 +4,5 @@ import type { SyncedBlockRendererOptions } from './types';
 type GetSyncedBlockRendererProps = {
     syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
 };
-export declare const getSyncedBlockRenderer: ({ syncBlockRendererOptions }: GetSyncedBlockRendererProps) => ({ useFetchSyncBlockData }: SyncedBlockRendererProps) => React.JSX.Element;
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererOptions }: GetSyncedBlockRendererProps) => ({ useFetchSyncBlockData, api }: SyncedBlockRendererProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/SyncedBlockErrorStateCard.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
 interface SyncedBlockErrorStateCardProps {
     children?: React.ReactNode;
-    imageAltText?: string;
-    imageSrc: string;
-    primaryMessage?: string;
-    secondaryMessage?: string;
+    description: string;
 }
-export declare const SyncedBlockErrorStateCard: ({ children, imageAltText, imageSrc, primaryMessage, secondaryMessage, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export declare const SyncedBlockErrorStateCard: ({ children, description, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/SyncedBlockOfflineError.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SyncedBlockOfflineError: () => React.JSX.Element;

package/dist/types-ts4.5/ui/SyncedBlockRenderer.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SyncedBlockPlugin } from '@atlaskit/editor-plugin-synced-block';
 import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockRendererOptions } from '../types';
 export type SyncedBlockRendererProps = {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
     useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
-export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererOptions, }: SyncedBlockRendererProps) => React.JSX.Element>;
+export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererOptions, api, }: SyncedBlockRendererProps) => React.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "4.0.2",
+	"version": "4.0.3",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,13 +28,14 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/button": "^23.6.0",
+		"@atlaskit/button": "^23.7.0",
 		"@atlaskit/css": "^0.17.0",
-		"@atlaskit/editor-plugin-synced-block": "^4.3.0",
+		"@atlaskit/editor-plugin-synced-block": "^4.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-synced-block-provider": "^2.12.0",
+		"@atlaskit/editor-synced-block-provider": "^2.15.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.0.0",
+		"@atlaskit/icon-lab": "^5.12.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/renderer": "^124.17.0",
@@ -45,7 +46,7 @@
 		"relay-runtime": "npm:atl-relay-runtime@0.0.0-main-39e79f66"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.39.0",
+		"@atlaskit/editor-common": "^110.41.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},