@atlaskit/link-create 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/link-create
 
+## 2.15.0
+
+### Minor Changes
+
+- [#111213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111213)
+  [`9f0eaa2a16d54`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f0eaa2a16d54) -
+  Migration from emotion to compiled under FF
+
 ## 2.14.0
 
 ### Minor Changes

package/dist/cjs/common/constants.js

@@ -9,11 +9,14 @@ var COMPONENT_NAME = exports.COMPONENT_NAME = 'linkCreate';
 var SCREEN_ID = exports.SCREEN_ID = 'linkCreateScreen';
 var DEFAULT_TEST_ID = exports.DEFAULT_TEST_ID = 'link-create';
 var CREATE_FORM_MAX_WIDTH_IN_PX = exports.CREATE_FORM_MAX_WIDTH_IN_PX = '480';
+/**
+ * @deprecated Remove on FF clean up platform_bandicoots-link-create-css
+ */
 var CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 var LINK_CREATE_FORM_POST_CREATE_FIELD = exports.LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "2.14.0" || '',
+  packageVersion: "2.15.0" || '',
   component: COMPONENT_NAME,
   componentName: COMPONENT_NAME
 };

package/dist/cjs/common/ui/error-boundary-modal/index.js

@@ -1,34 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ErrorBoundaryModal = void 0;
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../constants");
 var _errorBoundaryUi = require("../error-boundary-ui");
+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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 /**
  * ErrorBoundaryModal props are the same as those passed to LinkCreate, which
  * are used to control its active state
  */
 
-var ErrorBoundaryModal = exports.ErrorBoundaryModal = function ErrorBoundaryModal(_ref) {
+var ErrorBoundaryModalNew = function ErrorBoundaryModalNew(_ref) {
   var active = _ref.active,
     onClose = _ref.onClose;
-  return (0, _react.jsx)(_modalDialog.ModalTransition, null, active && (0, _react.jsx)(_modalDialog.default, {
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, active && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     testId: "link-create-error-boundary-modal",
     onClose: onClose,
     shouldScrollInViewport: true,
     width: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px")
-  }, (0, _react.jsx)(_modalDialog.ModalBody, null, (0, _react.jsx)(_errorBoundaryUi.ErrorBoundaryUI, null))));
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_errorBoundaryUi.ErrorBoundaryUI, null))));
+};
+var ErrorBoundaryModal = exports.ErrorBoundaryModal = function ErrorBoundaryModal(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(ErrorBoundaryModalNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_old.ErrorBoundaryModalOld, props);
 };

package/dist/cjs/common/ui/error-boundary-modal/old/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundaryModalOld = void 0;
+var _react = require("@emotion/react");
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _constants = require("../../../constants");
+var _errorBoundaryUi = require("../../error-boundary-ui");
+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
+
+/**
+ * ErrorBoundaryModal props are the same as those passed to LinkCreate, which
+ * are used to control its active state
+ */
+
+var ErrorBoundaryModalOld = exports.ErrorBoundaryModalOld = function ErrorBoundaryModalOld(_ref) {
+  var active = _ref.active,
+    onClose = _ref.onClose;
+  return (0, _react.jsx)(_modalDialog.ModalTransition, null, active && (0, _react.jsx)(_modalDialog.default, {
+    testId: "link-create-error-boundary-modal",
+    onClose: onClose,
+    shouldScrollInViewport: true,
+    width: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px")
+  }, (0, _react.jsx)(_modalDialog.ModalBody, null, (0, _react.jsx)(_errorBoundaryUi.ErrorBoundaryUI, null))));
+};

package/dist/cjs/common/ui/error-boundary-ui/error-svg/index.compiled.css

@@ -0,0 +1,6 @@
+._18u01wug{margin-left:auto}
+._19pkidpf{margin-top:0}
+._1bsb1883{width:var(--_fegmhw)}
+._1e0c1ule{display:block}
+._2hwx1wug{margin-right:auto}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}

