@activecollab/components 1.0.242 → 1.0.243

package/dist/esm/components/MultiAvatar/MultiAvatar.js

@@ -1,12 +1,39 @@
 import React, { useCallback, useMemo } from "react";
 import { StyledMultiAvatar, StyledMultiAvatarInner } from "./Styles";
+/**
+ * @component MultiAvatar
+ * @description
+ * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+ *
+ * @prop {url} - The image urls of the MultiAvatar.
+ * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.
+ * @prop {alt} - alt attributes of the imgs.
+ *
+ * @example
+ * <MultiAvatar
+ *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
+ *  alt={["Profile picture of John", "Profile picture of Sarah"]} />
+ *
+ * @example
+ * <MultiAvatar
+ *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
+ *  alt={["Profile picture of John", "Profile picture of Sarah"]}
+ * >
+ *  <Badge />
+ * </MultiAvatar>
+ *
+ * @see
+ * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
+ * @see
+ * https://design.activecollab.com/docs/components/avatar
+ */
 export var MultiAvatar = function MultiAvatar(_ref) {
   var url = _ref.url,
-    _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? "Avatar Image" : _ref$alt,
+    alt = _ref.alt,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 24 : _ref$size,
-    className = _ref.className;
+    className = _ref.className,
+    children = _ref.children;
   var setSize = useCallback(function (i) {
     switch (url.length) {
       case 1:
@@ -44,7 +71,9 @@ export var MultiAvatar = function MultiAvatar(_ref) {
     }
     return url;
   }, [url]);
-  return /*#__PURE__*/React.createElement(StyledMultiAvatar, {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "tw-relative tw-inline-flex"
+  }, /*#__PURE__*/React.createElement(StyledMultiAvatar, {
     style: {
       width: size + "px",
       height: size + "px"
@@ -58,11 +87,11 @@ export var MultiAvatar = function MultiAvatar(_ref) {
       key: "avatar_" + i
     }, /*#__PURE__*/React.createElement("img", {
       src: v,
-      alt: alt[i] ? alt[i] : "avatar_" + i,
+      alt: alt && alt[i] ? alt[i] : "avatar_" + i,
       width: size,
       height: size
     }));
-  }));
+  })), children);
 };
 MultiAvatar.displayName = "MultiAvatar";
 //# sourceMappingURL=MultiAvatar.js.map

