@atlaskit/link-datasource 3.19.1 → 3.20.0

package/dist/esm/ui/assets-modal/search-container/styled.compiled.css

@@ -0,0 +1,6 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/esm/ui/assets-modal/search-container/styled.js

@@ -1,33 +1,12 @@
-// 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/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export var FormRowContainer = styled.div(function (props) {
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    gap: props.isNarrowGap ? "var(--ds-space-100, 8px)" : "var(--ds-space-200, 16px)",
-    flexGrow: 1,
-    width: '100%'
-  };
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var FormContainer = styled.form({
-  display: 'grid',
-  rowGap: "var(--ds-space-200, 16px)",
-  width: '100%'
-});
-
-// Override the top margin of fields
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var FieldContainer = styled.div({
-  flex: 1,
-  marginTop: "var(--ds-space-negative-100, -8px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var SchemaSelectContainer = styled.div({
-  width: '100%',
-  maxWidth: '386px'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var formRowContainerBaseStyles = null;
+var formRowContainerNarrowGapStyles = null;
+var formRowContainerWideGapStyles = null;
+export var FormRowContainer = function FormRowContainer(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_4cvr1h6o _1e0c1txw _16jlkb7n _1bsb1osq", props.isNarrowGap ? "_zulpu2gc" : "_zulppxbi"])
+  }, props.children);
+};

package/dist/esm/ui/common/error-state/access-required-old.js

@@ -0,0 +1,72 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import EmptyState from '@atlaskit/empty-state';
+import { Box, xcss } from '@atlaskit/primitives';
+import { N400 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { AccessRequiredSVGOld } from './access-required-svg';
+import { loadingErrorMessages } from './messages';
+var urlStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N400, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-body, ".concat(fontFallback.body.medium, ")")
+});
+var descriptionMessageStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "var(--ds-space-200, 16px)"
+});
+var iconContainerStyles = xcss({
+  marginBottom: 'space.200'
+});
+var Description = function Description(_ref) {
+  var message = _ref.message,
+    url = _ref.url;
+  return jsx("div", {
+    css: descriptionMessageStyles
+  }, jsx("span", {
+    css: urlStyles
+  }, url), jsx("span", null, message));
+};
+var IconContainer = function IconContainer() {
+  return jsx(Box, {
+    xcss: iconContainerStyles
+  }, jsx(AccessRequiredSVGOld, null));
+};
+export var AccessRequiredOld = function AccessRequiredOld(_ref2) {
+  var url = _ref2.url;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'access'
+    });
+  }, [fireEvent]);
+  if (url) {
+    return jsx(EmptyState, {
+      testId: "datasource--access-required-with-url",
+      header: formatMessage(loadingErrorMessages.accessRequiredWithSite),
+      description: jsx(Description, {
+        message: formatMessage(loadingErrorMessages.accessInstructions),
+        url: url
+      }),
+      renderImage: IconContainer
+    });
+  }
+  return jsx(EmptyState, {
+    testId: "datasource--access-required",
+    header: formatMessage(loadingErrorMessages.accessRequired),
+    description: formatMessage(loadingErrorMessages.accessInstructions),
+    renderImage: IconContainer
+  });
+};

package/dist/esm/ui/common/error-state/access-required-svg.js

@@ -1,5 +1,7 @@
 import React from 'react';
-export var AccessRequiredSVG = function AccessRequiredSVG() {
+
+// TODO Delete when cleaning fg('bandicoots-update-sllv-icons')
+export var AccessRequiredSVGOld = function AccessRequiredSVGOld() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "75",
     height: "87",

package/dist/esm/ui/common/error-state/access-required.compiled.css

@@ -0,0 +1,6 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._syaznoz8{color:var(--ds-text-subtlest,#505f79)}

package/dist/esm/ui/common/error-state/access-required.js

@@ -1,47 +1,38 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* access-required.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./access-required.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 import { N400 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
-import { AccessRequiredSVG } from './access-required-svg';
+import { AccessRequiredOld } from './access-required-old';
+import { AccessRequiredSVGOld } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
-var urlStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N400, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-body, ".concat(fontFallback.body.medium, ")")
-});
-var descriptionMessageStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: "var(--ds-space-200, 16px)"
-});
-var iconContainerStyles = xcss({
-  marginBottom: 'space.200'
-});
+var styles = {
+  iconContainerStyles: "_otyrpxbi",
+  descriptionMessageStyles: "_zulppxbi _1e0c1txw _2lx21bp4",
+  urlStyles: "_11c81oud _syaznoz8"
+};
 var Description = function Description(_ref) {
   var message = _ref.message,
     url = _ref.url;
-  return jsx("div", {
-    css: descriptionMessageStyles
-  }, jsx("span", {
-    css: urlStyles
-  }, url), jsx("span", null, message));
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.descriptionMessageStyles])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.urlStyles])
+  }, url), /*#__PURE__*/React.createElement("span", null, message));
 };
 var IconContainer = function IconContainer() {
-  return jsx(Box, {
-    xcss: iconContainerStyles
-  }, jsx(AccessRequiredSVG, null));
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.iconContainerStyles
+  }, /*#__PURE__*/React.createElement(AccessRequiredSVGOld, null));
 };
