@telefonica/mistica 10.12.0 → 10.14.2

package/dist/button.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.ButtonPrimary = exports.BUTTON_MIN_WIDTH = exports.ButtonLink = exports.ButtonDanger = exports.ButtonSecondary = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _spinner = _interopRequireDefault(require("./spinner"));
@@ -57,20 +58,6 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
 function _iterableToArrayLimit(arr, i) {
     var _arr = [];
     var _n = true;
@@ -344,19 +331,21 @@ var Button = function Button(props) {
     ]);
     var spinnerSizeRem = (0, _css).pxToRem(props.small ? 16 : 24);
     var renderText = function renderText(text) {
-        return props.small ? /*#__PURE__*/ React.createElement(_text.Text, {
+        return props.small ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
             size: 14,
             lineHeight: 20,
             weight: "medium",
             truncate: 1,
             color: "inherit",
-            as: "div"
-        }, text) : /*#__PURE__*/ React.createElement(_text.Text3, {
+            as: "div",
+            children: text
+        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
             medium: true,
             truncate: 1,
             color: "inherit",
-            as: "div"
-        }, text);
+            as: "div",
+            children: text
+        });
     };
     var commonProps = {
         className: (0, _classnames).default(classes.button, props.className, (_obj = {
@@ -369,43 +358,56 @@ var Button = function Button(props) {
         'aria-controls': props['aria-controls'],
         'aria-expanded': props['aria-expanded'],
         tabIndex: props.tabIndex,
-        children: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-            "aria-hidden": showSpinner ? true : undefined,
-            className: classes.textContent
-        }, renderText(props.children)), /*#__PURE__*/ React.createElement("div", {
-            className: classes.loadingFiller,
-            "aria-hidden": true,
-            style: {
-                paddingLeft: spinnerSizeRem,
-                paddingRight: SPINNER_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
-            }
-        }, renderText(loadingText)), /*#__PURE__*/ React.createElement("div", {
-            "aria-hidden": showSpinner ? undefined : true,
-            className: classes.loadingContent,
-            onTransitionEnd: function onTransitionEnd() {
-                if (showSpinner !== shouldRenderSpinner) {
-                    setShouldRenderSpinner(showSpinner);
-                }
-            }
-        }, shouldRenderSpinner ? /*#__PURE__*/ React.createElement(_spinner.default, {
-            rolePresentation: !!loadingText,
-            color: "currentcolor",
-            delay: "0s",
-            size: spinnerSizeRem
-        }) : /*#__PURE__*/ React.createElement("div", {
-            style: {
-                display: 'inline-block',
-                width: spinnerSizeRem,
-                height: spinnerSizeRem
-            }
-        }), loadingText ? /*#__PURE__*/ React.createElement(_box.default, {
-            paddingLeft: 8
-        }, renderText(loadingText)) : null)),
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    "aria-hidden": showSpinner ? true : undefined,
+                    className: classes.textContent,
+                    children: renderText(props.children)
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.loadingFiller,
+                    "aria-hidden": true,
+                    style: {
+                        paddingLeft: spinnerSizeRem,
+                        paddingRight: SPINNER_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
+                    },
+                    children: renderText(loadingText)
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+                    "aria-hidden": showSpinner ? undefined : true,
+                    className: classes.loadingContent,
+                    onTransitionEnd: function onTransitionEnd() {
+                        if (showSpinner !== shouldRenderSpinner) {
+                            setShouldRenderSpinner(showSpinner);
+                        }
+                    },
+                    children: [
+                        shouldRenderSpinner ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_spinner.default, {
+                            rolePresentation: !!loadingText,
+                            color: "currentcolor",
+                            delay: "0s",
+                            size: spinnerSizeRem
+                        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                            style: {
+                                display: 'inline-block',
+                                width: spinnerSizeRem,
+                                height: spinnerSizeRem
+                            }
+                        }),
+                        loadingText ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                            paddingLeft: 8,
+                            children: renderText(loadingText)
+                        }) : null
+                    ]
+                })
+            ]
+        }),
         disabled: props.disabled || showSpinner || isFormSending,
         role: 'button'
     };
     if (props.fake) {
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             maybe: true
         }, commonProps, {
             role: "presentation",
@@ -414,7 +416,7 @@ var Button = function Button(props) {
     }
     if (props.submit) {
         // using empty onPress handler so it gets rendered as a button
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
             type: "submit",
             formId: formId,
             onPress: function onPress() {
@@ -422,20 +424,20 @@ var Button = function Button(props) {
         }, commonProps)));
     }
     if (props.onPress) {
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
         }, commonProps, {
             onPress: props.onPress
         })));
     }
     if (props.to) {
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
     if (props.href) {
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
@@ -484,7 +486,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var _obj1;
-var ButtonLink = function ButtonLink(props) {
+var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useButtonLinkStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var commonProps = {
@@ -492,27 +494,31 @@ var ButtonLink = function ButtonLink(props) {
         }, _defineProperty(_obj1, classes.inverse, isInverse), _defineProperty(_obj1, classes.aligned, props.aligned), _obj1)),
         trackingEvent: props.trackingEvent,
         dataAttributes: props.dataAttributes,
-        children: /*#__PURE__*/ React.createElement(_text.Text2, {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
             medium: true,
             truncate: 1,
-            color: "inherit"
-        }, props.children)
+            color: "inherit",
+            children: props.children
+        })
     };
     if (props.onPress) {
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+            ref: ref
         }, commonProps, {
             onPress: props.onPress
         })));
     }
     if (props.to) {
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+            ref: ref
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
     if (props.href) {
-        return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
+            ref: ref
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
@@ -520,11 +526,11 @@ var ButtonLink = function ButtonLink(props) {
     }
     // this cannot happen
     throw Error('Bad button props');
-};
+});
 exports.ButtonLink = ButtonLink;
 var ButtonPrimary = function ButtonPrimary(props) {
     var classes = usePrimaryButtonStyles();
-    return(/*#__PURE__*/ React.createElement(Button, _extends({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({
     }, props, {
         classes: classes
     })));
@@ -532,7 +538,7 @@ var ButtonPrimary = function ButtonPrimary(props) {
 exports.ButtonPrimary = ButtonPrimary;
 var ButtonSecondary = function ButtonSecondary(props) {
     var classes = useSecondaryButtonStyles();
-    return(/*#__PURE__*/ React.createElement(Button, _extends({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({
     }, props, {
         classes: classes
     })));
@@ -540,7 +546,7 @@ var ButtonSecondary = function ButtonSecondary(props) {
 exports.ButtonSecondary = ButtonSecondary;
 var ButtonDanger = function ButtonDanger(props) {
     var classes = useDangerButtonStyles();
-    return(/*#__PURE__*/ React.createElement(Button, _extends({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({
     }, props, {
         classes: classes
     })));

package/dist/button.js.flow

@@ -78,7 +78,10 @@ export type ButtonLinkProps =
   | ButtonLinkOnPressProps
   | ButtonLinkHrefProps
   | ButtonLinkToProps;
-declare export var ButtonLink: React.ComponentType<ButtonLinkProps>;
+declare export var ButtonLink: React.ComponentType<{
+  ...ButtonLinkProps,
+  ref?: React.Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>,
+}>;
 declare export var ButtonPrimary: React.ComponentType<ButtonProps>;
 declare export var ButtonSecondary: React.ComponentType<ButtonProps>;
 declare export var ButtonDanger: React.ComponentType<ButtonProps>;

package/dist/callout.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _stack = _interopRequireDefault(require("./stack"));
 var _hooks = require("./hooks");
 var _themeVariantContext = require("./theme-variant-context");
@@ -18,29 +18,6 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {
-        };
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -89,42 +66,62 @@ var Callout = function Callout(param) {
         needsButtonLinkAlignment: needsButtonLinkAlignment
     });
     var ref = (0, _hooks).useTheme(), colors = ref.colors, texts = ref.texts;
-    return(/*#__PURE__*/ React.createElement("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
-    }, /*#__PURE__*/ React.createElement(_themeVariantContext.ThemeVariant, {
-        isInverse: false
-    }, icon && /*#__PURE__*/ React.createElement("div", {
-        className: classes.icon
-    }, icon), /*#__PURE__*/ React.createElement("div", {
-        className: classes.content
-    }, /*#__PURE__*/ React.createElement(_stack.default, {
-        space: 16
-    }, /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_text.Text3, {
-        as: "h2",
-        regular: true
-    }, title), /*#__PURE__*/ React.createElement(_text.Text2, {
-        as: "p",
-        regular: true,
-        color: colors.textSecondary
-    }, description)), (button || secondaryButton || buttonLink) && /*#__PURE__*/ React.createElement(_buttonGroup.default, {
-        primaryButton: button,
-        secondaryButton: secondaryButton,
-        link: buttonLink
-    }))), onClose && /*#__PURE__*/ React.createElement(_iconButton.default, {
-        size: 40,
-        style: {
-            display: 'flex',
-            margin: '-8px -12px -8px 0',
-            alignItems: 'center',
-            justifyContent: 'center'
-        },
-        onPress: onClose,
-        "aria-label": texts.closeButtonLabel
-    }, /*#__PURE__*/ React.createElement(_iconCloseRegular.default, {
-        color: colors.neutralHigh
-    })))));
+        "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : title,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_themeVariantContext.ThemeVariant, {
+            isInverse: false,
+            children: [
+                icon && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.icon,
+                    children: icon
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.content,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                        space: 16,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+                                        as: "h2",
+                                        regular: true,
+                                        children: title
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                        as: "p",
+                                        regular: true,
+                                        color: colors.textSecondary,
+                                        children: description
+                                    })
+                                ]
+                            }),
+                            (button || secondaryButton || buttonLink) && /*#__PURE__*/ (0, _jsxRuntime).jsx(_buttonGroup.default, {
+                                primaryButton: button,
+                                secondaryButton: secondaryButton,
+                                link: buttonLink
+                            })
+                        ]
+                    })
+                }),
+                onClose && /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
+                    size: 40,
+                    style: {
+                        display: 'flex',
+                        margin: '-8px -12px -8px 0',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    },
+                    onPress: onClose,
+                    "aria-label": texts.closeButtonLabel,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
+                        color: colors.neutralHigh
+                    })
+                })
+            ]
+        })
+    }));
 };
 var _default = Callout;
 exports.default = _default;

