import { jsx as t } from "react/jsx-runtime";
import { classNames as a } from "./index-classNames.js";
import { ComponentContainer as d } from "./index-ComponentContainer.js";
import "react";
import e from "./index-AvatarStack.module.scss.js";
const g = (s) => {
  const {
    items: i = [],
    stackWidth: m = "180px",
    defaultBorderColor: l = "var(--n000)",
    className: c
  } = s, r = 32;
  return t(d, {
    className: a(c, e.container),
    style: {
      width: m
    },
    children: i.map((o, n) => t("div", {
      className: a(e.dot),
      style: {
        height: r
      },
      children: t("div", {
        className: a(e.avatar),
        style: {
          width: r,
          height: r,
          left: -1 * (r / 2),
          border: `2px solid ${o.borderColor ?? l}`
        },
        children: t("img", {
          src: o.image,
          className: a(e.img),
          alt: ""
        })
      })
    }, n))
  });
};
export {
  g as AvatarStack
};