-export var AccessRequired = function AccessRequired(_ref2) {
+export var AccessRequiredNew = function AccessRequiredNew(_ref2) {
   var url = _ref2.url;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -53,20 +44,27 @@ export var AccessRequired = function AccessRequired(_ref2) {
     });
   }, [fireEvent]);
   if (url) {
-    return jsx(EmptyState, {
+    return /*#__PURE__*/React.createElement(EmptyState, {
       testId: "datasource--access-required-with-url",
       header: formatMessage(loadingErrorMessages.accessRequiredWithSite),
-      description: jsx(Description, {
+      description: /*#__PURE__*/React.createElement(Description, {
         message: formatMessage(loadingErrorMessages.accessInstructions),
         url: url
       }),
       renderImage: IconContainer
     });
   }
-  return jsx(EmptyState, {
+  return /*#__PURE__*/React.createElement(EmptyState, {
     testId: "datasource--access-required",
     header: formatMessage(loadingErrorMessages.accessRequired),
     description: formatMessage(loadingErrorMessages.accessInstructions),
     renderImage: IconContainer
   });
+};
+export var AccessRequired = function AccessRequired(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AccessRequiredNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AccessRequiredOld, props);
+  }
 };

package/dist/esm/ui/common/error-state/loading-error-old.js

@@ -0,0 +1,54 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/standard-button';
+import { Box, Inline, Text } from '@atlaskit/primitives';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { LoadingErrorSVGOld } from './loading-error-svg-old';
+import { loadingErrorMessages } from './messages';
+var errorContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-200, 16px)",
+  placeItems: 'center',
+  placeSelf: 'center'
+});
+var errorMessageContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-100, 8px)",
+  placeItems: 'center'
+});
+var errorMessageStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
+});
+export var LoadingErrorOld = function LoadingErrorOld(_ref) {
+  var onRefresh = _ref.onRefresh;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'network'
+    });
+  }, [fireEvent]);
+  return jsx(Box, {
+    xcss: errorContainerStyles,
+    testId: "datasource--loading-error"
+  }, jsx(LoadingErrorSVGOld, null), jsx(Box, {
+    xcss: errorMessageContainerStyles
+  }, jsx(Inline, {
+    as: "span",
+    xcss: errorMessageStyles
+  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx(Text, {
+    as: "p"
+  }, jsx(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && jsx(Button, {
+    appearance: "primary",
+    onClick: onRefresh
+  }, jsx(FormattedMessage, loadingErrorMessages.refresh))));
+};

package/dist/esm/ui/common/error-state/{loading-error-svg.js → loading-error-svg-old.js}

@@ -1,5 +1,7 @@
 import React from 'react';
-export var LoadingErrorSVG = function LoadingErrorSVG() {
+
+// TODO Delete when cleaning fg('bandicoots-update-sllv-icons')
+export var LoadingErrorSVGOld = function LoadingErrorSVGOld() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "92",
     height: "124",

package/dist/esm/ui/common/error-state/loading-error.compiled.css

@@ -0,0 +1,8 @@
+
+._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
+._1e0c11p5{display:grid}
+._1wpz1h6o{align-self:center}
+._4cvr1h6o{align-items:center}
+._6a6z1h6o{justify-items:center}

package/dist/esm/ui/common/error-state/loading-error.js

@@ -1,34 +1,24 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* loading-error.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./loading-error.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
-import { Box, Inline, Text } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
-import { LoadingErrorSVG } from './loading-error-svg';
+import { SpotErrorSearch } from '../../../common/ui/spot/error-state/search';
+import { LoadingErrorOld } from './loading-error-old';
+import { LoadingErrorSVGOld } from './loading-error-svg-old';
 import { loadingErrorMessages } from './messages';
-var errorContainerStyles = css({
-  display: 'grid',
-  gap: "var(--ds-space-200, 16px)",
-  placeItems: 'center',
-  placeSelf: 'center'
-});
-var errorMessageContainerStyles = css({
-  display: 'grid',
-  gap: "var(--ds-space-100, 8px)",
-  placeItems: 'center'
-});
-var errorMessageStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
-});
-export var LoadingError = function LoadingError(_ref) {
+var styles = {
+  errorContainerStyles: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
+  errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5",
+  errorMessageStyles: "_11c81bk4"
+};
+export var LoadingErrorNew = function LoadingErrorNew(_ref) {
   var onRefresh = _ref.onRefresh;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
@@ -37,18 +27,28 @@ export var LoadingError = function LoadingError(_ref) {
       reason: 'network'
     });
   }, [fireEvent]);
-  return jsx(Box, {
-    xcss: errorContainerStyles,
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorContainerStyles,
     testId: "datasource--loading-error"
-  }, jsx(LoadingErrorSVG, null), jsx(Box, {
-    xcss: errorMessageContainerStyles
-  }, jsx(Inline, {
+  }, fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(SpotErrorSearch, {
+    size: 'xlarge',
+    alt: 'something'
+  }) : /*#__PURE__*/React.createElement(LoadingErrorSVGOld, null), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorMessageContainerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
     as: "span",
-    xcss: errorMessageStyles
-  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadItems)), jsx(Text, {
+    xcss: styles.errorMessageStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, loadingErrorMessages.unableToLoadItems)), /*#__PURE__*/React.createElement(Text, {
     as: "p"
-  }, jsx(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && jsx(Button, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, loadingErrorMessages.checkConnection)), onRefresh && /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     onClick: onRefresh
-  }, jsx(FormattedMessage, loadingErrorMessages.refresh))));
+  }, /*#__PURE__*/React.createElement(FormattedMessage, loadingErrorMessages.refresh))));
+};
+export var LoadingError = function LoadingError(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(LoadingErrorNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LoadingErrorOld, props);
+  }
 };

