@atlaskit/media-card 73.7.0 → 74.1.0

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

@@ -0,0 +1,78 @@
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N60A } from '@atlaskit/theme/colors';
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
+import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
+import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styles';
+import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styles';
+import { Breakpoint, responsiveSettings } from './common';
+const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export const calcBreakpointSize = (wrapperWidth = 0) => {
+  const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
+  return breakpoint;
+};
+export const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  return `
+    font-size: ${setting.fontSize}px;
+    line-height: ${setting.lineHeight}px;
+  `;
+};
+export const getWrapperDimensions = (dimensions, appearance) => {
+  const {
+    width,
+    height
+  } = dimensions || {};
+  const {
+    width: defaultWidth,
+    height: defaultHeight
+  } = getDefaultCardDimensions(appearance);
+  return `
+    width: ${getCSSUnitValue(width || defaultWidth)};
+    max-width: 100%;
+    height: ${getCSSUnitValue(height || defaultHeight)};
+    max-height: 100%;
+  `;
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+export const getWrapperShadow = (disableOverlay, selected) => {
+  const withOverlayShadow = !disableOverlay ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
+  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? `box-shadow: ${shadow};` : '';
+};
+export const getCursorStyle = cursor => !!cursor ? `cursor: ${cursor};` : '';
+export const getClickablePlayButtonStyles = isPlayButtonClickable => {
+  if (!isPlayButtonClickable) {
+    return '';
+  }
+
+  return `
+    &:hover .${playButtonClassName} {
+      ${fixedPlayButtonStyles}
+    }
+  `;
+};
+export const getSelectableTickBoxStyles = isTickBoxSelectable => {
+  if (!isTickBoxSelectable) {
+    return '';
+  }
+
+  return `
+    &:hover .${tickBoxClassName} {
+      ${tickboxFixedStyles}
+    }
+  `;
+};
+export const cardImageContainerStyles = css`
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  ${borderRadius}
+`;

package/dist/es2019/root/ui/tickBox/styles.js

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+import { transition } from '../../../styles';
+import { B200, N0, N100 } from '@atlaskit/theme/colors';
+export const tickBoxClassName = 'media-card-tickbox';
+export const tickboxFixedStyles = `
+  background-color: ${N0};
+  color: ${N100};
+`;
+export const getSelectedStyles = selected => selected ? `background-color: ${B200};
+      color: white;` : ``;
+export const wrapperStyles = selected => css`
+  ${transition()}
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  border-radius: 20px;
+  color: transparent;
+  /* Enforce dimensions and position of "tick" icon */
+  span {
+    display: block;
+    svg {
+      height: 14px;
+    }
+  }
+  ${getSelectedStyles(selected)}
+`;
+wrapperStyles.displayName = 'TickBoxWrapper';

package/dist/es2019/root/ui/tickBox/tickBox.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Wrapper } from './styled';
 import TickIcon from '@atlaskit/icon/glyph/check';
