@activecollab/components 2.0.395 → 2.0.397

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

@@ -8,24 +8,35 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Styles = require("./Styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var getLabel = function getLabel(value, cap) {
+  if (!value) {
+    return null;
+  }
+  return cap && value > cap ? "".concat(cap, "+") : value;
+};
+
 /**
  * @component Badge
  * @description
- * In some products, you might need to show a badge on the right corner of the avatar.
- * We call this a badge. Here's an example that shows if the user is online.
+ * A small pill that sits on the corner of an avatar or an icon, or stands in a
+ * row on its own. It shows a count, or nothing at all when it marks a state.
  *
  * @prop {position} - dictates the position of a badge.
- * @prop {dimension} - controls the size of a badge (width and height) in pixels.
+ * @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.
+ * @prop {shape} - "pill" adds horizontal padding so the badge reads as long.
+ * @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.
  * @prop {backgroundColor} - background-color of a badge.
+ * @prop {textColor} - color of the number.
+ * @prop {isStandalone} - takes the badge out of absolute positioning.
  *
  * @example
  * <IconButton variant="text gray" size="big">
  *   <BellOffIcon />
- *   <Badge position="top-right" backgroundColor="red" dimension={16} />
+ *   <Badge position="top-right" backgroundColor="var(--red-alert)" dimension={16} value={7} cap={99} />
  * </IconButton>
  *
  * @see
- * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
+ * https://system.activecollab.com/?path=/story/components-indicators-badge--badge
  */
 var Badge = exports.Badge = function Badge(_ref) {
   var _ref$dimension = _ref.dimension,
@@ -34,17 +45,27 @@ var Badge = exports.Badge = function Badge(_ref) {
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? "bottom-left" : _ref$position,
     backgroundColor = _ref.backgroundColor,
+    textColor = _ref.textColor,
     value = _ref.value,
+    cap = _ref.cap,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "circle" : _ref$shape,
+    _ref$shadows = _ref.shadows,
+    shadows = _ref$shadows === void 0 ? false : _ref$shadows,
     _ref$isStandalone = _ref.isStandalone,
     isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
+  var label = getLabel(value, cap);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
     className: (0, _classnames.default)("c-badge", className),
     dimension: dimension,
     position: position,
+    shape: shape,
+    shadows: shadows,
+    hasLabel: label !== null,
     isStandalone: isStandalone,
     backgroundColor: backgroundColor,
-    role: "status",
-    value: value
-  }, value && value > 100 ? 99 + "+" : value);
+    textColor: textColor,
+    role: "status"
+  }, label);
 };
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["_react","_interopRequireDefault","require","_classnames","_Styles","e","__esModule","default","Badge","exports","_ref","_ref$dimension","dimension","className","_ref$position","position","backgroundColor","value","_ref$isStandalone","isStandalone","createElement","StyledBadge","classNames","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAAuC,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAavC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,SAARA,KAAKA,CAAAE,IAAA,EAQA;EAAA,IAAAC,cAAA,GAAAD,IAAA,CAPhBE,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,CAAC,GAAAA,cAAA;IACbE,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,aAAA,GAAAJ,IAAA,CACTK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,aAAa,GAAAA,aAAA;IACxBE,eAAe,GAAAN,IAAA,CAAfM,eAAe;IAEfC,KAAK,GAAAP,IAAA,CAALO,KAAK;IAAAC,iBAAA,GAAAR,IAAA,CACLS,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,KAAK,GAAAA,iBAAA;EAEpB,oBACElB,MAAA,CAAAO,OAAA,CAAAa,aAAA,CAAChB,OAAA,CAAAiB,WAAW;IACVR,SAAS,EAAE,IAAAS,mBAAU,EAAC,SAAS,EAAET,SAAS,CAAE;IAC5CD,SAAS,EAAEA,SAAU;IACrBG,QAAQ,EAAEA,QAAS;IACnBI,YAAY,EAAEA,YAAa;IAC3BH,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","ignoreList":[]}
+{"version":3,"file":"Badge.js","names":["_react","_interopRequireDefault","require","_classnames","_Styles","e","__esModule","default","getLabel","value","cap","concat","Badge","exports","_ref","_ref$dimension","dimension","className","_ref$position","position","backgroundColor","textColor","_ref$shape","shape","_ref$shadows","shadows","_ref$isStandalone","isStandalone","label","createElement","StyledBadge","classNames","hasLabel","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\";\ntype Shape = \"circle\" | \"pill\";\n\nexport interface BadgeProps {\n  position?: Position;\n  dimension?: number;\n  className?: string;\n  backgroundColor?: string;\n  textColor?: string;\n  value?: number;\n  cap?: number;\n  shape?: Shape;\n  shadows?: boolean;\n  isStandalone?: boolean;\n}\n\nconst getLabel = (value?: number, cap?: number) => {\n  if (!value) {\n    return null;\n  }\n\n  return cap && value > cap ? `${cap}+` : value;\n};\n\n/**\n * @component Badge\n * @description\n * A small pill that sits on the corner of an avatar or an icon, or stands in a\n * row on its own. It shows a count, or nothing at all when it marks a state.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.\n * @prop {shape} - \"pill\" adds horizontal padding so the badge reads as long.\n * @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.\n * @prop {backgroundColor} - background-color of a badge.\n * @prop {textColor} - color of the number.\n * @prop {isStandalone} - takes the badge out of absolute positioning.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n *   <BellOffIcon />\n *   <Badge position=\"top-right\" backgroundColor=\"var(--red-alert)\" dimension={16} value={7} cap={99} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-indicators-badge--badge\n */\nexport const Badge = ({\n  dimension = 8,\n  className,\n  position = \"bottom-left\",\n  backgroundColor,\n  textColor,\n  value,\n  cap,\n  shape = \"circle\",\n  shadows = false,\n  isStandalone = false,\n}: BadgeProps) => {\n  const label = getLabel(value, cap);\n\n  return (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      shape={shape}\n      shadows={shadows}\n      hasLabel={label !== null}\n      isStandalone={isStandalone}\n      backgroundColor={backgroundColor}\n      textColor={textColor}\n      role=\"status\"\n    >\n      {label}\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;AAAuC,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAkBvC,IAAMG,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,KAAc,EAAEC,GAAY,EAAK;EACjD,IAAI,CAACD,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,OAAOC,GAAG,IAAID,KAAK,GAAGC,GAAG,MAAAC,MAAA,CAAMD,GAAG,SAAMD,KAAK;AAC/C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,SAARA,KAAKA,CAAAE,IAAA,EAWA;EAAA,IAAAC,cAAA,GAAAD,IAAA,CAVhBE,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,CAAC,GAAAA,cAAA;IACbE,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,aAAA,GAAAJ,IAAA,CACTK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,aAAa,GAAAA,aAAA;IACxBE,eAAe,GAAAN,IAAA,CAAfM,eAAe;IACfC,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTZ,KAAK,GAAAK,IAAA,CAALL,KAAK;IACLC,GAAG,GAAAI,IAAA,CAAHJ,GAAG;IAAAY,UAAA,GAAAR,IAAA,CACHS,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,QAAQ,GAAAA,UAAA;IAAAE,YAAA,GAAAV,IAAA,CAChBW,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAE,iBAAA,GAAAZ,IAAA,CACfa,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,KAAK,GAAAA,iBAAA;EAEpB,IAAME,KAAK,GAAGpB,QAAQ,CAACC,KAAK,EAAEC,GAAG,CAAC;EAElC,oBACEV,MAAA,CAAAO,OAAA,CAAAsB,aAAA,CAACzB,OAAA,CAAA0B,WAAW;IACVb,SAAS,EAAE,IAAAc,mBAAU,EAAC,SAAS,EAAEd,SAAS,CAAE;IAC5CD,SAAS,EAAEA,SAAU;IACrBG,QAAQ,EAAEA,QAAS;IACnBI,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBO,QAAQ,EAAEJ,KAAK,KAAK,IAAK;IACzBD,YAAY,EAAEA,YAAa;IAC3BP,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBY,IAAI,EAAC;EAAQ,GAEZL,KACU,CAAC;AAElB,CAAC","ignoreList":[]}

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

@@ -7,33 +7,63 @@ exports.StyledBadge = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _FontStyle = require("../FontStyle");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var DEFAULT_DIMENSION = 8;
+var LARGE_FONT_FROM_DIMENSION = 18;
+var CIRCLE_PADDING_INLINE = 5;
+var PILL_PADDING_INLINE = 10;
+var DIGIT_INLINE_SIZE = 7;
+var SMALL_CIRCLE_BELOW_DIMENSION = 16;
+var dimensionOf = function dimensionOf(props) {
+  var _props$dimension;
+  return (_props$dimension = props.dimension) !== null && _props$dimension !== void 0 ? _props$dimension : DEFAULT_DIMENSION;
+};
+var paddingInlineOf = function paddingInlineOf(props) {
+  if (!props.hasLabel) {
+    return 0;
+  }
+  if (props.shape === "pill") {
+    return PILL_PADDING_INLINE;
+  }
+  var dimension = dimensionOf(props);
+  if (dimension >= SMALL_CIRCLE_BELOW_DIMENSION) {
+    return CIRCLE_PADDING_INLINE;
+  }
+
+  // A small circle keeps a single digit inside its box only with less padding.
+  return Math.max(0, Math.floor((dimension - DIGIT_INLINE_SIZE) / 2));
+};
 var StyledBadge = exports.StyledBadge = _styledComponents.default.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, function (props) {
+})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:999px;box-sizing:border-box;color:", ";display:flex;font-size:", ";font-variant-numeric:tabular-nums;font-weight:700;inline-size:auto;justify-content:center;min-inline-size:", ";padding-inline:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, function (props) {
   return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
 }, function (props) {
-  return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
+  return dimensionOf(props) + "px";
+}, function (props) {
+  return !props.textColor ? "var(--color-theme-100)" : props.textColor;
 }, function (props) {
-  return props.dimension + "px";
+  return dimensionOf(props) >= LARGE_FONT_FROM_DIMENSION ? "12px" : "10px";
 }, function (props) {
-  return props.dimension + "px";
+  return dimensionOf(props) + "px";
 }, function (props) {
-  return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
+  return paddingInlineOf(props) + "px";
 }, function (_ref) {
-  var isStandalone = _ref.isStandalone;
-  return isStandalone && (0, _styledComponents.css)(["position:static;z-index:0;"]);
+  var shadows = _ref.shadows;
+  return shadows && (0, _styledComponents.css)(["box-shadow:var(--shadow-tertiary);text-shadow:0 1px 2px rgba(0,0,0,0.25);"]);
 }, function (_ref2) {
-  var position = _ref2.position;
-  return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);
+  var isStandalone = _ref2.isStandalone;
+  return isStandalone && (0, _styledComponents.css)(["position:static;z-index:0;"]);
 }, function (_ref3) {
   var position = _ref3.position;
-  return position === "top-right" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-end:0;"]);
+  return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);
 }, function (_ref4) {
   var position = _ref4.position;
-  return position === "bottom-right" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-end:0;"]);
+  return position === "top-right" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-end:0;"]);
 }, function (_ref5) {
   var position = _ref5.position;
+  return position === "bottom-right" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-end:0;"]);
+}, function (_ref6) {
+  var position = _ref6.position;
   return position === "bottom-left" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-start:0;"]);
 });
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_FontStyle","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,wBAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElC,IAAMmB,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4SACjCC,oBAAS,EAES,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,eAAe,GAAG,sBAAsB,GAAGD,KAAK,CAACC,eAAe;AAAA,GAC/D,UAACD,KAAK;EAAA,OACdA,KAAK,CAACE,YAAY,GAAG,MAAM,GAAG,kCAAkC;AAAA,GACpD,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAMhC,UAACH,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAErC,UAACH,KAAK;EAAA,OACfA,KAAK,CAACI,KAAK,KAAKJ,KAAK,CAACI,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGJ,KAAK,CAACI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE,UAAAC,IAAA;EAAA,IAAGH,YAAY,GAAAG,IAAA,CAAZH,YAAY;EAAA,OACfA,YAAY,QACZI,qBAAG,iCAGF;AAAA,GAED,UAAAC,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,QACvBF,qBAAG,gDAGF;AAAA,GAED,UAAAG,KAAA;EAAA,IAAGD,QAAQ,GAAAC,KAAA,CAARD,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,QACxBF,qBAAG,8CAGF;AAAA,GAEC,UAAAI,KAAA;EAAA,IAAGF,QAAQ,GAAAE,KAAA,CAARF,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,QAC3BF,qBAAG,4CAGF;AAAA,GAEC,UAAAK,KAAA;EAAA,IAAGH,QAAQ,GAAAG,KAAA,CAARH,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,QAC1BF,qBAAG,8CAGF;AAAA,EACJ","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_FontStyle","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_DIMENSION","LARGE_FONT_FROM_DIMENSION","CIRCLE_PADDING_INLINE","PILL_PADDING_INLINE","DIGIT_INLINE_SIZE","SMALL_CIRCLE_BELOW_DIMENSION","dimensionOf","props","_props$dimension","dimension","paddingInlineOf","hasLabel","shape","Math","max","floor","StyledBadge","exports","styled","div","withConfig","displayName","componentId","FontStyle","backgroundColor","textColor","_ref","shadows","css","_ref2","isStandalone","_ref3","position","_ref4","_ref5","_ref6"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BadgeProps } from \"./Badge\";\nimport { FontStyle } from \"../FontStyle\";\n\nconst DEFAULT_DIMENSION = 8;\nconst LARGE_FONT_FROM_DIMENSION = 18;\nconst CIRCLE_PADDING_INLINE = 5;\nconst PILL_PADDING_INLINE = 10;\nconst DIGIT_INLINE_SIZE = 7;\nconst SMALL_CIRCLE_BELOW_DIMENSION = 16;\n\ntype StyledBadgeProps = Partial<BadgeProps> & { hasLabel?: boolean };\n\nconst dimensionOf = (props: StyledBadgeProps) =>\n  props.dimension ?? DEFAULT_DIMENSION;\n\nconst paddingInlineOf = (props: StyledBadgeProps) => {\n  if (!props.hasLabel) {\n    return 0;\n  }\n\n  if (props.shape === \"pill\") {\n    return PILL_PADDING_INLINE;\n  }\n\n  const dimension = dimensionOf(props);\n\n  if (dimension >= SMALL_CIRCLE_BELOW_DIMENSION) {\n    return CIRCLE_PADDING_INLINE;\n  }\n\n  // A small circle keeps a single digit inside its box only with less padding.\n  return Math.max(0, Math.floor((dimension - DIGIT_INLINE_SIZE) / 2));\n};\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n  ${FontStyle}\n  align-items: center;\n  background-color: ${(props) =>\n    !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n  block-size: ${(props) => dimensionOf(props) + \"px\"};\n  border-radius: 999px;\n  box-sizing: border-box;\n  color: ${(props) =>\n    !props.textColor ? \"var(--color-theme-100)\" : props.textColor};\n  display: flex;\n  font-size: ${(props) =>\n    dimensionOf(props) >= LARGE_FONT_FROM_DIMENSION ? \"12px\" : \"10px\"};\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  inline-size: auto;\n  justify-content: center;\n  min-inline-size: ${(props) => dimensionOf(props) + \"px\"};\n  padding-inline: ${(props) => paddingInlineOf(props) + \"px\"};\n  pointer-events: none;\n  position: absolute;\n  z-index: 1;\n\n  ${({ shadows }) =>\n    shadows &&\n    css`\n      box-shadow: var(--shadow-tertiary);\n      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n    `}\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":"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","ignoreList":[]}

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

