@atlaskit/link-picker 3.1.0 → 3.1.2

package/dist/es2019/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/es2019/ui/link-picker/index.js

@@ -7,10 +7,12 @@ import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } fro
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { HelperMessage } from '@atlaskit/form';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import { N700 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
@@ -27,7 +29,9 @@ import { testIds as textFieldTestIds, TextInput } from './text-input';
 import { TrackMount } from './track-mount';
 import { getDataSource, getScreenReaderText } from './utils';
 const styles = {
-  fullWidthSubmitButton: "_19pkpxbi _1e0c1txw _2lx21bp4"
+  fullWidthSubmitButton: "_19pkpxbi _1e0c1txw _2lx21bp4",
+  linkDisplayHelperTextContainer: "_19pk1b66 _syaz1be1",
+  linkDisplayHelperText: "_11c81o8v"
 };
 const baseRootContainerStyles = null;
 // To be removed when platform-linking-visual-refresh-v1 is removed
@@ -38,6 +42,7 @@ export const testIds = {
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
+  linkHelperText: 'link-helper-text',
   ...searchTestIds,
   ...formFooterTestIds,
   ...textFieldTestIds
@@ -354,7 +359,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
-  })), !hideDisplayText && /*#__PURE__*/React.createElement(DisplayTextInputField, {
+  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,
@@ -365,7 +370,9 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), moveSubmitButton && /*#__PURE__*/React.createElement(Box, {
+  }), fg('platform-linking-visual-refresh-link-picker') && /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: testIds.linkHelperText
+  }, customMessages !== null && customMessages !== void 0 && customMessages.linkHelperTextLabel ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) : intl.formatMessage(linkTextMessages.linkHelperTextLabel))), moveSubmitButton && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.fullWidthSubmitButton
   }, /*#__PURE__*/React.createElement(LinkPickerSubmitButton, {
     isEditing: isEditing,

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

@@ -65,6 +65,16 @@ export const linkTextMessages = defineMessages({
     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'
   }
 });
 export const timeMessages = defineMessages({

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

@@ -3,6 +3,7 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
@@ -83,5 +84,7 @@ export const SearchResults = ({
     activePlugin: activePlugin,
     adaptiveHeight: adaptiveHeight,
     tabPanelId: `${testIds.tabList}-${activeTab}-tab`
-  }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? 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, null) : null));
+  }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? 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, {
+    onRetry: fg('platform-linking-visual-refresh-link-picker') ? retry : undefined
+  }) : null));
 };

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

@@ -3,7 +3,9 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
 import { isFedRamp } from '@atlaskit/atlassian-context';
 import Button from '@atlaskit/button';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { GenericErrorSVG } from '../../../../common/generic-error-svg';
+import { GenericErrorSVGV2 } from '../../../../common/generic-error-svg-v2';
 import { EmptyState } from '../../../../common/ui/empty-state';
 export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export const CONTACT_SUPPORT_LINK_FEDRAMP = 'https://gcs.atlassian-us-gov-mod.net/servicedesk/customer/portals';
@@ -17,12 +19,19 @@ export const messages = 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'
   }
 });
 export const testIds = {
   searchError: 'link-search-error'
 };
-export const LinkSearchError = () => {
+export const LinkSearchError = ({
+  onRetry
+}) => {
   const intl = useIntl();
   return /*#__PURE__*/React.createElement(EmptyState, {
     testId: testIds.searchError,
@@ -38,6 +47,10 @@ export const LinkSearchError = () => {
         }, label)
       }
     })),
-    renderImage: () => /*#__PURE__*/React.createElement(GenericErrorSVG, null)
+    action: onRetry && fg('platform-linking-visual-refresh-link-picker') ? /*#__PURE__*/React.createElement(Button, {
+      appearance: "primary",
+      onClick: onRetry
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchErrorAction)) : null,
+    renderImage: fg('platform-linking-visual-refresh-link-picker') ? () => /*#__PURE__*/React.createElement(GenericErrorSVGV2, null) : () => /*#__PURE__*/React.createElement(GenericErrorSVG, null)
   });
 };

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EmptyState } from '../../../../../common/ui/empty-state';
 import { NoResultsSVG } from './no-results-svg';
