@atlaskit/smart-card 34.5.2 → 34.6.1

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -7,8 +7,12 @@ exports.textStyles = exports.linkStyles = exports.dropdownItemGroupStyles = expo
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("../../../../utils");
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -23,7 +27,6 @@ var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)(
 var sharedBlockStyles = (0, _react.css)({
   display: 'flex',
   gap: "var(--ds-space-100, 0.5rem)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden',
@@ -31,6 +34,9 @@ var sharedBlockStyles = (0, _react.css)({
   alignItems: 'center'
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var contentStyles = exports.contentStyles = (0, _react.css)(sharedBlockStyles, {
   marginTop: "var(--ds-space-025, 2px)",
@@ -42,6 +48,9 @@ var contentStyles = exports.contentStyles = (0, _react.css)(sharedBlockStyles, {
   }
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var linkStyles = exports.linkStyles = (0, _react.css)(sharedBlockStyles, {
   cursor: 'pointer',
@@ -50,9 +59,12 @@ var linkStyles = exports.linkStyles = (0, _react.css)(sharedBlockStyles, {
   marginLeft: "var(--ds-space-400, 32px)",
   marginBottom: "var(--ds-space-025, 2px)"
 });
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 var textStyles = exports.textStyles = function textStyles(maxLines) {
   return (0, _react.css)({
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '1rem',
     whiteSpace: 'normal'
   },

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/LozengeActionItemsGroupOld.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _dropdownMenu = require("@atlaskit/dropdown-menu");
+var _lozengeActionItem = _interopRequireDefault(require("../lozenge-action-item"));
+var _styled = require("../styled");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var LozengeActionItemsGroupOld = function LozengeActionItemsGroupOld(_ref) {
+  var items = _ref.items,
+    testId = _ref.testId,
+    onClick = _ref.onClick;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    (0, _react.jsx)("span", {
+      css: _styled.dropdownItemGroupStyles,
+      "data-testid": "".concat(testId, "-item-group")
+    }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, items.map(function (item, idx) {
+      return (0, _react.jsx)(_lozengeActionItem.default, (0, _extends2.default)({}, item, {
+        key: idx,
+        onClick: onClick,
+        testId: "".concat(testId, "-item-").concat(idx)
+      }));
+    })))
+  );
+};
+var _default = exports.default = LozengeActionItemsGroupOld;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/index.compiled.css

@@ -0,0 +1,12 @@
+
+._keweg4wb button{padding:var(--_1puzam4)}._14hp1wdt button{width:220px}
+._18m91wug{overflow-y:auto}
+._c71l1mjv{max-height:300px}
+._d4lf1f4h button{min-height:28px}
+._1ll7166n button:focus, ._qprf166n button:focus-visible{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1pv01r31 button:focus, ._1m1b1r31 button:focus-visible{outline-color:currentColor}
+._n6y8usvi button:focus, ._109gusvi button:focus-visible{box-sizing:border-box}
+._ph3k1o36 button:focus, ._1twe1o36 button:focus-visible{outline-width:medium}
+._qh55glyw button:focus, ._lt2aglyw button:focus-visible{outline-style:none}
+._z29h1bda button:focus, ._wlxp1bda button:focus-visible{box-shadow:var(--_1uho1ce)}
+._6pup1kw7 button:hover{background-color:inherit}

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/index.js

@@ -1,37 +1,47 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.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;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _lozengeActionItem = _interopRequireDefault(require("../lozenge-action-item"));
-var _styled = require("../styled");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var LozengeActionItemsGroup = function LozengeActionItemsGroup(_ref) {
+var _LozengeActionItemsGroupOld = _interopRequireDefault(require("./LozengeActionItemsGroupOld"));
+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 dropdownItemGroupStyles = null;
+var LozengeActionItemsGroupNew = function LozengeActionItemsGroupNew(_ref) {
   var items = _ref.items,
     testId = _ref.testId,
     onClick = _ref.onClick;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react.jsx)("span", {
-      css: _styled.dropdownItemGroupStyles,
-      "data-testid": "".concat(testId, "-item-group")
-    }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, items.map(function (item, idx) {
-      return (0, _react.jsx)(_lozengeActionItem.default, (0, _extends2.default)({}, item, {
-        key: idx,
-        onClick: onClick,
-        testId: "".concat(testId, "-item-").concat(idx)
-      }));
-    })))
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "".concat(testId, "-item-group"),
+    className: (0, _runtime.ax)(["_c71l1mjv _18m91wug _keweg4wb _1pv01r31 _1m1b1r31 _qh55glyw _lt2aglyw _ph3k1o36 _1twe1o36 _1ll7166n _qprf166n _n6y8usvi _109gusvi _z29h1bda _wlxp1bda _d4lf1f4h _14hp1wdt _6pup1kw7"]),
+    style: {
+      "--_1puzam4": (0, _runtime.ix)("var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)")),
+      "--_1uho1ce": (0, _runtime.ix)("inset 2px 0 0 ".concat("var(--ds-border-selected, #0C66E4)"))
+    }
+  }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, null, items.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(_lozengeActionItem.default, (0, _extends2.default)({}, item, {
+      key: idx,
+      onClick: onClick,
+      testId: "".concat(testId, "-item-").concat(idx)
+    }));
+  })));
+};
+var LozengeActionItemsGroup = function LozengeActionItemsGroup(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LozengeActionItemsGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_LozengeActionItemsGroupOld.default, props);
+  }
 };
 var _default = exports.default = LozengeActionItemsGroup;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/LozengeActionTriggerOld.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _primitives = require("@atlaskit/primitives");
+var _styled = require("../styled");
+var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var chevronDownStyles = (0, _primitives.xcss)({
+  marginLeft: 'space.075',
+  display: 'flex'
+});
+var LozengeActionTriggerOld = function LozengeActionTriggerOld(_ref) {
+  var appearance = _ref.appearance,
+    isOpen = _ref.isOpen,
+    testId = _ref.testId,
+    text = _ref.text,
+    triggerRef = _ref.triggerRef,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isBold = _useState2[0],
+    setIsBold = _useState2[1];
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return setIsBold(true);
+  }, []);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return setIsBold(false);
+  }, []);
+  var lozenge = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_lozenge.default, {
+      appearance: appearance,
+      isBold: isBold
+    }, (0, _react2.jsx)("span", {
+      css: _styled.triggerLozengeStyles
+    }, (0, _react2.jsx)("span", null, text), (0, _react2.jsx)(_primitives.Box, {
+      as: "span",
+      xcss: chevronDownStyles
+    }, (0, _react2.jsx)(_chevronDown.default, {
+      color: "currentColor",
+      label: "options",
+      LEGACY_size: "medium",
+      LEGACY_margin: "-4px -8px -4px -7px"
+    }))));
+  }, [appearance, isBold, text]);
+  return (0, _react2.jsx)("button", (0, _extends2.default)({
+    type: "button"
+  }, props, {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    css: _styled.triggerButtonStyles,
+    "data-action-open": isOpen,
+    "data-testid": "".concat(testId, "--trigger"),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: triggerRef
+  }), lozenge);
+};
+var _default = exports.default = LozengeActionTriggerOld;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.compiled.css

