@atlaskit/link-create 2.14.0 → 2.15.1

package/dist/esm/ui/create-form/async-select/main.js

@@ -5,22 +5,17 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId", "defaultOption", "loadOptions"],
   _excluded2 = ["fieldId", "isRequired"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useEffect, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { useEffect, useMemo, useState } from 'react';
 import debounce from 'debounce-promise';
 import { useForm } from 'react-final-form';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
 import messages from '../../../common/messages';
 import { useLinkCreateCallback } from '../../../controllers/callback-context';
 import { CreateField } from '../../../controllers/create-field';
 import { useFormContext } from '../../../controllers/form-context';
+import { AsyncSelectOld } from './old/main';
 export var TEST_ID = 'link-create-async-select';
 
 /**
@@ -29,7 +24,7 @@ export var TEST_ID = 'link-create-async-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.
  */
-export function AsyncSelect(_ref) {
+function AsyncSelectNew(_ref) {
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -163,7 +158,7 @@ export function AsyncSelect(_ref) {
   var debouncedLoadOptions = useMemo(function () {
     return loadOptions ? debounce(loadOptions, 300) : undefined;
   }, [loadOptions]);
-  return jsx(CreateField, {
+  return /*#__PURE__*/React.createElement(CreateField, {
     id: id,
     name: name,
     label: label,
@@ -175,7 +170,7 @@ export function AsyncSelect(_ref) {
     var fieldId = _ref4.fieldId,
       isRequired = _ref4.isRequired,
       fieldProps = _objectWithoutProperties(_ref4, _excluded2);
-    return jsx(AkAsyncSelect, _extends({
+    return /*#__PURE__*/React.createElement(AkAsyncSelect, _extends({
       inputId: fieldId
     }, fieldProps, restProps, {
       required: isRequired,
@@ -184,4 +179,10 @@ export function AsyncSelect(_ref) {
       isLoading: isLoadingDefaultOptions
     }));
   });
+}
+export function AsyncSelect(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(AsyncSelectNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AsyncSelectOld, props);
 }

package/dist/esm/ui/create-form/async-select/old/main.js

@@ -0,0 +1,188 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId", "defaultOption", "loadOptions"],
+  _excluded2 = ["fieldId", "isRequired"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import debounce from 'debounce-promise';
+import { useForm } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
+import messages from '../../../../common/messages';
+import { useLinkCreateCallback } from '../../../../controllers/callback-context';
+import { CreateField } from '../../../../controllers/create-field';
+import { useFormContext } from '../../../../controllers/form-context';
+export var TEST_ID = 'link-create-async-select';
+
+/**
+ * An async select utilising the Atlaskit AsyncSelect and CreateField.
+ * Validation is handled by the form on form submission. Any
+ * 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.
+ */
+export function AsyncSelectOld(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    propsDefaultValue = _ref.defaultOption,
+    loadOptionsFn = _ref.loadOptions,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useForm = useForm(),
+    mutators = _useForm.mutators;
+  var _useLinkCreateCallbac = useLinkCreateCallback(),
+    onFailure = _useLinkCreateCallbac.onFailure;
+  var _useFormContext = useFormContext(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage;
+  var intl = useIntl();
+  var _useState = useState(propsDefaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultValue = _useState2[0],
+    setDefaultValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoadingDefaultOptions = _useState4[0],
+    setIsLoadingDefaultOptions = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    defaultOptions = _useState6[0],
+    setDefaultOptions = _useState6[1];
+
+  /**
+   * This binds experience to fail if async fetch ever fails to load
+   */
+  var loadOptions = useMemo(function () {
+    if (loadOptionsFn) {
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _args = arguments;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return loadOptionsFn.apply(void 0, _args);
+            case 3:
+              return _context.abrupt("return", _context.sent);
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](0);
+              onFailure === null || onFailure === void 0 || onFailure(_context.t0);
+              setFormErrorMessage(intl.formatMessage(messages.genericErrorMessage));
+              return _context.abrupt("return", []);
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 6]]);
+      }));
+    }
+  }, [intl, onFailure, loadOptionsFn, setFormErrorMessage]);
+  useEffect(function () {
+    var current = true;
+    var fetch = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var query,
+          options,
+          _args2 = arguments;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              query = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : '';
+              if (loadOptions) {
+                _context2.next = 3;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 3:
+              _context2.prev = 3;
+              /**
+               * If we are fetching default options, clear the
+               * value the user has set
+               */
+              if (mutators.setField) {
+                mutators.setField(name, null);
+              }
+              setIsLoadingDefaultOptions(true);
+              setDefaultOptions([]);
+              _context2.next = 9;
+              return loadOptions(query);
+            case 9:
+              options = _context2.sent;
+              if (current) {
+                setDefaultOptions(options);
+                setIsLoadingDefaultOptions(false);
+              }
+              _context2.next = 16;
+              break;
+            case 13:
+              _context2.prev = 13;
+              _context2.t0 = _context2["catch"](3);
+              if (current) {
+                setIsLoadingDefaultOptions(false);
+              }
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[3, 13]]);
+      }));
+      return function fetch() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    fetch();
+    return function () {
+      current = false;
+    };
+  }, [loadOptions, setIsLoadingDefaultOptions, setDefaultOptions, mutators, name]);
+  useEffect(function () {
+    /**
+     * Mutate the form state to set a default value for this field
+     * if `defaultOption` is a prop and we have not set a value for it yet
+     */
+    if (!defaultValue && propsDefaultValue) {
+      setDefaultValue(propsDefaultValue);
+      if (mutators.setField) {
+        mutators.setField(name, propsDefaultValue);
+      }
+    }
+  }, [defaultValue, propsDefaultValue, name, mutators]);
+  var debouncedLoadOptions = useMemo(function () {
+    return loadOptions ? debounce(loadOptions, 300) : undefined;
+  }, [loadOptions]);
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref4) {
+    var fieldId = _ref4.fieldId,
+      isRequired = _ref4.isRequired,
+      fieldProps = _objectWithoutProperties(_ref4, _excluded2);
+    return jsx(AkAsyncSelect, _extends({
+      inputId: fieldId
+    }, fieldProps, restProps, {
+      required: isRequired,
+      loadOptions: debouncedLoadOptions,
+      defaultOptions: defaultOptions,
+      isLoading: isLoadingDefaultOptions
+    }));
+  });
+}

