@telefonica/mistica 11.2.1 → 11.4.1

package/dist/button.js

@@ -119,7 +119,7 @@ function _unsupportedIterableToArray(o, minLen) {
 }
 var BUTTON_MIN_WIDTH = 136;
 exports.BUTTON_MIN_WIDTH = BUTTON_MIN_WIDTH;
-var transitionTiming = '0.3s cubic-bezier(0.77, 0, 0.175, 1)';
+var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
 var BORDER_PX = 1.5;
 var SPINNER_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
@@ -129,40 +129,40 @@ var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
 var commonClasses = function commonClasses() {
     return {
         button: {
-            display: 'inline-block',
-            position: 'relative',
-            width: 'auto',
+            display: "inline-block",
+            position: "relative",
+            width: "auto",
             minWidth: BUTTON_MIN_WIDTH,
-            textAlign: 'center',
+            textAlign: "center",
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
-            overflow: 'hidden',
-            '&:hover:not([disabled])': {
+            overflow: "hidden",
+            "&:hover:not([disabled])": {
                 transition: "background-color ".concat(transitionTiming, ", color ").concat(transitionTiming, ", border-color ").concat(transitionTiming)
             }
         },
         loadingFiller: {
-            display: 'block',
+            display: "block",
             height: 0,
             opacity: 0,
-            overflow: 'hidden'
+            overflow: "hidden"
         },
         small: {
             minWidth: 104
         },
         loadingContent: {
-            display: 'inline-flex',
-            position: 'absolute',
+            display: "inline-flex",
+            position: "absolute",
             top: 0,
             bottom: 0,
             left: X_PADDING_PX,
             right: X_PADDING_PX,
-            justifyContent: 'center',
-            alignItems: 'center',
+            justifyContent: "center",
+            alignItems: "center",
             opacity: 0,
-            transform: 'translateY(2rem)',
+            transform: "translateY(2rem)",
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
-            '$small &': {
+            "$small &": {
                 left: X_SMALL_PADDING_PX,
                 right: X_SMALL_PADDING_PX
             }
@@ -171,22 +171,22 @@ var commonClasses = function commonClasses() {
             padding: "".concat(Y_PADDING_PX, "px ").concat(X_PADDING_PX, "px"),
             opacity: 1,
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
-            '$small &': {
+            "$small &": {
                 padding: "".concat(Y_SMALL_PADDING_PX, "px ").concat(X_SMALL_PADDING_PX, "px")
             },
-            '& svg': {
+            "& svg": {
                 marginRight: SPINNER_MARGIN_PX,
-                verticalAlign: 'bottom',
-                height: '100%'
+                verticalAlign: "bottom",
+                height: "100%"
             }
         },
         isLoading: {
-            '& $textContent': {
-                transform: 'translateY(-2rem)',
+            "& $textContent": {
+                transform: "translateY(-2rem)",
                 opacity: 0
             },
-            '& $loadingContent': {
-                transform: 'translateY(0)',
+            "& $loadingContent": {
+                transform: "translateY(0)",
                 opacity: 1
             }
         }
@@ -200,10 +200,10 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
         light: {
             color: theme.colors.textButtonPrimary,
             backgroundColor: theme.colors.buttonPrimaryBackground,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelected
             },
-            '&[disabled]:not($isLoading)': disabledStyle,
+            "&[disabled]:not($isLoading)": disabledStyle,
             // Next media queries were added in each button style, because a pair of bugs in mobile devices (related to: https://jira.tuenti.io/jira/browse/APPS-1882):
             // - When tapping on a button that takes you to next screen and then go back to the previous one, button still have the focus styles
             // - Same behavior if you do long press on the button
@@ -211,9 +211,9 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            '&:hover:not([disabled])': {
+            "&:hover:not([disabled])": {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
-                '@media (pointer: coarse)': {
+                "@media (pointer: coarse)": {
                     // Revert hover background in touch devices
                     backgroundColor: theme.colors.buttonPrimaryBackground
                 }
@@ -222,15 +222,15 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
         inverse: {
             color: theme.colors.textButtonPrimaryInverse,
             backgroundColor: theme.colors.buttonPrimaryBackgroundInverse,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': disabledStyle,
-            '&:hover:not([disabled])': {
+            "&[disabled]:not($isLoading)": disabledStyle,
+            "&:hover:not([disabled])": {
                 color: theme.colors.textButtonPrimaryInverseSelected,
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
-                '@media (pointer: coarse)': {
+                "@media (pointer: coarse)": {
                     color: theme.colors.textButtonPrimaryInverse,
                     backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
                 }
@@ -241,7 +241,7 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
 var buttonSecondaryLightStyle = function buttonSecondaryLightStyle(theme) {
     return {
         color: theme.colors.textButtonSecondary,
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         borderColor: theme.colors.buttonSecondaryBackground
     };
 };
@@ -254,24 +254,24 @@ var buttonSecondaryHoverLightStyle = function buttonSecondaryHoverLightStyle(the
 var useSecondaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
     return _objectSpread({}, commonClasses(), {
         light: _objectSpread({}, buttonSecondaryLightStyle(theme), {
-            '&:enabled:active': _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
-            '&[disabled]:not($isLoading)': disabledStyle,
-            '&:hover:not([disabled])': _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
-                '@media (pointer: coarse)': _objectSpread({}, buttonSecondaryLightStyle(theme))
+            "&:enabled:active": _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
+            "&[disabled]:not($isLoading)": disabledStyle,
+            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
+                "@media (pointer: coarse)": _objectSpread({}, buttonSecondaryLightStyle(theme))
             })
         }),
         inverse: {
             borderColor: theme.colors.buttonSecondaryBorderInverse,
             color: theme.colors.textButtonSecondaryInverse,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': disabledStyle,
-            '&:hover:not([disabled])': {
+            "&[disabled]:not($isLoading)": disabledStyle,
+            "&:hover:not([disabled])": {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected,
-                '@media (pointer: coarse)': {
+                "@media (pointer: coarse)": {
                     borderColor: theme.colors.buttonSecondaryBorderInverse,
                     color: theme.colors.textButtonSecondaryInverse
                 }
@@ -283,15 +283,15 @@ var dangerButtonStyles = function dangerButtonStyles(theme) {
     return {
         color: theme.colors.textButtonPrimary,
         backgroundColor: theme.colors.buttonDangerBackground,
-        '&:enabled:active': {
+        "&:enabled:active": {
             backgroundColor: theme.colors.buttonDangerBackgroundSelected
         },
-        '&[disabled]:not($isLoading)': {
+        "&[disabled]:not($isLoading)": {
             opacity: 0.5
         },
-        '&:hover:not([disabled])': {
+        "&:hover:not([disabled])": {
             backgroundColor: theme.colors.buttonDangerBackgroundHover,
-            '@media (pointer: coarse)': {
+            "@media (pointer: coarse)": {
                 // Revert hover background in touch devices
                 backgroundColor: theme.colors.buttonDangerBackground
             }
@@ -309,7 +309,7 @@ var Button = function Button(props) {
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
     var isSubmitButton = !!props.submit;
-    var isFormSending = formStatus === 'sending';
+    var isFormSending = formStatus === "sending";
     var showSpinner = props.showSpinner || isFormSending && isSubmitButton;
     // This state is needed to not render the spinner when hidden (because it causes high CPU usage
     // specially in iPhone). But we want the spinner to be visible during the show/hide animation.
@@ -348,7 +348,7 @@ var Button = function Button(props) {
     var commonProps = {
         className: (0, _classnames).default(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
-            cursor: props.fake ? 'pointer' : undefined
+            cursor: props.fake ? "pointer" : undefined
         }, props.style),
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
             category: _analytics.eventCategories.userInteraction,
@@ -356,8 +356,8 @@ var Button = function Button(props) {
             label: (0, _common).getTextFromChildren(props.children)
         } : undefined,
         dataAttributes: props.dataAttributes,
-        'aria-controls': props['aria-controls'],
-        'aria-expanded': props['aria-expanded'],
+        "aria-controls": props["aria-controls"],
+        "aria-expanded": props["aria-expanded"],
         tabIndex: props.tabIndex,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
             children: [
@@ -391,7 +391,7 @@ var Button = function Button(props) {
                             size: spinnerSizeRem
                         }) : /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                             style: {
-                                display: 'inline-block',
+                                display: "inline-block",
                                 width: spinnerSizeRem,
                                 height: spinnerSizeRem
                             }
@@ -405,50 +405,50 @@ var Button = function Button(props) {
             ]
         }),
         disabled: props.disabled || showSpinner || isFormSending,
-        role: 'button'
+        role: "button"
     };
-    if (process.env.NODE_ENV !== 'production') {
-        if (props.to === '' || props.href === '') {
-            throw Error('to or href props are empty strings');
+    if (process.env.NODE_ENV !== "production") {
+        if (props.to === "" || props.href === "") {
+            throw Error("to or href props are empty strings");
         }
     }
     if (props.fake) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             maybe: true
         }, commonProps, {
             role: "presentation",
             "aria-hidden": "true"
-        })));
+        }));
     }
     if (props.submit) {
         // using empty onPress handler so it gets rendered as a button
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             type: "submit",
             formId: formId,
             onPress: function onPress() {}
-        }, commonProps)));
+        }, commonProps));
     }
     if (props.onPress) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, commonProps, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, commonProps, {
             onPress: props.onPress
-        })));
+        }));
     }
-    if (props.to || props.to === '') {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, commonProps, {
+    if (props.to || props.to === "") {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
-        })));
+        }));
     }
-    if (props.href || props.href === '') {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, commonProps, {
+    if (props.href || props.href === "") {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, commonProps, {
             href: props.href,
             newTab: props.newTab,
             loadOnTop: props.loadOnTop
-        })));
+        }));
     }
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== "production") {
         // this cannot happen
-        throw Error('Bad button props');
+        throw Error("Bad button props");
     }
     return null;
 };