@@ -0,0 +1,26 @@
+
+._kkk2n7od{all:unset}
+._18s8v77o{margin:var(--ds-space-025,2px)}
+._15vhn7od{font-variant:unset}
+._189eyh40{border-width:2px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._19bvidpf{padding-left:0}
+._1e0c1txw{display:flex}
+._1p1dn7od{text-transform:unset}
+._1wybn7od{font-size:unset}
+._4cvr1h6o{align-items:center}
+._80omtlke{cursor:pointer}
+._bfhk18uv{background-color:initial}
+._ca0qidpf{padding-top:0}
+._ect4n7od{font-family:unset}
+._k48pn7od{font-weight:unset}
+._n3tdidpf{padding-bottom:0}
+._syazn7od{color:unset}
+._u5f3idpf{padding-right:0}
+._vwz4idpf{line-height:0}
+._zg8ln7od{font-style:unset}
+._1bas14y2:focus-visible, ._19h614y2:focus-within, ._1d3914y2[aria-expanded=true]{border-radius:5px}._128m1o36:focus-visible, ._11ow1o36:focus-within, ._j8b81o36[aria-expanded=true]{outline-width:medium}
+._1ejjo89b:focus-visible, ._1u6lo89b:focus-within, ._6ssho89b[aria-expanded=true]{box-shadow:var(--_sq39bb)}
+._mizu1r31:focus-visible, ._1guj1r31:focus-within, ._p8tl1r31[aria-expanded=true]{outline-color:currentColor}
+._ra3xglyw:focus-visible, ._pbhaglyw:focus-within, ._1q2vglyw[aria-expanded=true]{outline-style:none}

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js

@@ -1,30 +1,35 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.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;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
-var _styled = require("../styled");
+var _LozengeActionTriggerOld = _interopRequireDefault(require("./LozengeActionTriggerOld"));
 var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+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 chevronDownStyles = (0, _primitives.xcss)({
   marginLeft: 'space.075',
   display: 'flex'
 });
-var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
+var triggerLozengeStyles = null;
+var triggerButtonStyles = null;
+var LozengeActionTriggerNew = function LozengeActionTriggerNew(_ref) {
   var appearance = _ref.appearance,
     isOpen = _ref.isOpen,
     testId = _ref.testId,
@@ -42,31 +47,40 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     return setIsBold(false);
   }, []);
   var lozenge = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_lozenge.default, {
+    return /*#__PURE__*/React.createElement(_lozenge.default, {
       appearance: appearance,
       isBold: isBold
-    }, (0, _react2.jsx)("span", {
-      css: _styled.triggerLozengeStyles
-    }, (0, _react2.jsx)("span", null, text), (0, _react2.jsx)(_primitives.Box, {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)(["_4cvr1h6o _1e0c1txw"])
+    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(_primitives.Box, {
       as: "span",
       xcss: chevronDownStyles
-    }, (0, _react2.jsx)(_chevronDown.default, {
+    }, /*#__PURE__*/React.createElement(_chevronDown.default, {
       color: "currentColor",
       label: "options",
       LEGACY_size: "medium",
       LEGACY_margin: "-4px -8px -4px -7px"
     }))));
   }, [appearance, isBold, text]);
-  return (0, _react2.jsx)("button", (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
     type: "button"
   }, props, {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: _styled.triggerButtonStyles,
     "data-action-open": isOpen,
     "data-testid": "".concat(testId, "--trigger"),
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    ref: triggerRef
+    ref: triggerRef,
+    className: (0, _runtime.ax)(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _18s8v77o _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk18uv _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejjo89b _1u6lo89b _6ssho89b"]),
+    style: {
+      "--_sq39bb": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, #388BFF)"))
+    }
   }), lozenge);
 };
