@atlaskit/link-picker 1.48.3 → 1.49.1

package/dist/cjs/ui/link-picker/text-input/old/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.TextInputOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _form = require("@atlaskit/form");
+var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle--select-clear"));
+var _primitives = require("@atlaskit/primitives");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _conditionalSpotlightTargetWrapper = require("../conditional-spotlight-target-wrapper");
+var _utils = require("../utils");
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var fieldStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> div': {
+    marginTop: 0
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '& + &': {
+    marginTop: "var(--ds-space-200, 16px)"
+  }
+});
+var testIds = exports.testIds = {
+  urlError: 'link-error',
+  clearUrlButton: 'clear-text'
+};
+var clearTextButtonStyles = (0, _primitives.xcss)({
+  padding: 'space.0',
+  marginRight: 'space.050',
+  backgroundColor: 'color.background.neutral.subtle',
+  border: 'none',
+  verticalAlign: 'middle'
+});
+var TextInputOld = exports.TextInputOld = function TextInputOld(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    autoFocus = _ref.autoFocus,
+    onRedo = _ref.onRedo,
+    onUndo = _ref.onUndo,
+    onKeyDown = _ref.onKeyDown,
+    onClear = _ref.onClear,
+    clearLabel = _ref.clearLabel,
+    error = _ref.error,
+    spotlightTargetName = _ref.spotlightTargetName,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var inputRef = (0, _react.useRef)(null);
+  var handleRef = (0, _react.useCallback)(function (input) {
+    if (input) {
+      inputRef.current = input;
+      if (autoFocus) {
+        // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
+        input.focus({
+          preventScroll: true
+        });
+      }
+    }
+  }, [autoFocus]);
+  var handleKeydown = (0, _react.useCallback)(function (e) {
+    if (typeof onUndo === 'function' && (0, _utils.isUndoEvent)(e)) {
+      e.preventDefault();
+      onUndo();
+    } else if (typeof onRedo === 'function' && (0, _utils.isRedoEvent)(e)) {
+      e.preventDefault();
+      onRedo();
+    }
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  }, [onUndo, onRedo, onKeyDown]);
+  var handleClear = (0, _react.useCallback)(function (e) {
+    var _inputRef$current;
+    e.preventDefault();
+    e.stopPropagation();
+    onClear === null || onClear === void 0 || onClear(name);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, [name, onClear]);
+  var clearText = restProps.value !== '' && (0, _react2.jsx)(_tooltip.default, {
+    content: clearLabel
+  }, (0, _react2.jsx)(_primitives.Pressable, {
+    xcss: clearTextButtonStyles,
+    onClick: handleClear,
+    testId: testIds.clearUrlButton
+  }, (0, _react2.jsx)(_crossCircleSelectClear.default, {
+    LEGACY_size: "medium",
+    label: clearLabel || '',
+    color: "var(--ds-icon-subtle, #626F86)",
+    spacing: "spacious"
+  })));
+  return (0, _react2.jsx)("div", {
+    css: fieldStyles
+  }, (0, _react2.jsx)(_form.Field, {
+    label: label,
+    name: name
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
+    return (0, _react2.jsx)(_conditionalSpotlightTargetWrapper.ConditionalSpotlightTargetWrapper, {
+      spotlightTargetName: spotlightTargetName
+    }, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
+      onKeyDown: handleKeydown,
+      ref: handleRef,
+      elemAfterInput: clearText,
+      isInvalid: !!error
+    })), error && (0, _react2.jsx)(_form.ErrorMessage, {
+      testId: testIds.urlError
+    }, error)));
+  }));
+};

package/dist/cjs/ui/loader-fallback/index.compiled.css

@@ -0,0 +1 @@
+._4cvr1h6o{align-items:center}

package/dist/cjs/ui/loader-fallback/index.js

@@ -1,22 +1,22 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LoaderFallback = void 0;
-var _react = require("@emotion/react");
+exports.LoaderFallbackNew = exports.LoaderFallback = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _minHeightContainer = require("../../common/ui/min-height-container");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styles = (0, _react.css)({
-  alignItems: 'center'
-});
+var _old = require("./old");
+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 = null;
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '505px';
@@ -53,15 +53,21 @@ var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
  * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
  * to determine the height to prevent jumps in height when loading
  */