package/dist/esm/ui/common/error-state/modal-loading-error-old.js

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box, Text } from '@atlaskit/primitives';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { LoadingErrorSVGOld } from './loading-error-svg-old';
+import { loadingErrorMessages } from './messages';
+var errorContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-300, 24px)",
+  placeItems: 'center',
+  placeSelf: 'center'
+});
+var errorMessageContainerStyles = css({
+  display: 'grid',
+  gap: "var(--ds-space-100, 8px)",
+  placeItems: 'center'
+});
+export var ModalLoadingErrorOld = function ModalLoadingErrorOld(_ref) {
+  var _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? jsx(FormattedMessage, loadingErrorMessages.checkConnection) : _ref$errorMessage;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.error.shown', {
+      reason: 'network'
+    });
+  }, [fireEvent]);
+  return jsx(Box, {
+    xcss: errorContainerStyles,
+    testId: "datasource-modal--loading-error"
+  }, jsx(LoadingErrorSVGOld, null), jsx(Box, {
+    xcss: errorMessageContainerStyles
+  }, jsx(Text, {
+    size: "small"
+  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx(Text, {
+    as: "p"
+  }, errorMessage)));
+};

package/dist/esm/ui/common/error-state/modal-loading-error.compiled.css

@@ -0,0 +1,7 @@
+
+._zulp1ejb{gap:var(--ds-space-300,24px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
+._1e0c11p5{display:grid}
+._1wpz1h6o{align-self:center}
+._4cvr1h6o{align-items:center}
+._6a6z1h6o{justify-items:center}

package/dist/esm/ui/common/error-state/modal-loading-error.js

@@ -1,30 +1,23 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* modal-loading-error.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./modal-loading-error.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { Box, Text } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
-import { LoadingErrorSVG } from './loading-error-svg';
+import { SpotErrorSearch } from '../../../common/ui/spot/error-state/search';
+import { LoadingErrorSVGOld } from './loading-error-svg-old';
 import { loadingErrorMessages } from './messages';
-var errorContainerStyles = css({
-  display: 'grid',
-  gap: "var(--ds-space-300, 24px)",
-  placeItems: 'center',
-  placeSelf: 'center'
-});
-var errorMessageContainerStyles = css({
-  display: 'grid',
-  gap: "var(--ds-space-100, 8px)",
-  placeItems: 'center'
-});
-export var ModalLoadingError = function ModalLoadingError(_ref) {
+import { ModalLoadingErrorOld } from './modal-loading-error-old';
+var styles = {
+  errorContainerStyles: "_zulp1ejb _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
+  errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5"
+};
+export var ModalLoadingErrorNew = function ModalLoadingErrorNew(_ref) {
   var _ref$errorMessage = _ref.errorMessage,
-    errorMessage = _ref$errorMessage === void 0 ? jsx(FormattedMessage, loadingErrorMessages.checkConnection) : _ref$errorMessage;
+    errorMessage = _ref$errorMessage === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, loadingErrorMessages.checkConnection) : _ref$errorMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   useEffect(function () {
@@ -32,14 +25,24 @@ export var ModalLoadingError = function ModalLoadingError(_ref) {
       reason: 'network'
     });
   }, [fireEvent]);
-  return jsx(Box, {
-    xcss: errorContainerStyles,
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorContainerStyles,
     testId: "datasource-modal--loading-error"
-  }, jsx(LoadingErrorSVG, null), jsx(Box, {
-    xcss: errorMessageContainerStyles
-  }, jsx(Text, {
+  }, fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(SpotErrorSearch, {
+    size: 'xlarge',
+    alt: 'something'
+  }) : /*#__PURE__*/React.createElement(LoadingErrorSVGOld, null), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorMessageContainerStyles
+  }, /*#__PURE__*/React.createElement(Text, {
     size: "small"
-  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx(Text, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, loadingErrorMessages.unableToLoadResults)), /*#__PURE__*/React.createElement(Text, {
     as: "p"
   }, errorMessage)));
+};
+export var ModalLoadingError = function ModalLoadingError(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ModalLoadingErrorNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ModalLoadingErrorOld, props);
+  }
 };

package/dist/esm/ui/common/error-state/no-instances-old.js

@@ -0,0 +1,38 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { Flex, Inline, xcss } from '@atlaskit/primitives';
+import { NoInstancesSvg } from './no-instances-svg';
+var titleStyles = xcss({
+  font: 'font.heading.small',
+  marginTop: 'space.200'
+});
+var descriptionStyles = xcss({
+  marginTop: 'space.100'
+});
+var containerStyles = xcss({
+  marginTop: 'space.800'
+});
+export var NoInstancesViewOld = function NoInstancesViewOld(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    testId = _ref.testId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return jsx(Flex, {
+    testId: testId,
+    direction: "column",
+    alignItems: "center",
+    xcss: containerStyles
+  }, jsx(NoInstancesSvg, null), jsx(Inline, {
+    as: "span",
+    xcss: titleStyles
+  }, formatMessage(title)), jsx(Inline, {
+    as: "span",
+    xcss: descriptionStyles
+  }, formatMessage(description)));
+};

package/dist/esm/ui/common/error-state/no-instances.compiled.css

@@ -0,0 +1,4 @@
+._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._19pkxncg{margin-top:var(--ds-space-800,4pc)}

package/dist/esm/ui/common/error-state/no-instances.js

@@ -1,38 +1,40 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* no-instances.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./no-instances.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
-import { Flex, Inline, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Flex, Inline } from '@atlaskit/primitives/compiled';
+import { NoInstancesViewOld } from './no-instances-old';
 import { NoInstancesSvg } from './no-instances-svg';
-var titleStyles = xcss({
-  font: 'font.heading.small',
-  marginTop: 'space.200'
-});
-var descriptionStyles = xcss({
-  marginTop: 'space.100'
-});
-var containerStyles = xcss({
-  marginTop: 'space.800'
-});
-export var NoInstancesView = function NoInstancesView(_ref) {
+var styles = {
+  titleStyles: "_11c81bk4 _19pkpxbi",
+  descriptionStyles: "_19pku2gc",
+  containerStyles: "_19pkxncg"
+};
+export var NoInstancesViewNew = function NoInstancesViewNew(_ref) {
   var title = _ref.title,
     description = _ref.description,
     testId = _ref.testId;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return jsx(Flex, {
+  return /*#__PURE__*/React.createElement(Flex, {
     testId: testId,
     direction: "column",
     alignItems: "center",
-    xcss: containerStyles
-  }, jsx(NoInstancesSvg, null), jsx(Inline, {
+    xcss: styles.containerStyles
+  }, /*#__PURE__*/React.createElement(NoInstancesSvg, null), /*#__PURE__*/React.createElement(Inline, {
     as: "span",
-    xcss: titleStyles
-  }, formatMessage(title)), jsx(Inline, {
+    xcss: styles.titleStyles
+  }, formatMessage(title)), /*#__PURE__*/React.createElement(Inline, {
     as: "span",
-    xcss: descriptionStyles
+    xcss: styles.descriptionStyles
   }, formatMessage(description)));
+};
+export var NoInstancesView = function NoInstancesView(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(NoInstancesViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(NoInstancesViewOld, props);
+  }
 };