@atlaskit/link-datasource 4.5.0 → 4.7.0

package/dist/cjs/ui/jira-issues-modal/jira-search-container/index.js

@@ -15,6 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _useDebounce = require("use-debounce");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _analytics = require("../../../analytics");
 var _basicSearchInput = require("../../common/modal/basic-search-input");
@@ -33,8 +34,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
+  basicSearchInputBoxStyles: "_1bsb1osq",
   basicSearchInputContainerStyles: "_16jlkb7n",
-  inputContainerStyles: "_4cvr1q9y _1e0c1txw _1tket9kd"
+  inputContainerStylesOld: "_4cvr1q9y _1e0c1txw _1tket9kd",
+  inputContainerStyles: "_4cvr1y6m _1e0c1txw _1tket9kd",
+  modeSwitcherContainerStyles: "_19pk1b66"
 };
 var DEFAULT_JQL_QUERY = exports.DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 var ALLOWED_ORDER_BY_KEYS = exports.ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
@@ -206,9 +210,51 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
       setCloudId(currentCloudId);
     }
   }, [currentCloudId, cloudId, setSearchBarJql]);
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "jira-search-container",
+      className: (0, _runtime.ax)([styles.inputContainerStyles])
+    }, currentSearchMethod === 'basic' && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.basicSearchInputBoxStyles
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+      alignItems: "center",
+      xcss: styles.basicSearchInputContainerStyles
+    }, /*#__PURE__*/_react.default.createElement(_basicSearchInput.BasicSearchInput, {
+      isSearching: isSearching,
+      onChange: handleBasicSearchChange,
+      onSearch: handleSearch,
+      searchTerm: basicSearchTerm,
+      placeholder: _messages.basicSearchInputMessages.basicTextSearchLabel,
+      ariaLabel: _messages.basicSearchInputMessages.basicTextSearchLabel,
+      testId: "jira-datasource-modal",
+      fullWidth: false
+    }), /*#__PURE__*/_react.default.createElement(_basicFilters.BasicFilters, {
+      jql: searchBarJql,
+      site: site,
+      onChange: handleBasicFilterSelectionChange,
+      selections: filterSelections,
+      isJQLHydrating: basicFilterHydrationStatus === 'loading'
+    })), currentSearchMethod === 'basic' && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      size: "small",
+      color: "color.text.subtlest",
+      testId: "jira-search-placeholder"
+    }, formatMessage(_messages.basicSearchInputMessages.basicTextSearchLabel))), currentSearchMethod === 'jql' && /*#__PURE__*/_react.default.createElement(_jqlEditor.JiraJQLEditor, {
+      cloudId: cloudId || '',
+      isSearching: isSearching,
+      onChange: onQueryChange,
+      onSearch: handleSearch,
+      query: searchBarJql
+    }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.modeSwitcherContainerStyles
+    }, /*#__PURE__*/_react.default.createElement(_modeSwitcher.ModeSwitcher, {
+      onOptionValueChange: onSearchMethodChange,
+      selectedOptionValue: currentSearchMethod,
+      options: modeSwitcherOptions
+    })));
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "jira-search-container",
-    className: (0, _runtime.ax)([styles.inputContainerStyles])
+    className: (0, _runtime.ax)([styles.inputContainerStylesOld])
   }, currentSearchMethod === 'basic' && /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     alignItems: "center",
     xcss: styles.basicSearchInputContainerStyles
@@ -218,6 +264,7 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     onSearch: handleSearch,
     searchTerm: basicSearchTerm,
     placeholder: _messages.basicSearchInputMessages.basicTextSearchLabel,