package/dist/esm/components/MultiAvatar/MultiAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAvatar.js","names":["React","useCallback","useMemo","StyledMultiAvatar","StyledMultiAvatarInner","MultiAvatar","url","alt","size","className","setSize","i","length","width","height","slicedUrl","slice","map","v","displayName"],"sources":["../../../../src/components/MultiAvatar/MultiAvatar.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from \"react\";\nimport { StyledMultiAvatar, StyledMultiAvatarInner } from \"./Styles\";\n\nexport interface IMultiAvatar {\n  /** Path url. */\n  url: string[];\n  /** Alt text. */\n  alt?: string[];\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n}\n\nexport const MultiAvatar: FC<IMultiAvatar> = ({\n  url,\n  alt = \"Avatar Image\",\n  size = 24,\n  className,\n}) => {\n  const setSize = useCallback(\n    (i: number): object => {\n      switch (url.length) {\n        case 1:\n          return { width: `${size}px`, height: `${size}px` };\n        case 2:\n          return { width: `${size / 2}px`, height: `${size}px` };\n        case 3:\n          if (i === 0) {\n            return { width: `${size / 2}px`, height: `${size}px` };\n          } else {\n            return { width: `${size / 2}px`, height: `${size / 2}px` };\n          }\n        default:\n          return { width: `${size / 2}px`, height: `${size / 2}px` };\n      }\n    },\n    [size, url.length]\n  );\n\n  const slicedUrl = useMemo(() => {\n    if (url?.length > 4) {\n      return url.slice(0, 4);\n    }\n\n    return url;\n  }, [url]);\n\n  return (\n    <StyledMultiAvatar\n      style={{ width: `${size}px`, height: `${size}px` }}\n      className={className}\n      $urlCount={url.length}\n    >\n      {slicedUrl.map((v, i) => (\n        <StyledMultiAvatarInner\n          style={setSize(i)}\n          className=\"c-multi-avatar__wrapper\"\n          key={`avatar_${i}`}\n        >\n          <img\n            src={v}\n            alt={alt[i] ? alt[i] : `avatar_${i}`}\n            width={size}\n            height={size}\n          />\n        </StyledMultiAvatarInner>\n      ))}\n    </StyledMultiAvatar>\n  );\n};\n\nMultiAvatar.displayName = \"MultiAvatar\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,iBAAiB,EAAEC,sBAAsB,QAAQ,UAAU;AAapE,OAAO,IAAMC,WAA6B,GAAG,SAAhCA,WAA6B,OAKpC;EAAA,IAJJC,GAAG,QAAHA,GAAG;IAAA,gBACHC,GAAG;IAAHA,GAAG,yBAAG,cAAc;IAAA,iBACpBC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;EAET,IAAMC,OAAO,GAAGT,WAAW,CACzB,UAACU,CAAS,EAAa;IACrB,QAAQL,GAAG,CAACM,MAAM;MAChB,KAAK,CAAC;QACJ,OAAO;UAAEC,KAAK,EAAKL,IAAI,OAAI;UAAEM,MAAM,EAAKN,IAAI;QAAK,CAAC;MACpD,KAAK,CAAC;QACJ,OAAO;UAAEK,KAAK,EAAKL,IAAI,GAAG,CAAC,OAAI;UAAEM,MAAM,EAAKN,IAAI;QAAK,CAAC;MACxD,KAAK,CAAC;QACJ,IAAIG,CAAC,KAAK,CAAC,EAAE;UACX,OAAO;YAAEE,KAAK,EAAKL,IAAI,GAAG,CAAC,OAAI;YAAEM,MAAM,EAAKN,IAAI;UAAK,CAAC;QACxD,CAAC,MAAM;UACL,OAAO;YAAEK,KAAK,EAAKL,IAAI,GAAG,CAAC,OAAI;YAAEM,MAAM,EAAKN,IAAI,GAAG,CAAC;UAAK,CAAC;QAC5D;MACF;QACE,OAAO;UAAEK,KAAK,EAAKL,IAAI,GAAG,CAAC,OAAI;UAAEM,MAAM,EAAKN,IAAI,GAAG,CAAC;QAAK,CAAC;IAAC;EAEjE,CAAC,EACD,CAACA,IAAI,EAAEF,GAAG,CAACM,MAAM,CAAC,CACnB;EAED,IAAMG,SAAS,GAAGb,OAAO,CAAC,YAAM;IAC9B,IAAI,CAAAI,GAAG,oBAAHA,GAAG,CAAEM,MAAM,IAAG,CAAC,EAAE;MACnB,OAAON,GAAG,CAACU,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IACxB;IAEA,OAAOV,GAAG;EACZ,CAAC,EAAE,CAACA,GAAG,CAAC,CAAC;EAET,oBACE,oBAAC,iBAAiB;IAChB,KAAK,EAAE;MAAEO,KAAK,EAAKL,IAAI,OAAI;MAAEM,MAAM,EAAKN,IAAI;IAAK,CAAE;IACnD,SAAS,EAAEC,SAAU;IACrB,SAAS,EAAEH,GAAG,CAACM;EAAO,GAErBG,SAAS,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEP,CAAC;IAAA,oBAClB,oBAAC,sBAAsB;MACrB,KAAK,EAAED,OAAO,CAACC,CAAC,CAAE;MAClB,SAAS,EAAC,yBAAyB;MACnC,GAAG,cAAYA;IAAI,gBAEnB;MACE,GAAG,EAAEO,CAAE;MACP,GAAG,EAAEX,GAAG,CAACI,CAAC,CAAC,GAAGJ,GAAG,CAACI,CAAC,CAAC,eAAaA,CAAI;MACrC,KAAK,EAAEH,IAAK;MACZ,MAAM,EAAEA;IAAK,EACb,CACqB;EAAA,CAC1B,CAAC,CACgB;AAExB,CAAC;AAEDH,WAAW,CAACc,WAAW,GAAG,aAAa"}
+{"version":3,"file":"MultiAvatar.js","names":["React","useCallback","useMemo","StyledMultiAvatar","StyledMultiAvatarInner","MultiAvatar","url","alt","size","className","children","setSize","i","length","width","height","slicedUrl","slice","map","v","displayName"],"sources":["../../../../src/components/MultiAvatar/MultiAvatar.tsx"],"sourcesContent":["import React, { PropsWithChildren, useCallback, useMemo } from \"react\";\nimport { StyledMultiAvatar, StyledMultiAvatarInner } from \"./Styles\";\n\nexport interface MultiAvatarProps {\n  /** Path url. */\n  url: string[];\n  /** Alt text. */\n  alt?: string[];\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n}\n\n/**\n * @component MultiAvatar\n * @description\n * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image urls of the MultiAvatar.\n * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.\n * @prop {alt} - alt attributes of the imgs.\n *\n * @example\n * <MultiAvatar\n *  url={[\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\", \"https://faces-img.xcdn.link/image-lorem-face-953.jpg\"]}\n *  alt={[\"Profile picture of John\", \"Profile picture of Sarah\"]} />\n *\n * @example\n * <MultiAvatar\n *  url={[\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\", \"https://faces-img.xcdn.link/image-lorem-face-953.jpg\"]}\n *  alt={[\"Profile picture of John\", \"Profile picture of Sarah\"]}\n * >\n *  <Badge />\n * </MultiAvatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const MultiAvatar = ({\n  url,\n  alt,\n  size = 24,\n  className,\n  children,\n}: PropsWithChildren<MultiAvatarProps>) => {\n  const setSize = useCallback(\n    (i: number): object => {\n      switch (url.length) {\n        case 1:\n          return { width: `${size}px`, height: `${size}px` };\n        case 2:\n          return { width: `${size / 2}px`, height: `${size}px` };\n        case 3:\n          if (i === 0) {\n            return { width: `${size / 2}px`, height: `${size}px` };\n          } else {\n            return { width: `${size / 2}px`, height: `${size / 2}px` };\n          }\n        default:\n          return { width: `${size / 2}px`, height: `${size / 2}px` };\n      }\n    },\n    [size, url.length]\n  );\n\n  const slicedUrl = useMemo(() => {\n    if (url?.length > 4) {\n      return url.slice(0, 4);\n    }\n\n    return url;\n  }, [url]);\n\n  return (\n    <span className=\"tw-relative tw-inline-flex\">\n      <StyledMultiAvatar\n        style={{ width: `${size}px`, height: `${size}px` }}\n        className={className}\n        $urlCount={url.length}\n      >\n        {slicedUrl.map((v, i) => (\n          <StyledMultiAvatarInner\n            style={setSize(i)}\n            className=\"c-multi-avatar__wrapper\"\n            key={`avatar_${i}`}\n          >\n            <img\n              src={v}\n              alt={alt && alt[i] ? alt[i] : `avatar_${i}`}\n              width={size}\n              height={size}\n            />\n          </StyledMultiAvatarInner>\n        ))}\n      </StyledMultiAvatar>\n      {children}\n    </span>\n  );\n};\n\nMultiAvatar.displayName = \"MultiAvatar\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACtE,SAASC,iBAAiB,EAAEC,sBAAsB,QAAQ,UAAU;AAapE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMmB;EAAA,IALzCC,GAAG,QAAHA,GAAG;IACHC,GAAG,QAAHA,GAAG;IAAA,iBACHC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;EAER,IAAMC,OAAO,GAAGV,WAAW,CACzB,UAACW,CAAS,EAAa;IACrB,QAAQN,GAAG,CAACO,MAAM;MAChB,KAAK,CAAC;QACJ,OAAO;UAAEC,KAAK,EAAKN,IAAI,OAAI;UAAEO,MAAM,EAAKP,IAAI;QAAK,CAAC;MACpD,KAAK,CAAC;QACJ,OAAO;UAAEM,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;UAAEO,MAAM,EAAKP,IAAI;QAAK,CAAC;MACxD,KAAK,CAAC;QACJ,IAAII,CAAC,KAAK,CAAC,EAAE;UACX,OAAO;YAAEE,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;YAAEO,MAAM,EAAKP,IAAI;UAAK,CAAC;QACxD,CAAC,MAAM;UACL,OAAO;YAAEM,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;YAAEO,MAAM,EAAKP,IAAI,GAAG,CAAC;UAAK,CAAC;QAC5D;MACF;QACE,OAAO;UAAEM,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;UAAEO,MAAM,EAAKP,IAAI,GAAG,CAAC;QAAK,CAAC;IAAC;EAEjE,CAAC,EACD,CAACA,IAAI,EAAEF,GAAG,CAACO,MAAM,CAAC,CACnB;EAED,IAAMG,SAAS,GAAGd,OAAO,CAAC,YAAM;IAC9B,IAAI,CAAAI,GAAG,oBAAHA,GAAG,CAAEO,MAAM,IAAG,CAAC,EAAE;MACnB,OAAOP,GAAG,CAACW,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IACxB;IAEA,OAAOX,GAAG;EACZ,CAAC,EAAE,CAACA,GAAG,CAAC,CAAC;EAET,oBACE;IAAM,SAAS,EAAC;EAA4B,gBAC1C,oBAAC,iBAAiB;IAChB,KAAK,EAAE;MAAEQ,KAAK,EAAKN,IAAI,OAAI;MAAEO,MAAM,EAAKP,IAAI;IAAK,CAAE;IACnD,SAAS,EAAEC,SAAU;IACrB,SAAS,EAAEH,GAAG,CAACO;EAAO,GAErBG,SAAS,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEP,CAAC;IAAA,oBAClB,oBAAC,sBAAsB;MACrB,KAAK,EAAED,OAAO,CAACC,CAAC,CAAE;MAClB,SAAS,EAAC,yBAAyB;MACnC,GAAG,cAAYA;IAAI,gBAEnB;MACE,GAAG,EAAEO,CAAE;MACP,GAAG,EAAEZ,GAAG,IAAIA,GAAG,CAACK,CAAC,CAAC,GAAGL,GAAG,CAACK,CAAC,CAAC,eAAaA,CAAI;MAC5C,KAAK,EAAEJ,IAAK;MACZ,MAAM,EAAEA;IAAK,EACb,CACqB;EAAA,CAC1B,CAAC,CACgB,EACnBE,QAAQ,CACJ;AAEX,CAAC;AAEDL,WAAW,CAACe,WAAW,GAAG,aAAa"}

package/dist/esm/components/index.d.ts

@@ -70,4 +70,5 @@ export * from "./Filter";
 export * from "./Wizard";
 export * from "./IconButton";
 export * from "./Typography";
+export * from "./Badge";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/esm/components/index.js

@@ -70,4 +70,5 @@ export * from "./Filter";
 export * from "./Wizard";
 export * from "./IconButton";
 export * from "./Typography";
+export * from "./Badge";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from \"./Button\";\nexport * from \"./ButtonGroup\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./CounterButton\";\nexport * from \"./Steppers\";\nexport * from \"./Tables\";\nexport * from \"./CompleteCheckbox\";\nexport * from \"./Paper\";\nexport * from \"./ScaleBar\";\nexport * from \"./Card\";\nexport * from \"./EntityCard\";\nexport * from \"./Signifier\";\nexport * from \"./Avatar\";\nexport * from \"./Tag\";\nexport * from \"./Loaders\";\nexport * from \"./Nav\";\nexport * from \"./Bubble\";\nexport * from \"./Input\";\nexport * from \"./Menu\";\nexport * from \"./Expanders\";\nexport * from \"./Pickers\";\nexport * from \"./DatePicker\";\nexport * from \"./List\";\nexport * from \"./MenuSelector\";\nexport * from \"./MultiAvatar\";\nexport * from \"./RadioButton\";\nexport * from \"./ScrollShadow\";\nexport * from \"./Icons\";\nexport * from \"./Textarea\";\nexport * from \"./Modal\";\nexport * from \"./Sheet\";\nexport * from \"./Header\";\nexport * from \"./AutoResizeTextarea\";\nexport * from \"./Overlay\";\nexport * from \"./Accordion\";\nexport * from \"./Choose\";\nexport * from \"./Links\";\nexport * from \"./SelectDate\";\nexport * from \"./Popper\";\nexport * from \"./ToastMessage\";\nexport * from \"./Tooltip\";\nexport * from \"./Transitions\";\nexport * from \"./Pressed\";\nexport * from \"./Window\";\nexport * from \"./ValueButton\";\nexport * from \"./Select\";\nexport * from \"./SelectTrigger\";\nexport * from \"./Dialog\";\nexport * from \"./ConfirmDialog\";\nexport * from \"./Checkbox\";\nexport * from \"./Toggle\";\nexport * from \"./Typography\";\nexport * from \"./Autocomplete\";\nexport * from \"./ComboBox\";\nexport * from \"./Button/AddToListButton\";\nexport * from \"./ProgressBar\";\nexport * from \"./ProgressPie\";\nexport * from \"./Reactions\";\nexport * from \"./Label\";\nexport * from \"./GlobalStyle\";\nexport * from \"./ProgressRing\";\nexport * from \"./EditableContent\";\nexport * from \"./EditableText\";\nexport * from \"./Folder\";\nexport * from \"./Chip\";\nexport * from \"./Trigger\";\nexport * from \"./Dot\";\nexport * from \"./Entity\";\nexport * from \"./Filter\";\nexport * from \"./Wizard\";\nexport * from \"./IconButton\";\nexport * from \"./Typography\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,OAAO;AACrB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,aAAa;AAC3B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,0BAA0B;AACxC,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from \"./Button\";\nexport * from \"./ButtonGroup\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./CounterButton\";\nexport * from \"./Steppers\";\nexport * from \"./Tables\";\nexport * from \"./CompleteCheckbox\";\nexport * from \"./Paper\";\nexport * from \"./ScaleBar\";\nexport * from \"./Card\";\nexport * from \"./EntityCard\";\nexport * from \"./Signifier\";\nexport * from \"./Avatar\";\nexport * from \"./Tag\";\nexport * from \"./Loaders\";\nexport * from \"./Nav\";\nexport * from \"./Bubble\";\nexport * from \"./Input\";\nexport * from \"./Menu\";\nexport * from \"./Expanders\";\nexport * from \"./Pickers\";\nexport * from \"./DatePicker\";\nexport * from \"./List\";\nexport * from \"./MenuSelector\";\nexport * from \"./MultiAvatar\";\nexport * from \"./RadioButton\";\nexport * from \"./ScrollShadow\";\nexport * from \"./Icons\";\nexport * from \"./Textarea\";\nexport * from \"./Modal\";\nexport * from \"./Sheet\";\nexport * from \"./Header\";\nexport * from \"./AutoResizeTextarea\";\nexport * from \"./Overlay\";\nexport * from \"./Accordion\";\nexport * from \"./Choose\";\nexport * from \"./Links\";\nexport * from \"./SelectDate\";\nexport * from \"./Popper\";\nexport * from \"./ToastMessage\";\nexport * from \"./Tooltip\";\nexport * from \"./Transitions\";\nexport * from \"./Pressed\";\nexport * from \"./Window\";\nexport * from \"./ValueButton\";\nexport * from \"./Select\";\nexport * from \"./SelectTrigger\";\nexport * from \"./Dialog\";\nexport * from \"./ConfirmDialog\";\nexport * from \"./Checkbox\";\nexport * from \"./Toggle\";\nexport * from \"./Typography\";\nexport * from \"./Autocomplete\";\nexport * from \"./ComboBox\";\nexport * from \"./Button/AddToListButton\";\nexport * from \"./ProgressBar\";\nexport * from \"./ProgressPie\";\nexport * from \"./Reactions\";\nexport * from \"./Label\";\nexport * from \"./GlobalStyle\";\nexport * from \"./ProgressRing\";\nexport * from \"./EditableContent\";\nexport * from \"./EditableText\";\nexport * from \"./Folder\";\nexport * from \"./Chip\";\nexport * from \"./Trigger\";\nexport * from \"./Dot\";\nexport * from \"./Entity\";\nexport * from \"./Filter\";\nexport * from \"./Wizard\";\nexport * from \"./IconButton\";\nexport * from \"./Typography\";\nexport * from \"./Badge\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,OAAO;AACrB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,aAAa;AAC3B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,0BAA0B;AACxC,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,SAAS"}