-var LoaderFallback = exports.LoaderFallback = function LoaderFallback(props) {
+var LoaderFallbackNew = exports.LoaderFallbackNew = function LoaderFallbackNew(props) {
   var minHeight = getEstimatedMinHeight(props);
-  return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
+  return /*#__PURE__*/React.createElement(_minHeightContainer.MinHeightContainer, {
     minHeight: minHeight,
     "data-testid": "link-picker-root-loader-boundary-ui",
-    css: styles
-  }, (0, _react.jsx)(_spinner.default, {
+    className: (0, _runtime.ax)(["_4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
     testId: "link-picker.component-loading-indicator",
     interactionName: props.name || 'link-picker-loading',
     size: "medium"
   }));
+};
+var LoaderFallback = exports.LoaderFallback = function LoaderFallback(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(LoaderFallbackNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_old.LoaderFallbackOld, props);
 };

package/dist/cjs/ui/loader-fallback/old/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoaderFallbackOld = void 0;
+var _react = require("@emotion/react");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _minHeightContainer = require("../../../common/ui/min-height-container");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var styles = (0, _react.css)({
+  alignItems: 'center'
+});
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '505px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT = '429px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
+var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
+  var hideDisplayText = _ref.hideDisplayText,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    plugins = _ref.plugins,
+    url = _ref.url;
+  /**
+   * "Insert mode" (search results shown initially)
+   */
+  if (!url) {
+    /**
+     * With tabs
+     */
+    if (plugins && plugins.length > 1 || isLoadingPlugins) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
+    }
+
+    /**
+     * Without tabs
+     */
+    if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT;
+    }
+  }
+  return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
+};
+
+/**
+ * Loader / skeleton for the Link Picker. Takes LoaderFallbackProps (hideDisplayText, isLoadingPlugins, plugins)
+ * to determine the height to prevent jumps in height when loading
+ */
+var LoaderFallbackOld = exports.LoaderFallbackOld = function LoaderFallbackOld(props) {
+  var minHeight = getEstimatedMinHeight(props);
+  return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
+    minHeight: minHeight,
+    "data-testid": "link-picker-root-loader-boundary-ui",
+    css: styles
+  }, (0, _react.jsx)(_spinner.default, {
+    testId: "link-picker.component-loading-indicator",
+    interactionName: props.name || 'link-picker-loading',
+    size: "medium"
+  }));
+};

package/dist/cjs/ui/main.compiled.css

@@ -0,0 +1 @@
+._1bsb1ubl{width:var(--link-picker-width)}

package/dist/cjs/ui/main.js

@@ -1,3 +1,4 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,69 +6,69 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.composeLinkPicker = exports.PACKAGE_DATA = void 0;
+exports.testIds = exports.composeLinkPickerNew = exports.composeLinkPicker = exports.PACKAGE_DATA = void 0;
+require("./main.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _reactLooselyLazy = require("react-loosely-lazy");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../common/constants");
 var _sessionProvider = require("../controllers/session-provider");
 var _errorBoundary = require("./error-boundary");
 var _loaderFallback = require("./loader-fallback");
 var _messagesProvider = require("./messages-provider");
+var _main = require("./old/main");
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var testIds = exports.testIds = {
   linkPickerRoot: 'link-picker-root'
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.48.3" || '',
+  packageVersion: "1.49.1" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };
 var DefaultRootComponent = function DefaultRootComponent(_ref) {
   var children = _ref.children;
-  return (0, _react2.jsx)("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testIds.linkPickerRoot
   }, children);
 };
-var fixedWidthContainerStyles = (0, _react2.css)({
-  width: 'var(--link-picker-width)'
-});
+var fixedWidthContainerStyles = null;
 var FixedWidthContainer = function FixedWidthContainer(props) {
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: fixedWidthContainerStyles
-  }, props));
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1bsb1ubl"])
+  }));
 };