package/dist/esm/ui/create-form/form-footer/main.compiled.css

@@ -0,0 +1,5 @@
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._2hwx1wug{margin-right:auto}
+._4cvr1h6o{align-items:center}

package/dist/esm/ui/create-form/form-footer/main.js

@@ -1,48 +1,40 @@
-/**
- * @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';
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import { ButtonGroup } from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Button } from '../../../common/ui/Button';
 import { EditButton } from './edit-button';
 import { messages } from './messages';
+import { CreateFormFooterOld } from './old/main';
 import { SubmitButton } from './submit-button';
-var formFooterWrapperStyles = css({
-  display: 'flex',
-  marginTop: "var(--ds-space-300, 24px)",
-  justifyContent: 'flex-end'
-});
-var errorStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
+var formFooterWrapperStyles = null;
+var errorStyles = null;
 /**
  * Footer for the Create Form, used as a wrapper for action buttons
  * and form error messages. This component is unmounted if
  * hideFooter is true in the Create Form.
  */
-export function CreateFormFooter(_ref) {
+var CreateFormFooterNew = function CreateFormFooterNew(_ref) {
   var formErrorMessage = _ref.formErrorMessage,
     handleCancel = _ref.handleCancel,
     testId = _ref.testId;
   var intl = useIntl();
-  return jsx("footer", {
+  return /*#__PURE__*/React.createElement("footer", {
     "data-testid": "".concat(testId, "-footer"),
-    css: formFooterWrapperStyles
-  }, formErrorMessage && jsx("div", {
+    className: ax(["_1e0c1txw _19pk1ejb _1bahesu3"])
+  }, formErrorMessage && /*#__PURE__*/React.createElement("div", {
     role: "alert",
-    css: errorStyles,
-    "data-testid": "".concat(testId, "-error")
-  }, jsx(ErrorIcon, {
+    "data-testid": "".concat(testId, "-error"),
+    className: ax(["_1e0c1txw _4cvr1h6o _2hwx1wug"])
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
     label: formErrorMessage,
     color: "var(--ds-icon-danger, #E34935)",
     spacing: "spacious"
-  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+  }), formErrorMessage), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     actionSubjectId: "cancel",
     appearance: "subtle",
@@ -51,5 +43,11 @@ export function CreateFormFooter(_ref) {
       handleCancel();
     },
     testId: "".concat(testId, "-button-cancel")
-  }, intl.formatMessage(messages.close)), jsx(EditButton, null), jsx(SubmitButton, null)));
-}
+  }, intl.formatMessage(messages.close)), /*#__PURE__*/React.createElement(EditButton, null), /*#__PURE__*/React.createElement(SubmitButton, null)));
+};
+export var CreateFormFooter = function CreateFormFooter(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormFooterNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CreateFormFooterOld, props);
+};

