@atlaskit/smart-card 34.5.2 → 34.6.1

package/dist/cjs/view/FlexibleCard/components/elements/icon/IconOld.js

@@ -0,0 +1,154 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _constants = require("../../../../../constants");
+var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
+var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+var _utils = require("../../utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var getPositionStyles = function getPositionStyles(position) {
+  switch (position) {
+    case _constants.SmartLinkPosition.Center:
+      return (0, _react2.css)({
+        alignSelf: 'center'
+      });
+    case _constants.SmartLinkPosition.Top:
+    default:
+      return (0, _react2.css)({
+        alignSelf: 'flex-start',
+        margin: 0
+      });
+  }
+};
+var getIconStyles = function getIconStyles(position, width) {
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    (0, _react2.css)(getPositionStyles(position), (0, _utils.getIconSizeStyles)(width))
+  );
+};
+var getCustomRenderStyles = function getCustomRenderStyles(value) {
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    (0, _react2.css)((0, _utils.getTruncateStyles)(1, value), {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+      lineHeight: value,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      fontSize: value,
+      textAlign: 'center',
+      textOverflow: 'clip',
+      WebkitBoxOrient: 'unset',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      span: {
+        margin: 0,
+        padding: 0,
+        verticalAlign: 'baseline'
+      }
+    })
+  );
+};
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.SmartLinkSize.Medium;
+  if (icon) {
+    return (0, _react2.jsx)(_atlaskitIcon.default, (0, _extends2.default)({
+      icon: icon,
+      testId: "".concat(testId, "-icon")
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+      size: size
+    }));
+  }
+};
+var renderDefaultIcon = function renderDefaultIcon(label, testId) {
+  return (0, _react2.jsx)(_link.default, {
+    label: label,
+    testId: "".concat(testId, "-default"),
+    color: "currentColor"
+  });
+};
+var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
+  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants.SmartLinkSize.Medium;
+  var width = size === _constants.SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
+  if (url) {
+    return (0, _react2.jsx)(_imageIcon.default, (0, _extends2.default)({
+      defaultIcon: defaultIcon,
+      testId: testId,
+      url: url
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+      width: width,
+      height: width
+    }));
+  }
+};
+
+/**
+ * A base element that displays an Icon or favicon.
+ * @internal
+ * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+var IconOld = function IconOld(_ref) {
+  var icon = _ref.icon,
+    overrideIcon = _ref.overrideIcon,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Link' : _ref$label,
+    name = _ref.name,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? _constants.SmartLinkPosition.Top : _ref$position,
+    overrideCss = _ref.overrideCss,
+    render = _ref.render,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
+    url = _ref.url;
+  var element = (0, _react.useMemo)(function () {
+    var defaultIcon = renderDefaultIcon(label, testId);
+    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
+  }, [overrideIcon, icon, label, render, testId, url, size]);
+  var width = (0, _utils.getIconWidth)(size);
+  var styles = getIconStyles(position, width);
+  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
+  return (0, _react2.jsx)("div", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && styles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    renderStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    overrideCss],
+    "data-fit-to-content": true,
+    "data-smart-element": name,
+    "data-smart-element-icon": true,
+    "data-testid": testId
+  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_primitives.Box, {
+    xcss: iconWrapperStyle,
+    style: {
+      width: width,
+      height: width
+    }
+  }, element) : element);
+};
+var iconWrapperStyle = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var _default = exports.default = IconOld;

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.compiled.css

@@ -0,0 +1,89 @@
+._11c81bk4{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._16jlidpf{flex-grow:0}
+._18m915vq{overflow-y:hidden}
+._18u0idpf{margin-left:0}
+._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
+._19l31k8s img, ._1pr21k8s span, ._1u5t1k8s svg{max-height:1.5rem}
+._19l3oqnp img, ._1pr2oqnp span, ._1u5toqnp svg{max-height:.75rem}
+._19l3viql img, ._1pr2viql span, ._1u5tviql svg{max-height:2rem}
+._19pkidpf{margin-top:0}
+._1bsb1j6v{width:1rem}
+._1bsb1k8s{width:1.5rem}
+._1bsboqnp{width:.75rem}
+._1bsbviql{width:2rem}
+._1btozryt{text-overflow:clip}
+._1e0ccj1k{display:-webkit-box}
+._1ipkidpf span{margin-top:0}
+._1kdcidpf span{margin-right:0}
+._1m2uidpf span{padding-bottom:0}
+._1nmz1hna{word-break:break-word}
+._1o9zidpf{flex-shrink:0}
+._1oh2idpf span{padding-top:0}
+._1reo15vq{overflow-x:hidden}
+._1rg21j6v img, ._q7cv1j6v span, ._xwbj1j6v svg{min-width:1rem}
+._1rg21k8s img, ._q7cv1k8s span, ._xwbj1k8s svg{min-width:1.5rem}
+._1rg2oqnp img, ._q7cvoqnp span, ._xwbjoqnp svg{min-width:.75rem}
+._1rg2viql img, ._q7cvviql span, ._xwbjviql svg{min-width:2rem}
+._1tke1j6v{min-height:1rem}
+._1tke1k8s{min-height:1.5rem}
+._1tkeoqnp{min-height:.75rem}
+._1tkeviql{min-height:2rem}
+._1ul91j6v{min-width:1rem}
+._1ul91k8s{min-width:1.5rem}
+._1ul9oqnp{min-width:.75rem}
+._1ul9viql{min-width:2rem}
+._1w2uidpf span{margin-left:0}
+._1wpz1h6o{align-self:center}
+._1wpz1y6m{align-self:flex-start}
+._1wyb1j6v{font-size:1rem}
+._1wyb1k8s{font-size:1.5rem}
+._1wyboqnp{font-size:.75rem}
+._1wybviql{font-size:2rem}
+._1yyjkb7n{-webkit-line-clamp:1}
+._2hwxidpf{margin-right:0}
+._3glyidpf span{margin-bottom:0}
+._4t3i1j6v{height:1rem}
+._4t3i1k8s{height:1.5rem}
+._4t3ioqnp{height:.75rem}
+._4t3iviql{height:2rem}
+._5jw9idpf svg{padding-bottom:0}
+._7wy9idpf svg{padding-left:0}
+._99ztidpf span{padding-right:0}
+._9n9oidpf span{padding-left:0}
+._bna71j6v img, ._1xjx1j6v span, ._17521j6v svg{height:1rem}
+._bna71k8s img, ._1xjx1k8s span, ._17521k8s svg{height:1.5rem}
+._bna7oqnp img, ._1xjxoqnp span, ._1752oqnp svg{height:.75rem}
+._bna7viql img, ._1xjxviql span, ._1752viql svg{height:2rem}
+._c71l1j6v{max-height:1rem}
+._c71l1k8s{max-height:1.5rem}
+._c71loqnp{max-height:.75rem}
+._c71lviql{max-height:2rem}
+._e4km18uv span{vertical-align:initial}
+._i0dl1wug{flex-basis:auto}
+._i2i3idpf svg{padding-top:0}
+._mezj1j6v img, ._e2oo1j6v span, ._w8l51j6v svg{width:1rem}
+._mezj1k8s img, ._e2oo1k8s span, ._w8l51k8s svg{width:1.5rem}
+._mezjoqnp img, ._e2oooqnp span, ._w8l5oqnp svg{width:.75rem}
+._mezjviql img, ._e2ooviql span, ._w8l5viql svg{width:2rem}
+._otyridpf{margin-bottom:0}
+._p12f1j6v{max-width:1rem}
+._p12f1k8s{max-width:1.5rem}
+._p12foqnp{max-width:.75rem}
+._p12fviql{max-width:2rem}
+._qci81j6v img, ._15iz1j6v span, ._erub1j6v svg{min-height:1rem}
+._qci81k8s img, ._15iz1k8s span, ._erub1k8s svg{min-height:1.5rem}
+._qci8oqnp img, ._15izoqnp span, ._eruboqnp svg{min-height:.75rem}
+._qci8viql img, ._15izviql span, ._erubviql svg{min-height:2rem}
+._rtys1j6v img, ._b8nk1j6v span, ._4x201j6v svg{max-width:1rem}
+._rtys1k8s img, ._b8nk1k8s span, ._4x201k8s svg{max-width:1.5rem}
+._rtysoqnp img, ._b8nkoqnp span, ._4x20oqnp svg{max-width:.75rem}
+._rtysviql img, ._b8nkviql span, ._4x20viql svg{max-width:2rem}
+._sudpn7od{-webkit-box-orient:unset}
+._uhasidpf svg{padding-right:0}
+._vwz41j6v{line-height:1rem}
+._vwz41k8s{line-height:1.5rem}
+._vwz4oqnp{line-height:.75rem}
+._vwz4viql{line-height:2rem}
+._y3gn1h6o{text-align:center}
+@supports not (-webkit-line-clamp:1){._102k1j6v{max-height:1rem}._102k1k8s{max-height:1.5rem}._102koqnp{max-height:.75rem}._102kptym{max-height:calc(var(--ds-space-200, 1pc)*1)}._102kviql{max-height:2rem}._102kz42d{max-height:calc(var(--ds-space-300, 24px)*1)}}

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
@@ -16,59 +18,38 @@ var _constants = require("../../../../../constants");
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 var _utils = require("../../utils");
+var _IconOld = _interopRequireDefault(require("./IconOld"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var getPositionStyles = function getPositionStyles(position) {
-  switch (position) {
-    case _constants.SmartLinkPosition.Center:
-      return (0, _react2.css)({
-        alignSelf: 'center'
-      });
-    case _constants.SmartLinkPosition.Top:
-    default:
-      return (0, _react2.css)({
-        alignSelf: 'flex-start',
-        margin: 0
-      });
-  }
+/* eslint-disable @compiled/shorthand-property-sorting */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+var positionStyleMap = {
+  center: "_1wpz1h6o",
+  top: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1wpz1y6m"
 };
