@elliemae/ds-notification-badge 3.0.0-next.2 → 3.0.0-next.6

package/dist/cjs/NotificationBadge.js

@@ -0,0 +1,105 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var NotificationBadge_exports = {};
+__export(NotificationBadge_exports, {
+  NotificationBadge: () => NotificationBadge,
+  NotificationBadgeWithSchema: () => NotificationBadgeWithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react_desc_prop_types = require("./react-desc-prop-types");
+var import_style = require("./style");
+const NotificationBadge = (props) => {
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.NotificationBadgePropTypes);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults);
+  const { type, color, value, size, disabled, position, Component } = propsWithDefaults;
+  const Badge = type === "number" ? import_style.NumericBadge : import_style.DotBadge;
+  const relatedComponentRef = (0, import_react.useRef)(null);
+  const renderBadge = relatedComponentRef?.current || !Component;
+  const [relatedComponentHeight, setRelatedComponentHeight] = (0, import_react.useState)(0);
+  const [relatedComponentWidth, setRelatedComponentWidth] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const relatedComponent = relatedComponentRef?.current;
+    setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);
+    setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);
+  }, [relatedComponentRef]);
+  let top = 0;
+  let right = 0;
+  let left = 0;
+  if (position === "right")
+    left = relatedComponentWidth / 2;
+  if (position === "left")
+    right = relatedComponentWidth / 2;
+  top = relatedComponentHeight / 2;
+  const _a = globalAttributes, { value: globalValue, color: globalColor, type: globalType } = _a, restGlobals = __objRest(_a, ["value", "color", "type"]);
+  return /* @__PURE__ */ import_react.default.createElement(import_style.Wrapper, __spreadValues({}, restGlobals), renderBadge && /* @__PURE__ */ import_react.default.createElement(Badge, {
+    "data-testid": "ds-notification-badge",
+    color,
+    size,
+    value,
+    disabled,
+    top,
+    left,
+    right
+  }, type === "number" && value), Component && /* @__PURE__ */ import_react.default.createElement(Component, {
+    innerRef: relatedComponentRef
+  }));
+};
+NotificationBadge.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
+const NotificationBadgeWithSchema = (0, import_ds_props_helpers.describe)(NotificationBadge);
+NotificationBadgeWithSchema.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
+module.exports = __toCommonJS(NotificationBadge_exports);
+//# sourceMappingURL=NotificationBadge.js.map