package/dist/esm/ui/create-form/form-footer/old/main.js

@@ -0,0 +1,56 @@
+/* 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
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { ButtonGroup } from '@atlaskit/button';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { Button } from '../../../../common/ui/Button';
+import { EditButton } from '../edit-button';
+import { messages } from '../messages';
+import { SubmitButton } from '../submit-button';
+var formFooterWrapperStyles = css({
+  display: 'flex',
+  marginTop: "var(--ds-space-300, 24px)",
+  justifyContent: 'flex-end'
+});
+var errorStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+/**
+ * Footer for the Create Form, used as a wrapper for action buttons
+ * and form error messages. This component is unmounted if
+ * hideFooter is true in the Create Form.
+ */
+export function CreateFormFooterOld(_ref) {
+  var formErrorMessage = _ref.formErrorMessage,
+    handleCancel = _ref.handleCancel,
+    testId = _ref.testId;
+  var intl = useIntl();
+  return jsx("footer", {
+    "data-testid": "".concat(testId, "-footer"),
+    css: formFooterWrapperStyles
+  }, formErrorMessage && jsx("div", {
+    role: "alert",
+    css: errorStyles,
+    "data-testid": "".concat(testId, "-error")
+  }, jsx(ErrorIcon, {
+    label: formErrorMessage,
+    color: "var(--ds-icon-danger, #E34935)",
+    spacing: "spacious"
+  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+    type: "button",
+    actionSubjectId: "cancel",
+    appearance: "subtle",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      handleCancel();
+    },
+    testId: "".concat(testId, "-button-cancel")
+  }, intl.formatMessage(messages.close)), jsx(EditButton, null), jsx(SubmitButton, null)));
+}

package/dist/esm/ui/create-form/form-loader/main.compiled.css

@@ -0,0 +1,4 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkeuuw1{min-height:200px}
+._4cvr1h6o{align-items:center}

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

@@ -1,31 +1,30 @@
-/**
- * @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';
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
-import { CREATE_FORM_MIN_HEIGHT_IN_PX } from '../../../common/constants';
-var formLoaderStyles = 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(CREATE_FORM_MIN_HEIGHT_IN_PX, "px")
-});
+import { CreateFormLoaderOld } from './old/main';
+var formLoaderStyles = null;
 
 /**
  * Wrapper component for the Spinner, shows while the form
  * performs async functions on load.
  */
-export function CreateFormLoader(_ref) {
+var CreateFormLoaderNew = function CreateFormLoaderNew(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size;
-  return jsx("div", {
-    css: formLoaderStyles
-  }, jsx(Spinner, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1h6o _1bah1h6o _1tkeuuw1"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
     size: size,
     interactionName: "load",
     testId: "link-create-form-loader"
   }));
-}
+};
+export var CreateFormLoader = function CreateFormLoader(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormLoaderNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CreateFormLoaderOld, props);
+};

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