-var composeLinkPicker = exports.composeLinkPicker = function composeLinkPicker(Component) {
+var composeLinkPickerNew = exports.composeLinkPickerNew = function composeLinkPickerNew(Component) {
   return /*#__PURE__*/(0, _react.memo)(function (props) {
     var _props$paddingLeft, _props$paddingRight, _props$paddingTop, _props$paddingBottom;
     var component = props.component;
     var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
-    return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+    return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
       data: PACKAGE_DATA
-    }, (0, _react2.jsx)(_sessionProvider.LinkPickerSessionProvider, null, (0, _react2.jsx)(_messagesProvider.MessagesProvider, null, (0, _react2.jsx)("div", {
+    }, /*#__PURE__*/_react.default.createElement(_sessionProvider.LinkPickerSessionProvider, null, /*#__PURE__*/_react.default.createElement(_messagesProvider.MessagesProvider, null, /*#__PURE__*/_react.default.createElement("div", {
       style: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--link-picker-width', props.disableWidth ? '100%' : // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px")), '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)")
-    }, (0, _react2.jsx)(FixedWidthContainer, null, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_reactLooselyLazy.LazySuspense, {
-      fallback: (0, _react2.jsx)(_loaderFallback.LoaderFallback, {
+    }, /*#__PURE__*/_react.default.createElement(FixedWidthContainer, null, /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, null, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+      fallback: /*#__PURE__*/_react.default.createElement(_loaderFallback.LoaderFallback, {
         url: props.url,
         hideDisplayText: props.hideDisplayText,
         isLoadingPlugins: props.isLoadingPlugins,
         plugins: props.plugins
       })
-    }, (0, _react2.jsx)(RootComponent, (0, _extends2.default)({}, props, {
+    }, /*#__PURE__*/_react.default.createElement(RootComponent, (0, _extends2.default)({}, props, {
       "data-testid": testIds.linkPickerRoot
-    }), (0, _react2.jsx)(Component, props)))))))));
+    }), /*#__PURE__*/_react.default.createElement(Component, props)))))))));
   });
+};
+var composeLinkPicker = exports.composeLinkPicker = function composeLinkPicker(Component) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-picker-css')) {
+    return composeLinkPickerNew(Component);
+  }
+  return (0, _main.composeLinkPickerOld)(Component);
 };

package/dist/cjs/ui/old/main.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.composeLinkPickerOld = exports.PACKAGE_DATA = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactLooselyLazy = require("react-loosely-lazy");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _constants = require("../../common/constants");
+var _sessionProvider = require("../../controllers/session-provider");
+var _errorBoundary = require("../error-boundary");
+var _loaderFallback = require("../loader-fallback");
+var _messagesProvider = require("../messages-provider");
+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; }
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var testIds = exports.testIds = {
+  linkPickerRoot: 'link-picker-root'
+};
+var PACKAGE_DATA = exports.PACKAGE_DATA = {
+  packageName: "@atlaskit/link-picker" || '',
+  packageVersion: "1.49.1" || '',
+  componentName: _constants.COMPONENT_NAME,
+  source: _constants.COMPONENT_NAME
+};
+var DefaultRootComponent = function DefaultRootComponent(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)("div", {
+    "data-testid": testIds.linkPickerRoot
+  }, children);
+};
+var fixedWidthContainerStyles = (0, _react2.css)({
+  width: 'var(--link-picker-width)'
+});
+var FixedWidthContainer = function FixedWidthContainer(props) {
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: fixedWidthContainerStyles
+  }, props));
+};
+var composeLinkPickerOld = exports.composeLinkPickerOld = function composeLinkPickerOld(Component) {
+  return /*#__PURE__*/(0, _react.memo)(function (props) {
+    var _props$paddingLeft, _props$paddingRight, _props$paddingTop, _props$paddingBottom;
+    var component = props.component;
+    var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
+    return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+      data: PACKAGE_DATA
+    }, (0, _react2.jsx)(_sessionProvider.LinkPickerSessionProvider, null, (0, _react2.jsx)(_messagesProvider.MessagesProvider, null, (0, _react2.jsx)("div", {
+      style: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--link-picker-width', props.disableWidth ? '100%' : // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px")), '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)")
+    }, (0, _react2.jsx)(FixedWidthContainer, null, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_reactLooselyLazy.LazySuspense, {
+      fallback: (0, _react2.jsx)(_loaderFallback.LoaderFallback, {
+        url: props.url,
+        hideDisplayText: props.hideDisplayText,
+        isLoadingPlugins: props.isLoadingPlugins,
+        plugins: props.plugins
+      })
+    }, (0, _react2.jsx)(RootComponent, (0, _extends2.default)({}, props, {
+      "data-testid": testIds.linkPickerRoot
+    }), (0, _react2.jsx)(Component, props)))))))));
+  });
+};

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

