@instructure/ui-avatar 11.6.0 → 11.6.1-snapshot-129

package/es/Avatar/v2/index.js

@@ -0,0 +1,168 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useStyle } from '@instructure/emotion';
+import { useState, useEffect, forwardRef } from 'react';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { renderIconWithProps } from '@instructure/ui-icons';
+import { avatarSizeToIconSize } from "./props.js";
+import generateStyle from "./styles.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const ICON_COLOR_MAP = {
+  accent1: 'accentBlueColor',
+  accent2: 'accentGreenColor',
+  accent3: 'accentRedColor',
+  accent4: 'accentOrangeColor',
+  accent5: 'accentGreyColor',
+  accent6: 'accentAshColor',
+  ai: 'onColor'
+};
+
+/**
+---
+category: components
+---
+**/
+const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
+  const _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'accent1' : _props$color,
+    _props$hasInverseColo = props.hasInverseColor,
+    hasInverseColor = _props$hasInverseColo === void 0 ? false : _props$hasInverseColo,
+    _props$showBorder = props.showBorder,
+    showBorder = _props$showBorder === void 0 ? 'auto' : _props$showBorder,
+    _props$shape = props.shape,
+    shape = _props$shape === void 0 ? 'circle' : _props$shape,
+    _props$display = props.display,
+    display = _props$display === void 0 ? 'inline' : _props$display,
+    _props$onImageLoaded = props.onImageLoaded,
+    onImageLoaded = _props$onImageLoaded === void 0 ? _event => {} : _props$onImageLoaded,
+    src = props.src,
+    name = props.name,
+    renderIcon = props.renderIcon,
+    alt = props.alt,
+    themeOverride = props.themeOverride,
+    margin = props.margin;
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    params: {
+      loaded,
+      size,
+      color,
+      hasInverseColor,
+      shape,
+      src,
+      showBorder,
+      display,
+      margin
+    },
+    componentId: 'Avatar',
+    displayName: 'Avatar'
+  });
+  useEffect(() => {
+    // in case the image is unset in an update, show icons/initials again
+    if (loaded && !src) {
+      setLoaded(false);
+    }
+    // Image already loaded (common in SSR)
+    //TODO-rework make this work
+    // if (src && !loaded && imgRef.current && imgRef.current.complete) {
+    //   setLoaded(true)
+    //   onImageLoaded?.()
+    // }
+  }, [loaded, src]);
+  const makeInitialsFromName = () => {
+    if (!name || typeof name !== 'string' || name.trim().length === 0) {
+      return;
+    }
+    const currentName = name.trim();
+    if (currentName.match(/\s+/)) {
+      const names = currentName.split(/\s+/);
+      return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+    } else {
+      return currentName[0].toUpperCase();
+    }
+  };
+  const renderInitials = () => {
+    return _jsx("span", {
+      "aria-hidden": "true",
+      children: makeInitialsFromName()
+    });
+  };
+  const renderImage = () => _jsx("img", {
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: 'center',
+      ...(loaded ? {} : {
+        display: 'none'
+      })
+    },
+    src: src,
+    alt: alt ? alt : '',
+    onLoad: event => {
+      setLoaded(true);
+      onImageLoaded(event);
+    }
+  });
+  const renderContent = () => {
+    //image in avatar - prioritize image over icon
+    if (src) {
+      return _jsxs(_Fragment, {
+        children: [renderImage(), loaded ? null : renderInitials()]
+      });
+    }
+
+    //icon in avatar
+    if (renderIcon) {
+      const iconSize = avatarSizeToIconSize[size];
+      const iconColor = hasInverseColor ? 'onColor' : ICON_COLOR_MAP[color];
+      return renderIconWithProps(renderIcon, iconSize, iconColor);
+    }
+
+    //initials in avatar
+    return renderInitials();
+  };
+  return _jsx("div", {
+    ...passthroughProps({
+      ...props
+    }),
+    ref: ref,
+    "aria-label": alt ? alt : void 0,
+    role: alt ? 'img' : void 0,
+    css: styles === null || styles === void 0 ? void 0 : styles.avatar,
+    children: renderContent()
+  });
+});
+Avatar.displayName = 'Avatar';
+export default Avatar;
+export { Avatar };

package/es/Avatar/v2/props.js

@@ -0,0 +1,35 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const avatarSizeToIconSize = {
+  'xx-small': 'xs',
+  'x-small': 'xs',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  'x-large': 'xl',
+  'xx-large': '2xl'
+};
+const allowedProps = ['name', 'src', 'alt', 'size', 'color', 'hasInverseColor', 'shape', 'margin', 'display', 'onImageLoaded', 'renderIcon', 'showBorder'];
+export { allowedProps, avatarSizeToIconSize };

package/es/Avatar/v2/styles.js