package/dist/cjs/NotificationBadge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useState, useEffect, useRef, WeakValidationMap } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\n\nimport { NotificationBadgePropTypes, DSNotificationBadgeT, defaultProps } from './react-desc-prop-types';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(propsWithDefaults, NotificationBadgePropTypes);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n\n  const { type, color, value, size, disabled, position, Component } = propsWithDefaults;\n\n  const Badge = type === 'number' ? NumericBadge : DotBadge;\n  const relatedComponentRef = useRef<HTMLSpanElement>(null);\n  const renderBadge = relatedComponentRef?.current || !Component;\n  const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n  const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n  useEffect(() => {\n    const relatedComponent = relatedComponentRef?.current;\n    setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);\n    setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n  }, [relatedComponentRef]);\n\n  let top = 0;\n  let right = 0;\n  let left = 0;\n\n  if (position === 'right') left = relatedComponentWidth / 2;\n  if (position === 'left') right = relatedComponentWidth / 2;\n  top = relatedComponentHeight / 2;\n\n  const { value: globalValue, color: globalColor, type: globalType, ...restGlobals } = globalAttributes;\n  return (\n    <Wrapper {...restGlobals}>\n      {renderBadge && (\n        <Badge\n          data-testid=\"ds-notification-badge\"\n          color={color}\n          size={size}\n          value={value}\n          disabled={disabled}\n          top={top}\n          left={left}\n          right={right}\n        >\n          {type === 'number' && value}\n        </Badge>\n      )}\n      {Component && <Component innerRef={relatedComponentRef} />}\n    </Wrapper>\n  );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsE;AACtE,8BAKO;AAEP,mCAA+E;AAC/E,mBAAgD;AAEhD,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA2D,mBAAmB;AAC9E,QAAM,mBAAmB,oDAAuB;AAEhD,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,cAAc;AAEpE,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,sBAAsB,yBAAwB;AACpD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,6BAA6B,2BAAS;AACrE,QAAM,CAAC,uBAAuB,4BAA4B,2BAAS;AAEnE,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB;AAC5D,6BAAyB,kBAAkB,eAAe;AAAA,KACzD,CAAC;AAEJ,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,QAAqF,uBAA7E,SAAO,aAAa,OAAO,aAAa,MAAM,eAA+B,IAAhB,wBAAgB,IAAhB,CAA7D,SAAoB,SAAoB;AAChD,SACE,mDAAC,sBAAD,mBAAa,cACV,eACC,mDAAC,OAAD;AAAA,IACE,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,SAAS,YAAY,QAGzB,aAAa,mDAAC,WAAD;AAAA,IAAW,UAAU;AAAA;AAAA;AAKzC,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,sCAAS;AAC7C,4BAA4B,YAAY;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  default: () => import_NotificationBadge.NotificationBadge
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, require("./NotificationBadge"));
+var import_NotificationBadge = require("./NotificationBadge");
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './NotificationBadge';\nexport { NotificationBadge as default } from './NotificationBadge';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,+BAA6C;",
+  "names": []
+}

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,71 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  NotificationBadgePropTypes: () => NotificationBadgePropTypes,
+  defaultProps: () => defaultProps
+});
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const defaultProps = {
+  type: "number",
+  size: "s",
+  disabled: false,
+  position: "right",
+  color: void 0,
+  Component: void 0,
+  value: void 0
+};
+const NotificationBadgePropTypes = __spreadProps(__spreadValues({}, import_ds_props_helpers.globalAttributesPropTypes), {
+  type: import_ds_props_helpers.PropTypes.oneOf(["number", "dot"]).description("type of badge: number or dot"),
+  value: import_ds_props_helpers.PropTypes.number.description("value of the numeric badge"),
+  size: import_ds_props_helpers.PropTypes.oneOf(["s", "l"]).description("size of the badge: s or l"),
+  disabled: import_ds_props_helpers.PropTypes.bool.description("whether the badge is disabled"),
+  position: import_ds_props_helpers.PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
+  Component: import_ds_props_helpers.PropTypes.func.description("Related component"),
+  color: import_ds_props_helpers.PropTypes.string.description("Badge background color value")
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSNotificationBadgeT {\n  interface ComponentT {\n    innerRef: React.RefObject<HTMLSpanElement>;\n  }\n\n  export interface Props {\n    [property: string]: unknown;\n    type?: string;\n    value?: number;\n    size?: string;\n    disabled?: boolean;\n    position?: string;\n    Component?: (propsT: ComponentT) => JSX.Element;\n    color?: string;\n  }\n}\n\nexport const defaultProps: DSNotificationBadgeT.Props = {\n  type: 'number',\n  size: 's',\n  disabled: false,\n  position: 'right',\n  color: undefined,\n  Component: undefined,\n  value: undefined,\n};\n\nexport const NotificationBadgePropTypes = {\n  ...globalAttributesPropTypes,\n  type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n  value: PropTypes.number.description('value of the numeric badge'),\n  size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n  disabled: PropTypes.bool.description('whether the badge is disabled'),\n  position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n  Component: PropTypes.func.description('Related component'),\n  color: PropTypes.string.description('Badge background color value'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AAmB9C,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA;AAGF,MAAM,6BAA6B,iCACrC,oDADqC;AAAA,EAExC,MAAM,kCAAU,MAAM,CAAC,UAAU,QAAQ,YAAY;AAAA,EACrD,OAAO,kCAAU,OAAO,YAAY;AAAA,EACpC,MAAM,kCAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAC9C,UAAU,kCAAU,KAAK,YAAY;AAAA,EACrC,UAAU,kCAAU,MAAM,CAAC,QAAQ,UAAU,YAAY;AAAA,EACzD,WAAW,kCAAU,KAAK,YAAY;AAAA,EACtC,OAAO,kCAAU,OAAO,YAAY;AAAA;",
+  "names": []
+}

package/dist/cjs/style.js

@@ -0,0 +1,80 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var style_exports = {};
+__export(style_exports, {
+  DotBadge: () => DotBadge,
+  GenericBadge: () => GenericBadge,
+  NumericBadge: () => NumericBadge,
+  Wrapper: () => Wrapper
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+const Wrapper = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+`;
+const GenericBadge = import_styled_components.default.span`
+  position: relative;
+  top: ${({ top }) => top ? `${top}px` : "unset"};
+  left: ${({ left }) => left ? `${left}px` : "unset"};
+  right: ${({ right }) => right ? `${right}px` : "unset"};
+`;
+const NumericBadge = (0, import_styled_components.default)(GenericBadge)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  color: #fff;
+  padding: ${({ value }) => value && value > 9 ? "0 5px" : "0"};
+  padding-top: 2px;
+  background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
+  border-radius: ${({ value }) => value && value > 9 ? "10px" : "50%"};
+  font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
+  font-weight: ${({ size }) => size === "l" ? "400" : "600"};
+  height: ${({ size }) => size === "l" ? "21px" : "15px"};
+  min-width: ${({ size, value }) => {
+  if (size === "l" && value && value > 9)
+    return "30px";
+  if (size === "l" && value && value <= 9)
+    return "21px";
+  if (size === "s" && value && value > 9)
+    return "21px";
+  return "15px";
+}};
+`;
+const DotBadge = (0, import_styled_components.default)(GenericBadge)`
+  background-color: ${({ disabled, theme, color }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.brand[500]};
+  width: ${({ size }) => size === "l" ? "15px" : "10px"};
+  height: ${({ size }) => size === "l" ? "15px" : "10px"};
+  border-radius: 100%;
+`;
+module.exports = __toCommonJS(style_exports);
+//# sourceMappingURL=style.js.map

package/dist/cjs/style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\nimport { DSNotificationBadgeT } from './react-desc-prop-types';\n\ninterface StyledGenericBadgeT {\n  top: number;\n  left: number;\n  right: number;\n}\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n  position: relative;\n  top: ${({ top }) => (top ? `${top}px` : 'unset')};\n  left: ${({ left }) => (left ? `${left}px` : 'unset')};\n  right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\n  top: number;\n  left: number;\n  right: number;\n  size?: string;\n  disabled?: boolean;\n  value?: number;\n  color?: string;\n}>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n  color: #fff;\n  padding: ${({ value }) => (value && value > 9 ? '0 5px' : '0')};\n  padding-top: 2px;\n  background-color: ${({ disabled, color, theme }) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n  border-radius: ${({ value }) => (value && value > 9 ? '10px' : '50%')};\n  font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n  font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n  height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n  min-width: ${({ size, value }) => {\n    if (size === 'l' && value && value > 9) return '30px';\n    if (size === 'l' && value && value <= 9) return '21px';\n    if (size === 's' && value && value > 9) return '21px';\n    return '15px';\n  }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n  background-color: ${({ disabled, theme, color }) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n  width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n  height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n  border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AASZ,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,iCAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,UAAW,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,WAAY,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,YAAa,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aActB,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAEtC,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,SAAS;AAAA,eAClD,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,WAAY,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,YAAY;AAChC,MAAI,SAAS,OAAO,SAAS,QAAQ;AAAG,WAAO;AAC/C,MAAI,SAAS,OAAO,SAAS,SAAS;AAAG,WAAO;AAChD,MAAI,SAAS,OAAO,SAAS,QAAQ;AAAG,WAAO;AAC/C,SAAO;AAAA;AAAA;AAIJ,MAAM,WAAW,sCAAO;AAAA,sBACT,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/NotificationBadge.js

@@ -0,0 +1,83 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2, { useState, useEffect, useRef } from "react";
+import {
+  useMemoMergePropsWithDefault,
+  useValidateTypescriptPropTypes,
+  describe,
+  useGetGlobalAttributes
+} from "@elliemae/ds-props-helpers";
+import { NotificationBadgePropTypes, defaultProps } from "./react-desc-prop-types";
+import { Wrapper, NumericBadge, DotBadge } from "./style";
+const NotificationBadge = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, NotificationBadgePropTypes);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);
+  const { type, color, value, size, disabled, position, Component } = propsWithDefaults;
+  const Badge = type === "number" ? NumericBadge : DotBadge;
+  const relatedComponentRef = useRef(null);
+  const renderBadge = relatedComponentRef?.current || !Component;
+  const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);
+  const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);
+  useEffect(() => {
+    const relatedComponent = relatedComponentRef?.current;
+    setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);
+    setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);
+  }, [relatedComponentRef]);
+  let top = 0;
+  let right = 0;
+  let left = 0;
+  if (position === "right")
+    left = relatedComponentWidth / 2;
+  if (position === "left")
+    right = relatedComponentWidth / 2;
+  top = relatedComponentHeight / 2;
+  const _a = globalAttributes, { value: globalValue, color: globalColor, type: globalType } = _a, restGlobals = __objRest(_a, ["value", "color", "type"]);
+  return /* @__PURE__ */ React2.createElement(Wrapper, __spreadValues({}, restGlobals), renderBadge && /* @__PURE__ */ React2.createElement(Badge, {
+    "data-testid": "ds-notification-badge",
+    color,
+    size,
+    value,
+    disabled,
+    top,
+    left,
+    right
+  }, type === "number" && value), Component && /* @__PURE__ */ React2.createElement(Component, {
+    innerRef: relatedComponentRef
+  }));
+};
+NotificationBadge.propTypes = NotificationBadgePropTypes;
+const NotificationBadgeWithSchema = describe(NotificationBadge);
+NotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes;
+export {
+  NotificationBadge,
+  NotificationBadgeWithSchema
+};
+//# sourceMappingURL=NotificationBadge.js.map