+import { NoResultsV2SVG } from './no-results-svg-v2';
 export const messages = defineMessages({
   noResults: {
     id: 'fabric.linkPicker.search.noResults.heading',
@@ -23,6 +25,6 @@ export const NoResults = () => {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
     description: intl.formatMessage(messages.noResultsDescription),
-    renderImage: () => /*#__PURE__*/React.createElement(NoResultsSVG, null)
+    renderImage: fg('platform-linking-visual-refresh-link-picker') ? () => /*#__PURE__*/React.createElement(NoResultsV2SVG, null) : () => /*#__PURE__*/React.createElement(NoResultsSVG, null)
   });
 };

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

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

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

@@ -0,0 +1,37 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const SIZE = 96;
+const noResultsSVGStyles = null;
+export const NoResultsV2SVG = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 96 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: ax(["_1bsb16xz _4t3i16xz _1e0c1ule"])
+  }, /*#__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/es2019/ui/link-picker/search-results/link-search-list/list-item/index.compiled.css

@@ -23,6 +23,7 @@
 ._syaz14xw{color:var(--ds-text,#5e6c84)}
 ._syaz1a45{color:var(--ds-text-subtle,#505f79)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._syazxs3e{color:var(--ds-border,rgba(9,30,66,.13))}
 ._u5f3fxbg{padding-right:clamp(var(--ds-space-100,8px),var(--link-picker-padding-right),100%)}
 ._1a3b1r31:focus{text-decoration-color:currentColor}
 ._1hvw1o36:focus{outline-width:medium}

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

@@ -6,7 +6,7 @@ import { forwardRef, Fragment } from 'react';
 import { useIntl } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
-import { B100, B400, B50, N20, N200, N300, N400 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, N20, N200, N300, N400, N40A } from '@atlaskit/theme/colors';
 /* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
 import { transformTimeStamp } from '../../../transformTimeStamp';
 export const testIds = {
@@ -20,6 +20,7 @@ const listItemContextStyles = null;
 const listItemContainerStyles = null;
 const listItemContainerInnerStyles = null;
 const listItemContainerInnerStylesA11yRefresh = null;
+const listItemContainerInnerStylesSeparatorLinkPickerRefresh = null;
 const itemNameStyles = null;
 const imgStyles = null;
 const listItemBaseStyles = null;
@@ -66,7 +67,9 @@ const ListItemSubtitle = ({
     className: ax([fg('bandicoots-a11y-link-picker-styling') ? "_syaz1a45 _o5721q9c" : "_syaz1wmz _o5721q9c"])
   }, firstItem)), secondItem && /*#__PURE__*/React.createElement("div", {
     className: ax([fg('bandicoots-a11y-link-picker-styling') ? "_syaz1a45 _o5721q9c" : "_syaz1wmz _o5721q9c"])
-  }, /*#__PURE__*/React.createElement(Fragment, null, "\xA0 \u2022\xA0 "), /*#__PURE__*/React.createElement(Fragment, null, secondItem)));
+  }, fg('platform-linking-visual-refresh-link-picker') ? /*#__PURE__*/React.createElement("span", {
+    className: ax(["_syazxs3e"])
+  }, /*#__PURE__*/React.createElement(Fragment, null, "\xA0 \u2022\xA0 ")) : /*#__PURE__*/React.createElement(Fragment, null, "\xA0 \u2022\xA0 "), /*#__PURE__*/React.createElement(Fragment, null, secondItem)));
 };
 const getDefaultSubtitleItems = (item, intl) => {
   const container = item.container;

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

@@ -3,6 +3,7 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useLayoutEffect, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MinHeightContainer } from '../../../../common/ui/min-height-container';
 const flexColumn = null;
 export const SearchResultsContainer = ({
@@ -13,7 +14,7 @@ export const SearchResultsContainer = ({
 }) => {
   const ref = useRef(null);
   const currentHeight = useRef(null);
-  const fixedMinHeight = hasTabs ? '347px' : '302px';
+  const fixedMinHeight = fg('platform-linking-visual-refresh-link-picker') ? hasTabs ? '296px' : '251px' : hasTabs ? '347px' : '302px';
   const adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? `${currentHeight.current}px` : 'auto';
   const minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
   useLayoutEffect(() => {

package/dist/es2019/ui/main.js

@@ -15,7 +15,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.1.0" || '',
+  packageVersion: "3.1.2" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/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/esm/common/generic-error-svg-v2/index.js

@@ -0,0 +1,44 @@
+/* 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";
+var SIZE = 96;
+var genericErrorStyles = null;
+export var GenericErrorSVGV2 = function 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(["_1bsbwdok _4t3iwdok _1e0c1ule"]),
+    style: {
+      "--_cjikvn": 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/esm/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/esm/common/ui/empty-state/index.js

@@ -3,15 +3,33 @@ 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';
 var styles = {
-  container: "_1pfhoahv _6rthoahv _y3gn1h6o"
+  container: "_1pfhoahv _6rthoahv _y3gn1h6o",
+  containerV2: "_ca0q1ejb _u5f3oahv _19bvoahv _n3td1jfw _y3gn1h6o"
 };
 export var EmptyState = function EmptyState(_ref) {
   var testId = _ref.testId,
     header = _ref.header,
     description = _ref.description,
+    action = _ref.action,
     renderImage = _ref.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/esm/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';
 var errorBoundaryFallbackStyles = null;
@@ -32,7 +33,9 @@ export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
     className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c81vhk" : "_vwz44jg8"])
   }, /*#__PURE__*/React.createElement(EmptyState, {
     header: header,
-    renderImage: function renderImage() {
+    renderImage: fg('platform-linking-visual-refresh-link-picker') ? function () {
+      return /*#__PURE__*/React.createElement(GenericErrorSVGV2, null);
+    } : function () {
       return /*#__PURE__*/React.createElement(GenericErrorSVG, null);
     },
     description: description

package/dist/esm/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/esm/ui/link-picker/form-footer/index.js

@@ -10,10 +10,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';
 var formFooterStyles = null;
+var formFooterV2Styles = null;
 var formFooterActionStyles = null;
 export var messages = defineMessages({
   cancelButton: {
@@ -69,7 +71,8 @@ export var FormFooter = /*#__PURE__*/memo(function (_ref) {
     }, 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,

package/dist/esm/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/esm/ui/link-picker/index.js

@@ -11,10 +11,12 @@ import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } fro
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { HelperMessage } from '@atlaskit/form';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import { N700 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
@@ -31,7 +33,9 @@ import { testIds as textFieldTestIds, TextInput } from './text-input';
 import { TrackMount } from './track-mount';
 import { getDataSource, getScreenReaderText } from './utils';
 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
@@ -41,7 +45,8 @@ export var testIds = _objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
-  textInputField: 'link-text'
+  textInputField: 'link-text',
+  linkHelperText: 'link-helper-text'
 }, searchTestIds), formFooterTestIds), textFieldTestIds);
 var initState = {
   url: '',
@@ -350,7 +355,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
-  })), !hideDisplayText && /*#__PURE__*/React.createElement(DisplayTextInputField, {
+  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,
@@ -361,7 +366,9 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), moveSubmitButton && /*#__PURE__*/React.createElement(Box, {
+  }), fg('platform-linking-visual-refresh-link-picker') && /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: testIds.linkHelperText
+  }, customMessages !== null && customMessages !== void 0 && customMessages.linkHelperTextLabel ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) : intl.formatMessage(linkTextMessages.linkHelperTextLabel))), moveSubmitButton && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.fullWidthSubmitButton
   }, /*#__PURE__*/React.createElement(LinkPickerSubmitButton, {
     isEditing: isEditing,

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

@@ -65,6 +65,16 @@ export var linkTextMessages = defineMessages({
     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'
   }
 });
 export var timeMessages = defineMessages({

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

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
 import { Fragment } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
@@ -85,5 +86,7 @@ export var 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, 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, {
+    onRetry: fg('platform-linking-visual-refresh-link-picker') ? retry : undefined
+  }) : null));
 };

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

@@ -3,7 +3,9 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
 import { isFedRamp } from '@atlaskit/atlassian-context';
 import Button from '@atlaskit/button';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { GenericErrorSVG } from '../../../../common/generic-error-svg';
+import { GenericErrorSVGV2 } from '../../../../common/generic-error-svg-v2';
 import { EmptyState } from '../../../../common/ui/empty-state';
 export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export var CONTACT_SUPPORT_LINK_FEDRAMP = 'https://gcs.atlassian-us-gov-mod.net/servicedesk/customer/portals';
@@ -17,12 +19,18 @@ export var messages = 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'
   }
 });
 export var testIds = {
   searchError: 'link-search-error'
 };
