fannypack-v5/es/Avatar/styles-9548712d.js

An accessible, composable, and friendly React UI Kit

import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import { css } from 'emotion';
import { css as css$1 } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import { theme, palette } from '../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 '../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 '../utils/createComponent.js';
import '../utils/createElement.js';
import '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n    "]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n      width: 100px;\n      height: 100px;\n      font-size: 48px;\n\n      & {\n        ", ";\n      }\n    "]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n      width: 80px;\n      height: 80px;\n      font-size: 36px;\n\n      & {\n        ", ";\n      }\n    "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n      width: 60px;\n      height: 60px;\n      font-size: 24px;\n\n      & {\n        ", ";\n      }\n    "]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n      width: 40px;\n      height: 40px;\n\n      & {\n        ", ";\n      }\n    "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      color: ", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n      border-radius: 50%;\n\n      & {\n        ", ";\n      }\n    "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  width: 60px;\n  height: 60px;\n  overflow: hidden;\n  object-fit: cover;\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var Avatar = function Avatar(styleProps) {
  return css(_templateObject(), styleProps.variant === 'circle' && css$1(_templateObject2(), theme(styleProps.themeKey, "circle.root")(styleProps)), styleProps.initials && css$1(_templateObject3(), palette(styleProps.palette)(styleProps), palette(styleProps.palette + "Inverted")(styleProps)), getSizeAttributes(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};

function getSizeAttributes(styleProps) {
  var sizeAttributes = {
    small: css$1(_templateObject4(), theme(styleProps.themeKey, "css.sizes.small")(styleProps)),
    default: css$1(_templateObject5(), theme(styleProps.themeKey, "css.sizes.default")(styleProps)),
    medium: css$1(_templateObject6(), theme(styleProps.themeKey, "css.sizes.medium")(styleProps)),
    large: css$1(_templateObject7(), theme(styleProps.themeKey, "css.sizes.large")(styleProps))
  };
  return sizeAttributes[styleProps.size] || css$1(_templateObject8(), styleProps.size, styleProps.size);
}

var styles = /*#__PURE__*/Object.freeze({
  Avatar: Avatar
});

export { Avatar as A, styles as s };