package/dist/esm/NotificationBadge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef, WeakValidationMap } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\n\nimport { NotificationBadgePropTypes, DSNotificationBadgeT, defaultProps } from './react-desc-prop-types';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(propsWithDefaults, NotificationBadgePropTypes);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);\n\n  const { type, color, value, size, disabled, position, Component } = propsWithDefaults;\n\n  const Badge = type === 'number' ? NumericBadge : DotBadge;\n  const relatedComponentRef = useRef<HTMLSpanElement>(null);\n  const renderBadge = relatedComponentRef?.current || !Component;\n  const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n  const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n  useEffect(() => {\n    const relatedComponent = relatedComponentRef?.current;\n    setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);\n    setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n  }, [relatedComponentRef]);\n\n  let top = 0;\n  let right = 0;\n  let left = 0;\n\n  if (position === 'right') left = relatedComponentWidth / 2;\n  if (position === 'left') right = relatedComponentWidth / 2;\n  top = relatedComponentHeight / 2;\n\n  const { value: globalValue, color: globalColor, type: globalType, ...restGlobals } = globalAttributes;\n  return (\n    <Wrapper {...restGlobals}>\n      {renderBadge && (\n        <Badge\n          data-testid=\"ds-notification-badge\"\n          color={color}\n          size={size}\n          value={value}\n          disabled={disabled}\n          top={top}\n          left={left}\n          right={right}\n        >\n          {type === 'number' && value}\n        </Badge>\n      )}\n      {Component && <Component innerRef={relatedComponentRef} />}\n    </Wrapper>\n  );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAEA,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO;AAC9D,iCAA2D,mBAAmB;AAC9E,QAAM,mBAAmB,uBAAuB;AAEhD,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,cAAc;AAEpE,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAwB;AACpD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,6BAA6B,SAAS;AACrE,QAAM,CAAC,uBAAuB,4BAA4B,SAAS;AAEnE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB;AAC5D,6BAAyB,kBAAkB,eAAe;AAAA,KACzD,CAAC;AAEJ,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,QAAqF,uBAA7E,SAAO,aAAa,OAAO,aAAa,MAAM,eAA+B,IAAhB,wBAAgB,IAAhB,CAA7D,SAAoB,SAAoB;AAChD,SACE,qCAAC,SAAD,mBAAa,cACV,eACC,qCAAC,OAAD;AAAA,IACE,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,SAAS,YAAY,QAGzB,aAAa,qCAAC,WAAD;AAAA,IAAW,UAAU;AAAA;AAAA;AAKzC,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,SAAS;AAC7C,4BAA4B,YAAY;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+export * from "./NotificationBadge";
+import { NotificationBadge } from "./NotificationBadge";
+export {
+  NotificationBadge as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NotificationBadge';\nexport { NotificationBadge as default } from './NotificationBadge';\n"],
+  "mappings": "AAAA;ACAA;AACA;",
+  "names": []
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+const defaultProps = {
+  type: "number",
+  size: "s",
+  disabled: false,
+  position: "right",
+  color: void 0,
+  Component: void 0,
+  value: void 0
+};
+const NotificationBadgePropTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
+  type: PropTypes.oneOf(["number", "dot"]).description("type of badge: number or dot"),
+  value: PropTypes.number.description("value of the numeric badge"),
+  size: PropTypes.oneOf(["s", "l"]).description("size of the badge: s or l"),
+  disabled: PropTypes.bool.description("whether the badge is disabled"),
+  position: PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
+  Component: PropTypes.func.description("Related component"),
+  color: PropTypes.string.description("Badge background color value")
+});
+export {
+  NotificationBadgePropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSNotificationBadgeT {\n  interface ComponentT {\n    innerRef: React.RefObject<HTMLSpanElement>;\n  }\n\n  export interface Props {\n    [property: string]: unknown;\n    type?: string;\n    value?: number;\n    size?: string;\n    disabled?: boolean;\n    position?: string;\n    Component?: (propsT: ComponentT) => JSX.Element;\n    color?: string;\n  }\n}\n\nexport const defaultProps: DSNotificationBadgeT.Props = {\n  type: 'number',\n  size: 's',\n  disabled: false,\n  position: 'right',\n  color: undefined,\n  Component: undefined,\n  value: undefined,\n};\n\nexport const NotificationBadgePropTypes = {\n  ...globalAttributesPropTypes,\n  type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n  value: PropTypes.number.description('value of the numeric badge'),\n  size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n  disabled: PropTypes.bool.description('whether the badge is disabled'),\n  position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n  Component: PropTypes.func.description('Related component'),\n  color: PropTypes.string.description('Badge background color value'),\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAmBO,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA;AAGF,MAAM,6BAA6B,iCACrC,4BADqC;AAAA,EAExC,MAAM,UAAU,MAAM,CAAC,UAAU,QAAQ,YAAY;AAAA,EACrD,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,MAAM,UAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAC9C,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,MAAM,CAAC,QAAQ,UAAU,YAAY;AAAA,EACzD,WAAW,UAAU,KAAK,YAAY;AAAA,EACtC,OAAO,UAAU,OAAO,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/style.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import styled from "styled-components";
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+`;
+const GenericBadge = styled.span`
+  position: relative;
+  top: ${({ top }) => top ? `${top}px` : "unset"};
+  left: ${({ left }) => left ? `${left}px` : "unset"};
+  right: ${({ right }) => right ? `${right}px` : "unset"};
+`;
+const NumericBadge = styled(GenericBadge)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  color: #fff;
+  padding: ${({ value }) => value && value > 9 ? "0 5px" : "0"};
+  padding-top: 2px;
+  background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
+  border-radius: ${({ value }) => value && value > 9 ? "10px" : "50%"};
+  font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
+  font-weight: ${({ size }) => size === "l" ? "400" : "600"};
+  height: ${({ size }) => size === "l" ? "21px" : "15px"};
+  min-width: ${({ size, value }) => {
+  if (size === "l" && value && value > 9)
+    return "30px";
+  if (size === "l" && value && value <= 9)
+    return "21px";
+  if (size === "s" && value && value > 9)
+    return "21px";
+  return "15px";
+}};
+`;
+const DotBadge = styled(GenericBadge)`
+  background-color: ${({ disabled, theme, color }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.brand[500]};
+  width: ${({ size }) => size === "l" ? "15px" : "10px"};
+  height: ${({ size }) => size === "l" ? "15px" : "10px"};
+  border-radius: 100%;
+`;
+export {
+  DotBadge,
+  GenericBadge,
+  NumericBadge,
+  Wrapper
+};
+//# sourceMappingURL=style.js.map

package/dist/esm/style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSNotificationBadgeT } from './react-desc-prop-types';\n\ninterface StyledGenericBadgeT {\n  top: number;\n  left: number;\n  right: number;\n}\n\nexport const Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n  position: relative;\n  top: ${({ top }) => (top ? `${top}px` : 'unset')};\n  left: ${({ left }) => (left ? `${left}px` : 'unset')};\n  right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\n  top: number;\n  left: number;\n  right: number;\n  size?: string;\n  disabled?: boolean;\n  value?: number;\n  color?: string;\n}>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n  color: #fff;\n  padding: ${({ value }) => (value && value > 9 ? '0 5px' : '0')};\n  padding-top: 2px;\n  background-color: ${({ disabled, color, theme }) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n  border-radius: ${({ value }) => (value && value > 9 ? '10px' : '50%')};\n  font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n  font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n  height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n  min-width: ${({ size, value }) => {\n    if (size === 'l' && value && value > 9) return '30px';\n    if (size === 'l' && value && value <= 9) return '21px';\n    if (size === 's' && value && value > 9) return '21px';\n    return '15px';\n  }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n  background-color: ${({ disabled, theme, color }) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n  width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n  height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n  border-radius: 100%;\n`;\n"],
+  "mappings": "AAAA;ACAA;AASO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,UAAW,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,WAAY,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,YAAa,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aActB,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAEtC,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,YAAa,SAAS,QAAQ,IAAI,SAAS;AAAA,eAClD,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,WAAY,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,YAAY;AAChC,MAAI,SAAS,OAAO,SAAS,QAAQ;AAAG,WAAO;AAC/C,MAAI,SAAS,OAAO,SAAS,SAAS;AAAG,WAAO;AAChD,MAAI,SAAS,OAAO,SAAS,QAAQ;AAAG,WAAO;AAC/C,SAAO;AAAA;AAAA;AAIJ,MAAM,WAAW,OAAO;AAAA,sBACT,CAAC,EAAE,UAAU,OAAO,YACtC,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,27 +1,30 @@
 {
   "name": "@elliemae/ds-notification-badge",
-  "version": "3.0.0-next.2",
+  "version": "3.0.0-next.6",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Notification Badge",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./style": {
-      "import": "./esm/style.js",
-      "require": "./cjs/style.js"
+      "import": "./dist/esm/style.js",
+      "require": "./dist/cjs/style.js"
     },
     "./prop-types": {
-      "import": "./esm/prop-types.js",
-      "require": "./cjs/prop-types.js"
+      "import": "./dist/esm/prop-types.js",
+      "require": "./dist/cjs/prop-types.js"
     },
     "./NotificationBadge": {
-      "import": "./esm/NotificationBadge.js",
-      "require": "./cjs/NotificationBadge.js"
+      "import": "./dist/esm/NotificationBadge.js",
+      "require": "./dist/cjs/NotificationBadge.js"
     }
   },
   "sideEffects": [
@@ -33,17 +36,18 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
+    "@elliemae/ds-props-helpers": "3.0.0-next.6",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
@@ -56,7 +60,13 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/NotificationBadge.js

@@ -1,62 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-var react = require('react');
-var reactDesc = require('react-desc');
-var propTypes = require('./prop-types.js');
-var style = require('./style.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-const NotificationBadge = _ref => {
-  let {
-    type,
-    value,
-    size,
-    disabled,
-    position,
-    Component
-  } = _ref;
-  const Badge = type === 'number' ? style.NumericBadge : style.DotBadge;
-  const relatedComponentRef = react.useRef(null);
-  const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
-  const [relatedComponentHeight, setRelatedComponentHeight] = react.useState(0);
-  const [relatedComponentWidth, setRelatedComponentWidth] = react.useState(0);
-  react.useEffect(() => {
-    const relatedComponent = relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current;
-    setRelatedComponentHeight(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetHeight);
-    setRelatedComponentWidth(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetWidth);
-  }, [relatedComponentRef]);
-  let top;
-  let right;
-  let left;
-
-  if (Component) {
-    if (position === 'right') left = relatedComponentWidth / 2;
-    if (position === 'left') right = relatedComponentWidth / 2;
-    top = relatedComponentHeight / 2;
-  }
-
-  return /*#__PURE__*/_jsx__default["default"](style.Wrapper, {}, void 0, renderBadge && /*#__PURE__*/_jsx__default["default"](Badge, {
-    size: size,
-    value: value,
-    disabled: disabled,
-    top: top,
-    left: left,
-    right: right
-  }, void 0, type === 'number' && value), Component && /*#__PURE__*/_jsx__default["default"](Component, {
-    innerRef: relatedComponentRef
-  }));
-};
-
-NotificationBadge.defaultProps = propTypes.defaultProps;
-const NotificationBadgeWithSchema = reactDesc.describe(NotificationBadge);
-NotificationBadgeWithSchema.propTypes = propTypes.notificationBadgeProps;
-
-exports.NotificationBadge = NotificationBadge;
-exports.NotificationBadgeWithSchema = NotificationBadgeWithSchema;

package/cjs/index.d.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/cjs/index.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var NotificationBadge = require('./NotificationBadge.js');
-
-
-
-exports.NotificationBadge = NotificationBadge.NotificationBadge;
-exports.NotificationBadgeWithSchema = NotificationBadge.NotificationBadgeWithSchema;
-exports["default"] = NotificationBadge.NotificationBadge;

package/cjs/prop-types.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
-const notificationBadgeProps = {
-  type: reactDesc.PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),
-  value: reactDesc.PropTypes.number.description('value of the numeric badge'),
-  size: reactDesc.PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),
-  disabled: reactDesc.PropTypes.bool.description('whether the badge is disabled'),
-  position: reactDesc.PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),
-  Component: reactDesc.PropTypes.func.description('Related component')
-};
-const defaultProps = {
-  type: 'number',
-  size: 's',
-  disabled: false,
-  position: 'right'
-};
-
-exports.defaultProps = defaultProps;
-exports.notificationBadgeProps = notificationBadgeProps;