package/dist/cjs/common/ui/error-boundary-ui/error-svg/index.js

@@ -1,67 +1,74 @@
+/* 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.default = void 0;
-var _react = require("@emotion/react");
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _old = _interopRequireDefault(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 WIDTH = 82;
-var errorStyles = (0, _react.css)({
-  width: "".concat(WIDTH, "px"),
-  margin: "0 auto ".concat("var(--ds-space-300, 24px)"),
-  display: "block"
-});
+var errorStyles = null;
 var id = 'link-create-error-svg';
-var ErrorSVG = function ErrorSVG() {
-  return (0, _react.jsx)("svg", {
+var ErrorSVGNew = function ErrorSVGNew() {
+  return /*#__PURE__*/React.createElement("svg", {
     height: "90",
     viewBox: "0 0 164 212",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    css: errorStyles
-  }, (0, _react.jsx)("path", {
+    className: (0, _runtime.ax)(["_1bsb1883 _19pkidpf _2hwx1wug _otyr1ejb _18u01wug _1e0c1ule"]),
+    style: {
+      "--_fegmhw": (0, _runtime.ix)("".concat(WIDTH, "px"))
+    }
+  }, /*#__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(#".concat(id, ")")
-  }), (0, _react.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"
-  }), (0, _react.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"
-  }), (0, _react.jsx)("defs", null, (0, _react.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"
-  }, (0, _react.jsx)("stop", {
+  }, /*#__PURE__*/React.createElement("stop", {
     stopColor: "#C1C7D0"
-  }), (0, _react.jsx)("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".297",
     stopColor: "#C6CBD4",
     stopOpacity: ".881"
-  }), (0, _react.jsx)("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".63",
     stopColor: "#D3D7DE",
     stopOpacity: ".748"
-  }), (0, _react.jsx)("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".98",
     stopColor: "#E9EBEF",
     stopOpacity: ".608"
-  }), (0, _react.jsx)("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: "1",
     stopColor: "#EBECF0",
     stopOpacity: ".6"
   }))));
 };
+var ErrorSVG = function ErrorSVG() {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(ErrorSVGNew, null);
+  }
+  return /*#__PURE__*/React.createElement(_old.default, null);
+};
 var _default = exports.default = ErrorSVG;