package/dist/index.js

@@ -288,6 +288,7 @@
    * )
    * @see
    * https://system.activecollab.com/?path=/story/components-button-indicators-button--button
+   * https://design.activecollab.com/docs/components/button
    */
   var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
@@ -1215,6 +1216,7 @@
    * )
    * @see
    * https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button
+   * https://design.activecollab.com/docs/components/button
    */
 
   var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -9212,15 +9214,44 @@
   };
   Signifier.displayName = "Signifier";
 
+  var StyledWrapper = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledWrapper",
+    componentId: "sc-5x2tyd-0"
+  })(["display:inline-flex;position:relative;"]);
   var StyledAvatar = styled__default["default"].img.withConfig({
     displayName: "Styles__StyledAvatar",
-    componentId: "sc-5x2tyd-0"
-  })(["", ""], {
-    "objectFit": "cover",
-    "borderRadius": "9999px"
+    componentId: "sc-5x2tyd-1"
+  })(["border-radius:100%;object-fit:cover;block-size:", ";inline-size:", ";"], function (props) {
+    return props.size + "px";
+  }, function (props) {
+    return props.size + "px";
   });
 
-  var _excluded$I = ["url", "alt", "size", "className"];
+  var _excluded$I = ["url", "alt", "size", "className", "children"];
+  /**
+   * @component Avatar
+   * @description
+   * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+   *
+   * @prop {url} - The image url of the Avatar.
+   * @prop {size} - controls the size of an Avatar (width and height) in pixels.
+   * @prop {alt} - alt attribute of the img.
+   *
+   * @example
+   * <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
+   *
+   * @example
+   * <Avatar
+   *   url="https://faces-img.xcdn.link/image-lorem-face-954.jpg"
+   *   alt="Profile picture of John">
+   *   <Badge size={8} backgroundColor="green" position="bottom-left" />
+   * </Avatar>
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
+   * @see
+   * https://design.activecollab.com/docs/components/avatar
+   */
   var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var url = _ref.url,
       _ref$alt = _ref.alt,
