@telefonica/mistica 11.7.0 → 11.8.0

package/dist/button.js

@@ -16,6 +16,7 @@ var _text = require("./text");
 var _box = _interopRequireDefault(require("./box"));
 var _common = require("./utils/common");
 var _analytics = require("./utils/analytics");
+var _hooks = require("./hooks");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -305,6 +306,7 @@ var useDangerButtonStyles = (0, _jss).createUseStyles(function(theme) {
     });
 });
 var Button = function Button(props) {
+    var analytics = (0, _hooks).useTheme().analytics;
     var ref = (0, _formContext).useForm(), formStatus = ref.formStatus, formId = ref.formId;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
@@ -343,6 +345,21 @@ var Button = function Button(props) {
             children: text
         });
     };
+    var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
+        if (analytics.eventFormat === "google-analytics-4") {
+            return {
+                name: _analytics.eventNames.userInteraction,
+                component_type: "".concat(props.type, "_button"),
+                component_copy: (0, _common).getTextFromChildren(props.children)
+            };
+        } else {
+            return {
+                category: _analytics.eventCategories.userInteraction,
+                action: "".concat(props.type, "_button_tapped"),
+                label: (0, _common).getTextFromChildren(props.children)
+            };
+        }
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
@@ -350,11 +367,7 @@ var Button = function Button(props) {
         style: _objectSpread({
             cursor: props.fake ? "pointer" : undefined
         }, props.style),
-        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
-            category: _analytics.eventCategories.userInteraction,
-            action: "".concat(props.type, "_button_tapped"),
-            label: (0, _common).getTextFromChildren(props.children)
-        } : undefined,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
         "aria-controls": props["aria-controls"],
         "aria-expanded": props["aria-expanded"],
@@ -496,15 +509,27 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var formStatus = (0, _formContext).useForm().formStatus;
     var classes = useButtonLinkStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var analytics = (0, _hooks).useTheme().analytics;
