@atlaskit/link-picker 3.1.1 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 3.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.1
 
 ### Patch Changes

package/dist/cjs/common/generic-error-svg-v2/index.compiled.css

@@ -0,0 +1,3 @@
+._1bsbwdok{width:var(--_cjikvn)}
+._1e0c1ule{display:block}
+._4t3iwdok{height:var(--_cjikvn)}

package/dist/cjs/common/generic-error-svg-v2/index.js

@@ -0,0 +1,54 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GenericErrorSVGV2 = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var SIZE = 96;
+var genericErrorStyles = null;
+var GenericErrorSVGV2 = exports.GenericErrorSVGV2 = function GenericErrorSVGV2(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2.default)({
+    viewBox: "0 0 96 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: (0, _runtime.ax)(["_1bsbwdok _4t3iwdok _1e0c1ule"]),
+    style: {
+      "--_cjikvn": (0, _runtime.ix)("".concat(SIZE, "px"))
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M64.861 32.06a27.753 27.753 0 0 0-2.667-4.133 28.187 28.187 0 0 0-3.376-3.669c-6.985-6.311-15.57-6.89-23.609-2.53a30.226 30.226 0 0 0-4.056 2.656 30.624 30.624 0 0 0-3.735 3.4c-6.225 6.717-7.82 15.154-3.505 23.462a28.108 28.108 0 0 0 2.698 4.193 27.67 27.67 0 0 0 3.33 3.62c6.94 6.266 15.518 6.85 23.596 2.507a30.492 30.492 0 0 0 4.23-2.758 30.07 30.07 0 0 0 3.593-3.257c6.252-6.692 7.847-15.161 3.494-23.49h.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M43.092 66.774c-5.306 0-10.382-1.997-14.75-5.938a30.405 30.405 0 0 1-3.62-3.93 30.243 30.243 0 0 1-2.928-4.553c-4.657-8.961-3.247-18.509 3.871-26.192a33.271 33.271 0 0 1 4.025-3.67 32.834 32.834 0 0 1 4.378-2.869c9.209-4.995 18.816-3.951 26.353 2.86a30.945 30.945 0 0 1 3.665 3.98 30.303 30.303 0 0 1 2.898 4.488c4.705 9.003 3.295 18.565-3.868 26.231a32.148 32.148 0 0 1-3.879 3.515 33.415 33.415 0 0 1-4.562 2.975c-3.858 2.073-7.782 3.1-11.583 3.1v.003Zm2.53-45.486c-3.019 0-6.147.84-9.275 2.54a28.433 28.433 0 0 0-3.735 2.448 28.059 28.059 0 0 0-3.442 3.135c-5.746 6.203-6.86 13.566-3.135 20.736a25.395 25.395 0 0 0 2.472 3.83 25.304 25.304 0 0 0 3.044 3.309c5.99 5.41 13.398 6.182 20.862 2.175a28.02 28.02 0 0 0 3.899-2.545 28.03 28.03 0 0 0 3.31-2.999c5.777-6.182 6.883-13.552 3.124-20.75a25.553 25.553 0 0 0-2.44-3.777 25.848 25.848 0 0 0-3.087-3.358c-3.49-3.153-7.442-4.744-11.59-4.744h-.006Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M62.822 59.694c-1.235-1.72-2.562-1.71-3.857-.708-1.215.939-1.54 2.21-.244 3.882l1.48 1.913 4.102-3.174-1.48-1.913Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "m65.334 60.811-6.159 4.762L70.748 80.54l6.16-4.761L65.333 60.81Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#B7B9BE",
+    d: "m64.344 61.577-4.178 3.23 3.925 5.076 4.178-3.23-3.925-5.076Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M55.057 33.452 36.213 52.296l-2.468-2.469 18.844-18.844 2.468 2.469Z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M52.589 52.296 33.745 33.452l2.468-2.469 18.844 18.844-2.468 2.469Z",
+    clipRule: "evenodd"
+  }));
+};

package/dist/cjs/common/ui/empty-state/index.compiled.css

