@atlaskit/media-card 77.11.0 → 77.11.2

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

@@ -1,7 +1,6 @@
 /**@jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { keyframes } from '@emotion/react';
-import { Box, xcss } from '@atlaskit/primitives';
 const breatheAnimation = keyframes({
   '0%': {
     opacity: 1
@@ -13,34 +12,34 @@ const breatheAnimation = keyframes({
     opacity: 1
   }
 });
-const animatedStyles = xcss({
+const animatedStyles = css({
   animationName: breatheAnimation,
   animationDuration: '3.5s',
   animationTimingFunction: 'ease-in-out',
   animationIterationCount: 'infinite'
 });
-const reducedFontStyle = xcss({
+const reducedFontStyle = css({
   fontSize: '0.7em'
 });
-const baseStyles = xcss({
+const baseStyles = css({
   overflow: 'hidden',
   opacity: 1,
   fontWeight: 450,
-  color: 'color.text.subtlest',
+  color: "var(--ds-text-subtlest, #7A869A)",
   textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // 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: 'space.050',
-  paddingInline: 'space.100'
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-100, 8px)"
 });
 export const IconMessageWrapper = props => {
   const {
     animated,
     reducedFont
   } = props;
-  return jsx(Box, {
+  return jsx("div", {
     id: "iconMessageWrapper",
-    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
+    css: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

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

@@ -13,13 +13,13 @@ export function titleBoxHeight(hasTitleBox, breakpoint) {
 export const iconWrapperStyles = ({
   hasTitleBox,
   breakpoint
-}) => css`
-  position: absolute;
-  width: 100%;
-  height: calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)});
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`;
+}) => css({
+  position: 'absolute',
+  width: '100%',
+  height: `calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)})`,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
 iconWrapperStyles.displayName = 'MediaIconWrapper';

package/dist/es2019/card/ui/playButton/styles.js

@@ -10,26 +10,26 @@ export const fixedPlayButtonStyles = `
     height: ${discSizeHover}px;
   }
 `;
-export const playButtonWrapperStyles = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${`var(--ds-icon-inverse, ${N0})`};
-  span {
-    position: absolute;
+export const playButtonWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: `var(--ds-icon-inverse, ${N0})`,
+  span: {
+    position: 'absolute'
   }
-`;
-export const backgroundStyles = css`
-  transition-property: width, height;
-  transition-duration: 0.1s;
-  position: absolute;
-  width: ${discSize}px;
-  height: ${discSize}px;
-  background: ${`var(--ds-background-neutral-bold, ${N90A})`};
-  border-radius: 100%;
-`;
+});
+export const backgroundStyles = css({
+  transitionProperty: 'width, height',
+  transitionDuration: '0.1s',
+  position: 'absolute',
+  width: `${discSize}px`,
+  height: `${discSize}px`,
+  background: `var(--ds-background-neutral-bold, ${N90A})`,
+  borderRadius: '100%'
+});

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

@@ -53,8 +53,6 @@ ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export const styledBarStyles = props => {
-  return css`
-    ${getStyledBarStylesBasedOnProps(props)}
-  `;
+  return css(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

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

@@ -65,16 +65,15 @@ export const getSelectableTickBoxStyles = isTickBoxSelectable => {
     }
   `;
 };
-export const cardImageContainerStyles = css`
-  display: flex;
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  ${borderRadius}
-`;
+export const cardImageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden'
+}, borderRadius);
 const defaultTransitionDuration = '.3s';
 export const transition = (propertyName = 'all') => `
   transition: ${propertyName} ${defaultTransitionDuration};

package/dist/es2019/card/ui/titleBox/styles.js

@@ -14,52 +14,47 @@ const HEX_REGEX = /^#[0-9A-F]{6}$/i;
 export const titleBoxWrapperStyles = ({
   breakpoint,
   titleBoxBgColor
-}) => css`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background-color: ${`var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`};
-  color: ${`var(--ds-text, ${N800})`};
-  cursor: inherit;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  ${generateResponsiveStyles(breakpoint)}
-`;
+}) => css({
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  backgroundColor: `var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`,
+  color: `var(--ds-text, ${N800})`,
+  cursor: 'inherit',
+  pointerEvents: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+}, generateResponsiveStyles(breakpoint));
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 const infoStyles = `white-space: nowrap;overflow: hidden;`;
 const iconOverlapStyles = `padding-right: 10px;`;
 export const titleBoxHeaderStyles = ({
   hasIconOverlap
-}) => css`
-  font-weight: 600;
-  ${infoStyles}
-  ${hasIconOverlap && iconOverlapStyles}
-`;
+}) => css({
+  fontWeight: 600
+}, infoStyles, hasIconOverlap && iconOverlapStyles);
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 export const titleBoxFooterStyles = ({
   hasIconOverlap
-}) => css`
-  text-overflow: ellipsis;
-  ${infoStyles}
-  ${hasIconOverlap && iconOverlapStyles}
-`;
+}) => css({
+  textOverflow: 'ellipsis'
+}, infoStyles, hasIconOverlap && iconOverlapStyles);
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-export const titleBoxIconStyles = css`
-  position: absolute;
-  right: ${"var(--ds-space-050, 4px)"};
-  bottom: 0px;
-`;
-export const errorMessageWrapperStyles = css`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  span {
-    vertical-align: middle;
-    :nth-child(2) {
-      margin-left: ${"var(--ds-space-050, 4px)"};
-      margin-right: ${"var(--ds-space-050, 4px)"};
+export const titleBoxIconStyles = css({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: '0px'
+});
+export const errorMessageWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  span: {
+    verticalAlign: 'middle',
+    ':nth-child(2)': {
+      marginLeft: "var(--ds-space-050, 4px)",
+      marginRight: "var(--ds-space-050, 4px)"
     }
   }
-`;
+});

package/dist/es2019/card/ui/unhandledErrorCard/index.js

@@ -32,23 +32,20 @@ const getConvertedDimension = dimensions => {
 };
 const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
   try {
-    return css`
-      ${center};
-      ${borderRadius};
-      background: ${`var(--ds-background-neutral, ${N20})`};
-      color: ${`var(--ds-text-subtle, ${N800})`};
-      max-height: 100%;
-      max-width: 100%;
-      ${getConvertedDimension(dimensions)};
-      display: flex;
-      flex-direction: column;
-
-      p {
-        font-size: ${fontSize()}px;
-        text-align: center;
-        display: ${shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'};
+    return css(center, borderRadius, {
+      background: `var(--ds-background-neutral, ${N20})`,
+      color: `var(--ds-text-subtle, ${N800})`,
+      maxHeight: '100%',
+      maxWidth: '100%'
+    }, getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      p: {
+        fontSize: `${fontSize()}px`,
+        textAlign: 'center',
+        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
       }
-    `;
+    });
   } catch (e) {
     return null;
   }

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.0";
+const packageVersion = "77.11.2";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.11.0",
+      packageName: "77.11.2",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/lightCards/errorIcon/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-export const errorIconWrapperStyles = css`
-  display: flex;
-  color: ${"var(--ds-icon-warning, #ff991f)"};
-`;
+export const errorIconWrapperStyles = css({
+  display: 'flex',
+  color: "var(--ds-icon-warning, #ff991f)"
+});

package/dist/es2019/utils/lightCards/styles.js

@@ -3,13 +3,12 @@ import { center, borderRadius } from '@atlaskit/media-ui';
 import { N20, N50 } from '@atlaskit/theme/colors';
 export const wrapperStyles = ({
   dimensions
-}) => css`
-  ${center}
-  background: ${`var(--ds-background-neutral, ${N20})`};
-  color: ${`var(--ds-icon, ${N50})`};
-  ${borderRadius}
-  max-height: 100%;
-  max-width: 100%;
-  width: ${dimensions.width};
-  height: ${dimensions.height};
-`;
+}) => css(center, {
+  background: `var(--ds-background-neutral, ${N20})`,
+  color: `var(--ds-icon, ${N50})`
+}, borderRadius, {
+  maxHeight: '100%',
+  maxWidth: '100%',
+  width: dimensions.width,
+  height: dimensions.height
+});

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.0";
+const packageVersion = "77.11.2";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.0";
+var packageVersion = "77.11.2";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.0";
+var packageVersion = "77.11.2";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/ui/actionsBar/cardActions/styles.js

@@ -1,14 +1,18 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rgba } from '../../styles';
 import { fontFamily } from '@atlaskit/theme/constants';
-var rootStyles = function rootStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), fontFamily());
-};
-export var wrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
+export var wrapperStyles = css({
+  boxSizing: 'border-box',
+  fontFamily: fontFamily(),
+  '*': {
+    boxSizing: 'border-box'
+  },
+  display: 'flex',
+  position: 'relative',
+  lineHeight: 0
+});
 export var CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
@@ -19,5 +23,13 @@ var getVariantStyles = function getVariantStyles(variant) {
 };
 export var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), center, borderRadius, size(26), "var(--ds-icon, ".concat(N500, ")"), getVariantStyles(variant));
+  return css({
+    appearance: 'none',
+    border: 'none'
+  }, center, borderRadius, size(26), {
+    color: "var(--ds-icon, ".concat(N500, ")"),
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  }, getVariantStyles(variant));
 };

package/dist/esm/card/ui/actionsBar/styles.js

@@ -1,10 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 export var actionsBarClassName = 'media-card-actions-bar';
 export var fixedActionBarStyles = "opacity: 1;";
 export var wrapperStyles = function wrapperStyles(isFixed) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+  return css(isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), {
+    position: 'absolute',
+    top: "var(--ds-space-100, 8px)",
+    right: "var(--ds-space-100, 8px)",
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    alignItems: 'center'
+  });
 };
 wrapperStyles.displayName = 'ActionsBarWrapper';

package/dist/esm/card/ui/blanket/styles.js

@@ -1,11 +1,17 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export var blanketClassName = 'media-card-blanket';
 export var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(N90A, ")"), ";");
 export var blanketStyles = function blanketStyles(isFixed) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  left: 0;\n  top: 0;\n  ", "\n"])), transition(), isFixed ? fixedBlanketStyles : '');
+  return css(transition(), {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    left: 0,
+    top: 0
+  }, isFixed ? fixedBlanketStyles : '');
 };
 blanketStyles.displayName = 'Blanket';

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

@@ -1,7 +1,6 @@
 /**@jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { keyframes } from '@emotion/react';
-import { Box, xcss } from '@atlaskit/primitives';
 var breatheAnimation = keyframes({
   '0%': {
     opacity: 1
@@ -13,32 +12,32 @@ var breatheAnimation = keyframes({
     opacity: 1
   }
 });
-var animatedStyles = xcss({
+var animatedStyles = css({
   animationName: breatheAnimation,
   animationDuration: '3.5s',
   animationTimingFunction: 'ease-in-out',
   animationIterationCount: 'infinite'
 });
-var reducedFontStyle = xcss({
+var reducedFontStyle = css({
   fontSize: '0.7em'
 });
-var baseStyles = xcss({
+var baseStyles = css({
   overflow: 'hidden',
   opacity: 1,
   fontWeight: 450,
-  color: 'color.text.subtlest',
+  color: "var(--ds-text-subtlest, #7A869A)",
   textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // 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: 'space.050',
-  paddingInline: 'space.100'
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-100, 8px)"
 });
 export var IconMessageWrapper = function IconMessageWrapper(props) {
   var animated = props.animated,
     reducedFont = props.reducedFont;
-  return jsx(Box, {
+  return jsx("div", {
     id: "iconMessageWrapper",
-    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
+    css: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

package/dist/esm/card/ui/iconWrapper/styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { getTitleBoxHeight } from '../common';
 export function titleBoxHeight(hasTitleBox, breakpoint) {
@@ -15,6 +13,14 @@ export function titleBoxHeight(hasTitleBox, breakpoint) {
 export var iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,
     breakpoint = _ref.breakpoint;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: calc(100% - ", ");\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), titleBoxHeight(hasTitleBox, breakpoint));
+  return css({
+    position: 'absolute',
+    width: '100%',
+    height: "calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ")"),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  });
 };
 iconWrapperStyles.displayName = 'MediaIconWrapper';

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
 export var playButtonClassName = 'media-card-play-button';
@@ -7,5 +5,26 @@ export var bkgClassName = 'play-icon-background';
 var discSize = 48;
 var discSizeHover = 56;
 export var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
-export var playButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  span {\n    position: absolute;\n  }\n"])), "var(--ds-icon-inverse, ".concat(N0, ")"));
-export var backgroundStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background: ", ";\n  border-radius: 100%;\n"])), discSize, discSize, "var(--ds-background-neutral-bold, ".concat(N90A, ")"));
+export var playButtonWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: "var(--ds-icon-inverse, ".concat(N0, ")"),
+  span: {
+    position: 'absolute'
+  }
+});
+export var backgroundStyles = css({
+  transitionProperty: 'width, height',
+  transitionDuration: '0.1s',
+  position: 'absolute',
+  width: "".concat(discSize, "px"),
+  height: "".concat(discSize, "px"),
+  background: "var(--ds-background-neutral-bold, ".concat(N90A, ")"),
+  borderRadius: '100%'
+});

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../styles';
@@ -35,6 +33,6 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export var styledBarStyles = function styledBarStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), getStyledBarStylesBasedOnProps(props));
+  return css(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

package/dist/esm/card/ui/styles.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
@@ -61,7 +59,15 @@ export var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTi
   }
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
-export var cardImageContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);
+export var cardImageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden'
+}, borderRadius);
 var defaultTransitionDuration = '.3s';
 export var transition = function transition() {
   var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';