@telefonica/mistica 10.23.0 → 10.24.0

package/dist/generated/mistica-icons/icon-winner-regular.js

@@ -4,8 +4,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _themeVariantContext = require("../../theme-variant-context");
+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, {
@@ -21,8 +43,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {
-        };
+        var source = _arguments[i] != null ? _arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -37,8 +58,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -53,10 +73,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){

package/dist/generated/mistica-icons/icon-woman-filled.js

@@ -4,8 +4,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _themeVariantContext = require("../../theme-variant-context");
+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, {
@@ -21,8 +43,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {
-        };
+        var source = _arguments[i] != null ? _arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -37,8 +58,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -53,10 +73,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){

package/dist/generated/mistica-icons/icon-woman-light.js

@@ -4,8 +4,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _themeVariantContext = require("../../theme-variant-context");
+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, {
@@ -21,8 +43,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {
-        };
+        var source = _arguments[i] != null ? _arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -37,8 +58,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -53,10 +73,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){

package/dist/generated/mistica-icons/icon-woman-regular.js

@@ -4,8 +4,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _themeVariantContext = require("../../theme-variant-context");
+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, {
@@ -21,8 +43,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {
-        };
+        var source = _arguments[i] != null ? _arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -37,8 +58,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -53,10 +73,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){

package/dist/grid-layout.js

@@ -4,7 +4,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
+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, {
@@ -18,8 +40,8 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-var _obj, _obj1, _obj2, _obj3, _obj4, _obj5;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
+    var _obj, _obj1, _obj2, _obj3, _obj4, _obj5;
     return {
         grid: (_obj = {
             display: 'grid'
@@ -39,32 +61,27 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         span1: {
             gridColumn: 'span 1'
         },
-        span4: (_obj1 = {
-        }, _defineProperty(_obj1, theme.mq.desktopOrBigger, {
+        span4: (_obj1 = {}, _defineProperty(_obj1, theme.mq.desktopOrBigger, {
             gridColumn: 'span 4'
         }), _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
             gridColumn: 'span 1'
         }), _obj1),
-        span5: (_obj2 = {
-        }, _defineProperty(_obj2, theme.mq.desktopOrBigger, {
+        span5: (_obj2 = {}, _defineProperty(_obj2, theme.mq.desktopOrBigger, {
             gridColumn: 'span 5'
         }), _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
             gridColumn: 'span 1'
         }), _obj2),
-        span6: (_obj3 = {
-        }, _defineProperty(_obj3, theme.mq.desktopOrBigger, {
+        span6: (_obj3 = {}, _defineProperty(_obj3, theme.mq.desktopOrBigger, {
             gridColumn: 'span 6'
         }), _defineProperty(_obj3, theme.mq.tabletOrSmaller, {
             gridColumn: 'span 1'
         }), _obj3),
-        span8: (_obj4 = {
-        }, _defineProperty(_obj4, theme.mq.desktopOrBigger, {
+        span8: (_obj4 = {}, _defineProperty(_obj4, theme.mq.desktopOrBigger, {
             gridColumn: 'span 8'
         }), _defineProperty(_obj4, theme.mq.tabletOrSmaller, {
             gridColumn: 'span 1'
         }), _obj4),
-        span10: (_obj5 = {
-        }, _defineProperty(_obj5, theme.mq.desktopOrBigger, {
+        span10: (_obj5 = {}, _defineProperty(_obj5, theme.mq.desktopOrBigger, {
             gridColumn: 'span 10'
         }), _defineProperty(_obj5, theme.mq.tabletOrSmaller, {
             gridColumn: 'span 1'

package/dist/header.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import NavigationBreadcrumbs from './navigation-breadcrumbs';
 import { ButtonPrimary, ButtonSecondary } from './button';
-import type { ButtonProps } from './button';
+import type { RendersElement, RendersNullableElement } from './utils/types';
 import type { TextPresetProps } from './text';
-import type { NavigationBreadcrumbsProps } from './navigation-breadcrumbs';
 declare type OverridableTextProps = {
     color?: TextPresetProps['color'];
     /** @deprecated use decoration prop */
@@ -19,8 +18,8 @@ declare type HeaderProps = {
     title?: string;
     preamount?: RichText;
     amount?: string;
-    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
-    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    button?: RendersNullableElement<typeof ButtonPrimary>;
+    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     subtitle?: RichText;
     isErrorAmount?: boolean;
 };
@@ -28,12 +27,12 @@ export declare const Header: React.FC<HeaderProps>;
 declare type MainSectionHeaderProps = {
     title: string;
     description?: string;
-    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
 };
 export declare const MainSectionHeader: React.FC<MainSectionHeaderProps>;
 declare type HeaderLayoutProps = {
     isInverse?: boolean;
-    breadcrumbs?: React.ReactElement<NavigationBreadcrumbsProps, typeof NavigationBreadcrumbs>;
+    breadcrumbs?: RendersNullableElement<typeof NavigationBreadcrumbs>;
     header: React.ReactNode;
     extra?: React.ReactNode;
     sideBySideExtraOnDesktop?: boolean;
@@ -42,7 +41,7 @@ declare type HeaderLayoutProps = {
 export declare const HeaderLayout: React.FC<HeaderLayoutProps>;
 declare type MainSectionHeaderLayoutProps = {
     isInverse?: boolean;
-    children: React.ReactElement<MainSectionHeaderProps, typeof MainSectionHeader>;
+    children: RendersElement<typeof MainSectionHeader>;
 };
 export declare const MainSectionHeaderLayout: React.FC<MainSectionHeaderLayoutProps>;
 export {};

package/dist/header.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.HeaderLayout = exports.MainSectionHeader = exports.MainSectionHeaderLayout = exports.Header = void 0;
+exports.MainSectionHeaderLayout = exports.HeaderLayout = exports.MainSectionHeader = exports.Header = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _box = _interopRequireDefault(require("./box"));
 var _stack = _interopRequireDefault(require("./stack"));
 var _jss = require("./jss");
@@ -19,6 +20,27 @@ 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, {
@@ -34,8 +56,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {
-        };
+        var source = _arguments[i] != null ? _arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -50,8 +71,7 @@ function _objectSpread(target) {
     return target;
 }
 function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {
-    };
+    if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
@@ -66,10 +86,8 @@ function _objectWithoutProperties(source, excluded) {
     return target;
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {
-    };
-    var target = {
-    };
+    if (source == null) return {};
+    var target = {};
     var sourceKeys = Object.keys(source);
     var key, i;
     for(i = 0; i < sourceKeys.length; i++){
@@ -81,7 +99,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 var Header = function Header(param) {
     var pretitle = param.pretitle, title = param.title, preamount = param.preamount, amount = param.amount, button = param.button, subtitle = param.subtitle, isErrorAmount = param.isErrorAmount, secondaryButton = param.secondaryButton;
-    var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var theme = (0, _hooks).useTheme();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var renderRichText = function renderRichText(richText, baseProps) {
@@ -139,8 +157,7 @@ var Header = function Header(param) {
                         primaryButton: button,
                         secondaryButton: secondaryButton
                     }),
-                    subtitle && renderRichText(subtitle, {
-                    })
+                    subtitle && renderRichText(subtitle, {})
                 ]
             })
         ]
@@ -149,7 +166,7 @@ var Header = function Header(param) {
 exports.Header = Header;
 var MainSectionHeader = function MainSectionHeader(param) {
     var title = param.title, description = param.description, button = param.button;
-    var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
         space: 32,
         children: [
@@ -189,14 +206,13 @@ var HeaderLayout = function HeaderLayout(param) {
     var classes = useHeaderLayoutStyles({
         isInverse: isInverse
     });
-    var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_responsiveLayout.default, {
         className: classes.background,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_themeVariantContext.ThemeVariant, {
             isInverse: isInverse,
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx(_overscrollColorContext.default, {
-                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_overscrollColorContext.default, {}),
                 isTabletOrSmaller ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                     paddingTop: 32,
                     paddingBottom: 24,
@@ -260,14 +276,13 @@ var MainSectionHeaderLayout = function MainSectionHeaderLayout(param) {
     var classes = useHeaderLayoutStyles({
         isInverse: isInverse
     });
-    var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+    var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_responsiveLayout.default, {
         className: classes.background,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_themeVariantContext.ThemeVariant, {
             isInverse: isInverse,
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx(_overscrollColorContext.default, {
-                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_overscrollColorContext.default, {}),
                 isTabletOrSmaller ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                     paddingTop: 12,
                     paddingBottom: 24,

package/dist/header.js.flow

@@ -3,6 +3,7 @@
 import * as React from "react";
 import NavigationBreadcrumbs from "./navigation-breadcrumbs";
 import { ButtonPrimary, ButtonSecondary } from "./button";
+import type { RendersElement, RendersNullableElement } from "./utils/types";
 import type { TextPresetProps } from "./text";
 declare type OverridableTextProps = {
   color?: $PropertyType<TextPresetProps, "color">,
@@ -27,8 +28,8 @@ declare type HeaderProps = {
   title?: string,
   preamount?: RichText,
   amount?: string,
-  button?: React.Element<typeof ButtonPrimary>,
-  secondaryButton?: React.Element<typeof ButtonSecondary>,
+  button?: RendersNullableElement<typeof ButtonPrimary>,
+  secondaryButton?: RendersNullableElement<typeof ButtonSecondary>,
   subtitle?: RichText,
   isErrorAmount?: boolean,
 };
@@ -37,13 +38,13 @@ declare type MainSectionHeaderProps = {
   title: string,
   description?: string,
   button?:
-    | React.Element<typeof ButtonPrimary>
-    | React.Element<typeof ButtonSecondary>,
+    | RendersNullableElement<typeof ButtonPrimary>
+    | RendersNullableElement<typeof ButtonSecondary>,
 };
 declare export var MainSectionHeader: React.ComponentType<MainSectionHeaderProps>;
 declare type HeaderLayoutProps = {
   isInverse?: boolean,
-  breadcrumbs?: React.Element<typeof NavigationBreadcrumbs>,
+  breadcrumbs?: RendersNullableElement<typeof NavigationBreadcrumbs>,
   header: React.Node,
   extra?: React.Node,
   sideBySideExtraOnDesktop?: boolean,
@@ -51,7 +52,7 @@ declare type HeaderLayoutProps = {
 declare export var HeaderLayout: React.ComponentType<HeaderLayoutProps>;
 declare type MainSectionHeaderLayoutProps = {
   isInverse?: boolean,
-  children: React.Element<typeof MainSectionHeader>,
+  children: RendersElement<typeof MainSectionHeader>,
 };
 declare export var MainSectionHeaderLayout: React.ComponentType<MainSectionHeaderLayoutProps>;
 declare export {};

package/dist/highlighted-card.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { TrackingEvent } from './utils/types';
-import type { ButtonElement, ButtonLinkProps } from './button';
+import type { RendersNullableElement, TrackingEvent } from './utils/types';
+import type { NullableButtonElement } from './button';
 interface CommonProps {
     title: string;
     description: string;
@@ -22,7 +22,7 @@ interface BasicProps extends CommonProps {
     href?: undefined;
 }
 interface ButtonProps extends CommonProps {
-    button?: ButtonElement | React.ReactElement<ButtonLinkProps, typeof ButtonLink> | null;
+    button?: NullableButtonElement | RendersNullableElement<typeof ButtonLink>;
     onPress?: undefined;
     to?: undefined;
     href?: undefined;