@@ -1,3 +1,7 @@
+._19bvoahv{padding-left:var(--ds-space-600,3pc)}
 ._1pfhoahv{margin-block-start:var(--ds-space-600,3pc)}
 ._6rthoahv{margin-block-end:var(--ds-space-600,3pc)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1jfw{padding-bottom:var(--ds-space-500,40px)}
+._u5f3oahv{padding-right:var(--ds-space-600,3pc)}
 ._y3gn1h6o{text-align:center}

package/dist/cjs/common/ui/empty-state/index.js

@@ -11,17 +11,35 @@ require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
-  container: "_1pfhoahv _6rthoahv _y3gn1h6o"
+  container: "_1pfhoahv _6rthoahv _y3gn1h6o",
+  containerV2: "_ca0q1ejb _u5f3oahv _19bvoahv _n3td1jfw _y3gn1h6o"
 };
 var EmptyState = exports.EmptyState = function EmptyState(_ref) {
   var testId = _ref.testId,
     header = _ref.header,
     description = _ref.description,
+    action = _ref.action,
     renderImage = _ref.renderImage;
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker')) {
+    return /*#__PURE__*/React.createElement(_compiled.Flex, {
+      xcss: styles.containerV2,
+      testId: testId,
+      direction: "column",
+      alignItems: "center",
+      gap: "space.200"
+    }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(_heading.default, {
+      size: "small",
+      as: "h2"
+    }, header), description && /*#__PURE__*/React.createElement(_compiled.Text, {
+      as: "p",
+      color: "color.text"
+    }, description), action && action);
+  }
   return /*#__PURE__*/React.createElement(_compiled.Flex, {
     xcss: styles.container,
     testId: testId,

package/dist/cjs/ui/error-boundary/error-boundary-fallback/index.js

@@ -13,6 +13,7 @@ var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../common/constants");
 var _genericErrorSvg = require("../../../common/generic-error-svg");
+var _genericErrorSvgV = require("../../../common/generic-error-svg-v2");
 var _emptyState = require("../../../common/ui/empty-state");
 var _minHeightContainer = require("../../../common/ui/min-height-container");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -41,7 +42,9 @@ var ErrorBoundaryFallback = exports.ErrorBoundaryFallback = function ErrorBounda
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c81vhk" : "_vwz44jg8"])
   }, /*#__PURE__*/React.createElement(_emptyState.EmptyState, {
     header: header,
-    renderImage: function renderImage() {
+    renderImage: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? function () {
+      return /*#__PURE__*/React.createElement(_genericErrorSvgV.GenericErrorSVGV2, null);
+    } : function () {
       return /*#__PURE__*/React.createElement(_genericErrorSvg.GenericErrorSVG, null);
     },
     description: description

package/dist/cjs/ui/link-picker/form-footer/index.compiled.css

@@ -1,3 +1,4 @@
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._2hwx1wug{margin-right:auto}
+._2hwx1wug{margin-right:auto}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}

package/dist/cjs/ui/link-picker/form-footer/index.js

@@ -17,6 +17,7 @@ var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
 var _add2 = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _errors = require("../../../common/utils/errors");
 var _linkPickerSubmitButton = require("./link-picker-submit-button");
@@ -24,6 +25,7 @@ var _excluded = ["isLoading", "isSubmitting", "error", "url", "queryState", "ite
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var formFooterStyles = null;
+var formFooterV2Styles = null;
 var formFooterActionStyles = null;
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   cancelButton: {
@@ -79,7 +81,8 @@ var FormFooter = exports.FormFooter = /*#__PURE__*/(0, _react.memo)(function (_r
     }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
   };
   return /*#__PURE__*/React.createElement("footer", (0, _extends2.default)({
-    className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3", className])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? "_1e0c1txw _1bahesu3 _ca0qpxbi" : "_1e0c1txw _1bahesu3", className])
   }, restProps), isSubmitting && /*#__PURE__*/React.createElement(_visuallyHidden.default, {
     role: "status",
     id: submitMessageId,

package/dist/cjs/ui/link-picker/index.compiled.css

@@ -1,10 +1,13 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bv164s{padding-left:var(--link-picker-padding-left)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._1e0c1txw{display:flex}
 ._1e0ctcjq{display:block!important}
 ._2lx21bp4{flex-direction:column}
 ._ca0q1k79{padding-top:var(--link-picker-padding-top)}
 ._n3td1t3k{padding-bottom:var(--link-picker-padding-bottom)}
+._syaz1be1{color:var(--ds-text-subtlest,#253858)}
 ._u5f31pah{padding-right:var(--link-picker-padding-right)}
 ._vchhusvi{box-sizing:border-box}
 ._vwz44jg8{line-height:normal}

package/dist/cjs/ui/link-picker/index.js

@@ -17,10 +17,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _form = require("@atlaskit/form");
 var _url2 = require("@atlaskit/linking-common/url");
 var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _colors = require("@atlaskit/theme/colors");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _analytics = require("../../common/analytics");
 var _constants = require("../../common/constants");
@@ -41,7 +43,9 @@ 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 = {
-  fullWidthSubmitButton: "_19pkpxbi _1e0c1txw _2lx21bp4"
+  fullWidthSubmitButton: "_19pkpxbi _1e0c1txw _2lx21bp4",
+  linkDisplayHelperTextContainer: "_19pk1b66 _syaz1be1",
+  linkDisplayHelperText: "_11c81o8v"
 };
 var baseRootContainerStyles = null;
 // To be removed when platform-linking-visual-refresh-v1 is removed
@@ -51,7 +55,8 @@ var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
-  textInputField: 'link-text'
+  textInputField: 'link-text',
+  linkHelperText: 'link-helper-text'
 }, _searchResults.testIds), _formFooter.testIds), _textInput.testIds);
 var initState = {
   url: '',
@@ -360,7 +365,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
-  })), !hideDisplayText && /*#__PURE__*/React.createElement(DisplayTextInputField, {
+  })), !hideDisplayText && /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,
@@ -371,7 +376,9 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), moveSubmitButton && /*#__PURE__*/React.createElement(_compiled.Box, {
+  }), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') && /*#__PURE__*/React.createElement(_form.HelperMessage, {
+    testId: testIds.linkHelperText
+  }, customMessages !== null && customMessages !== void 0 && customMessages.linkHelperTextLabel ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) : intl.formatMessage(_messages.linkTextMessages.linkHelperTextLabel))), moveSubmitButton && /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.fullWidthSubmitButton
   }, /*#__PURE__*/React.createElement(_linkPickerSubmitButton.LinkPickerSubmitButton, {
     isEditing: isEditing,

package/dist/cjs/ui/link-picker/messages.js

@@ -71,6 +71,16 @@ var linkTextMessages = exports.linkTextMessages = (0, _reactIntlNext.defineMessa
     id: 'fabric.linkPicker.clearLinkText',
     defaultMessage: 'Clear text',
     description: 'Tooltip message for link input clear button'
+  },
+  linkHelperTextLabel: {
+    id: 'fabric.linkPicker.linkHelperTextLabel',
+    defaultMessage: 'Give this link a title or description',
+    description: 'Helper text for the link display input'
+  },
+  linkHelperTextAriaLabel: {
+    id: 'fabric.linkPicker.linkHelperTextAriaLabel',
+    defaultMessage: 'Link display helper text',
+    description: 'Aria label for the helper text of the link display input'
   }
 });
 var timeMessages = exports.timeMessages = (0, _reactIntlNext.defineMessages)({

package/dist/cjs/ui/link-picker/search-results/index.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
@@ -95,5 +96,7 @@ var SearchResults = exports.SearchResults = function SearchResults(_ref) {
     activePlugin: activePlugin,
     adaptiveHeight: adaptiveHeight,
     tabPanelId: "".concat(testIds.tabList, "-").concat(activeTab, "-tab")
-  }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 || (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : /*#__PURE__*/React.createElement(_linkSearchError.LinkSearchError, null) : null));
+  }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 || (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : /*#__PURE__*/React.createElement(_linkSearchError.LinkSearchError, {
+    onRetry: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? retry : undefined
+  }) : null));
 };

