@telefonica/mistica 12.0.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
                     ]
                 })
@@ -427,12 +487,13 @@ var Button = function(props) {
     return null;
 };
 var useButtonLinkStyles = createUseStyles(function(theme) {
-    var padding = 6;
+    var paddingY = 6;
+    var paddingX = 12;
     return {
         link: {
             display: "inline-block",
             width: "auto",
-            padding: padding,
+            padding: "".concat(paddingY, "px ").concat(paddingX, "px"),
             fontWeight: 500,
             borderRadius: 4,
             overflow: "hidden",
@@ -448,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": {
@@ -460,7 +529,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             })
         },
         aligned: {
-            marginLeft: -padding
+            marginLeft: -paddingX
         }
     };
 });
@@ -484,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/card.js

@@ -196,7 +196,7 @@ var useMediaCardStyles = createUseStyles(function(param) {
     };
 });
 export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
+    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useMediaCardStyles({
         media: media
     });
@@ -222,6 +222,8 @@ export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                             pretitleLinesMax: pretitleLinesMax,
                             title: title,
                             titleLinesMax: titleLinesMax,
+                            subtitle: subtitle,
+                            subtitleLinesMax: subtitleLinesMax,
                             description: description,
                             descriptionLinesMax: descriptionLinesMax,
                             extra: extra,
@@ -252,7 +254,7 @@ var useDataCardStyles = createUseStyles(function(param) {
     };
 });
 export var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var icon = param.icon, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