package/cjs/style.js

@@ -1,98 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-lsxuo6-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
-const GenericBadge = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-lsxuo6-1"
-})(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
-  let {
-    top
-  } = _ref;
-  return top ? "".concat(top, "px") : 'unset';
-}, _ref2 => {
-  let {
-    left
-  } = _ref2;
-  return left ? "".concat(left, "px") : 'unset';
-}, _ref3 => {
-  let {
-    right
-  } = _ref3;
-  return right ? "".concat(right, "px") : 'unset';
-});
-const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
-  componentId: "sc-lsxuo6-2"
-})(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], _ref4 => {
-  let {
-    value
-  } = _ref4;
-  return value > 9 ? '0 5px' : '0';
-}, _ref5 => {
-  let {
-    disabled,
-    theme
-  } = _ref5;
-  return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
-}, _ref6 => {
-  let {
-    value
-  } = _ref6;
-  return value > 9 ? '10px' : '50%';
-}, _ref7 => {
-  let {
-    size
-  } = _ref7;
-  return size === 'l' ? '16px' : '12px';
-}, _ref8 => {
-  let {
-    size
-  } = _ref8;
-  return size === 'l' ? '400' : '600';
-}, _ref9 => {
-  let {
-    size
-  } = _ref9;
-  return size === 'l' ? '21px' : '15px';
-}, _ref10 => {
-  let {
-    size,
-    value
-  } = _ref10;
-  if (size === 'l' && value > 9) return '30px';
-  if (size === 'l' && value <= 9) return '21px';
-  if (size === 's' && value > 9) return '21px';
-  if (size === 's' && value <= 9) return '15px';
-});
-const DotBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
-  componentId: "sc-lsxuo6-3"
-})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
-  let {
-    disabled,
-    theme
-  } = _ref11;
-  return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
-}, _ref12 => {
-  let {
-    size
-  } = _ref12;
-  return size === 'l' ? '15px' : '10px';
-}, _ref13 => {
-  let {
-    size
-  } = _ref13;
-  return size === 'l' ? '15px' : '10px';
-});
-
-exports.DotBadge = DotBadge;
-exports.GenericBadge = GenericBadge;
-exports.NumericBadge = NumericBadge;
-exports.Wrapper = Wrapper;

