@telefonica/mistica 11.3.0 → 11.5.0

package/dist/list.d.ts

@@ -15,7 +15,11 @@ interface CommonProps {
     extra?: React.ReactNode;
     dataAttributes?: DataAttributes;
     disabled?: boolean;
+    withChevron?: boolean;
 }
+declare type Right = (({ centerY }: {
+    centerY: boolean;
+}) => React.ReactNode) | React.ReactNode;
 declare type ControlProps = {
     name?: string;
     value?: boolean;
@@ -31,7 +35,7 @@ interface BasicRowContentProps extends CommonProps {
     radioValue?: undefined;
     newTab?: undefined;
     fullPageOnWebView?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface SwitchRowContentProps extends CommonProps {
     href?: undefined;
@@ -76,7 +80,7 @@ interface HrefRowContentProps extends CommonProps {
     newTab?: boolean;
     onPress?: undefined;
     to?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface ToRowContentProps extends CommonProps {
     checkbox?: undefined;
@@ -89,7 +93,7 @@ interface ToRowContentProps extends CommonProps {
     replace?: boolean;
     href?: undefined;
     onPress?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface OnPressRowContentProps extends CommonProps {
     checkbox?: undefined;
@@ -100,7 +104,7 @@ interface OnPressRowContentProps extends CommonProps {
     onPress: () => void;
     href?: undefined;
     to?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 declare type RowContentProps = BasicRowContentProps | SwitchRowContentProps | RadioRowContentProps | CheckboxRowContentProps | HrefRowContentProps | ToRowContentProps | OnPressRowContentProps;
 export declare const Row: React.ForwardRefExoticComponent<RowContentProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;

package/dist/list.js

@@ -214,8 +214,21 @@ var useStyles = (0, _jss).createUseStyles(function(param1) {
         }
     };
 });
+var renderRight = function renderRight(right, centerY) {
+    if (typeof right === "function") return right === null || right === void 0 ? void 0 : right({
+        centerY: centerY
+    });
+    return centerY ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            height: "100%"
+        },
+        children: right
+    }) : right;
+};
 var Content = function Content(param) {
-    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? "basic" : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
+    var withChevron = param.withChevron, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? "basic" : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -228,7 +241,7 @@ var Content = function Content(param) {
         description,
         extra
     ].filter(Boolean).length;
-    var shouldCenter = numTextLines === 1;
+    var centerY = numTextLines === 1;
     var renderBadge = function renderBadge() {
         if (!badge) {
             return null;
@@ -243,31 +256,6 @@ var Content = function Content(param) {
             })
         });
     };
-    var renderRight = function renderRight() {
-        switch(type){
-            case "chevron":
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
-                    paddingLeft: 16,
-                    className: (0, _classnames).default(classes.center, _defineProperty({}, classes.disabled, disabled)),
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
-                        color: isInverse ? colors.inverse : colors.neutralMedium,
-                        direction: "right"
-                    })
-                });
-            case "control":
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.right,
-                    children: right
-                });
-            case "custom":
-                return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
-                    children: right
-                });
-            default:
-                return null;
-        }
-    };
     var _obj;
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
         paddingY: 16,
@@ -275,7 +263,7 @@ var Content = function Content(param) {
         children: [
             asset && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingRight: 16,
-                className: (0, _classnames).default((_obj = {}, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
+                className: (0, _classnames).default((_obj = {}, _defineProperty(_obj, classes.center, centerY), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.asset,
                     children: asset
@@ -284,7 +272,7 @@ var Content = function Content(param) {
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.rowBody, _defineProperty({}, classes.disabled, disabled)),
                 style: {
-                    justifyContent: shouldCenter ? "center" : "flex-start"
+                    justifyContent: centerY ? "center" : "flex-start"
                 },
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
                     space: 4,
@@ -327,7 +315,34 @@ var Content = function Content(param) {
                 })
             }),
             renderBadge(),
-            renderRight()
+            type === "chevron" && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingLeft: 16,
+                className: (0, _classnames).default(classes.center, _defineProperty({}, classes.disabled, disabled)),
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                    color: isInverse ? colors.inverse : colors.neutralMedium,
+                    direction: "right"
+                })
+            }),
+            type === "control" && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                className: classes.right,
+                children: renderRight(right, centerY)
+            }),
+            type === "custom" && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
+                        children: renderRight(right, centerY)
+                    }),
+                    withChevron && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                        paddingLeft: 4,
+                        className: (0, _classnames).default(classes.center, _defineProperty({}, classes.disabled, disabled)),
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                            color: isInverse ? colors.inverse : colors.neutralMedium,
+                            direction: "right"
+                        })
+                    })
+                ]
+            })
         ]
     });
 };
@@ -381,7 +396,8 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
             right: right,
             extra: extra,
             labelId: labelId,