package/dist/cjs/common/ui/error-boundary-ui/error-svg/old/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var WIDTH = 82;
+var errorStyles = (0, _react.css)({
+  width: "".concat(WIDTH, "px"),
+  margin: "0 auto ".concat("var(--ds-space-300, 24px)"),
+  display: "block"
+});
+var id = 'link-create-error-svg';
+var ErrorSVGOld = function ErrorSVGOld() {
+  return (0, _react.jsx)("svg", {
+    height: "90",
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: errorStyles
+  }, (0, _react.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(#".concat(id, ")")
+  }), (0, _react.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"
+  }), (0, _react.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"
+  }), (0, _react.jsx)("defs", null, (0, _react.jsx)("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, (0, _react.jsx)("stop", {
+    stopColor: "#C1C7D0"
+  }), (0, _react.jsx)("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), (0, _react.jsx)("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), (0, _react.jsx)("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};
+var _default = exports.default = ErrorSVGOld;

package/dist/cjs/common/ui/icon/index.compiled.css

@@ -0,0 +1,7 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._12vemgnk{background-repeat:no-repeat}
+._1bsbpxbi{width:var(--ds-space-200,1pc)}
+._1lrw1f51{background-size:contain}
+._1o9zidpf{flex-shrink:0}
+._4t3ipxbi{height:var(--ds-space-200,1pc)}
+._bfhk3yfp{background-color:var(--_1j9jaml)}

package/dist/cjs/common/ui/icon/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,29 +6,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UrlIcon = exports.PageIcon = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
+var _8 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-var UrlIcon = exports.UrlIcon = _styled.default.div(function (props) {
-  var _props$url;
-  return {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    backgroundImage: "url(".concat((_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : '', ")"),
-    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
-    backgroundSize: 'contain',
-    backgroundRepeat: 'no-repeat',
-    height: "var(--ds-space-200, 16px)",
-    width: "var(--ds-space-200, 16px)",
-    borderRadius: "var(--ds-border-radius, 3px)",
-    flexShrink: 0
-  };
-});
+var _old = require("./old");
+var baseStyles = null;
+var UrlIconNew = function UrlIconNew(_ref) {
+  var url = _ref.url,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_2rko1sit _bfhk3yfp _1lrw1f51 _12vemgnk _4t3ipxbi _1bsbpxbi _1o9zidpf"]),
+    style: {
+      backgroundImage: "url(".concat(url !== null && url !== void 0 ? url : '', ")"),
+      "--_1j9jaml": (0, _runtime.ix)("var(--ds-skeleton, ".concat(_colors.N20A, ")"))
+    }
+  }, children);
+};
+var UrlIcon = exports.UrlIcon = function UrlIcon(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(UrlIconNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_old.UrlIconOld, props);
+};
 var PageIcon = exports.PageIcon = function PageIcon() {
-  return /*#__PURE__*/_react.default.createElement(_.default, {
+  return /*#__PURE__*/_react.default.createElement(_8.default, {
     label: "Page"
   });
 };

package/dist/cjs/common/ui/icon/old/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UrlIconOld = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+var UrlIconOld = exports.UrlIconOld = _styled.default.div(function (props) {
+  var _props$url;
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundImage: "url(".concat((_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : '', ")"),
+    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    height: "var(--ds-space-200, 16px)",
+    width: "var(--ds-space-200, 16px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    flexShrink: 0
+  };
+});

package/dist/cjs/common/ui/message/index.compiled.css

@@ -0,0 +1,11 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._1bah1q9y{justify-content:baseline}
+._1e0c1txw{display:flex}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz1tmw{color:var(--ds-text-danger,#ae2e24)}
+._syazy73q{color:var(--ds-text-success,#216e4e)}

package/dist/cjs/common/ui/message/index.js

@@ -1,62 +1,49 @@
+/* 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.Message = void 0;
-var _react = require("@emotion/react");
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _css = require("@atlaskit/css");
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/utility/check-circle"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/utility/error"));
-var _primitives = require("@atlaskit/primitives");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var messageStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  justifyContent: 'baseline',
-  gap: 'space.050',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  marginBlockStart: 'space.050'
-});
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+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 = {
+  message: "_zulp1b66 _11c8qk37 _1e0c1txw _1bah1q9y _1pfh1b66"
+};
 var messageAppearanceStyles = {
-  default: (0, _primitives.xcss)({
-    color: 'color.text.subtlest'
-  }),
-  error: (0, _primitives.xcss)({
-    color: 'color.text.danger'
-  }),
-  valid: (0, _primitives.xcss)({
-    color: 'color.text.success'
-  })
+  default: "_syaz131l",
+  error: "_syaz1tmw",
+  valid: "_syazy73q"
 };
-var iconWrapperStyles = (0, _react.css)({
-  display: 'flex',
-  alignItems: 'center',
-  marginInlineStart: "var(--ds-space-025, 2px)",
-  marginInlineEnd: "var(--ds-space-025, 2px)"
-});
+var iconWrapperStyles = null;
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("span", {
-    css: iconWrapperStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _ahbqv77o _12l2v77o"])
   }, children);
 };
 var messageIcons = {
-  error: (0, _react.jsx)(_error.default, {
+  error: /*#__PURE__*/React.createElement(_error.default, {
     color: "var(--ds-text-danger, #AE2A19)",
     label: "error"
   }),
-  valid: (0, _react.jsx)(_checkCircle.default, {
+  valid: /*#__PURE__*/React.createElement(_checkCircle.default, {
     color: "var(--ds-text-success, #216E4E)",
     label: "success"
   })
 };
-var Message = exports.Message = function Message(_ref2) {
+var MessageNew = function MessageNew(_ref2) {
   var children = _ref2.children,
     _ref2$appearance = _ref2.appearance,
     appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
@@ -72,10 +59,16 @@ var Message = exports.Message = function Message(_ref2) {
    * If the child is just a string, this is not required and we can use one
    * less DOM element.
    */
-  var content = typeof children === 'string' ? children : (0, _react.jsx)("span", null, children);
-  return (0, _react.jsx)(_primitives.Box, {
-    xcss: [messageStyles, messageAppearanceStyles[appearance]],
+  var content = typeof children === 'string' ? children : /*#__PURE__*/React.createElement("span", null, children);
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.message, messageAppearanceStyles[appearance]),
     testId: testId,
     id: id
-  }, icon && (0, _react.jsx)(IconWrapper, null, icon), content);
+  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
+};
+var Message = exports.Message = function Message(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(MessageNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_old.MessageOld, props);
 };

package/dist/cjs/common/ui/message/old/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageOld = void 0;
+var _react = require("@emotion/react");
+var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/utility/check-circle"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/utility/error"));
+var _primitives = require("@atlaskit/primitives");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var messageStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  justifyContent: 'baseline',
+  gap: 'space.050',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  marginBlockStart: 'space.050'
+});
+var messageAppearanceStyles = {
+  default: (0, _primitives.xcss)({
+    color: 'color.text.subtlest'
+  }),
+  error: (0, _primitives.xcss)({
+    color: 'color.text.danger'
+  }),
+  valid: (0, _primitives.xcss)({
+    color: 'color.text.success'
+  })
+};
+var iconWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  marginInlineStart: "var(--ds-space-025, 2px)",
+  marginInlineEnd: "var(--ds-space-025, 2px)"
+});
+var IconWrapper = function IconWrapper(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)("span", {
+    css: iconWrapperStyles
+  }, children);
+};
+var messageIcons = {
+  error: (0, _react.jsx)(_error.default, {
+    color: "var(--ds-text-danger, #AE2A19)",
+    label: "error"
+  }),
+  valid: (0, _react.jsx)(_checkCircle.default, {
+    color: "var(--ds-text-success, #216E4E)",
+    label: "success"
+  })
+};
+var MessageOld = exports.MessageOld = function MessageOld(_ref2) {
+  var children = _ref2.children,
+    _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    id = _ref2.id,
+    testId = _ref2.testId;
+  var icon = messageIcons[appearance];
+
+  /**
+   * The wrapping span is necessary to preserve spaces between children.
+   * Otherwise the flex layout of the message will remove any whitespace
+   * between children.
+   *
+   * If the child is just a string, this is not required and we can use one
+   * less DOM element.
+   */
+  var content = typeof children === 'string' ? children : (0, _react.jsx)("span", null, children);
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: [messageStyles, messageAppearanceStyles[appearance]],
+    testId: testId,
+    id: id
+  }, icon && (0, _react.jsx)(IconWrapper, null, icon), content);
+};

package/dist/cjs/common/ui/modal-hero/index.js

@@ -6,22 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ModalHero = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _errorBoundary = require("../../../common/ui/error-boundary");
+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 ErrorComponent = function ErrorComponent() {
   // when there's an error, render nothing but report the issue
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, null);
 };
-var ModalHero = exports.ModalHero = function ModalHero(_ref) {
+var ModalHeroNew = function ModalHeroNew(_ref) {
   var hero = _ref.hero;
   if (!hero) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     testId: "link-create-modal-hero"
   }, /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
     errorComponent: /*#__PURE__*/_react.default.createElement(ErrorComponent, null)
   }, hero));
+};
+var ModalHero = exports.ModalHero = function ModalHero(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(ModalHeroNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_old.ModalHeroOld, props);
 };