@atlaskit/media-card 79.0.0 → 79.0.1

package/dist/esm/card/ui/playButton/playButtonBackground-compiled.compiled.css

@@ -0,0 +1,7 @@
+
+._2rko1osq{border-radius:100%}._1bsb1ezv{width:var(--_zq1rrr)}
+._1oec1yx9{transition-duration:.1s}
+._4t3i1ezv{height:var(--_zq1rrr)}
+._bfhk1ypx{background-color:var(--_gra0m5)}
+._k8m0jofv{transition-property:width,height}
+._kqswstnw{position:absolute}

package/dist/esm/card/ui/playButton/playButtonBackground-compiled.js

@@ -0,0 +1,18 @@
+/* playButtonBackground-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./playButtonBackground-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N90A } from '@atlaskit/theme/colors';
+import { bkgClassName } from './styles';
+var discSize = 48;
+var backgroundStyles = null;
+export var PlayButtonBackground = function PlayButtonBackground() {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1osq _k8m0jofv _1oec1yx9 _kqswstnw _1bsb1ezv _4t3i1ezv _bfhk1ypx", bkgClassName]),
+    style: {
+      "--_zq1rrr": ix("".concat(discSize, "px")),
+      "--_gra0m5": ix("var(--ds-background-neutral-bold, ".concat(N90A, ")"))
+    }
+  });
+};

package/dist/esm/card/ui/playButton/playButtonBackground-emotion.js

@@ -0,0 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { backgroundStyles, bkgClassName } from './styles';
+export var PlayButtonBackground = function PlayButtonBackground() {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  return jsx("div", {
+    css: backgroundStyles,
+    className: bkgClassName
+  });
+};

package/dist/esm/card/ui/playButton/playButtonWrapper-compiled.compiled.css

@@ -0,0 +1,10 @@
+._154iidpf{top:0}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1ltvidpf{left:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._kqswstnw{position:absolute}
+._syazw5hi{color:var(--_1qgzj18)}
+._vr2wstnw span{position:absolute}

package/dist/esm/card/ui/playButton/playButtonWrapper-compiled.js

@@ -0,0 +1,15 @@
+/* playButtonWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./playButtonWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N0 } from '@atlaskit/theme/colors';
+import { playButtonClassName } from './styles';
+var playButtonWrapperStyles = null;
+export var PlayButtonWrapper = function PlayButtonWrapper(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syazw5hi _vr2wstnw", playButtonClassName]),
+    style: {
+      "--_1qgzj18": ix("var(--ds-icon-inverse, ".concat(N0, ")"))
+    }
+  }, props.children);
+};

package/dist/esm/card/ui/playButton/playButtonWrapper-emotion.js

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { playButtonClassName, playButtonWrapperStyles } from './styles';
+export var PlayButtonWrapper = function PlayButtonWrapper(props) {
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: playButtonWrapperStyles,
+      className: playButtonClassName
+    }, props.children)
+  );
+};

package/dist/esm/card/ui/playButton/playButtonWrapper.js

@@ -1,16 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { playButtonClassName, playButtonWrapperStyles } from './styles';
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { PlayButtonWrapper as CompiledPlayButtonWrapper } from './playButtonWrapper-compiled';
+import { PlayButtonWrapper as EmotionPlayButtonWrapper } from './playButtonWrapper-emotion';
 export var PlayButtonWrapper = function PlayButtonWrapper(props) {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: playButtonWrapperStyles,
-      className: playButtonClassName
-    }, props.children)
-  );
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledPlayButtonWrapper, props) : /*#__PURE__*/React.createElement(EmotionPlayButtonWrapper, props);
 };

package/dist/esm/card/ui/progressBar/styledBar-compiled.compiled.css

