@telefonica/mistica 11.4.1 → 11.6.0

package/dist/nestable-context.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare type ProviderProps = {
     children: React.ReactNode;
 };
-declare type NestableContext<Value> = {
+export declare type NestableContext<Value> = {
     Getter: React.FC<{
         children: (value: Value) => React.ReactNode;
     }>;

package/dist/nestable-context.js.flow

@@ -4,7 +4,7 @@ import * as React from "react";
 declare type ProviderProps = {
   children: React.Node,
 };
-declare type NestableContext<Value> = {
+export type NestableContext<Value> = {
   Getter: React.ComponentType<{
     children: (value: Value) => React.Node,
   }>,

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "11.4.1";
+var PACKAGE_VERSION = "11.6.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/responsive-layout.js

@@ -58,7 +58,9 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             width: "100%"
         },
         layout: (_obj = {
-            margin: "auto"
+            margin: "auto",
+            paddingLeft: "env(safe-area-inset-left)",
+            paddingRight: "env(safe-area-inset-right)"
         }, _defineProperty(_obj, theme.mq.largeDesktop, {
             width: LARGE_DESKTOP_MAX_WIDTH
         }), _defineProperty(_obj, theme.mq.desktop, {

package/dist-es/button.js

@@ -439,7 +439,8 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
                 "@media (pointer: coarse)": {
                     backgroundColor: "initial"
                 }
-            }
+            },
+            "&[disabled]": disabledStyle
         },
         inverse: {
             color: theme.colors.textLinkInverse,
@@ -459,6 +460,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
     };
 });
 export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var formStatus = useForm().formStatus;
     var classes = useButtonLinkStyles();
     var isInverse = useIsInverseVariant();
     var _trackingEvent;
@@ -476,7 +478,8 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             truncate: 1,
             color: "inherit",
             children: props.children
-        })
+        }),
+        disabled: props.disabled || formStatus === "sending"
     };
     if (process.env.NODE_ENV !== "production") {
         if (props.to === "" || props.href === "") {

package/dist-es/carousel.js

@@ -191,6 +191,9 @@ var useStyles = createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;
     return {
         carouselContainer: {
+            // This value is a workaround to solve an issue when the page is rendered in a hidden webview
+            // in that case the window size is reported as 0 and the scroll snap is placed at the wrong slide
+            minWidth: 64,
             position: "relative"
         },
         arrowButton: _objectSpread({}, arrowButtonStyle(theme), {

package/dist-es/chip.js

@@ -40,7 +40,9 @@ var useStyles = createUseStyles(function(param1) {
                 color: colors.textPrimary
             }
         },
-        interactive: _defineProperty({}, mq.supportsHover, {
+        interactive: _defineProperty({
+            userSelect: "none"
+        }, mq.supportsHover, {
             "&:hover:not($active)": {
                 borderColor: function(param) {
                     var isDarkMode = param.isDarkMode;

package/dist-es/feedback.js

@@ -106,7 +106,7 @@ import { useTheme, useScreenSize, useWindowHeight, useIsomorphicLayoutEffect } f
 import { ThemeVariant, useIsInverseVariant } from "./theme-variant-context";
 import ButtonFixedFooterLayout from "./button-fixed-footer-layout";
 import OverscrollColor from "./overscroll-color-context";
-import { VIVO_SKIN } from "./skins/constants";
+import { O2_CLASSIC_SKIN, VIVO_SKIN } from "./skins/constants";
 import IcnSuccess from "./icons/icon-success";
 import IconSuccessVivo from "./icons/icon-success-vivo";
 import IcnError from "./icons/icon-error";
@@ -213,6 +213,14 @@ var useStyles = createUseStyles(function(theme) {
         }
     };
 });
+var BackgroundColor = function() {
+    var colors = useTheme().colors;
+    var isInverse = useIsInverseVariant();
+    var css = "body {background:".concat(isInverse ? colors.backgroundBrand : colors.background, "}");
+    return /*#__PURE__*/ _jsx("style", {
+        children: css
+    });
+};
 var requestVibration = function(type) {
     if (isWebViewBridgeAvailable()) {
         requestVibrationNative(type).catch(function() {});
@@ -322,7 +330,7 @@ export var FeedbackScreen = function(param) {
     var title = param.title, description = param.description, children = param.children, primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, hapticFeedback = param.hapticFeedback, icon = param.icon, _animateText = param.animateText, animateText = _animateText === void 0 ? false : _animateText, unstable_inlineInDesktop = param.unstable_inlineInDesktop, imageUrl = param.imageUrl, imageFit = param.imageFit, dataAttributes = param.dataAttributes;
     useHapticFeedback(hapticFeedback);
     var isInverse = useIsInverseVariant();
-    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode;
+    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode, skinName = ref.skinName;
     var windowHeight = useWindowHeight();
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(typeof self !== "undefined"), 2), isServerSide = ref1[0], setIsServerSide = ref1[1];
@@ -391,9 +399,10 @@ export var FeedbackScreen = function(param) {
                     children: feedbackContent
                 })
             }),
-            /*#__PURE__*/ _jsx("div", {
+            skinName === O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx("div", {
                 className: classes.backgroundDiv
-            })
+            }),
+            skinName !== O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx(BackgroundColor, {})
         ]
     }) : /*#__PURE__*/ _jsx(ResponsiveLayout, {
         children: /*#__PURE__*/ _jsx(Box, {

package/dist-es/generated/mistica-icons/icon-3-d-view-filled.js

@@ -0,0 +1,91 @@
+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, jsxs as _jsxs } 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 Icon3DViewFilled = 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__*/ _jsxs("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M12.344 10.034l6.87-4.103-6.53-3.828a.611.611 0 00-.68 0L5.439 5.931l6.905 4.103zm.51.897v8.138l6.633-3.897c.204-.138.34-.344.34-.586V6.724l-6.973 4.207z",
+                fill: fillColor
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M18.126 17.517c-.374 0-.68.31-.68.69 0 .38.306.69.68.69h.987c-1.599 1.069-4.048 1.724-6.77 1.724-4.693 0-8.502-2.104-8.502-4.655 0-.863.442-1.587 1.02-2.173v.793c0 .242.136.483.34.586l6.633 3.863V10.93L4.86 6.793v5.241c-1.565 1.104-2.381 2.449-2.381 3.931C2.48 19.346 6.8 22 12.344 22c3.163 0 5.986-.828 7.823-2.172v1.137c0 .38.306.69.68.69.374 0 .68-.31.68-.69v-3.448h-3.4z",
+                fill: fillColor
+            })
+        ]
+    }));
+};
+export default Icon3DViewFilled;

package/dist-es/generated/mistica-icons/icon-3-d-view-light.js

@@ -0,0 +1,91 @@
+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, jsxs as _jsxs } 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 Icon3DViewLight = 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__*/ _jsxs("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M22 16.29a.708.708 0 01-.702.715.708.708 0 01-.701-.714c0-.394.314-.714.701-.714.388 0 .702.32.702.714z",
+                fill: fillColor
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M17.79 18.789c-.211 0-.351-.143-.351-.357s.14-.357.35-.357h3.158v3.211c0 .214-.14.357-.35.357-.211 0-.351-.143-.351-.357V19.36C18.49 21.002 15.368 22 11.825 22 6.315 22 2 19.43 2 16.112c0-1.463.842-2.783 2.456-3.889V6.478c0-.143.07-.25.176-.321l7.017-4.103a.314.314 0 01.351 0l7.017 4.103a.376.376 0 01.176.321v8.207c0 .143-.07.25-.176.321L12 19.11c-.07.035-.105.035-.175.035-.07 0-.106 0-.176-.035l-7.017-4.104a.376.376 0 01-.176-.32v-1.57c-.877.677-1.754 1.676-1.754 2.996 0 2.855 4.105 5.174 9.123 5.174 3.333 0 6.35-.963 7.965-2.497h-2zm-6.316-7.993L5.158 7.085v7.386l6.316 3.711v-7.386zm.701 7.386l6.316-3.675V7.085l-6.316 3.71v7.387zm5.93-11.704l-6.28-3.675-6.281 3.675 6.28 3.675 6.281-3.675z",
+                fill: fillColor
+            })
+        ]
+    }));
+};
+export default Icon3DViewLight;