@@ -1,32 +1,41 @@
 import React from "react";
 type Position = "top-left" | "top-right" | "bottom-right" | "bottom-left";
+type Shape = "circle" | "pill";
 export interface BadgeProps {
     position?: Position;
     dimension?: number;
     className?: string;
     backgroundColor?: string;
+    textColor?: string;
     value?: number;
+    cap?: number;
+    shape?: Shape;
+    shadows?: boolean;
     isStandalone?: boolean;
 }
 /**
  * @component Badge
  * @description
- * In some products, you might need to show a badge on the right corner of the avatar.
- * We call this a badge. Here's an example that shows if the user is online.
+ * A small pill that sits on the corner of an avatar or an icon, or stands in a
+ * row on its own. It shows a count, or nothing at all when it marks a state.
  *
  * @prop {position} - dictates the position of a badge.
- * @prop {dimension} - controls the size of a badge (width and height) in pixels.
+ * @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.
+ * @prop {shape} - "pill" adds horizontal padding so the badge reads as long.
+ * @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.
  * @prop {backgroundColor} - background-color of a badge.
+ * @prop {textColor} - color of the number.
+ * @prop {isStandalone} - takes the badge out of absolute positioning.
  *
  * @example
  * <IconButton variant="text gray" size="big">
  *   <BellOffIcon />
- *   <Badge position="top-right" backgroundColor="red" dimension={16} />
+ *   <Badge position="top-right" backgroundColor="var(--red-alert)" dimension={16} value={7} cap={99} />
  * </IconButton>
  *
  * @see
- * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
+ * https://system.activecollab.com/?path=/story/components-indicators-badge--badge
  */