package/dist/cjs/ui/link-picker/search-results/link-search-error/index.js

@@ -10,7 +10,9 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _atlassianContext = require("@atlaskit/atlassian-context");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _genericErrorSvg = require("../../../../common/generic-error-svg");
+var _genericErrorSvgV = require("../../../../common/generic-error-svg-v2");
 var _emptyState = require("../../../../common/ui/empty-state");
 var CONTACT_SUPPORT_LINK = exports.CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 var CONTACT_SUPPORT_LINK_FEDRAMP = exports.CONTACT_SUPPORT_LINK_FEDRAMP = 'https://gcs.atlassian-us-gov-mod.net/servicedesk/customer/portals';
@@ -24,12 +26,18 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linkPicker.search.error.description',
     defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
     description: 'Describes possible actions when search throws an error'
+  },
+  searchErrorAction: {
+    id: 'fabric.linkPicker.search.error.retry',
+    defaultMessage: 'Refresh',
+    description: 'Describe the action user can take to retry the search'
   }
 });
 var testIds = exports.testIds = {
   searchError: 'link-search-error'
 };
-var LinkSearchError = exports.LinkSearchError = function LinkSearchError() {
+var LinkSearchError = exports.LinkSearchError = function LinkSearchError(_ref) {
+  var onRetry = _ref.onRetry;
   var intl = (0, _reactIntlNext.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_emptyState.EmptyState, {
     testId: testIds.searchError,
@@ -47,7 +55,13 @@ var LinkSearchError = exports.LinkSearchError = function LinkSearchError() {
         }
       }
     })),