@@ -456,33 +456,33 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
     var padding = 6;
     return {
         link: {
-            display: 'inline-block',
-            width: 'auto',
+            display: "inline-block",
+            width: "auto",
             padding: padding,
             fontWeight: 500,
             borderRadius: 4,
-            overflow: 'hidden',
+            overflow: "hidden",
             transition: "background-color ".concat(transitionTiming, ", color ").concat(transitionTiming),
             color: theme.colors.textLink,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            '&:hover:not([disabled])': {
+            "&:hover:not([disabled])": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected,
-                '@media (pointer: coarse)': {
-                    backgroundColor: 'initial'
+                "@media (pointer: coarse)": {
+                    backgroundColor: "initial"
                 }
             }
         },
         inverse: {
             color: theme.colors.textLinkInverse,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            '&:hover:not([disabled])': {
+            "&:hover:not([disabled])": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
-                '@media (pointer: coarse)': {
-                    backgroundColor: 'initial'
+                "@media (pointer: coarse)": {
+                    backgroundColor: "initial"
                 }
             }
         },
@@ -511,62 +511,62 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             children: props.children
         })
     };
-    if (process.env.NODE_ENV !== 'production') {
-        if (props.to === '' || props.href === '') {
-            throw Error('to or href props are empty strings');
+    if (process.env.NODE_ENV !== "production") {
+        if (props.to === "" || props.href === "") {
+            throw Error("to or href props are empty strings");
         }
     }
     if (props.onPress) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
         }, commonProps, {
             onPress: props.onPress
-        })));
+        }));
     }
