text: var __defProp = Object.defineProperty;
  var __hasOwnProp = Object.prototype.hasOwnProperty;
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
  var __objSpread = (a, b) => {
    for (var prop in b || (b = {}))
      if (__hasOwnProp.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    if (__getOwnPropSymbols)
      for (var prop of __getOwnPropSymbols(b)) {
        if (__propIsEnum.call(b, prop))
          __defNormalProp(a, prop, b[prop]);
      }
    return a;
  };
  var __objRest = (source, exclude) => {
    var target = {};
    for (var prop in source)
      if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
        target[prop] = source[prop];
    if (source != null && __getOwnPropSymbols)
      for (var prop of __getOwnPropSymbols(source)) {
        if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
          target[prop] = source[prop];
      }
    return target;
  };
  import React, {cloneElement, forwardRef} from "react";
  import styled, {css} from "styled-components";
  import {EMPTY_RECORD} from "../../constants";
  import {getResponsiveProp, rem, responsive} from "../../styles";
  import {childrenToElementArray} from "../helpers";
  import {AvatarCounter} from "./avatarCounter";
  const BASE_STYLES = css`
    white-space: nowrap;
  
    & > div {
      vertical-align: top;
  
      &:not([hidden]) {
        display: inline-block;
      }
    }
  `;
  function avatarStackStyle() {
    return BASE_STYLES;
  }
  function responsiveAvatarStackSizeStyle(props) {
    const {theme} = props;
    const {avatar, media} = theme.sanity;
    return responsive(media, getResponsiveProp(props.size), (size) => {
      const avatarSize = avatar.sizes[size];
      if (!avatarSize)
        return EMPTY_RECORD;
      return {
        "& > div + div": {
          marginLeft: rem(avatarSize.distance)
        }
      };
    });
  }
  const Root = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
  const AvatarStack = forwardRef((props, ref) => {
    const _a = props, {
      children: childrenProp,
      maxLength: maxLengthProp = 4,
      size = 0,
      tone
    } = _a, restProps = __objRest(_a, [
      "children",
      "maxLength",
      "size",
      "tone"
    ]);
    const maxLength = Math.max(maxLengthProp, 0);
    const children = childrenToElementArray(childrenProp).filter((child) => typeof child !== "string");
    const len = children.length;
    const visibleCount = maxLength - 1;
    const extraCount = len - visibleCount;
    const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
    return /* @__PURE__ */ React.createElement(Root, __objSpread(__objSpread({
      "data-ui": "AvatarStack"
    }, restProps), {
      ref,
      size
    }), len === 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AvatarCounter, {
      count: len,
      tone
    })), len !== 0 && extraCount > 1 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AvatarCounter, {
      count: extraCount,
      size,
      tone
    })), visibleChildren.map((child, childIndex) => /* @__PURE__ */ React.createElement("div", {
      key: String(childIndex)
    }, cloneElement(child, {size, tone}))));
  });
  AvatarStack.displayName = "AvatarStack";
  export {
    AvatarStack
  };
  