-    renderImage: function renderImage() {
+    action: onRetry && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? /*#__PURE__*/_react.default.createElement(_button.default, {
+      appearance: "primary",
+      onClick: onRetry
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.searchErrorAction)) : null,
+    renderImage: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? function () {
+      return /*#__PURE__*/_react.default.createElement(_genericErrorSvgV.GenericErrorSVGV2, null);
+    } : function () {
       return /*#__PURE__*/_react.default.createElement(_genericErrorSvg.GenericErrorSVG, null);
     }
   });

package/dist/cjs/ui/link-picker/search-results/link-search-list/link-search-no-results/index.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.testIds = exports.messages = exports.NoResults = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _emptyState = require("../../../../../common/ui/empty-state");
 var _noResultsSvg = require("./no-results-svg");
+var _noResultsSvgV = require("./no-results-svg-v2");
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   noResults: {
     id: 'fabric.linkPicker.search.noResults.heading',
@@ -30,7 +32,9 @@ var NoResults = exports.NoResults = function NoResults() {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
     description: intl.formatMessage(messages.noResultsDescription),
-    renderImage: function renderImage() {
+    renderImage: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? function () {
+      return /*#__PURE__*/_react.default.createElement(_noResultsSvgV.NoResultsV2SVG, null);
+    } : function () {
       return /*#__PURE__*/_react.default.createElement(_noResultsSvg.NoResultsSVG, null);
     }
   });

package/dist/cjs/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg-v2/index.compiled.css

@@ -0,0 +1,3 @@
+._1bsbwdok{width:var(--_cjikvn)}
+._1e0c1ule{display:block}
+._4t3iwdok{height:var(--_cjikvn)}

package/dist/cjs/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg-v2/index.js

@@ -0,0 +1,49 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoResultsV2SVG = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var SIZE = 96;
+var noResultsSVGStyles = null;
+var NoResultsV2SVG = exports.NoResultsV2SVG = function NoResultsV2SVG() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 96 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: (0, _runtime.ax)(["_1bsbwdok _4t3iwdok _1e0c1ule"]),
+    style: {
+      "--_cjikvn": (0, _runtime.ix)("".concat(SIZE, "px"))
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M64.861 32.06a27.747 27.747 0 0 0-2.667-4.133 28.188 28.188 0 0 0-3.376-3.669c-6.985-6.311-15.57-6.89-23.609-2.53a30.246 30.246 0 0 0-4.056 2.656 30.624 30.624 0 0 0-3.735 3.4c-6.225 6.717-7.82 15.154-3.505 23.463a28.103 28.103 0 0 0 2.698 4.192 27.67 27.67 0 0 0 3.33 3.62c6.94 6.267 15.518 6.85 23.596 2.507a30.502 30.502 0 0 0 4.23-2.758 30.071 30.071 0 0 0 3.593-3.257c6.252-6.692 7.847-15.161 3.494-23.49h.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M43.092 66.774c-5.306 0-10.382-1.997-14.75-5.938a30.405 30.405 0 0 1-3.62-3.93 30.222 30.222 0 0 1-2.928-4.553c-4.657-8.96-3.247-18.509 3.871-26.192a33.27 33.27 0 0 1 4.025-3.669 32.825 32.825 0 0 1 4.378-2.87c9.209-4.995 18.816-3.951 26.353 2.86a30.96 30.96 0 0 1 3.665 3.98 30.302 30.302 0 0 1 2.898 4.489c4.706 9.003 3.295 18.564-3.868 26.23a32.157 32.157 0 0 1-3.879 3.516 33.436 33.436 0 0 1-4.562 2.974c-3.858 2.073-7.781 3.1-11.583 3.1v.003Zm2.53-45.486c-3.019 0-6.147.841-9.274 2.541a28.43 28.43 0 0 0-3.736 2.447 28.058 28.058 0 0 0-3.442 3.135c-5.746 6.203-6.86 13.566-3.135 20.736a25.4 25.4 0 0 0 2.472 3.83 25.297 25.297 0 0 0 3.044 3.309c5.99 5.41 13.398 6.182 20.862 2.175a28.01 28.01 0 0 0 3.9-2.545 28.04 28.04 0 0 0 3.308-2.999c5.778-6.182 6.885-13.552 3.125-20.75a25.545 25.545 0 0 0-2.44-3.777 25.854 25.854 0 0 0-3.086-3.358c-3.491-3.152-7.443-4.744-11.59-4.744h-.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M62.822 59.695c-1.235-1.721-2.562-1.71-3.857-.709-1.215.939-1.54 2.21-.244 3.882l1.48 1.913 4.102-3.173-1.48-1.913Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "m65.334 60.811-6.158 4.762 11.573 14.969 6.159-4.762L65.334 60.81Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#B7B9BE",
+    d: "m64.344 61.577-4.178 3.23 3.925 5.076 4.178-3.23-3.925-5.076Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M46.496 47.476h-3.492v-.221c-.119-2.484 1.29-5.174 3.295-6.274l.038-.02c.054-.028.107-.061.157-.095 1.094-.705 1.717-1.92 1.678-3.257-.038-1.326-.722-2.49-1.829-3.117a4.596 4.596 0 0 0-2.256-.605c-2.365 0-4.289 1.938-4.289 4.319h-3.492c0-4.32 3.49-7.835 7.78-7.835 1.375 0 2.747.365 3.967 1.055 2.186 1.237 3.536 3.51 3.61 6.082.074 2.583-1.15 4.943-3.272 6.312-.143.093-.289.18-.433.256-.832.468-1.529 1.907-1.465 3.033l.003.367Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M44.413 49.492a3.465 3.465 0 0 1 1.119-.003c1.138.187 2.064.985 2.289 2.229l.002.009.001.01a3.419 3.419 0 0 1-.001 1.126v.004c-.22 1.256-1.161 2.052-2.295 2.236a3.5 3.5 0 0 1-1.108-.003h-.001c-1.14-.184-2.07-.981-2.296-2.224l-.002-.01-.001-.01a3.37 3.37 0 0 1 0-1.12l.001-.01.002-.01c.227-1.249 1.161-2.034 2.288-2.223h.002Z",
+    clipRule: "evenodd"
+  }));
+};