+    var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
+        if (analytics.eventFormat === "google-analytics-4") {
+            return {
+                name: _analytics.eventNames.userInteraction,
+                component_type: "link",
+                component_copy: (0, _common).getTextFromChildren(props.children)
+            };
+        } else {
+            return {
+                category: _analytics.eventCategories.userInteraction,
+                action: _analytics.eventActions.linkTapped,
+                label: (0, _common).getTextFromChildren(props.children)
+            };
+        }
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(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 ? {
-            category: _analytics.eventCategories.userInteraction,
-            action: _analytics.eventActions.linkTapped,
-            label: (0, _common).getTextFromChildren(props.children)
-        } : undefined,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
             medium: true,

package/dist/image.d.ts

@@ -21,6 +21,8 @@ export declare type ImageProps = {
     children?: void;
     dataAttributes?: DataAttributes;
     noBorderRadius?: boolean;
+    onError?: (event: React.SyntheticEvent) => void;
+    onLoad?: (event: React.SyntheticEvent) => void;
 };
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/image.js

@@ -29,6 +29,14 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -42,6 +50,33 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
         var source = _arguments[i] != null ? _arguments[i] : {};
@@ -85,6 +120,17 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
 /**
  * This context is used internally to disable the border radius. This is useful for example
  * when using the Image component inside a Card
@@ -125,6 +171,10 @@ var useStyles = (0, _jss).createUseStyles(function() {
                 height: "100%",
                 top: 0,
                 left: 0
+            },
+            opacity: function opacity(param) {
+                var isError = param.isError;
+                return isError ? 0 : 1;
             }
         },
         wrapper: {
@@ -157,16 +207,19 @@ var RATIO = {
 };
 exports.RATIO = RATIO;
 var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? "" : _alt, dataAttributes = _param.dataAttributes, noBorderRadius = _param.noBorderRadius, src = _param.src, props = _objectWithoutProperties(_param, [
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? "" : _alt, dataAttributes = _param.dataAttributes, noBorderRadius = _param.noBorderRadius, src = _param.src, onError = _param.onError, onLoad = _param.onLoad, props = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
         "noBorderRadius",
-        "src"
+        "src",
+        "onError",
+        "onLoad"
     ]);
     var supportsAspectRatio = (0, _aspectRatioSupport).useSupportsAspectRatio();
     var noBorderRadiusContext = useDisableBorderRadius();
     var noBorderSetting = noBorderRadius !== null && noBorderRadius !== void 0 ? noBorderRadius : noBorderRadiusContext;
+    var _$ref = _slicedToArray(React.useState(false), 2), isError = _$ref[0], setIsError = _$ref[1];
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
     // if width or height are numeric, we can calculate the other with the ratio without css.
     // if aspect ratio is 0, we use the original image proportions
@@ -174,7 +227,8 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var classes = useStyles({
         noBorderRadius: noBorderSetting,
         aspectRatio: withCssAspectRatio ? ratio : undefined,
-        width: props.width
+        width: props.width,
+        isError: isError
     });
     var width = props.width;
     var height = props.height;
@@ -189,11 +243,20 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         width = props.width || "100%";
     }
     var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
-    var img = /*#__PURE__*/ (0, _jsxRuntime).jsx("img", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+    var img = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /*#__PURE__*/ (0, _jsxRuntime).jsx("img", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         ref: ref,
         src: src,
         className: classes.image,
-        alt: alt
+        alt: alt,
+        onError: function onError1(event) {
+            setIsError(true);
+            onError === null || onError === void 0 ? void 0 : onError(event);
+        },
+        onLoad: function onLoad1(event) {
+            setIsError(false);
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
+        }
     }, !needsWrapper ? {
         width: width,
         height: height

package/dist/image.js.flow

@@ -28,6 +28,8 @@ export type ImageProps = {
  alt?: string,
  dataAttributes?: DataAttributes,
  noBorderRadius?: boolean,
+ onError?: (event: SyntheticEvent<any>) => void,
+ onLoad?: (event: SyntheticEvent<any>) => void,
 };
 declare var Image: React.AbstractComponent<ImageProps, HTMLImageElement>;
 declare export default typeof Image;

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { default as Text, Text1, Text2, Text3, Text4, Text5, Text6, Text7, Text8
 export { default as Tag } from './tag';
 export type { TagType } from './tag';
 export { default as SectionTitle } from './section-title';
+export { Title1, Title2 } from './title';
 export { Placeholder, AvatarPlaceholder } from './placeholder';
 export { RowList, Row, BoxedRowList, BoxedRow } from './list';
 export { default as Switch } from './switch-component';

package/dist/index.js

@@ -374,6 +374,18 @@ Object.defineProperty(exports, "SectionTitle", {
         return _sectionTitle.default;
     }
 });
+Object.defineProperty(exports, "Title1", {
+    enumerable: true,
+    get: function() {
+        return _title.Title1;
+    }
+});
+Object.defineProperty(exports, "Title2", {
+    enumerable: true,
+    get: function() {
+        return _title.Title2;
+    }
+});
 Object.defineProperty(exports, "Placeholder", {
     enumerable: true,
     get: function() {
@@ -10768,6 +10780,7 @@ var _navigationBreadcrumbs = _interopRequireDefault(require("./navigation-breadc
 var _text = _interopRequireWildcard(require("./text"));
 var _tag = _interopRequireDefault(require("./tag"));
 var _sectionTitle = _interopRequireDefault(require("./section-title"));
+var _title = require("./title");
 var _placeholder = require("./placeholder");
 var _list = require("./list");
 var _switchComponent = _interopRequireDefault(require("./switch-component"));

package/dist/index.js.flow

@@ -73,6 +73,7 @@ declare export {
 declare export { default as Tag } from "./tag";
 export type { TagType } from "./tag";
 declare export { default as SectionTitle } from "./section-title";
+declare export { Title1, Title2 } from "./title";
 declare export { Placeholder, AvatarPlaceholder } from "./placeholder";
 declare export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
 declare export { default as Switch } from "./switch-component";

package/dist/package-version.js

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

package/dist/password-field.js

@@ -9,8 +9,8 @@ var _formContext = require("./form-context");
 var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _iconButton = _interopRequireDefault(require("./icon-button"));
-var _iconVisibility = _interopRequireDefault(require("./icons/icon-visibility"));
-var _iconVisibilityOff = _interopRequireDefault(require("./icons/icon-visibility-off"));
+var _iconAccesibilityRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-accesibility-regular"));
+var _iconEyeRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-eye-regular"));
 var _jss = require("./jss");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -144,7 +144,7 @@ var usePasswordAdornmentStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         shadow: _defineProperty({}, theme.mq.supportsHover, {
             "&:hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.08)"
+                backgroundColor: theme.colors.backgroundAlternative
             }
         })
     };
@@ -155,10 +155,11 @@ var PasswordAdornment = function PasswordAdornment(param) {
     var classes = usePasswordAdornmentStyles();
     var style = {
         backgroundSize: "200%",
-        padding: 12,
-        margin: -12,
+        padding: 8,
+        margin: -8,
         borderRadius: "50%",
-        backgroundColor: undefined
+        backgroundColor: undefined,
+        transition: "background-color 0.2s ease-in-out"
     };
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
         "aria-label": texts.togglePasswordVisibilityLabel,
@@ -166,10 +167,10 @@ var PasswordAdornment = function PasswordAdornment(param) {
             setVisibility(!isVisible);
             focus();
         },
-        size: 48,
+        size: 40,
         className: classes.shadow,
         style: style,
-        children: isVisible ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconVisibilityOff.default, {}) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconVisibility.default, {})
+        children: isVisible ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconAccesibilityRegular.default, {}) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconEyeRegular.default, {})
     });
 };
 var PasswordField = function PasswordField(_param) {

package/dist/section-title.d.ts

@@ -5,5 +5,8 @@ declare type Props = {
     right?: React.ReactNode;
     as?: 'h1' | 'h2' | 'h3' | 'h4';
 };
+/**
+ * @deprecated use Title1 instead
+ */
 declare const SectionTitle: React.FC<Props>;
 export default SectionTitle;

package/dist/section-title.js

@@ -61,7 +61,9 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         })
     };
 });
