@activecollab/components 1.0.298 → 1.0.300

package/dist/cjs/components/AvatarGroup/AvatarGroup.js

@@ -10,12 +10,16 @@ var _react = _interopRequireWildcard(require("react"));
 var _Tooltip = require("../Tooltip");
 var _Typography = require("../Typography/Typography");
 var _Styles = require("./Styles");
+var _excluded = ["limit", "size", "children", "hasTooltip"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _Children$toArray;
   var limit = _ref.limit,
@@ -23,7 +27,8 @@ var AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
     _ref$hasTooltip = _ref.hasTooltip,
-    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip,
+    rest = _objectWithoutProperties(_ref, _excluded);
   // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = _react.Children.count(children) - limit > 1 ? false : true;
   // gap between Avatars
@@ -40,66 +45,38 @@ var AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       props = _ref2.props;
     return props.alt;
   });
-
-  // render React Element with tooltip or without
-  var renderAvatars = function renderAvatars(item) {
+  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, _extends({
+    hasTooltip: hasTooltip,
+    ref: ref
+  }, rest), _children.map(function (child, index) {
+    var item = child;
     var tooltipText = item.props.alt;
     var alt = "Image of ".concat(tooltipText);
-    if (hasTooltip) {
-      return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-        title: tooltipText
-      }, /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
-        size: size,
-        alt: alt,
-        style: {
-          marginLeft: "-".concat(gap, "px"),
-          outline: "1px solid var(--page-paper-main)"
-        }
-      })));
-    }
-    return /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      title: tooltipText ? tooltipText : "",
+      disable: !hasTooltip,
+      key: alt
+    }, /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
       size: size,
       alt: alt,
       style: {
-        marginLeft: "-".concat(gap, "px"),
+        // component preserves it's width
+        marginLeft: "-".concat(index === 0 ? null : gap, "px"),
         outline: "1px solid var(--page-paper-main)"
       }
-    }));
-  };
-
-  // render Tooltip if hasTooltip is true
-  var renderCounter = function renderCounter() {
-    if (hasTooltip) {
-      return /*#__PURE__*/_react.default.createElement(_StyledTooltip, {
-        title: nameArr.join("\n")
-      }, /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, {
-        size: size,
-        role: "status",
-        "aria-label": "Rest of the users",
-        $_css: "-".concat(gap, "px")
-      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        variant: handleVariant,
-        weight: "medium"
-      }, "+", _react.Children.count(children) - limit)));
-    }
-    return /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles2, {
-      size: size,
-      role: "status",
-      "aria-label": "Rest of the users",
-      $_css2: "-".concat(gap, "px")
-    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-      variant: handleVariant,
-      weight: "medium"
-    }, "+", _react.Children.count(children) - limit));
-  };
-  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, {
-    hasTooltip: hasTooltip,
-    gap: gap,
-    ref: ref
-  }, _children.map(function (child) {
-    var item = child;
-    return renderAvatars(item);
-  }), limit >= _react.Children.count(children) || minChildren ? null : renderCounter());
+    })));
+  }), limit >= _react.Children.count(children) || minChildren ? null : /*#__PURE__*/_react.default.createElement(_StyledTooltip, {
+    title: nameArr.join(",\n"),
+    disable: !hasTooltip
+  }, /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, {
+    size: size,
+    role: "status",
+    "aria-label": "Rest of the users",
+    $_css: "-".concat(gap, "px")
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    variant: handleVariant,
+    weight: "medium"
+  }, "+", _react.Children.count(children) - limit))));
 });
 exports.AvatarGroup = AvatarGroup;
 AvatarGroup.displayName = "AvatarGroup";
@@ -118,12 +95,4 @@ var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCoun
     marginLeft: p.$_css
   };
 });
