@activecollab/components 1.0.267 → 1.0.268

package/dist/cjs/components/Badge/Badge.js

@@ -37,14 +37,16 @@ var Badge = function Badge(_ref) {
     _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
     _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    value = _ref.value;
   return isVisible ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
     className: (0, _classnames.default)("c-badge", className),
     dimension: dimension,
     position: position,
     backgroundColor: backgroundColor,
-    role: "status"
-  }) : null;
+    role: "status",
+    value: value
+  }, value && value > 100 ? 99 + "+" : value) : null;
 };
 exports.Badge = Badge;
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","isVisible","classNames"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\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  isVisible?: 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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n  isVisible = true,\n}: BadgeProps) => {\n  return isVisible ? (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      backgroundColor={backgroundColor}\n      role=\"status\"\n    />\n  ) : null;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAuC;AAYvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,0BALhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;EAEhB,OAAOA,SAAS,gBACd,6BAAC,mBAAW;IACV,SAAS,EAAE,IAAAC,mBAAU,EAAC,SAAS,EAAEJ,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC;EAAQ,EACb,GACA,IAAI;AACV,CAAC;AAAC"}
+{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","isVisible","value","classNames"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\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  isVisible?: boolean;\n  value?: number;\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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n  isVisible = true,\n  value,\n}: BadgeProps) => {\n  return isVisible ? (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      backgroundColor={backgroundColor}\n      role=\"status\"\n      value={value}\n    >\n      {value && value > 100 ? 99 + \"+\" : value}\n    </StyledBadge>\n  ) : null;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAuC;AAavC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,0BANhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,KAAK,QAALA,KAAK;EAEL,OAAOD,SAAS,gBACd,6BAAC,mBAAW;IACV,SAAS,EAAE,IAAAE,mBAAU,EAAC,SAAS,EAAEL,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEE;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B,GACZ,IAAI;AACV,CAAC;AAAC"}

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

@@ -6,17 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledBadge = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _FontStyle = require("../FontStyle");
 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; }
 var StyledBadge = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledBadge",
   componentId: "sc-6o8do5-0"
-})(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";position:absolute;pointer-events:none;z-index:1;", " ", " ", " ", ""], function (props) {
+})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], _FontStyle.FontStyle, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.dimension + "px";
 }, function (props) {
   return props.dimension + "px";
+}, function (props) {
+  return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
 }, function (_ref) {
   var position = _ref.position;
   return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","props","backgroundColor","dimension","position","css"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n  background-color: ${(props) => props.backgroundColor};\n  block-size: ${(props) => props.dimension + \"px\"};\n  border-radius: 100%;\n  border: 2px solid var(--page-paper-main);\n  inline-size: ${(props) => props.dimension + \"px\"};\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\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;AAAgD;AAAA;AAGzC,IAAMA,WAAW,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,8LACf,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAGhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAK9C;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,QACvBC,qBAAG,gDAGF;AAAA,GAED;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,QACxBC,qBAAG,8CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,QAC3BC,qBAAG,4CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,QAC1BC,qBAAG,8CAGF;AAAA,EACJ;AAAC"}
+{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","FontStyle","props","backgroundColor","dimension","value","position","css"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n  ${FontStyle}\n  align-items: center;\n  background-color: ${(props) => props.backgroundColor};\n  block-size: ${(props) => props.dimension + \"px\"};\n  border-radius: 100%;\n  border: 2px solid var(--page-paper-main);\n  color: var(--color-theme-100);\n  display: flex;\n  font-size: 12px;\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  ${({ 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;AACA;AAAyC;AAAA;AAGlC,IAAMA,WAAW,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,mUACjCC,oBAAS,EAES,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAOhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAErC,UAACF,KAAK;EAAA,OACfA,KAAK,CAACG,KAAK,KAAKH,KAAK,CAACG,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,QACvBC,qBAAG,gDAGF;AAAA,GAED;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,QACxBC,qBAAG,8CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,QAC3BC,qBAAG,4CAGF;AAAA,GAEC;EAAA,IAAGD,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,QAC1BC,qBAAG,8CAGF;AAAA,EACJ;AAAC"}

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

@@ -6,6 +6,7 @@ export interface BadgeProps {
     className?: string;
     backgroundColor?: string;
     isVisible?: boolean;
+    value?: number;
 }
 /**
  * @component Badge
@@ -27,6 +28,6 @@ export interface BadgeProps {
  * @see
  * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
  */
-export declare const Badge: ({ dimension, className, position, backgroundColor, isVisible, }: BadgeProps) => JSX.Element | null;
+export declare const Badge: ({ dimension, className, position, backgroundColor, isVisible, value, }: BadgeProps) => JSX.Element | null;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,oEAMf,UAAU,uBAUZ,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,KAAK,2EAOf,UAAU,uBAaZ,CAAC"}

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

