@activecollab/components 1.0.274 → 1.0.276

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

@@ -19,6 +19,10 @@ var AvatarGroup = function AvatarGroup(_ref) {
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children;
   var _children = _react.Children.toArray(children).slice(0, limit);
+  var handleVariant = (0, _react.useMemo)(function () {
+    if (size >= 34) return "Caption 1";
+    return "Caption 2";
+  }, [size]);
   return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, null, _children.map(function (child) {
     var item = child;
     return /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
@@ -34,7 +38,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       marginInlineStart: "-8px"
     }
   }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    variant: "Caption 1",
+    variant: handleVariant,
     weight: "medium"
   }, "+", _react.Children.count(children) - limit)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","limit","size","children","_children","Children","toArray","slice","map","child","item","cloneElement","props","style","marginInlineStart","outline","count"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  const _children = Children.toArray(children).slice(0, limit);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) ? null : (\n        <LengthCountStyles size={size} style={{ marginInlineStart: \"-8px\" }}>\n          <Typography variant=\"Caption 1\" weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AAOA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAO1D,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAIoB;EAAA,IAH1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;EAER,IAAMC,SAAS,GAAGC,eAAQ,CAACC,OAAO,CAACH,QAAQ,CAAC,CAACI,KAAK,CAAC,CAAC,EAAEN,KAAK,CAAC;EAE5D,oBACE,6BAAC,0BAAkB,QAChBG,SAAS,CAACI,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAO,IAAAE,mBAAY,EAACD,IAAI,kCACnBA,IAAI,CAACE,KAAK;MACbV,IAAI,EAAEA,IAAI;MACVW,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDd,KAAK,IAAII,eAAQ,CAACW,KAAK,CAACb,QAAQ,CAAC,GAAG,IAAI,gBACvC,6BAAC,yBAAiB;IAAC,IAAI,EAAED,IAAK;IAAC,KAAK,EAAE;MAAEY,iBAAiB,EAAE;IAAO;EAAE,gBAClE,6BAAC,sBAAU;IAAC,OAAO,EAAC,WAAW;IAAC,MAAM,EAAC;EAAQ,QAC3CT,eAAQ,CAACW,KAAK,CAACb,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["AvatarGroup","limit","size","children","_children","Children","toArray","slice","handleVariant","useMemo","map","child","item","cloneElement","props","style","marginInlineStart","outline","count"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  const _children = 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  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) ? null : (\n        <LengthCountStyles size={size} style={{ marginInlineStart: \"-8px\" }}>\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AAQA;AACA;AAAiE;AAAA;AAAA;AAAA;AAAA;AAO1D,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAIoB;EAAA,IAH1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;EAER,IAAMC,SAAS,GAAGC,eAAQ,CAACC,OAAO,CAACH,QAAQ,CAAC,CAACI,KAAK,CAAC,CAAC,EAAEN,KAAK,CAAC;EAE5D,IAAMO,aAAa,GAAG,IAAAC,cAAO,EAAC,YAAM;IAClC,IAAIP,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,6BAAC,0BAAkB,QAChBE,SAAS,CAACM,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAO,IAAAE,mBAAY,EAACD,IAAI,kCACnBA,IAAI,CAACE,KAAK;MACbZ,IAAI,EAAEA,IAAI;MACVa,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDhB,KAAK,IAAII,eAAQ,CAACa,KAAK,CAACf,QAAQ,CAAC,GAAG,IAAI,gBACvC,6BAAC,yBAAiB;IAAC,IAAI,EAAED,IAAK;IAAC,KAAK,EAAE;MAAEc,iBAAiB,EAAE;IAAO;EAAE,gBAClE,6BAAC,sBAAU;IAAC,OAAO,EAAER,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/CH,eAAQ,CAACa,KAAK,CAACf,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC;AAAC"}

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

@@ -15,7 +15,7 @@ exports.AvatarGroupsStyles = AvatarGroupsStyles;
 var LengthCountStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__LengthCountStyles",
   componentId: "sc-1padv46-1"