@@ -0,0 +1,13 @@
+
+._1yt4xh0m{padding:var(--_cw4itz)}
+._2rko1l7b{border-radius:3px}._18m915vq{overflow-y:hidden}
+._1bsb1b7y{width:var(--_1xe2l1p)}
+._1e0c1ule{display:block}
+._1ltv1ghs{left:2.5%}
+._1reo15vq{overflow-x:hidden}
+._4t3i12iw{height:var(--_15ce6z9)}
+._4t3i1osq{height:100%}
+._bfhk1p0d{background-color:#44546f}
+._bfhkrcrw{background-color:hsla(0,0%,100%,.8)}
+._kqswstnw{position:absolute}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/card/ui/progressBar/styledBar-compiled.js

@@ -0,0 +1,55 @@
+/* styledBar-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./styledBar-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+var height = 3;
+var padding = 1;
+var width = 95; // %
+
+var smallSizeSettings = {
+  marginBottom: 4
+};
+var largeSizeSettings = {
+  marginBottom: 12
+};
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
+  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
+  var spacing = "".concat(marginBottom, "px");
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}
+var styledBarStyles = null;
+var styleChild = null;
+export var StyledBar = function StyledBar(props) {
+  var progress = props.progress,
+    breakpoint = props.breakpoint,
+    positionBottom = props.positionBottom,
+    showOnTop = props.showOnTop;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "styledBar",
+    role: "progressbar",
+    "aria-valuenow": progress,
+    className: ax(["_1reo15vq _18m915vq _1yt4xh0m _2rko1l7b _kqswstnw _1bsb1b7y _1ltv1ghs _bfhkrcrw _4t3i12iw _vchhusvi"]),
+    style: _objectSpread(_objectSpread({}, generateResponsiveStyles(breakpoint, positionBottom, showOnTop)), {}, {
+      "--_1xe2l1p": ix("".concat(width, "%")),
+      "--_15ce6z9": ix("".concat(height + padding * 2, "px")),
+      "--_cw4itz": ix("".concat(padding, "px"))
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(progress, "%")
+    },
+    className: ax(["_2rko1l7b _bfhk1p0d _1e0c1ule _4t3i1osq"])
+  }));
+};
+StyledBar.displayName = 'StyledProgressBar';

package/dist/esm/card/ui/progressBar/styledBar-emotion.js

@@ -0,0 +1,26 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { styledBarStyles } from './styles';
+export var StyledBar = function StyledBar(props) {
+  var progress = props.progress,
+    breakpoint = props.breakpoint,
+    positionBottom = props.positionBottom,
+    showOnTop = props.showOnTop;
+  return jsx("div", {
+    id: "styledBar",
+    role: "progressbar",
+    "aria-valuenow": progress
+    // 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: styledBarStyles({
+      progress: progress,
+      breakpoint: breakpoint,
+      positionBottom: positionBottom,
+      showOnTop: showOnTop
+    })
+  });
+};

package/dist/esm/card/ui/progressBar/styledBar.js

@@ -1,26 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { styledBarStyles } from './styles';
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { StyledBar as CompiledStyledBar } from './styledBar-compiled';
+import { StyledBar as EmotionStyledBar } from './styledBar-emotion';
 export var StyledBar = function StyledBar(props) {
-  var progress = props.progress,
-    breakpoint = props.breakpoint,
-    positionBottom = props.positionBottom,
-    showOnTop = props.showOnTop;
-  return jsx("div", {
-    id: "styledBar",
-    role: "progressbar",
-    "aria-valuenow": progress
-    // 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: styledBarStyles({
-      progress: progress,
-      breakpoint: breakpoint,
-      positionBottom: positionBottom,
-      showOnTop: showOnTop
-    })
-  });
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledStyledBar, props) : /*#__PURE__*/React.createElement(EmotionStyledBar, props);
 };

package/dist/esm/card/ui/tickBox/tickBoxWrapper-compiled.compiled.css

