@activecollab/components 2.0.90 → 2.0.91

package/dist/esm/components/Avatar/Avatar.js

@@ -1,16 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Avatar = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _Styles = require("./Styles");
-var _Loaders = require("../Loaders");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { forwardRef, useState } from "react";
+import { StyledAvatar, StyledWrapper } from "./Styles";
+import { SkeletonLoader } from "../Loaders";
 /**
  * @component Avatar
  * @description
@@ -36,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @see
  * https://design.activecollab.com/docs/components/avatar
  */
-const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+export const Avatar = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     url,
     alt = "Avatar Image",
@@ -46,10 +37,10 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     children,
     ...rest
   } = _ref;
-  const [imageLoaded, setImageLoaded] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledWrapper, {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  return /*#__PURE__*/React.createElement(StyledWrapper, {
     className: className
-  }, children, /*#__PURE__*/_react.default.createElement(_Styles.StyledAvatar, (0, _extends2.default)({
+  }, children, /*#__PURE__*/React.createElement(StyledAvatar, _extends({
     ref: ref,
     src: url,
     alt: alt,
@@ -63,7 +54,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     style: {
       display: imageLoaded ? "block" : "none"
     }
-  }, rest)), !imageLoaded && /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+  }, rest)), !imageLoaded && /*#__PURE__*/React.createElement(SkeletonLoader, {
     "data-testid": "loader",
     style: {
       width: size,

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["_react","_interopRequireWildcard","require","_Styles","_Loaders","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Avatar","exports","forwardRef","_ref","ref","url","alt","size","className","imgClassName","children","rest","imageLoaded","setImageLoaded","useState","createElement","StyledWrapper","StyledAvatar","_extends2","src","width","height","onLoad","role","style","display","SkeletonLoader","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useState } from \"react\";\n\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\nimport { SkeletonLoader } from \"../Loaders\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\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  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\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 Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={ref}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          style={{ display: imageLoaded ? \"block\" : \"none\" }}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <SkeletonLoader\n            data-testid=\"loader\"\n            style={{ width: size, height: size, borderRadius: \"100%\" }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","names":["React","forwardRef","useState","StyledAvatar","StyledWrapper","SkeletonLoader","Avatar","_ref","ref","url","alt","size","className","imgClassName","children","rest","imageLoaded","setImageLoaded","createElement","_extends","src","width","height","onLoad","role","style","display","borderRadius","displayName"],"sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useState } from \"react\";\n\nimport { StyledAvatar, StyledWrapper } from \"./Styles\";\nimport { SkeletonLoader } from \"../Loaders\";\n\nexport interface AvatarProps extends React.ComponentPropsWithoutRef<\"img\"> {\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  /** img custom class. */\n  imgClassName?: string;\n}\n\n/**\n * @component Avatar\n * @description\n * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image url of the Avatar.\n * @prop {size} - controls the size of an Avatar (width and height) in pixels.\n * @prop {alt} - alt attribute of the img.\n * @prop {imgClassName} - class name that attaches to img element nested in Wrapper\n *\n * @example\n * <Avatar url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\" alt=\"Profile picture of John\" />\n *\n * @example\n * <Avatar\n *   url=\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\"\n *   alt=\"Profile picture of John\">\n *   <Badge size={8} backgroundColor=\"green\" position=\"bottom-left\" />\n * </Avatar>\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 Avatar = forwardRef<\n  HTMLImageElement,\n  PropsWithChildren<AvatarProps>\n>(\n  (\n    {\n      url,\n      alt = \"Avatar Image\",\n      size = 24,\n      className,\n      imgClassName,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n    return (\n      <StyledWrapper className={className}>\n        {children}\n\n        <StyledAvatar\n          ref={ref}\n          src={url}\n          alt={alt}\n          width={size}\n          height={size}\n          onLoad={() => {\n            setImageLoaded(true);\n          }}\n          role=\"img\"\n          className={imgClassName}\n          style={{ display: imageLoaded ? \"block\" : \"none\" }}\n          {...rest}\n        />\n        {!imageLoaded && (\n          <SkeletonLoader\n            data-testid=\"loader\"\n            style={{ width: size, height: size, borderRadius: \"100%\" }}\n          />\n        )}\n      </StyledWrapper>\n    );\n  }\n);\n\nAvatar.displayName = \"Avatar\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAqBC,QAAQ,QAAQ,OAAO;AAEtE,SAASC,YAAY,EAAEC,aAAa,QAAQ,UAAU;AACtD,SAASC,cAAc,QAAQ,YAAY;AAe3C;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,MAAMC,MAAM,gBAAGL,UAAU,CAI9B,CAAAM,IAAA,EAUEC,GAAG,KACA;EAAA,IAVH;IACEC,GAAG;IACHC,GAAG,GAAG,cAAc;IACpBC,IAAI,GAAG,EAAE;IACTC,SAAS;IACTC,YAAY;IACZC,QAAQ;IACR,GAAGC;EACL,CAAC,GAAAR,IAAA;EAGD,MAAM,CAACS,WAAW,EAAEC,cAAc,CAAC,GAAGf,QAAQ,CAAU,KAAK,CAAC;EAE9D,oBACEF,KAAA,CAAAkB,aAAA,CAACd,aAAa;IAACQ,SAAS,EAAEA;EAAU,GACjCE,QAAQ,eAETd,KAAA,CAAAkB,aAAA,CAACf,YAAY,EAAAgB,QAAA;IACXX,GAAG,EAAEA,GAAI;IACTY,GAAG,EAAEX,GAAI;IACTC,GAAG,EAAEA,GAAI;IACTW,KAAK,EAAEV,IAAK;IACZW,MAAM,EAAEX,IAAK;IACbY,MAAM,EAAEA,CAAA,KAAM;MACZN,cAAc,CAAC,IAAI,CAAC;IACtB,CAAE;IACFO,IAAI,EAAC,KAAK;IACVZ,SAAS,EAAEC,YAAa;IACxBY,KAAK,EAAE;MAAEC,OAAO,EAAEV,WAAW,GAAG,OAAO,GAAG;IAAO;EAAE,GAC/CD,IAAI,CACT,CAAC,EACD,CAACC,WAAW,iBACXhB,KAAA,CAAAkB,aAAA,CAACb,cAAc;IACb,eAAY,QAAQ;IACpBoB,KAAK,EAAE;MAAEJ,KAAK,EAAEV,IAAI;MAAEW,MAAM,EAAEX,IAAI;MAAEgB,YAAY,EAAE;IAAO;EAAE,CAC5D,CAEU,CAAC;AAEpB,CACF,CAAC;AAEDrB,MAAM,CAACsB,WAAW,GAAG,QAAQ"}

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

@@ -1,16 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledWrapper = exports.StyledAvatar = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const StyledWrapper = exports.StyledWrapper = _styledComponents.default.span.withConfig({
+import styled from "styled-components";
+export const StyledWrapper = styled.span.withConfig({
   displayName: "Styles__StyledWrapper",
   componentId: "sc-5x2tyd-0"
 })(["display:inline-flex;border-radius:100%;position:relative;"]);
-const StyledAvatar = exports.StyledAvatar = _styledComponents.default.img.withConfig({
+export const StyledAvatar = styled.img.withConfig({
   displayName: "Styles__StyledAvatar",
   componentId: "sc-5x2tyd-1"
 })(["border-radius:100%;object-fit:cover;"]);

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","StyledWrapper","exports","styled","span","withConfig","displayName","componentId","StyledAvatar","img"],"sources":["../../../../src/components/Avatar/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledWrapper = styled.span`\n  display: inline-flex;\n  border-radius: 100%;\n  position: relative;\n`;\n\nexport const StyledAvatar = styled.img`\n  border-radius: 100%;\n  object-fit: cover;\n`;\n"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEO,MAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iEAIvC;AAEM,MAAMC,YAAY,GAAAN,OAAA,CAAAM,YAAA,GAAGL,yBAAM,CAACM,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGrC"}
+{"version":3,"file":"Styles.js","names":["styled","StyledWrapper","span","withConfig","displayName","componentId","StyledAvatar","img"],"sources":["../../../../src/components/Avatar/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledWrapper = styled.span`\n  display: inline-flex;\n  border-radius: 100%;\n  position: relative;\n`;\n\nexport const StyledAvatar = styled.img`\n  border-radius: 100%;\n  object-fit: cover;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iEAIvC;AAED,OAAO,MAAMC,YAAY,GAAGN,MAAM,CAACO,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGrC"}

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

@@ -1,17 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Avatar = require("./Avatar");
-Object.keys(_Avatar).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Avatar[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Avatar[key];
-    }
-  });
-});
+export * from "./Avatar";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Avatar","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/Avatar/index.ts"],"sourcesContent":["export * from \"./Avatar\";\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Avatar/index.ts"],"sourcesContent":["export * from \"./Avatar\";\n"],"mappings":"AAAA,cAAc,UAAU"}

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

@@ -1,19 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AvatarGroup = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _react = _interopRequireWildcard(require("react"));
-var _Styles = require("./Styles");
-var _Tooltip = require("../Tooltip");
-var _Typography = require("../Typography/Typography");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _styled2 from "styled-components";
+import _styled from "styled-components";
+import React, { Children, cloneElement, useMemo, forwardRef } from "react";
+import { AvatarGroupsStyles, LengthCountStyles } from "./Styles";
+import { Tooltip } from "../Tooltip";
+import { Typography } from "../Typography/Typography";
+export const AvatarGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var _Children$toArray;
   let {
     limit,
     size = 34,
@@ -22,65 +15,65 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/(0, _react.forwardRef)((_
     ...rest
   } = _ref;
   // always display counter with min +2 as +1 can takes space of an 1 more Avatar
-  const minChildren = _react.Children.count(children) - limit > 1 ? false : true;
+  const minChildren = Children.count(children) - limit > 1 ? false : true;
   // gap between Avatars
   const gap = 8;
-  const _children = minChildren ? _react.Children.toArray(children) : _react.Children.toArray(children).slice(0, limit);
-  const handleVariant = (0, _react.useMemo)(() => {
+  const _children = minChildren ? Children.toArray(children) : Children.toArray(children).slice(0, limit);
+  const handleVariant = useMemo(() => {
     if (size >= 34) return "Caption 1";
     return "Caption 2";
   }, [size]);
 
   // get all names indexed above limit number from alt tag on Avatar for counter tooltip
-  const nameArr = _react.Children.toArray(children)?.slice(limit).map(item => {
+  const nameArr = (_Children$toArray = Children.toArray(children)) == null ? void 0 : _Children$toArray.slice(limit).map(item => {
     const {
       props
     } = item;
     return props.alt;
   });
-  return /*#__PURE__*/_react.default.createElement(_Styles.AvatarGroupsStyles, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(AvatarGroupsStyles, _extends({
     hasTooltip: hasTooltip,
     ref: ref
   }, rest), _children.map((child, index) => {
     const item = child;
     const tooltipText = item.props.alt;
-    const alt = `Image of ${tooltipText}`;
-    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    const alt = "Image of " + tooltipText;
+    return /*#__PURE__*/React.createElement(Tooltip, {
       title: tooltipText ? tooltipText : "",
       disable: !hasTooltip,
       key: alt
-    }, /*#__PURE__*/(0, _react.cloneElement)(item, {
+    }, /*#__PURE__*/cloneElement(item, {
       ...item.props,
       size: size,
       alt: alt,
       style: {
         // component preserves it's width
-        marginLeft: `-${index === 0 ? null : gap}px`,
+        marginLeft: "-" + (index === 0 ? null : gap) + "px",
         outline: "1px solid var(--page-paper-main)"
       }
     }));
-  }), limit >= _react.Children.count(children) || minChildren ? null : /*#__PURE__*/_react.default.createElement(_StyledTooltip, {
+  }), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledTooltip, {
     title: nameArr.join(",\n"),
     disable: !hasTooltip
-  }, /*#__PURE__*/_react.default.createElement(_StyledLengthCountStyles, {
+  }, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
     size: size,
     role: "status",
     "aria-label": "Rest of the users",
-    $_css: `-${gap}px`
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    $_css: "-" + gap + "px"
+  }, /*#__PURE__*/React.createElement(Typography, {
     variant: handleVariant,
     weight: "medium"
-  }, "+", _react.Children.count(children) - limit))));
+  }, "+", Children.count(children) - limit))));
 });
 AvatarGroup.displayName = "AvatarGroup";
-var _StyledTooltip = (0, _styledComponents.default)(_Tooltip.Tooltip).withConfig({
+var _StyledTooltip = _styled(Tooltip).withConfig({
   displayName: "AvatarGroup___StyledTooltip",
   componentId: "sc-1rsx1j5-0"
 })({
   whiteSpace: "break-spaces",
   lineHeight: "18px"
 });
-var _StyledLengthCountStyles = (0, _styledComponents.default)(_Styles.LengthCountStyles).withConfig({
+var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
   displayName: "AvatarGroup___StyledLengthCountStyles",
   componentId: "sc-1rsx1j5-1"
 })(p => ({

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["_react","_interopRequireWildcard","require","_Styles","_Tooltip","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AvatarGroup","exports","forwardRef","_ref","ref","limit","size","children","hasTooltip","rest","minChildren","Children","count","gap","_children","toArray","slice","handleVariant","useMemo","nameArr","map","item","props","alt","createElement","AvatarGroupsStyles","_extends2","child","index","tooltipText","Tooltip","title","disable","key","cloneElement","style","marginLeft","outline","_StyledTooltip","join","_StyledLengthCountStyles","role","$_css","Typography","variant","weight","displayName","_styledComponents","withConfig","componentId","whiteSpace","lineHeight","LengthCountStyles","p"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\n\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\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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"}
+{"version":3,"file":"AvatarGroup.js","names":["React","Children","cloneElement","useMemo","forwardRef","AvatarGroupsStyles","LengthCountStyles","Tooltip","Typography","AvatarGroup","_ref","ref","_Children$toArray","limit","size","children","hasTooltip","rest","minChildren","count","gap","_children","toArray","slice","handleVariant","nameArr","map","item","props","alt","createElement","_extends","child","index","tooltipText","title","disable","key","style","marginLeft","outline","_StyledTooltip","join","_StyledLengthCountStyles","role","$_css","variant","weight","displayName","_styled","withConfig","componentId","whiteSpace","lineHeight","p"],"sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  forwardRef,\n} from \"react\";\n\nimport { AvatarGroupsStyles, LengthCountStyles } from \"./Styles\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Typography } from \"../Typography/Typography\";\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.js

@@ -1,16 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LengthCountStyles = exports.AvatarGroupsStyles = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _FontStyle = require("../FontStyle");
-const AvatarGroupsStyles = exports.AvatarGroupsStyles = _styledComponents.default.div.withConfig({
+import styled from "styled-components";
+import { FontStyle } from "../FontStyle";
+export const AvatarGroupsStyles = styled.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["", " 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, _ref => {
+})(["", " 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, _ref => {
   let {
     hasTooltip
   } = _ref;
@@ -21,7 +14,7 @@ const AvatarGroupsStyles = exports.AvatarGroupsStyles = _styledComponents.defaul
   } = _ref2;
   return hasTooltip ? "5px 0" : "5px";
 }, props => !props.hasTooltip && "var(--color-theme-300)");
-const LengthCountStyles = exports.LengthCountStyles = _styledComponents.default.div.withConfig({
+export const LengthCountStyles = styled.div.withConfig({
   displayName: "Styles__LengthCountStyles",
   componentId: "sc-1padv46-1"
 })(["align-items:center;background-color:var(--color-theme-400);block-size:", ";border-radius:var(--ac-br-rounded);display:flex;inline-size:", ";justify-content:center;outline:1px solid var(--page-paper-main);z-index:99;"], props => props.size + "px", props => props.size + "px");

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","_FontStyle","AvatarGroupsStyles","exports","styled","div","withConfig","displayName","componentId","FontStyle","_ref","hasTooltip","_ref2","props","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gPAGxCC,oBAAS,EAIDC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAMC,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,EAGvDC,KAAA;EAAA,IAAC;IAAED;EAAW,CAAC,GAAAC,KAAA;EAAA,OAAMD,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,EAKtCE,KAAK,IACxB,CAACA,KAAK,CAACF,UAAU,IAAI,wBAAwB,CAGlD;AAMM,MAAMG,iBAAiB,GAAAX,OAAA,CAAAW,iBAAA,GAAGV,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gOAG1BK,KAAK,IAAKA,KAAK,CAACE,IAAI,GAAG,IAAI,EAG1BF,KAAK,IAAKA,KAAK,CAACE,IAAI,GAAG,IAAI,CAI5C"}
+{"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","withConfig","displayName","componentId","_ref","hasTooltip","_ref2","props","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\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;AAEtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gPAGxCL,SAAS,EAIDM,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAMC,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,EAGvDC,KAAA;EAAA,IAAC;IAAED;EAAW,CAAC,GAAAC,KAAA;EAAA,OAAMD,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,EAKtCE,KAAK,IACxB,CAACA,KAAK,CAACF,UAAU,IAAI,wBAAwB,CAGlD;AAMD,OAAO,MAAMG,iBAAiB,GAAGX,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gOAG1BI,KAAK,IAAKA,KAAK,CAACE,IAAI,GAAG,IAAI,EAG1BF,KAAK,IAAKA,KAAK,CAACE,IAAI,GAAG,IAAI,CAI5C"}

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

@@ -1,17 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _AvatarGroup = require("./AvatarGroup");
-Object.keys(_AvatarGroup).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _AvatarGroup[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _AvatarGroup[key];
-    }
-  });
-});
+export * from "./AvatarGroup";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_AvatarGroup","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/AvatarGroup/index.ts"],"sourcesContent":["export * from \"./AvatarGroup\";\n"],"mappings":";;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,YAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/AvatarGroup/index.ts"],"sourcesContent":["export * from \"./AvatarGroup\";\n"],"mappings":"AAAA,cAAc,eAAe"}

package/dist/esm/components/Badge/Badge.js

@@ -1,13 +1,6 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Badge = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Styles = require("./Styles");
+import React from "react";
+import classNames from "classnames";
+import { StyledBadge } from "./Styles";
 /**
  * @component Badge
  * @description
@@ -27,7 +20,7 @@ var _Styles = require("./Styles");
  * @see
  * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
  */
-const Badge = _ref => {
+export const Badge = _ref => {
   let {
     dimension = 8,
     className,
@@ -36,8 +29,8 @@ const Badge = _ref => {
     value,
     isStandalone = false
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
-    className: (0, _classnames.default)("c-badge", className),
+  return /*#__PURE__*/React.createElement(StyledBadge, {
+    className: classNames("c-badge", className),
     dimension: dimension,
     position: position,
     isStandalone: isStandalone,
@@ -46,5 +39,4 @@ const Badge = _ref => {
     value: value
   }, value && value > 100 ? 99 + "+" : value);
 };
-exports.Badge = Badge;
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["_react","_interopRequireDefault","require","_classnames","_Styles","Badge","_ref","dimension","className","position","backgroundColor","value","isStandalone","default","createElement","StyledBadge","classNames","role","exports"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n  position?: Position;\n  dimension?: number;\n  className?: string;\n  backgroundColor?: string;\n  value?: number;\n  isStandalone?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n *   <BellOffIcon />\n *   <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n  dimension = 8,\n  className,\n  position = \"bottom-left\",\n  backgroundColor,\n\n  value,\n  isStandalone = false,\n}: BadgeProps) => {\n  return (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      isStandalone={isStandalone}\n      backgroundColor={backgroundColor}\n      role=\"status\"\n      value={value}\n    >\n      {value && value > 100 ? 99 + \"+\" : value}\n    </StyledBadge>\n  );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,KAAK,GAAGC,IAAA,IAQH;EAAA,IARI;IACpBC,SAAS,GAAG,CAAC;IACbC,SAAS;IACTC,QAAQ,GAAG,aAAa;IACxBC,eAAe;IAEfC,KAAK;IACLC,YAAY,GAAG;EACL,CAAC,GAAAN,IAAA;EACX,oBACEN,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,OAAA,CAAAW,WAAW;IACVP,SAAS,EAAE,IAAAQ,mBAAU,EAAC,SAAS,EAAER,SAAS,CAAE;IAC5CD,SAAS,EAAEA,SAAU;IACrBE,QAAQ,EAAEA,QAAS;IACnBG,YAAY,EAAEA,YAAa;IAC3BF,eAAe,EAAEA,eAAgB;IACjCO,IAAI,EAAC,QAAQ;IACbN,KAAK,EAAEA;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KACxB,CAAC;AAElB,CAAC;AAACO,OAAA,CAAAb,KAAA,GAAAA,KAAA"}
+{"version":3,"file":"Badge.js","names":["React","classNames","StyledBadge","Badge","_ref","dimension","className","position","backgroundColor","value","isStandalone","createElement","role"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n  position?: Position;\n  dimension?: number;\n  className?: string;\n  backgroundColor?: string;\n  value?: number;\n  isStandalone?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n *   <BellOffIcon />\n *   <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n  dimension = 8,\n  className,\n  position = \"bottom-left\",\n  backgroundColor,\n\n  value,\n  isStandalone = false,\n}: BadgeProps) => {\n  return (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      isStandalone={isStandalone}\n      backgroundColor={backgroundColor}\n      role=\"status\"\n      value={value}\n    >\n      {value && value > 100 ? 99 + \"+\" : value}\n    </StyledBadge>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,WAAW,QAAQ,UAAU;AAatC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGC,IAAA,IAQH;EAAA,IARI;IACpBC,SAAS,GAAG,CAAC;IACbC,SAAS;IACTC,QAAQ,GAAG,aAAa;IACxBC,eAAe;IAEfC,KAAK;IACLC,YAAY,GAAG;EACL,CAAC,GAAAN,IAAA;EACX,oBACEJ,KAAA,CAAAW,aAAA,CAACT,WAAW;IACVI,SAAS,EAAEL,UAAU,CAAC,SAAS,EAAEK,SAAS,CAAE;IAC5CD,SAAS,EAAEA,SAAU;IACrBE,QAAQ,EAAEA,QAAS;IACnBG,YAAY,EAAEA,YAAa;IAC3BF,eAAe,EAAEA,eAAgB;IACjCI,IAAI,EAAC,QAAQ;IACbH,KAAK,EAAEA;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KACxB,CAAC;AAElB,CAAC"}

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

@@ -1,40 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledBadge = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _FontStyle = require("../FontStyle");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledBadge = exports.StyledBadge = _styledComponents.default.div.withConfig({
+import styled, { css } from "styled-components";
+import { FontStyle } from "../FontStyle";
+export const StyledBadge = styled.div.withConfig({
   displayName: "Styles__StyledBadge",
   componentId: "sc-6o8do5-0"
-})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], _FontStyle.FontStyle, props => !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor, props => props.isStandalone ? "none" : "2px solid var(--page-paper-main)", props => props.dimension + "px", props => props.dimension + "px", props => props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px"), _ref => {
+})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], FontStyle, props => !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor, props => props.isStandalone ? "none" : "2px solid var(--page-paper-main)", props => props.dimension + "px", props => props.dimension + "px", props => props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px"), _ref => {
   let {
     isStandalone
   } = _ref;
-  return isStandalone && (0, _styledComponents.css)(["position:static;z-index:0;"]);
+  return isStandalone && css(["position:static;z-index:0;"]);
 }, _ref2 => {
   let {
     position
   } = _ref2;
-  return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);
+  return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
 }, _ref3 => {
   let {
     position
   } = _ref3;
-  return position === "top-right" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-end:0;"]);
+  return position === "top-right" && css(["inset-block-start:0;inset-inline-end:0;"]);
 }, _ref4 => {
   let {
     position
   } = _ref4;
-  return position === "bottom-right" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-end:0;"]);
+  return position === "bottom-right" && css(["inset-block-end:0;inset-inline-end:0;"]);
 }, _ref5 => {
   let {
     position
   } = _ref5;
-  return position === "bottom-left" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-start:0;"]);
+  return position === "bottom-left" && css(["inset-block-end:0;inset-inline-start:0;"]);
 });
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledBadge","exports","styled","div","withConfig","displayName","componentId","FontStyle","props","backgroundColor","isStandalone","dimension","value","_ref","css","_ref2","position","_ref3","_ref4","_ref5"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BadgeProps } from \"./Badge\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n  ${FontStyle}\n  align-items: center;\n  background-color: ${(props) =>\n    !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n  border: ${(props) =>\n    props.isStandalone ? \"none\" : \"2px solid var(--page-paper-main)\"};\n  block-size: ${(props) => props.dimension + \"px\"};\n  border-radius: 100%;\n  color: var(--color-theme-100);\n  display: flex;\n  font-size: 10px;\n  font-weight: 500;\n  inline-size: ${(props) => props.dimension + \"px\"};\n  justify-content: center;\n  padding: ${(props) =>\n    props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n  pointer-events: none;\n  position: absolute;\n  z-index: 1;\n\n  ${({ isStandalone }) =>\n    isStandalone &&\n    css`\n      position: static;\n      z-index: 0;\n    `}\n\n  ${({ position }) =>\n    position === \"top-left\" &&\n    css`\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    `}\n\n  ${({ position }) =>\n    position === \"top-right\" &&\n    css`\n      inset-block-start: 0;\n      inset-inline-end: 0;\n    `}\n\n    ${({ position }) =>\n    position === \"bottom-right\" &&\n    css`\n      inset-block-end: 0;\n      inset-inline-end: 0;\n    `}\n\n    ${({ position }) =>\n    position === \"bottom-left\" &&\n    css`\n      inset-block-end: 0;\n      inset-inline-start: 0;\n    `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,UAAA,GAAAD,OAAA;AAAyC,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAElC,MAAMY,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4SACjCC,oBAAS,EAEUC,KAAK,IACxB,CAACA,KAAK,CAACC,eAAe,GAAG,sBAAsB,GAAGD,KAAK,CAACC,eAAe,EAC9DD,KAAK,IACdA,KAAK,CAACE,YAAY,GAAG,MAAM,GAAG,kCAAkC,EACnDF,KAAK,IAAKA,KAAK,CAACG,SAAS,GAAG,IAAI,EAM/BH,KAAK,IAAKA,KAAK,CAACG,SAAS,GAAG,IAAI,EAEpCH,KAAK,IACfA,KAAK,CAACI,KAAK,KAAKJ,KAAK,CAACI,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGJ,KAAK,CAACI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC,EAKtEC,IAAA;EAAA,IAAC;IAAEH;EAAa,CAAC,GAAAG,IAAA;EAAA,OACjBH,YAAY,QACZI,qBAAG,iCAGF;AAAA,GAEDC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACbC,QAAQ,KAAK,UAAU,QACvBF,qBAAG,gDAGF;AAAA,GAEDG,KAAA;EAAA,IAAC;IAAED;EAAS,CAAC,GAAAC,KAAA;EAAA,OACbD,QAAQ,KAAK,WAAW,QACxBF,qBAAG,8CAGF;AAAA,GAECI,KAAA;EAAA,IAAC;IAAEF;EAAS,CAAC,GAAAE,KAAA;EAAA,OACfF,QAAQ,KAAK,cAAc,QAC3BF,qBAAG,4CAGF;AAAA,GAECK,KAAA;EAAA,IAAC;IAAEH;EAAS,CAAC,GAAAG,KAAA;EAAA,OACfH,QAAQ,KAAK,aAAa,QAC1BF,qBAAG,8CAGF;AAAA,EACJ"}
+{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","StyledBadge","div","withConfig","displayName","componentId","props","backgroundColor","isStandalone","dimension","value","_ref","_ref2","position","_ref3","_ref4","_ref5"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BadgeProps } from \"./Badge\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n  ${FontStyle}\n  align-items: center;\n  background-color: ${(props) =>\n    !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n  border: ${(props) =>\n    props.isStandalone ? \"none\" : \"2px solid var(--page-paper-main)\"};\n  block-size: ${(props) => props.dimension + \"px\"};\n  border-radius: 100%;\n  color: var(--color-theme-100);\n  display: flex;\n  font-size: 10px;\n  font-weight: 500;\n  inline-size: ${(props) => props.dimension + \"px\"};\n  justify-content: center;\n  padding: ${(props) =>\n    props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n  pointer-events: none;\n  position: absolute;\n  z-index: 1;\n\n  ${({ isStandalone }) =>\n    isStandalone &&\n    css`\n      position: static;\n      z-index: 0;\n    `}\n\n  ${({ position }) =>\n    position === \"top-left\" &&\n    css`\n      inset-block-start: 0;\n      inset-inline-start: 0;\n    `}\n\n  ${({ position }) =>\n    position === \"top-right\" &&\n    css`\n      inset-block-start: 0;\n      inset-inline-end: 0;\n    `}\n\n    ${({ position }) =>\n    position === \"bottom-right\" &&\n    css`\n      inset-block-end: 0;\n      inset-inline-end: 0;\n    `}\n\n    ${({ position }) =>\n    position === \"bottom-left\" &&\n    css`\n      inset-block-end: 0;\n      inset-inline-start: 0;\n    `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,WAAW,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4SACjCL,SAAS,EAEUM,KAAK,IACxB,CAACA,KAAK,CAACC,eAAe,GAAG,sBAAsB,GAAGD,KAAK,CAACC,eAAe,EAC9DD,KAAK,IACdA,KAAK,CAACE,YAAY,GAAG,MAAM,GAAG,kCAAkC,EACnDF,KAAK,IAAKA,KAAK,CAACG,SAAS,GAAG,IAAI,EAM/BH,KAAK,IAAKA,KAAK,CAACG,SAAS,GAAG,IAAI,EAEpCH,KAAK,IACfA,KAAK,CAACI,KAAK,KAAKJ,KAAK,CAACI,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGJ,KAAK,CAACI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC,EAKtEC,IAAA;EAAA,IAAC;IAAEH;EAAa,CAAC,GAAAG,IAAA;EAAA,OACjBH,YAAY,IACZT,GAAG,gCAGF;AAAA,GAEDa,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACbC,QAAQ,KAAK,UAAU,IACvBd,GAAG,+CAGF;AAAA,GAEDe,KAAA;EAAA,IAAC;IAAED;EAAS,CAAC,GAAAC,KAAA;EAAA,OACbD,QAAQ,KAAK,WAAW,IACxBd,GAAG,6CAGF;AAAA,GAECgB,KAAA;EAAA,IAAC;IAAEF;EAAS,CAAC,GAAAE,KAAA;EAAA,OACfF,QAAQ,KAAK,cAAc,IAC3Bd,GAAG,2CAGF;AAAA,GAECiB,KAAA;EAAA,IAAC;IAAEH;EAAS,CAAC,GAAAG,KAAA;EAAA,OACfH,QAAQ,KAAK,aAAa,IAC1Bd,GAAG,6CAGF;AAAA,EACJ"}

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

@@ -1,17 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Badge = require("./Badge");
-Object.keys(_Badge).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Badge[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Badge[key];
-    }
-  });
-});
+export * from "./Badge";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Badge","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/Badge/index.ts"],"sourcesContent":["export * from \"./Badge\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Badge/index.ts"],"sourcesContent":["export * from \"./Badge\";\n"],"mappings":"AAAA,cAAc,SAAS"}

package/dist/esm/components/BoxSizingStyle.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BoxSizingStyle = void 0;
-var _styledComponents = require("styled-components");
-const BoxSizingStyle = exports.BoxSizingStyle = (0, _styledComponents.css)(["box-sizing:border-box;*{box-sizing:border-box;}"]);
+import { css } from "styled-components";
+export const BoxSizingStyle = css(["box-sizing:border-box;*{box-sizing:border-box;}"]);
 //# sourceMappingURL=BoxSizingStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BoxSizingStyle.js","names":["_styledComponents","require","BoxSizingStyle","exports","css"],"sources":["../../../src/components/BoxSizingStyle.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const BoxSizingStyle = css`\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEO,MAAMC,cAAc,GAAAC,OAAA,CAAAD,cAAA,OAAGE,qBAAG,sDAKhC"}
+{"version":3,"file":"BoxSizingStyle.js","names":["css","BoxSizingStyle"],"sources":["../../../src/components/BoxSizingStyle.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const BoxSizingStyle = css`\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n`;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,mBAAmB;AAEvC,OAAO,MAAMC,cAAc,GAAGD,GAAG,qDAKhC"}