package/dist/card.d.ts

@@ -29,7 +29,7 @@ declare type MediaCardProps = {
     children?: void;
     'aria-label'?: string;
 };
-export declare const MediaCard: React.FC<MediaCardProps>;
+export declare const MediaCard: React.ForwardRefExoticComponent<MediaCardProps & React.RefAttributes<HTMLDivElement>>;
 interface DataCardProps {
     /**
      * Typically a mistica-icons component element
@@ -47,5 +47,5 @@ interface DataCardProps {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
 }
-export declare const DataCard: React.FC<DataCardProps>;
+export declare const DataCard: React.ForwardRefExoticComponent<DataCardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/card.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.MediaCard = exports.DataCard = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _tag = _interopRequireDefault(require("./tag"));
 var _stack = _interopRequireDefault(require("./stack"));
@@ -59,38 +60,68 @@ var CardContent = function CardContent(param) {
             return null;
         }
         if (typeof headline === 'string') {
-            return(/*#__PURE__*/ React.createElement(_tag.default, {
-                color: theme.colors.promo
-            }, headline));
+            return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_tag.default, {
+                color: theme.colors.promo,
+                children: headline
+            }));
         }
         return headline;
     };
-    return(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_stack.default, {
-        space: 16
-    }, /*#__PURE__*/ React.createElement(_stack.default, {
-        space: 8
-    }, (headline || pretitle || title || subtitle) && /*#__PURE__*/ React.createElement("header", null, /*#__PURE__*/ React.createElement(_stack.default, {
-        space: 4
-    }, renderHeadline(), pretitle && /*#__PURE__*/ React.createElement(_box.default, {
-        paddingTop: 4
-    }, /*#__PURE__*/ React.createElement(_text.Text1, {
-        regular: true,
-        uppercase: true
-    }, pretitle)), /*#__PURE__*/ React.createElement(_text.Text4, {
-        as: "h1",
-        regular: true
-    }, title), /*#__PURE__*/ React.createElement(_text.Text2, {
-        regular: true
-    }, subtitle))), description && /*#__PURE__*/ React.createElement(_text.Text2, {
-        as: "p",
-        regular: true,
-        color: theme.colors.textSecondary
-    }, description)), extra && /*#__PURE__*/ React.createElement("div", null, extra)), (button || buttonLink) && /*#__PURE__*/ React.createElement("div", {
-        className: classes.actions
-    }, /*#__PURE__*/ React.createElement(_buttonGroup.default, {
-        primaryButton: button,
-        link: buttonLink
-    }))));
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                space: 16,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                        space: 8,
+                        children: [
+                            (headline || pretitle || title || subtitle) && /*#__PURE__*/ (0, _jsxRuntime).jsx("header", {
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                                    space: 4,
+                                    children: [
+                                        renderHeadline(),
+                                        pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                                            paddingTop: 4,
+                                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                                                regular: true,
+                                                uppercase: true,
+                                                children: pretitle
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
+                                            as: "h1",
+                                            regular: true,
+                                            children: title
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            regular: true,
+                                            children: subtitle
+                                        })
+                                    ]
+                                })
+                            }),
+                            description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                as: "p",
+                                regular: true,
+                                color: theme.colors.textSecondary,
+                                children: description
+                            })
+                        ]
+                    }),
+                    extra && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        children: extra
+                    })
+                ]
+            }),
+            (button || buttonLink) && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                className: classes.actions,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_buttonGroup.default, {
+                    primaryButton: button,
+                    link: buttonLink
+                })
+            })
+        ]
+    }));
 };
 var useMediaCardStyles = (0, _jss).createUseStyles(function() {
     return {
@@ -131,30 +162,37 @@ var useMediaCardStyles = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var MediaCard = function MediaCard(param) {
+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 classes = useMediaCardStyles({
         media: media
     });
-    return(/*#__PURE__*/ React.createElement(_boxed.Boxed, {
-        className: classes.boxed
-    }, /*#__PURE__*/ React.createElement("section", {
-        className: classes.mediaCard,
-        "aria-label": ariaLabel
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: classes.media
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: classes.content
-    }, /*#__PURE__*/ React.createElement(CardContent, {
-        headline: headline,
-        pretitle: pretitle,
-        title: title,
-        description: description,
-        extra: extra,
-        button: button,
-        buttonLink: buttonLink
-    })))));
-};
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
+        className: classes.boxed,
+        ref: ref,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+            className: classes.mediaCard,
+            "aria-label": ariaLabel,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.media
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.content,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(CardContent, {
+                        headline: headline,
+                        pretitle: pretitle,
+                        title: title,
+                        description: description,
+                        extra: extra,
+                        button: button,
+                        buttonLink: buttonLink
+                    })
+                })
+            ]
+        })
+    }));
+});
 exports.MediaCard = MediaCard;
 var useDataCardStyles = (0, _jss).createUseStyles(function() {
     return {
@@ -169,25 +207,32 @@ var useDataCardStyles = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var DataCard = function DataCard(param) {
+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 classes = useDataCardStyles();
-    return(/*#__PURE__*/ React.createElement(_boxed.Boxed, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         className: classes.boxed,
-        dataAttributes: dataAttributes
-    }, /*#__PURE__*/ React.createElement("section", {
-        className: classes.dataCard,
-        "aria-label": ariaLabel
-    }, icon && /*#__PURE__*/ React.createElement(_box.default, {
-        paddingBottom: 16
-    }, icon), /*#__PURE__*/ React.createElement(CardContent, {
-        headline: headline,
-        title: title,
-        subtitle: subtitle,
-        description: description,
-        extra: extra,
-        button: button,
-        buttonLink: buttonLink
-    }))));
-};
+        dataAttributes: dataAttributes,
+        ref: ref,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+            className: classes.dataCard,
+            "aria-label": ariaLabel,
+            children: [
+                icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                    paddingBottom: 16,
+                    children: icon
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(CardContent, {
+                    headline: headline,
+                    title: title,
+                    subtitle: subtitle,
+                    description: description,
+                    extra: extra,
+                    button: button,
+                    buttonLink: buttonLink
+                })
+            ]
+        })
+    }));
+});
 exports.DataCard = DataCard;