package/dist/cjs/ui/link-picker/search-results/link-search-list/list-item/index.compiled.css

@@ -21,6 +21,7 @@
 ._otyridpf{margin-bottom:0}
 ._p12fpxbi{max-width:var(--ds-space-200,1pc)}
 ._syaz121t{color:var(--_1pseksa)}
+._syaz1svm{color:var(--_1trgtlr)}
 ._syazct01{color:var(--_khvm95)}
 ._syazpsu8{color:var(--_vrm7dk)}
 ._u5f3kq6n{padding-right:var(--_1kucder)}

package/dist/cjs/ui/link-picker/search-results/link-search-list/list-item/index.js

@@ -35,6 +35,7 @@ var listItemContextStyles = null;
 var listItemContainerStyles = null;
 var listItemContainerInnerStyles = null;
 var listItemContainerInnerStylesA11yRefresh = null;
+var listItemContainerInnerStylesSeparatorLinkPickerRefresh = null;
 var itemNameStyles = null;
 var imgStyles = null;
 var listItemBaseStyles = null;
@@ -89,7 +90,12 @@ var ListItemSubtitle = function ListItemSubtitle(_ref) {
       "--_1pseksa": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N400, ")")),
       "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
     }
-  }, /*#__PURE__*/React.createElement(_react.Fragment, null, "\xA0 \u2022\xA0 "), /*#__PURE__*/React.createElement(_react.Fragment, null, secondItem)));
+  }, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_syaz1svm"]),
+    style: {
+      "--_1trgtlr": (0, _runtime.ix)("var(--ds-border, ".concat(_colors.N40A, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(_react.Fragment, null, "\xA0 \u2022\xA0 ")) : /*#__PURE__*/React.createElement(_react.Fragment, null, "\xA0 \u2022\xA0 "), /*#__PURE__*/React.createElement(_react.Fragment, null, secondItem)));
 };
 var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
   var container = item.container;

