@telefonica/mistica 11.8.0 → 11.9.0

package/dist/avatar.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { IconProps } from './utils/types';
+declare type AvatarProps = {
+    size: number;
+    src?: string;
+    initials?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    Icon?: React.FC<IconProps>;
+    badge?: boolean | number;
+    'aria-label'?: string;
+};
+declare const Avatar: ({ size, src, Icon, badge, initials, "aria-label": ariaLabel, ...props }: AvatarProps) => JSX.Element;
+export default Avatar;

package/dist/avatar.js

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _badge = _interopRequireDefault(require("./badge"));
+var _iconUserAccountRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-user-account-regular"));
+var _hooks = require("./hooks");
+var _jss = require("./jss");
+var _themeVariantContext = require("./theme-variant-context");
+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;
+    }
+}
+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 _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 _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;
+}
+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);
+}
+var useStyles = (0, _jss).createUseStyles(function() {
+    return {
+        avatar: {
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: function color(param) {
+                var textColor = param.textColor;
+                return textColor;
+            },
+            background: function background(param) {
+                var backgroundColor = param.backgroundColor;
+                return backgroundColor;
+            },
+            width: function width(param) {
+                var size = param.size;
+                return size;
+            },
+            height: function height(param) {
+                var size = param.size;
+                return size;
+            },
+            overflow: "hidden"
+        },
+        image: {
+            width: function width(param) {
+                var size = param.size;
+                return size;
+            },
+            height: function height(param) {
+                var size = param.size;
+                return size;
+            },
+            objectFit: "cover"
+        }
+    };
+});
+/**
+ * Returns a right/top distance for the badge.
+ * The badge will be placed over the avatar's edge
+ * This is calculated using the `radius * (1 - sin(45deg))` distance minus a
+ * constant offset that depends on the badge size
+ */ var getBadgeDistance = function getBadgeDistance(size, badge) {
+    if (!badge) {
+        return 0;
+    }
+    var radius = size / 2;
+    var badgeOffset = badge === true ? 5 : 10; // badge=true renders a small circle
+    return radius * (1 - Math.sin(Math.PI / 4)) - badgeOffset;
+};
+/**
+ * Not using TextPresets here because we don't want to scale the avatar text with the device settings
+ */ var renderText = function renderText(size, text) {
+    if (!text) {
+        return null;
+    }
+    var fontSize;
+    if (size <= 40) {
+        fontSize = 14;
+    } else if (size <= 64) {
+        fontSize = 16;
+    } else {
+        fontSize = 18;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+        style: {
+            fontSize: fontSize,
+            textTransform: "uppercase"
+        },
+        children: text
+    });
+};
+var Avatar = function Avatar(_param) {
+    var size = _param.size, src = _param.src, _Icon = _param.Icon, Icon = _Icon === void 0 ? _iconUserAccountRegular.default : _Icon, badge = _param.badge, _initials = _param.initials, initials = _initials === void 0 ? "" : _initials, ariaLabel = _param["aria-label"], props = _objectWithoutProperties(_param, [
+        "size",
+        "src",
+        "Icon",
+        "badge",
+        "initials",
+        "aria-label"
+    ]);
+    var colors = (0, _hooks).useTheme().colors;
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var _backgroundColor;
+    var backgroundColor = (_backgroundColor = props.backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : isInverse ? colors.brandDark : colors.tagBackgroundActive;
+    var _textColor;
+    var textColor = (_textColor = props.textColor) !== null && _textColor !== void 0 ? _textColor : isInverse ? colors.textPrimaryInverse : colors.textTagActive;
+    var ref = _slicedToArray(React.useState(false), 2), imgLoadError = ref[0], setImgLoadError = ref[1];
+    var classes = useStyles({
+        textColor: textColor,
+        backgroundColor: backgroundColor,
+        size: size
+    });
+    React.useEffect(function() {
+        setImgLoadError(false); // reset error state when url changes
+    }, [
+        src
+    ]);
+    var letters = initials.trim().slice(0, 2);
+    var badgePosition = getBadgeDistance(size, badge);
+    var badgeValue = badge === true ? undefined : badge || 0;
+    var shouldRenderImage = !!src && !imgLoadError;
+    var iconSize = size <= 40 ? 16 : 24;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_badge.default, {
+        value: badgeValue,
+        top: badgePosition,
+        right: badgePosition,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            className: classes.avatar,
+            role: "img",
+            "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : initials,
+            children: shouldRenderImage ? /*#__PURE__*/ (0, _jsxRuntime).jsx("img", {
+                src: src,
+                className: classes.image,
+                onError: function onError() {
+                    return setImgLoadError(true);
+                },
+                role: "none"
+            }) : renderText(size, letters) || /*#__PURE__*/ (0, _jsxRuntime).jsx(Icon, {
+                size: iconSize,
+                color: "currentColor"
+            })
+        })
+    });
+};
+var _default = Avatar;
+exports.default = _default;