package/dist-es/generated/mistica-icons/icon-3-d-view-regular.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 Icon3DViewRegular = 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: "M17.436 18.207c0-.38.306-.69.68-.69h3.402v3.448c0 .38-.306.69-.68.69a.687.687 0 01-.68-.69v-1.137C18.32 21.172 15.497 22 12.333 22 6.79 22 2.47 19.345 2.47 15.966c0-1.483.816-2.828 2.381-3.931v-5.38c0-.241.136-.448.34-.586l6.803-3.966a.611.611 0 01.68 0l6.803 3.966c.204.103.34.345.34.586v7.931c0 .242-.136.448-.34.586l-6.803 3.966a.65.65 0 01-.34.103.65.65 0 01-.34-.103L5.19 15.172a.669.669 0 01-.34-.586v-.793c-.578.586-1.02 1.31-1.02 2.173 0 2.551 3.81 4.655 8.503 4.655 2.721 0 5.17-.655 6.769-1.724h-.987a.687.687 0 01-.68-.69zm-5.782-7.173L6.212 7.829v6.379l5.442 3.172v-6.345zm1.36 6.31l5.442-3.137v-6.38l-5.442 3.207v6.31zm4.728-10.689l-5.408-3.172-5.408 3.172 5.408 3.173 5.408-3.173z",
+            fill: fillColor
+        })
+    }));
+};
+export default Icon3DViewRegular;

