fannypack-v5/es/Avatar/Avatar.js

An accessible, composable, and friendly React UI Kit

import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { _ as _objectSpread2 } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import { Box as Box$1 } from 'reakit';
import '../Box/styles-579aeb3a.js';
import { Box } from '../Box/Box.js';
import { A as Avatar$1 } from './styles-9548712d.js';
import '../Image/styles-a8e7e303.js';
import { Image } from '../Image/Image.js';

var useProps = createHook(function (props, _ref) {
  if (props === void 0) {
    props = {};
  }

  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;
  var imageProps = Image.useProps(_objectSpread2({}, props), {
    themeKey: 'Avatar'
  });
  var className = useClassName({
    style: Avatar$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: imageProps.className
  });
  var children;

  if (props.initials) {
    children = props.initials.split(' ').length === 2 ? props.initials.match(/\b\w/g) : props.initials.substring(0, 2);
  }

  return _objectSpread2(_objectSpread2({}, imageProps), {}, {
    className: className,
    children: children
  });
}, {
  defaultProps: {
    size: 'default'
  },
  themeKey: 'Avatar'
});
var Avatar = createComponent(function (props) {
  var imageProps = useProps(props);
  var use = props.use;

  if (props.initials) {
    use = Box;
  }

  return createElement({
    component: Box$1,
    use: use,
    htmlProps: imageProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'Avatar'
  },
  defaultProps: {
    use: 'img'
  },
  themeKey: 'Avatar'
});

export { Avatar };