package/dist/avatar.js.flow

@@ -0,0 +1,16 @@
+// @flow
+
+import * as React from "react";
+import type { IconProps } from "./utils/types";
+declare type AvatarProps = {
+  size: number,
+  src?: string,
+  initials?: string,
+  textColor?: string,
+  backgroundColor?: string,
+  Icon?: React.ComponentType<IconProps>,
+  badge?: boolean | number,
+  "aria-label"?: string,
+};
+declare var Avatar: (x: AvatarProps) => React.Node;
+declare export default typeof Avatar;

package/dist/badge.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 declare type Props = {
     children?: React.ReactNode;
     value?: number;
+    right?: number;
+    top?: number;
 };
 /**
  * This Component is decorative and won't be read by screenreaders, to make it accessible,

package/dist/badge.js

@@ -57,8 +57,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 var hasChildren = param.hasChildren;
                 return hasChildren ? "absolute" : "static";
             },
-            top: -2,
-            right: -6,
+            top: function top(param) {
+                var top1 = param.top;
+                return top1 !== null && top1 !== void 0 ? top1 : -2;
+            },
+            right: function right(param) {
+                var right1 = param.right;
+                return right1 !== null && right1 !== void 0 ? right1 : -6;
+            },
             width: 8,
             height: 8,
             background: theme.colors.badge,
@@ -69,8 +75,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            top: -8,
-            right: -9,
+            top: function top(param) {
+                var top2 = param.top;
+                return top2 !== null && top2 !== void 0 ? top2 : -8;
+            },
+            right: function right(param) {
+                var right2 = param.right;
+                return right2 !== null && right2 !== void 0 ? right2 : -9;
+            },
             width: 18,
             height: 18,
             fontSize: 12,
@@ -78,7 +90,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             color: theme.colors.textPrimaryInverse
         },
         badgeBigNumber: {
-            right: -14,
+            right: function right(param) {
+                var right3 = param.right;
+                return right3 !== null && right3 !== void 0 ? right3 : -14;
+            },
             width: 24,
             borderRadius: 24
         }
@@ -94,10 +109,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
  *   </IconButton>
  * </Badge>
  */ var Badge = function Badge(param) {
-    var children = param.children, value = param.value;
+    var children = param.children, value = param.value, right = param.right, top = param.top;
     var hasChildren = !!children;
     var classes = useStyles({
-        hasChildren: hasChildren
+        hasChildren: hasChildren,
+        right: right,
+        top: top
     });
     if (children && value === 0) {
         return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {

package/dist/badge.js.flow

@@ -4,6 +4,8 @@ import * as React from "react";
 declare type Props = {
   children?: React.Node,
   value?: number,
+  right?: number,
+  top?: number,
 };
 /**
  * This Component is decorative and won't be read by screenreaders, to make it accessible,

package/dist/index.d.ts

@@ -37,8 +37,8 @@ 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 { Placeholder } from './placeholder';
 export { Title1, Title2 } from './title';
-export { Placeholder, AvatarPlaceholder } from './placeholder';
 export { RowList, Row, BoxedRowList, BoxedRow } from './list';
 export { default as Switch } from './switch-component';
 export { default as Checkbox } from './checkbox';
@@ -55,6 +55,7 @@ export { default as Menu } from './menu';
 export { default as EmptyState } from './empty-state';
 export { default as EmptyStateCard } from './empty-state-card';
 export { default as Callout } from './callout';
+export { default as Avatar } from './avatar';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo, } from './navigation-bar';
 export { default as Image } from './image';

package/dist/index.js

@@ -374,28 +374,22 @@ Object.defineProperty(exports, "SectionTitle", {
         return _sectionTitle.default;
     }
 });
-Object.defineProperty(exports, "Title1", {
-    enumerable: true,
-    get: function() {
-        return _title.Title1;
-    }
-});
-Object.defineProperty(exports, "Title2", {
+Object.defineProperty(exports, "Placeholder", {
     enumerable: true,
     get: function() {
-        return _title.Title2;
+        return _placeholder.Placeholder;
     }
 });
-Object.defineProperty(exports, "Placeholder", {
+Object.defineProperty(exports, "Title1", {
     enumerable: true,
     get: function() {
-        return _placeholder.Placeholder;
+        return _title.Title1;
     }
 });
-Object.defineProperty(exports, "AvatarPlaceholder", {
+Object.defineProperty(exports, "Title2", {
     enumerable: true,
     get: function() {
-        return _placeholder.AvatarPlaceholder;
+        return _title.Title2;
     }
 });
 Object.defineProperty(exports, "RowList", {
@@ -524,6 +518,12 @@ Object.defineProperty(exports, "Callout", {
         return _callout.default;
     }
 });
+Object.defineProperty(exports, "Avatar", {
+    enumerable: true,
+    get: function() {
+        return _avatar.default;
+    }
+});
 Object.defineProperty(exports, "useModalState", {
     enumerable: true,
     get: function() {
@@ -10780,8 +10780,8 @@ 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 _title = require("./title");
 var _list = require("./list");
 var _switchComponent = _interopRequireDefault(require("./switch-component"));
 var _checkbox = _interopRequireDefault(require("./checkbox"));
@@ -10798,6 +10798,7 @@ var _menu = _interopRequireDefault(require("./menu"));
 var _emptyState = _interopRequireDefault(require("./empty-state"));
 var _emptyStateCard = _interopRequireDefault(require("./empty-state-card"));
 var _callout = _interopRequireDefault(require("./callout"));
+var _avatar = _interopRequireDefault(require("./avatar"));
 var _modalContextProvider = require("./modal-context-provider");
 var _navigationBar = require("./navigation-bar");
 var _image = _interopRequireDefault(require("./image"));

package/dist/index.js.flow

@@ -73,8 +73,8 @@ declare export {
 declare export { default as Tag } from "./tag";
 export type { TagType } from "./tag";
 declare export { default as SectionTitle } from "./section-title";
+declare export { Placeholder } from "./placeholder";
 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";
 declare export { default as Checkbox } from "./checkbox";
@@ -91,6 +91,7 @@ declare export { default as Menu } from "./menu";
 declare export { default as EmptyState } from "./empty-state";
 declare export { default as EmptyStateCard } from "./empty-state-card";
 declare export { default as Callout } from "./callout";
+declare export { default as Avatar } from "./avatar";
 declare export { useModalState } from "./modal-context-provider";
 declare export {
   NavigationBar,

package/dist/package-version.js

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

package/dist/placeholder.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-declare type AvatarPlaceholderProps = {
-    size?: string | number;
-};
-export declare const AvatarPlaceholder: React.FC<AvatarPlaceholderProps>;
 declare type PlaceholderProps = {
     width?: string | number;
     height?: string | number;

package/dist/placeholder.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.Placeholder = exports.AvatarPlaceholder = void 0;
+exports.Placeholder = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _color = require("./utils/color");
@@ -28,18 +28,6 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
-var AvatarPlaceholder = function AvatarPlaceholder(param) {
-    var _size = param.size, size = _size === void 0 ? "100%" : _size;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        style: {
-            width: size,
-            height: size,
-            borderRadius: "50%",
-            background: "gray"
-        }
-    });
-};
-exports.AvatarPlaceholder = AvatarPlaceholder;
 var Placeholder = function Placeholder(param) {
     var _width = param.width, width = _width === void 0 ? "auto" : _width, _height = param.height, height = _height === void 0 ? 120 : _height;
     var colors = (0, _hooks).useTheme().colors;

package/dist/placeholder.js.flow

@@ -1,10 +1,6 @@
 // @flow
 
 import * as React from "react";
-declare type AvatarPlaceholderProps = {
-  size?: string | number,
-};
-declare export var AvatarPlaceholder: React.ComponentType<AvatarPlaceholderProps>;
 declare type PlaceholderProps = {
   width?: string | number,
   height?: string | number,

package/dist/text.js

@@ -133,8 +133,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function wordBreak(param) {
-                var truncate = param.truncate;
-                return truncate === 1 || truncate === true ? "break-all" : "normal";
+                var wordBreak1 = param.wordBreak;
+                return wordBreak1 ? "break-all" : "normal";
+            },
+            "@supports (overflow-wrap: anywhere)": {
+                wordBreak: function wordBreak(param) {
+                    var truncate = param.truncate;
+                    return truncate === 1 || truncate === true ? "break-all" : "normal";
+                }
             },
             display: "box",
             boxOrient: "vertical",

package/dist-es/avatar.js

@@ -0,0 +1,208 @@
+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 _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 _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;
+}
+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";
+// https://www.figma.com/file/U4ipIXOk64bdM5tSvaqPKS/%5BREADY%5D--Avatar?node-id=2%3A61
+import * as React from "react";
+import Badge from "./badge";
+import IconUserAccountRegular from "./generated/mistica-icons/icon-user-account-regular";
+import { useTheme } from "./hooks";
+import { createUseStyles } from "./jss";
+import { useIsInverseVariant } from "./theme-variant-context";
+var useStyles = createUseStyles(function() {
+    return {
+        avatar: {
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: function(param) {
+                var textColor = param.textColor;
+                return textColor;
+            },
+            background: function(param) {
+                var backgroundColor = param.backgroundColor;
+                return backgroundColor;
+            },
+            width: function(param) {
+                var size = param.size;
+                return size;
+            },
+            height: function(param) {
+                var size = param.size;
+                return size;
+            },
+            overflow: "hidden"
+        },
+        image: {
+            width: function(param) {
+                var size = param.size;
+                return size;
+            },
+            height: function(param) {
+                var size = param.size;
+                return size;
+            },
+            objectFit: "cover"
+        }
+    };
+});
+/**
+ * Returns a right/top distance for the badge.
+ * The badge will be placed over the avatar's edge
+ * This is calculated using the `radius * (1 - sin(45deg))` distance minus a
+ * constant offset that depends on the badge size
+ */ var getBadgeDistance = function(size, badge) {
+    if (!badge) {
+        return 0;
+    }
+    var radius = size / 2;
+    var badgeOffset = badge === true ? 5 : 10; // badge=true renders a small circle
+    return radius * (1 - Math.sin(Math.PI / 4)) - badgeOffset;
+};
+/**
+ * Not using TextPresets here because we don't want to scale the avatar text with the device settings
+ */ var renderText = function(size, text) {
+    if (!text) {
+        return null;
+    }
+    var fontSize;
+    if (size <= 40) {
+        fontSize = 14;
+    } else if (size <= 64) {
+        fontSize = 16;
+    } else {
+        fontSize = 18;
+    }
+    return /*#__PURE__*/ _jsx("span", {
+        style: {
+            fontSize: fontSize,
+            textTransform: "uppercase"
+        },
+        children: text
+    });
+};
+var Avatar = function(_param) {
+    var size = _param.size, src = _param.src, _Icon = _param.Icon, Icon = _Icon === void 0 ? IconUserAccountRegular : _Icon, badge = _param.badge, _initials = _param.initials, initials = _initials === void 0 ? "" : _initials, ariaLabel = _param["aria-label"], props = _objectWithoutProperties(_param, [
+        "size",
+        "src",
+        "Icon",
+        "badge",
+        "initials",
+        "aria-label"
+    ]);
+    var colors = useTheme().colors;
+    var isInverse = useIsInverseVariant();
+    var _backgroundColor;
+    var backgroundColor = (_backgroundColor = props.backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : isInverse ? colors.brandDark : colors.tagBackgroundActive;
+    var _textColor;
+    var textColor = (_textColor = props.textColor) !== null && _textColor !== void 0 ? _textColor : isInverse ? colors.textPrimaryInverse : colors.textTagActive;
+    var ref = _slicedToArray(React.useState(false), 2), imgLoadError = ref[0], setImgLoadError = ref[1];
+    var classes = useStyles({
+        textColor: textColor,
+        backgroundColor: backgroundColor,
+        size: size
+    });
+    React.useEffect(function() {
+        setImgLoadError(false); // reset error state when url changes
+    }, [
+        src
+    ]);
+    var letters = initials.trim().slice(0, 2);
+    var badgePosition = getBadgeDistance(size, badge);
+    var badgeValue = badge === true ? undefined : badge || 0;
+    var shouldRenderImage = !!src && !imgLoadError;
+    var iconSize = size <= 40 ? 16 : 24;
+    return /*#__PURE__*/ _jsx(Badge, {
+        value: badgeValue,
+        top: badgePosition,
+        right: badgePosition,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: classes.avatar,
+            role: "img",
+            "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : initials,
+            children: shouldRenderImage ? /*#__PURE__*/ _jsx("img", {
+                src: src,
+                className: classes.image,
+                onError: function() {
+                    return setImgLoadError(true);
+                },
+                role: "none"
+            }) : renderText(size, letters) || /*#__PURE__*/ _jsx(Icon, {
+                size: iconSize,
+                color: "currentColor"
+            })
+        })
+    });
+};
+export default Avatar;

package/dist-es/badge.js

@@ -26,8 +26,14 @@ var useStyles = createUseStyles(function(theme) {
                 var hasChildren = param.hasChildren;
                 return hasChildren ? "absolute" : "static";
             },
-            top: -2,
-            right: -6,
+            top: function(param) {
+                var top = param.top;
+                return top !== null && top !== void 0 ? top : -2;
+            },
+            right: function(param) {
+                var right = param.right;
+                return right !== null && right !== void 0 ? right : -6;
+            },
             width: 8,
             height: 8,
             background: theme.colors.badge,
@@ -38,8 +44,14 @@ var useStyles = createUseStyles(function(theme) {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            top: -8,
-            right: -9,
+            top: function(param) {
+                var top = param.top;
+                return top !== null && top !== void 0 ? top : -8;
+            },
+            right: function(param) {
+                var right = param.right;
+                return right !== null && right !== void 0 ? right : -9;
+            },
             width: 18,
             height: 18,
             fontSize: 12,
@@ -47,7 +59,10 @@ var useStyles = createUseStyles(function(theme) {
             color: theme.colors.textPrimaryInverse
         },
         badgeBigNumber: {
-            right: -14,
+            right: function(param) {
+                var right = param.right;
+                return right !== null && right !== void 0 ? right : -14;
+            },
             width: 24,
             borderRadius: 24
         }
@@ -63,10 +78,12 @@ var useStyles = createUseStyles(function(theme) {
  *   </IconButton>
  * </Badge>
  */ var Badge = function(param) {
-    var children = param.children, value = param.value;
+    var children = param.children, value = param.value, right = param.right, top = param.top;
     var hasChildren = !!children;
     var classes = useStyles({
-        hasChildren: hasChildren
+        hasChildren: hasChildren,
+        right: right,
+        top: top
     });
     if (children && value === 0) {
         return /*#__PURE__*/ _jsx(_Fragment, {

package/dist-es/index.js

@@ -36,8 +36,8 @@ 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 { Placeholder } from "./placeholder";
 export { Title1, Title2 } from "./title";
-export { Placeholder, AvatarPlaceholder } from "./placeholder";
 export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
 export { default as Switch } from "./switch-component";
 export { default as Checkbox } from "./checkbox";
@@ -54,6 +54,7 @@ export { default as Menu } from "./menu";
 export { default as EmptyState } from "./empty-state";
 export { default as EmptyStateCard } from "./empty-state-card";
 export { default as Callout } from "./callout";
+export { default as Avatar } from "./avatar";
 export { useModalState } from "./modal-context-provider";
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from "./navigation-bar";
 export { default as Image } from "./image";

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.8.0";
+export var PACKAGE_VERSION = "11.9.0";

package/dist-es/placeholder.js

@@ -2,17 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { applyAlpha } from "./utils/color";
 import { useTheme } from "./hooks";
-export var AvatarPlaceholder = function(param) {
-    var _size = param.size, size = _size === void 0 ? "100%" : _size;
-    return /*#__PURE__*/ _jsx("div", {
-        style: {
-            width: size,
-            height: size,
-            borderRadius: "50%",
-            background: "gray"
-        }
-    });
-};
 export var Placeholder = function(param) {
     var _width = param.width, width = _width === void 0 ? "auto" : _width, _height = param.height, height = _height === void 0 ? 120 : _height;
     var colors = useTheme().colors;

package/dist-es/text.js

@@ -101,8 +101,14 @@ var useStyles = createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function(param) {
-                var truncate = param.truncate;
-                return truncate === 1 || truncate === true ? "break-all" : "normal";
+                var wordBreak = param.wordBreak;
+                return wordBreak ? "break-all" : "normal";
+            },
+            "@supports (overflow-wrap: anywhere)": {
+                wordBreak: function(param) {
+                    var truncate = param.truncate;
+                    return truncate === 1 || truncate === true ? "break-all" : "normal";
+                }
             },
             display: "box",
             boxOrient: "vertical",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.8.0",
+    "version": "11.9.0",
     "license": "MIT",
     "repository": {
         "type": "git",