@geezee/react-ui/esm/avatar/avatar-group.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
var defaultProps = {
  className: ''
};

var AvatarGroup = function AvatarGroup(_ref) {
  var count = _ref.count,
      className = _ref.className,
      children = _ref.children;
  var theme = useTheme();
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["969540715", [theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + "avatar-group ".concat(className)
  }, children, count && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["969540715", [theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + "count"
  }, "+", count), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "969540715",
    dynamic: [theme.layout.gapQuarter, theme.palette.accents_7]
  }, ".avatar-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content;}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-0.625rem;}.count.__jsx-style-dynamic-selector{font-size:0.875rem;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:".concat(theme.layout.gapQuarter, ";color:").concat(theme.palette.accents_7, ";}")));
};

export default withDefaults(AvatarGroup, defaultProps);