-var SectionTitle = function SectionTitle(param) {
+/**
+ * @deprecated use Title1 instead
+ */ var SectionTitle = function SectionTitle(param) {
     var children = param.children, id = param.id, right = param.right, _as = param.as, as = _as === void 0 ? "h3" : _as;
     var classes = useStyles();
     var theme = (0, _hooks).useTheme();

package/dist/section-title.js.flow

@@ -7,5 +7,8 @@ declare type Props = {
   right?: React.Node,
   as?: "h1" | "h2" | "h3" | "h4",
 };
+/**
+ * @deprecated use Title1 instead
+ */
 declare var SectionTitle: React.ComponentType<Props>;
 declare export default typeof SectionTitle;

package/dist/text-link.js

@@ -12,6 +12,7 @@ var _themeVariantContext = require("./theme-variant-context");
 var _formContext = require("./form-context");
 var _common = require("./utils/common");
 var _analytics = require("./utils/analytics");
+var _hooks = require("./hooks");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -128,14 +129,26 @@ var TextLink = function TextLink(_param) {
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var formStatus = (0, _formContext).useForm().formStatus;
+    var analytics = (0, _hooks).useTheme().analytics;
+    var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
+        if (analytics.eventFormat === "google-analytics-4") {
+            return {
+                name: _analytics.eventNames.userInteraction,
+                component_type: "link",
+                component_copy: (0, _common).getTextFromChildren(children)
+            };
+        } else {
+            return {
+                category: _analytics.eventCategories.userInteraction,
+                action: _analytics.eventActions.linkTapped,
+                label: (0, _common).getTextFromChildren(children)
+            };
+        }
+    };
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, props, {
-        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
-            category: _analytics.eventCategories.userInteraction,
-            action: _analytics.eventActions.linkTapped,
-            label: (0, _common).getTextFromChildren(children)
-        } : undefined,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         disabled: disabled || formStatus === "sending",
         className: (0, _classnames).default(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children

package/dist/theme-context-provider.js

@@ -206,7 +206,8 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             analytics: _objectSpread({
                 logEvent: function logEvent() {
                     return Promise.resolve();
-                }
+                },
+                eventFormat: "universal-analytics"
             }, theme.analytics),
             dimensions: _objectSpread({}, _theme.dimensions, theme.dimensions),
             mq: (0, _mediaQueries).createMediaQueries((_mediaQueries1 = theme.mediaQueries) !== null && _mediaQueries1 !== void 0 ? _mediaQueries1 : _theme.mediaQueriesConfig),

package/dist/theme.d.ts

@@ -89,6 +89,7 @@ export declare type ThemeConfig = {
     texts?: Partial<ThemeTexts>;
     analytics?: {
         logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
+        eventFormat?: 'universal-analytics' | 'google-analytics-4';
     };
     dimensions?: {
         headerMobileHeight: number;
@@ -117,6 +118,7 @@ export declare type Theme = {
     texts: ThemeTexts;
     analytics: {
         logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
+        eventFormat: 'universal-analytics' | 'google-analytics-4';
     };
     dimensions: {
         headerMobileHeight: number;

package/dist/theme.js.flow

@@ -93,6 +93,7 @@ export type ThemeConfig = {
   texts?: $Shape<ThemeTexts>,
   analytics?: {
     logEvent: (trackingEvent: TrackingEvent) => Promise<void>,
+    eventFormat?: "universal-analytics" | "google-analytics-4",
   },
   dimensions?: {
     headerMobileHeight: number,
@@ -121,6 +122,7 @@ export type Theme = {
   texts: ThemeTexts,
   analytics: {
     logEvent: (trackingEvent: TrackingEvent) => Promise<void>,
+    eventFormat: "universal-analytics" | "google-analytics-4",
   },
   dimensions: {
     headerMobileHeight: number,

package/dist/title.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+declare type TitleProps = {
+    children: React.ReactNode;
+    id?: string;
+    right?: React.ReactNode;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+};
+export declare const Title1: ({ children, as, id, right, dataAttributes }: TitleProps) => React.ReactElement;
+export declare const Title2: ({ children, as, id, right, dataAttributes }: TitleProps) => React.ReactElement;
+export {};

package/dist/title.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.Title2 = exports.Title1 = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _text = require("./text");
+var _hooks = require("./hooks");
+var _inline = _interopRequireDefault(require("./inline"));
+var _box = _interopRequireDefault(require("./box"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+var TitleLayout = function TitleLayout(param) {
+    var title = param.title, right = param.right;
+    if (!right) {
+        return title;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_inline.default, {
+        space: "between",
+        alignItems: "baseline",
+        children: [
+            title,
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingLeft: 16,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                    regular: true,
+                    children: right
+                })
+            })
+        ]
+    });
+};
+var Title1 = function Title1(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    var theme = (0, _hooks).useTheme();
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(TitleLayout, {
+        title: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+            color: theme.colors.textSecondary,
+            transform: "uppercase",
+            medium: true,
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};
+exports.Title1 = Title1;
+var Title2 = function Title2(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(TitleLayout, {
+        title: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text5, {
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};
+exports.Title2 = Title2;

package/dist/title.js.flow

@@ -0,0 +1,18 @@
+// @flow
+
+import * as React from "react";
+import type { DataAttributes } from "./utils/types";
+declare type TitleProps = {
+  children: React.Node,
+  id?: string,
+  right?: React.Node,
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+
+  /**
+   * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
+   */
+  dataAttributes?: DataAttributes,
+};
+declare export var Title1: (x: TitleProps) => React.Element<any>;
+declare export var Title2: (x: TitleProps) => React.Element<any>;
+declare export {};

package/dist/utils/analytics.d.ts

@@ -4,3 +4,6 @@ export declare const eventCategories: {
 export declare const eventActions: {
     readonly linkTapped: "link_tapped";
 };
+export declare const eventNames: {
+    readonly userInteraction: "user_interaction";
+};

package/dist/utils/analytics.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.eventActions = exports.eventCategories = void 0;
+exports.eventNames = exports.eventActions = exports.eventCategories = void 0;
 var eventCategories = {
     userInteraction: "user_interaction"
 };
@@ -11,3 +11,7 @@ var eventActions = {
     linkTapped: "link_tapped"
 };
 exports.eventActions = eventActions;
+var eventNames = {
+    userInteraction: "user_interaction"
+};
+exports.eventNames = eventNames;

package/dist/utils/analytics.js.flow

@@ -6,3 +6,6 @@ declare export var eventCategories: {
 declare export var eventActions: {
   +linkTapped: "link_tapped",
 };
+declare export var eventNames: {
+  +userInteraction: "user_interaction",
+};

package/dist-es/button.js

@@ -84,7 +84,8 @@ import { pxToRem } from "./utils/css";
 import { Text, Text2, Text3 } from "./text";
 import Box from "./box";
 import { getTextFromChildren } from "./utils/common";
-import { eventActions, eventCategories } from "./utils/analytics";
+import { eventActions, eventCategories, eventNames } from "./utils/analytics";
+import { useTheme } from "./hooks";
 export var BUTTON_MIN_WIDTH = 136;
 var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
 var BORDER_PX = 1.5;
@@ -272,6 +273,7 @@ var useDangerButtonStyles = createUseStyles(function(theme) {
     });
 });
 var Button = function(props) {
+    var analytics = useTheme().analytics;
     var ref = useForm(), formStatus = ref.formStatus, formId = ref.formId;
     var isInverse = useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
@@ -310,6 +312,21 @@ var Button = function(props) {
             children: text
         });
     };
+    var createDefaultTrackingEvent = function() {
+        if (analytics.eventFormat === "google-analytics-4") {
+            return {
+                name: eventNames.userInteraction,
+                component_type: "".concat(props.type, "_button"),
+                component_copy: getTextFromChildren(props.children)
+            };
+        } else {
+            return {
+                category: eventCategories.userInteraction,
+                action: "".concat(props.type, "_button_tapped"),
+                label: getTextFromChildren(props.children)
+            };
+        }
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
@@ -317,11 +334,7 @@ var Button = function(props) {
         style: _objectSpread({
             cursor: props.fake ? "pointer" : undefined
         }, props.style),
-        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
-            category: eventCategories.userInteraction,
-            action: "".concat(props.type, "_button_tapped"),
-            label: getTextFromChildren(props.children)
-        } : undefined,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
         "aria-controls": props["aria-controls"],
         "aria-expanded": props["aria-expanded"],
@@ -463,15 +476,27 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var formStatus = useForm().formStatus;
     var classes = useButtonLinkStyles();
     var isInverse = useIsInverseVariant();
+    var analytics = useTheme().analytics;
+    var createDefaultTrackingEvent = function() {
+        if (analytics.eventFormat === "google-analytics-4") {
+            return {
+                name: eventNames.userInteraction,
+                component_type: "link",
+                component_copy: getTextFromChildren(props.children)
+            };
+        } else {
+            return {
+                category: eventCategories.userInteraction,
+                action: eventActions.linkTapped,
+                label: getTextFromChildren(props.children)
+            };
+        }
+    };
     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 ? {
-            category: eventCategories.userInteraction,
-            action: eventActions.linkTapped,
-            label: getTextFromChildren(props.children)
-        } : undefined,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
         children: /*#__PURE__*/ _jsx(Text2, {
             medium: true,

package/dist-es/image.js

@@ -1,3 +1,11 @@
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -11,6 +19,33 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -53,6 +88,17 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
@@ -96,6 +142,10 @@ var useStyles = createUseStyles(function() {
                 height: "100%",
                 top: 0,
                 left: 0
+            },
+            opacity: function(param) {
+                var isError = param.isError;
+                return isError ? 0 : 1;
             }
         },
         wrapper: {
@@ -127,16 +177,19 @@ export var RATIO = {
     "4:3": 4 / 3
 };
 var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? "" : _alt, dataAttributes = _param.dataAttributes, noBorderRadius = _param.noBorderRadius, src = _param.src, props = _objectWithoutProperties(_param, [
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? "1:1" : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? "" : _alt, dataAttributes = _param.dataAttributes, noBorderRadius = _param.noBorderRadius, src = _param.src, onError = _param.onError, onLoad = _param.onLoad, props = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
         "noBorderRadius",
-        "src"
+        "src",
+        "onError",
+        "onLoad"
     ]);
     var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadiusContext = useDisableBorderRadius();
     var noBorderSetting = noBorderRadius !== null && noBorderRadius !== void 0 ? noBorderRadius : noBorderRadiusContext;
+    var _$ref = _slicedToArray(React.useState(false), 2), isError = _$ref[0], setIsError = _$ref[1];
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
     // if width or height are numeric, we can calculate the other with the ratio without css.
     // if aspect ratio is 0, we use the original image proportions
@@ -144,7 +197,8 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var classes = useStyles({
         noBorderRadius: noBorderSetting,
         aspectRatio: withCssAspectRatio ? ratio : undefined,
-        width: props.width
+        width: props.width,
+        isError: isError
     });
     var width = props.width;
     var height = props.height;
@@ -159,11 +213,21 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         width = props.width || "100%";
     }
     var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
-    var img = /*#__PURE__*/ _jsx("img", _objectSpread({}, getPrefixedDataAttributes(dataAttributes), {
+    var img = // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/309
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /*#__PURE__*/ _jsx("img", _objectSpread({}, getPrefixedDataAttributes(dataAttributes), {
         ref: ref,
         src: src,
         className: classes.image,
-        alt: alt
+        alt: alt,
+        onError: function(event) {
+            setIsError(true);
+            onError === null || onError === void 0 ? void 0 : onError(event);
+        },
+        onLoad: function(event) {
+            setIsError(false);
+            onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
+        }
     }, !needsWrapper ? {
         width: width,
         height: height

package/dist-es/index.js

@@ -36,6 +36,7 @@ export { default as NavigationBreadcrumbs } from "./navigation-breadcrumbs";
 export { default as Text, Text1, Text2, Text3, Text4, Text5, Text6, Text7, Text8, Text9, Text10 } from "./text";
 export { default as Tag } from "./tag";
 export { default as SectionTitle } from "./section-title";
+export { Title1, Title2 } from "./title";
 export { Placeholder, AvatarPlaceholder } from "./placeholder";
 export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
 export { default as Switch } from "./switch-component";

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "11.7.0";
+export var PACKAGE_VERSION = "11.8.0";

package/dist-es/password-field.js

@@ -105,14 +105,14 @@ import { useFieldProps } from "./form-context";
 import { TextFieldBaseAutosuggest } from "./text-field-base";
 import { useTheme } from "./hooks";
 import IconButton from "./icon-button";
-import Visibility from "./icons/icon-visibility";
-import VisibilityOff from "./icons/icon-visibility-off";
+import IconAccesibilityRegular from "./generated/mistica-icons/icon-accesibility-regular";
+import IconEyeRegular from "./generated/mistica-icons/icon-eye-regular";
 import { createUseStyles } from "./jss";
 var usePasswordAdornmentStyles = createUseStyles(function(theme) {
     return {
         shadow: _defineProperty({}, theme.mq.supportsHover, {
             "&:hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.08)"
+                backgroundColor: theme.colors.backgroundAlternative
             }
         })
     };
@@ -123,10 +123,11 @@ var PasswordAdornment = function(param) {
     var classes = usePasswordAdornmentStyles();
     var style = {
         backgroundSize: "200%",
-        padding: 12,
-        margin: -12,
+        padding: 8,
+        margin: -8,
         borderRadius: "50%",
-        backgroundColor: undefined
+        backgroundColor: undefined,
+        transition: "background-color 0.2s ease-in-out"
     };
     return /*#__PURE__*/ _jsx(IconButton, {
         "aria-label": texts.togglePasswordVisibilityLabel,
@@ -134,10 +135,10 @@ var PasswordAdornment = function(param) {
             setVisibility(!isVisible);
             focus();
         },
-        size: 48,
+        size: 40,
         className: classes.shadow,
         style: style,
-        children: isVisible ? /*#__PURE__*/ _jsx(VisibilityOff, {}) : /*#__PURE__*/ _jsx(Visibility, {})
+        children: isVisible ? /*#__PURE__*/ _jsx(IconAccesibilityRegular, {}) : /*#__PURE__*/ _jsx(IconEyeRegular, {})
     });
 };
 var PasswordField = function(_param) {

package/dist-es/section-title.js

@@ -30,7 +30,9 @@ var useStyles = createUseStyles(function(theme) {
         })
     };
 });
-var SectionTitle = function(param) {
+/**
+ * @deprecated use Title1 instead
+ */ var SectionTitle = function(param) {
     var children = param.children, id = param.id, right = param.right, _as = param.as, as = _as === void 0 ? "h3" : _as;
     var classes = useStyles();
     var theme = useTheme();

package/dist-es/text-link.js

@@ -61,7 +61,8 @@ import classnames from "classnames";
 import { useIsInverseVariant } from "./theme-variant-context";
 import { useForm } from "./form-context";
 import { getTextFromChildren } from "./utils/common";
-import { eventActions, eventCategories } from "./utils/analytics";
+import { eventActions, eventCategories, eventNames } from "./utils/analytics";
+import { useTheme } from "./hooks";
 var useStyles = createUseStyles(function(theme) {
     var _obj;
     return {
@@ -96,14 +97,26 @@ var TextLink = function(_param) {
     var classes = useStyles();
     var isInverse = useIsInverseVariant();
     var formStatus = useForm().formStatus;
+    var analytics = useTheme().analytics;
+    var createDefaultTrackingEvent = function() {
+        if (analytics.eventFormat === "google-analytics-4") {
+            return {
+                name: eventNames.userInteraction,
+                component_type: "link",
+                component_copy: getTextFromChildren(children)
+            };
+        } else {
+            return {
+                category: eventCategories.userInteraction,
+                action: eventActions.linkTapped,
+                label: getTextFromChildren(children)
+            };
+        }
+    };
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
-        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
-            category: eventCategories.userInteraction,
-            action: eventActions.linkTapped,
-            label: getTextFromChildren(children)
-        } : undefined,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         disabled: disabled || formStatus === "sending",
         className: classnames(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children

package/dist-es/theme-context-provider.js

@@ -173,7 +173,8 @@ var ThemeContextProvider = function(param) {
             analytics: _objectSpread({
                 logEvent: function() {
                     return Promise.resolve();
-                }
+                },
+                eventFormat: "universal-analytics"
             }, theme.analytics),
             dimensions: _objectSpread({}, dimensions, theme.dimensions),
             mq: createMediaQueries((_mediaQueries = theme.mediaQueries) !== null && _mediaQueries !== void 0 ? _mediaQueries : mediaQueriesConfig),

package/dist-es/title.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Text1, Text2, Text5 } from "./text";
+import { useTheme } from "./hooks";
+import Inline from "./inline";
+import Box from "./box";
+var TitleLayout = function(param) {
+    var title = param.title, right = param.right;
+    if (!right) {
+        return title;
+    }
+    return /*#__PURE__*/ _jsxs(Inline, {
+        space: "between",
+        alignItems: "baseline",
+        children: [
+            title,
+            /*#__PURE__*/ _jsx(Box, {
+                paddingLeft: 16,
+                children: /*#__PURE__*/ _jsx(Text2, {
+                    regular: true,
+                    children: right
+                })
+            })
+        ]
+    });
+};
+export var Title1 = function(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    var theme = useTheme();
+    return /*#__PURE__*/ _jsx(TitleLayout, {
+        title: /*#__PURE__*/ _jsx(Text1, {
+            color: theme.colors.textSecondary,
+            transform: "uppercase",
+            medium: true,
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};
+export var Title2 = function(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ _jsx(TitleLayout, {
+        title: /*#__PURE__*/ _jsx(Text5, {
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};

package/dist-es/utils/analytics.js

@@ -1,6 +1,11 @@
+// Universal Analytics (legacy)
 export var eventCategories = {
     userInteraction: "user_interaction"
 };
 export var eventActions = {
     linkTapped: "link_tapped"
 };
+// Google analytics 4
+export var eventNames = {
+    userInteraction: "user_interaction"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.7.0",
+    "version": "11.8.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -77,7 +77,7 @@
         "@swc/core": "^1.2.160",
         "@swc/jest": "^0.2.20",
         "@telefonica/acceptance-testing": "^2.7.0",
-        "@telefonica/eslint-config": "^1.0.3",
+        "@telefonica/eslint-config": "^1.0.7",
         "@telefonica/prettier-config": "^1.1.0",
         "@telefonica/ts-to-flow": "1.2.0",
         "@testing-library/jest-dom": "^5.16.3",
@@ -123,7 +123,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^3.4.0",
+        "@tef-novum/webview-bridge": "^3.5.0",
         "@telefonica/libphonenumber": "^2.8.1",
         "classnames": "^2.3.1",
         "jss": "^10.9.0",

package/dist/icons/icon-visibility-off.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-declare type Props = {
-    role?: string;
-    size?: number;
-};
-declare const IconVisibilityOff: React.FC<Props>;
-export default IconVisibilityOff;

package/dist/icons/icon-visibility-off.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
-var IconVisibilityOff = function IconVisibilityOff(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                fill: "#757575",
-                d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
-            })
-        ]
-    });
-};
-var _default = IconVisibilityOff;
-exports.default = _default;

package/dist/icons/icon-visibility-off.js.flow

@@ -1,9 +0,0 @@
-// @flow
-
-import * as React from "react";
-declare type Props = {
-  role?: string,
-  size?: number,
-};
-declare var IconVisibilityOff: React.ComponentType<Props>;
-declare export default typeof IconVisibilityOff;

package/dist/icons/icon-visibility.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-declare type Props = {
-    role?: string;
-    size?: number;
-};
-declare const IconVisibility: React.FC<Props>;
-export default IconVisibility;

package/dist/icons/icon-visibility.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var React = _interopRequireWildcard(require("react"));
-function _interopRequireWildcard(obj) {
-    if (obj && obj.__esModule) {
-        return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
-            }
-        }
-        newObj.default = obj;
-        return newObj;
-    }
-}
-var IconVisibility = function IconVisibility(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                fill: "#757575",
-                d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-            })
-        ]
-    });
-};
-var _default = IconVisibility;
-exports.default = _default;

package/dist/icons/icon-visibility.js.flow

@@ -1,9 +0,0 @@
-// @flow
-
-import * as React from "react";
-declare type Props = {
-  role?: string,
-  size?: number,
-};
-declare var IconVisibility: React.ComponentType<Props>;
-declare export default typeof IconVisibility;

package/dist-es/icons/icon-visibility-off.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-var IconVisibilityOff = function(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ _jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                d: "M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                fill: "#757575",
-                d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
-            })
-        ]
-    });
-};
-export default IconVisibilityOff;

package/dist-es/icons/icon-visibility.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-var IconVisibility = function(param) {
-    var _role = param.role, role = _role === void 0 ? "presentation" : _role, _size = param.size, size = _size === void 0 ? 24 : _size;
-    return /*#__PURE__*/ _jsxs("svg", {
-        role: role,
-        width: size,
-        height: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                fill: "#757575",
-                d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-            })
-        ]
-    });
-};
-export default IconVisibility;