@elliemae/ds-notification-badge 2.3.0-next.0 → 2.3.0-next.4

package/cjs/NotificationBadge.js

@@ -2,26 +2,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var react = require('react');
-var reactDesc = require('react-desc');
-var propTypes = require('./prop-types.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
 var style = require('./style.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const NotificationBadge = _ref => {
-  let {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const NotificationBadge = props => {
+  const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefaults, reactDescPropTypes.NotificationBadgePropTypes);
+  const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefaults);
+  const {
     type,
+    color,
     value,
     size,
     disabled,
     position,
     Component
-  } = _ref;
+  } = propsWithDefaults;
   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;
@@ -29,34 +45,32 @@ const NotificationBadge = _ref => {
   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);
+    setRelatedComponentHeight((relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetHeight) || 0);
+    setRelatedComponentWidth((relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetWidth) || 0);
   }, [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
+  let top = 0;
+  let right = 0;
+  let left = 0;
+  if (position === 'right') left = relatedComponentWidth / 2;
+  if (position === 'left') right = relatedComponentWidth / 2;
+  top = relatedComponentHeight / 2;
+  return /*#__PURE__*/jsxRuntime.jsxs(style.Wrapper, _objectSpread(_objectSpread({}, globalAttributes), {}, {
+    children: [renderBadge && /*#__PURE__*/_jsx__default["default"](Badge, {
+      color: color,
+      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;
+const NotificationBadgeWithSchema = dsPropsHelpers.describe(NotificationBadge);
+NotificationBadgeWithSchema.propTypes = reactDescPropTypes.NotificationBadgePropTypes;
 
 exports.NotificationBadge = NotificationBadge;
 exports.NotificationBadgeWithSchema = NotificationBadgeWithSchema;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const defaultProps = {
+  type: 'number',
+  size: 's',
+  disabled: false,
+  position: 'right',
+  color: undefined,
+  Component: undefined,
+  value: undefined
+};
+const NotificationBadgePropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
+  type: dsPropsHelpers.PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),
+  value: dsPropsHelpers.PropTypes.number.description('value of the numeric badge'),
+  size: dsPropsHelpers.PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),
+  disabled: dsPropsHelpers.PropTypes.bool.description('whether the badge is disabled'),
+  position: dsPropsHelpers.PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),
+  Component: dsPropsHelpers.PropTypes.func.description('Related component'),
+  color: dsPropsHelpers.PropTypes.string.description('Badge background color value')
+});
+
+exports.NotificationBadgePropTypes = NotificationBadgePropTypes;
+exports.defaultProps = defaultProps;

package/cjs/style.js

@@ -35,18 +35,19 @@ const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withC
   let {
     value
   } = _ref4;
-  return value > 9 ? '0 5px' : '0';
+  return value && value > 9 ? '0 5px' : '0';
 }, _ref5 => {
   let {
     disabled,
+    color,
     theme
   } = _ref5;
-  return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
+  return disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900'];
 }, _ref6 => {
   let {
     value
   } = _ref6;
-  return value > 9 ? '10px' : '50%';
+  return value && value > 9 ? '10px' : '50%';
 }, _ref7 => {
   let {
     size
@@ -67,19 +68,20 @@ const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withC
     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';
+  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 = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
   componentId: "sc-lsxuo6-3"
 })(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
   let {
     disabled,
-    theme
+    theme,
+    color
   } = _ref11;
-  return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
+  return disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900'];
 }, _ref12 => {
   let {
     size

package/esm/NotificationBadge.js

@@ -1,19 +1,34 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 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 { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';
 import { Wrapper, NumericBadge, DotBadge } from './style.js';
+import { jsxs } from 'react/jsx-runtime';
 
-const NotificationBadge = _ref => {
-  let {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const NotificationBadge = props => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefaults, NotificationBadgePropTypes);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefaults);
+  const {
     type,
+    color,
     value,
     size,
     disabled,
     position,
     Component
-  } = _ref;
+  } = propsWithDefaults;
   const Badge = type === 'number' ? NumericBadge : DotBadge;
   const relatedComponentRef = useRef(null);
   const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
@@ -21,33 +36,31 @@ const NotificationBadge = _ref => {
   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);
+    setRelatedComponentHeight((relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetHeight) || 0);
+    setRelatedComponentWidth((relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetWidth) || 0);
   }, [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
+  let top = 0;
+  let right = 0;
+  let left = 0;
+  if (position === 'right') left = relatedComponentWidth / 2;
+  if (position === 'left') right = relatedComponentWidth / 2;
+  top = relatedComponentHeight / 2;
+  return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, globalAttributes), {}, {
+    children: [renderBadge && /*#__PURE__*/_jsx(Badge, {
+      color: color,
+      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;
+NotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes;
 
 export { NotificationBadge, NotificationBadgeWithSchema };

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

@@ -0,0 +1,31 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const defaultProps = {
+  type: 'number',
+  size: 's',
+  disabled: false,
+  position: 'right',
+  color: undefined,
+  Component: undefined,
+  value: undefined
+};
+const NotificationBadgePropTypes = _objectSpread(_objectSpread({}, 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 };

package/esm/style.js

@@ -27,18 +27,19 @@ const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
   let {
     value
   } = _ref4;
-  return value > 9 ? '0 5px' : '0';
+  return value && value > 9 ? '0 5px' : '0';
 }, _ref5 => {
   let {
     disabled,
+    color,
     theme
   } = _ref5;
-  return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
+  return disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900'];
 }, _ref6 => {
   let {
     value
   } = _ref6;
-  return value > 9 ? '10px' : '50%';
+  return value && value > 9 ? '10px' : '50%';
 }, _ref7 => {
   let {
     size
@@ -59,19 +60,20 @@ const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
     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';
+  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 = /*#__PURE__*/styled(GenericBadge).withConfig({
   componentId: "sc-lsxuo6-3"
 })(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
   let {
     disabled,
-    theme
+    theme,
+    color
   } = _ref11;
-  return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
+  return disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900'];
 }, _ref12 => {
   let {
     size

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-notification-badge",
-  "version": "2.3.0-next.0",
+  "version": "2.3.0-next.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Notification Badge",
   "module": "./esm/index.js",
@@ -15,9 +15,9 @@
       "import": "./esm/style.js",
       "require": "./cjs/style.js"
     },
-    "./prop-types": {
-      "import": "./esm/prop-types.js",
-      "require": "./cjs/prop-types.js"
+    "./react-desc-prop-types": {
+      "import": "./esm/react-desc-prop-types.js",
+      "require": "./cjs/react-desc-prop-types.js"
     },
     "./NotificationBadge": {
       "import": "./esm/NotificationBadge.js",

package/types/NotificationBadge.d.ts

@@ -1,56 +1,5 @@
-/// <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?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
+import React from 'react';
+import { DSNotificationBadgeT } from './react-desc-prop-types';
+declare const NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props>;
+declare const NotificationBadgeWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSNotificationBadgeT.Props>;
 export { NotificationBadge, NotificationBadgeWithSchema };

package/types/react-desc-prop-types.d.ts

@@ -0,0 +1,382 @@
+/// <reference types="react" />
+export declare namespace DSNotificationBadgeT {
+    interface ComponentT {
+        innerRef: React.RefObject<HTMLSpanElement>;
+    }
+    interface Props {
+        [property: string]: unknown;
+        type?: string;
+        value?: number;
+        size?: string;
+        disabled?: boolean;
+        position?: string;
+        Component?: (propsT: ComponentT) => JSX.Element;
+        color?: string;
+    }
+}
+export declare const defaultProps: DSNotificationBadgeT.Props;
+export declare const NotificationBadgePropTypes: {
+    type: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    value: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    size: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    disabled: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    position: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    Component: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    color: import("@elliemae/ds-props-helpers/types/propTypes/types").ReactDescT;
+    'aria-*': any;
+    'on-*': any;
+    'data-*': any;
+    'all HTML attributes': any;
+    about: any;
+    accept: any;
+    acceptCharset: any;
+    accessKey: any;
+    action: any;
+    allowFullScreen: any;
+    allowTransparency: any;
+    alt: any;
+    'aria-activedescendant': any;
+    'aria-atomic': any;
+    'aria-autocomplete': any;
+    'aria-busy': any;
+    'aria-checked': any;
+    'aria-colcount': any;
+    'aria-colindex': any;
+    'aria-colspan': any;
+    'aria-controls': any;
+    'aria-current': any;
+    'aria-describedby': any;
+    'aria-details': any;
+    'aria-disabled': any;
+    'aria-dropeffect': any;
+    'aria-errormessage': any;
+    'aria-expanded': any;
+    'aria-flowto': any;
+    'aria-grabbed': any;
+    'aria-haspopup': any;
+    'aria-hidden': any;
+    'aria-invalid': any;
+    'aria-keyshortcuts': any;
+    'aria-label': any;
+    'aria-labelledby': any;
+    'aria-level': any;
+    'aria-live': any;
+    'aria-modal': any;
+    'aria-multiline': any;
+    'aria-multiselectable': any;
+    'aria-orientation': any;
+    'aria-owns': any;
+    'aria-placeholder': any;
+    'aria-posinset': any;
+    'aria-pressed': any;
+    'aria-readonly': any;
+    'aria-relevant': any;
+    'aria-required': any;
+    'aria-roledescription': any;
+    'aria-rowcount': any;
+    'aria-rowindex': any;
+    'aria-rowspan': any;
+    'aria-selected': any;
+    'aria-setsize': any;
+    'aria-sort': any;
+    'aria-valuemax': any;
+    'aria-valuemin': any;
+    'aria-valuenow': any;
+    'aria-valuetext': any;
+    as: any;
+    async: any;
+    autoCapitalize: any;
+    autoComplete: any;
+    autoCorrect: any;
+    autoFocus: any;
+    autoPlay: any;
+    autoSave: any;
+    capture: any;
+    cellPadding: any;
+    cellSpacing: any;
+    challenge: any;
+    charSet: any;
+    checked: any;
+    cite: any;
+    classID: any;
+    className: any;
+    cols: any;
+    colSpan: any;
+    content: any;
+    contentEditable: any;
+    contextMenu: any;
+    controls: any;
+    coords: any;
+    crossOrigin: any;
+    data: any;
+    datatype: any;
+    dateTime: any;
+    default: any;
+    defaultChecked: any;
+    defaultValue: any;
+    defer: any;
+    dir: any;
+    download: any;
+    draggable: any;
+    encType: any;
+    form: any;
+    formAction: any;
+    formEncType: any;
+    formMethod: any;
+    formNoValidate: any;
+    formTarget: any;
+    frameBorder: any;
+    headers: any;
+    height: any;
+    hidden: any;
+    high: any;
+    href: any;
+    hrefLang: any;
+    htmlFor: any;
+    httpEquiv: any;
+    id: any;
+    inlist: any;
+    inputMode: any;
+    integrity: any;
+    is: any;
+    itemID: any;
+    itemProp: any;
+    itemRef: any;
+    itemScope: any;
+    itemType: any;
+    keyParams: any;
+    keyType: any;
+    kind: any;
+    label: any;
+    lang: any;
+    list: any;
+    loop: any;
+    low: any;
+    manifest: any;
+    marginHeight: any;
+    marginWidth: any;
+    max: any;
+    maxLength: any;
+    media: any;
+    mediaGroup: any;
+    method: any;
+    min: any;
+    minLength: any;
+    multiple: any;
+    muted: any;
+    name: any;
+    nonce: any;
+    noValidate: any;
+    onAbort: any;
+    onAbortCapture: any;
+    onAnimationEnd: any;
+    onAnimationEndCapture: any;
+    onAnimationIteration: any;
+    onAnimationIterationCapture: any;
+    onAnimationStart: any;
+    onAnimationStartCapture: any;
+    onAuxClick: any;
+    onAuxClickCapture: any;
+    onBeforeInput: any;
+    onBeforeInputCapture: any;
+    onBlur: any;
+    onBlurCapture: any;
+    onCanPlay: any;
+    onCanPlayCapture: any;
+    onCanPlayThrough: any;
+    onCanPlayThroughCapture: any;
+    onChange: any;
+    onChangeCapture: any;
+    onClick: any;
+    onClickCapture: any;
+    onCompositionEnd: any;
+    onCompositionEndCapture: any;
+    onCompositionStart: any;
+    onCompositionStartCapture: any;
+    onCompositionUpdate: any;
+    onCompositionUpdateCapture: any;
+    onContextMenu: any;
+    onContextMenuCapture: any;
+    onCopy: any;
+    onCopyCapture: any;
+    onCut: any;
+    onCutCapture: any;
+    onDoubleClick: any;
+    onDoubleClickCapture: any;
+    onDrag: any;
+    onDragCapture: any;
+    onDragEnd: any;
+    onDragEndCapture: any;
+    onDragEnter: any;
+    onDragEnterCapture: any;
+    onDragExit: any;
+    onDragExitCapture: any;
+    onDragLeave: any;
+    onDragLeaveCapture: any;
+    onDragOver: any;
+    onDragOverCapture: any;
+    onDragStart: any;
+    onDragStartCapture: any;
+    onDrop: any;
+    onDropCapture: any;
+    onDurationChange: any;
+    onDurationChangeCapture: any;
+    onEmptied: any;
+    onEmptiedCapture: any;
+    onEncrypted: any;
+    onEncryptedCapture: any;
+    onEnded: any;
+    onEndedCapture: any;
+    onError: any;
+    onErrorCapture: any;
+    onFocus: any;
+    onFocusCapture: any;
+    onGotPointerCapture: any;
+    onGotPointerCaptureCapture: any;
+    onInput: any;
+    onInputCapture: any;
+    onInvalid: any;
+    onInvalidCapture: any;
+    onKeyDown: any;
+    onKeyDownCapture: any;
+    onKeyPress: any;
+    onKeyPressCapture: any;
+    onKeyUp: any;
+    onKeyUpCapture: any;
+    onLoad: any;
+    onLoadCapture: any;
+    onLoadedData: any;
+    onLoadedDataCapture: any;
+    onLoadedMetadata: any;
+    onLoadedMetadataCapture: any;
+    onLoadStart: any;
+    onLoadStartCapture: any;
+    onLostPointerCapture: any;
+    onLostPointerCaptureCapture: any;
+    onMouseDown: any;
+    onMouseDownCapture: any;
+    onMouseEnter: any;
+    onMouseLeave: any;
+    onMouseMove: any;
+    onMouseMoveCapture: any;
+    onMouseOut: any;
+    onMouseOutCapture: any;
+    onMouseOver: any;
+    onMouseOverCapture: any;
+    onMouseUp: any;
+    onMouseUpCapture: any;
+    onPaste: any;
+    onPasteCapture: any;
+    onPause: any;
+    onPauseCapture: any;
+    onPlay: any;
+    onPlayCapture: any;
+    onPlaying: any;
+    onPlayingCapture: any;
+    onPointerCancel: any;
+    onPointerCancelCapture: any;
+    onPointerDown: any;
+    onPointerDownCapture: any;
+    onPointerEnter: any;
+    onPointerEnterCapture: any;
+    onPointerLeave: any;
+    onPointerLeaveCapture: any;
+    onPointerMove: any;
+    onPointerMoveCapture: any;
+    onPointerOut: any;
+    onPointerOutCapture: any;
+    onPointerOver: any;
+    onPointerOverCapture: any;
+    onPointerUp: any;
+    onPointerUpCapture: any;
+    onProgress: any;
+    onProgressCapture: any;
+    onRateChange: any;
+    onRateChangeCapture: any;
+    onReset: any;
+    onResetCapture: any;
+    onScroll: any;
+    onScrollCapture: any;
+    onSeeked: any;
+    onSeekedCapture: any;
+    onSeeking: any;
+    onSeekingCapture: any;
+    onSelect: any;
+    onSelectCapture: any;
+    onStalled: any;
+    onStalledCapture: any;
+    onSubmit: any;
+    onSubmitCapture: any;
+    onSuspend: any;
+    onSuspendCapture: any;
+    onTimeUpdate: any;
+    onTimeUpdateCapture: any;
+    onTouchCancel: any;
+    onTouchCancelCapture: any;
+    onTouchEnd: any;
+    onTouchEndCapture: any;
+    onTouchMove: any;
+    onTouchMoveCapture: any;
+    onTouchStart: any;
+    onTouchStartCapture: any;
+    onTransitionEnd: any;
+    onTransitionEndCapture: any;
+    onVolumeChange: any;
+    onVolumeChangeCapture: any;
+    onWaiting: any;
+    onWaitingCapture: any;
+    onWheel: any;
+    onWheelCapture: any;
+    open: any;
+    optimum: any;
+    pattern: any;
+    placeholder: any;
+    playsInline: any;
+    poster: any;
+    prefix: any;
+    preload: any;
+    property: any;
+    radioGroup: any;
+    readOnly: any;
+    rel: any;
+    required: any;
+    resource: any;
+    results: any;
+    reversed: any;
+    role: any;
+    rows: any;
+    rowSpan: any;
+    sandbox: any;
+    scope: any;
+    scoped: any;
+    scrolling: any;
+    seamless: any;
+    security: any;
+    selected: any;
+    shape: any;
+    sizes: any;
+    slot: any;
+    span: any;
+    spellCheck: any;
+    src: any;
+    srcDoc: any;
+    srcLang: any;
+    srcSet: any;
+    start: any;
+    step: any;
+    style: any;
+    summary: any;
+    suppressContentEditableWarning: any;
+    suppressHydrationWarning: any;
+    tabIndex: any;
+    target: any;
+    title: any;
+    translate: any;
+    typeof: any;
+    unselectable: any;
+    useMap: any;
+    vocab: any;
+    width: any;
+    wmode: any;
+    wrap: any;
+};

package/types/style.d.ts

@@ -1,4 +1,19 @@
+import { DSNotificationBadgeT } from './react-desc-prop-types';
+interface StyledGenericBadgeT {
+    top: number;
+    left: number;
+    right: number;
+}
 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>;
+export declare const GenericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, DSNotificationBadgeT.Props & StyledGenericBadgeT, never>;
+export declare const NumericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, DSNotificationBadgeT.Props & StyledGenericBadgeT & {
+    top: number;
+    left: number;
+    right: number;
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const DotBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, DSNotificationBadgeT.Props & StyledGenericBadgeT, never>;
+export {};

package/cjs/index.d.js

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

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/esm/index.d.js

@@ -1 +0,0 @@
-

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/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/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;
-};