-var _StyledLengthCountStyles2 = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles2",
-  componentId: "sc-1rsx1j5-2"
-})(function (p) {
-  return {
-    marginLeft: p.$_css2
-  };
-});
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/cjs/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","forwardRef","ref","limit","size","children","hasTooltip","minChildren","Children","count","gap","_children","toArray","slice","handleVariant","useMemo","nameArr","map","item","props","alt","renderAvatars","tooltipText","cloneElement","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":";;;;;;;;AAAA;AASA;AACA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1D,IAAMA,WAAW,gBAAG,IAAAC,iBAAU,EAGnC,gBAAqDC,GAAG,EAAK;EAAA;EAAA,IAA1DC,KAAK,QAALA,KAAK;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IAAEC,QAAQ,QAARA,QAAQ;IAAA,uBAAEC,UAAU;IAAVA,UAAU,gCAAG,KAAK;EACjD;EACA,IAAMC,WAAW,GAAGC,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI;EACvE;EACA,IAAMO,GAAG,GAAG,CAAC;EAEb,IAAMC,SAAS,GAAGJ,WAAW,GACzBC,eAAQ,CAACI,OAAO,CAACP,QAAQ,CAAC,GAC1BG,eAAQ,CAACI,OAAO,CAACP,QAAQ,CAAC,CAACQ,KAAK,CAAC,CAAC,EAAEV,KAAK,CAAC;EAE9C,IAAMW,aAAa,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,IAAIX,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;;EAEV;EACA,IAAMY,OAAO,wBAAGR,eAAQ,CAACI,OAAO,CAACP,QAAQ,CAAC,sDAA1B,kBACZQ,KAAK,CAACV,KAAK,CAAC,CACbc,GAAG,CAAC,UAACC,IAAI,EAAK;IACb,YAAkBA,IAAI;MAAdC,KAAK,SAALA,KAAK;IACb,OAAOA,KAAK,CAACC,GAAG;EAClB,CAAC,CAAC;;EAEJ;EACA,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIH,IAAkB,EAAK;IAC5C,IAAMI,WAAW,GAAGJ,IAAI,CAACC,KAAK,CAACC,GAAG;IAClC,IAAMA,GAAG,sBAAeE,WAAW,CAAE;IAErC,IAAIhB,UAAU,EAAE;MACd,oBACE,6BAAC,gBAAO;QAAC,KAAK,EAAEgB;MAAY,gBACzB,IAAAC,mBAAY,EAACL,IAAI,kCACbA,IAAI,CAACC,KAAK;QACbf,IAAI,EAAEA,IAAI;QACVgB,GAAG,EAAEA,GAAG;QACRI,KAAK,EAAE;UACLC,UAAU,aAAMf,GAAG,OAAI;UACvBgB,OAAO,EAAE;QACX;MAAC,GACD,CACM;IAEd;IACA,oBAAO,IAAAH,mBAAY,EAACL,IAAI,kCACnBA,IAAI,CAACC,KAAK;MACbf,IAAI,EAAEA,IAAI;MACVgB,GAAG,EAAEA,GAAG;MACRI,KAAK,EAAE;QACLC,UAAU,aAAMf,GAAG,OAAI;QACvBgB,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC;;EAED;EACA,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,IAAIrB,UAAU,EAAE;MACd,oBACE;QACE,KAAK,EAAEU,OAAO,CAACY,IAAI,CAAC,IAAI;MAAE,gBAM1B;QACE,IAAI,EAAExB,IAAK;QACX,IAAI,EAAC,QAAQ;QACb,cAAW,mBAAmB;QAAA,kBAEZM,GAAG;MAAA,gBAGrB,6BAAC,sBAAU;QAAC,OAAO,EAAEI,aAAc;QAAC,MAAM,EAAC;MAAQ,QAC/CN,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,CACvB,CACK,CACZ;IAEd;IACA,oBACE;MACE,IAAI,EAAEC,IAAK;MACX,IAAI,EAAC,QAAQ;MACb,cAAW,mBAAmB;MAAA,mBAEZM,GAAG;IAAA,gBAGrB,6BAAC,sBAAU;MAAC,OAAO,EAAEI,aAAc;MAAC,MAAM,EAAC;IAAQ,QAC/CN,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,GAAGF,KAAK,CACvB,CACK;EAExB,CAAC;EAED,oBACE,6BAAC,0BAAkB;IAAC,UAAU,EAAEG,UAAW;IAAC,GAAG,EAAEI,GAAI;IAAC,GAAG,EAAER;EAAI,GAC5DS,SAAS,CAACM,GAAG,CAAC,UAACY,KAAK,EAAK;IACxB,IAAMX,IAAI,GAAGW,KAAkC;IAE/C,OAAOR,aAAa,CAACH,IAAI,CAAC;EAC5B,CAAC,CAAC,EAEDf,KAAK,IAAIK,eAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,IAAIE,WAAW,GAC7C,IAAI,GACJoB,aAAa,EAAE,CACA;AAEzB,CAAC,CAAC;AAAC;AAEH3B,WAAW,CAAC8B,WAAW,GAAG,aAAa;AAAC;EAAA;EAAA;AAAA,GAnDzB;EACHC,UAAU,EAAE,cAAc;EAC1BC,UAAU,EAAE;AACd,CAAC;AAAA;EAAA;EAAA;AAAA;EAAA,OAMM;IACHP,UAAU;EACZ,CAAC;AAAA;AAAA;EAAA;EAAA;AAAA;EAAA,OAcA;IACHA,UAAU;EACZ,CAAC;AAAA"}
+{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","forwardRef","ref","limit","size","children","hasTooltip","rest","minChildren","Children","count","gap","_children","toArray","slice","handleVariant","useMemo","nameArr","map","item","props","alt","child","index","tooltipText","cloneElement","style","marginLeft","outline","join","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false, ...rest }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} ref={ref} {...rest}>\n      {_children.map((child, index) => {\n        const item = child as ReactElement<AvatarProps>;\n        const tooltipText = item.props.alt;\n        const alt = `Image of ${tooltipText}`;\n        return (\n          <Tooltip\n            title={tooltipText ? tooltipText : \"\"}\n            disable={!hasTooltip}\n            key={alt}\n          >\n            {cloneElement(item, {\n              ...item.props,\n              size: size,\n              alt: alt,\n              style: {\n                // component preserves it's width\n                marginLeft: `-${index === 0 ? null : gap}px`,\n                outline: \"1px solid var(--page-paper-main)\",\n              },\n            })}\n          </Tooltip>\n        );\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <Tooltip\n          title={nameArr.join(\",\\n\")}\n          disable={!hasTooltip}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      )}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

package/dist/cjs/components/AvatarGroup/Styles.js

@@ -10,14 +10,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var AvatarGroupsStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], _FontStyle.FontStyle, function (props) {
-  return !props.hasTooltip && "var(--color-theme-300)";
-}, function (_ref) {
-  var gap = _ref.gap;
-  return -gap;
+})(["", " align-items:center;align-items:center;border-radius:var(--ac-br-6);cursor:", ";display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;&:hover{background-color:", ";transition:all 0.2s ease-in-out;}"], _FontStyle.FontStyle, function (_ref) {
+  var hasTooltip = _ref.hasTooltip;
+  return hasTooltip ? "default" : "pointer";
 }, function (_ref2) {
-  var gap = _ref2.gap;
-  return "calc(100% + ".concat(gap * 2, "px + 5px)");
+  var hasTooltip = _ref2.hasTooltip;
+  return hasTooltip ? "5px 0" : "5px";
+}, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
 });
 exports.AvatarGroupsStyles = AvatarGroupsStyles;
 var LengthCountStyles = _styledComponents.default.div.withConfig({

package/dist/cjs/components/AvatarGroup/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4VAIxCC,oBAAS,EAWW,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,6BAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAAC;AAMK,IAAMC,iBAAiB,GAAGN,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}
+{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","hasTooltip","props","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n}>`\n  ${FontStyle}\n  align-items: center;\n  align-items: center;\n  border-radius: var(--ac-br-6);\n  cursor: ${({ hasTooltip }) => (hasTooltip ? \"default\" : \"pointer\")};\n  display: flex;\n  justify-content: center;\n  padding: ${({ hasTooltip }) => (hasTooltip ? \"5px 0\" : \"5px\")};\n  user-select: none;\n  width: fit-content;\n\n  &:hover {\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    transition: all 0.2s ease-in-out;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gPAGxCC,oBAAS,EAID;EAAA,IAAGC,UAAU,QAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,EAGvD;EAAA,IAAGA,UAAU,SAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,EAKvC,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACD,UAAU,IAAI,wBAAwB;AAAA,EAGlD;AAAC;AAMK,IAAME,iBAAiB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;wCAgHtB,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;;wCA6EtB,CAAC"}

package/dist/esm/components/AvatarGroup/AvatarGroup.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _styled3 from "styled-components";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _styled2 from "styled-components";
 import _styled from "styled-components";
+var _excluded = ["limit", "size", "children", "hasTooltip"];
 import React, { Children, cloneElement, useMemo, forwardRef } from "react";
 import { Tooltip } from "../Tooltip";
 import { Typography } from "../Typography/Typography";
@@ -13,7 +14,8 @@ export var AvatarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children,
     _ref$hasTooltip = _ref.hasTooltip,
-    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip;
+    hasTooltip = _ref$hasTooltip === void 0 ? false : _ref$hasTooltip,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   // always display counter with min +2 as +1 can takes space of an 1 more Avatar
   var minChildren = Children.count(children) - limit > 1 ? false : true;
   // gap between Avatars
@@ -30,66 +32,38 @@ export var AvatarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       props = _ref2.props;
     return props.alt;
   });
-
-  // render React Element with tooltip or without
-  var renderAvatars = function renderAvatars(item) {
+  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, _extends({
+    hasTooltip: hasTooltip,
+    ref: ref
+  }, rest), _children.map(function (child, index) {
+    var item = child;
     var tooltipText = item.props.alt;
     var alt = "Image of " + tooltipText;
-    if (hasTooltip) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        title: tooltipText
-      }, /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
-        size: size,
-        alt: alt,
-        style: {
-          marginLeft: "-" + gap + "px",
-          outline: "1px solid var(--page-paper-main)"
-        }
-      })));
-    }
-    return /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltipText ? tooltipText : "",
+      disable: !hasTooltip,
+      key: alt
+    }, /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
       size: size,
       alt: alt,
       style: {
-        marginLeft: "-" + gap + "px",
+        // component preserves it's width
+        marginLeft: "-" + (index === 0 ? null : gap) + "px",
         outline: "1px solid var(--page-paper-main)"
       }
-    }));
-  };
-
-  // render Tooltip if hasTooltip is true
-  var renderCounter = function renderCounter() {
-    if (hasTooltip) {
-      return /*#__PURE__*/React.createElement(_StyledTooltip, {
-        title: nameArr.join("\n")
-      }, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
-        size: size,
-        role: "status",
-        "aria-label": "Rest of the users",
-        $_css: "-" + gap + "px"
-      }, /*#__PURE__*/React.createElement(Typography, {
-        variant: handleVariant,
-        weight: "medium"
-      }, "+", Children.count(children) - limit)));
-    }
-    return /*#__PURE__*/React.createElement(_StyledLengthCountStyles2, {
-      size: size,
-      role: "status",
-      "aria-label": "Rest of the users",
-      $_css2: "-" + gap + "px"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: handleVariant,
-      weight: "medium"
-    }, "+", Children.count(children) - limit));
-  };
-  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, {
-    hasTooltip: hasTooltip,
-    gap: gap,
-    ref: ref
-  }, _children.map(function (child) {
-    var item = child;
-    return renderAvatars(item);
-  }), limit >= Children.count(children) || minChildren ? null : renderCounter());
+    })));
+  }), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledTooltip, {
+    title: nameArr.join(",\n"),
+    disable: !hasTooltip
+  }, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
+    size: size,
+    role: "status",
+    "aria-label": "Rest of the users",
+    $_css: "-" + gap + "px"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: handleVariant,
+    weight: "medium"
+  }, "+", Children.count(children) - limit))));
 });
 AvatarGroup.displayName = "AvatarGroup";
 var _StyledTooltip = _styled(Tooltip).withConfig({
@@ -107,12 +81,4 @@ var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
     marginLeft: p.$_css
   };
 });
-var _StyledLengthCountStyles2 = _styled(LengthCountStyles).withConfig({
-  displayName: "AvatarGroup___StyledLengthCountStyles2",
-  componentId: "sc-1rsx1j5-2"
-})(function (p) {
-  return {
-    marginLeft: p.$_css2
-  };
-});
 //# sourceMappingURL=AvatarGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","forwardRef","Tooltip","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","ref","limit","size","children","hasTooltip","minChildren","count","gap","_children","toArray","slice","handleVariant","nameArr","map","item","props","alt","renderAvatars","tooltipText","style","marginLeft","outline","renderCounter","join","child","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  // render React Element with tooltip or without\n  const renderAvatars = (item: ReactElement) => {\n    const tooltipText = item.props.alt;\n    const alt = `Image of ${tooltipText}`;\n\n    if (hasTooltip) {\n      return (\n        <Tooltip title={tooltipText}>\n          {cloneElement(item, {\n            ...item.props,\n            size: size,\n            alt: alt,\n            style: {\n              marginLeft: `-${gap}px`,\n              outline: \"1px solid var(--page-paper-main)\",\n            },\n          })}\n        </Tooltip>\n      );\n    }\n    return cloneElement(item, {\n      ...item.props,\n      size: size,\n      alt: alt,\n      style: {\n        marginLeft: `-${gap}px`,\n        outline: \"1px solid var(--page-paper-main)\",\n      },\n    });\n  };\n\n  // render Tooltip if hasTooltip is true\n  const renderCounter = () => {\n    if (hasTooltip) {\n      return (\n        <Tooltip\n          title={nameArr.join(\"\\n\")}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      );\n    }\n    return (\n      <LengthCountStyles\n        size={size}\n        role=\"status\"\n        aria-label=\"Rest of the users\"\n        css={{\n          marginLeft: `-${gap}px`,\n        }}\n      >\n        <Typography variant={handleVariant} weight=\"medium\">\n          +{Children.count(children) - limit}\n        </Typography>\n      </LengthCountStyles>\n    );\n  };\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} gap={gap} ref={ref}>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return renderAvatars(item);\n      })}\n\n      {limit >= Children.count(children) || minChildren\n        ? null\n        : renderCounter()}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","forwardRef","Tooltip","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","ref","limit","size","children","hasTooltip","rest","minChildren","count","gap","_children","toArray","slice","handleVariant","nameArr","map","item","props","alt","child","index","tooltipText","style","marginLeft","outline","join","displayName","whiteSpace","lineHeight"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n  hasTooltip?: boolean;\n}\n\nexport const AvatarGroup = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<AvatarGroupsProps>\n>(({ limit, size = 34, children, hasTooltip = false, ...rest }, ref) => {\n  // always display counter with min +2 as +1 can takes space of an 1 more Avatar\n  const minChildren = Children.count(children) - limit > 1 ? false : true;\n  // gap between Avatars\n  const gap = 8;\n\n  const _children = minChildren\n    ? Children.toArray(children)\n    : Children.toArray(children).slice(0, limit);\n\n  const handleVariant = useMemo(() => {\n    if (size >= 34) return \"Caption 1\";\n    return \"Caption 2\";\n  }, [size]);\n\n  // get all names indexed above limit number from alt tag on Avatar for counter tooltip\n  const nameArr = Children.toArray(children)\n    ?.slice(limit)\n    .map((item) => {\n      const { props } = item as ReactElement;\n      return props.alt;\n    });\n\n  return (\n    <AvatarGroupsStyles hasTooltip={hasTooltip} ref={ref} {...rest}>\n      {_children.map((child, index) => {\n        const item = child as ReactElement<AvatarProps>;\n        const tooltipText = item.props.alt;\n        const alt = `Image of ${tooltipText}`;\n        return (\n          <Tooltip\n            title={tooltipText ? tooltipText : \"\"}\n            disable={!hasTooltip}\n            key={alt}\n          >\n            {cloneElement(item, {\n              ...item.props,\n              size: size,\n              alt: alt,\n              style: {\n                // component preserves it's width\n                marginLeft: `-${index === 0 ? null : gap}px`,\n                outline: \"1px solid var(--page-paper-main)\",\n              },\n            })}\n          </Tooltip>\n        );\n      })}\n\n      {limit >= Children.count(children) || minChildren ? null : (\n        <Tooltip\n          title={nameArr.join(\",\\n\")}\n          disable={!hasTooltip}\n          css={{\n            whiteSpace: \"break-spaces\",\n            lineHeight: \"18px\",\n          }}\n        >\n          <LengthCountStyles\n            size={size}\n            role=\"status\"\n            aria-label=\"Rest of the users\"\n            css={{\n              marginLeft: `-${gap}px`,\n            }}\n          >\n            <Typography variant={handleVariant} weight=\"medium\">\n              +{Children.count(children) - limit}\n            </Typography>\n          </LengthCountStyles>\n        </Tooltip>\n      )}\n    </AvatarGroupsStyles>\n  );\n});\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":"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"}

package/dist/esm/components/AvatarGroup/Styles.d.ts

@@ -1,6 +1,5 @@
 export declare const AvatarGroupsStyles: import("styled-components").StyledComponent<"div", any, {
     hasTooltip: boolean;
-    gap: number;
 }, never>;
 interface LengthCountStylesProps {
     size: number;

package/dist/esm/components/AvatarGroup/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;gBACjB,OAAO;SACd,MAAM;SA6BZ,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;gBACjB,OAAO;SAkBpB,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}

package/dist/esm/components/AvatarGroup/Styles.js

@@ -3,14 +3,14 @@ import { FontStyle } from "../FontStyle";
 export var AvatarGroupsStyles = styled.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["", " align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative;user-select:none;width:fit-content;&::before{border-radius:5px;background-color:", ";content:\"\";height:100%;margin-left:", "px;opacity:0;padding:5px 0;position:absolute;transition:opacity 0.2s ease-in-out;width:", ";}&:hover::before{opacity:1;}"], FontStyle, function (props) {
-  return !props.hasTooltip && "var(--color-theme-300)";
-}, function (_ref) {
-  var gap = _ref.gap;
-  return -gap;
+})(["", " align-items:center;align-items:center;border-radius:var(--ac-br-6);cursor:", ";display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;&:hover{background-color:", ";transition:all 0.2s ease-in-out;}"], FontStyle, function (_ref) {
+  var hasTooltip = _ref.hasTooltip;
+  return hasTooltip ? "default" : "pointer";
 }, function (_ref2) {
-  var gap = _ref2.gap;
-  return "calc(100% + " + gap * 2 + "px + 5px)";
+  var hasTooltip = _ref2.hasTooltip;
+  return hasTooltip ? "5px 0" : "5px";
+}, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
 });
 export var LengthCountStyles = styled.div.withConfig({
   displayName: "Styles__LengthCountStyles",

package/dist/esm/components/AvatarGroup/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","props","hasTooltip","gap","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n  gap: number;\n}>`\n  ${FontStyle}\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  user-select: none;\n  width: fit-content;\n\n  &::before {\n    border-radius: 5px;\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    content: \"\";\n    height: 100%;\n    margin-left: ${({ gap }) => -gap}px;\n    opacity: 0;\n    padding: 5px 0;\n    position: absolute;\n    transition: opacity 0.2s ease-in-out;\n    // 5px represents padding px\n    width: ${({ gap }) => `calc(100% + ${gap * 2}px + 5px)`};\n  }\n\n  &:hover::before {\n    opacity: 1;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,4VAIxCF,SAAS,EAWW,UAACG,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,UAAU,IAAI,wBAAwB;AAAA,GAGhC;EAAA,IAAGC,GAAG,QAAHA,GAAG;EAAA,OAAO,CAACA,GAAG;AAAA,GAMvB;EAAA,IAAGA,GAAG,SAAHA,GAAG;EAAA,wBAAsBA,GAAG,GAAG,CAAC;AAAA,CAAW,CAM1D;AAMD,OAAO,IAAMC,iBAAiB,GAAGP,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACJ,KAAK;EAAA,OAAKA,KAAK,CAACI,IAAI,GAAG,IAAI;AAAA,EAI5C"}
+{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","hasTooltip","props","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n  hasTooltip: boolean;\n}>`\n  ${FontStyle}\n  align-items: center;\n  align-items: center;\n  border-radius: var(--ac-br-6);\n  cursor: ${({ hasTooltip }) => (hasTooltip ? \"default\" : \"pointer\")};\n  display: flex;\n  justify-content: center;\n  padding: ${({ hasTooltip }) => (hasTooltip ? \"5px 0\" : \"5px\")};\n  user-select: none;\n  width: fit-content;\n\n  &:hover {\n    background-color: ${(props) =>\n      !props.hasTooltip && \"var(--color-theme-300)\"};\n    transition: all 0.2s ease-in-out;\n  }\n`;\n\ninterface LengthCountStylesProps {\n  size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n  align-items: center;\n  background-color: var(--color-theme-400);\n  block-size: ${(props) => props.size + \"px\"};\n  border-radius: var(--ac-br-rounded);\n  display: flex;\n  inline-size: ${(props) => props.size + \"px\"};\n  justify-content: center;\n  outline: 1px solid var(--page-paper-main);\n  z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gPAGxCF,SAAS,EAID;EAAA,IAAGG,UAAU,QAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,EAGvD;EAAA,IAAGA,UAAU,SAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,EAKvC,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACD,UAAU,IAAI,wBAAwB;AAAA,EAGlD;AAMD,OAAO,IAAME,iBAAiB,GAAGN,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,EAI5C"}