package/dist/cjs/ui/link-picker/search-results/search-results-container/index.js

@@ -10,6 +10,7 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _minHeightContainer = require("../../../../common/ui/min-height-container");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -21,7 +22,7 @@ var SearchResultsContainer = exports.SearchResultsContainer = function SearchRes
     children = _ref.children;
   var ref = (0, _react.useRef)(null);
   var currentHeight = (0, _react.useRef)(null);
-  var fixedMinHeight = hasTabs ? '347px' : '302px';
+  var fixedMinHeight = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-link-picker') ? hasTabs ? '296px' : '251px' : hasTabs ? '347px' : '302px';
   var adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? "".concat(currentHeight.current, "px") : 'auto';
   var minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
   (0, _react.useLayoutEffect)(function () {

package/dist/cjs/ui/main.js

@@ -26,7 +26,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.1.1" || '',
+  packageVersion: "3.1.2" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

package/dist/es2019/common/generic-error-svg-v2/index.compiled.css

@@ -0,0 +1,3 @@
+._1bsb16xz{width:6pc}
+._1e0c1ule{display:block}
+._4t3i16xz{height:6pc}

package/dist/es2019/common/generic-error-svg-v2/index.js

@@ -0,0 +1,41 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const SIZE = 96;
+const genericErrorStyles = null;
+export const GenericErrorSVGV2 = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 96 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: ax(["_1bsb16xz _4t3i16xz _1e0c1ule"])
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M64.861 32.06a27.753 27.753 0 0 0-2.667-4.133 28.187 28.187 0 0 0-3.376-3.669c-6.985-6.311-15.57-6.89-23.609-2.53a30.226 30.226 0 0 0-4.056 2.656 30.624 30.624 0 0 0-3.735 3.4c-6.225 6.717-7.82 15.154-3.505 23.462a28.108 28.108 0 0 0 2.698 4.193 27.67 27.67 0 0 0 3.33 3.62c6.94 6.266 15.518 6.85 23.596 2.507a30.492 30.492 0 0 0 4.23-2.758 30.07 30.07 0 0 0 3.593-3.257c6.252-6.692 7.847-15.161 3.494-23.49h.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M43.092 66.774c-5.306 0-10.382-1.997-14.75-5.938a30.405 30.405 0 0 1-3.62-3.93 30.243 30.243 0 0 1-2.928-4.553c-4.657-8.961-3.247-18.509 3.871-26.192a33.271 33.271 0 0 1 4.025-3.67 32.834 32.834 0 0 1 4.378-2.869c9.209-4.995 18.816-3.951 26.353 2.86a30.945 30.945 0 0 1 3.665 3.98 30.303 30.303 0 0 1 2.898 4.488c4.705 9.003 3.295 18.565-3.868 26.231a32.148 32.148 0 0 1-3.879 3.515 33.415 33.415 0 0 1-4.562 2.975c-3.858 2.073-7.782 3.1-11.583 3.1v.003Zm2.53-45.486c-3.019 0-6.147.84-9.275 2.54a28.433 28.433 0 0 0-3.735 2.448 28.059 28.059 0 0 0-3.442 3.135c-5.746 6.203-6.86 13.566-3.135 20.736a25.395 25.395 0 0 0 2.472 3.83 25.304 25.304 0 0 0 3.044 3.309c5.99 5.41 13.398 6.182 20.862 2.175a28.02 28.02 0 0 0 3.899-2.545 28.03 28.03 0 0 0 3.31-2.999c5.777-6.182 6.883-13.552 3.124-20.75a25.553 25.553 0 0 0-2.44-3.777 25.848 25.848 0 0 0-3.087-3.358c-3.49-3.153-7.442-4.744-11.59-4.744h-.006Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M62.822 59.694c-1.235-1.72-2.562-1.71-3.857-.708-1.215.939-1.54 2.21-.244 3.882l1.48 1.913 4.102-3.174-1.48-1.913Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "m65.334 60.811-6.159 4.762L70.748 80.54l6.16-4.761L65.333 60.81Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#B7B9BE",
+    d: "m64.344 61.577-4.178 3.23 3.925 5.076 4.178-3.23-3.925-5.076Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M55.057 33.452 36.213 52.296l-2.468-2.469 18.844-18.844 2.468 2.469Z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M52.589 52.296 33.745 33.452l2.468-2.469 18.844 18.844-2.468 2.469Z",
+    clipRule: "evenodd"
+  }));
+};

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