@@ -0,0 +1,18 @@
+._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)}
+._2rkov47k{border-radius:var(--ds-space-250,20px)}
+._v564ybtr{transition:all .3s}
+._154i1tpr{top:var(--ds-space-075,7px)}
+._1b941ule span{display:block}
+._1bsbdlk8{width:14px}
+._1bsbpxbi{width:var(--ds-space-200,1pc)}
+._1e0c11p5{display:grid}
+._1ltv1tpr{left:var(--ds-space-075,7px)}
+._1mcmdlk8 span svg{height:14px}
+._4cvr1h6o{align-items:center}
+._4t3idlk8{height:14px}
+._4t3ipxbi{height:var(--ds-space-200,1pc)}
+._6a6z1h6o{justify-items:center}
+._bfhkqre5{background-color:var(--_1flhvp0)}
+._kqswstnw{position:absolute}
+._syaz1j28{color:transparent}
+._syaz5w2r{color:var(--ds-icon-inverse,#fff)}

package/dist/esm/card/ui/tickBox/tickBoxWrapper-compiled.js

@@ -0,0 +1,21 @@
+/* tickBoxWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./tickBoxWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { tickBoxClassName } from './styles';
+import { B200 } from '@atlaskit/theme/colors';
+var selectedStyles = null;
+var oldWrapperStyes = null;
+var wrapperStyles = null;
+export var TickBoxWrapper = function TickBoxWrapper(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    id: "tickBoxWrapper",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_11c81oud _2rkov47k _4cvr1h6o _6a6z1h6o _v564ybtr _1bsbpxbi _4t3ipxbi _kqswstnw _154i1tpr _1ltv1tpr _syaz1j28 _1e0c11p5 _1b941ule", !fg('platform-visual-refresh-icons') && "_1bsbdlk8 _4t3idlk8 _1mcmdlk8", props.selected && "_bfhkqre5 _syaz5w2r", tickBoxClassName]),
+    style: {
+      "--_1flhvp0": ix("var(--ds-icon-information, ".concat(B200, ")"))
+    }
+  }, props.children);
+};
+TickBoxWrapper.displayName = 'TickBoxWrapper';

package/dist/esm/card/ui/tickBox/tickBoxWrapper-emotion.js

@@ -0,0 +1,60 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { tickBoxClassName } from './styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css } from '@emotion/react';
+import { transition } from '../styles';
+import { B200 } from '@atlaskit/theme/colors';
+var getSelectedStyles = function getSelectedStyles(selected) {
+  return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
+};
+var oldWrapperStyes = css({
+  width: '14px',
+  height: '14px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  span: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    svg: {
+      height: '14px'
+    }
+  }
+});
+var wrapperStyles = function wrapperStyles(selected) {
+  return css(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition && transition(), {
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    width: "var(--ds-space-200, 16px)",
+    height: "var(--ds-space-200, 16px)",
+    position: 'absolute',
+    top: "var(--ds-space-075, 7px)",
+    left: "var(--ds-space-075, 7px)",
+    borderRadius: "var(--ds-space-250, 20px)",
+    color: 'transparent',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    span: {
+      display: 'block'
+    },
+    display: 'grid',
+    placeItems: 'center'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getSelectedStyles(selected));
+};
+wrapperStyles.displayName = 'TickBoxWrapper';
+export var TickBoxWrapper = function TickBoxWrapper(props) {
+  return jsx("div", {
+    id: "tickBoxWrapper",
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    wrapperStyles(props.selected), !fg('platform-visual-refresh-icons') && oldWrapperStyes]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: tickBoxClassName
+  }, props.children);
+};

package/dist/esm/card/ui/tickBox/tickBoxWrapper.js

@@ -1,60 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { tickBoxClassName } from './styles';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { transition } from '../styles';
-import { B200 } from '@atlaskit/theme/colors';
-var getSelectedStyles = function getSelectedStyles(selected) {
-  return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
-};
-var oldWrapperStyes = css({
-  width: '14px',
-  height: '14px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  span: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    svg: {
-      height: '14px'
-    }
-  }
-});
-var wrapperStyles = function wrapperStyles(selected) {
-  return css(
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  transition && transition(), {
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-    width: "var(--ds-space-200, 16px)",
-    height: "var(--ds-space-200, 16px)",
-    position: 'absolute',
-    top: "var(--ds-space-075, 7px)",
-    left: "var(--ds-space-075, 7px)",
-    borderRadius: "var(--ds-space-250, 20px)",
-    color: 'transparent',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    span: {
-      display: 'block'
-    },
-    display: 'grid',
-    placeItems: 'center'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getSelectedStyles(selected));
-};
-wrapperStyles.displayName = 'TickBoxWrapper';
+import { TickBoxWrapper as CompiledTickBoxWrapper } from './tickBoxWrapper-compiled';
+import { TickBoxWrapper as EmotionTickBoxWrapper } from './tickBoxWrapper-emotion';
 export var TickBoxWrapper = function TickBoxWrapper(props) {
-  return jsx("div", {
-    id: "tickBoxWrapper",
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    wrapperStyles(props.selected), !fg('platform-visual-refresh-icons') && oldWrapperStyes]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: tickBoxClassName
-  }, props.children);
-};
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTickBoxWrapper, props) : /*#__PURE__*/React.createElement(EmotionTickBoxWrapper, props);
+};
+TickBoxWrapper.displayName = 'TickBoxWrapper';

package/dist/esm/card/ui/titleBox/titleBoxComponents-compiled.compiled.css

@@ -0,0 +1,35 @@
+
+._zulpv77o{gap:var(--ds-space-025,2px)}._184u1b66 span:nth-child(2){margin-right:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._19bv1crf{padding-left:9pt}
+._19bvftgi{padding-left:8px}
+._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1nm41b66 span:nth-child(2){margin-left:var(--ds-space-050,4px)}
+._1reo15vq{overflow-x:hidden}
+._1xi21b66{right:var(--ds-space-050,4px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i14no{height:36px}
+._4t3i1wqb{height:60px}
+._80om1kw7{cursor:inherit}
+._94n51b66{bottom:var(--ds-space-050,4px)}
+._94n5idpf{bottom:0}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._ca0q1y44{padding-top:4px}
+._ca0qftgi{padding-top:8px}
+._e4kmnkob span{vertical-align:middle}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._n3td1y44{padding-bottom:4px}
+._n3tdftgi{padding-bottom:8px}
+._o5721q9c{white-space:nowrap}
+._syaz1o8f{color:var(--_ggxzyp)}
+._u5f319bv{padding-right:10px}
+._u5f31crf{padding-right:9pt}
+._u5f3ftgi{padding-right:8px}

package/dist/esm/card/ui/titleBox/titleBoxComponents-compiled.js

@@ -0,0 +1,79 @@
+/* titleBoxComponents-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./titleBoxComponents-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N0, N800 } from '@atlaskit/theme/colors';
+import { rgba } from '../styles';
+var smallLineHeight = 14;
+var smallVerticalPadding = 4;
+var smallHorizontalPadding = 8;
+var largeLineHeight = 22;
+var largeVerticalPadding = 8;
+var largeHorizontalPadding = 12;
+var responsiveStyleMap = {
+  small: "_ca0q1y44 _u5f3ftgi _n3td1y44 _19bvftgi _4t3i14no",
+  large: "_ca0qftgi _u5f31crf _n3tdftgi _19bv1crf _4t3i1wqb"
+};
+var HEX_REGEX = /^#[0-9A-F]{6}$/i;
+var titleBoxWrapperStyles = null;
+export var TitleBoxWrapper = function TitleBoxWrapper(props) {
+  var breakpoint = props.breakpoint,
+    titleBoxBgColor = props.titleBoxBgColor,
+    hidden = props.hidden;
+  var color = titleBoxBgColor && rgba(HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxWrapper",
+    "data-testid": "media-title-box",
+    className: ax(["_kqswstnw _94n5idpf _1bsb1osq _bfhkvuon _syaz1o8f _80om1kw7 _lcxvglyw _1e0c1txw _2lx21bp4 _1bah1h6o", responsiveStyleMap[breakpoint]]),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      backgroundColor: color,
+      display: hidden ? 'none' : undefined,
+      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
+    }
+  }, props.children);
+};
+TitleBoxWrapper.displayName = 'TitleBoxWrapper';
+var infoStyles = null;
+var iconOverlapStyle = null;
+var titleBoxHeaderStyles = null;
+export var TitleBoxHeader = function TitleBoxHeader(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxHeader",
+    "data-testid": "title-box-header"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_k48p1pd9", "_1reo15vq _18m915vq _o5721q9c", hasIconOverlap && "_u5f319bv"])
+  }, props.children);
+};
+TitleBoxHeader.displayName = 'FailedTitleBoxHeader';
+var titleBoxFooterStyles = null;
+export var TitleBoxFooter = function TitleBoxFooter(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxFooter",
+    "data-testid": "title-box-footer"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_1bto1l2s", "_1reo15vq _18m915vq _o5721q9c", hasIconOverlap && "_u5f319bv"])
+  }, props.children);
+};
+TitleBoxFooter.displayName = 'TitleBoxFooter';
+var titleBoxIconStyles = null;
+var newTitleBoxIconStyles = null;
+export var TitleBoxIcon = function TitleBoxIcon(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    id: "titleBoxIcon",
+    "data-testid": "title-box-icon",
+    className: ax([fg('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n51b66", !fg('platform-visual-refresh-icons') && "_kqswstnw _1xi21b66 _94n5idpf"])
+  }, props.children);
+};
+var errorMessageWrapperStyles = null;
+export var ErrorMessageWrapper = function ErrorMessageWrapper(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
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpv77o _1e0c1txw _4cvr1h6o _1bah1y6m _bozgv77o _e4kmnkob _1nm41b66 _184u1b66"])
+  }, props.children);
+};

package/dist/esm/card/ui/titleBox/titleBoxComponents-emotion.js

@@ -0,0 +1,65 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { errorMessageWrapperStyles, newTitleBoxIconStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
+export var TitleBoxWrapper = function TitleBoxWrapper(props) {
+  var breakpoint = props.breakpoint,
+    titleBoxBgColor = props.titleBoxBgColor,
+    hidden = props.hidden;
+  return jsx("div", {
+    id: "titleBoxWrapper",
+    "data-testid": "media-title-box"
+    // 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: titleBoxWrapperStyles({
+      breakpoint: breakpoint,
+      display: hidden ? 'none' : 'flex',
+      titleBoxBgColor: titleBoxBgColor
+    })
+  }, props.children);
+};
+export var TitleBoxHeader = function TitleBoxHeader(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return jsx("div", {
+    id: "titleBoxHeader",
+    "data-testid": "title-box-header"
+    // 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: titleBoxHeaderStyles({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
+};
+export var TitleBoxFooter = function TitleBoxFooter(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return jsx("div", {
+    id: "titleBoxFooter",
+    "data-testid": "title-box-footer"
+    // 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: titleBoxFooterStyles({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
+};
+export var TitleBoxIcon = function TitleBoxIcon(props) {
+  return jsx("div", {
+    id: "titleBoxIcon",
+    "data-testid": "title-box-icon",
+    css: fg('platform-visual-refresh-icons') ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    newTitleBoxIconStyles :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    titleBoxIconStyles
+  }, props.children);
+};
+export var ErrorMessageWrapper = function ErrorMessageWrapper(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
+  return jsx("div", {
+    css: errorMessageWrapperStyles
+  }, props.children);
+};