@atlaskit/media-ui 26.2.6 → 27.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-ui
 
+## 27.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 27.0.0
+
+### Major Changes
+
+- [#169432](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169432)
+  [`d3cd99e113f4c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3cd99e113f4c) -
+  Migrates Media UI to Compiled CSS behind a feature flag.
+
 ## 26.2.6
 
 ### Patch Changes

package/browser/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/browser.js",
   "module": "../dist/esm/browser.js",
   "module:es2019": "../dist/es2019/browser.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/browser.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/classNames/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/classNames.js",
   "module": "../dist/esm/classNames.js",
   "module:es2019": "../dist/es2019/classNames.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/classNames.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/codeViewer/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/codeViewer.js",
   "module": "../dist/esm/codeViewer.js",
   "module:es2019": "../dist/es2019/codeViewer.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/codeViewer.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/MediaInlineCard/Frame/styled-compiled.compiled.css

@@ -0,0 +1,21 @@
+
+._1yt4ood9{padding:var(--_6un1n5)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}
+._v56415x0{transition:all .1s ease-in-out}
+._1h6d1j28{border-color:transparent}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._16qs1qst{box-shadow:var(--_7nesqg)}
+._1e0c1nu9{display:inline}
+._1hmsglyw, ._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}
+._1qu2glyw{outline-style:none}
+._1rkwglyw{-moz-user-select:none}
+._4bfu18uv, ._1nrm18uv:active, ._1a3b18uv:focus, ._9oik18uv:hover{text-decoration-color:initial}
+._80omtlke{cursor:pointer}
+._ajmmnqa1, ._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
+._bfhkfpvg{background-color:var(--_9tzd1j)}
+._syazovqm{color:var(--_5xk3r4)}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vwz47vkz{line-height:1pc}
+._irr3l5fl:hover{background-color:var(--_138ec4y)}

package/dist/cjs/MediaInlineCard/Frame/styled-compiled.js

@@ -0,0 +1,51 @@
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+require("./styled-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _colors = require("@atlaskit/theme/colors");
+var _excluded = ["isSelected", "children"];
+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 selectedStyles = null;
+var notSelectedStyles = null;
+var wrapperStyles = null;
+
+/*
+  Media Inline cards should have the following layout:
+  -----------------
+  | icon | title |
+  -----------------
+  The aim is to ensure (1) all children are
+  in line with each other, (2) are vertically
+  centered.
+*/
+// NB: `padding` consistent with @mentions.
+// NB: `display: inline` required for `box-decoration-break` to work.
+// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
+var Wrapper = exports.Wrapper = function Wrapper(_ref) {
+  var isSelected = _ref.isSelected,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
+    "data-testid": "frame-wrapper"
+  }, props, {
+    className: (0, _runtime.ax)(["_vwz47vkz _1yt4ood9 _16d9qvcn _1e0c1nu9 _2rko1sit _syazovqm _bfhkfpvg _v56415x0 _1rkwglyw _80omtlke _irr3l5fl", isSelected && "_80omtlke _16qs1qst _12ji1r31 _1qu2glyw _12y31o36 _uiztglyw _1h6d1j28 _4bfu18uv _1nrm18uv _1a3b18uv _9oik18uv _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"]),
+    style: {
+      "--_6un1n5": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)")),
+      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
+      "--_9tzd1j": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30A, ")")),
+      "--_138ec4y": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")")),
+      "--_7nesqg": (0, _runtime.ix)("0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")")))
+    }
+  }), children);
+};

package/dist/cjs/MediaInlineCard/Frame/styled-emotion.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = 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
+
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var isSelected = function isSelected(_ref) {
+  var isSelected = _ref.isSelected;
+  if (isSelected) {
+    return selected;
+  } else {
+    return 'user-select: text';
+  }
+};
+
+/*
+  Media Inline cards should have the following layout:
+  -----------------
+  | icon | title |
+  -----------------
+  The aim is to ensure (1) all children are
+  in line with each other, (2) are vertically
+  centered.
+*/
+// NB: `padding` consistent with @mentions.
+// NB: `display: inline` required for `box-decoration-break` to work.
+// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var Wrapper = exports.Wrapper = _styled.default.span({
+  lineHeight: '16px',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)"),
+  boxDecorationBreak: 'clone',
+  display: 'inline',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: "var(--ds-text, ".concat(_colors.N900, ")"),
+  backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+function (props) {
+  return isSelected(props);
+}, {
+  transition: '0.1s all ease-in-out',
+  MozUserSelect: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")")
+  }
+});

package/dist/cjs/MediaInlineCard/Frame/styled.js

@@ -5,50 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Wrapper = 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
-
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
-var isSelected = function isSelected(_ref) {
-  var isSelected = _ref.isSelected;
-  if (isSelected) {
-    return selected;
-  } else {
-    return 'user-select: text';
-  }
-};
-
-/*
-  Media Inline cards should have the following layout:
-  -----------------
-  | icon | title |
-  -----------------
-  The aim is to ensure (1) all children are
-  in line with each other, (2) are vertically
-  centered.
-*/
-// NB: `padding` consistent with @mentions.
-// NB: `display: inline` required for `box-decoration-break` to work.
-// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var Wrapper = exports.Wrapper = _styled.default.span({
-  lineHeight: '16px',
-  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)"),
-  boxDecorationBreak: 'clone',
-  display: 'inline',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: "var(--ds-text, ".concat(_colors.N900, ")"),
-  backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-function (props) {
-  return isSelected(props);
-}, {
-  transition: '0.1s all ease-in-out',
-  MozUserSelect: 'none',
-  cursor: 'pointer',
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")")
-  }
-});
+var _react = _interopRequireDefault(require("react"));
+var _styledEmotion = require("./styled-emotion");
+var _styledCompiled = require("./styled-compiled");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var Wrapper = exports.Wrapper = function Wrapper(props) {
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_styledCompiled.Wrapper, props) : /*#__PURE__*/_react.default.createElement(_styledEmotion.Wrapper, props);
+};

package/dist/cjs/MediaInlineCard/Icon-compiled.compiled.css

@@ -0,0 +1,10 @@
+
+._2rkoyh40{border-radius:2px}._154i1ssb{top:50%}
+._1bsbdlk8{width:14px}
+._1ltv1ssb{left:50%}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
+._4t3idlk8{height:14px}
+._kqswstnw{position:absolute}
+._t9ec1ooe{transform:translate(-50%,-50%)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/cjs/MediaInlineCard/Icon-compiled.js

@@ -0,0 +1,45 @@
+/* Icon-compiled.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = exports.AKIconWrapper = void 0;
+require("./Icon-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _excluded = ["alt"],
+  _excluded2 = ["children"];
+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; }
+// TODO: Figure out a more scalable/responsive solution
+// for vertical alignment.
+// Current rationale: vertically positioned at the top of
+// the smart card container (when set to 0). Offset this
+// to position it with appropriate whitespace from the top.
+var iconStyles = null;
+var Icon = exports.Icon = function Icon(_ref) {
+  var alt = _ref.alt,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("img", (0, _extends2.default)({
+    alt: alt || ''
+  }, props, {
+    className: (0, _runtime.ax)(["_4t3idlk8 _1bsbdlk8 _2hwx1b66 _2rkoyh40 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe"])
+  }));
+};
+
+// Used for 'untrue' icons which claim to be 16x16 but
+// are less than that in height/width.
+// TODO: Replace this override with proper AtlasKit solution.
+var akIconWrapperStyles = null;
+var AKIconWrapper = exports.AKIconWrapper = function AKIconWrapper(_ref2) {
+  var children = _ref2.children,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_2hwx1i6y"])
+  }), children);
+};

package/dist/cjs/MediaInlineCard/Icon-emotion.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = exports.AKIconWrapper = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// TODO: Figure out a more scalable/responsive solution
+// for vertical alignment.
+// Current rationale: vertically positioned at the top of
+// the smart card container (when set to 0). Offset this
+// to position it with appropriate whitespace from the top.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var Icon = exports.Icon = _styled.default.img({
+  height: '14px',
+  width: '14px',
+  marginRight: "var(--ds-space-050, 4px)",
+  borderRadius: '2px',
+  userSelect: 'none',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
+
+// Used for 'untrue' icons which claim to be 16x16 but
+// are less than that in height/width.
+// TODO: Replace this override with proper AtlasKit solution.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var AKIconWrapper = exports.AKIconWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});

package/dist/cjs/MediaInlineCard/Icon.js

@@ -5,31 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Icon = exports.AKIconWrapper = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// TODO: Figure out a more scalable/responsive solution
-// for vertical alignment.
-// Current rationale: vertically positioned at the top of
-// the smart card container (when set to 0). Offset this
-// to position it with appropriate whitespace from the top.
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var Icon = exports.Icon = _styled.default.img({
-  height: '14px',
-  width: '14px',
-  marginRight: "var(--ds-space-050, 4px)",
-  borderRadius: '2px',
-  userSelect: 'none',
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)'
-});
-
-// Used for 'untrue' icons which claim to be 16x16 but
-// are less than that in height/width.
-// TODO: Replace this override with proper AtlasKit solution.
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var AKIconWrapper = exports.AKIconWrapper = _styled.default.span({
-  marginRight: "var(--ds-space-negative-025, -2px)"
-});
+var _react = _interopRequireDefault(require("react"));
+var _IconEmotion = require("./Icon-emotion");
+var _IconCompiled = require("./Icon-compiled");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var Icon = exports.Icon = function Icon(props) {
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_IconCompiled.Icon, props) : /*#__PURE__*/_react.default.createElement(_IconEmotion.Icon, props);
+};
+var AKIconWrapper = exports.AKIconWrapper = function AKIconWrapper(props) {
+  return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_IconCompiled.AKIconWrapper, props) : /*#__PURE__*/_react.default.createElement(_IconEmotion.AKIconWrapper, props);
+};

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/styled-compiled.compiled.css

@@ -0,0 +1,33 @@
+
+._1esr1qcg>span{padding:var(--_1yxkslj)}._15x0stnw>*>span>svg{position:absolute}
+._17047vkz>*>span{height:1pc}
+._18lx1ooe>span>svg{transform:translate(-50%,-50%)}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._1bsbdlk8{width:14px}
+._1e0c1o8l{display:inline-block}
+._1f027vkz>span{height:1pc}
+._1fqgstnw>span>svg{position:absolute}
+._1gx11ssb>span>svg{left:50%}
+._1kd9idpf>*>span{top:0}
+._1msp1b66>span{margin-left:var(--ds-space-050,4px)}
+._1nmz9jpi{word-break:break-all}
+._1tr81ssb>*>span>svg{left:50%}
+._1yg7idpf>*>span{left:0}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._3g5ridpf>span{left:0}
+._4d7tstnw>span{position:absolute}
+._4t3i1osq{height:100%}
+._d1gw1ssb>span>svg{top:50%}
+._iibfdlk8>*>span{width:14px}
+._k9fw1ssb>*>span>svg{top:50%}
+._kqswh2mm{position:relative}
+._lacastnw>*>span{position:absolute}
+._nbgxdlk8>span{width:14px}
+._o5721jtm{white-space:pre-wrap}
+._o5fvidpf>span{top:0}
+._q3v31ooe>*>span>svg{transform:translate(-50%,-50%)}
+._s7n4t94y{vertical-align:1px}
+._tzy4idpf{opacity:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._z6uadlk8>span{line-height:14px}

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/styled-compiled.js

@@ -0,0 +1,122 @@
+/* styled-compiled.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.LozengeBlockWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+require("./styled-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _excluded = ["children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"],
+  _excluded5 = ["children"],
+  _excluded6 = ["children"],
+  _excluded7 = ["children"],
+  _excluded8 = ["children"];
+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; }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// TODO: remove this override behaviour for @atlaskit/icon-object
+var iconObjectOverrideStyles = null;
+
+// TODO: remove this override behaviour for @atlaskit/icon
+var iconOverrideStyles = null;
+var iconWrapperStyles = null;
+
+// Wraps all icons represented in Inline Links. Icons have three sources/types:
+// - JSON-LD: from the generator.icon property coming back from ORS.
+// - @atlaskit/icon: for lock icons, unauthorized, etc.
+// - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
+// NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
+// NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
+var IconWrapper = exports.IconWrapper = function IconWrapper(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_uiztglyw", "_1f027vkz _nbgxdlk8 _4d7tstnw _o5fvidpf _3g5ridpf _z6uadlk8 _1fqgstnw _d1gw1ssb _1gx11ssb _18lx1ooe", "_17047vkz _iibfdlk8 _lacastnw _1kd9idpf _1yg7idpf _15x0stnw _k9fw1ssb _1tr81ssb _q3v31ooe"])
+  }), children);
+};
+var emojiWrapperStyles = null;
+
+// Wraps all emoji in Inline Links similar to icon
+var EmojiWrapper = exports.EmojiWrapper = function EmojiWrapper(_ref2) {
+  var children = _ref2.children,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1e0c1o8l _2hwxv77o _uiztglyw", "_1f027vkz _nbgxdlk8 _4d7tstnw _o5fvidpf _3g5ridpf _z6uadlk8 _1fqgstnw _d1gw1ssb _1gx11ssb _18lx1ooe", "_17047vkz _iibfdlk8 _lacastnw _1kd9idpf _1yg7idpf _15x0stnw _k9fw1ssb _1tr81ssb _q3v31ooe"])
+  }), children);
+};
+var iconTitleWrapperStyles = null;
+
+// The main 'wrapping' element, title of the content.
+// NB: `white-space` adds little whitespace before wrapping.
+// NB: `word-break` line breaks as soon as an overflow takes place.
+var IconTitleWrapper = exports.IconTitleWrapper = function IconTitleWrapper(_ref3) {
+  var children = _ref3.children,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_o5721jtm _1nmz9jpi"])
+  }), children);
+};
+var lozengeWrapperStyles = null;
+
+// TODO: Replace overrides with proper AtlasKit solution.
+var LozengeWrapper = exports.LozengeWrapper = function LozengeWrapper(_ref4) {
+  var children = _ref4.children,
+    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1e0c1o8l _s7n4t94y _1msp1b66 _1esr1qcg"]),
+    style: {
+      "--_1yxkslj": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)", " 0"))
+    }
+  }), children);
+};
+var lozengeBlockWrapperStyles = null;
+
+// TODO: Replace overrides with proper AtlasKit solution.
+var LozengeBlockWrapper = exports.LozengeBlockWrapper = function LozengeBlockWrapper(_ref5) {
+  var children = _ref5.children,
+    props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1msp1b66 _1esr1qcg"]),
+    style: {
+      "--_1yxkslj": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)", " 0"))
+    }
+  }), children);
+};
+var rightIconPositionWrapperStyles = null;
+var RightIconPositionWrapper = exports.RightIconPositionWrapper = function RightIconPositionWrapper(_ref6) {
+  var children = _ref6.children,
+    props = (0, _objectWithoutProperties2.default)(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_18u0v77o _2hwx1b66 _kqswh2mm _1e0c1o8l"])
+  }), children);
+};
+var iconPositionWrapperStyles = null;
+
+// The following components are used to absolutely position icons in the vertical center.
+// - IconPositionWrapper: the `relative` parent which has no height in itself.
+// - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
+var IconPositionWrapper = exports.IconPositionWrapper = function IconPositionWrapper(_ref7) {
+  var children = _ref7.children,
+    props = (0, _objectWithoutProperties2.default)(_ref7, _excluded7);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_2hwx1b66 _kqswh2mm _1e0c1o8l"])
+  }), children);
+};
+var iconEmptyWrapperStyles = null;
+var IconEmptyWrapper = exports.IconEmptyWrapper = function IconEmptyWrapper(_ref8) {
+  var children = _ref8.children,
+    props = (0, _objectWithoutProperties2.default)(_ref8, _excluded8);
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1bsbdlk8 _4t3i1osq _1e0c1o8l _tzy4idpf"])
+  }), children);
+};

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/styled-emotion.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.LozengeBlockWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// TODO: remove this override behaviour for @atlaskit/icon-object
+var IconObjectOverrides = exports.IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+// TODO: remove this override behaviour for @atlaskit/icon
+var IconOverrides = exports.IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+
+// Wraps all icons represented in Inline Links. Icons have three sources/types:
+// - JSON-LD: from the generator.icon property coming back from ORS.
+// - @atlaskit/icon: for lock icons, unauthorized, etc.
+// - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
+// NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
+// NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var IconWrapper = exports.IconWrapper = _styled.default.span({
+  userSelect: 'none'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+IconOverrides,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+IconObjectOverrides);
+
+// Wraps all emoji in Inline Links similar to icon
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var EmojiWrapper = exports.EmojiWrapper = _styled.default.span({
+  display: 'inline-block',
+  marginRight: "var(--ds-space-025, 2px)",
+  userSelect: 'none'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+IconOverrides,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+IconObjectOverrides);
+
+// The main 'wrapping' element, title of the content.
+// NB: `white-space` adds little whitespace before wrapping.
+// NB: `word-break` line breaks as soon as an overflow takes place.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all'
+});
+
+// TODO: Replace overrides with proper AtlasKit solution.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var LozengeWrapper = exports.LozengeWrapper = _styled.default.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)",
+    padding: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)", " 0")
+  }
+});
+// TODO: Replace overrides with proper AtlasKit solution.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var LozengeBlockWrapper = exports.LozengeBlockWrapper = _styled.default.span({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)",
+    padding: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)", " 0")
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span({
+  marginLeft: "var(--ds-space-025, 2px)",
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+
+// The following components are used to absolutely position icons in the vertical center.
+// - IconPositionWrapper: the `relative` parent which has no height in itself.
+// - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span({
+  width: '14px',
+  height: '100%',
+  display: 'inline-block',
+  opacity: 0
+});