package/esm/NotificationBadge.js

@@ -1,53 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useEffect } from 'react';
-import { describe } from 'react-desc';
-import { notificationBadgeProps, defaultProps } from './prop-types.js';
-import { Wrapper, NumericBadge, DotBadge } from './style.js';
-
-const NotificationBadge = _ref => {
-  let {
-    type,
-    value,
-    size,
-    disabled,
-    position,
-    Component
-  } = _ref;
-  const Badge = type === 'number' ? NumericBadge : DotBadge;
-  const relatedComponentRef = useRef(null);
-  const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
-  const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);
-  const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);
-  useEffect(() => {
-    const relatedComponent = relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current;
-    setRelatedComponentHeight(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetHeight);
-    setRelatedComponentWidth(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetWidth);
-  }, [relatedComponentRef]);
-  let top;
-  let right;
-  let left;
-
-  if (Component) {
-    if (position === 'right') left = relatedComponentWidth / 2;
-    if (position === 'left') right = relatedComponentWidth / 2;
-    top = relatedComponentHeight / 2;
-  }
-
-  return /*#__PURE__*/_jsx(Wrapper, {}, void 0, renderBadge && /*#__PURE__*/_jsx(Badge, {
-    size: size,
-    value: value,
-    disabled: disabled,
-    top: top,
-    left: left,
-    right: right
-  }, void 0, type === 'number' && value), Component && /*#__PURE__*/_jsx(Component, {
-    innerRef: relatedComponentRef
-  }));
-};
-
-NotificationBadge.defaultProps = defaultProps;
-const NotificationBadgeWithSchema = describe(NotificationBadge);
-NotificationBadgeWithSchema.propTypes = notificationBadgeProps;
-
-export { NotificationBadge, NotificationBadgeWithSchema };

