@atlaskit/link-create 2.14.0 → 2.15.0

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

@@ -1,58 +1,59 @@
-/* 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
-import { css, jsx } from '@emotion/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 { fg } from '@atlaskit/platform-feature-flags';
+import ErrorSVGOld from './old';
 const WIDTH = 82;
-const errorStyles = css({
-  width: `${WIDTH}px`,
-  margin: `0 auto ${"var(--ds-space-300, 24px)"}`,
-  display: `block`
-});
+const errorStyles = null;
 const id = 'link-create-error-svg';
-const ErrorSVG = () => jsx("svg", {
+const ErrorSVGNew = () => /*#__PURE__*/React.createElement("svg", {
   height: "90",
   viewBox: "0 0 164 212",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
-  css: errorStyles
-}, jsx("path", {
+  className: ax(["_1bsb12cx _19pkidpf _2hwx1wug _otyr1ejb _18u01wug _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"
 }))));
+const ErrorSVG = () => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(ErrorSVGNew, null);
+  }
+  return /*#__PURE__*/React.createElement(ErrorSVGOld, null);
+};
 export default ErrorSVG;

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

@@ -0,0 +1,58 @@
+/* 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
+import { css, jsx } from '@emotion/react';
+const WIDTH = 82;
+const errorStyles = css({
+  width: `${WIDTH}px`,
+  margin: `0 auto ${"var(--ds-space-300, 24px)"}`,
+  display: `block`
+});
+const id = 'link-create-error-svg';
+const ErrorSVGOld = () => jsx("svg", {
+  height: "90",
+  viewBox: "0 0 164 212",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  css: errorStyles
+}, 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"
+}))));
+export default ErrorSVGOld;

package/dist/es2019/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)}
+._bfhklbf8{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}

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

@@ -1,24 +1,29 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
 import Document16Icon from '@atlaskit/icon-file-type/glyph/document/16';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N20A } from '@atlaskit/theme/colors';
-// 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
-export const UrlIcon = styled.div(props => {
-  var _props$url;
-  return {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    backgroundImage: `url(${(_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : ''})`,
-    backgroundColor: `var(--ds-skeleton, ${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
-  };
-});
+import { UrlIconOld } from './old';
+const baseStyles = null;
+const UrlIconNew = ({
+  url,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundImage: `url(${url !== null && url !== void 0 ? url : ''})`
+    },
+    className: ax(["_2rko1sit _bfhklbf8 _1lrw1f51 _12vemgnk _4t3ipxbi _1bsbpxbi _1o9zidpf"])
+  }, children);
+};
+export const UrlIcon = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(UrlIconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(UrlIconOld, props);
+};
 export const PageIcon = () => /*#__PURE__*/React.createElement(Document16Icon, {
   label: "Page"
 });

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

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { N20A } from '@atlaskit/theme/colors';
+// 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
+export const UrlIconOld = styled.div(props => {
+  var _props$url;
+  return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundImage: `url(${(_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : ''})`,
+    backgroundColor: `var(--ds-skeleton, ${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/es2019/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/es2019/common/ui/message/index.js

@@ -1,55 +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';
+/* 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 { cx } from '@atlaskit/css';
 import SuccessIcon from '@atlaskit/icon/utility/check-circle';
 import ErrorIcon from '@atlaskit/icon/utility/error';
-import { Box, xcss } from '@atlaskit/primitives';
-const messageStyles = 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'
-});
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import { MessageOld } from './old';
+const styles = {
+  message: "_zulp1b66 _11c8qk37 _1e0c1txw _1bah1q9y _1pfh1b66"
+};
 const messageAppearanceStyles = {
-  default: xcss({
-    color: 'color.text.subtlest'
-  }),
-  error: xcss({
-    color: 'color.text.danger'
-  }),
-  valid: xcss({
-    color: 'color.text.success'
-  })
+  default: "_syaz131l",
+  error: "_syaz1tmw",
+  valid: "_syazy73q"
 };
-const iconWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  marginInlineStart: "var(--ds-space-025, 2px)",
-  marginInlineEnd: "var(--ds-space-025, 2px)"
-});
+const iconWrapperStyles = null;
 const IconWrapper = ({
   children
 }) => {
-  return jsx("span", {
-    css: iconWrapperStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1e0c1txw _4cvr1h6o _ahbqv77o _12l2v77o"])
   }, children);
 };
 const messageIcons = {
-  error: jsx(ErrorIcon, {
+  error: /*#__PURE__*/React.createElement(ErrorIcon, {
     color: "var(--ds-text-danger, #AE2A19)",
     label: "error"
   }),
-  valid: jsx(SuccessIcon, {
+  valid: /*#__PURE__*/React.createElement(SuccessIcon, {
     color: "var(--ds-text-success, #216E4E)",
     label: "success"
   })
 };
-export const Message = ({
+const MessageNew = ({
   children,
   appearance = 'default',
   id,
@@ -65,10 +50,16 @@ export const Message = ({
    * If the child is just a string, this is not required and we can use one
    * less DOM element.
    */
-  const content = typeof children === 'string' ? children : jsx("span", null, children);
-  return jsx(Box, {
-    xcss: [messageStyles, messageAppearanceStyles[appearance]],
+  const content = typeof children === 'string' ? children : /*#__PURE__*/React.createElement("span", null, children);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.message, messageAppearanceStyles[appearance]),
     testId: testId,
     id: id
-  }, icon && jsx(IconWrapper, null, icon), content);
+  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
+};
+export const Message = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(MessageNew, props);
+  }
+  return /*#__PURE__*/React.createElement(MessageOld, props);
 };

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

@@ -0,0 +1,74 @@
+/**
+ * @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 SuccessIcon from '@atlaskit/icon/utility/check-circle';
+import ErrorIcon from '@atlaskit/icon/utility/error';
+import { Box, xcss } from '@atlaskit/primitives';
+const messageStyles = 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'
+});
+const messageAppearanceStyles = {
+  default: xcss({
+    color: 'color.text.subtlest'
+  }),
+  error: xcss({
+    color: 'color.text.danger'
+  }),
+  valid: xcss({
+    color: 'color.text.success'
+  })
+};
+const iconWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginInlineStart: "var(--ds-space-025, 2px)",
+  marginInlineEnd: "var(--ds-space-025, 2px)"
+});
+const IconWrapper = ({
+  children
+}) => {
+  return jsx("span", {
+    css: iconWrapperStyles
+  }, children);
+};
+const messageIcons = {
+  error: jsx(ErrorIcon, {
+    color: "var(--ds-text-danger, #AE2A19)",
+    label: "error"
+  }),
+  valid: jsx(SuccessIcon, {
+    color: "var(--ds-text-success, #216E4E)",
+    label: "success"
+  })
+};
+export const MessageOld = ({
+  children,
+  appearance = 'default',
+  id,
+  testId
+}) => {
+  const 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.
+   */
+  const content = typeof children === 'string' ? children : jsx("span", null, children);
+  return jsx(Box, {
+    xcss: [messageStyles, messageAppearanceStyles[appearance]],
+    testId: testId,
+    id: id
+  }, icon && jsx(IconWrapper, null, icon), content);
+};

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

@@ -1,11 +1,13 @@
 import React, { Fragment } from 'react';
-import { Stack } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Stack } from '@atlaskit/primitives/compiled';
 import { ErrorBoundary } from '../../../common/ui/error-boundary';
+import { ModalHeroOld } from './old';
 const ErrorComponent = () => {
   // when there's an error, render nothing but report the issue
   return /*#__PURE__*/React.createElement(Fragment, null, null);
 };
-export const ModalHero = ({
+const ModalHeroNew = ({
   hero
 }) => {
   if (!hero) {
@@ -16,4 +18,10 @@ export const ModalHero = ({
   }, /*#__PURE__*/React.createElement(ErrorBoundary, {
     errorComponent: /*#__PURE__*/React.createElement(ErrorComponent, null)
   }, hero));
+};
+export const ModalHero = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(ModalHeroNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ModalHeroOld, props);
 };

package/dist/es2019/common/ui/modal-hero/old/index.js

@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import { Stack } from '@atlaskit/primitives';
+import { ErrorBoundary } from '../../../../common/ui/error-boundary';
+const ErrorComponent = () => {
+  // when there's an error, render nothing but report the issue
+  return /*#__PURE__*/React.createElement(Fragment, null, null);
+};
+export const ModalHeroOld = ({
+  hero
+}) => {
+  if (!hero) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Stack, {
+    testId: "link-create-modal-hero"
+  }, /*#__PURE__*/React.createElement(ErrorBoundary, {
+    errorComponent: /*#__PURE__*/React.createElement(ErrorComponent, null)
+  }, hero));
+};

package/dist/es2019/controllers/create-field/main.compiled.css

@@ -0,0 +1 @@
+._19pku2gc{margin-top:var(--ds-space-100,8px)}

package/dist/es2019/controllers/create-field/main.js

@@ -1,18 +1,15 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-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 { Field } from 'react-final-form';
 import { Label, RequiredAsterisk } from '@atlaskit/form';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Message } from '../../common/ui/message';
 import { shouldShowValidationErrors } from '../../common/utils/form';
-const fieldWrapperStyles = css({
-  marginTop: "var(--ds-space-100, 8px)"
-});
-export function CreateField({
+import { CreateFieldOld } from './old/main';
+const fieldWrapperStyles = null;
+const CreateFieldNew = ({
   id,
   name,
   label,
@@ -21,9 +18,9 @@ export function CreateField({
   validationHelpText,
   testId,
   children
-}) {
+}) => {
   const fieldId = id ? id : `link-create-field-${name}`;
-  return jsx(Field, {
+  return /*#__PURE__*/React.createElement(Field, {
     name: name,
     validate: value => {
       var _find;
@@ -45,30 +42,36 @@ export function CreateField({
     const describedById = `${fieldId}-description`;
     const errorMessageId = `${fieldId}-error`;
     const ariaErrorMessage = showErrorMessage ? errorMessageId : undefined;
-    return jsx("div", {
-      css: fieldWrapperStyles,
-      "data-testid": testId
-    }, label && jsx(Label, {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId,
+      className: ax(["_19pku2gc"])
+    }, label && /*#__PURE__*/React.createElement(Label, {
       htmlFor: fieldId,
       id: `${fieldId}-label`,
       testId: `${testId}-label`
-    }, label, isRequired && jsx(RequiredAsterisk, null)), children({
+    }, label, isRequired && /*#__PURE__*/React.createElement(RequiredAsterisk, null)), children({
       ...input,
       fieldId,
       isInvalid,
       isRequired,
       'aria-errormessage': ariaErrorMessage,
       'aria-describedby': describedById
-    }), jsx("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       id: describedById
-    }, !hasError && validationHelpText && jsx(Message, {
+    }, !hasError && validationHelpText && /*#__PURE__*/React.createElement(Message, {
       testId: `${testId}-helper-message`
-    }, validationHelpText), jsx("div", {
+    }, validationHelpText), /*#__PURE__*/React.createElement("div", {
       "aria-live": "polite"
-    }, showErrorMessage && jsx(Message, {
+    }, showErrorMessage && /*#__PURE__*/React.createElement(Message, {
       id: errorMessageId,
       appearance: "error",
       testId: `${testId}-error-message`
     }, submitError || error))));
   });
-}
+};
+export const CreateField = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFieldNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CreateFieldOld, props);
+};

package/dist/es2019/controllers/create-field/old/main.js

@@ -0,0 +1,74 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import { Field } from 'react-final-form';
+import { Label, RequiredAsterisk } from '@atlaskit/form';
+import { Message } from '../../../common/ui/message';
+import { shouldShowValidationErrors } from '../../../common/utils/form';
+const fieldWrapperStyles = css({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export function CreateFieldOld({
+  id,
+  name,
+  label,
+  isRequired,
+  validators,
+  validationHelpText,
+  testId,
+  children
+}) {
+  const fieldId = id ? id : `link-create-field-${name}`;
+  return jsx(Field, {
+    name: name,
+    validate: value => {
+      var _find;
+      return (_find = (validators !== null && validators !== void 0 ? validators : []).find(validator => {
+        return !validator.isValid(value);
+      })) === null || _find === void 0 ? void 0 : _find.errorMessage;
+    }
+  }, ({
+    input,
+    meta
+  }) => {
+    const isInvalid = shouldShowValidationErrors(meta);
+    const {
+      submitError,
+      error
+    } = meta;
+    const hasError = !!submitError || !!error;
+    const showErrorMessage = hasError && isInvalid;
+    const describedById = `${fieldId}-description`;
+    const errorMessageId = `${fieldId}-error`;
+    const ariaErrorMessage = showErrorMessage ? errorMessageId : undefined;
+    return jsx("div", {
+      css: fieldWrapperStyles,
+      "data-testid": testId
+    }, label && jsx(Label, {
+      htmlFor: fieldId,
+      id: `${fieldId}-label`,
+      testId: `${testId}-label`
+    }, label, isRequired && jsx(RequiredAsterisk, null)), children({
+      ...input,
+      fieldId,
+      isInvalid,
+      isRequired,
+      'aria-errormessage': ariaErrorMessage,
+      'aria-describedby': describedById
+    }), jsx("div", {
+      id: describedById
+    }, !hasError && validationHelpText && jsx(Message, {
+      testId: `${testId}-helper-message`
+    }, validationHelpText), jsx("div", {
+      "aria-live": "polite"
+    }, showErrorMessage && jsx(Message, {
+      id: errorMessageId,
+      appearance: "error",
+      testId: `${testId}-error-message`
+    }, submitError || error))));
+  });
+}