@atlaskit/media-card 79.0.0 → 79.0.1

package/dist/es2019/card/ui/iconMessage/iconMessageWrapper.js

@@ -1,46 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { keyframes } from '@emotion/react';
-const breatheAnimation = keyframes({
-  '0%': {
-    opacity: 1
-  },
-  '50%': {
-    opacity: 0.3
-  },
-  '100%': {
-    opacity: 1
-  }
-});
-const animatedStyles = css({
-  animationName: breatheAnimation,
-  animationDuration: '3.5s',
-  animationTimingFunction: 'ease-in-out',
-  animationIterationCount: 'infinite'
-});
-const baseStyles = css({
-  overflow: 'hidden',
-  opacity: 1,
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  color: "var(--ds-text-subtlest, #7A869A)",
-  textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginBottom: '-1em',
-  // Needs pixel precision to align the icon at the center of the box
-  paddingBlock: "var(--ds-space-050, 4px)",
-  paddingInline: "var(--ds-space-100, 8px)"
-});
-export const IconMessageWrapper = props => {
-  const {
-    animated
-  } = props;
-  return jsx("div", {
-    id: "iconMessageWrapper",
-    css: [baseStyles, animated && animatedStyles]
-  }, props.children);
-};
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { IconMessageWrapper as CompiledIconMessageWrapper } from './iconMessageWrapper-compiled';
+import { IconMessageWrapper as EmotionIconMessageWrapper } from './iconMessageWrapper-emotion';
+export const IconMessageWrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledIconMessageWrapper, props) : /*#__PURE__*/React.createElement(EmotionIconMessageWrapper, props);

package/dist/es2019/card/ui/iconWrapper/iconWrapper-compiled.compiled.css

@@ -0,0 +1,6 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._kqswstnw{position:absolute}

package/dist/es2019/card/ui/iconWrapper/iconWrapper-compiled.js

@@ -0,0 +1,30 @@
+/* iconWrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./iconWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { getTitleBoxHeight } from '../common';
+export function titleBoxHeight(hasTitleBox, breakpoint) {
+  // there is no titlebox
+  if (!hasTitleBox) {
+    return `0px`;
+  }
+
+  // calculate height of the titlebox
+  const marginBottom = getTitleBoxHeight(breakpoint);
+  return `${marginBottom}px`;
+}
+const iconWrapperStyles = null;
+export const IconWrapper = props => {
+  const {
+    breakpoint,
+    hasTitleBox
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "iconWrapper",
+    style: {
+      height: `calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)})`
+    },
+    className: ax(["_kqswstnw _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
+  }, props.children);
+};
+IconWrapper.displayName = 'MediaIconWrapper';

package/dist/es2019/card/ui/iconWrapper/iconWrapper-emotion.js

@@ -0,0 +1,22 @@
+/**
+ * @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 { iconWrapperStyles } from './styles';
+export const IconWrapper = props => {
+  const {
+    breakpoint,
+    hasTitleBox
+  } = props;
+  return jsx("div", {
+    id: "iconWrapper"
+    // 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: iconWrapperStyles({
+      breakpoint,
+      hasTitleBox
+    })
+  }, props.children);
+};

package/dist/es2019/card/ui/iconWrapper/iconWrapper.js

@@ -1,22 +1,5 @@
-/**
- * @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 { iconWrapperStyles } from './styles';
-export const IconWrapper = props => {
-  const {
-    breakpoint,
-    hasTitleBox
-  } = props;
-  return jsx("div", {
-    id: "iconWrapper"
-    // 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: iconWrapperStyles({
-      breakpoint,
-      hasTitleBox
-    })
-  }, props.children);
-};
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { IconWrapper as CompiledIconWrapper } from './iconWrapper-compiled';
+import { IconWrapper as EmotionIconWrapper } from './iconWrapper-emotion';
+export const IconWrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledIconWrapper, props) : /*#__PURE__*/React.createElement(EmotionIconWrapper, props);

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

@@ -0,0 +1,7 @@
+
+._2rko1osq{border-radius:100%}._1bsbckbl{width:3pc}
+._1oec1yx9{transition-duration:.1s}
+._4t3ickbl{height:3pc}
+._bfhk19wx{background-color:var(--ds-background-neutral-bold,rgba(9,30,66,.48))}
+._k8m0jofv{transition-property:width,height}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,14 @@
+/* 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';
+const discSize = 48;
+const backgroundStyles = null;
+export const PlayButtonBackground = () => {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1osq _k8m0jofv _1oec1yx9 _kqswstnw _1bsbckbl _4t3ickbl _bfhk19wx", bkgClassName])
+  });
+};

package/dist/es2019/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 const 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/es2019/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}
+._syaz5w2r{color:var(--ds-icon-inverse,#fff)}
+._vr2wstnw span{position:absolute}

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

@@ -0,0 +1,12 @@
+/* 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';
+const playButtonWrapperStyles = null;
+export const PlayButtonWrapper = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syaz5w2r _vr2wstnw", playButtonClassName])
+  }, props.children);
+};

package/dist/es2019/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 const 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/es2019/card/ui/playButton/playButtonWrapper.js

@@ -1,16 +1,5 @@
-/**
- * @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 const 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)
-  );
-};
+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 const PlayButtonWrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledPlayButtonWrapper, props) : /*#__PURE__*/React.createElement(EmotionPlayButtonWrapper, props);

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