package/esm/index.d.js

@@ -1 +0,0 @@
-

package/esm/index.js

@@ -1 +0,0 @@
-export { NotificationBadge, NotificationBadgeWithSchema, NotificationBadge as default } from './NotificationBadge.js';

package/esm/prop-types.js

@@ -1,18 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const notificationBadgeProps = {
-  type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),
-  value: PropTypes.number.description('value of the numeric badge'),
-  size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),
-  disabled: PropTypes.bool.description('whether the badge is disabled'),
-  position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),
-  Component: PropTypes.func.description('Related component')
-};
-const defaultProps = {
-  type: 'number',
-  size: 's',
-  disabled: false,
-  position: 'right'
-};
-
-export { defaultProps, notificationBadgeProps };

package/esm/style.js

@@ -1,87 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-lsxuo6-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
-const GenericBadge = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-lsxuo6-1"
-})(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
-  let {
-    top
-  } = _ref;
-  return top ? "".concat(top, "px") : 'unset';
-}, _ref2 => {
-  let {
-    left
-  } = _ref2;
-  return left ? "".concat(left, "px") : 'unset';
-}, _ref3 => {
-  let {
-    right
-  } = _ref3;
-  return right ? "".concat(right, "px") : 'unset';
-});
-const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
-  componentId: "sc-lsxuo6-2"
-})(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], _ref4 => {
-  let {
-    value
-  } = _ref4;
-  return value > 9 ? '0 5px' : '0';
-}, _ref5 => {
-  let {
-    disabled,
-    theme
-  } = _ref5;
-  return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
-}, _ref6 => {
-  let {
-    value
-  } = _ref6;
-  return value > 9 ? '10px' : '50%';
-}, _ref7 => {
-  let {
-    size
-  } = _ref7;
-  return size === 'l' ? '16px' : '12px';
-}, _ref8 => {
-  let {
-    size
-  } = _ref8;
-  return size === 'l' ? '400' : '600';
-}, _ref9 => {
-  let {
-    size
-  } = _ref9;
-  return size === 'l' ? '21px' : '15px';
-}, _ref10 => {
-  let {
-    size,
-    value
-  } = _ref10;
-  if (size === 'l' && value > 9) return '30px';
-  if (size === 'l' && value <= 9) return '21px';
-  if (size === 's' && value > 9) return '21px';
-  if (size === 's' && value <= 9) return '15px';
-});
-const DotBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
-  componentId: "sc-lsxuo6-3"
-})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
-  let {
-    disabled,
-    theme
-  } = _ref11;
-  return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
-}, _ref12 => {
-  let {
-    size
-  } = _ref12;
-  return size === 'l' ? '15px' : '10px';
-}, _ref13 => {
-  let {
-    size
-  } = _ref13;
-  return size === 'l' ? '15px' : '10px';
-});
-
-export { DotBadge, GenericBadge, NumericBadge, Wrapper };

