@atlaskit/link-datasource 3.19.1 → 3.20.0

package/dist/es2019/ui/common/error-state/provider-auth-required-svg-old.js

@@ -0,0 +1,164 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+const imageStyles = css({
+  width: 200,
+  height: 140,
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+export const ProviderAuthRequiredSVGOld = () => {
+  return jsx("svg", {
+    width: "170",
+    height: "130",
+    viewBox: "0 0 170 130",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: imageStyles
+  }, jsx("rect", {
+    width: "170",
+    height: "130",
+    rx: "6.25",
+    fill: "white"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M163.75 2H6.25C3.90279 2 2 3.90279 2 6.25V123.75C2 126.097 3.90279 128 6.25 128H163.75C166.097 128 168 126.097 168 123.75V6.25C168 3.90279 166.097 2 163.75 2ZM6.25 0C2.79822 0 0 2.79822 0 6.25V123.75C0 127.202 2.79822 130 6.25 130H163.75C167.202 130 170 127.202 170 123.75V6.25C170 2.79822 167.202 0 163.75 0H6.25Z",
+    fill: "#091E42",
+    fillOpacity: "0.14"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M168 14H2V12H168V14Z",
+    fill: "#091E42",
+    fillOpacity: "0.14"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M168 43L2 43L2 41L168 41V43Z",
+    fill: "#091E42",
+    fillOpacity: "0.14"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M168 72H2V70H168V72Z",
+    fill: "#091E42",
+    fillOpacity: "0.14"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M28 128L28 2H30L30 128H28Z",
+    fill: "#091E42",
+    fillOpacity: "0.14"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M98 128L98 2H100L100 128H98Z",
+    fill: "#091E42",
+    fillOpacity: "0.14"
+  }), jsx("rect", {
+    x: "34",
+    y: "24.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    x: "104",
+    y: "24.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    x: "34",
+    y: "53.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    x: "104",
+    y: "53.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    x: "34",
+    y: "111.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    x: "104",
+    y: "111.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    x: "34",
+    y: "82.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    x: "104",
+    y: "82.5",
+    width: "60",
+    height: "6",
+    rx: "3",
+    fill: "#091E42",
+    fillOpacity: "0.06"
+  }), jsx("rect", {
+    opacity: "0.5",
+    x: "8",
+    y: "20.5",
+    width: "14",
+    height: "14",
+    rx: "2",
+    fill: "#1D7AFC"
+  }), jsx("rect", {
+    opacity: "0.5",
+    x: "8",
+    y: "49.5",
+    width: "14",
+    height: "14",
+    rx: "2",
+    fill: "#1D7AFC"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M168 101H2V99H168V101Z",
+    fill: "#091E42",
+    fillOpacity: "0.14"
+  }), jsx("rect", {
+    opacity: "0.5",
+    x: "8",
+    y: "107.5",
+    width: "14",
+    height: "14",
+    rx: "2",
+    fill: "#1D7AFC"
+  }), jsx("rect", {
+    opacity: "0.5",
+    x: "8",
+    y: "78.5",
+    width: "14",
+    height: "14",
+    rx: "2",
+    fill: "#1D7AFC"
+  }));
+};

package/dist/es2019/ui/common/error-state/provider-auth-required-svg.compiled.css

@@ -0,0 +1,3 @@
+._1bsbuuw1{width:200px}
+._4t3i11ux{height:140px}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

package/dist/es2019/ui/common/error-state/provider-auth-required-svg.js

@@ -1,64 +1,60 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-const imageStyles = css({
-  width: 200,
-  height: 140,
-  marginBottom: "var(--ds-space-200, 16px)"
-});
-export const ProviderAuthRequiredSVG = () => {
-  return jsx("svg", {
+/* provider-auth-required-svg.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./provider-auth-required-svg.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from "@atlaskit/platform-feature-flags";
+import { ProviderAuthRequiredSVGOld } from './provider-auth-required-svg-old';
+const imageStyles = null;
+export const ProviderAuthRequiredSVGNew = () => {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "170",
     height: "130",
     viewBox: "0 0 170 130",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    css: imageStyles
-  }, jsx("rect", {
+    className: ax(["_1bsbuuw1 _4t3i11ux _otyrpxbi"])
+  }, /*#__PURE__*/React.createElement("rect", {
     width: "170",
     height: "130",
     rx: "6.25",
     fill: "white"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M163.75 2H6.25C3.90279 2 2 3.90279 2 6.25V123.75C2 126.097 3.90279 128 6.25 128H163.75C166.097 128 168 126.097 168 123.75V6.25C168 3.90279 166.097 2 163.75 2ZM6.25 0C2.79822 0 0 2.79822 0 6.25V123.75C0 127.202 2.79822 130 6.25 130H163.75C167.202 130 170 127.202 170 123.75V6.25C170 2.79822 167.202 0 163.75 0H6.25Z",
     fill: "#091E42",
     fillOpacity: "0.14"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M168 14H2V12H168V14Z",
     fill: "#091E42",
     fillOpacity: "0.14"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M168 43L2 43L2 41L168 41V43Z",
     fill: "#091E42",
     fillOpacity: "0.14"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M168 72H2V70H168V72Z",
     fill: "#091E42",
     fillOpacity: "0.14"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M28 128L28 2H30L30 128H28Z",
     fill: "#091E42",
     fillOpacity: "0.14"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M98 128L98 2H100L100 128H98Z",
     fill: "#091E42",
     fillOpacity: "0.14"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "34",
     y: "24.5",
     width: "60",
@@ -66,7 +62,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "104",
     y: "24.5",
     width: "60",
@@ -74,7 +70,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "34",
     y: "53.5",
     width: "60",
@@ -82,7 +78,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "104",
     y: "53.5",
     width: "60",
@@ -90,7 +86,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "34",
     y: "111.5",
     width: "60",
@@ -98,7 +94,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "104",
     y: "111.5",
     width: "60",
@@ -106,7 +102,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "34",
     y: "82.5",
     width: "60",
@@ -114,7 +110,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "104",
     y: "82.5",
     width: "60",
@@ -122,7 +118,7 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "3",
     fill: "#091E42",
     fillOpacity: "0.06"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     opacity: "0.5",
     x: "8",
     y: "20.5",
@@ -130,7 +126,7 @@ export const ProviderAuthRequiredSVG = () => {
     height: "14",
     rx: "2",
     fill: "#1D7AFC"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     opacity: "0.5",
     x: "8",
     y: "49.5",
@@ -138,13 +134,13 @@ export const ProviderAuthRequiredSVG = () => {
     height: "14",
     rx: "2",
     fill: "#1D7AFC"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M168 101H2V99H168V101Z",
     fill: "#091E42",
     fillOpacity: "0.14"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     opacity: "0.5",
     x: "8",
     y: "107.5",
@@ -152,7 +148,7 @@ export const ProviderAuthRequiredSVG = () => {
     height: "14",
     rx: "2",
     fill: "#1D7AFC"
-  }), jsx("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     opacity: "0.5",
     x: "8",
     y: "78.5",
@@ -161,4 +157,11 @@ export const ProviderAuthRequiredSVG = () => {
     rx: "2",
     fill: "#1D7AFC"
   }));
+};
+export const ProviderAuthRequiredSVG = () => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ProviderAuthRequiredSVGNew, null);
+  } else {
+    return /*#__PURE__*/React.createElement(ProviderAuthRequiredSVGOld, null);
+  }
 };

package/dist/es2019/ui/common/error-state/provider-auth-required.compiled.css

@@ -0,0 +1 @@
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}

package/dist/es2019/ui/common/error-state/provider-auth-required.js

@@ -1,26 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* provider-auth-required.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./provider-auth-required.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { 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 Button from '@atlaskit/button';
 import EmptyState from '@atlaskit/empty-state';
 import { AuthError, auth as outboundAuth } from '@atlaskit/outbound-auth-flow-client';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Anchor } from '@atlaskit/primitives';
+import { Anchor } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import useErrorLogger from '../../../hooks/useErrorLogger';
 import { loadingErrorMessages } from './messages';
+import { ProviderAuthRequiredOld } from './provider-auth-required-old';
 import { ProviderAuthRequiredSVG } from './provider-auth-required-svg';
-const buttonStyles = css({
-  marginTop: "var(--ds-space-200, 16px)"
-});
+const buttonStyles = null;
 const learnMoreAboutSmartLinksUrl = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-Links-from-Jira-and-other-products';
-export const ProviderAuthRequired = ({
+export const ProviderAuthRequiredNew = ({
   auth = [],
   onAuthSuccess,
   onAuthError,
@@ -64,19 +59,19 @@ export const ProviderAuthRequired = ({
     }
   };
   const AnchorFFed = fg('fix_a11y_violations_in_link_datasource') ? Anchor : 'a';
-  const renderAuthDescription = () => jsx(React.Fragment, null, formatMessage(loadingErrorMessages.authScreenDescriptionText, {
+  const renderAuthDescription = () => /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage(loadingErrorMessages.authScreenDescriptionText, {
     providerName
-  }), ' ', jsx(AnchorFFed, {
+  }), ' ', /*#__PURE__*/React.createElement(AnchorFFed, {
     href: learnMoreAboutSmartLinksUrl,
     target: "_blank",
     rel: "noreferrer noopener"
   }, formatMessage(loadingErrorMessages.learnMoreAboutSmartLinks)));
-  const renderAuthConnectButton = () => jsx(Button, {
+  const renderAuthConnectButton = () => /*#__PURE__*/React.createElement(Button, {
     onClick: onAuthRequest,
     appearance: "primary",
-    css: buttonStyles
+    className: ax(["_19pkpxbi"])
   }, formatMessage(loadingErrorMessages.authConnectButtonText));
-  return jsx(EmptyState, {
+  return /*#__PURE__*/React.createElement(EmptyState, {
     testId: "datasource--access-required-with-auth",
     header: formatMessage(loadingErrorMessages.authScreenHeaderText, {
       providerName
@@ -85,4 +80,11 @@ export const ProviderAuthRequired = ({
     renderImage: ProviderAuthRequiredSVG,
     primaryAction: renderAuthConnectButton()
   });
+};
+export const ProviderAuthRequired = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ProviderAuthRequiredNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ProviderAuthRequiredOld, props);
+  }
 };

package/dist/es2019/ui/common/initial-state-view/index.compiled.css

@@ -0,0 +1,14 @@
+._11c8o0gd{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)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._1bah1h6o{justify-content:center}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1wpz1h6o{align-self:center}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._ca0qoahv{padding-top:var(--ds-space-600,3pc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdoahv{padding-bottom:var(--ds-space-600,3pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._syaz1rc1{color:var(--ds-text-subtlest,#5e6c84)}
+._y3gn1h6o{text-align:center}

package/dist/es2019/ui/common/initial-state-view/index.js

@@ -1,47 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { N300 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
+import { InitialStateViewOld } from './initial-state-view-old';
 import { initialStateViewMessages } from './messages';
-const initialStateViewContainerStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  height: '100%'
-});
-const svgAndTextsWrapperStyles = css({
-  textAlign: 'center',
-  alignSelf: 'center',
-  paddingTop: "var(--ds-space-600, 48px)",
-  paddingBottom: "var(--ds-space-600, 48px)"
-});
-const betaTagStyles = css({
-  display: 'flex'
-});
-const searchTitleStyles = css({
-  color: `var(--ds-text-subtlest, ${N300})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-medium, ${fontFallback.heading.medium})`,
-  paddingTop: "var(--ds-space-200, 16px)",
-  paddingBottom: "var(--ds-space-100, 8px)",
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: "var(--ds-space-100, 8px)"
-});
-const mainTextStyles = css({
-  color: `var(--ds-text-subtlest, ${N300})`
-});
-const learnMoreLinkStyles = css({
-  paddingTop: "var(--ds-space-200, 16px)",
-  display: 'inline-block'
-});
-export const InitialStateView = ({
+const initialStateViewContainerStyles = null;
+const svgAndTextsWrapperStyles = null;
+const betaTagStyles = null;
+const searchTitleStyles = null;
+const mainTextStyles = null;
+const learnMoreLinkStyles = null;
+export const InitialStateViewNew = ({
   icon,
   showBeta = false,
   title,
@@ -51,22 +25,29 @@ export const InitialStateView = ({
   const {
     formatMessage
   } = useIntl();
-  return jsx("div", {
-    css: initialStateViewContainerStyles,
-    "data-testid": "datasource-modal--initial-state-view"
-  }, jsx("div", {
-    css: svgAndTextsWrapperStyles
-  }, icon, jsx("div", {
-    css: searchTitleStyles
-  }, showBeta && jsx("div", {
-    css: betaTagStyles
-  }, jsx(Lozenge, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "datasource-modal--initial-state-view",
+    className: ax(["_1e0c1txw _1bah1h6o _4t3i1osq"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_y3gn1h6o _1wpz1h6o _ca0qoahv _n3tdoahv"])
+  }, icon, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8o0gd _zulpu2gc _syaz1rc1 _ca0qpxbi _n3tdu2gc _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, showBeta && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw"])
+  }, /*#__PURE__*/React.createElement(Lozenge, {
     appearance: "new"
-  }, jsx(FormattedMessage, initialStateViewMessages.beta))), formatMessage(title)), jsx("div", {
-    css: mainTextStyles
-  }, formatMessage(description)), learnMoreLink && jsx("a", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, initialStateViewMessages.beta))), formatMessage(title)), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_syaz1rc1"])
+  }, formatMessage(description)), learnMoreLink && /*#__PURE__*/React.createElement("a", {
     href: learnMoreLink.href,
     target: "_blank",
-    css: learnMoreLinkStyles
+    className: ax(["_ca0qpxbi _1e0c1o8l"])
   }, formatMessage(learnMoreLink.text))));
+};
+export const InitialStateView = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(InitialStateViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(InitialStateViewOld, props);
+  }
 };

package/dist/es2019/ui/common/initial-state-view/initial-state-view-old.js

@@ -0,0 +1,72 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Lozenge from '@atlaskit/lozenge';
+import { N300 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { initialStateViewMessages } from './messages';
+const initialStateViewContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  height: '100%'
+});
+const svgAndTextsWrapperStyles = css({
+  textAlign: 'center',
+  alignSelf: 'center',
+  paddingTop: "var(--ds-space-600, 48px)",
+  paddingBottom: "var(--ds-space-600, 48px)"
+});
+const betaTagStyles = css({
+  display: 'flex'
+});
+const searchTitleStyles = css({
+  color: `var(--ds-text-subtlest, ${N300})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: `var(--ds-font-heading-medium, ${fontFallback.heading.medium})`,
+  paddingTop: "var(--ds-space-200, 16px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 8px)"
+});
+const mainTextStyles = css({
+  color: `var(--ds-text-subtlest, ${N300})`
+});
+const learnMoreLinkStyles = css({
+  paddingTop: "var(--ds-space-200, 16px)",
+  display: 'inline-block'
+});
+export const InitialStateViewOld = ({
+  icon,
+  showBeta = false,
+  title,
+  description,
+  learnMoreLink
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return jsx("div", {
+    css: initialStateViewContainerStyles,
+    "data-testid": "datasource-modal--initial-state-view"
+  }, jsx("div", {
+    css: svgAndTextsWrapperStyles
+  }, icon, jsx("div", {
+    css: searchTitleStyles
+  }, showBeta && jsx("div", {
+    css: betaTagStyles
+  }, jsx(Lozenge, {
+    appearance: "new"
+  }, jsx(FormattedMessage, initialStateViewMessages.beta))), formatMessage(title)), jsx("div", {
+    css: mainTextStyles
+  }, formatMessage(description)), learnMoreLink && jsx("a", {
+    href: learnMoreLink.href,
+    target: "_blank",
+    css: learnMoreLinkStyles
+  }, formatMessage(learnMoreLink.text))));
+};