-    if (props.to || props.to === '') {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+    if (props.to || props.to === "") {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
-        })));
+        }));
     }
-    if (props.href || props.href === '') {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+    if (props.href || props.href === "") {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             ref: ref
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
-        })));
+        }));
     }
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== "production") {
         // this cannot happen
-        throw Error('Bad button props');
+        throw Error("Bad button props");
     }
     return null;
 });
 exports.ButtonLink = ButtonLink;
 var ButtonPrimary = function ButtonPrimary(props) {
     var classes = usePrimaryButtonStyles();
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
         classes: classes,
         type: "primary"
-    })));
+    }));
 };
 exports.ButtonPrimary = ButtonPrimary;
 var ButtonSecondary = function ButtonSecondary(props) {
     var classes = useSecondaryButtonStyles();
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
         classes: classes,
         type: "secondary"
-    })));
+    }));
 };
 exports.ButtonSecondary = ButtonSecondary;
 var ButtonDanger = function ButtonDanger(props) {
     var classes = useDangerButtonStyles();
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
         classes: classes,
         type: "danger"
-    })));
+    }));
 };
 exports.ButtonDanger = ButtonDanger;

package/dist/button.js.flow

@@ -86,10 +86,7 @@ export type ButtonLinkProps =
   | ButtonLinkOnPressProps
   | ButtonLinkHrefProps
   | ButtonLinkToProps;