+import { TickBoxWrapper } from './tickBoxWrapper';
 export const TickBox = ({
   selected
-}) => /*#__PURE__*/React.createElement(Wrapper, {
+}) => /*#__PURE__*/React.createElement(TickBoxWrapper, {
   selected: selected
 }, /*#__PURE__*/React.createElement(TickIcon, {
   label: "tick"

package/dist/es2019/root/ui/tickBox/tickBoxWrapper.js

@@ -0,0 +1,10 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, tickBoxClassName } from './styles';
+export const TickBoxWrapper = props => {
+  return jsx("div", {
+    id: "tickBoxWrapper",
+    css: wrapperStyles(props.selected),
+    className: tickBoxClassName
+  }, props.children);
+};

package/dist/es2019/root/ui/tickBox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/root/ui/titleBox/failedTitleBox.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
+import { FormattedMessage } from 'react-intl-next';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { FormattedMessage } from 'react-intl-next';
-import { FormattedMessageWrapper } from '../../styled';
+import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
 export const FailedTitleBox = ({
   breakpoint,
   customMessage = messages.failed_to_load
@@ -15,5 +14,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
+  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react';
+import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
+import { N0 } from '@atlaskit/theme/colors';
+import { rgba } from '../../../styles/mixins';
+
+const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  const verticalPadding = setting.titleBox.verticalPadding;
+  const horizontalPadding = setting.titleBox.horizontalPadding;
+  const height = getTitleBoxHeight(breakpoint);
+  return `height: ${height}px;
+    padding: ${verticalPadding}px ${horizontalPadding}px;`;
+};
+
+const HEX_REGEX = /^#[0-9A-F]{6}$/i;
+export const titleBoxWrapperStyles = ({
+  breakpoint,
+  titleBoxBgColor
+}) => css`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8)};
+  color: inherit;
+  cursor: inherit;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: 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}
+`;
+titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
+export const titleBoxFooterStyles = ({
+  hasIconOverlap
+}) => css`
+  text-overflow: ellipsis;
+  ${infoStyles}
+  ${hasIconOverlap && iconOverlapStyles}
+`;
+titleBoxFooterStyles.displayName = 'TitleBoxFooter';
+export const titleBoxIconStyles = css`
+  position: absolute;
+  right: 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: 4px;
+      margin-right: 4px;
+    }
+  }
+`;

package/dist/es2019/root/ui/titleBox/titleBox.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
 import { injectIntl } from 'react-intl-next';
-import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
+import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
+import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
 export const FormattedDate = injectIntl(({
   timestamp,
   intl

package/dist/es2019/root/ui/titleBox/titleBoxComponents.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { errorMessageWrapperStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
+export const TitleBoxWrapper = props => {
+  const {
+    breakpoint,
+    titleBoxBgColor
+  } = props;
+  return jsx("div", {
+    id: "titleBoxWrapper",
+    css: titleBoxWrapperStyles({
+      breakpoint: breakpoint,
+      titleBoxBgColor: titleBoxBgColor
+    })
+  }, props.children);
+};
+export const TitleBoxHeader = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  return jsx("div", {
+    id: "titleBoxHeader",
+    css: titleBoxHeaderStyles({
+      hasIconOverlap
+    })
+  }, props.children);
+};
+export const TitleBoxFooter = props => {
+  const {
+    hasIconOverlap
+  } = props;
+  return jsx("div", {
+    id: "titleBoxFooter",
+    css: titleBoxFooterStyles({
+      hasIconOverlap
+    })
+  }, props.children);
+};
+export const TitleBoxIcon = props => {
+  return jsx("div", {
+    id: "titleBoxIcon",
+    css: titleBoxIconStyles
+  }, props.children);
+};
+export const ErrorMessageWrapper = props => {
+  return jsx("div", {
+    css: errorMessageWrapperStyles
+  }, props.children);
+};

package/dist/es2019/root/ui/titleBox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/styles/animations.js

@@ -1,4 +1,4 @@
-import { keyframes } from 'styled-components';
+import { keyframes } from '@emotion/react';
 export const spin = keyframes`
   to { transform: rotate(360deg); }
 `;

package/dist/es2019/styles/index.js

@@ -1,11 +1,11 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { fadeIn } from '@atlaskit/media-ui';
 export { defaultTransitionDuration } from './config';
 export { antialiased, borderRadiusLeft, capitalize, centerSelf, centerSelfX, centerSelfY, centerX, hexToRgb, rgba, spaceAround, transition, withAppearance } from './mixins';
 export { easeOutCubic, easeOutExpo } from './easing';
 export { spin } from './animations';
-export const Root = styled.div`
+export const rootStyles = () => css`
   box-sizing: border-box;
   font-family: ${fontFamily()};
 
@@ -16,7 +16,7 @@ export const Root = styled.div`
 export const cardShadow = `
   box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);
 `;
-export const FadeinImage = styled.div`
+export const fadeinImageStyles = () => css`
   ${fadeIn};
 `;
-export default Root;
+export default rootStyles;

package/dist/es2019/utils/analytics.js

@@ -9,7 +9,8 @@ const relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: false
+  mediaUploadApiV2: true,
+  memoryCacheLogging: true
 };
 export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
 export const LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
@@ -52,6 +53,22 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
     ssrReliability
   }
 });
+export const getCacheHitEventPayload = cardPreviewAttributes => ({
+  eventType: 'operational',
+  action: 'cache-hit',
+  actionSubject: 'mediaCardCache',
+  attributes: {
+    cardPreviewAttributes
+  }
+});
+export const getRemoteSuccessEventPayload = cardPreviewAttributes => ({
+  eventType: 'operational',
+  action: 'Remote-success',
+  actionSubject: 'mediaCardCache',
+  attributes: {
+    cardPreviewAttributes
+  }
+});
 export const getRenderFailedExternalUriPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
   action: 'failed',

package/dist/es2019/utils/cardActions/cardActionButton.js

@@ -0,0 +1,13 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { cardActionButtonStyles } from './styles';
+export const CardActionButton = props => {
+  return jsx("div", {
+    id: "cardActionButton",
+    "data-testid": "media-card-primary-action",
+    css: cardActionButtonStyles(props),
+    style: props.style,
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown
+  }, props.children);
+};

package/dist/es2019/utils/cardActions/cardActionIconButton.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
-import { CardActionButton } from './styled';
+import { CardActionButton } from './cardActionButton';
 export class CardActionIconButton extends Component {
   constructor(...args) {
     super(...args);
@@ -19,7 +19,6 @@ export class CardActionIconButton extends Component {
       variant
     } = this.props;
     return /*#__PURE__*/React.createElement(CardActionButton, {
-      "data-testid": "media-card-primary-action",
       onClick: onClick,
       onMouseDown: this.onMouseDown,
       style: {

package/dist/es2019/utils/cardActions/cardActionsDropdownMenu.js

@@ -3,9 +3,9 @@ import React from 'react';
 import { Component } from 'react';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import DropdownMenu, { DropdownItemGroup, DropdownItem } from '@atlaskit/dropdown-menu';
-import { CardActionButton } from './styled';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireMediaCardEvent } from '../analytics';
+import { CardActionButton } from './cardActionButton';
 
 const CardActionButtonWithProps = props => /*#__PURE__*/React.createElement(CardActionButton, props);
 

package/dist/es2019/utils/cardActions/cardActionsView.js

@@ -1,13 +1,14 @@
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { Wrapper } from './styled';
 import { CardActionIconButton } from './cardActionIconButton';
+import { wrapperStyles } from './styles';
 import { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
 import { PreventClickThrough } from '../preventClickThrough';
 import { createAndFireMediaCardEvent } from '../analytics';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 
-const CardActionIconButtonWithProps = props => /*#__PURE__*/React.createElement(CardActionIconButton, props);
+const CardActionIconButtonWithProps = props => jsx(CardActionIconButton, props);
 
 export class CardActionsView extends Component {
   render() {
@@ -21,7 +22,9 @@ export class CardActionsView extends Component {
 
     const primaryAction = actions.find(actionWithIcon);
     const otherActions = actions.filter(actionNotEqualTo(primaryAction));
-    return /*#__PURE__*/React.createElement(PreventClickThrough, null, /*#__PURE__*/React.createElement(Wrapper, null, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
+    return jsx(PreventClickThrough, null, jsx("div", {
+      css: wrapperStyles
+    }, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
   }
 
   renderActionIconButton(action, isPrimary) {
@@ -46,7 +49,7 @@ export class CardActionsView extends Component {
         }
       })
     })(CardActionIconButtonWithProps);
-    return /*#__PURE__*/React.createElement(CardActionIconButtonWithAnalytics, {
+    return jsx(CardActionIconButtonWithAnalytics, {
       icon: icon,
       triggerColor: triggerColor,
       onClick: () => handler(),
@@ -69,7 +72,7 @@ export class CardActionsView extends Component {
       if (firstActionWithIcon && otherActions.length === 0) {
         return this.renderActionIconButton(firstActionWithIcon, false);
       } else {
-        return /*#__PURE__*/React.createElement(CardActionsDropdownMenu, {
+        return jsx(CardActionsDropdownMenu, {
           actions: actions,
           triggerColor: triggerColor,
           onOpenChange: onToggle,

package/dist/es2019/utils/cardActions/index.js

@@ -1,4 +1,4 @@
 export { CardActionsView as default, CardActionsView } from './cardActionsView';
 export { CardActionIconButton } from './cardActionIconButton';
 export { CardActionsDropdownMenu } from './cardActionsDropdownMenu';
-export { CardActionIconButtonVariant } from './styled';
+export { CardActionIconButtonVariant } from './styles';

package/dist/es2019/utils/cardActions/{styled.js → styles.js}

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
-import { Root } from '../../styles';
-export const Wrapper = styled(Root)`
+import { rootStyles } from '../../styles';
+export const wrapperStyles = css`
+  ${rootStyles()}
   display: flex;
   position: relative;
   line-height: 0;
@@ -34,16 +35,17 @@ const getVariantStyles = variant => {
   `;
 };
 
-export const CardActionButton = styled.div`
-  ${({
+export const cardActionButtonStyles = ({
   variant
-}) => `
-    ${center} ${borderRadius} ${size(26)} color: ${N500};
+}) => css`
+  ${center}
+  ${borderRadius}
+    ${size(26)}
+    color: ${N500};
 
-    &:hover {
-      cursor: pointer;
-    }
+  &:hover {
+    cursor: pointer;
+  }
 
-    ${getVariantStyles(variant)}
-  `}
+  ${getVariantStyles(variant)}
 `;

package/dist/es2019/utils/document.js

@@ -1 +1,11 @@
-export default (() => document);
+export default (() => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+
+  return window.document;
+});

package/dist/es2019/utils/errorIcon/index.js

@@ -1,14 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
-import { ErrorIconWrapper } from './styled';
+import { errorIconWrapperStyles } from './styles';
 export class ErrorIcon extends Component {
   render() {
     const {
       size
     } = this.props;
-    return /*#__PURE__*/React.createElement(ErrorIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
+    return jsx("div", {
+      css: errorIconWrapperStyles
+    }, jsx(WarningIcon, {
       label: "Error",
       size: size
     }));

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

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+export const errorIconWrapperStyles = css`
+  display: flex;
+  color: #ff991f;
+`;

package/dist/es2019/utils/fileIcon/index.js

@@ -1,7 +1,8 @@
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { MediaTypeIcon } from '../mediaTypeIcon';
-import { FileTypeIcon } from './styled';
+import { fileTypeIconStyles } from './styles';
 const fileTypeIconClass = 'file-type-icon';
 export class FileIcon extends Component {
   render() {
@@ -11,17 +12,18 @@ export class FileIcon extends Component {
       style
     } = this.props;
     const type = mediaType || 'unknown';
-    const defaultIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
+    const defaultIcon = jsx(MediaTypeIcon, {
       type: mediaType,
       size: "small",
       className: fileTypeIconClass
     });
-    const icon = iconUrl ? /*#__PURE__*/React.createElement("img", {
+    const icon = iconUrl ? jsx("img", {
       src: iconUrl,
       className: "custom-icon",
       alt: type
     }) : defaultIcon;
-    return /*#__PURE__*/React.createElement(FileTypeIcon, {
+    return jsx("div", {
+      css: fileTypeIconStyles,
       style: style,
       className: fileTypeIconClass
     }, icon);

package/dist/es2019/utils/fileIcon/{styled.js → styles.js}

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { size } from '@atlaskit/media-ui';
-export const FileTypeIcon = styled.div`
+export const fileTypeIconStyles = css`
   float: left;
   margin-right: 6px;
   position: relative;

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Component } from 'react';
 import { ErrorIcon } from '../errorIcon';
-import { Wrapper } from './styled';
+import { Wrapper } from './lightCardWrappers';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 export class CardError extends Component {
   render() {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
-import { Wrapper, AnimatedWrapper } from './styled';
+import { Wrapper, AnimatedWrapper } from './lightCardWrappers';
 import SpinnerIcon from '@atlaskit/spinner';
 import FileIcon from '@atlaskit/icon/glyph/file';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, animatedWrapperStyles } from './styles';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+export const Wrapper = props => {
+  const theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: wrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+export const AnimatedWrapper = props => {
+  const theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: animatedWrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};