-export declare const Badge: ({ dimension, className, position, backgroundColor, value, isStandalone, }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ dimension, className, position, backgroundColor, textColor, value, cap, shape, shadows, isStandalone, }: BadgeProps) => React.JSX.Element;
 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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,GAAI,2EAQnB,UAAU,sBAcZ,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAC1E,KAAK,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE/B,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,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAUD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK,GAAI,2GAWnB,UAAU,sBAmBZ,CAAC"}

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

@@ -1,24 +1,35 @@
 import React from "react";
 import classNames from "classnames";
 import { StyledBadge } from "./Styles";
+const getLabel = (value, cap) => {
+  if (!value) {
+    return null;
+  }
+  return cap && value > cap ? cap + "+" : value;
+};
+
 /**
  * @component Badge
  * @description
- * In some products, you might need to show a badge on the right corner of the avatar.
- * We call this a badge. Here's an example that shows if the user is online.
+ * A small pill that sits on the corner of an avatar or an icon, or stands in a
+ * row on its own. It shows a count, or nothing at all when it marks a state.
  *
  * @prop {position} - dictates the position of a badge.
- * @prop {dimension} - controls the size of a badge (width and height) in pixels.
+ * @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.
+ * @prop {shape} - "pill" adds horizontal padding so the badge reads as long.
+ * @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.
  * @prop {backgroundColor} - background-color of a badge.
+ * @prop {textColor} - color of the number.
+ * @prop {isStandalone} - takes the badge out of absolute positioning.
  *
  * @example
  * <IconButton variant="text gray" size="big">
  *   <BellOffIcon />
- *   <Badge position="top-right" backgroundColor="red" dimension={16} />
+ *   <Badge position="top-right" backgroundColor="var(--red-alert)" dimension={16} value={7} cap={99} />
  * </IconButton>
  *
  * @see
- * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
+ * https://system.activecollab.com/?path=/story/components-indicators-badge--badge
  */
 export const Badge = _ref => {
   let _ref$dimension = _ref.dimension,
@@ -27,17 +38,27 @@ export const Badge = _ref => {
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? "bottom-left" : _ref$position,
     backgroundColor = _ref.backgroundColor,
+    textColor = _ref.textColor,
     value = _ref.value,
+    cap = _ref.cap,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "circle" : _ref$shape,
+    _ref$shadows = _ref.shadows,
+    shadows = _ref$shadows === void 0 ? false : _ref$shadows,
     _ref$isStandalone = _ref.isStandalone,
     isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
+  const label = getLabel(value, cap);
   return /*#__PURE__*/React.createElement(StyledBadge, {
     className: classNames("c-badge", className),
     dimension: dimension,
     position: position,
+    shape: shape,
+    shadows: shadows,
+    hasLabel: label !== null,
     isStandalone: isStandalone,
     backgroundColor: backgroundColor,
-    role: "status",
-    value: value
-  }, value && value > 100 ? 99 + "+" : value);
+    textColor: textColor,
+    role: "status"
+  }, label);
 };
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["React","classNames","StyledBadge","Badge","_ref","_ref$dimension","dimension","className","_ref$position","position","backgroundColor","value","_ref$isStandalone","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,IAAAC,cAAA,GAAAD,IAAA,CAPhBE,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,CAAC,GAAAA,cAAA;IACbE,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,aAAA,GAAAJ,IAAA,CACTK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,aAAa,GAAAA,aAAA;IACxBE,eAAe,GAAAN,IAAA,CAAfM,eAAe;IAEfC,KAAK,GAAAP,IAAA,CAALO,KAAK;IAAAC,iBAAA,GAAAR,IAAA,CACLS,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,KAAK,GAAAA,iBAAA;EAEpB,oBACEZ,KAAA,CAAAc,aAAA,CAACZ,WAAW;IACVK,SAAS,EAAEN,UAAU,CAAC,SAAS,EAAEM,SAAS,CAAE;IAC5CD,SAAS,EAAEA,SAAU;IACrBG,QAAQ,EAAEA,QAAS;IACnBI,YAAY,EAAEA,YAAa;IAC3BH,eAAe,EAAEA,eAAgB;IACjCK,IAAI,EAAC,QAAQ;IACbJ,KAAK,EAAEA;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KACxB,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"file":"Badge.js","names":["React","classNames","StyledBadge","getLabel","value","cap","Badge","_ref","_ref$dimension","dimension","className","_ref$position","position","backgroundColor","textColor","_ref$shape","shape","_ref$shadows","shadows","_ref$isStandalone","isStandalone","label","createElement","hasLabel","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\";\ntype Shape = \"circle\" | \"pill\";\n\nexport interface BadgeProps {\n  position?: Position;\n  dimension?: number;\n  className?: string;\n  backgroundColor?: string;\n  textColor?: string;\n  value?: number;\n  cap?: number;\n  shape?: Shape;\n  shadows?: boolean;\n  isStandalone?: boolean;\n}\n\nconst getLabel = (value?: number, cap?: number) => {\n  if (!value) {\n    return null;\n  }\n\n  return cap && value > cap ? `${cap}+` : value;\n};\n\n/**\n * @component Badge\n * @description\n * A small pill that sits on the corner of an avatar or an icon, or stands in a\n * row on its own. It shows a count, or nothing at all when it marks a state.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.\n * @prop {shape} - \"pill\" adds horizontal padding so the badge reads as long.\n * @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.\n * @prop {backgroundColor} - background-color of a badge.\n * @prop {textColor} - color of the number.\n * @prop {isStandalone} - takes the badge out of absolute positioning.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n *   <BellOffIcon />\n *   <Badge position=\"top-right\" backgroundColor=\"var(--red-alert)\" dimension={16} value={7} cap={99} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-indicators-badge--badge\n */\nexport const Badge = ({\n  dimension = 8,\n  className,\n  position = \"bottom-left\",\n  backgroundColor,\n  textColor,\n  value,\n  cap,\n  shape = \"circle\",\n  shadows = false,\n  isStandalone = false,\n}: BadgeProps) => {\n  const label = getLabel(value, cap);\n\n  return (\n    <StyledBadge\n      className={classNames(\"c-badge\", className)}\n      dimension={dimension}\n      position={position}\n      shape={shape}\n      shadows={shadows}\n      hasLabel={label !== null}\n      isStandalone={isStandalone}\n      backgroundColor={backgroundColor}\n      textColor={textColor}\n      role=\"status\"\n    >\n      {label}\n    </StyledBadge>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,WAAW,QAAQ,UAAU;AAkBtC,MAAMC,QAAQ,GAAGA,CAACC,KAAc,EAAEC,GAAY,KAAK;EACjD,IAAI,CAACD,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,OAAOC,GAAG,IAAID,KAAK,GAAGC,GAAG,GAAMA,GAAG,SAAMD,KAAK;AAC/C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,KAAK,GAAGC,IAAA,IAWH;EAAA,IAAAC,cAAA,GAAAD,IAAA,CAVhBE,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,CAAC,GAAAA,cAAA;IACbE,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,aAAA,GAAAJ,IAAA,CACTK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,aAAa,GAAAA,aAAA;IACxBE,eAAe,GAAAN,IAAA,CAAfM,eAAe;IACfC,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTV,KAAK,GAAAG,IAAA,CAALH,KAAK;IACLC,GAAG,GAAAE,IAAA,CAAHF,GAAG;IAAAU,UAAA,GAAAR,IAAA,CACHS,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,QAAQ,GAAAA,UAAA;IAAAE,YAAA,GAAAV,IAAA,CAChBW,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAE,iBAAA,GAAAZ,IAAA,CACfa,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,KAAK,GAAAA,iBAAA;EAEpB,MAAME,KAAK,GAAGlB,QAAQ,CAACC,KAAK,EAAEC,GAAG,CAAC;EAElC,oBACEL,KAAA,CAAAsB,aAAA,CAACpB,WAAW;IACVQ,SAAS,EAAET,UAAU,CAAC,SAAS,EAAES,SAAS,CAAE;IAC5CD,SAAS,EAAEA,SAAU;IACrBG,QAAQ,EAAEA,QAAS;IACnBI,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBK,QAAQ,EAAEF,KAAK,KAAK,IAAK;IACzBD,YAAY,EAAEA,YAAa;IAC3BP,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBU,IAAI,EAAC;EAAQ,GAEZH,KACU,CAAC;AAElB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,7 @@
 import { BadgeProps } from "./Badge";
-export declare const StyledBadge: import("styled-components").StyledComponent<"div", any, Partial<BadgeProps>, never>;
+type StyledBadgeProps = Partial<BadgeProps> & {
+    hasLabel?: boolean;
+};
+export declare const StyledBadge: import("styled-components").StyledComponent<"div", any, StyledBadgeProps, never>;
+export {};
 //# sourceMappingURL=Styles.d.ts.map

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":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGrC,eAAO,MAAM,WAAW,qFAuDvB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAUrC,KAAK,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAwBrE,eAAO,MAAM,WAAW,kFAgEvB,CAAC"}

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

