@telefonica/mistica 12.1.0 → 12.3.0

package/dist-es/button-layout.js

@@ -55,6 +55,21 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; 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) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -76,6 +91,7 @@ import { useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
 import { BUTTON_MIN_WIDTH, ButtonPrimary, ButtonSecondary, ButtonDanger } from "./button";
 import classNames from "classnames";
 import debounce from "lodash/debounce";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var buttonLayoutSpacing = 16;
 var useStyles = createUseStyles(function(theme) {
     var _obj;
@@ -181,7 +197,7 @@ var buttonsRange = [
     ButtonPrimary
 ];
 var ButtonLayout = function(param1) {
-    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
+    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins, dataAttributes = param1.dataAttributes;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -273,9 +289,10 @@ var ButtonLayout = function(param1) {
         return range1 - range2;
     });
     var needsLinkAlignment = !isTabletOrSmaller && align === "left";
-    var content = /*#__PURE__*/ _jsxs("div", {
+    var content = /*#__PURE__*/ _jsxs("div", _objectSpread({
         ref: wrapperElRef,
-        className: classes.container,
+        className: classes.container
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: [
             link ? /*#__PURE__*/ _jsx("div", {
                 className: classNames(classes.link, _defineProperty({}, classes.linkAlignment, needsLinkAlignment)),
@@ -283,7 +300,7 @@ var ButtonLayout = function(param1) {
             }) : null,
             sortedButtons
         ]
-    });
+    }));
     return withMargins ? /*#__PURE__*/ _jsx("div", {
         className: classes.margins,
         children: content

package/dist-es/button.js

@@ -86,14 +86,19 @@ import Box from "./box";
 import { getTextFromChildren } from "./utils/common";
 import { eventActions, eventCategories, eventNames, useTrackingConfig } from "./utils/analytics";
 import { useTheme } from "./hooks";
+import { flattenChildren } from "./skins/utils";
 export var BUTTON_MIN_WIDTH = 136;
 var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
 var BORDER_PX = 1.5;
-var SPINNER_MARGIN_PX = 8;
+var ICON_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
 var Y_PADDING_PX = 12 - BORDER_PX;
 var X_SMALL_PADDING_PX = 12 - BORDER_PX;
 var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
+var ICON_SIZE = 24;
+var SMALL_ICON_SIZE = 20;
+var SPINNER_SIZE = 20;
+var SMALL_SPINNER_SIZE = 16;
 var commonClasses = function() {
     return {
         button: {
@@ -101,7 +106,6 @@ var commonClasses = function() {
             position: "relative",
             width: "auto",
             minWidth: BUTTON_MIN_WIDTH,
-            textAlign: "center",
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
             overflow: "hidden",
@@ -136,6 +140,9 @@ var commonClasses = function() {
             }
         },
         textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             padding: "".concat(Y_PADDING_PX, "px ").concat(X_PADDING_PX, "px"),
             opacity: 1,
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
@@ -143,9 +150,7 @@ var commonClasses = function() {
                 padding: "".concat(Y_SMALL_PADDING_PX, "px ").concat(X_SMALL_PADDING_PX, "px")
             },
             "& svg": {
-                marginRight: SPINNER_MARGIN_PX,
-                verticalAlign: "bottom",
-                height: "100%"
+                display: "block"
             }
         },
         isLoading: {
@@ -266,6 +271,48 @@ var useDangerButtonStyles = createUseStyles(function(theme) {
         inverse: dangerButtonStyles(theme)
     });
 });
+var renderButtonContent = function(param) {
+    var content = param.content, defaultIconSize = param.defaultIconSize, renderText = param.renderText;
+    var childrenArr = flattenChildren(content);
+    var length = childrenArr.length;
+    var resultChildrenArr = [];
+    var accText = [];
+    var flushAccText = function() {
+        resultChildrenArr.push(/*#__PURE__*/ _jsx(React.Fragment, {
+            children: renderText(accText)
+        }, resultChildrenArr.length));
+        accText = [];
+    };
+    childrenArr.forEach(function(element, idx) {
+        var isFirstChild = idx === 0;
+        var isLastChild = idx === length - 1;
+        var isIconElement = /*#__PURE__*/ React.isValidElement(element);
+        if (isIconElement) {
+            if (accText.length) {
+                flushAccText();
+            }
+            var _size;
+            var sizeInPx = (_size = element.props.size) !== null && _size !== void 0 ? _size : defaultIconSize;
+            resultChildrenArr.push(/*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: "flex",
+                    alignItems: "center",
+                    marginLeft: isFirstChild ? 0 : ICON_MARGIN_PX,
+                    marginRight: isLastChild ? 0 : ICON_MARGIN_PX
+                },
+                children: /*#__PURE__*/ React.cloneElement(element, {
+                    size: pxToRem(sizeInPx)
+                })
+            }, resultChildrenArr.length));
+        } else {
+            accText.push(element);
+            if (isLastChild) {
+                flushAccText();
+            }
+        }
+    });
+    return resultChildrenArr;
+};
 var Button = function(props) {
     var eventFormat = useTrackingConfig().eventFormat;
     var ref = useForm(), formStatus = ref.formStatus, formId = ref.formId;
@@ -288,24 +335,6 @@ var Button = function(props) {
         shouldRenderSpinner,
         formStatus
     ]);
-    var spinnerSizeRem = pxToRem(props.small ? 16 : 24);
-    var renderText = function(text) {
-        return props.small ? /*#__PURE__*/ _jsx(Text, {
-            size: 14,
-            lineHeight: 20,
-            weight: "medium",
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        }) : /*#__PURE__*/ _jsx(Text3, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        });
-    };
     var createDefaultTrackingEvent = function() {
         if (eventFormat === "google-analytics-4") {
             return {
@@ -321,6 +350,25 @@ var Button = function(props) {
             };
         }
     };
+    var defaultIconSize = props.small ? SMALL_ICON_SIZE : ICON_SIZE;
+    var spinnerSizeRem = pxToRem(props.small ? SMALL_SPINNER_SIZE : SPINNER_SIZE);
+    var renderText = function(element) {
+        return props.small ? /*#__PURE__*/ _jsx(Text, {
+            size: 14,
+            lineHeight: 20,
+            weight: "medium",
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        }) : /*#__PURE__*/ _jsx(Text3, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
@@ -338,16 +386,24 @@ var Button = function(props) {
                 /*#__PURE__*/ _jsx("div", {
                     "aria-hidden": showSpinner ? true : undefined,
                     className: classes.textContent,
-                    children: renderText(props.children)
+                    children: renderButtonContent({
+                        content: props.children,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ _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)
+                        paddingRight: ICON_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
                     },
-                    children: renderText(loadingText)
+                    children: renderButtonContent({
+                        content: loadingText,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ _jsxs("div", {
                     "aria-hidden": showSpinner ? undefined : true,
@@ -372,7 +428,11 @@ var Button = function(props) {
                         }),
                         loadingText ? /*#__PURE__*/ _jsx(Box, {
                             paddingLeft: 8,
-                            children: renderText(loadingText)
+                            children: renderButtonContent({
+                                content: loadingText,
+                                defaultIconSize: defaultIconSize,
+                                renderText: renderText
+                            })
                         }) : null
                     ]
                 })
@@ -449,6 +509,14 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             }),
             "&[disabled]": disabledStyle
         },
+        textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "& svg": {
+                display: "block"
+            }
+        },
         inverse: {
             color: theme.colors.textLinkInverse,
             "&:enabled:active": {
@@ -485,17 +553,27 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             };
         }
     };
+    var renderText = function(element) {
+        return /*#__PURE__*/ _jsx(Text2, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
         className: classnames(classes.link, (_obj = {}, _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.aligned, props.aligned), _obj)),
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
-        children: /*#__PURE__*/ _jsx(Text2, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            children: props.children
+        children: /*#__PURE__*/ _jsx("div", {
+            className: classes.textContent,
+            children: renderButtonContent({
+                content: props.children,
+                defaultIconSize: SMALL_ICON_SIZE,
+                renderText: renderText
+            })
         }),
         disabled: props.disabled || formStatus === "sending"
     };

package/dist-es/carousel.js

@@ -101,6 +101,7 @@ import { DisableBorderRadiusProvider } from "./image";
 import { getPrefixedDataAttributes, listenResize } from "./utils/dom";
 import { isAndroid } from "./utils/platform";
 import { useDocumentVisibility } from "./utils/document-visibility";
+import { useContainerType } from "./container-type-context";
 var useShouldAutoplay = function(autoplay, ref) {
     var isDocumentVisible = useDocumentVisibility();
     var isInViewport = useIsInViewport(ref, false);
@@ -186,8 +187,19 @@ var arrowButtonStyle = function(theme) {
         display: "none"
     }));
 };
+var arrowButtonSeparation = function(containerType, isLargeDesktop, sideMargin) {
+    switch(containerType){
+        case "mobile-column":
+        case "tablet-column":
+            return -sideMargin;
+        case "desktop-wide-column":
+            return isLargeDesktop ? -(24 + arrowButtonSize) : -arrowButtonSize / 2;
+        default:
+            return -arrowButtonSize / 2;
+    }
+};
 var useStyles = createUseStyles(function(theme) {
-    var _obj, _obj1, _obj2;
+    var _obj;
     return {
         carouselContainer: {
             // This value is a workaround to solve an issue when the page is rendered in a hidden webview
@@ -199,26 +211,18 @@ var useStyles = createUseStyles(function(theme) {
             position: "absolute",
             zIndex: 1,
             top: "calc(50% - ".concat(arrowButtonSize / 2, "px)"),
-            "&.prev": (_obj = {
-                left: -arrowButtonSize / 2
-            }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+            "&.prev": {
                 left: function(param) {
-                    var sideMargin = param.sideMargin;
-                    return -sideMargin;
+                    var containerType = param.containerType, isLargeDesktop = param.isLargeDesktop, sideMargin = param.sideMargin;
+                    return arrowButtonSeparation(containerType, isLargeDesktop, sideMargin);
                 }
-            }), _defineProperty(_obj, theme.mq.largeDesktop, {
-                left: -(24 + arrowButtonSize)
-            }), _obj),
-            "&.next": (_obj1 = {
-                right: -arrowButtonSize / 2
-            }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
+            },
+            "&.next": {
                 right: function(param) {
-                    var sideMargin = param.sideMargin;
-                    return -sideMargin;
+                    var containerType = param.containerType, isLargeDesktop = param.isLargeDesktop, sideMargin = param.sideMargin;
+                    return arrowButtonSeparation(containerType, isLargeDesktop, sideMargin);
                 }
-            }), _defineProperty(_obj1, theme.mq.largeDesktop, {
-                right: -(24 + arrowButtonSize)
-            }), _obj1)
+            }
         }),
         hasScroll: {},
         centered: {},
@@ -244,7 +248,7 @@ var useStyles = createUseStyles(function(theme) {
                 width: "25%"
             }
         })),
-        item: (_obj2 = {
+        item: (_obj = {
             scrollSnapStop: isAndroid(theme.platformOverrides) ? "always" : "normal",
             scrollSnapAlign: "start",
             flexShrink: 0,
@@ -264,7 +268,7 @@ var useStyles = createUseStyles(function(theme) {
                 },
                 scrollMargin: 0
             }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             width: function(param) {
                 var itemsPerPageConfig = param.itemsPerPageConfig, gap = param.gap;
                 return "calc(".concat(100 / itemsPerPageConfig.mobile, "% + ").concat(gap / itemsPerPageConfig.mobile, "px)");
@@ -319,14 +323,14 @@ var useStyles = createUseStyles(function(theme) {
                     return 0;
                 }
             }
-        }), _defineProperty(_obj2, "&:not(:empty) ~ &:not(:empty)", {
+        }), _defineProperty(_obj, "&:not(:empty) ~ &:not(:empty)", {
             paddingLeft: function(param) {
                 var gap = param.gap;
                 return gap;
             }
-        }), _defineProperty(_obj2, "&:empty", {
+        }), _defineProperty(_obj, "&:empty", {
             display: "none"
-        }), _obj2),
+        }), _obj),
         bullets: {
             display: "flex",
             justifyContent: "center"
@@ -390,9 +394,10 @@ var DEFAULT_AUTOPLAY_TIME = 5000;
 var BaseCarousel = function(param) {
     var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, gapProp = param.gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     var texts = useTheme().texts;
+    var containerType = useContainerType();
     var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
-    var isDesktopOrBigger = useScreenSize().isDesktopOrBigger;
+    var ref4 = useScreenSize(), isDesktopOrBigger = ref4.isDesktopOrBigger, isLargeDesktop = ref4.isLargeDesktop;
     var gap = gapProp !== null && gapProp !== void 0 ? gapProp : isDesktopOrBigger ? 16 : 8;
     var sideMargin = useResonsiveLayoutMargin();
     var classes = useStyles({
@@ -400,16 +405,18 @@ var BaseCarousel = function(param) {
         mobilePageOffsetConfig: mobilePageOffsetConfig,
         free: free,
         gap: gap,
-        sideMargin: sideMargin
+        sideMargin: sideMargin,
+        containerType: containerType,
+        isLargeDesktop: isLargeDesktop
     });
     var carouselRef = React.useRef(null);
     var itemsPerPageFloor = isDesktopOrBigger ? Math.floor(itemsPerPageConfig.desktop) : Math.floor(itemsPerPageConfig.mobile);
     var pagesCount = Math.ceil(items.length / itemsPerPageFloor);
-    var ref3 = _slicedToArray(React.useState({
+    var ref1 = _slicedToArray(React.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref1 = ref3[0], scrollLeft1 = ref1.scrollLeft, scrollRight1 = ref1.scrollRight, setScroll = ref3[1];
-    var ref2 = _slicedToArray(React.useState([]), 2), itemScrollPositions = ref2[0], setItemScrollPositions = ref2[1];
+    }), 2), ref2 = ref1[0], scrollLeft1 = ref2.scrollLeft, scrollRight1 = ref2.scrollRight, setScroll = ref1[1];
+    var ref3 = _slicedToArray(React.useState([]), 2), itemScrollPositions = ref3[0], setItemScrollPositions = ref3[1];
     var pagesScrollPositions = calcPagesScrollPositions(itemScrollPositions, pagesCount);
     var scrollPositions = itemsToScroll ? calcPagesScrollPositions(itemScrollPositions, Math.ceil(items.length / itemsToScroll)) : pagesScrollPositions;
     var showNextArrow = scrollRight1 !== 0;
@@ -706,10 +713,10 @@ export var Slideshow = function(param) {
         sideMargin: sideMargin
     });
     var carouselRef = React.useRef(null);
-    var ref5 = _slicedToArray(React.useState({
+    var ref6 = _slicedToArray(React.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref4 = ref5[0], scrollLeft2 = ref4.scrollLeft, scrollRight2 = ref4.scrollRight, setScroll = ref5[1];
+    }), 2), ref5 = ref6[0], scrollLeft2 = ref5.scrollLeft, scrollRight2 = ref5.scrollRight, setScroll = ref6[1];
     var goPrev = React.useCallback(function() {
         var carouselEl = carouselRef.current;
         if (carouselEl) {

package/dist-es/container-type-context.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { useScreenSize } from "./hooks";
+var ContainerTypeContext = /*#__PURE__*/ React.createContext(null);
+export var useContainerType = function() {
+    var containerType = React.useContext(ContainerTypeContext);
+    var ref = useScreenSize(), isTablet = ref.isTablet, isDesktopOrBigger = ref.isDesktopOrBigger, isLargeDesktop = ref.isLargeDesktop;
+    if (containerType) {
+        return containerType;
+    }
+    if (isLargeDesktop) {
+        return "desktop-wide-column";
+    }
+    if (isDesktopOrBigger) {
+        return "desktop-medium-column";
+    }
+    if (isTablet) {
+        return "tablet-column";
+    }
+    return "mobile-column";
+};
+export default ContainerTypeContext;

package/dist-es/dialog.js

@@ -142,6 +142,7 @@ import { ESC } from "./utils/key-codes";
 import Box from "./box";
 import { isOldChrome, isRunningAcceptanceTest } from "./utils/platform";
 import { useSetModalState } from "./modal-context-provider";
+import Stack from "./stack";
 var animationsSupported = function(platformOverrides) {
     return !isOldChrome(platformOverrides) && process.env.NODE_ENV !== "test" && !isRunningAcceptanceTest(platformOverrides);
 };
@@ -238,7 +239,7 @@ var useDialogStyles = createUseStyles(function(theme) {
 });
 var Dialog = function(props) {
     var ref = useTheme(), texts = ref.texts, colors = ref.colors;
-    var className = props.className, title = props.title, message = props.message, icon = props.icon, _cancelText = props.cancelText, cancelText = _cancelText === void 0 ? texts.dialogCancelButton : _cancelText, _acceptText = props.acceptText, acceptText = _acceptText === void 0 ? texts.dialogAcceptButton : _acceptText, handleCancel = props.onCancel, handleAccept = props.onAccept, _showCancel = props.showCancel, showCancel = _showCancel === void 0 ? false : _showCancel, _destructive = props.destructive, destructive = _destructive === void 0 ? false : _destructive;
+    var className = props.className, title = props.title, message = props.message, icon = props.icon, extra = props.extra, _cancelText = props.cancelText, cancelText = _cancelText === void 0 ? texts.dialogCancelButton : _cancelText, _acceptText = props.acceptText, acceptText = _acceptText === void 0 ? texts.dialogAcceptButton : _acceptText, handleCancel = props.onCancel, handleAccept = props.onAccept, _showCancel = props.showCancel, showCancel = _showCancel === void 0 ? false : _showCancel, _destructive = props.destructive, destructive = _destructive === void 0 ? false : _destructive;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var withSecondaryButton = showCancel && !!handleCancel;
     var classes = useDialogStyles({
@@ -267,10 +268,16 @@ var Dialog = function(props) {
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: classes.dialogContent,
-                children: /*#__PURE__*/ _jsx(Text3, {
-                    color: colors.textSecondary,
-                    light: true,
-                    children: message
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    space: 16,
+                    children: [
+                        /*#__PURE__*/ _jsx(Text3, {
+                            color: colors.textSecondary,
+                            light: true,
+                            children: message
+                        }),
+                        extra
+                    ]
                 })
             }),
             /*#__PURE__*/ _jsx(Box, {
@@ -340,6 +347,19 @@ var useNativeDialog = function(param) {
         renderNative
     ]);
 };
+var NativeModalDialog = function(props) {
+    useNativeDialog({
+        renderNative: true,
+        acceptText: props.acceptText || props.dialogAcceptButton,
+        cancelText: props.cancelText || props.dialogCancelButton,
+        showCancel: props.showCancel,
+        message: props.message,
+        title: props.title,
+        onAccept: props.onAccept,
+        onCancel: props.onCancel
+    });
+    return null;
+};
 var ModalDialog = function(props) {
     var platformOverrides = useTheme().platformOverrides;
     var context = React.useContext(ThemeContext);
@@ -351,7 +371,7 @@ var ModalDialog = function(props) {
     if (!context) {
         throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     }
-    var renderNative = isWebViewBridgeAvailable();
+    var renderNative = !props.forceWeb && isWebViewBridgeAvailable();
     var onAccept = props.onAccept, isClosing = props.isClosing, onCancel = props.onCancel, onCloseTransitionEnd = props.onCloseTransitionEnd, dialogProps = _objectWithoutProperties(props, [
         "onAccept",
         "isClosing",
@@ -395,16 +415,6 @@ var ModalDialog = function(props) {
     }, [
         handleKeyDown
     ]);
-    useNativeDialog({
-        renderNative: renderNative,
-        acceptText: props.acceptText || context.texts.dialogAcceptButton,
-        cancelText: props.cancelText || context.texts.dialogCancelButton,
-        showCancel: props.showCancel,
-        message: props.message,
-        title: props.title,
-        onAccept: props.onAccept,
-        onCancel: props.onCancel
-    });
     React.useEffect(function() {
         if (!animationsSupported(platformOverrides)) {
             addKeyDownListener();
@@ -436,7 +446,10 @@ var ModalDialog = function(props) {
         setModalState
     ]);
     var _modalClose;
-    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions */ return renderNative ? null : /*#__PURE__*/ _jsx(Portal, {
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-static-element-interactions */ return renderNative ? /*#__PURE__*/ _jsx(NativeModalDialog, _objectSpread({}, props, {
+        dialogAcceptButton: context.texts.dialogAcceptButton,
+        dialogCancelButton: context.texts.dialogCancelButton
+    })) : /*#__PURE__*/ _jsx(Portal, {
         children: /*#__PURE__*/ _jsx("div", {
             className: classes.wrapper,
             children: /*#__PURE__*/ _jsx(FocusTrap, {
@@ -574,13 +587,13 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
     };
     _proto.render = function render() {
         var _state = this.state, isClosing = _state.isClosing, dialogProps = _state.dialogProps;
-        var dialog = null;
+        var dialog1 = null;
         if (dialogProps && this.state.instanceNumber === 1) {
             var onCancel = dialogProps.onCancel, onAccept = dialogProps.onAccept, rest = _objectWithoutProperties(dialogProps, [
                 "onCancel",
                 "onAccept"
             ]);
-            dialog = /*#__PURE__*/ _jsx(ModalDialog, _objectSpread({
+            dialog1 = /*#__PURE__*/ _jsx(ModalDialog, _objectSpread({
                 onCancel: this.createCancelHandler(onCancel),
                 onAccept: this.createAcceptHandler(onAccept),
                 isClosing: isClosing,
@@ -590,27 +603,40 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
         return /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 this.props.children,
-                dialog
+                dialog1
             ]
         });
     };
     return DialogRoot;
 }(React.Component);
 export { DialogRoot as default };
-var showDialog = function() {
-    var showCancel = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+var showDialog = function(param) {
+    var showCancel = param.showCancel, forceWeb = param.forceWeb;
     return function(props) {
         if (!dialogInstance) {
             throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
         }
         dialogInstance.show(_objectSpread({
-            showCancel: showCancel
+            showCancel: showCancel,
+            forceWeb: forceWeb
         }, props));
     };
 };
 /**
  * Shows alert dialog with supplied props
- */ export var alert = showDialog(false);
+ */ export var alert = showDialog({
+    showCancel: false,
+    forceWeb: false
+});
 /**
  * Shows confirm dialog with supplied props
- */ export var confirm = showDialog(true);
+ */ export var confirm = showDialog({
+    showCancel: true,
+    forceWeb: false
+});
+/**
+ * Shows dialog with supplied props
+ */ export var dialog = showDialog({
+    showCancel: false,
+    forceWeb: true
+});

package/dist-es/generated/mistica-icons/icon-gift-light.js

@@ -78,7 +78,7 @@ var IconGiftLight = function(_param) {
             role: "presentation"
         }, rest, {
             children: /*#__PURE__*/ _jsx("path", {
-                d: "M19.675 21.242H12.19v-8.677h7.107v4.53c0 .207.167.376.373.376a.376.376 0 00.374-.377V10.3a1.883 1.883 0 00-1.872-1.888h-1.006a3.589 3.589 0 001.379-2.83C18.545 3.609 16.95 2 14.992 2c-1.686 0-3.099 1.193-3.463 2.786a2.599 2.599 0 00-1.963-.898 2.632 2.632 0 00-2.62 2.641c0 .739.302 1.405.79 1.888H5.453c-1.03 0-1.872.845-1.872 1.888v11.318c0 .208.168.377.374.377h15.712a.376.376 0 00.373-.377.372.372 0 00-.364-.381zM12.19 5.588c0-1.56 1.26-2.83 2.806-2.83 1.547 0 2.807 1.27 2.807 2.83s-1.26 2.83-2.807 2.83H12.19v-2.83zm5.986 3.582c.618 0 1.12.507 1.12 1.13v1.507H12.19V9.17h5.986zm-6.733 12.072H4.337v-8.677h7.106v8.677zm-7.106-9.43v-1.507c0-.623.503-1.13 1.12-1.13h5.986v2.637H4.337zm7.106-3.395H9.571A1.883 1.883 0 017.698 6.53a1.88 1.88 0 011.873-1.888 1.88 1.88 0 011.872 1.888v1.888zm8.232 11.69a.751.751 0 00.747-.753.751.751 0 00-.747-.753.751.751 0 00-.747.753.75.75 0 00.747.753z",
+                d: "M19.675 21.242H12.19v-8.677h7.107v4.53c0 .207.167.376.373.376a.376.376 0 00.374-.377V10.3a1.883 1.883 0 00-1.873-1.888h-1.005a3.589 3.589 0 001.379-2.83C18.545 3.609 16.95 2 14.992 2c-1.686 0-3.099 1.193-3.463 2.786a2.599 2.599 0 00-1.963-.898 2.632 2.632 0 00-2.62 2.641c0 .739.302 1.405.79 1.888H5.453c-1.03 0-1.872.845-1.872 1.888v11.318c0 .208.168.377.374.377h15.712a.376.376 0 00.373-.377.372.372 0 00-.364-.381zM12.19 5.588c0-1.56 1.26-2.83 2.806-2.83 1.547 0 2.807 1.27 2.807 2.83s-1.26 2.83-2.807 2.83H12.19v-2.83zm5.986 3.582c.618 0 1.12.507 1.12 1.13v1.507H12.19V9.17h5.986zm-6.733 12.072H4.337v-8.677h7.106v8.677zm-7.106-9.43v-1.507c0-.623.502-1.13 1.12-1.13h5.986v2.637H4.337zm7.106-3.395H9.571A1.883 1.883 0 017.698 6.53a1.88 1.88 0 011.873-1.888 1.88 1.88 0 011.872 1.888v1.888zm8.232 11.69a.751.751 0 00.747-.753.751.751 0 00-.747-.753.751.751 0 00-.747.753.75.75 0 00.747.753z",
                 fill: fillColor
             })
         }));

package/dist-es/generated/mistica-icons/icon-hand-snap-filled.js

@@ -77,7 +77,7 @@ var IconHandSnapFilled = function(_param) {
         role: "presentation"
     }, rest, {
         children: /*#__PURE__*/ _jsx("path", {
-            d: "M9.222 2.716v3.587a.707.707 0 01-.695.717.707.707 0 01-.694-.717V2.716c0-.395.312-.716.694-.716.383 0 .695.321.695.716zm10.972 14.751c.325-.34.507-.79.507-1.267 0-.482-.182-.933-.516-1.277-.28-.29-.641-.46-1.029-.505a1.833 1.833 0 00-.2-2.283 1.698 1.698 0 00-1.029-.505 1.834 1.834 0 00-.2-2.282 1.703 1.703 0 00-.989-.5l2.467-2.545a1.836 1.836 0 000-2.535 1.704 1.704 0 00-2.458 0L9.13 11.63 6.403 8.82a1.672 1.672 0 00-2.422 0 1.77 1.77 0 00-.503 1.249c0 .473.178.914.503 1.249l1.79 1.846a5.5 5.5 0 011.434 2.723l.254 1.236a6.21 6.21 0 001.62 3.081 5.882 5.882 0 003.901 1.791h.008l.02.001c.039.001.111.004.213.004.69 0 2.694-.12 3.922-1.428a3.225 3.225 0 01.235-.217c.055-.049.111-.098.162-.15l2.654-2.738zM6.929 6.157a.734.734 0 010 1.014.685.685 0 01-.49.211.667.667 0 01-.49-.21L3.514 4.658a.734.734 0 010-1.015.681.681 0 01.984 0l2.43 2.512zm4.177 1.014L13.54 4.66a.734.734 0 000-1.015.681.681 0 00-.984 0L10.12 6.157a.734.734 0 000 1.015.667.667 0 00.49.211.703.703 0 00.495-.21z",
+            d: "M9.222 2.716v3.587a.707.707 0 01-.695.717.707.707 0 01-.694-.717V2.716c0-.395.311-.716.694-.716.383 0 .695.321.695.716zm10.972 14.751c.325-.34.507-.79.507-1.267 0-.482-.182-.933-.516-1.277a1.69 1.69 0 00-1.029-.505 1.834 1.834 0 00-.2-2.283 1.7 1.7 0 00-1.029-.505 1.834 1.834 0 00-.2-2.282 1.703 1.703 0 00-.989-.5l2.467-2.545a1.836 1.836 0 000-2.535 1.704 1.704 0 00-2.458 0L9.128 11.63 6.403 8.82a1.672 1.672 0 00-2.422 0 1.77 1.77 0 00-.503 1.249c0 .473.178.914.503 1.249l1.79 1.846a5.5 5.5 0 011.434 2.723l.254 1.236a6.21 6.21 0 001.62 3.081 5.882 5.882 0 003.901 1.791h.008l.02.001c.038.001.111.004.213.004.69 0 2.693-.12 3.922-1.428a8.106 8.106 0 01.235-.216c.055-.05.11-.1.162-.152l2.654-2.737zM6.928 6.157a.734.734 0 010 1.014.685.685 0 01-.49.211.667.667 0 01-.49-.21L3.514 4.658a.734.734 0 010-1.015.681.681 0 01.984 0l2.43 2.512zm4.176 1.014l2.436-2.512a.734.734 0 000-1.015.681.681 0 00-.984 0L10.12 6.156a.734.734 0 000 1.015.667.667 0 00.49.211.703.703 0 00.494-.21z",
             fill: fillColor
         })
     }));

package/dist-es/generated/mistica-icons/icon-intranet-light.js

@@ -79,7 +79,7 @@ var IconIntranetLight = function(_param) {
         }, rest, {
             children: [
                 /*#__PURE__*/ _jsx("path", {
-                    d: "M2 12C2 6.5 6.5 2 12 2s10 4.5 10 10a9.871 9.871 0 01-1.572 5.356c-.104.18-.32.216-.5.108-.18-.104-.216-.32-.108-.5a9.588 9.588 0 001.428-4.608H17.32c-.036 3.824-1.216 7.036-2.928 8.608.892-.252 1.752-.608 2.536-1.108.176-.108.392-.072.5.108.108.176.072.392-.108.5A9.925 9.925 0 0112 22C6.5 22 2 17.5 2 12zm5.464-5.356c.5-1.536 1.248-2.784 2.144-3.608C5.752 4.072 2.856 7.5 2.716 11.644h3.928c0-.536.036-1.036.108-1.536a1.823 1.823 0 01-1.18-1.68c0-1 .784-1.784 1.784-1.784h.108zm.964 1.784c0 .608-.464 1.072-1.072 1.072a1.055 1.055 0 01-1.072-1.072c0-.608.464-1.072 1.072-1.072a1.057 1.057 0 011.072 1.072zM6.64 12.356H2.716c.14 4.144 3.036 7.572 6.888 8.608-1.712-1.572-2.892-4.788-2.964-8.608zm5.004 8.928v-8.928H7.36c.104 4.716 1.96 8.572 4.284 8.928zm-4.284-9.64h4.284l.004-8.924c-1.428.212-2.712 1.856-3.464 4.14.568.288.964.892.964 1.572 0 .96-.752 1.748-1.68 1.784a9.186 9.186 0 00-.108 1.428zm4.996 9.64c2.32-.356 4.18-4.216 4.284-8.928h-4.284v8.928zm0-18.568v8.928h4.284c-.104-4.716-1.96-8.572-4.284-8.928zm5 8.928h3.928c-.144-4.144-3.036-7.572-6.892-8.608 1.712 1.572 2.892 4.788 2.964 8.608z",
+                    d: "M2 12C2 6.5 6.5 2 12 2s10 4.5 10 10a9.871 9.871 0 01-1.572 5.356c-.104.18-.32.216-.5.108-.18-.104-.216-.32-.108-.5a9.588 9.588 0 001.428-4.608H17.32c-.036 3.824-1.216 7.036-2.928 8.608.892-.252 1.752-.608 2.536-1.108.176-.108.392-.072.5.108.108.176.072.392-.108.5A9.925 9.925 0 0112 22C6.5 22 2 17.5 2 12zm5.464-5.356c.5-1.536 1.248-2.784 2.144-3.608C5.752 4.072 2.856 7.5 2.716 11.644h3.928c0-.536.036-1.036.108-1.536a1.823 1.823 0 01-1.18-1.68c0-1 .784-1.784 1.784-1.784h.108zm.964 1.784c0-.608-.468-1.068-1.072-1.072-.608 0-1.072.464-1.072 1.072 0 .608.468 1.072 1.072 1.072.608 0 1.072-.464 1.072-1.072zM6.64 12.356H2.716c.14 4.144 3.036 7.572 6.888 8.608-1.712-1.572-2.892-4.788-2.964-8.608zm5.004 8.928v-8.928H7.36c.104 4.716 1.96 8.572 4.284 8.928zm-4.284-9.64h4.284l.004-8.924c-1.428.212-2.712 1.856-3.464 4.14.568.288.964.892.964 1.572 0 .96-.752 1.748-1.68 1.784a9.186 9.186 0 00-.108 1.428zm4.996 9.64c2.32-.356 4.18-4.216 4.284-8.928h-4.284v8.928zm0-18.568v8.928h4.284c-.104-4.716-1.96-8.572-4.284-8.928zm5 8.928h3.928c-.144-4.144-3.036-7.572-6.892-8.608 1.712 1.572 2.892 4.788 2.964 8.608z",
                     fill: fillColor
                 }),
                 /*#__PURE__*/ _jsx("path", {