@elliemae/ds-notification-badge 3.16.0-next.11 → 3.16.0-next.13

package/dist/cjs/NotificationBadge.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/NotificationBadge.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useState, useEffect, useRef } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n    propsWithDefaults,\n    NotificationBadgePropTypes,\n    'DSNotificationBadge',\n  );\n  const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n  const globalAttributes = useGetGlobalAttributes(rest);\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  return (\n    <Wrapper {...globalAttributes}>\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          charCount={getValueCharactersCount(value)}\n        >\n          {type === 'number' ? value : null}\n        </Badge>\n      )}\n      {Component && <Component innerRef={relatedComponentRef} />}\n    </Wrapper>\n  );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\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;AAAA;ACAA,YAAuB;AD6CnB;AA5CJ,mBAAmD;AACnD,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,cAAc,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,QAAI,uBAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,CAAC;AAEpE,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,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,SACE,6CAAC,wBAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,4CAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CnB;AA5CJ,mBAAmD;AACnD,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,QAAI,uBAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,CAAC;AAEpE,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,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,SACE,6CAAC,wBAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,4CAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/cjs/index.js

@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export * from './NotificationBadge.js';\n// eslint-disable-next-line no-restricted-exports\nexport { NotificationBadge as default } from './NotificationBadge.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,mCAAd;AAEA,+BAA6C;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,mCAAd;AAEA,+BAA6C;",
   "names": []
 }

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

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

@@ -2,6 +2,6 @@
   "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  type BadgeType = 'number' | 'dot';\n  type BadgeSize = 's' | 'l';\n  type BadgePosition = 'left' | 'right';\n\n  export interface Props {\n    [property: string]: unknown;\n    type?: BadgeType;\n    value?: number | string;\n    size?: BadgeSize;\n    disabled?: boolean;\n    position?: BadgePosition;\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};\n\nexport const NotificationBadgePropTypes = {\n  ...globalAttributesPropTypes,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('value of the numeric badge'),\n  type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n  size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n  position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n  disabled: PropTypes.bool.description('whether the badge is disabled'),\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;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AAsB9C,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,4BAA4B;AAAA,EACzG,MAAM,kCAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,MAAM,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,WAAW,kCAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,kCAAU,OAAO,YAAY,8BAA8B;AACpE;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AAsB9C,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,4BAA4B;AAAA,EACzG,MAAM,kCAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,MAAM,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,WAAW,kCAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,kCAAU,OAAO,YAAY,8BAA8B;AACpE;",
   "names": []
 }

package/dist/cjs/style.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/style.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\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  charCount: number;\n  size?: string;\n  value?: number | string;\n  disabled?: boolean;\n  color?: string;\n}>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n  color: #fff;\n  padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n  background-color: ${({ disabled, color, theme }) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n  border-radius: ${({ charCount }) => (charCount > 1 ? '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, charCount }) => {\n    if (size === 'l' && charCount > 1) return '30px';\n    if (size === 'l' && charCount <= 1) return '21px';\n    if (size === 's' && charCount > 1) 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;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,wBAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,wBAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/NotificationBadge.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useState, useEffect, useRef } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n    propsWithDefaults,\n    NotificationBadgePropTypes,\n    'DSNotificationBadge',\n  );\n  const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n  const globalAttributes = useGetGlobalAttributes(rest);\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  return (\n    <Wrapper {...globalAttributes}>\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          charCount={getValueCharactersCount(value)}\n        >\n          {type === 'number' ? value : null}\n        </Badge>\n      )}\n      {Component && <Component innerRef={relatedComponentRef} />}\n    </Wrapper>\n  );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6CnB,SAEI,KAFJ;AA5CJ,SAAgB,UAAU,WAAW,cAAc;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,cAAc,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,CAAC;AAEpE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,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,SACE,qBAAC,WAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,oBAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "mappings": "AAAA,YAAY,WAAW;AC6CnB,SAEI,KAFJ;AA5CJ,SAAgB,UAAU,WAAW,cAAc;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,CAAC;AAEpE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,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,SACE,qBAAC,WAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,oBAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/esm/style.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\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  charCount: number;\n  size?: string;\n  value?: number | string;\n  disabled?: boolean;\n  color?: string;\n}>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n  color: #fff;\n  padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n  background-color: ${({ disabled, color, theme }) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n  border-radius: ${({ charCount }) => (charCount > 1 ? '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, charCount }) => {\n    if (size === 'l' && charCount > 1) return '30px';\n    if (size === 'l' && charCount <= 1) return '21px';\n    if (size === 's' && charCount > 1) 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,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-notification-badge",
-  "version": "3.16.0-next.11",
+  "version": "3.16.0-next.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Notification Badge",
   "files": [
@@ -47,13 +47,13 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.16.0-next.11",
-    "@elliemae/ds-system": "3.16.0-next.11",
-    "@elliemae/ds-utilities": "3.16.0-next.11"
+    "@elliemae/ds-props-helpers": "3.16.0-next.13",
+    "@elliemae/ds-system": "3.16.0-next.13",
+    "@elliemae/ds-utilities": "3.16.0-next.13"
   },
   "devDependencies": {
     "@testing-library/react": "~12.1.3",
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
     "react": "^17.0.2",