@@ -1,3 +1,7 @@
+._19bvoahv{padding-left:var(--ds-space-600,3pc)}
 ._1pfhoahv{margin-block-start:var(--ds-space-600,3pc)}
 ._6rthoahv{margin-block-end:var(--ds-space-600,3pc)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1jfw{padding-bottom:var(--ds-space-500,40px)}
+._u5f3oahv{padding-right:var(--ds-space-600,3pc)}
 ._y3gn1h6o{text-align:center}

package/dist/es2019/common/ui/empty-state/index.js

@@ -3,16 +3,34 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import Heading from '@atlaskit/heading';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex, Text } from '@atlaskit/primitives/compiled';
 const styles = {
-  container: "_1pfhoahv _6rthoahv _y3gn1h6o"
+  container: "_1pfhoahv _6rthoahv _y3gn1h6o",
+  containerV2: "_ca0q1ejb _u5f3oahv _19bvoahv _n3td1jfw _y3gn1h6o"
 };
 export const EmptyState = ({
   testId,
   header,
   description,
+  action,
   renderImage
 }) => {
+  if (fg('platform-linking-visual-refresh-link-picker')) {
+    return /*#__PURE__*/React.createElement(Flex, {
+      xcss: styles.containerV2,
+      testId: testId,
+      direction: "column",
+      alignItems: "center",
+      gap: "space.200"
+    }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Heading, {
+      size: "small",
+      as: "h2"
+    }, header), description && /*#__PURE__*/React.createElement(Text, {
+      as: "p",
+      color: "color.text"
+    }, description), action && action);
+  }
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.container,
     testId: testId,

package/dist/es2019/ui/error-boundary/error-boundary-fallback/index.js

@@ -6,6 +6,7 @@ import { defineMessages, useIntl } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
+import { GenericErrorSVGV2 } from '../../../common/generic-error-svg-v2';
 import { EmptyState } from '../../../common/ui/empty-state';
 import { MinHeightContainer } from '../../../common/ui/min-height-container';
 const errorBoundaryFallbackStyles = null;
@@ -32,7 +33,7 @@ export const ErrorBoundaryFallback = () => {
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c81vhk" : "_vwz44jg8"])
   }, /*#__PURE__*/React.createElement(EmptyState, {
     header: header,
-    renderImage: () => /*#__PURE__*/React.createElement(GenericErrorSVG, null),
+    renderImage: fg('platform-linking-visual-refresh-link-picker') ? () => /*#__PURE__*/React.createElement(GenericErrorSVGV2, null) : () => /*#__PURE__*/React.createElement(GenericErrorSVG, null),
     description: description
   }));
 };

package/dist/es2019/ui/link-picker/form-footer/index.compiled.css

@@ -1,3 +1,4 @@
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
-._2hwx1wug{margin-right:auto}
+._2hwx1wug{margin-right:auto}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}

package/dist/es2019/ui/link-picker/form-footer/index.js

@@ -8,10 +8,12 @@ import { defineMessages, useIntl } from 'react-intl-next';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import EditorAddIconLegacy from '@atlaskit/icon/glyph/editor/add';
 import EditorAddIcon from '@atlaskit/icon/utility/add';
+import { fg } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { UnauthenticatedError } from '../../../common/utils/errors';
 import { LinkPickerSubmitButton } from './link-picker-submit-button';
 const formFooterStyles = null;
+const formFooterV2Styles = null;
 const formFooterActionStyles = null;
 export const messages = defineMessages({
   cancelButton: {
@@ -65,7 +67,8 @@ export const FormFooter = /*#__PURE__*/memo(({
     "aria-labelledby": isSubmitting ? submitMessageId : undefined
   }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
   return /*#__PURE__*/React.createElement("footer", _extends({
-    className: ax(["_1e0c1txw _1bahesu3", className])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([fg('platform-linking-visual-refresh-link-picker') ? "_1e0c1txw _1bahesu3 _ca0qpxbi" : "_1e0c1txw _1bahesu3", className])
   }, restProps), isSubmitting && /*#__PURE__*/React.createElement(VisuallyHidden, {
     role: "status",
     id: submitMessageId,