-export var LinkSearchError = function LinkSearchError() {
+export var LinkSearchError = function LinkSearchError(_ref) {
+  var onRetry = _ref.onRetry;
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(EmptyState, {
     testId: testIds.searchError,
@@ -40,7 +48,13 @@ export var LinkSearchError = function LinkSearchError() {
         }
       }
     })),
-    renderImage: function renderImage() {
+    action: onRetry && fg('platform-linking-visual-refresh-link-picker') ? /*#__PURE__*/React.createElement(Button, {
+      appearance: "primary",
+      onClick: onRetry
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchErrorAction)) : null,
+    renderImage: fg('platform-linking-visual-refresh-link-picker') ? function () {
+      return /*#__PURE__*/React.createElement(GenericErrorSVGV2, null);
+    } : function () {
       return /*#__PURE__*/React.createElement(GenericErrorSVG, null);
     }
   });

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EmptyState } from '../../../../../common/ui/empty-state';
 import { NoResultsSVG } from './no-results-svg';
+import { NoResultsV2SVG } from './no-results-svg-v2';
 export var messages = defineMessages({
   noResults: {
     id: 'fabric.linkPicker.search.noResults.heading',
@@ -23,7 +25,9 @@ export var NoResults = function NoResults() {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
     description: intl.formatMessage(messages.noResultsDescription),
-    renderImage: function renderImage() {
+    renderImage: fg('platform-linking-visual-refresh-link-picker') ? function () {
+      return /*#__PURE__*/React.createElement(NoResultsV2SVG, null);
+    } : function () {
       return /*#__PURE__*/React.createElement(NoResultsSVG, null);
     }
   });

package/dist/esm/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)}