@@ -0,0 +1,31 @@
+/**
+ * @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 Spinner from '@atlaskit/spinner';
+import { CREATE_FORM_MIN_HEIGHT_IN_PX } from '../../../../common/constants';
+var formLoaderStyles = 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(CREATE_FORM_MIN_HEIGHT_IN_PX, "px")
+});
+
+/**
+ * Wrapper component for the Spinner, shows while the form
+ * performs async functions on load.
+ */
+export function CreateFormLoaderOld(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size;
+  return jsx("div", {
+    css: formLoaderStyles
+  }, jsx(Spinner, {
+    size: size,
+    interactionName: "load",
+    testId: "link-create-form-loader"
+  }));
+}

package/dist/esm/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/esm/ui/create-form/main.js

@@ -1,40 +1,34 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 var _excluded = ["submitError"];
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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
- */
 import { useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { FORM_ERROR } from 'final-form';
 import { Form, FormSpy } from 'react-final-form';
 import { useIntl } from 'react-intl-next';
 import { RequiredAsterisk } from '@atlaskit/form';
-import { Box, Text } from '@atlaskit/primitives';
-import { CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Text } from '@atlaskit/primitives/compiled';
+import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
 import messages from '../../common/messages';
 import { useLinkCreateCallback } from '../../controllers/callback-context';
 import { useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { useFormContext } from '../../controllers/form-context';
 import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
-var formStyles = 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(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")
-});
+import { CreateFormOld } from './old/main';
+var formStyles = null;
 var RESERVED_FIELDS = [LINK_CREATE_FORM_POST_CREATE_FIELD];
 export var TEST_ID = 'link-create-form';
-export var 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,
@@ -120,9 +114,9 @@ export var CreateForm = function CreateForm(_ref) {
     onCancel && onCancel();
   }, [onCancel]);
   if (isLoading) {
-    return jsx(CreateFormLoader, null);
+    return /*#__PURE__*/React.createElement(CreateFormLoader, null);
   }
-  return jsx(Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     onSubmit: handleSubmitWithErrorHandling,
     initialValues: initialValues,
     mutators: {
@@ -135,13 +129,13 @@ export var CreateForm = function CreateForm(_ref) {
   }, function (_ref5) {
     var submitError = _ref5.submitError,
       formProps = _objectWithoutProperties(_ref5, _excluded);
-    return jsx("form", {
+    return /*#__PURE__*/React.createElement("form", {
       onSubmit: formProps.handleSubmit,
       name: "link-create-form",
       noValidate: true,
       "data-testid": testId,
-      css: formStyles
-    }, jsx(FormSpy, {
+      className: ax(["_p12f1y37 _ca0qidpf _u5f3idpf _n3td1ejb _19bvidpf _19pkze3t _2hwx1wug _otyrze3t _18u01wug"])
+    }, /*#__PURE__*/React.createElement(FormSpy, {
       subscription: {
         modified: true
       },
@@ -156,9 +150,9 @@ export var CreateForm = function CreateForm(_ref) {
         });
         setShouldShowWarning(isModified);
       }
-    }), !hideRequiredFieldMessage && jsx(Text, {
+    }), !hideRequiredFieldMessage && /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, intl.formatMessage(messages.requiredFieldInstruction), " ", jsx(RequiredAsterisk, null)), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
+    }, intl.formatMessage(messages.requiredFieldInstruction), " ", /*#__PURE__*/React.createElement(RequiredAsterisk, null)), /*#__PURE__*/React.createElement(Box, null, children), !hideFooter && /*#__PURE__*/React.createElement(CreateFormFooter
     /**
      * We will prefer to render the error message connected to
      * react final form state (submitError) otherwise we can
@@ -170,4 +164,10 @@ export var CreateForm = function CreateForm(_ref) {
       testId: testId
     }));
   });
+};
+export var CreateForm = function CreateForm(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CreateFormOld, props);
 };