-})(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:50%;display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], function (props) {
+})(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:100%;display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], function (props) {
   return props.size + "px";
 }, function (props) {
   return props.size + "px";

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\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: 50%;\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,2DAIxCC,oBAAS,CACZ;AAAC;AAMK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+MAG3B,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}
+{"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\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: 100%;\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,2DAIxCC,oBAAS,CACZ;AAAC;AAMK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gNAG3B,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,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,OAAc,EAGZ,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,+BAIrB,kBAAkB,iBAAiB,CAAC,gBA2BtC,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,+BAIrB,kBAAkB,iBAAiB,CAAC,gBAgCtC,CAAC"}

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Children, cloneElement } from "react";
+import React, { Children, cloneElement, useMemo } from "react";
 import { Typography } from "../Typography/Typography";
 import { AvatarGroupsStyles, LengthCountStyles } from "./Styles";
 export var AvatarGroup = function AvatarGroup(_ref) {
@@ -8,6 +8,10 @@ export var AvatarGroup = function AvatarGroup(_ref) {
     size = _ref$size === void 0 ? 34 : _ref$size,
     children = _ref.children;
   var _children = Children.toArray(children).slice(0, limit);
+  var handleVariant = useMemo(function () {
+    if (size >= 34) return "Caption 1";
+    return "Caption 2";
+  }, [size]);
   return /*#__PURE__*/React.createElement(AvatarGroupsStyles, null, _children.map(function (child) {
     var item = child;
     return /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
@@ -23,7 +27,7 @@ export var AvatarGroup = function AvatarGroup(_ref) {
       marginInlineStart: "-8px"
     }
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "Caption 1",
+    variant: handleVariant,
     weight: "medium"
   }, "+", Children.count(children) - limit)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","limit","size","children","_children","toArray","slice","map","child","item","props","style","marginInlineStart","outline","count"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  const _children = Children.toArray(children).slice(0, limit);\n\n  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) ? null : (\n        <LengthCountStyles size={size} style={{ marginInlineStart: \"-8px\" }}>\n          <Typography variant=\"Caption 1\" weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,YAAY,QAGP,OAAO;AAEd,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,UAAU;AAOhE,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAIoB;EAAA,IAH1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;EAER,IAAMC,SAAS,GAAGT,QAAQ,CAACU,OAAO,CAACF,QAAQ,CAAC,CAACG,KAAK,CAAC,CAAC,EAAEL,KAAK,CAAC;EAE5D,oBACE,oBAAC,kBAAkB,QAChBG,SAAS,CAACG,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAOZ,YAAY,CAACa,IAAI,eACnBA,IAAI,CAACC,KAAK;MACbR,IAAI,EAAEA,IAAI;MACVS,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDZ,KAAK,IAAIN,QAAQ,CAACmB,KAAK,CAACX,QAAQ,CAAC,GAAG,IAAI,gBACvC,oBAAC,iBAAiB;IAAC,IAAI,EAAED,IAAK;IAAC,KAAK,EAAE;MAAEU,iBAAiB,EAAE;IAAO;EAAE,gBAClE,oBAAC,UAAU;IAAC,OAAO,EAAC,WAAW;IAAC,MAAM,EAAC;EAAQ,QAC3CjB,QAAQ,CAACmB,KAAK,CAACX,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","Typography","AvatarGroupsStyles","LengthCountStyles","AvatarGroup","limit","size","children","_children","toArray","slice","handleVariant","map","child","item","props","style","marginInlineStart","outline","count"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Typography } from \"../Typography/Typography\";\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\n\nexport interface AvatarGroupsProps {\n  limit: number;\n  size?: number;\n}\n\nexport const AvatarGroup = ({\n  limit,\n  size = 34,\n  children,\n}: PropsWithChildren<AvatarGroupsProps>) => {\n  const _children = 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  return (\n    <AvatarGroupsStyles>\n      {_children.map((child) => {\n        const item = child as ReactElement<AvatarProps>;\n\n        return cloneElement(item, {\n          ...item.props,\n          size: size,\n          style: {\n            marginInlineStart: \"-8px\",\n            outline: \"1px solid var(--page-paper-main)\",\n          },\n        });\n      })}\n\n      {limit >= Children.count(children) ? null : (\n        <LengthCountStyles size={size} style={{ marginInlineStart: \"-8px\" }}>\n          <Typography variant={handleVariant} weight=\"medium\">\n            +{Children.count(children) - limit}\n          </Typography>\n        </LengthCountStyles>\n      )}\n    </AvatarGroupsStyles>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,YAAY,EAGZC,OAAO,QACF,OAAO;AAEd,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,UAAU;AAOhE,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAIoB;EAAA,IAH1CC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,QAAQ,QAARA,QAAQ;EAER,IAAMC,SAAS,GAAGV,QAAQ,CAACW,OAAO,CAACF,QAAQ,CAAC,CAACG,KAAK,CAAC,CAAC,EAAEL,KAAK,CAAC;EAE5D,IAAMM,aAAa,GAAGX,OAAO,CAAC,YAAM;IAClC,IAAIM,IAAI,IAAI,EAAE,EAAE,OAAO,WAAW;IAClC,OAAO,WAAW;EACpB,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACE,oBAAC,kBAAkB,QAChBE,SAAS,CAACI,GAAG,CAAC,UAACC,KAAK,EAAK;IACxB,IAAMC,IAAI,GAAGD,KAAkC;IAE/C,oBAAOd,YAAY,CAACe,IAAI,eACnBA,IAAI,CAACC,KAAK;MACbT,IAAI,EAAEA,IAAI;MACVU,KAAK,EAAE;QACLC,iBAAiB,EAAE,MAAM;QACzBC,OAAO,EAAE;MACX;IAAC,GACD;EACJ,CAAC,CAAC,EAEDb,KAAK,IAAIP,QAAQ,CAACqB,KAAK,CAACZ,QAAQ,CAAC,GAAG,IAAI,gBACvC,oBAAC,iBAAiB;IAAC,IAAI,EAAED,IAAK;IAAC,KAAK,EAAE;MAAEW,iBAAiB,EAAE;IAAO;EAAE,gBAClE,oBAAC,UAAU;IAAC,OAAO,EAAEN,aAAc;IAAC,MAAM,EAAC;EAAQ,QAC/Cb,QAAQ,CAACqB,KAAK,CAACZ,QAAQ,CAAC,GAAGF,KAAK,CACvB,CAEhB,CACkB;AAEzB,CAAC"}

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

@@ -7,7 +7,7 @@ export var AvatarGroupsStyles = styled.div.withConfig({
 export var LengthCountStyles = styled.div.withConfig({
   displayName: "Styles__LengthCountStyles",
   componentId: "sc-1padv46-1"
-})(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:50%;display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], function (props) {
+})(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:100%;display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], function (props) {
   return props.size + "px";
 }, function (props) {
   return props.size + "px";

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\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: 50%;\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,2DAIxCF,SAAS,CACZ;AAMD,OAAO,IAAMG,iBAAiB,GAAGJ,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,+MAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C"}
+{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","LengthCountStyles","props","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div`\n  display: flex;\n  cursor: pointer;\n  width: fit-content;\n  ${FontStyle}\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: 100%;\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,2DAIxCF,SAAS,CACZ;AAMD,OAAO,IAAMG,iBAAiB,GAAGJ,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gNAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,IAAI,GAAG,IAAI;AAAA,EAI5C"}

package/dist/index.js

@@ -15761,7 +15761,7 @@
   var LengthCountStyles = styled__default["default"].div.withConfig({
     displayName: "Styles__LengthCountStyles",
     componentId: "sc-1padv46-1"
-  })(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:50%;display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], function (props) {
+  })(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:100%;display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], function (props) {
     return props.size + "px";
   }, function (props) {
     return props.size + "px";
@@ -15773,6 +15773,10 @@
       size = _ref$size === void 0 ? 34 : _ref$size,
       children = _ref.children;
     var _children = React.Children.toArray(children).slice(0, limit);
+    var handleVariant = React.useMemo(function () {
+      if (size >= 34) return "Caption 1";
+      return "Caption 2";
+    }, [size]);
     return /*#__PURE__*/React__default["default"].createElement(AvatarGroupsStyles, null, _children.map(function (child) {
       var item = child;
       return /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
@@ -15788,7 +15792,7 @@
         marginInlineStart: "-8px"
       }
     }, /*#__PURE__*/React__default["default"].createElement(Typography, {
-      variant: "Caption 1",
+      variant: handleVariant,
       weight: "medium"
     }, "+", React.Children.count(children) - limit)));
   };