+    ariaLabel: _messages.basicSearchInputMessages.basicTextSearchLabel,
     testId: "jira-datasource-modal",
     fullWidth: false
   }), /*#__PURE__*/_react.default.createElement(_basicFilters.BasicFilters, {

package/dist/cjs/ui/jira-issues-modal/modal/index.js

@@ -414,7 +414,11 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     searchCount: totalCount,
     url: jqlUrl,
     prefixTextType: "issue",
-    testId: "jira-datasource-modal-total-issues-count"
+    testId: "jira-datasource-modal-total-issues-count",
+    styles: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-sllv') ? {
+      color: "var(--ds-text, #172B4D)",
+      font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+    } : undefined
   }), /*#__PURE__*/_react.default.createElement(_cancelButton.CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,

package/dist/es2019/common/ui/spot/error-state/error/assets/dark.svg

@@ -1,5 +1,8 @@
-<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#4B4D51"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="#101214"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.557 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="#101214"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 275 275">
+	<path fill="#4B4D51" d="M191.87 88.67c-2.28-4.36-5.07-8.68-8.3-12.86-3.27-4.23-6.8-8.07-10.5-11.4-21.6-19.51-49.11-22.5-75.49-8.19a93.066 93.066 0 0 0-12.54 8.22 94.563 94.563 0 0 0-11.53 10.51c-20.39 22.01-24.43 49.35-11.09 75.03 2.3 4.42 5.12 8.81 8.39 13.04 3.23 4.18 6.72 7.96 10.37 11.26 12.5 11.29 27.05 17.01 42.25 17.01 10.9 0 22.13-2.94 33.18-8.88 4.46-2.4 8.86-5.26 13.07-8.52 4.06-3.14 7.79-6.53 11.11-10.07 20.52-21.96 24.56-49.35 11.08-75.14v-.01Zm-30.56 74.37c-3.61 2.79-7.37 5.25-11.17 7.29-21.38 11.48-42.6 9.27-59.76-6.23-3.05-2.76-5.98-5.94-8.72-9.48-2.77-3.59-5.16-7.28-7.08-10.97-10.67-20.53-7.48-41.63 8.98-59.4 2.93-3.17 6.25-6.19 9.86-8.98 3.47-2.69 7.07-5.04 10.7-7.01 8.96-4.86 17.91-7.28 26.57-7.28 11.89 0 23.21 4.56 33.2 13.59 3.09 2.79 6.07 6.03 8.84 9.62 2.73 3.54 5.09 7.18 6.99 10.82 10.77 20.62 7.6 41.73-8.95 59.44-2.81 3.01-6 5.9-9.48 8.59h.02Z"/>
+	<path fill="#4B4D51" d="M179.96 171c-3.54-4.93-7.34-4.9-11.05-2.03-3.48 2.69-4.41 6.33-.7 11.12l4.24 5.48 11.75-9.09-4.24-5.48Z"/>
+	<path fill="#4B4D51" d="m187.155 174.199-17.642 13.64 33.152 42.878 17.642-13.64-33.152-42.878Z"/>
+	<path fill="#7E8188" d="m184.32 176.391-11.97 9.255 11.243 14.54 11.969-9.254-11.242-14.541Z"/>
+	<path fill="#4B4D51" fill-rule="evenodd" d="m157.715 95.826-53.98 53.979-7.07-7.071 53.979-53.98 7.071 7.072Z" clip-rule="evenodd"/>
+	<path fill="#4B4D51" fill-rule="evenodd" d="m150.644 149.805-53.98-53.98 7.071-7.07 53.98 53.979-7.071 7.071Z" clip-rule="evenodd"/>
 </svg>

package/dist/es2019/common/ui/spot/error-state/error/assets/light.svg

@@ -1,5 +1,8 @@
-<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#DDDEE1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.556 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 275 275">
+	<path fill="#fff" d="M185.8 91.84c-2.07-3.97-4.61-7.92-7.64-11.84-3.07-3.97-6.31-7.47-9.67-10.51-20.01-18.08-44.6-19.74-67.63-7.25-3.93 2.13-7.81 4.67-11.62 7.61-3.97 3.07-7.54 6.33-10.7 9.74C60.71 98.83 56.14 123 68.5 146.8c2.09 4.02 4.66 8.03 7.73 12.01 3.03 3.92 6.22 7.37 9.54 10.37 19.88 17.95 44.45 19.62 67.59 7.18 4.1-2.2 8.15-4.83 12.12-7.9 3.81-2.94 7.24-6.07 10.29-9.33 17.91-19.17 22.48-43.43 10.01-67.29h.02Z"/>
+	<path fill="#DDDEE1" d="M123.44 191.28c-15.2 0-29.74-5.72-42.25-17.01-3.65-3.3-7.14-7.09-10.37-11.26-3.27-4.23-6.1-8.62-8.39-13.04-13.34-25.67-9.3-53.02 11.09-75.03 3.45-3.72 7.33-7.26 11.53-10.51 4.05-3.13 8.27-5.9 12.54-8.22 26.38-14.31 53.9-11.32 75.49 8.19 3.69 3.34 7.22 7.17 10.5 11.4 3.23 4.17 6.02 8.5 8.3 12.86 13.48 25.79 9.44 53.18-11.08 75.14-3.31 3.55-7.05 6.94-11.11 10.07-4.21 3.25-8.61 6.12-13.07 8.52-11.05 5.94-22.29 8.88-33.18 8.88v.01Zm7.25-130.3c-8.65 0-17.61 2.41-26.57 7.28-3.62 1.97-7.22 4.33-10.7 7.01-3.61 2.79-6.93 5.81-9.86 8.98-16.46 17.77-19.65 38.86-8.98 59.4 1.92 3.69 4.3 7.39 7.08 10.97 2.73 3.53 5.66 6.72 8.72 9.48 17.16 15.5 38.38 17.71 59.76 6.23 3.8-2.04 7.56-4.49 11.17-7.29 3.48-2.69 6.66-5.58 9.48-8.59 16.55-17.71 19.72-38.82 8.95-59.44-1.9-3.64-4.26-7.29-6.99-10.82-2.78-3.59-5.75-6.83-8.84-9.62-10-9.03-21.32-13.59-33.2-13.59h-.02Z"/><path fill="#DDDEE1" d="M179.96 171c-3.54-4.93-7.34-4.9-11.05-2.03-3.48 2.69-4.41 6.33-.7 11.12l4.24 5.48 11.75-9.09-4.24-5.48Z"/>
+	<path fill="#DDDEE1" d="m187.155 174.199-17.642 13.64 33.152 42.878 17.642-13.64-33.152-42.878Z"/>
+	<path fill="#B7B9BE" d="m184.32 176.391-11.97 9.255 11.243 14.54 11.969-9.254-11.242-14.541Z"/>
+	<path fill="#DDDEE1" fill-rule="evenodd" d="m157.715 95.826-53.98 53.979-7.07-7.071 53.979-53.98 7.071 7.072Z" clip-rule="evenodd"/>
+	<path fill="#DDDEE1" fill-rule="evenodd" d="m150.644 149.805-53.98-53.98 7.071-7.07 53.98 53.979-7.071 7.071Z" clip-rule="evenodd"/>
 </svg>

package/dist/es2019/common/ui/spot/error-state/error-old/assets/dark.svg

@@ -0,0 +1,5 @@
+<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#4B4D51"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="#101214"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.557 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="#101214"/>
+</svg>

package/dist/es2019/common/ui/spot/error-state/error-old/assets/light.svg

@@ -0,0 +1,5 @@
+<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#DDDEE1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.556 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="white"/>
+</svg>

package/dist/es2019/common/ui/spot/error-state/error-old/index.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { RenderSVG } from '../../../common/render-svg';
+import Dark from './assets/dark.svg';
+import Light from './assets/light.svg';
+export const SpotErrorOld = props => {
+  return /*#__PURE__*/React.createElement(RenderSVG, _extends({
+    src: Light,
+    srcDark: Dark
+  }, props));
+};

package/dist/es2019/common/utils/withFeatureFlaggedComponent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+/**
+ * This function is used to switch between two components based on a feature flag
+ * @param ComponentOld
+ * @param ComponentNext
+ * @param featureFlagFn function that returns a boolean value to switch to the next component, e.g. () => fg('my_flag_name')
+ * @returns
+ */
+export const withFeatureFlaggedComponent = (ComponentOld, ComponentNext, featureFlagFn) => {
+  return props => {
+    // copied from packages/editor/editor-common/src/utils/withFeatureFlaggedComponent.tsx
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return featureFlagFn() ? /*#__PURE__*/React.createElement(ComponentNext, props) : /*#__PURE__*/React.createElement(ComponentOld, props);
+  };
+};

package/dist/es2019/ui/assets-modal/search-container/object-schema-select/index.js

@@ -8,7 +8,7 @@ import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { Field } from '@atlaskit/form';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect, PopupSelect } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
@@ -104,7 +104,10 @@ export const AssetsObjectSchemaSelect = ({
       var _restFieldProps$value;
       return /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
         isSelected: isOpen,
-        iconAfter: ChevronDownIcon
+        iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+          label: "",
+          color: "currentColor"
+        })
       }), ((_restFieldProps$value = restFieldProps.value) === null || _restFieldProps$value === void 0 ? void 0 : _restFieldProps$value.label) || formatMessage(objectSchemaSelectMessages.placeholder));
     }
   })) : /*#__PURE__*/React.createElement(AsyncSelect, _extends({

package/dist/es2019/ui/common/modal/basic-search-input/index.compiled.css

@@ -2,4 +2,5 @@
 ._1o9zkb7n{flex-shrink:1}
 ._2hwx12x7{margin-right:var(--ds-space-075,6px)}
 ._i0dlf1ug{flex-basis:0%}
+._p12f1mjv{max-width:300px}
 ._p12fr0r7{max-width:250px}

package/dist/es2019/ui/common/modal/basic-search-input/index.js

@@ -11,6 +11,7 @@ import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
 const searchButtonStyles = null;
 const formStyles = null;
+const formWithMaxWidthStylesOld = null;
 const formWithMaxWidthStyles = null;
 export const BasicSearchInput = ({
   isDisabled,
@@ -20,7 +21,8 @@ export const BasicSearchInput = ({
   searchTerm,
   fullWidth,
   testId,
-  placeholder
+  placeholder,
+  ariaLabel
 }) => {
   const {
     formatMessage
@@ -38,7 +40,7 @@ export const BasicSearchInput = ({
   };
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: handleFormSubmit,
-    className: ax([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12fr0r7"])
+    className: ax([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : fg('platform-linking-visual-refresh-sllv') ? "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12f1mjv" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12fr0r7"])
   }, /*#__PURE__*/React.createElement(Textfield, {
     elemAfterInput: /*#__PURE__*/React.createElement(LoadingButton, {
       appearance: "primary",
@@ -57,9 +59,9 @@ export const BasicSearchInput = ({
     }),
     autoFocus: true,
     onChange: onChange,
-    placeholder: formatMessage(placeholder),
+    placeholder: fg('platform-linking-visual-refresh-sllv') ? undefined : formatMessage(placeholder),
     testId: `${testId}--basic-search-input`,
     value: searchTerm,
-    "aria-label": formatMessage(placeholder)
+    "aria-label": formatMessage(fg('platform-linking-visual-refresh-sllv') ? ariaLabel : placeholder)
   }));
 };

package/dist/es2019/ui/common/modal/display-view-dropdown/display-view-drop-down.js

@@ -1,10 +1,12 @@
 /* display-view-drop-down.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./display-view-drop-down.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { cx } from '@compiled/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { displayViewDropDownMessages } from './messages';
@@ -69,22 +71,51 @@ export const DisplayViewDropDown = ({
   } = useIntl();
   const isTable = viewMode === 'table';
   const triggerText = isTable ? formatMessage(displayViewDropDownMessages.viewModeListLabel) : formatMessage(displayViewDropDownMessages.viewModeInlineLinkLabel);
+  if (fg('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/React.createElement(DropdownMenu, {
+      trigger: ({
+        triggerRef,
+        ...triggerProps
+      }) => /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+        ref: triggerRef,
+        iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+          label: "",
+          color: "currentColor"
+        })
+      }), triggerText),
+      testId: "datasource-modal--view-drop-down"
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.dropDownItemGroupStyles
+    }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+      testId: "dropdown-item-table",
+      onClick: () => onViewModeChange('table'),
+      isSelected: isTable,
+      description: formatMessage(displayViewDropDownMessages.viewModeListDescription),
+      elemBefore: ListIcon
+    }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeListLabel)), /*#__PURE__*/React.createElement(DropdownItem, {
+      testId: "dropdown-item-inline-link",
+      onClick: () => onViewModeChange('inline'),
+      isSelected: !isTable,
+      description: formatMessage(displayViewDropDownMessages.viewModeInlineLinkDescription),
+      elemBefore: InlineIcon
+    }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeInlineLinkLabel)))));
+  }
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: triggerText,
     testId: "datasource-modal--view-drop-down"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(fg('platform-linking-visual-refresh-sllv') ? styles.dropDownItemGroupStyles : styles.dropDownItemGroupStylesOld)
+    xcss: styles.dropDownItemGroupStylesOld
   }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
     testId: "dropdown-item-table",
     onClick: () => onViewModeChange('table'),
     isSelected: isTable,
-    description: formatMessage(fg('platform-linking-visual-refresh-sllv') ? displayViewDropDownMessages.viewModeListDescription : displayViewDropDownMessages.viewModeListDescriptionOld),
-    elemBefore: fg('platform-linking-visual-refresh-sllv') ? ListIcon : ListIconOld
+    description: formatMessage(displayViewDropDownMessages.viewModeListDescriptionOld),
+    elemBefore: ListIconOld
   }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeListLabel)), /*#__PURE__*/React.createElement(DropdownItem, {
     testId: "dropdown-item-inline-link",
     onClick: () => onViewModeChange('inline'),
     isSelected: !isTable,
-    description: formatMessage(fg('platform-linking-visual-refresh-sllv') ? displayViewDropDownMessages.viewModeInlineLinkDescription : displayViewDropDownMessages.viewModeInlineLinkDescriptionOld),
-    elemBefore: fg('platform-linking-visual-refresh-sllv') ? InlineIcon : InlineIconOld
+    description: formatMessage(displayViewDropDownMessages.viewModeInlineLinkDescriptionOld),
+    elemBefore: InlineIconOld
   }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeInlineLinkLabel)))));
 };