@@ -0,0 +1,16 @@
+
+._2rko1l7b{border-radius:3px}._18m915vq{overflow-y:hidden}
+._19bvt94y{padding-left:1px}
+._1bsb1lk2{width:95%}
+._1e0c1ule{display:block}
+._1ltv1ghs{left:2.5%}
+._1reo15vq{overflow-x:hidden}
+._4t3i14y2{height:5px}
+._4t3i1osq{height:100%}
+._bfhk1p0d{background-color:#44546f}
+._bfhkrcrw{background-color:hsla(0,0%,100%,.8)}
+._ca0qt94y{padding-top:1px}
+._kqswstnw{position:absolute}
+._n3tdt94y{padding-bottom:1px}
+._u5f3t94y{padding-right:1px}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,52 @@
+/* styledBar-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styledBar-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+const height = 3;
+const padding = 1;
+const width = 95; // %
+
+const smallSizeSettings = {
+  marginBottom: 4
+};
+const largeSizeSettings = {
+  marginBottom: 12
+};
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
+  const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
+  const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
+  const spacing = `${marginBottom}px`;
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}
+const styledBarStyles = null;
+const styleChild = null;
+export const StyledBar = props => {
+  const {
+    progress,
+    breakpoint,
+    positionBottom,
+    showOnTop
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "styledBar",
+    role: "progressbar",
+    "aria-valuenow": progress,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...generateResponsiveStyles(breakpoint, positionBottom, showOnTop)
+    },
+    className: ax(["_1reo15vq _18m915vq _ca0qt94y _u5f3t94y _n3tdt94y _19bvt94y _2rko1l7b _kqswstnw _1bsb1lk2 _1ltv1ghs _bfhkrcrw _4t3i14y2 _vchhusvi"])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${progress}%`
+    },
+    className: ax(["_2rko1l7b _bfhk1p0d _1e0c1ule _4t3i1osq"])
+  }));
+};
+StyledBar.displayName = 'StyledProgressBar';

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

@@ -0,0 +1,28 @@
+/**
+ * @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 const StyledBar = props => {
+  const {
+    progress,
+    breakpoint,
+    positionBottom,
+    showOnTop
+  } = props;
+  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,
+      breakpoint,
+      positionBottom,
+      showOnTop
+    })
+  });
+};

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

@@ -1,28 +1,5 @@
-/**
- * @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 const StyledBar = props => {
-  const {
-    progress,
-    breakpoint,
-    positionBottom,
-    showOnTop
-  } = props;
-  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,
-      breakpoint,
-      positionBottom,
-      showOnTop
-    })
-  });
-};
+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 const StyledBar = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledStyledBar, props) : /*#__PURE__*/React.createElement(EmotionStyledBar, props);

package/dist/es2019/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}
+._bfhk8sto{background-color:var(--ds-icon-information,#2684ff)}
+._kqswstnw{position:absolute}
+._syaz1j28{color:transparent}
+._syaz5w2r{color:var(--ds-icon-inverse,#fff)}

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

@@ -0,0 +1,18 @@
+/* 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';
+const selectedStyles = null;
+const oldWrapperStyes = null;
+const wrapperStyles = null;
+export const 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 && "_bfhk8sto _syaz5w2r", tickBoxClassName])
+  }, props.children);
+};
+TickBoxWrapper.displayName = 'TickBoxWrapper';

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

@@ -0,0 +1,57 @@
+/**
+ * @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';
+const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
+      color: ${"var(--ds-icon-inverse, white)"};` : ``;
+const 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'
+    }
+  }
+});
+const wrapperStyles = selected => 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 const 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/es2019/card/ui/tickBox/tickBoxWrapper.js

@@ -1,57 +1,6 @@
-/**
- * @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';
-const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
-      color: ${"var(--ds-icon-inverse, white)"};` : ``;
-const 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'
-    }
-  }
-});
-const wrapperStyles = selected => 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 const 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);
-};
+import { TickBoxWrapper as CompiledTickBoxWrapper } from './tickBoxWrapper-compiled';
+import { TickBoxWrapper as EmotionTickBoxWrapper } from './tickBoxWrapper-emotion';
+export const TickBoxWrapper = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTickBoxWrapper, props) : /*#__PURE__*/React.createElement(EmotionTickBoxWrapper, props);
+TickBoxWrapper.displayName = 'TickBoxWrapper';

package/dist/es2019/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}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f319bv{padding-right:10px}
+._u5f31crf{padding-right:9pt}
+._u5f3ftgi{padding-right:8px}