package/types/NotificationBadge.d.ts

@@ -1,56 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
-import { NotificactionBadge as props } from './index.d';
-declare const NotificationBadge: {
-    ({ type, value, size, disabled, position, Component, }: props): JSX.Element;
-    defaultProps: {
-        type: string;
-        size: string;
-        disabled: boolean;
-        position: string;
-    };
-    propTypes: {
-        type: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        value: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        size: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        disabled: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        position: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        Component: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-    };
-};
-declare const NotificationBadgeWithSchema: {
-    (props?: props | undefined): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
-export { NotificationBadge, NotificationBadgeWithSchema };

package/types/index.d.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface NotificactionBadge {
-    type?: string;
-    value?: number;
-    size?: string;
-    disabled?: boolean;
-    position?: string;
-    Component?: () => JSX.Element;
-}

package/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from './NotificationBadge';
-export { NotificationBadge as default } from './NotificationBadge';

package/types/prop-types.d.ts

@@ -1,45 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-export declare const notificationBadgeProps: {
-    type: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    value: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    size: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    disabled: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    position: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    Component: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-};
-export declare const defaultProps: {
-    type: string;
-    size: string;
-    disabled: boolean;
-    position: string;
-};

package/types/style.d.ts

@@ -1,4 +0,0 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const GenericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const NumericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const DotBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;