package/dist/es2019/ui/common/modal/mode-switcher/index.compiled.css

@@ -1,28 +1,44 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko1b66{border-radius:var(--ds-space-050,4px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._zulpv77o{gap:var(--ds-space-025,2px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._1h6d1yqz{border-color:var(--ds-border-selected,#0c66e4)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
 ._16qs1jze{box-shadow:var(--ds-shadow-overflow,0 0 1px rgba(9,30,66,.12),0 0 8px rgba(9,30,66,.16))}
 ._18u0v47k{margin-left:var(--ds-space-250,20px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
 ._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1j55105o:disabled{opacity:.5}
 ._1p1dangw{text-transform:uppercase}
+._1tke1tcg{min-height:24px}
 ._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
 ._bfhk1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._syaz1be1{color:var(--ds-text-subtlest,#253858)}
 ._syaz8q0r{color:var(--ds-text-disabled,#b3bac5)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
 ._vchhusvi{box-sizing:border-box}
 ._d0al13gf:hover{cursor:not-allowed}
 ._d0altlke:hover{cursor:pointer}
 ._irr31j28:hover{background-color:transparent}
+._irr3fg4m:hover{background-color:var(--ds-background-selected,#e9f2ff)}
 ._irr3g4tq:hover{background-color:var(--ds-background-neutral-subtle-hovered,rgba(9,30,66,.08))}
 ._irr3r01l:hover{background-color:var(--ds-background-input-pressed,#fff)}

package/dist/es2019/ui/common/modal/mode-switcher/index.js

@@ -3,16 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N20, N30A, N60, N700 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DatasourceAction } from '../../../../analytics/types';
 import { useUserInteractions } from '../../../../contexts/user-interactions';
 import { DisplayViewDropDown } from '../display-view-dropdown/display-view-drop-down';
 import { useViewModeContext } from './useViewModeContext';
+const modeSwitcherStylesOld = null;
 const modeSwitcherStyles = null;
 const compactModeSwitcherStyles = null;
 const modeInputStyles = null;
+const modeSwitcherLabelStylesOld = null;
 const modeSwitcherLabelStyles = null;
+const modeSwitcherLabelSelectedStylesOld = null;
 const modeSwitcherLabelSelectedStyles = null;
 const modeSwitcherLabelDisabledStyles = null;
 const modeSwitcherDisabledStyles = null;
@@ -32,7 +36,7 @@ export const ModeSwitcher = props => {
   return options.length > 0 ? /*#__PURE__*/React.createElement("fieldset", {
     "data-testid": "mode-toggle-container",
     disabled: isDisabled,
-    className: ax(["_2rko1b66 _zulp1b66 _4cvr1h6o _bfhk1s4m _vchhusvi _1e0c116y _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _18u0v47k _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"])
+    className: ax([fg('platform-linking-visual-refresh-sllv') ? "_2rko1b66 _1h6dmuej _189ee4h9 _1dqonqa1 _4cvr1h6o _vchhusvi _1e0c116y _u5f31b66 _19bv1b66 _18u0v47k _4t3izwfg _1j55105o" : "_2rko1b66 _zulp1b66 _4cvr1h6o _bfhk1s4m _vchhusvi _1e0c116y _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _18u0v47k _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"])
   }, options.map(({
     value,
     label,
@@ -43,7 +47,20 @@ export const ModeSwitcher = props => {
     return /*#__PURE__*/React.createElement(Tooltip, {
       key: value,
       content: tooltipText
-    }, tooltipProps => /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
+    }, tooltipProps => fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
+      key: value,
+      "data-testid": `mode-toggle-${value}`,
+      className: ax(["_11c82smr _2rko1b66 _1h6d1j28 _189ee4h9 _1dqonqa1 _syaz1be1 _vchhusvi _k48p1wq8 _u5f3utpp _19bvutpp _1tke1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _d0altlke _irr3g4tq", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _1h6d1yqz _bfhkfg4m _syazaqb7 _d0altlke _irr3fg4m", isDisabled && "_irr31j28 _d0al13gf", isOptionDisabled && "_syaz8q0r", isOptionDisabled && "_irr31j28 _d0al13gf"])
+    }), label, /*#__PURE__*/React.createElement("input", {
+      "aria-checked": isSelected,
+      "aria-disabled": isOptionDisabled,
+      checked: isSelected,
+      disabled: isOptionDisabled,
+      onChange: handleModeChange,
+      type: "radio",
+      value: value,
+      className: ax(["_1e0cglyw"])
+    })) : /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
       key: value,
       "data-testid": `mode-toggle-${value}`,
       className: ax(["_11c8dcr7 _2rko1b66 _syaz1be1 _k48p1pd9 _1p1dangw _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _d0altlke _irr3g4tq", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _bfhkr01l _16qs1jze _d0altlke _irr3r01l", isDisabled && "_irr31j28 _d0al13gf", isOptionDisabled && "_syaz8q0r", isOptionDisabled && "_irr31j28 _d0al13gf"])

package/dist/es2019/ui/common/modal/popup-select/checkbox-option-visual-refresh-sllv.compiled.css

@@ -0,0 +1,15 @@
+
+._189eyh40{border-width:2px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._16qsglyw{box-shadow:none}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tipxbi{padding-inline-end:var(--ds-space-200,1pc)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/es2019/ui/common/modal/popup-select/checkbox-option-visual-refresh-sllv.js

@@ -0,0 +1,19 @@
+/* checkbox-option-visual-refresh-sllv.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./checkbox-option-visual-refresh-sllv.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { CheckboxOption } from '@atlaskit/select';
+const checkboxStyles = null;
+const checkboxSelectedStyles = null;
+const checkboxFocusedStyles = null;
+export const CheckboxOptionVisualRefreshSllv = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(CheckboxOption
+  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+  , _extends({}, props, {
+    className: ax(["_189eyh40 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
+  }), children);
+};

package/dist/es2019/ui/common/modal/popup-select/control.compiled.css

@@ -0,0 +1,4 @@
+._19bvh9hh{padding-left:var(--ds-space-100,4px)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f3h9hh{padding-right:var(--ds-space-100,4px)}

package/dist/es2019/ui/common/modal/popup-select/control.js

@@ -1,19 +1,40 @@
+/* control.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./control.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 import { N40 } from '@atlaskit/theme/colors';
-const popupCustomControlStyles = () => ({
+import { withFeatureFlaggedComponent } from '../../../../common/utils/withFeatureFlaggedComponent';
+const popupCustomControlStylesOld = () => ({
   display: 'flex',
   padding: "var(--ds-space-050, 4px)",
   border: 'none',
   borderBottom: `solid 1px ${`var(--ds-border, ${N40})`}`,
   minHeight: 'auto'
 });
-export const CustomControl = ({
+const popupCustomControlStyles = () => ({
+  display: 'flex',
+  borderRadius: '3px',
+  border: `solid 1px ${"var(--ds-border-input, #8C8F97)"}`
+});
+const popupCustomControlVisualRefreshStyles = {
+  container: "_ca0q1b66 _n3td1b66 _19bvh9hh _u5f3h9hh"
+};
+export const CustomControlOld = ({
   children,
   ...innerProps
 }) => /*#__PURE__*/React.createElement(components.Control, _extends({}, innerProps, {
-  getStyles: popupCustomControlStyles,
-  appearance: "none"
+  getStyles: popupCustomControlStylesOld
 }), children);
-export default CustomControl;
+export const CustomControl = ({
+  children,
+  ...innerProps
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: popupCustomControlVisualRefreshStyles.container
+}, /*#__PURE__*/React.createElement(components.Control, _extends({}, innerProps, {
+  getStyles: popupCustomControlStyles
+}), children));
+export default withFeatureFlaggedComponent(CustomControlOld, CustomControl, () => fg('platform-linking-visual-refresh-sllv'));

package/dist/es2019/ui/common/modal/popup-select/dropdownIndicator.js

@@ -2,8 +2,11 @@
 import "./dropdownIndicator.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import CloseIcon from '@atlaskit/icon/core/migration/cross-circle';
-import SearchIcon from '@atlaskit/icon/core/migration/search';
+import CloseIcon from '@atlaskit/icon/core/cross-circle';
+import CloseIconOld from '@atlaskit/icon/core/migration/cross-circle';
+import SearchIconOld from '@atlaskit/icon/core/migration/search';
+import SearchIcon from '@atlaskit/icon/core/search';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 const styles = {
@@ -13,6 +16,20 @@ const CustomDropdownIndicator = props => {
   const {
     selectProps
   } = props;
+  const closeIcon = fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(CloseIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(CloseIconOld, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  });
+  const searchIcon = fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(SearchIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(SearchIconOld, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  });
   return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.customDropdownIndicatorStyles,
     onClick: () => {
@@ -23,14 +40,6 @@ const CustomDropdownIndicator = props => {
         });
       }
     }
-  }, selectProps.inputValue ? /*#__PURE__*/React.createElement(CloseIcon, {
-    LEGACY_size: "small",
-    label: "",
-    color: "currentColor"
-  }) : /*#__PURE__*/React.createElement(SearchIcon, {
-    LEGACY_size: "small",
-    label: "",
-    color: "currentColor"
-  })));
+  }, selectProps.inputValue ? closeIcon : searchIcon));
 };
 export default CustomDropdownIndicator;

package/dist/es2019/ui/common/modal/popup-select/footer.compiled.css

@@ -1,8 +1,12 @@
 
 ._195gutpp{margin-inline:var(--ds-space-150,9pt)}
 ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._15a5nqa1{border-top-style:solid}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1i53b5v6{border-top-color:var(--ds-border,#dfe1e6)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

package/dist/es2019/ui/common/modal/popup-select/footer.js

@@ -3,13 +3,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./footer.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex, Inline } from '@atlaskit/primitives/compiled';
 import { N40 } from '@atlaskit/theme/colors';
 import { asyncPopupSelectMessages } from './messages';
 const styles = {
-  footerContainerStyles: "_ca0q1b66 _n3td1b66 _uwhke4h9 _15a5nqa1 _1i53b5v6",
-  footerPaginationInfoStyles: "_1mouu2gc _195gutpp _syaz131l"
+  footerContainerStylesOld: "_ca0q1b66 _n3td1b66 _uwhke4h9 _15a5nqa1 _1i53b5v6",
+  footerContainerStyles: "_ca0qutpp _n3tdutpp _19bvpxbi _u5f3pxbi _uwhke4h9 _15a5nqa1 _1i53b5v6",
+  footerPaginationInfoStylesOld: "_1mouu2gc _195gutpp _syaz131l",
+  footerPaginationInfoStyles: "_syaz131l"
 };
 const PopupFooter = ({
   currentDisplayCount,
@@ -21,9 +25,9 @@ const PopupFooter = ({
     direction: "row",
     alignItems: "center",
     justifyContent: "end",
-    xcss: styles.footerContainerStyles
+    xcss: cx(fg('platform-linking-visual-refresh-sllv') ? styles.footerContainerStyles : styles.footerContainerStylesOld)
   }, /*#__PURE__*/React.createElement(Inline, {
-    xcss: styles.footerPaginationInfoStyles
+    xcss: cx(fg('platform-linking-visual-refresh-sllv') ? styles.footerPaginationInfoStyles : styles.footerPaginationInfoStylesOld)
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, asyncPopupSelectMessages.paginationDetails, {
     values: {
       currentDisplayCount,