@@ -0,0 +1,166 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { calcSpacingFromShorthand } from '@instructure/emotion';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, sharedTokens) => {
+  const loaded = params.loaded,
+    size = params.size,
+    color = params.color,
+    hasInverseColor = params.hasInverseColor,
+    shape = params.shape,
+    showBorder = params.showBorder,
+    display = params.display,
+    margin = params.margin;
+  const sizeStyles = {
+    'xx-small': {
+      fontSize: componentTheme.fontSize2xs,
+      borderWidth: componentTheme.borderWidthSm,
+      width: componentTheme.size2xs,
+      height: componentTheme.size2xs
+    },
+    'x-small': {
+      fontSize: componentTheme.fontSizeXs,
+      borderWidth: componentTheme.borderWidthSm,
+      width: componentTheme.sizeXs,
+      height: componentTheme.sizeXs
+    },
+    small: {
+      fontSize: componentTheme.fontSizeSm,
+      borderWidth: componentTheme.borderWidthSm,
+      width: componentTheme.sizeSm,
+      height: componentTheme.sizeSm
+    },
+    medium: {
+      fontSize: componentTheme.fontSizeMd,
+      borderWidth: componentTheme.borderWidthMd,
+      width: componentTheme.sizeMd,
+      height: componentTheme.sizeMd
+    },
+    large: {
+      fontSize: componentTheme.fontSizeLg,
+      borderWidth: componentTheme.borderWidthMd,
+      width: componentTheme.sizeLg,
+      height: componentTheme.sizeLg
+    },
+    'x-large': {
+      fontSize: componentTheme.fontSizeXl,
+      borderWidth: componentTheme.borderWidthMd,
+      width: componentTheme.sizeXl,
+      height: componentTheme.sizeXl
+    },
+    'xx-large': {
+      fontSize: componentTheme.fontSize2xl,
+      borderWidth: componentTheme.borderWidthMd,
+      width: componentTheme.size2xl,
+      height: componentTheme.size2xl
+    }
+  };
+  const colorVariants = {
+    accent1: {
+      text: componentTheme.blueTextColor,
+      background: componentTheme.blueBackgroundColor
+    },
+    accent2: {
+      text: componentTheme.greenTextColor,
+      background: componentTheme.greenBackgroundColor
+    },
+    accent3: {
+      text: componentTheme.redTextColor,
+      background: componentTheme.redBackgroundColor
+    },
+    accent4: {
+      text: componentTheme.orangeTextColor,
+      background: componentTheme.orangeBackgroundColor
+    },
+    accent5: {
+      text: componentTheme.greyTextColor,
+      background: componentTheme.greyBackgroundColor
+    },
+    accent6: {
+      text: componentTheme.ashTextColor,
+      background: componentTheme.ashBackgroundColor
+    },
+    ai: {
+      text: componentTheme.textOnColor,
+      background: `linear-gradient(135deg, ${componentTheme.aiTopGradientColor} 0%, ${componentTheme.aiBottomGradientColor} 100%)`
+    }
+  };
+  const getBorder = () => {
+    if (showBorder === 'never') {
+      return 'none';
+    }
+    if (showBorder === 'always') {
+      return 'solid';
+    }
+    //if none of the above, so auto
+    if (hasInverseColor || color === 'ai') {
+      return 'none';
+    }
+    return 'solid';
+  };
+  return {
+    avatar: {
+      label: 'avatar',
+      boxSizing: 'border-box',
+      border: getBorder(),
+      borderRadius: shape === 'circle' ? '50%' : 0,
+      ...sizeStyles[size],
+      background: hasInverseColor || color === 'ai' ? colorVariants[color].background : componentTheme.backgroundColor,
+      display: display === 'inline' ? 'inline-flex' : 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'middle',
+      color: hasInverseColor ? componentTheme.textOnColor : colorVariants[color].text,
+      borderColor: componentTheme.borderColor,
+      fontWeight: componentTheme.fontWeight,
+      overflow: 'hidden',
+      // TODO handle the merging on tokens inside the util
+      margin: calcSpacingFromShorthand(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      })
+    },
+    image: {
+      label: 'avatar__image',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: 'center',
+      ...(loaded ? {} : {
+        display: 'none'
+      })
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Avatar } from "./Avatar/index.js";
+export { Avatar } from "../Avatar/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Avatar } from './Avatar'
-export type { AvatarProps } from './Avatar/props'
+export { Avatar } from "../Avatar/v2/index.js";

package/lib/Avatar/{index.js → v1/index.js}

@@ -8,7 +8,7 @@ exports.default = exports.Avatar = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _emotion = require("@instructure/emotion");
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _styles = _interopRequireDefault(require("./styles"));
@@ -65,7 +65,7 @@ category: components
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     loaded = _useState2[0],
     setLoaded = _useState2[1];
-  const styles = (0, _emotion.useStyle)({
+  const styles = (0, _emotion.useStyleLegacy)({
     generateStyle: _styles.default,
     generateComponentTheme: _theme.default,
     params: {
@@ -127,7 +127,7 @@ category: components
       children: (0, _callRenderProp.callRenderProp)(renderIcon)
     });
   };
-  return (0, _jsxRuntime.jsxs)(_View.View, {
+  return (0, _jsxRuntime.jsxs)(_v11_.View, {
     ...(0, _passthroughProps.passthroughProps)({
       size,
       color,

package/lib/Avatar/v2/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Avatar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _emotion = require("@instructure/emotion");
+var _react = require("react");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _renderIconWithProps = require("@instructure/ui-icons/lib/IconPropsProvider/renderIconWithProps.js");
+var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const ICON_COLOR_MAP = {
+  accent1: 'accentBlueColor',
+  accent2: 'accentGreenColor',
+  accent3: 'accentRedColor',
+  accent4: 'accentOrangeColor',
+  accent5: 'accentGreyColor',
+  accent6: 'accentAshColor',
+  ai: 'onColor'
+};
+
+/**
+---
+category: components
+---
+**/
+const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'accent1' : _props$color,
+    _props$hasInverseColo = props.hasInverseColor,
+    hasInverseColor = _props$hasInverseColo === void 0 ? false : _props$hasInverseColo,
+    _props$showBorder = props.showBorder,
+    showBorder = _props$showBorder === void 0 ? 'auto' : _props$showBorder,
+    _props$shape = props.shape,
+    shape = _props$shape === void 0 ? 'circle' : _props$shape,
+    _props$display = props.display,
+    display = _props$display === void 0 ? 'inline' : _props$display,
+    _props$onImageLoaded = props.onImageLoaded,
+    onImageLoaded = _props$onImageLoaded === void 0 ? _event => {} : _props$onImageLoaded,
+    src = props.src,
+    name = props.name,
+    renderIcon = props.renderIcon,
+    alt = props.alt,
+    themeOverride = props.themeOverride,
+    margin = props.margin;
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
+  const styles = (0, _emotion.useStyle)({
+    generateStyle: _styles.default,
+    themeOverride,
+    params: {
+      loaded,
+      size,
+      color,
+      hasInverseColor,
+      shape,
+      src,
+      showBorder,
+      display,
+      margin
+    },
+    componentId: 'Avatar',
+    displayName: 'Avatar'
+  });
+  (0, _react.useEffect)(() => {
+    // in case the image is unset in an update, show icons/initials again
+    if (loaded && !src) {
+      setLoaded(false);
+    }
+    // Image already loaded (common in SSR)
+    //TODO-rework make this work
+    // if (src && !loaded && imgRef.current && imgRef.current.complete) {
+    //   setLoaded(true)
+    //   onImageLoaded?.()
+    // }
+  }, [loaded, src]);
+  const makeInitialsFromName = () => {
+    if (!name || typeof name !== 'string' || name.trim().length === 0) {
+      return;
+    }
+    const currentName = name.trim();
+    if (currentName.match(/\s+/)) {
+      const names = currentName.split(/\s+/);
+      return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+    } else {
+      return currentName[0].toUpperCase();
+    }
+  };
+  const renderInitials = () => {
+    return (0, _jsxRuntime.jsx)("span", {
+      "aria-hidden": "true",
+      children: makeInitialsFromName()
+    });
+  };
+  const renderImage = () => (0, _jsxRuntime.jsx)("img", {
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: 'center',
+      ...(loaded ? {} : {
+        display: 'none'
+      })
+    },
+    src: src,
+    alt: alt ? alt : '',
+    onLoad: event => {
+      setLoaded(true);
+      onImageLoaded(event);
+    }
+  });
+  const renderContent = () => {
+    //image in avatar - prioritize image over icon
+    if (src) {
+      return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [renderImage(), loaded ? null : renderInitials()]
+      });
+    }
+
+    //icon in avatar
+    if (renderIcon) {
+      const iconSize = _props.avatarSizeToIconSize[size];
+      const iconColor = hasInverseColor ? 'onColor' : ICON_COLOR_MAP[color];
+      return (0, _renderIconWithProps.renderIconWithProps)(renderIcon, iconSize, iconColor);
+    }
+
+    //initials in avatar
+    return renderInitials();
+  };
+  return (0, _jsxRuntime.jsx)("div", {
+    ...(0, _passthroughProps.passthroughProps)({
+      ...props
+    }),
+    ref: ref,
+    "aria-label": alt ? alt : void 0,
+    role: alt ? 'img' : void 0,
+    css: styles === null || styles === void 0 ? void 0 : styles.avatar,
+    children: renderContent()
+  });
+});
+Avatar.displayName = 'Avatar';
+var _default = exports.default = Avatar;

package/lib/Avatar/v2/props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatarSizeToIconSize = exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const avatarSizeToIconSize = exports.avatarSizeToIconSize = {
+  'xx-small': 'xs',
+  'x-small': 'xs',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  'x-large': 'xl',
+  'xx-large': '2xl'
+};
+const allowedProps = exports.allowedProps = ['name', 'src', 'alt', 'size', 'color', 'hasInverseColor', 'shape', 'margin', 'display', 'onImageLoaded', 'renderIcon', 'showBorder'];