-declare export var ButtonLink: React.ComponentType<{
-  ...ButtonLinkProps,
-  ref?: React.Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>,
-}>;
+declare export var ButtonLink: React.AbstractComponent<ButtonLinkProps, HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;
 declare export var ButtonPrimary: React.ComponentType<ButtonProps>;
 declare export var ButtonSecondary: React.ComponentType<ButtonProps>;
 declare export var ButtonDanger: React.ComponentType<ButtonProps>;
@@ -103,4 +100,4 @@ export type NullableButtonElement =
   | RendersNullableElement<typeof ButtonDanger>;
 declare export {};
 
-import { type CssStyle } from "./__types__.js.flow";
+import { type CssStyle } from "./__css_types__.js.flow";

package/dist/callout.js

@@ -62,19 +62,19 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
             background: colors.backgroundAlternative,
             borderRadius: 4,
             padding: 16,
-            overflow: 'hidden',
-            display: 'flex',
+            overflow: "hidden",
+            display: "flex",
             minHeight: 56,
-            '& > *': {
+            "& > *": {
                 flexShrink: 0
             }
         },
         icon: {
-            display: 'flex',
+            display: "flex",
             marginRight: 16
         },
         content: {
-            alignSelf: 'center',
+            alignSelf: "center",
             flex: 1
         },
         overInverse: {
@@ -83,14 +83,14 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
     };
 });
 var Callout = function Callout(param) {
-    var title = param.title, description = param.description, icon = param.icon, onClose = param.onClose, button = param.button, secondaryButton = param.secondaryButton, buttonLink = param.buttonLink, ariaLabel = param['aria-label'];
+    var title = param.title, description = param.description, icon = param.icon, onClose = param.onClose, button = param.button, secondaryButton = param.secondaryButton, buttonLink = param.buttonLink, ariaLabel = param["aria-label"];
     var needsButtonLinkAlignment = buttonLink && !button;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         needsButtonLinkAlignment: needsButtonLinkAlignment
     });
     var ref = (0, _hooks).useTheme(), colors = ref.colors, texts = ref.texts;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("section", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("section", {
         className: (0, _classnames).default(classes.container, _defineProperty({}, classes.overInverse, isInverse)),
         "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : title,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_themeVariantContext.ThemeVariant, {
@@ -129,10 +129,10 @@ var Callout = function Callout(param) {
                                     onClose && /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
                                         size: 40,
                                         style: {
-                                            display: 'flex',
-                                            margin: '-8px -12px',
-                                            alignItems: 'center',
-                                            justifyContent: 'center'
+                                            display: "flex",
+                                            margin: "-8px -12px",
+                                            alignItems: "center",
+                                            justifyContent: "center"
                                         },
                                         onPress: onClose,
                                         "aria-label": texts.closeButtonLabel,
@@ -153,7 +153,7 @@ var Callout = function Callout(param) {
                 })
             ]
         })
