@telefonica/mistica 12.1.0 → 12.2.0

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/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", {

package/dist-es/generated/mistica-icons/icon-support-agent-premium-regular.js

@@ -78,7 +78,7 @@ var IconSupportAgentPremiumRegular = function(_param) {
     }, rest, {
         children: [
             /*#__PURE__*/ _jsx("path", {
-                d: "M19.481 11.645h-1.056a4.3 4.3 0 01-.945 1.14c2.447.787 4.048 2.642 4.048 4.96v3.535c0 .396-.31.716-.683.716-.377 0-.682-.324-.682-.716v-3.498c0-2.283-2.279-3.962-5.442-3.962-.919 0-1.773.144-2.52.391-.339.108-.747-.107-.85-.463-.102-.356.103-.784.443-.892.019-.02.049-.029.084-.04a.462.462 0 00.087-.032A4.763 4.763 0 0110.3 9.142c0-2.567 1.974-4.638 4.42-4.638 2.447 0 4.422 2.067 4.422 4.638 0 .356-.069.715-.137 1.071h.476c.377 0 .682-.324.682-.715v-.216c0-3.107-2.348-5.746-5.24-5.854-1.494-.036-2.893.536-3.98 1.608C9.859 6.107 9.279 7.57 9.279 9.142c0 .396-.308.715-.682.715-.377 0-.682-.323-.682-.715 0-1.963.75-3.783 2.077-5.138 1.326-1.355 3.095-2.071 4.966-1.999 3.64.144 6.567 3.39 6.567 7.28v.217c0 1.18-.919 2.143-2.043 2.143zm-4.764-5.71c-1.7 0-3.06 1.427-3.06 3.21 0 1.788 1.36 3.215 3.056 3.22.717 0 1.395-.289 1.906-.716h-1.224c-.377 0-.682-.32-.682-.716 0-.396.309-.716.682-.716h2.21c.104-.324.172-.68.172-1.071 0-1.784-1.36-3.21-3.06-3.21z",
+                d: "M19.481 11.645h-1.056c-.236.427-.58.823-.945 1.14 2.447.787 4.048 2.642 4.048 4.96v3.535c0 .396-.31.716-.683.716-.377 0-.682-.324-.682-.716v-3.498c0-2.283-2.279-3.962-5.442-3.962-.919 0-1.773.144-2.52.391-.339.108-.747-.107-.85-.463-.102-.356.103-.784.443-.892.019-.02.049-.029.084-.04a.464.464 0 00.087-.032A4.763 4.763 0 0110.3 9.142c0-2.567 1.974-4.638 4.42-4.638 2.447 0 4.422 2.067 4.422 4.638 0 .356-.069.715-.137 1.071h.476c.377 0 .682-.324.682-.715v-.216c0-3.107-2.348-5.746-5.24-5.854-1.494-.036-2.893.536-3.98 1.608C9.859 6.107 9.279 7.57 9.279 9.142c0 .396-.308.715-.682.715-.377 0-.682-.323-.682-.715 0-1.963.75-3.783 2.077-5.138 1.326-1.355 3.095-2.071 4.966-1.999 3.64.144 6.567 3.39 6.567 7.28v.217c0 1.18-.919 2.143-2.043 2.143zm-4.764-5.71c-1.7 0-3.06 1.427-3.06 3.21 0 1.788 1.36 3.215 3.056 3.22.717 0 1.395-.289 1.906-.716h-1.224c-.377 0-.682-.32-.682-.716 0-.396.309-.716.682-.716h2.21a3.51 3.51 0 00.172-1.071c0-1.784-1.36-3.21-3.06-3.21z",
                 fill: fillColor
             }),
             /*#__PURE__*/ _jsx("path", {

package/dist-es/generated/mistica-icons/icon-support-agent-regular.js

@@ -90,7 +90,7 @@ var IconSupportAgentRegular = function(_param) {
             role: "presentation"
         }, rest, {
             children: /*#__PURE__*/ _jsx("path", {
-                d: "M17.153 11.642H16.03c-.284.428-.64.808-1.043 1.124 2.651.788 4.379 2.64 4.379 4.967v3.547c0 .396-.33.716-.738.716a.726.726 0 01-.738-.716v-3.547c0-2.288-2.478-3.951-5.893-3.951-1.719 0-3.257.424-4.337 1.188-1.019.72-1.555 1.68-1.555 2.767v3.547c0 .396-.33.716-.738.716a.726.726 0 01-.738-.716v-3.547c0-1.54.767-2.931 2.157-3.92.635-.447 1.39-.799 2.222-1.047-1.097-.852-1.802-2.163-1.802-3.627 0-2.56 2.148-4.643 4.787-4.643 2.64 0 4.788 2.083 4.788 4.643 0 .368-.046.728-.128 1.072h.499a.73.73 0 00.738-.716v-.204c0-3.123-2.544-5.755-5.674-5.863a5.955 5.955 0 00-4.309 1.6C6.75 6.12 6.11 7.579 6.11 9.142c0 .397-.33.717-.738.717a.726.726 0 01-.738-.716c0-1.956.8-3.78 2.251-5.139 1.448-1.36 3.361-2.068 5.381-2a7.32 7.32 0 015.051 2.256 7.236 7.236 0 012.046 5.035v.204c0 1.183-.994 2.143-2.21 2.143zm-5.155-5.714c-1.83 0-3.315 1.443-3.315 3.215 0 1.771 1.489 3.211 3.32 3.22.787 0 1.509-.269 2.078-.717h-1.345a.726.726 0 01-.738-.716c0-.395.33-.715.739-.715h2.387a3.09 3.09 0 00.19-1.072c0-1.776-1.485-3.215-3.316-3.215z",
+                d: "M17.153 11.642H16.03a4.82 4.82 0 01-1.043 1.124c2.651.788 4.379 2.64 4.379 4.967v3.547c0 .396-.33.716-.738.716a.726.726 0 01-.738-.716v-3.547c0-2.288-2.478-3.951-5.893-3.951-1.719 0-3.257.424-4.337 1.188-1.019.72-1.555 1.68-1.555 2.767v3.547c0 .396-.33.716-.738.716a.726.726 0 01-.738-.716v-3.547c0-1.54.767-2.931 2.157-3.92.635-.447 1.39-.799 2.222-1.047-1.097-.852-1.802-2.163-1.802-3.627 0-2.56 2.148-4.643 4.787-4.643 2.64 0 4.788 2.083 4.788 4.643 0 .368-.046.728-.128 1.072h.499a.73.73 0 00.738-.716v-.204c0-3.123-2.544-5.755-5.674-5.863a5.955 5.955 0 00-4.309 1.6C6.75 6.12 6.11 7.579 6.11 9.142c0 .397-.33.717-.738.717a.726.726 0 01-.738-.716c0-1.956.8-3.78 2.251-5.139 1.448-1.36 3.361-2.068 5.381-2a7.32 7.32 0 015.051 2.256 7.236 7.236 0 012.046 5.035v.204c0 1.183-.994 2.143-2.21 2.143zm-5.155-5.714c-1.83 0-3.315 1.443-3.315 3.215 0 1.771 1.489 3.211 3.32 3.22.787 0 1.509-.269 2.078-.717h-1.345a.726.726 0 01-.738-.716c0-.395.33-.715.739-.715h2.387a3.09 3.09 0 00.19-1.072c0-1.776-1.485-3.215-3.316-3.215z",
                 fill: fillColor
             })
         }));

package/dist-es/generated/mistica-icons/icon-tag-discount-euro-regular.js

@@ -78,7 +78,7 @@ var IconTagDiscountEuroRegular = function(_param) {
     }, rest, {
         children: [
             /*#__PURE__*/ _jsx("path", {
-                d: "M20.34 2.213a.674.674 0 01.984 0 .751.751 0 010 1.028l-1.188 1.243v8.423a.746.746 0 01-.21.521l-7.743 7.94a2.019 2.019 0 01-2.946-.01L3.09 14.93a2.254 2.254 0 010-3.085l7.503-8.167a.68.68 0 01.503-.224h8.055l1.188-1.242zm-9.136 18.116l7.539-7.725h-.005V5.94l-.899.94a.67.67 0 01-.98 0 .751.751 0 01.001-1.028l.9-.945h-6.37l-7.307 7.958a.754.754 0 00-.009 1.038l6.146 6.426a.674.674 0 00.984 0z",
+                d: "M20.34 2.213a.674.674 0 01.984 0 .751.751 0 010 1.028l-1.188 1.243v8.423a.746.746 0 01-.21.521l-7.743 7.94a2.019 2.019 0 01-2.946-.01L3.09 14.93a2.254 2.254 0 010-3.085l7.503-8.167a.68.68 0 01.503-.224h8.055l1.188-1.242zm-9.136 18.116l7.539-7.725h-.005V5.94l-.899.94a.67.67 0 01-.979 0 .751.751 0 010-1.028l.9-.945h-6.37l-7.307 7.958a.754.754 0 00-.009 1.038l6.146 6.426a.674.674 0 00.984 0z",
                 fill: fillColor
             }),
             /*#__PURE__*/ _jsx("path", {

package/dist-es/generated/mistica-icons/icon-tips-and-tricks-regular.js

@@ -78,11 +78,11 @@ var IconTipsAndTricksRegular = function(_param) {
     }, rest, {
         children: [
             /*#__PURE__*/ _jsx("path", {
-                d: "M3.163 11.635C3.163 6.327 7.29 2 12.345 2c5.063 0 9.183 4.327 9.183 9.635 0 5.309-4.124 9.64-9.183 9.604a8.754 8.754 0 01-3.707-.802l-5.303 1.527c-.03.036-.103.036-.172.036a.662.662 0 01-.485-.216.725.725 0 01-.172-.694l1.42-5.564a10.563 10.563 0 01-.763-3.89zM9.02 19.02a7.036 7.036 0 003.325.802c4.3 0 7.8-3.678 7.8-8.186 0-4.507-3.5-8.18-7.796-8.18-4.295 0-7.8 3.67-7.834 8.22 0 1.198.278 2.4.763 3.49.069.144.069.329.035.509l-1.18 4.583 4.402-1.274c.172-.036.344-.036.485.036z",
+                d: "M3.163 11.635C3.163 6.327 7.29 2 12.345 2c5.063 0 9.183 4.327 9.183 9.635 0 5.309-4.124 9.64-9.183 9.604a8.754 8.754 0 01-3.707-.802l-5.303 1.527c-.03.036-.103.036-.172.036a.662.662 0 01-.485-.216.725.725 0 01-.172-.694l1.42-5.564a10.563 10.563 0 01-.763-3.89zM9.02 19.02a7.035 7.035 0 003.325.802c4.3 0 7.8-3.678 7.8-8.186 0-4.507-3.5-8.18-7.796-8.18-4.295 0-7.8 3.67-7.834 8.22 0 1.198.278 2.4.763 3.49.069.144.069.329.035.509l-1.18 4.583 4.402-1.274c.172-.036.344-.036.485.036z",
                 fill: fillColor
             }),
             /*#__PURE__*/ _jsx("path", {
-                d: "M7.84 9.64c0-2.512 1.94-4.547 4.334-4.547 2.393 0 4.333 2.031 4.291 4.583 0 1.342-.55 2.616-1.558 3.49-.45.4-.695.801-.763 1.238.278.18.45.508.45.873 0 .293-.103.549-.275.73.172.184.275.44.275.728 0 .617-.447 1.09-1.038 1.09h-2.772c-.588 0-1.039-.469-1.039-1.09 0-.292.103-.548.275-.729a1.06 1.06 0 01-.275-.729c0-.4.176-.73.45-.91-.037-.436-.312-.837-.763-1.237-1-.838-1.592-2.144-1.592-3.49zm6.067 5.633c0-.216-.141-.365-.348-.365h-2.771c-.207 0-.348.149-.348.365s.141.365.348.365h2.771c.207 0 .348-.149.348-.365zm-.348 1.819c.21 0 .348-.148.348-.365 0-.216-.141-.364-.348-.364h-2.771c-.207 0-.348.148-.348.364 0 .217.141.365.348.365h2.771zm-.446-2.913c.103-.693.48-1.31 1.141-1.89.764-.654 1.21-1.635 1.146-2.653 0-1.89-1.49-3.453-3.291-3.453-1.803 0-3.291 1.562-3.291 3.453 0 1.018.45 2 1.214 2.652.656.581 1.038 1.198 1.141 1.891h1.94z",
+                d: "M7.84 9.64c0-2.512 1.94-4.547 4.334-4.547 2.393 0 4.333 2.031 4.29 4.583 0 1.342-.549 2.616-1.557 3.49-.45.4-.695.801-.763 1.238.278.18.45.508.45.873 0 .293-.103.549-.275.73.172.184.275.44.275.728 0 .617-.447 1.09-1.038 1.09h-2.772c-.588 0-1.039-.469-1.039-1.09 0-.292.103-.548.275-.729a1.06 1.06 0 01-.275-.729c0-.4.176-.73.45-.91-.037-.436-.312-.837-.763-1.237-1-.838-1.592-2.144-1.592-3.49zm6.067 5.633c0-.216-.141-.365-.348-.365h-2.771c-.207 0-.348.149-.348.365s.141.365.348.365h2.771c.207 0 .348-.149.348-.365zm-.348 1.819c.21 0 .348-.148.348-.365 0-.216-.141-.364-.348-.364h-2.771c-.207 0-.348.148-.348.364 0 .217.141.365.348.365h2.771zm-.446-2.913c.103-.693.48-1.31 1.141-1.89.764-.654 1.21-1.635 1.146-2.653 0-1.89-1.49-3.453-3.291-3.453-1.803 0-3.291 1.562-3.291 3.453 0 1.018.45 2 1.214 2.652.656.581 1.038 1.198 1.141 1.891h1.94z",
                 fill: fillColor
             })
         ]

package/dist-es/generated/mistica-icons/icon-world-device-filled.js

@@ -0,0 +1,85 @@
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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 _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */ import * as React from "react";
+import { useTheme } from "../../hooks";
+import { useIsInverseVariant } from "../../theme-variant-context";
+var IconWorldDeviceFilled = function(_param) {
+    var color = _param.color, _size = _param.size, size = _size === void 0 ? 24 : _size, children = _param.children, rest = _objectWithoutProperties(_param, [
+        "color",
+        "size",
+        "children"
+    ]);
+    var colors = useTheme().colors;
+    var isInverse = useIsInverseVariant();
+    var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+    return /*#__PURE__*/ _jsx("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M20.176 12.321c.036.25.036.5.036.75 0 4.929-4 8.929-8.928 8.929-4.929 0-8.929-4-8.929-8.929 0-4.928 4-8.928 8.929-8.928 1.285 0 2.464.286 3.571.75v1.571c-1.071-.571-2.286-.928-3.571-.928a7.08 7.08 0 00-1.25.107c.357.857.678 1.857.428 2.607-.25.714-1.107 2-2.821 2.107.143.036.285.107.428.143a3.064 3.064 0 011.715 1.429c.285.5.892.678 1.392.464a1.326 1.326 0 011.215.036 1.3 1.3 0 01.678 1c.107.892-.107 2.571-1.643 3.285-.535.25-.607.5-.714.965-.107.392-.25.857-.714 1.285-.25.25-.607.357-.964.357-.215 0-.429-.035-.679-.107-1.036-.321-2.357-1.5-2.75-3.285-.107-.429-.143-.858-.143-1.358 0-.321-.321-1.75-.821-2.142-.107-.072-.179-.072-.286-.036-.107.036-.143.071-.179.071a.517.517 0 01-.392.036v.571a7.5 7.5 0 007.5 7.5 7.348 7.348 0 004.892-1.857c-.5-.821-.464-1.535-.428-2.143.036-.785.107-1.392-1.107-2.178-.857-.572-1.322-1.464-1.286-2.464.071-1 .607-1.893 1.393-2.286.036 0 .036 0 .071-.036v.25c0 1.393 1.107 2.5 2.5 2.5h2.5c.143 0 .25 0 .357-.036zM15.57 8.607h6.072V5.036H15.57v3.571zM20.212 2h-3.214c-.786 0-1.429.643-1.429 1.429v.535h6.072V3.43c0-.786-.643-1.429-1.429-1.429zM15.57 9.679v.178c0 1 .786 1.786 1.786 1.786h2.857c.786 0 1.429-.643 1.429-1.429V9.68H15.57z",
+            fill: fillColor
+        })
+    }));
+};
+export default IconWorldDeviceFilled;