package/dist-es/generated/mistica-icons/icon-4-g-filled.js

@@ -0,0 +1,91 @@
+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, jsxs as _jsxs } 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 Icon4GFilled = 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__*/ _jsxs("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M9.144 12.891v-2.619l-1.966 2.62h1.966z",
+                fill: fillColor
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M12 2C6.488 2 2 6.488 2 12s4.488 10 10 10 10-4.488 10-10S17.512 2 12 2zm-1.248 11.965h-.535v.892a.532.532 0 01-.534.534.532.532 0 01-.535-.534v-.892H6.113a.538.538 0 01-.43-.859l3.214-4.282a.53.53 0 01.43-.215h.356c.297 0 .534.238.534.535v3.747h.535c.297 0 .535.238.535.535a.54.54 0 01-.535.54zM11.643 12a3.396 3.396 0 015.768-2.422.54.54 0 01.01.758.535.535 0 01-.76.01 2.325 2.325 0 00-3.949 1.66 2.325 2.325 0 002.323 2.32 2.323 2.323 0 002.258-1.787h-1.687a.532.532 0 01-.535-.534c0-.297.238-.535.535-.535h2.285c.297 0 .535.238.535.535a3.395 3.395 0 01-3.391 3.386 3.396 3.396 0 01-3.392-3.39z",
+                fill: fillColor
+            })
+        ]
+    }));
+};
+export default Icon4GFilled;

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

@@ -0,0 +1,91 @@
+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, jsxs as _jsxs } 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 Icon4GLight = 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__*/ _jsxs("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M12 22C6.488 22 2 17.517 2 12 2 6.484 6.488 2 12 2s10 4.488 10 10a9.98 9.98 0 01-1.54 5.33.36.36 0 01-.494.109.36.36 0 01-.11-.494 9.248 9.248 0 001.431-4.95C21.282 6.881 17.119 2.718 12 2.718 6.881 2.718 2.718 6.88 2.718 12S6.88 21.282 12 21.282a9.247 9.247 0 004.95-1.43.36.36 0 01.493.11.36.36 0 01-.11.493A9.97 9.97 0 0112 22z",
+                fill: fillColor
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M19.495 18.783a.713.713 0 11-1.426 0 .713.713 0 011.426 0zm-5.082-3.57A3.215 3.215 0 0111.2 12a3.215 3.215 0 015.462-2.294.354.354 0 01.004.502.355.355 0 01-.502.005 2.5 2.5 0 10-1.75 4.287 2.502 2.502 0 002.472-2.143h-1.901a.357.357 0 010-.713h2.285c.196 0 .356.16.356.356a3.211 3.211 0 01-3.213 3.213zm-5.269-.356c0 .196.16.356.356.356.197 0 .356-.16.352-.361v-1.07h.713a.357.357 0 000-.713h-.713V9.145a.357.357 0 00-.357-.357H9.14a.35.35 0 00-.283.142l-3.213 4.287a.358.358 0 00.288.571h3.213v1.07zm0-1.787h-2.5l2.5-3.332v3.332z",
+                fill: fillColor
+            })
+        ]
+    }));
+};
+export default Icon4GLight;