{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.tsx"],
  "sourcesContent": ["import { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\n\n/** @public */\nexport interface TLUiPeopleMenuFacePileProps {\n\tuserIds: string[]\n\tuserName: string\n\tuserColor: string\n}\n\n/** @public @react */\nexport function DefaultPeopleMenuFacePile({\n\tuserIds,\n\tuserName,\n\tuserColor,\n}: TLUiPeopleMenuFacePileProps) {\n\tconst { PeopleMenuAvatar } = useTldrawUiComponents()\n\n\tconst breakpoint = useBreakpoint()\n\tconst maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5\n\n\treturn (\n\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t{PeopleMenuAvatar &&\n\t\t\t\tuserIds\n\t\t\t\t\t.slice(-maxAvatars)\n\t\t\t\t\t.map((userId) => <PeopleMenuAvatar key={userId} userId={userId} />)}\n\t\t\t{userIds.length > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{userIds.length > maxAvatars && (\n\t\t\t\t<div className=\"tlui-people-menu__avatar tlui-people-menu__more\">\n\t\t\t\t\t{Math.abs(userIds.length - maxAvatars)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n"],
  "mappings": "AAuBE,SAIoB,KAJpB;AAvBF,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAU/B,SAAS,0BAA0B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,EAAE,iBAAiB,IAAI,sBAAsB;AAEnD,QAAM,aAAa,cAAc;AACjC,QAAM,aAAa,cAAc,oBAAoB,YAAY,IAAI;AAErE,SACC,qBAAC,SAAI,WAAU,6BACb;AAAA,wBACA,QACE,MAAM,CAAC,UAAU,EACjB,IAAI,CAAC,WAAW,oBAAC,oBAA8B,UAAR,MAAwB,CAAE;AAAA,IACnE,QAAQ,SAAS,KACjB;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO;AAAA,UACN,iBAAiB;AAAA,QAClB;AAAA,QAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,IACnB;AAAA,IAEA,QAAQ,SAAS,cACjB,oBAAC,SAAI,WAAU,mDACb,eAAK,IAAI,QAAQ,SAAS,UAAU,GACtC;AAAA,KAEF;AAEF;",
  "names": []
}