+    var icon = param.icon, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useDataCardStyles();
     return /*#__PURE__*/ _jsx(MaybeDismissable, {
         "aria-label": ariaLabel,
@@ -271,6 +273,8 @@ export var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                     }),
                     /*#__PURE__*/ _jsx(CardContent, {
                         headline: headline,
+                        pretitle: pretitle,
+                        pretitleLinesMax: pretitleLinesMax,
                         title: title,
                         titleLinesMax: titleLinesMax,
                         subtitle: subtitle,
@@ -310,6 +314,7 @@ var useSnapCardStyles = createUseStyles(function(theme) {
             justifyContent: "space-between",
             padding: 16,
             minHeight: 80,
+            flex: 1,
             minWidth: 104
         }, theme.mq.desktopOrBigger, {
             padding: 24

package/dist-es/carousel.js

@@ -388,7 +388,7 @@ var calcCurrentPageIndex = function(scrollPosition, pagesScrollPositions) {
 };
 var DEFAULT_AUTOPLAY_TIME = 5000;
 var BaseCarousel = function(param) {
-    var items = param.items, 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 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 itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
@@ -602,7 +602,8 @@ var BaseCarousel = function(param) {
                         ref: carouselRef,
                         children: items.map(function(item, index) {
                             return /*#__PURE__*/ _jsx("div", {
-                                className: classes.item,
+                                className: classNames(classes.item, itemClassName),
+                                style: itemStyle,
                                 "data-item": true,
                                 children: item
                             }, index);
@@ -631,9 +632,11 @@ export var Carousel = function(props) {
     return /*#__PURE__*/ _jsx(BaseCarousel, _objectSpread({}, props));
 };
 export var CenteredCarousel = function(param) {
-    var items = param.items, withBullets = param.withBullets, renderBullets = param.renderBullets, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     return /*#__PURE__*/ _jsx(BaseCarousel, {
         items: items,
+        itemStyle: itemStyle,
+        itemClassName: itemClassName,
         itemsPerPage: {
             mobile: 1,
             desktop: 3

package/dist-es/checkbox.js

@@ -93,6 +93,7 @@ var useIconCheckboxStyles = createUseStyles(function(param) {
             justifyContent: "center",
             alignItems: "center",
             userSelect: "none",
+            outline: "1px solid transparent",
             borderRadius: 2,
             verticalAlign: "middle",
             background: colors.background,
@@ -100,7 +101,7 @@ var useIconCheckboxStyles = createUseStyles(function(param) {
             transition: "box-shadow 0.3s"
         },
         boxChecked: {
-            boxShadow: "inset 0 0 0 9px ".concat(colors.controlActivated)
+            boxShadow: "inset 0 0 0 12px ".concat(colors.controlActivated)
         },
         check: {
             display: "block",

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-photo-camera-filled.js

@@ -67,25 +67,45 @@ var IconPhotoCameraFilled = function(_param) {
         "size",
         "children"
     ]);
-    var colors = useTheme().colors;
+    var ref = useTheme(), skinName = ref.skinName, colors = ref.colors;
     var isInverse = useIsInverseVariant();
     var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
-    return /*#__PURE__*/ _jsxs("svg", _objectSpread({
-        width: size,
-        height: size,
-        viewBox: "0 0 24 24",
-        role: "presentation"
-    }, rest, {
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                d: "M8.248 12.712a3.753 3.753 0 013.748-3.748 3.753 3.753 0 013.748 3.748 3.75 3.75 0 01-3.748 3.748 3.75 3.75 0 01-3.748-3.748z",
-                fill: fillColor
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M17.648 6.288h2.204c1.18 0 2.144.96 2.144 2.144v10c0 1.184-.96 2.144-2.144 2.144H4.14a2.144 2.144 0 01-2.144-2.144v-10c0-1.184.96-2.144 2.144-2.144h2.2L8.992 3.64a.69.69 0 01.504-.212h5c.188 0 .372.076.508.212l2.644 2.648zM7.176 12.716c0 2.66 2.164 4.82 4.82 4.82s4.82-2.16 4.82-4.82-2.164-4.82-4.82-4.82a4.825 4.825 0 00-4.82 4.82z",
-                fill: fillColor
-            })
-        ]
-    }));
+    if (skinName.match(/^o2/i)) {
+        return /*#__PURE__*/ _jsxs("svg", _objectSpread({
+            width: size,
+            height: size,
+            viewBox: "0 0 24 24",
+            role: "presentation"
+        }, rest, {
+            children: [
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M8.248 12.712a3.753 3.753 0 013.748-3.748 3.753 3.753 0 013.748 3.748 3.75 3.75 0 01-3.748 3.748 3.75 3.75 0 01-3.748-3.748z",
+                    fill: fillColor
+                }),
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M17.648 6.288h2.204c1.18 0 2.144.96 2.144 2.144v10c0 1.184-.96 2.144-2.144 2.144H4.14a2.144 2.144 0 01-2.144-2.144v-10c0-1.184.96-2.144 2.144-2.144h2.2L8.992 3.64a.69.69 0 01.504-.212h5c.188 0 .372.076.508.212l2.644 2.648zM7.176 12.716c0 2.66 2.164 4.82 4.82 4.82s4.82-2.16 4.82-4.82-2.164-4.82-4.82-4.82a4.825 4.825 0 00-4.82 4.82z",
+                    fill: fillColor
+                })
+            ]
+        }));
+    } else {
+        return /*#__PURE__*/ _jsxs("svg", _objectSpread({
+            width: size,
+            height: size,
+            viewBox: "0 0 24 24",
+            role: "presentation"
+        }, rest, {
+            children: [
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M11.597 11.36h.806a1.327 1.327 0 011.329 1.33v.805a1.33 1.33 0 01-1.33 1.33h-.805a1.327 1.327 0 01-1.33-1.33v-.806a1.33 1.33 0 011.33-1.329z",
+                    fill: fillColor
+                }),
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M9.603 5.36a1.636 1.636 0 011.468-.913h1.69c.597 0 1.146.324 1.434.847l.722 1.313h5.345c.96 0 1.738.779 1.738 1.739v9.461c0 .96-.778 1.739-1.738 1.739H3.331A1.331 1.331 0 012 18.214V8.346c0-.96.778-1.739 1.738-1.739h5.25l.615-1.247zm1.994 4.773a2.556 2.556 0 00-2.556 2.556v.806a2.556 2.556 0 002.556 2.556h.806a2.556 2.556 0 002.556-2.556v-.806a2.556 2.556 0 00-2.556-2.556h-.806z",
+                    fill: fillColor
+                })
+            ]
+        }));
+    }
 };
 export default IconPhotoCameraFilled;