@@ -30,13 +30,15 @@ export var Badge = function Badge(_ref) {
     _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
     _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    value = _ref.value;
   return isVisible ? /*#__PURE__*/React.createElement(StyledBadge, {
     className: classNames("c-badge", className),
     dimension: dimension,
     position: position,
     backgroundColor: backgroundColor,
-    role: "status"
-  }) : null;
+    role: "status",
+    value: value
+  }, value && value > 100 ? 99 + "+" : value) : null;
 };
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","isVisible"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\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  isVisible?: 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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n  isVisible = true,\n}: BadgeProps) => {\n  return isVisible ? (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      backgroundColor={backgroundColor}\n      role=\"status\"\n    />\n  ) : null;\n};\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,UAAU;AAYtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAMA;EAAA,0BALhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;EAEhB,OAAOA,SAAS,gBACd,oBAAC,WAAW;IACV,SAAS,EAAER,UAAU,CAAC,SAAS,EAAEK,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC;EAAQ,EACb,GACA,IAAI;AACV,CAAC"}
+{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","isVisible","value"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\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  isVisible?: boolean;\n  value?: number;\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 * @prop {isVisible} - dictates if badge should be visible or not.\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 = \"#40C37D\",\n  isVisible = true,\n  value,\n}: BadgeProps) => {\n  return isVisible ? (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      backgroundColor={backgroundColor}\n      role=\"status\"\n      value={value}\n    >\n      {value && value > 100 ? 99 + \"+\" : value}\n    </StyledBadge>\n  ) : null;\n};\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,UAAU;AAatC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,0BANhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IAAA,4BACxBC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,KAAK,QAALA,KAAK;EAEL,OAAOD,SAAS,gBACd,oBAAC,WAAW;IACV,SAAS,EAAER,UAAU,CAAC,SAAS,EAAEK,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,eAAe,EAAEC,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEE;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B,GACZ,IAAI;AACV,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,qFAqCvB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,qFA8CvB,CAAC"}

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

@@ -1,13 +1,16 @@
 import styled, { css } from "styled-components";
+import { FontStyle } from "../FontStyle";
 export var StyledBadge = styled.div.withConfig({
   displayName: "Styles__StyledBadge",
   componentId: "sc-6o8do5-0"
-})(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";position:absolute;pointer-events:none;z-index:1;", " ", " ", " ", ""], function (props) {
+})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.dimension + "px";
 }, function (props) {
   return props.dimension + "px";
+}, function (props) {
+  return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
 }, function (_ref) {
   var position = _ref.position;
   return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","StyledBadge","div","props","backgroundColor","dimension","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n  background-color: ${(props) => props.backgroundColor};\n  block-size: ${(props) => props.dimension + \"px\"};\n  border-radius: 100%;\n  border: 2px solid var(--page-paper-main);\n  inline-size: ${(props) => props.dimension + \"px\"};\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\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,OAAO,IAAMC,WAAW,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,8LACf,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAGhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAK9C;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvBN,GAAG,+CAGF;AAAA,GAED;EAAA,IAAGM,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxBN,GAAG,6CAGF;AAAA,GAEC;EAAA,IAAGM,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3BN,GAAG,2CAGF;AAAA,GAEC;EAAA,IAAGM,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1BN,GAAG,6CAGF;AAAA,EACJ"}
+{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","StyledBadge","div","props","backgroundColor","dimension","value","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n  ${FontStyle}\n  align-items: center;\n  background-color: ${(props) => props.backgroundColor};\n  block-size: ${(props) => props.dimension + \"px\"};\n  border-radius: 100%;\n  border: 2px solid var(--page-paper-main);\n  color: var(--color-theme-100);\n  display: flex;\n  font-size: 12px;\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  ${({ 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;AAC/C,SAASC,SAAS,QAAQ,cAAc;AAGxC,OAAO,IAAMC,WAAW,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,mUACjCF,SAAS,EAES,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACC,eAAe;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAOhC,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,SAAS,GAAG,IAAI;AAAA,GAErC,UAACF,KAAK;EAAA,OACfA,KAAK,CAACG,KAAK,KAAKH,KAAK,CAACG,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGC,QAAQ,QAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvBR,GAAG,+CAGF;AAAA,GAED;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxBR,GAAG,6CAGF;AAAA,GAEC;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3BR,GAAG,2CAGF;AAAA,GAEC;EAAA,IAAGQ,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1BR,GAAG,6CAGF;AAAA,EACJ"}

package/dist/index.js

@@ -15693,12 +15693,14 @@
   var StyledBadge = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledBadge",
     componentId: "sc-6o8do5-0"
-  })(["background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);inline-size:", ";position:absolute;pointer-events:none;z-index:1;", " ", " ", " ", ""], function (props) {
+  })(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
     return props.backgroundColor;
   }, function (props) {
     return props.dimension + "px";
   }, function (props) {
     return props.dimension + "px";
+  }, function (props) {
+    return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
   }, function (_ref) {
     var position = _ref.position;
     return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
@@ -15742,14 +15744,16 @@
       _ref$backgroundColor = _ref.backgroundColor,
       backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
       _ref$isVisible = _ref.isVisible,
-      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible;
+      isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+      value = _ref.value;
     return isVisible ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
       className: classNames__default["default"]("c-badge", className),
       dimension: dimension,
       position: position,
       backgroundColor: backgroundColor,
-      role: "status"
-    }) : null;
+      role: "status",
+      value: value
+    }, value && value > 100 ? 99 + "+" : value) : null;
   };
 
   exports.Accordion = Accordion;