@@ -9228,15 +9259,17 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
       className = _ref.className,
+      children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$I);
-    return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({}, rest, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+      className: className
+    }, children, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
+      size: size,
       ref: ref,
       src: url,
       alt: alt,
-      width: size,
-      height: size,
-      className: className
-    }));
+      role: "img"
+    }, rest)));
   });
   Avatar.displayName = "Avatar";
 
@@ -11129,13 +11162,40 @@
   StyledMultiAvatar.displayName = "StyledMultiAvatar";
   StyledMultiAvatarInner.displayName = "StyledMultiAvatarInner";
 
+  /**
+   * @component MultiAvatar
+   * @description
+   * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+   *
+   * @prop {url} - The image urls of the MultiAvatar.
+   * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.
+   * @prop {alt} - alt attributes of the imgs.
+   *
+   * @example
+   * <MultiAvatar
+   *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
+   *  alt={["Profile picture of John", "Profile picture of Sarah"]} />
+   *
+   * @example
+   * <MultiAvatar
+   *  url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
+   *  alt={["Profile picture of John", "Profile picture of Sarah"]}
+   * >
+   *  <Badge />
+   * </MultiAvatar>
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
+   * @see
+   * https://design.activecollab.com/docs/components/avatar
+   */
   var MultiAvatar = function MultiAvatar(_ref) {
     var url = _ref.url,
-      _ref$alt = _ref.alt,
-      alt = _ref$alt === void 0 ? "Avatar Image" : _ref$alt,
+      alt = _ref.alt,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      className = _ref.className;
+      className = _ref.className,
+      children = _ref.children;
     var setSize = React.useCallback(function (i) {
       switch (url.length) {
         case 1:
@@ -11173,7 +11233,9 @@
       }
       return url;
     }, [url]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatar, {
+    return /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "tw-relative tw-inline-flex"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatar, {
       style: {
         width: "".concat(size, "px"),
         height: "".concat(size, "px")
@@ -11187,11 +11249,11 @@
         key: "avatar_".concat(i)
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         src: v,
-        alt: alt[i] ? alt[i] : "avatar_".concat(i),
+        alt: alt && alt[i] ? alt[i] : "avatar_".concat(i),
         width: size,
         height: size
       }));
-    }));
+    })), children);
   };
   MultiAvatar.displayName = "MultiAvatar";
 