@@ -1,22 +1,50 @@
 import styled, { css } from "styled-components";
 import { FontStyle } from "../FontStyle";
+const DEFAULT_DIMENSION = 8;
+const LARGE_FONT_FROM_DIMENSION = 18;
+const CIRCLE_PADDING_INLINE = 5;
+const PILL_PADDING_INLINE = 10;
+const DIGIT_INLINE_SIZE = 7;
+const SMALL_CIRCLE_BELOW_DIMENSION = 16;
+const dimensionOf = props => {
+  var _props$dimension;
+  return (_props$dimension = props.dimension) != null ? _props$dimension : DEFAULT_DIMENSION;
+};
+const paddingInlineOf = props => {
+  if (!props.hasLabel) {
+    return 0;
+  }
+  if (props.shape === "pill") {
+    return PILL_PADDING_INLINE;
+  }
+  const dimension = dimensionOf(props);
+  if (dimension >= SMALL_CIRCLE_BELOW_DIMENSION) {
+    return CIRCLE_PADDING_INLINE;
+  }
+
+  // A small circle keeps a single digit inside its box only with less padding.
+  return Math.max(0, Math.floor((dimension - DIGIT_INLINE_SIZE) / 2));
+};
 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, 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.isStandalone;
-  return isStandalone && css(["position:static;z-index:0;"]);
+})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:999px;box-sizing:border-box;color:", ";display:flex;font-size:", ";font-variant-numeric:tabular-nums;font-weight:700;inline-size:auto;justify-content:center;min-inline-size:", ";padding-inline:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", " ", ""], FontStyle, props => !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor, props => dimensionOf(props) + "px", props => !props.textColor ? "var(--color-theme-100)" : props.textColor, props => dimensionOf(props) >= LARGE_FONT_FROM_DIMENSION ? "12px" : "10px", props => dimensionOf(props) + "px", props => paddingInlineOf(props) + "px", _ref => {
+  let shadows = _ref.shadows;
+  return shadows && css(["box-shadow:var(--shadow-tertiary);text-shadow:0 1px 2px rgba(0,0,0,0.25);"]);
 }, _ref2 => {
-  let position = _ref2.position;
-  return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
+  let isStandalone = _ref2.isStandalone;
+  return isStandalone && css(["position:static;z-index:0;"]);
 }, _ref3 => {
   let position = _ref3.position;
-  return position === "top-right" && css(["inset-block-start:0;inset-inline-end:0;"]);
+  return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
 }, _ref4 => {
   let position = _ref4.position;
-  return position === "bottom-right" && css(["inset-block-end:0;inset-inline-end:0;"]);
+  return position === "top-right" && css(["inset-block-start:0;inset-inline-end:0;"]);
 }, _ref5 => {
   let position = _ref5.position;
+  return position === "bottom-right" && css(["inset-block-end:0;inset-inline-end:0;"]);
+}, _ref6 => {
+  let position = _ref6.position;
   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":["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,IAAGH,YAAY,GAAAG,IAAA,CAAZH,YAAY;EAAA,OACfA,YAAY,IACZT,GAAG,gCAGF;AAAA,GAEDa,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvBd,GAAG,+CAGF;AAAA,GAEDe,KAAA;EAAA,IAAGD,QAAQ,GAAAC,KAAA,CAARD,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxBd,GAAG,6CAGF;AAAA,GAECgB,KAAA;EAAA,IAAGF,QAAQ,GAAAE,KAAA,CAARF,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3Bd,GAAG,2CAGF;AAAA,GAECiB,KAAA;EAAA,IAAGH,QAAQ,GAAAG,KAAA,CAARH,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1Bd,GAAG,6CAGF;AAAA,EACJ","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","DEFAULT_DIMENSION","LARGE_FONT_FROM_DIMENSION","CIRCLE_PADDING_INLINE","PILL_PADDING_INLINE","DIGIT_INLINE_SIZE","SMALL_CIRCLE_BELOW_DIMENSION","dimensionOf","props","_props$dimension","dimension","paddingInlineOf","hasLabel","shape","Math","max","floor","StyledBadge","div","withConfig","displayName","componentId","backgroundColor","textColor","_ref","shadows","_ref2","isStandalone","_ref3","position","_ref4","_ref5","_ref6"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BadgeProps } from \"./Badge\";\nimport { FontStyle } from \"../FontStyle\";\n\nconst DEFAULT_DIMENSION = 8;\nconst LARGE_FONT_FROM_DIMENSION = 18;\nconst CIRCLE_PADDING_INLINE = 5;\nconst PILL_PADDING_INLINE = 10;\nconst DIGIT_INLINE_SIZE = 7;\nconst SMALL_CIRCLE_BELOW_DIMENSION = 16;\n\ntype StyledBadgeProps = Partial<BadgeProps> & { hasLabel?: boolean };\n\nconst dimensionOf = (props: StyledBadgeProps) =>\n  props.dimension ?? DEFAULT_DIMENSION;\n\nconst paddingInlineOf = (props: StyledBadgeProps) => {\n  if (!props.hasLabel) {\n    return 0;\n  }\n\n  if (props.shape === \"pill\") {\n    return PILL_PADDING_INLINE;\n  }\n\n  const dimension = dimensionOf(props);\n\n  if (dimension >= SMALL_CIRCLE_BELOW_DIMENSION) {\n    return CIRCLE_PADDING_INLINE;\n  }\n\n  // A small circle keeps a single digit inside its box only with less padding.\n  return Math.max(0, Math.floor((dimension - DIGIT_INLINE_SIZE) / 2));\n};\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n  ${FontStyle}\n  align-items: center;\n  background-color: ${(props) =>\n    !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n  block-size: ${(props) => dimensionOf(props) + \"px\"};\n  border-radius: 999px;\n  box-sizing: border-box;\n  color: ${(props) =>\n    !props.textColor ? \"var(--color-theme-100)\" : props.textColor};\n  display: flex;\n  font-size: ${(props) =>\n    dimensionOf(props) >= LARGE_FONT_FROM_DIMENSION ? \"12px\" : \"10px\"};\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  inline-size: auto;\n  justify-content: center;\n  min-inline-size: ${(props) => dimensionOf(props) + \"px\"};\n  padding-inline: ${(props) => paddingInlineOf(props) + \"px\"};\n  pointer-events: none;\n  position: absolute;\n  z-index: 1;\n\n  ${({ shadows }) =>\n    shadows &&\n    css`\n      box-shadow: var(--shadow-tertiary);\n      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n    `}\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,MAAMC,iBAAiB,GAAG,CAAC;AAC3B,MAAMC,yBAAyB,GAAG,EAAE;AACpC,MAAMC,qBAAqB,GAAG,CAAC;AAC/B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,iBAAiB,GAAG,CAAC;AAC3B,MAAMC,4BAA4B,GAAG,EAAE;AAIvC,MAAMC,WAAW,GAAIC,KAAuB;EAAA,IAAAC,gBAAA;EAAA,QAAAA,gBAAA,GAC1CD,KAAK,CAACE,SAAS,YAAAD,gBAAA,GAAIR,iBAAiB;AAAA;AAEtC,MAAMU,eAAe,GAAIH,KAAuB,IAAK;EACnD,IAAI,CAACA,KAAK,CAACI,QAAQ,EAAE;IACnB,OAAO,CAAC;EACV;EAEA,IAAIJ,KAAK,CAACK,KAAK,KAAK,MAAM,EAAE;IAC1B,OAAOT,mBAAmB;EAC5B;EAEA,MAAMM,SAAS,GAAGH,WAAW,CAACC,KAAK,CAAC;EAEpC,IAAIE,SAAS,IAAIJ,4BAA4B,EAAE;IAC7C,OAAOH,qBAAqB;EAC9B;;EAEA;EACA,OAAOW,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAAC,CAACN,SAAS,GAAGL,iBAAiB,IAAI,CAAC,CAAC,CAAC;AACrE,CAAC;AAED,OAAO,MAAMY,WAAW,GAAGnB,MAAM,CAACoB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wWACjCrB,SAAS,EAEUQ,KAAK,IACxB,CAACA,KAAK,CAACc,eAAe,GAAG,sBAAsB,GAAGd,KAAK,CAACc,eAAe,EAC1Dd,KAAK,IAAKD,WAAW,CAACC,KAAK,CAAC,GAAG,IAAI,EAGxCA,KAAK,IACb,CAACA,KAAK,CAACe,SAAS,GAAG,wBAAwB,GAAGf,KAAK,CAACe,SAAS,EAEjDf,KAAK,IACjBD,WAAW,CAACC,KAAK,CAAC,IAAIN,yBAAyB,GAAG,MAAM,GAAG,MAAM,EAK/CM,KAAK,IAAKD,WAAW,CAACC,KAAK,CAAC,GAAG,IAAI,EACpCA,KAAK,IAAKG,eAAe,CAACH,KAAK,CAAC,GAAG,IAAI,EAKxDgB,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,IACP1B,GAAG,+EAGF;AAAA,GAED2B,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;EAAA,OACfA,YAAY,IACZ5B,GAAG,gCAGF;AAAA,GAED6B,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvB9B,GAAG,+CAGF;AAAA,GAED+B,KAAA;EAAA,IAAGD,QAAQ,GAAAC,KAAA,CAARD,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxB9B,GAAG,6CAGF;AAAA,GAECgC,KAAA;EAAA,IAAGF,QAAQ,GAAAE,KAAA,CAARF,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3B9B,GAAG,2CAGF;AAAA,GAECiC,KAAA;EAAA,IAAGH,QAAQ,GAAAG,KAAA,CAARH,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1B9B,GAAG,6CAGF;AAAA,EACJ","ignoreList":[]}

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

@@ -12,6 +12,6 @@ export declare const StyledCounterButtonReset: import("styled-components").Style
 export declare const StyledCounterButtonLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").IBodyProps & Omit<import("../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {
     $active?: boolean;
 }, never>;
-export declare const StyledBadge: import("styled-components").StyledComponent<({ dimension, className, position, backgroundColor, value, isStandalone, }: import("..").BadgeProps) => import("react").JSX.Element, any, {}, never>;
+export declare const StyledBadge: import("styled-components").StyledComponent<({ dimension, className, position, backgroundColor, textColor, value, cap, shape, shadows, isStandalone, }: import("..").BadgeProps) => import("react").JSX.Element, any, {}, never>;
 export {};
 //# sourceMappingURL=Styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":"AASA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;4FAsC/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;;sEAWpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;cAA6B,OAAO;SAoBxE,CAAC;AAIF,eAAO,MAAM,WAAW,kMAGvB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":"AASA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;4FAsC/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;;sEAWpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;cAA6B,OAAO;SAoBxE,CAAC;AAIF,eAAO,MAAM,WAAW,kOAGvB,CAAC"}