-            disabled: disabled
+            disabled: disabled,
+            withChevron: !!props1.onPress || !!props1.href || !!props1.to
         });
     };
     var renderTouchableContent = function renderTouchableContent(props) {
@@ -487,10 +503,12 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                         children: renderContent({
                             labelId: labelId,
                             type: "control",
-                            right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            right: function right() {
+                                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }
@@ -518,10 +536,12 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                         paddingX: 16,
                         children: renderContent({
                             type: "control",
-                            right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            right: function right() {
+                                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }

package/dist/list.js.flow

@@ -16,7 +16,13 @@ declare type CommonProps = {
   extra?: React.Node,
   dataAttributes?: DataAttributes,
   disabled?: boolean,
+  withChevron?: boolean,
 };
+declare type Right =
+  | ((x: {
+      centerY: boolean,
+    }) => React.Node)
+  | React.Node;
 declare type ControlProps = {
   name?: string,
   value?: boolean,
@@ -25,7 +31,7 @@ declare type ControlProps = {
 };
 declare type BasicRowContentProps = {
   ...$Exact<CommonProps>,
-  right?: React.Node,
+  right?: Right,
 };
 declare type SwitchRowContentProps = {
   ...$Exact<CommonProps>,
@@ -46,7 +52,7 @@ declare type HrefRowContentProps = {
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   href: string,
   newTab?: boolean,
-  right?: React.Node,
+  right?: Right,
 };
 declare type ToRowContentProps = {
   ...$Exact<CommonProps>,
@@ -54,13 +60,13 @@ declare type ToRowContentProps = {
   to: string,
   fullPageOnWebView?: boolean,
   replace?: boolean,
-  right?: React.Node,
+  right?: Right,
 };
 declare type OnPressRowContentProps = {
   ...$Exact<CommonProps>,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   onPress: () => void,
-  right?: React.Node,
+  right?: Right,
 };
 declare type RowContentProps =
   | BasicRowContentProps

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.3.0";
+var PACKAGE_VERSION = "11.5.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/skins/o2-classic.js

@@ -176,7 +176,7 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             borderLight: palette.darkModeBlack,
             border: palette.darkModeGrey,
             borderDark: palette.grey5,
-            borderSelected: palette.o2Gem,
+            borderSelected: palette.o2SkyBlue,
             buttonLinkBackgroundSelected: (0, _color).applyAlpha(palette.white, 0.05),
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.o2SkyBlue,
@@ -194,11 +194,11 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             textLinkInverse: palette.o2SkyBlueLight,
             textLinkSnackbar: palette.o2SkyBlueLight,
             control: palette.darkModeGrey6,
-            controlActivated: palette.o2Gem,
-            loadingBar: palette.o2Gem,
+            controlActivated: palette.o2SkyBlue,
+            loadingBar: palette.o2SkyBlue,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.o2GemLight30,
+            toggleAndroidBackgroundActive: palette.o2SkyBlueLight45,
             iosControlKnob: palette.grey2,
             divider: (0, _color).applyAlpha(palette.white, 0.05),
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.05),

package/dist/theme.d.ts

@@ -75,7 +75,7 @@ declare type LinkComponent = React.ComponentType<{
 export declare const AnchorLink: LinkComponent;
 export declare type ColorScheme = 'dark' | 'light' | 'auto';
 export declare type ThemeConfig = {
-    skin: Skin;
+    skin: Readonly<Skin>;
     colorScheme?: ColorScheme;
     i18n: {
         locale: Locale;

package/dist/theme.js.flow

@@ -79,7 +79,7 @@ declare type LinkComponent = React.ComponentType<{
 declare export var AnchorLink: LinkComponent;
 export type ColorScheme = "dark" | "light" | "auto";
 export type ThemeConfig = {
-  skin: Skin,
+  skin: $ReadOnly<Skin>,
   colorScheme?: ColorScheme,
   i18n: {
     locale: Locale,

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

@@ -322,7 +322,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;
+    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode;
     var windowHeight = useWindowHeight();
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(typeof self !== "undefined"), 2), isServerSide = ref1[0], setIsServerSide = ref1[1];
@@ -385,8 +385,8 @@ export var FeedbackScreen = function(param) {
                     button: primaryButton,
                     secondaryButton: secondaryButton,
                     link: link,
-                    footerBgColor: isInverse ? colors.backgroundFeedbackBottom : undefined,
-                    containerBgColor: isInverse ? colors.navigationBarBackground : undefined,
+                    footerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
+                    containerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
                     onChangeFooterHeight: setFooterHeight,
                     children: feedbackContent
                 })

package/dist-es/fixed-footer-layout.js

@@ -79,9 +79,13 @@ var waitForSwitchTransitionToStart = function(fn) {
 var useStyles = createUseStyles(function(theme) {
     return _defineProperty({
         footer: {
-            width: "100%"
+            width: "100%",
+            backgroundColor: theme.colors.background,
+            transition: "background 0.2s linear, box-shadow 0.2s linear"
+        },
+        elevated: {
+            backgroundColor: theme.colors.backgroundContainer
         },
-        shadow: {},
         withoutFooter: {
             display: "none"
         },
@@ -102,19 +106,18 @@ var useStyles = createUseStyles(function(theme) {
             bottom: 0,
             zIndex: 1
         },
-        shadow: {
-            boxShadow: "0 -3px 8px 0 rgba(0, 0, 0, 0.15)"
+        elevated: {
+            boxShadow: "0 -2px 8px 0 rgba(0, 0, 0, 0.10)"
         }
     });
 });
 var FixedFooterLayout = function(param) {
     var _isFooterVisible = param.isFooterVisible, isFooterVisible = _isFooterVisible === void 0 ? true : _isFooterVisible, footer = param.footer, _footerHeight = param.footerHeight, footerHeight = _footerHeight === void 0 ? "auto" : _footerHeight, footerBgColor = param.footerBgColor, containerBgColor = param.containerBgColor, children = param.children, onChangeFooterHeight = param.onChangeFooterHeight;
-    var ref = _slicedToArray(React.useState(false), 2), displayShadow = ref[0], setDisplayShadow = ref[1];
+    var ref = _slicedToArray(React.useState(false), 2), displayElevation = ref[0], setDisplayElevation = ref[1];
     var containerRef = React.useRef(null);
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var platformOverrides = useTheme().platformOverrides;
     var ref1 = useElementDimensions(), realHeight = ref1.height, ref2 = ref1.ref;
-    var colors = useTheme().colors;
     useIsomorphicLayoutEffect(function() {
         onChangeFooterHeight === null || onChangeFooterHeight === void 0 ? void 0 : onChangeFooterHeight(realHeight);
     }, [
@@ -123,7 +126,7 @@ var FixedFooterLayout = function(param) {
     ]);
     React.useEffect(function() {
         var scrollable = getScrollableParentElement(containerRef.current);
-        var shouldDisplayShadow = function() {
+        var shouldDisplayElevation = function() {
             if (isRunningAcceptanceTest(platformOverrides)) {
                 return false;
             }
@@ -132,19 +135,20 @@ var FixedFooterLayout = function(param) {
             }
             return false;
         };
-        var checkDisplayShadow = debounce(function() {
-            setDisplayShadow(shouldDisplayShadow());
+        var checkDisplayElevation = debounce(function() {
+            setDisplayElevation(shouldDisplayElevation());
         }, 50, {
-            leading: true
+            leading: true,
+            maxWait: 200
         });
-        var transitionAwaiter = waitForSwitchTransitionToStart(checkDisplayShadow);
+        var transitionAwaiter = waitForSwitchTransitionToStart(checkDisplayElevation);
         var scrollEventTarget = getScrollEventTarget(scrollable);
-        addPassiveEventListener(scrollEventTarget, "resize", checkDisplayShadow);
-        addPassiveEventListener(scrollEventTarget, "scroll", checkDisplayShadow);
+        addPassiveEventListener(scrollEventTarget, "resize", checkDisplayElevation);
+        addPassiveEventListener(scrollEventTarget, "scroll", checkDisplayElevation);
         return function() {
-            checkDisplayShadow.cancel();
-            removePassiveEventListener(scrollEventTarget, "scroll", checkDisplayShadow);
-            removePassiveEventListener(scrollEventTarget, "resize", checkDisplayShadow);
+            checkDisplayElevation.cancel();
+            removePassiveEventListener(scrollEventTarget, "scroll", checkDisplayElevation);
+            removePassiveEventListener(scrollEventTarget, "resize", checkDisplayElevation);
             transitionAwaiter.cancel();
         };
     }, [
@@ -167,12 +171,12 @@ var FixedFooterLayout = function(param) {
             }),
             /*#__PURE__*/ _jsx("div", {
                 ref: ref2,
-                className: classnames(classes.footer, (_obj = {}, _defineProperty(_obj, classes.withoutFooter, !isFooterVisible), _defineProperty(_obj, classes.shadow, displayShadow), _obj)),
+                className: classnames(classes.footer, (_obj = {}, _defineProperty(_obj, classes.withoutFooter, !isFooterVisible), _defineProperty(_obj, classes.elevated, displayElevation), _obj)),
                 /**
                  * This style is inline to avoid creating a class that may collide with
                  * other fixed footers during the page animation transition
                  */ style: {
-                    background: isTabletOrSmaller ? footerBgColor || colors.backgroundContainer : undefined
+                    background: isTabletOrSmaller ? footerBgColor : undefined
                 },
                 "data-testid": "fixed-footer".concat(isFooterVisible ? "-visible" : "-hidden"),
                 /**

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;