@atlaskit/link-create 2.14.0 → 2.15.0

package/dist/cjs/ui/create-form/form-loader/main.js

@@ -1,39 +1,40 @@
+/* main.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.CreateFormLoader = CreateFormLoader;
-var _react = require("@emotion/react");
+exports.CreateFormLoader = void 0;
+require("./main.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 _constants = require("../../../common/constants");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var formLoaderStyles = (0, _react.css)({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  minHeight: "".concat(_constants.CREATE_FORM_MIN_HEIGHT_IN_PX, "px")
-});
+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; }
+var formLoaderStyles = null;
 
 /**
  * Wrapper component for the Spinner, shows while the form
  * performs async functions on load.
  */
-function CreateFormLoader(_ref) {
+var CreateFormLoaderNew = function CreateFormLoaderNew(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size;
-  return (0, _react.jsx)("div", {
-    css: formLoaderStyles
-  }, (0, _react.jsx)(_spinner.default, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _1bah1h6o _1tkeuuw1"])
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
     size: size,
     interactionName: "load",
     testId: "link-create-form-loader"
   }));
-}
+};
+var CreateFormLoader = exports.CreateFormLoader = function CreateFormLoader(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormLoaderNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_main.CreateFormLoaderOld, props);
+};

package/dist/cjs/ui/create-form/form-loader/old/main.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateFormLoaderOld = CreateFormLoaderOld;
+var _react = require("@emotion/react");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _constants = require("../../../../common/constants");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var formLoaderStyles = (0, _react.css)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  minHeight: "".concat(_constants.CREATE_FORM_MIN_HEIGHT_IN_PX, "px")
+});
+
+/**
+ * Wrapper component for the Spinner, shows while the form
+ * performs async functions on load.
+ */
+function CreateFormLoaderOld(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size;
+  return (0, _react.jsx)("div", {
+    css: formLoaderStyles
+  }, (0, _react.jsx)(_spinner.default, {
+    size: size,
+    interactionName: "load",
+    testId: "link-create-form-loader"
+  }));
+}

package/dist/cjs/ui/create-form/main.compiled.css