-    }));
+    });
 };
 var _default = Callout;
 exports.default = _default;

package/dist/card.js

@@ -44,8 +44,8 @@ var useCardContentStyles = (0, _jss).createUseStyles(function() {
     return {
         actions: {
             flex: 1,
-            display: 'flex',
-            alignItems: 'flex-end'
+            display: "flex",
+            alignItems: "flex-end"
         }
     };
 });
@@ -57,15 +57,15 @@ var CardContent = function CardContent(param) {
         if (!headline) {
             return null;
         }
-        if (typeof headline === 'string') {
-            return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_tag.default, {
+        if (typeof headline === "string") {
+            return /*#__PURE__*/ (0, _jsxRuntime).jsx(_tag.default, {
                 type: "promo",
                 children: headline
-            }));
+            });
         }
         return headline;
     };
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
         space: 16,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
@@ -117,33 +117,33 @@ var CardContent = function CardContent(param) {
                 })
             })
         ]
-    }));
+    });
 };
 var useMediaCardStyles = (0, _jss).createUseStyles(function() {
     return {
         boxed: {
-            height: '100%'
+            height: "100%"
         },
         mediaCard: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            height: "100%"
         },
         content: {
             flex: 1,
             padding: 16,
             paddingBottom: 24,
-            display: 'flex',
-            flexDirection: 'column'
+            display: "flex",
+            flexDirection: "column"
         }
     };
 });
 var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var media = param.media, headline = param.headline, pretitle = param.pretitle, title = param.title, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, ariaLabel = param['aria-label'];
+    var media = param.media, headline = param.headline, pretitle = param.pretitle, title = param.title, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, ariaLabel = param["aria-label"];
     var classes = useMediaCardStyles({
         media: media
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         className: classes.boxed,
         ref: ref,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
@@ -167,26 +167,26 @@ var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                 })
             ]
         })
-    }));
+    });
 });
 exports.MediaCard = MediaCard;
 var useDataCardStyles = (0, _jss).createUseStyles(function() {
     return {
         boxed: {
-            height: '100%'
+            height: "100%"
         },
         dataCard: {
-            display: 'flex',
-            flexDirection: 'column',
-            padding: '24px 16px',
-            height: '100%'
+            display: "flex",
+            flexDirection: "column",
+            padding: "24px 16px",
+            height: "100%"
         }
     };
 });
 var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var icon = param.icon, headline = param.headline, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
+    var icon = param.icon, headline = param.headline, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"];
     var classes = useDataCardStyles();
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         className: classes.boxed,
         dataAttributes: dataAttributes,
         ref: ref,
@@ -209,6 +209,6 @@ var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                 })
             ]
         })
-    }));
+    });
 });
 exports.DataCard = DataCard;

package/dist/card.js.flow

@@ -21,10 +21,7 @@ declare type MediaCardProps = {
   buttonLink?: RendersNullableElement<typeof ButtonLink>,
   "aria-label"?: string,
 };
-declare export var MediaCard: React.ComponentType<{
-  ...MediaCardProps,
-  ref?: React.Ref<HTMLDivElement>,
-}>;
+declare export var MediaCard: React.AbstractComponent<MediaCardProps, HTMLDivElement>;
 declare type DataCardProps = {
   /**
    * Typically a mistica-icons component element
@@ -43,8 +40,5 @@ declare type DataCardProps = {
   dataAttributes?: DataAttributes,
   "aria-label"?: string,
 };
-declare export var DataCard: React.ComponentType<{
-  ...DataCardProps,
-  ref?: React.Ref<HTMLDivElement>,
-}>;
+declare export var DataCard: React.AbstractComponent<DataCardProps, HTMLDivElement>;
 declare export {};