@@ -15303,6 +15365,68 @@
   });
   Wizard.displayName = "Wizard";
 
+  var StyledBadge = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledBadge",
+    componentId: "sc-6o8do5-0"
+  })(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";position:absolute;pointer-events:none;z-index:1;", " ", " ", " ", ""], function (props) {
+    return props.backgroundColor;
+  }, function (props) {
+    return props.dimension + "px";
+  }, function (props) {
+    return props.dimension + "px";
+  }, function (_ref) {
+    var position = _ref.position;
+    return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
+  }, function (_ref2) {
+    var position = _ref2.position;
+    return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
+  }, function (_ref3) {
+    var position = _ref3.position;
+    return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
+  }, function (_ref4) {
+    var position = _ref4.position;
+    return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
+  });
+
+  /**
+   * @component Badge
+   * @description
+   * In some products, you might need to show a badge on the right corner of the avatar.
+   * We call this a badge. Here's an example that shows if the user is online.
+   *
+   * @prop {position} - dictates the position of a badge.
+   * @prop {dimension} - controls the size of a badge (width and height) in pixels.
+   * @prop {backgroundColor} - background-color of a badge.
+   * @prop {isVisible} - dictates if badge should be visible or not.
+   *
+   * @example
+   * <IconButton variant="text gray" size="big">
+   *   <BellOffIcon />
+   *   <Badge position="top-right" backgroundColor="red" dimension={16} />
+   * </IconButton>
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
+   */
+  var Badge = function Badge(_ref) {
+    var _ref$dimension = _ref.dimension,
+      dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
+      className = _ref.className,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? "bottom-left" : _ref$position,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
+      _ref$isVisible = _ref.isVisible,
+      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    return isVisible ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
+      className: classNames__default["default"]("c-badge", className),
+      dimension: dimension,
+      position: position,
+      backgroundColor: backgroundColor,
+      role: "status"
+    }) : null;
+  };
+
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
   exports.AccordionItem = AccordionItem;
@@ -15328,6 +15452,7 @@
   exports.Autocomplete = Autocomplete;
   exports.Avatar = Avatar;
   exports.BackLink = BackLink;
+  exports.Badge = Badge;
   exports.BellOffIcon = BellOffIcon$1;
   exports.BellOffSmallIcon = BellOffSmallIcon$1;
   exports.BillingIcon = BillingIcon$1;