@@ -0,0 +1,9 @@
+._18u01wug{margin-left:auto}
+._19bvidpf{padding-left:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._2hwx1wug{margin-right:auto}
+._ca0qidpf{padding-top:0}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._p12f1y37{max-width:5in}
+._u5f3idpf{padding-right:0}

package/dist/cjs/ui/create-form/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");
@@ -6,17 +7,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TEST_ID = exports.CreateForm = void 0;
+require("./main.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _finalForm = require("final-form");
 var _reactFinalForm = require("react-final-form");
 var _reactIntlNext = require("react-intl-next");
 var _form = require("@atlaskit/form");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _constants = require("../../common/constants");
 var _messages = _interopRequireDefault(require("../../common/messages"));
 var _callbackContext = require("../../controllers/callback-context");
@@ -24,21 +28,16 @@ var _exitWarningModalContext = require("../../controllers/exit-warning-modal-con
 var _formContext = require("../../controllers/form-context");
 var _formFooter = require("./form-footer");
 var _formLoader = require("./form-loader");
+var _main = require("./old/main");
 var _excluded = ["submitError"];
+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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var formStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px"),
-  padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
-  margin: "var(--ds-space-0, 0px)".concat(" auto")
-});
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var formStyles = null;
 var RESERVED_FIELDS = [_constants.LINK_CREATE_FORM_POST_CREATE_FIELD];
 var TEST_ID = exports.TEST_ID = 'link-create-form';
-var CreateForm = exports.CreateForm = function CreateForm(_ref) {
+var CreateFormNew = function CreateFormNew(_ref) {
   var children = _ref.children,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
@@ -124,9 +123,9 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
     onCancel && onCancel();
   }, [onCancel]);
   if (isLoading) {
-    return (0, _react2.jsx)(_formLoader.CreateFormLoader, null);
+    return /*#__PURE__*/React.createElement(_formLoader.CreateFormLoader, null);
   }
-  return (0, _react2.jsx)(_reactFinalForm.Form, {
+  return /*#__PURE__*/React.createElement(_reactFinalForm.Form, {
     onSubmit: handleSubmitWithErrorHandling,
     initialValues: initialValues,
     mutators: {
@@ -139,13 +138,13 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
   }, function (_ref5) {
     var submitError = _ref5.submitError,
       formProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
-    return (0, _react2.jsx)("form", {
+    return /*#__PURE__*/React.createElement("form", {
       onSubmit: formProps.handleSubmit,
       name: "link-create-form",
       noValidate: true,
       "data-testid": testId,
-      css: formStyles
-    }, (0, _react2.jsx)(_reactFinalForm.FormSpy, {
+      className: (0, _runtime.ax)(["_p12f1y37 _ca0qidpf _u5f3idpf _n3td1ejb _19bvidpf _19pkze3t _2hwx1wug _otyrze3t _18u01wug"])
+    }, /*#__PURE__*/React.createElement(_reactFinalForm.FormSpy, {
       subscription: {
         modified: true
       },
@@ -160,9 +159,9 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
         });
         setShouldShowWarning(isModified);
       }
-    }), !hideRequiredFieldMessage && (0, _react2.jsx)(_primitives.Text, {
+    }), !hideRequiredFieldMessage && /*#__PURE__*/React.createElement(_compiled.Text, {
       as: "p"
-    }, intl.formatMessage(_messages.default.requiredFieldInstruction), " ", (0, _react2.jsx)(_form.RequiredAsterisk, null)), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter
+    }, intl.formatMessage(_messages.default.requiredFieldInstruction), " ", /*#__PURE__*/React.createElement(_form.RequiredAsterisk, null)), /*#__PURE__*/React.createElement(_compiled.Box, null, children), !hideFooter && /*#__PURE__*/React.createElement(_formFooter.CreateFormFooter
     /**
      * We will prefer to render the error message connected to
      * react final form state (submitError) otherwise we can
@@ -174,4 +173,10 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
       testId: testId
     }));
   });
+};
+var CreateForm = exports.CreateForm = function CreateForm(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_main.CreateFormOld, props);
 };

package/dist/cjs/ui/create-form/old/main.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_ID = exports.CreateFormOld = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _finalForm = require("final-form");
+var _reactFinalForm = require("react-final-form");
+var _reactIntlNext = require("react-intl-next");
+var _form = require("@atlaskit/form");
+var _primitives = require("@atlaskit/primitives");
+var _constants = require("../../../common/constants");
+var _messages = _interopRequireDefault(require("../../../common/messages"));
+var _callbackContext = require("../../../controllers/callback-context");
+var _exitWarningModalContext = require("../../../controllers/exit-warning-modal-context");
+var _formContext = require("../../../controllers/form-context");
+var _formFooter = require("../form-footer");
+var _formLoader = require("../form-loader");
+var _excluded = ["submitError"];
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* 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 formStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxWidth: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px"),
+  padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
+  margin: "var(--ds-space-0, 0px)".concat(" auto")
+});
+var RESERVED_FIELDS = [_constants.LINK_CREATE_FORM_POST_CREATE_FIELD];
+var TEST_ID = exports.TEST_ID = 'link-create-form';
+var CreateFormOld = exports.CreateFormOld = function CreateFormOld(_ref) {
+  var children = _ref.children,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    onSubmit = _ref.onSubmit,
+    onCancel = _ref.onCancel,
+    isLoading = _ref.isLoading,
+    hideFooter = _ref.hideFooter,
+    hideRequiredFieldMessage = _ref.hideRequiredFieldMessage,
+    initialValues = _ref.initialValues;
+  var _useFormContext = (0, _formContext.useFormContext)(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage,
+    formErrorMessage = _useFormContext.formErrorMessage,
+    enableEditView = _useFormContext.enableEditView;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useExitWarningModal = (0, _exitWarningModalContext.useExitWarningModal)(),
+    setShouldShowWarning = _useExitWarningModal.setShouldShowWarning;
+  var _useLinkCreateCallbac = (0, _callbackContext.useLinkCreateCallback)(),
+    onFailure = _useLinkCreateCallbac.onFailure;
+  var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(data) {
+      var shouldEnableEditView, formData;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            shouldEnableEditView = data[_constants.LINK_CREATE_FORM_POST_CREATE_FIELD], formData = (0, _objectWithoutProperties2.default)(data, [_constants.LINK_CREATE_FORM_POST_CREATE_FIELD].map(_toPropertyKey));
+            /**
+             * If form has post-create field set to trigger post-create edit
+             * send this to the form context so we know what to do next
+             * if submission is successful
+             */
+            enableEditView === null || enableEditView === void 0 || enableEditView(!!shouldEnableEditView);
+
+            /**
+             * This is the onSubmit handler provided by the plugin
+             * It will be async, and it will likely involve awaiting `onCreate` (the adopters handler)
+             */
+            return _context.abrupt("return", onSubmit(formData));
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [onSubmit, enableEditView]);
+  var handleSubmitWithErrorHandling = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    var _args2 = arguments;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          /**
+           * Clear any error message that may have been set by async select fields
+           * This will immediately remove any indication of an error, but the form likely will fail to submit,
+           * it will be likely a 400 because the user probably could not set all fields anyway
+           */
+          setFormErrorMessage();
+          _context2.next = 4;
+          return handleSubmit.apply(void 0, _args2);
+        case 4:
+          return _context2.abrupt("return", _context2.sent);
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          /**
+           * Notify link create of failed experience
+           */
+          onFailure === null || onFailure === void 0 || onFailure(_context2.t0);
+
+          /**
+           * Return a generic message for react final form to render
+           */
+          return _context2.abrupt("return", (0, _defineProperty2.default)({}, _finalForm.FORM_ERROR, intl.formatMessage(_messages.default.genericErrorMessage)));
+        case 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 7]]);
+  })), [handleSubmit, setFormErrorMessage, intl, onFailure]);
+  var handleCancel = (0, _react.useCallback)(function () {
+    onCancel && onCancel();
+  }, [onCancel]);
+  if (isLoading) {
+    return (0, _react2.jsx)(_formLoader.CreateFormLoader, null);
+  }
+  return (0, _react2.jsx)(_reactFinalForm.Form, {
+    onSubmit: handleSubmitWithErrorHandling,
+    initialValues: initialValues,
+    mutators: {
+      setField: function setField(args, state, tools) {
+        tools.changeValue(state, args[0].toString(), function () {
+          return args[1];
+        });
+      }
+    }
+  }, function (_ref5) {
+    var submitError = _ref5.submitError,
+      formProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+    return (0, _react2.jsx)("form", {
+      onSubmit: formProps.handleSubmit,
+      name: "link-create-form",
+      noValidate: true,
+      "data-testid": testId,
+      css: formStyles
+    }, (0, _react2.jsx)(_reactFinalForm.FormSpy, {
+      subscription: {
+        modified: true
+      },
+      onChange: function onChange(state) {
+        // determine if any of the fields have been modified
+        if (!state.modified) {
+          setShouldShowWarning(false);
+          return;
+        }
+        var isModified = Object.values(state.modified).some(function (value) {
+          return value;
+        });
+        setShouldShowWarning(isModified);
+      }
+    }), !hideRequiredFieldMessage && (0, _react2.jsx)(_primitives.Text, {
+      as: "p"
+    }, intl.formatMessage(_messages.default.requiredFieldInstruction), " ", (0, _react2.jsx)(_form.RequiredAsterisk, null)), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter
+    /**
+     * We will prefer to render the error message connected to
+     * react final form state (submitError) otherwise we can
+     * default to the `formErrorMessage` that we sometimes use with our own
+     * "form context" (only currently used for AsyncSelect field reporting failed loading)
+     */, {
+      formErrorMessage: submitError || formErrorMessage,
+      handleCancel: handleCancel,
+      testId: testId
+    }));
+  });
+};