@@ -0,0 +1,2 @@
+._1e0c1ule{display:block}
+._4t3il1r9{height:90px}

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

@@ -1,58 +1,62 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { GenericErrorSVGOld } from './old';
 const HEIGHT = 90;
-const genericErrorStyles = css({
-  height: `${HEIGHT}px`,
-  display: 'block'
-});
-export const GenericErrorSVG = props => {
+const genericErrorStyles = null;
+export const GenericErrorSVGNew = props => {
   const id = 'link-picker-ui-generic-error-svg';
-  return jsx("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     height: "90",
     viewBox: "0 0 164 212",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    css: genericErrorStyles
-  }, props), jsx("path", {
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: ax(["_4t3il1r9 _1e0c1ule"])
+  }), /*#__PURE__*/React.createElement("path", {
     d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
     fill: `url(#${id})`
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     opacity: ".6",
     d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
     fill: "#C1C7D0"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     opacity: ".6",
     d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
     fill: "#B3BAC5"
-  }), jsx("defs", null, jsx("linearGradient", {
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: id,
     x1: "26.169",
     y1: "228.621",
     x2: "138.408",
     y2: "116.382",
     gradientUnits: "userSpaceOnUse"
-  }, jsx("stop", {
+  }, /*#__PURE__*/React.createElement("stop", {
     stopColor: "#C1C7D0"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".297",
     stopColor: "#C6CBD4",
     stopOpacity: ".881"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".63",
     stopColor: "#D3D7DE",
     stopOpacity: ".748"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".98",
     stopColor: "#E9EBEF",
     stopOpacity: ".608"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: "1",
     stopColor: "#EBECF0",
     stopOpacity: ".6"
   }))));
+};
+export const GenericErrorSVG = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(GenericErrorSVGNew, props);
+  }
+  return /*#__PURE__*/React.createElement(GenericErrorSVGOld, props);
 };

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

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+const HEIGHT = 90;
+const genericErrorStyles = css({
+  height: `${HEIGHT}px`,
+  display: 'block'
+});
+export const GenericErrorSVGOld = props => {
+  const id = 'link-picker-ui-generic-error-svg';
+  return jsx("svg", _extends({
+    height: "90",
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: genericErrorStyles
+  }, props), jsx("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: `url(#${id})`
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), jsx("defs", null, jsx("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    stopColor: "#C1C7D0"
+  }), jsx("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), jsx("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), jsx("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};

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

@@ -0,0 +1,3 @@
+._1pfhoahv{margin-block-start:var(--ds-space-600,3pc)}
+._6rthoahv{margin-block-end:var(--ds-space-600,3pc)}
+._y3gn1h6o{text-align:center}

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

@@ -1,19 +1,22 @@
-import React from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Heading from '@atlaskit/heading';
-import { Flex, Text, xcss } from '@atlaskit/primitives';
-const containerStyles = xcss({
-  marginBlockStart: 'space.600',
-  marginBlockEnd: 'space.600',
-  textAlign: 'center'
-});
-export const EmptyState = ({
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Flex, Text } from '@atlaskit/primitives/compiled';
+import { EmptyStateOld } from './old';
+const styles = {
+  container: "_1pfhoahv _6rthoahv _y3gn1h6o"
+};
+export const EmptyStateNew = ({
   testId,
   header,
   description,
   renderImage
 }) => {
   return /*#__PURE__*/React.createElement(Flex, {
-    xcss: containerStyles,
+    xcss: styles.container,
     testId: testId,
     direction: "column",
     alignItems: "center",
@@ -29,4 +32,10 @@ export const EmptyState = ({
     as: "p",
     color: "color.text"
   }, description)));
+};
+export const EmptyState = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(EmptyStateNew, props);
+  }
+  return /*#__PURE__*/React.createElement(EmptyStateOld, props);
 };