-var getIconStyles = function getIconStyles(position, width) {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react2.css)(getPositionStyles(position), (0, _utils.getIconSizeStyles)(width))
-  );
+var iconStylesMapOld = {
+  xlarge: "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
+  large: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  medium: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
+  small: "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
 };
-var getCustomRenderStyles = function getCustomRenderStyles(value) {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    (0, _react2.css)((0, _utils.getTruncateStyles)(1, value), {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-      lineHeight: value,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      fontSize: value,
-      textAlign: 'center',
-      textOverflow: 'clip',
-      WebkitBoxOrient: 'unset',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      span: {
-        margin: 0,
-        padding: 0,
-        verticalAlign: 'baseline'
-      }
-    })
-  );
+var customRenderStyleMapOld = {
+  xlarge: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz4viql _1wybviql _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kviql",
+  large: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz41k8s _1wyb1k8s _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102k1k8s",
+  medium: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz41j6v _1wyb1j6v _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102k1j6v",
+  small: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz4oqnp _1wyboqnp _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102koqnp"
+};
+var customRenderStyleMapNew = {
+  xlarge: "_1reo15vq _18m915vq _11c81p5s _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kz42d",
+  large: "_1reo15vq _18m915vq _11c81p5s _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kz42d",
+  medium: "_1reo15vq _18m915vq _11c81bk4 _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kptym",
+  small: "_1reo15vq _18m915vq _11c81bk4 _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kptym"
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.SmartLinkSize.Medium;
   if (icon) {
-    return (0, _react2.jsx)(_atlaskitIcon.default, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_atlaskitIcon.default, (0, _extends2.default)({
       icon: icon,
       testId: "".concat(testId, "-icon")
     }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
@@ -77,7 +58,7 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
-  return (0, _react2.jsx)(_link.default, {
+  return /*#__PURE__*/_react.default.createElement(_link.default, {
     label: label,
     testId: "".concat(testId, "-default"),
     color: "currentColor"
@@ -87,7 +68,7 @@ var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
   var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants.SmartLinkSize.Medium;
   var width = size === _constants.SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
-    return (0, _react2.jsx)(_imageIcon.default, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_imageIcon.default, (0, _extends2.default)({
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
@@ -104,7 +85,7 @@ var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */
-var Icon = function Icon(_ref) {
+var IconNew = function IconNew(_ref) {
   var icon = _ref.icon,
     overrideIcon = _ref.overrideIcon,
     _ref$label = _ref.label,
@@ -112,7 +93,7 @@ var Icon = function Icon(_ref) {
     name = _ref.name,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? _constants.SmartLinkPosition.Top : _ref$position,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     render = _ref.render,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
@@ -124,21 +105,19 @@ var Icon = function Icon(_ref) {
     return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
   }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = (0, _utils.getIconWidth)(size);
-  var styles = getIconStyles(position, width);
-  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
-  return (0, _react2.jsx)("div", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && styles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    renderStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    overrideCss],
+
+  // const styles = getIconStyles(position, width);
+  // const renderStyles = render ? getCustomRenderStyles(width) : undefined;
+
+  return /*#__PURE__*/_react.default.createElement("div", {
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-icon": true,
     "data-testid": testId
-  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_primitives.Box, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && iconStylesMapOld[size], !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && positionStyleMap[position], render && !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && customRenderStyleMapOld[size], render && (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && customRenderStyleMapNew[size], className])
+  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: iconWrapperStyle,
     style: {
       width: width,
@@ -146,6 +125,13 @@ var Icon = function Icon(_ref) {
     }
   }, element) : element);
 };
+var Icon = function Icon(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(IconNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_IconOld.default, props);
+  }
+};
 var iconWrapperStyle = (0, _primitives.xcss)({
   display: 'flex',
   alignItems: 'center',

package/dist/cjs/view/FlexibleCard/components/elements/link/LinkOld.js

@@ -0,0 +1,151 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _constants = require("../../../../../constants");
+var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
+var _utils = require("../../utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+var containerStyles = (0, _react2.css)({
+  flex: '1 1 auto'
+});
+var getThemeStyles = function getThemeStyles(theme) {
+  switch (theme) {
+    case _constants.SmartLinkInternalTheme.Grey:
+      // We are being specifc with the CSS selectors to ensure that Confluence overrides
+      // do not affect our internal Smart Card styles
+      return (0, _react2.css)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        'a&': {
+          color: "var(--ds-text-subtlest, #626F86)",
+          '&:active, &:visited, &:focus, &:hover': {
+            color: "var(--ds-text-subtlest, #626F86)",
+            textDecoration: 'underline'
+          },
+          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)"
+        }
+      });
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    case _constants.SmartLinkTheme.Black:
+      return (0, _react2.css)({
+        color: "var(--ds-text-subtle, #44546F)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':active': {
+          color: "var(--ds-text, #172B4D)"
+        },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':hover': {
+          color: "var(--ds-text-subtle, #44546F)",
+          textDecoration: 'underline'
+        }
+      });
+    case _constants.SmartLinkTheme.Link:
+    default:
+      return (0, _react2.css)({
+        color: "var(--ds-link, #0C66E4)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':active': {
+          color: "var(--ds-link-pressed, #0055CC)"
+        },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':hover': {
+          color: "var(--ds-link, #0C66E4)",
+          textDecoration: 'underline'
+        }
+      });
+  }
+};
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
+  var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
+  return (0, _react2.css)({
+    flex: '1 1 auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  sizeStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getThemeStyles(theme));
+};
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+var withTooltip = function withTooltip(trigger, content, testId) {
+  return (0, _react2.jsx)(_tooltip.default, {
+    content: content,
+    testId: "".concat(testId, "-tooltip"),
+    tag: "span"
+  }, trigger);
+};
+
+/**
+ * A base element that represent an anchor.
+ * @internal
+ * @param {LinkProps} LinkProps - The props necessary for the Link element.
+ * @see LinkIcon
+ */
+var LinkOld = function LinkOld(_ref) {
+  var hideTooltip = _ref.hideTooltip,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-link' : _ref$testId,
+    text = _ref.text,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme,
+    url = _ref.url,
+    onClick = _ref.onClick,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_blank' : _ref$target;
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
+  var hasSpace = (0, _react.useMemo)(function () {
+    return text ? (0, _utils.hasWhiteSpace)(text) : false;
+  }, [text]);
+  var anchor = (0, _react2.jsx)("a", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
+    "data-smart-element": name,
+    "data-smart-element-link": true,
+    "data-testid": testId,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    href: url
+    // We do not want set the target if it is the default value of '_self'. This prevents link
+    // click issues in Confluence and Trello which rely on it not being set unless necessary.
+  }, target !== '_self' && {
+    target: target
+  }), text);
+  return (0, _react2.jsx)("span", {
+    css: containerStyles
+  }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
+};
+var _default = exports.default = LinkOld;

package/dist/cjs/view/FlexibleCard/components/elements/link/index.compiled.css

@@ -0,0 +1,34 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._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)}
+a._10ueqk37{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)}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1nmz9jpi{word-break:break-all}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjkb7n{-webkit-line-clamp:1}
+._i0dl1wug{flex-basis:auto}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._sudp1e54{-webkit-box-orient:vertical}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._vwz41j6v{line-height:1rem}
+._vwz41k8s{line-height:1.5rem}
+a._ye10131l{color:var(--ds-text-subtlest,#626f86)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}
+._9h8h1fxt:active{color:var(--ds-text,#172b4d)}
+a._1ray131l:active, a._dlb7131l:focus, a._rnxt131l:hover, a._1h4d131l:visited{color:var(--ds-text-subtlest,#626f86)}
+a._fjv618uv:active, a._93u918uv:focus, a._g2lk18uv:hover, a._pnzf18uv:visited{text-decoration-color:initial}
+a._hlwq8stv:active, a._1e2m8stv:focus, a._1l4b8stv:hover, a._ue8d8stv:visited{text-decoration-line:underline}
+a._yni7nqa1:active, a._1bianqa1:focus, a._93jhnqa1:hover, a._64n6nqa1:visited{text-decoration-style:solid}
+@supports not (-webkit-line-clamp:1){._102k1j6v{max-height:1rem}._102k1k8s{max-height:1.5rem}._102k1wto{max-height:3rem}._102kviql{max-height:2rem}}