package/dist/cjs/ui/create-form/select/main.js

@@ -10,23 +10,20 @@ exports.TEST_ID = exports.SiteSelect = exports.SitePickerSingleValue = exports.S
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _constants = require("@atlaskit/theme/constants");
 var _icon = require("../../../common/ui/icon");
 var _createField = require("../../../controllers/create-field");
 var _messages = require("./messages");
+var _main = require("./old/main");
 var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
   _excluded2 = ["fieldId", "isRequired"],
   _excluded3 = ["children"],
   _excluded4 = ["children"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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; }
 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; }
@@ -39,7 +36,7 @@ var TEST_ID = exports.TEST_ID = 'link-create-select';
  * errors returned by the handleSubmit function passed to the form <Form> that
  * have a key matching the `name` of this field are shown below the field.
  */
-function Select(_ref) {
+function SelectNew(_ref) {
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -49,7 +46,7 @@ function Select(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)(_createField.CreateField, {
+  return /*#__PURE__*/_react.default.createElement(_createField.CreateField, {
     id: id,
     name: name,
     label: label,
@@ -61,27 +58,33 @@ function Select(_ref) {
     var fieldId = _ref2.fieldId,
       isRequired = _ref2.isRequired,
       fieldProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-    return (0, _react.jsx)(_select.default, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
       required: isRequired,
       inputId: fieldId
     }, fieldProps, restProps));
   });
 }
-var SiteSelect = exports.SiteSelect = function SiteSelect(_ref3) {
+function Select(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(SelectNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_main.SelectOld, props);
+}
+var SiteSelectNew = function SiteSelectNew(_ref3) {
   var options = _ref3.options,
     name = _ref3.name,
     testId = _ref3.testId;
   var intl = (0, _reactIntlNext.useIntl)();
   var siteTestId = testId ? testId : 'link-create-site-picker';
-  return (0, _react.jsx)(Select, {
+  return /*#__PURE__*/_react.default.createElement(_main.SelectOld, {
     isRequired: true,
     isSearchable: true,
     name: name !== null && name !== void 0 ? name : 'site',
     options: options,
     label: intl.formatMessage(_messages.messages.siteLabel),
     components: {
-      Option: SitePickerOption,
-      SingleValue: SitePickerSingleValue
+      Option: SitePickerOptionNew,
+      SingleValue: SitePickerSingleValueNew
     },
     testId: siteTestId,
     styles: {
@@ -100,27 +103,45 @@ var SiteSelect = exports.SiteSelect = function SiteSelect(_ref3) {
     }
   });
 };
+var SiteSelect = exports.SiteSelect = function SiteSelect(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(SiteSelectNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_main.SiteSelectOld, props);
+};
 var SiteRow = function SiteRow(_ref4) {
   var avatarUrl = _ref4.avatarUrl,
     children = _ref4.children;
-  return (0, _react.jsx)(_primitives.Inline, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     space: "space.100",
     alignBlock: "center"
-  }, avatarUrl ? (0, _react.jsx)(_icon.UrlIcon, {
+  }, avatarUrl ? /*#__PURE__*/_react.default.createElement(_icon.UrlIcon, {
     url: avatarUrl
   }) : null, children);
 };
-var SitePickerOption = exports.SitePickerOption = function SitePickerOption(_ref5) {
+var SitePickerOptionNew = function SitePickerOptionNew(_ref5) {
   var children = _ref5.children,
     props = (0, _objectWithoutProperties2.default)(_ref5, _excluded3);
-  return (0, _react.jsx)(_select.components.Option, props, (0, _react.jsx)(SiteRow, {
+  return /*#__PURE__*/_react.default.createElement(_select.components.Option, props, /*#__PURE__*/_react.default.createElement(SiteRow, {
     avatarUrl: props.data.value.avatarUrl
   }, children));
 };
-var SitePickerSingleValue = exports.SitePickerSingleValue = function SitePickerSingleValue(_ref6) {
+var SitePickerOption = exports.SitePickerOption = function SitePickerOption(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(SitePickerOptionNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_main.SitePickerOptionOld, props);
+};
+var SitePickerSingleValueNew = function SitePickerSingleValueNew(_ref6) {
   var children = _ref6.children,
     props = (0, _objectWithoutProperties2.default)(_ref6, _excluded4);
-  return (0, _react.jsx)(_select.components.SingleValue, props, (0, _react.jsx)(SiteRow, {
+  return /*#__PURE__*/_react.default.createElement(_select.components.SingleValue, props, /*#__PURE__*/_react.default.createElement(SiteRow, {
     avatarUrl: props.data.value.avatarUrl
   }, children));
+};
+var SitePickerSingleValue = exports.SitePickerSingleValue = function SitePickerSingleValue(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(SitePickerSingleValueNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_main.SitePickerSingleValueOld, props);
 };