+var LozengeActionTrigger = function LozengeActionTrigger(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LozengeActionTriggerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_LozengeActionTriggerOld.default, props);
+  }
+};
 var _default = exports.default = LozengeActionTrigger;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -5,22 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.triggerLozengeStyles = exports.triggerButtonStyles = exports.dropdownItemGroupStyles = void 0;
 var _react = require("@emotion/react");
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var triggerButtonStyles = exports.triggerButtonStyles = (0, _react.css)({
   all: 'unset',
   backgroundColor: 'transparent',
   color: 'unset',
   cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontFamily: 'unset',
   fontSize: 'unset',
   fontStyle: 'unset',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontWeight: 'unset',
   fontVariant: 'unset',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: 0,
   textTransform: 'unset',
@@ -34,12 +35,18 @@ var triggerButtonStyles = exports.triggerButtonStyles = (0, _react.css)({
   }
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var triggerLozengeStyles = exports.triggerLozengeStyles = (0, _react.css)({
   alignItems: 'center',
   display: 'flex'
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)({
   maxHeight: '300px',

package/dist/cjs/view/FlexibleCard/components/elements/media/MediaOld.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+var styles = (0, _react.css)({
+  aspectRatio: '16 / 9',
+  display: 'flex',
+  width: '100%',
+  height: 'fit-content',
+  '@supports not (aspect-ratio: auto)': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+    paddingTop: '56.25%',
+    // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> img, > span': {
+    minHeight: '100%',
+    minWidth: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    objectFit: 'cover',
+    objectPosition: 'center center',
+    '@supports not (aspect-ratio: auto)': {
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      left: '50%',
+      top: '50%',
+      width: 'auto',
+      height: 'auto'
+    }
+  }
+});
+
+/**
+ * A base element that displays a Media.
+ * @internal
+ * @param {MediaProps} MediaProps - The props necessary for the Media element.
+ * @see Preview
+ */
+var MediaOld = function MediaOld(_ref) {
+  var name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
+    type = _ref.type,
+    url = _ref.url,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError;
+  if (!type || !url) {
+    return null;
+  }
+  return (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [styles, overrideCss],
+    "data-smart-element": name,
+    "data-smart-element-media": type,
+    "data-testid": testId
+  }, (0, _react.jsx)(_imageIcon.default, {
+    testId: "".concat(testId, "-image"),
+    url: url,
+    onError: onError,
+    onLoad: onLoad,
+    defaultIcon: null
+  }));
+};
+var _default = exports.default = MediaOld;

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

@@ -0,0 +1,11 @@
+._173baqso >img, ._1niwaqso >span{object-position:center center}
+._1bsb1osq{width:100%}
+._1chb1osq >img, ._1usb1osq >span{max-height:100%}
+._1e0c1txw{display:flex}
+._1h1tcq2i{aspect-ratio:16/9}
+._4t3i1ns9{height:-moz-fit-content;height:fit-content}
+._5c331osq >img, ._l9z01osq >span{max-width:100%}
+._6o691dfr >img, ._vr2g1dfr >span{object-fit:cover}
+._6slq1osq >img, ._x1m21osq >span{min-width:100%}
+._jqez1osq >img, ._1lg71osq >span{min-height:100%}
+@supports not (aspect-ratio:auto){._1aoq15vq{overflow-x:hidden}._1iqz15vq{overflow-y:hidden}._6fioj63w{padding-top:56.25%}._l0jmidpf{height:0}._12zuh2mm{position:relative}._t0h9stnw >img, ._1ulbstnw >span{position:absolute}._byj21ooe >img, ._3hvr1ooe >span{transform:translate(-50%,-50%)}._1c0s1ssb >img, ._15j31ssb >span{left:50%}._1npy1ssb >img, ._19he1ssb >span{top:50%}._n3vc1wug >img, ._1qj91wug >span{width:auto}._4fdy1wug >img, ._18cv1wug >span{height:auto}}

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

@@ -1,18 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.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");
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _MediaOld = _interopRequireDefault(require("./MediaOld"));
+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; }
 /**
  * Media: Image
  * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
@@ -23,37 +25,7 @@ var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = (0, _react.css)({
-  aspectRatio: '16 / 9',
-  display: 'flex',
-  width: '100%',
-  height: 'fit-content',
-  '@supports not (aspect-ratio: auto)': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-    paddingTop: '56.25%',
-    // 16:9 ratio (9 / 16 = 0.5625)
-    height: 0,
-    position: 'relative',
-    overflow: 'hidden'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> img, > span': {
-    minHeight: '100%',
-    minWidth: '100%',
-    maxHeight: '100%',
-    maxWidth: '100%',
-    objectFit: 'cover',
-    objectPosition: 'center center',
-    '@supports not (aspect-ratio: auto)': {
-      position: 'absolute',
-      transform: 'translate(-50%, -50%)',
-      left: '50%',
-      top: '50%',
-      width: 'auto',
-      height: 'auto'
-    }
-  }
-});
+var styles = null;
 
 /**
  * A base element that displays a Media.
@@ -61,9 +33,9 @@ var styles = (0, _react.css)({
  * @param {MediaProps} MediaProps - The props necessary for the Media element.
  * @see Preview
  */
-var Media = function Media(_ref) {
+var MediaNew = function MediaNew(_ref) {
   var name = _ref.name,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
     type = _ref.type,
@@ -73,13 +45,14 @@ var Media = function Media(_ref) {
   if (!type || !url) {
     return null;
   }
-  return (0, _react.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [styles, overrideCss],
+  return /*#__PURE__*/React.createElement("div", {
     "data-smart-element": name,
     "data-smart-element-media": type,
     "data-testid": testId
-  }, (0, _react.jsx)(_imageIcon.default, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_1h1tcq2i _1e0c1txw _1bsb1osq _4t3i1ns9 _jqez1osq _1lg71osq _6slq1osq _x1m21osq _1chb1osq _1usb1osq _5c331osq _l9z01osq _6o691dfr _vr2g1dfr _173baqso _1niwaqso _t0h9stnw _1ulbstnw _byj21ooe _3hvr1ooe _1c0s1ssb _15j31ssb _1npy1ssb _19he1ssb _n3vc1wug _1qj91wug _4fdy1wug _18cv1wug _1aoq15vq _1iqz15vq _6fioj63w _l0jmidpf _12zuh2mm", className])
+  }, /*#__PURE__*/React.createElement(_imageIcon.default, {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,
@@ -87,4 +60,11 @@ var Media = function Media(_ref) {
     defaultIcon: null
   }));
 };
+var Media = function Media(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(MediaNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_MediaOld.default, props);
+  }
+};
 var _default = exports.default = Media;