@elliemae/ds-notification-badge 3.22.0-next.26 → 3.22.0-next.28

package/dist/cjs/NotificationBadge.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/NotificationBadge.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React, { 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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 [renderBadge, setRenderBadge] = React.useState(false);\n  const isNumericBadge = type === 'number';\n  const Badge = isNumericBadge ? NumericBadge : DotBadge;\n  const relatedComponentRef = useRef<HTMLSpanElement>(null);\n  const wrapperComponentRef = useRef<Element>(null);\n  const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n  React.useLayoutEffect(() => {\n    setRenderBadge(!!relatedComponentRef?.current || !Component);\n  }, [relatedComponentRef, Component]);\n\n  const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n  const spaceLeft = getSpaceLeft(relatedComputedStyle);\n  const spaceRight = getSpaceRight(relatedComputedStyle);\n  const spaceTop = getSpaceTop(relatedComputedStyle);\n\n  const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n  const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n  const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n  const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n  return (\n    <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n      {renderBadge ? (\n        <Badge\n          data-related-component={!!Component ? 'true' : 'false'}\n          ref={badgeComponentRef}\n          data-position={position}\n          data-type={type}\n          data-testid=\"ds-notification-badge\"\n          color={color}\n          size={size}\n          value={value}\n          disabled={disabled}\n          top={top}\n          right={position === 'right' ? right : null}\n          left={position === 'left' ? left : null}\n          charCount={getValueCharactersCount(value)}\n        >\n          {type === 'number' ? value : null}\n        </Badge>\n      ) : null}\n      {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\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;ADiDnB;AA9CJ,mBAA8B;AAC9B,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAChD,qBAAyD;AAEzD,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,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,4BAAe;AAC9C,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,0BAAsB,qBAAgB,IAAI;AAChD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,gBAAY,6BAAa,oBAAoB;AACnD,QAAM,iBAAa,8BAAc,oBAAoB;AACrD,QAAM,eAAW,4BAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,6CAAC,wBAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": ["React"]

package/dist/cjs/helpers.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/helpers.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const getSpaceLeft = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.marginLeft) : 0;\n\nexport const getSpaceRight = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.marginRight) : 0;\n\nexport const getSpaceTop = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.marginTop) : 0;\n\nexport const getSpaceWidth = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.width) : 0;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe,CAAC,yBAC3B,uBAAuB,WAAW,qBAAqB,UAAU,IAAI;AAEhE,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,WAAW,IAAI;AAEjE,MAAM,cAAc,CAAC,yBAC1B,uBAAuB,WAAW,qBAAqB,SAAS,IAAI;AAE/D,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,KAAK,IAAI;",
   "names": []

package/dist/cjs/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "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;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "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.node.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;",
   "names": []

package/dist/cjs/style.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/style.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\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  theme: Theme;\n  ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n  l: 30,\n  l1: 21,\n  d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n  if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n  if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n  if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n  return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  position: relative;\n  z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n  position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n  top: ${({ top }: NumericBadgeT) => `${top}px`};\n  right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n  left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n  z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n  white-space: nowrap;\n  color: #fff;\n  padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n  background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n  border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n  font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n  font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n  height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n  min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n  background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n  width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n  height: ${({ size }: NumericBadgeT) => (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;AAgBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,eAAe,wBAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,SAK3E,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA,aAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU;AAAA,sBACpD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS;AAAA,eAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,iBACpD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ;AAAA,YAC1D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,eACnD,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS;AAAA;AAG3E,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,MAAsB,SAAS,MAAM,SAAS;AAAA,YACrD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA;AAAA;",
   "names": []

package/dist/esm/NotificationBadge.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React, { 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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 [renderBadge, setRenderBadge] = React.useState(false);\n  const isNumericBadge = type === 'number';\n  const Badge = isNumericBadge ? NumericBadge : DotBadge;\n  const relatedComponentRef = useRef<HTMLSpanElement>(null);\n  const wrapperComponentRef = useRef<Element>(null);\n  const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n  React.useLayoutEffect(() => {\n    setRenderBadge(!!relatedComponentRef?.current || !Component);\n  }, [relatedComponentRef, Component]);\n\n  const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n  const spaceLeft = getSpaceLeft(relatedComputedStyle);\n  const spaceRight = getSpaceRight(relatedComputedStyle);\n  const spaceTop = getSpaceTop(relatedComputedStyle);\n\n  const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n  const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n  const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n  const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n  return (\n    <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n      {renderBadge ? (\n        <Badge\n          data-related-component={!!Component ? 'true' : 'false'}\n          ref={badgeComponentRef}\n          data-position={position}\n          data-type={type}\n          data-testid=\"ds-notification-badge\"\n          color={color}\n          size={size}\n          value={value}\n          disabled={disabled}\n          top={top}\n          right={position === 'right' ? right : null}\n          left={position === 'left' ? left : null}\n          charCount={getValueCharactersCount(value)}\n        >\n          {type === 'number' ? value : null}\n        </Badge>\n      ) : null}\n      {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\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;ACiDnB,SAEI,KAFJ;AA9CJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAChD,SAAS,cAAc,eAAe,mBAAmB;AAEzD,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,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,eAAe;AAC9C,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,sBAAsB,OAAgB,IAAI;AAChD,QAAM,oBAAoB,OAAuB,IAAI;AAErD,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,YAAY,aAAa,oBAAoB;AACnD,QAAM,aAAa,cAAc,oBAAoB;AACrD,QAAM,WAAW,YAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,qBAAC,WAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": ["React"]

package/dist/esm/helpers.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/helpers.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/helpers.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const getSpaceLeft = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.marginLeft) : 0;\n\nexport const getSpaceRight = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.marginRight) : 0;\n\nexport const getSpaceTop = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.marginTop) : 0;\n\nexport const getSpaceWidth = (relatedComputedStyle: CSSStyleDeclaration | 0): number =>\n  relatedComputedStyle ? parseFloat(relatedComputedStyle.width) : 0;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe,CAAC,yBAC3B,uBAAuB,WAAW,qBAAqB,UAAU,IAAI;AAEhE,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,WAAW,IAAI;AAEjE,MAAM,cAAc,CAAC,yBAC1B,uBAAuB,WAAW,qBAAqB,SAAS,IAAI;AAE/D,MAAM,gBAAgB,CAAC,yBAC5B,uBAAuB,WAAW,qBAAqB,KAAK,IAAI;",
   "names": []

package/dist/esm/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NotificationBadge.js';\n// eslint-disable-next-line no-restricted-exports\nexport { NotificationBadge as default } from './NotificationBadge.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AAEd,SAA8B,yBAAe;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
+  "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  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.node.description('Related component'),\n  color: PropTypes.string.description('Badge background color value'),\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iCAAiC;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,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,4BAA4B;AAAA,EACzG,MAAM,UAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,UAAU,UAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,WAAW,UAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,UAAU,OAAO,YAAY,8BAA8B;AACpE;",
   "names": []

package/dist/esm/style.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
+  "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 { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\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  theme: Theme;\n  ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n  l: 30,\n  l1: 21,\n  d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n  if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n  if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n  if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n  return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  position: relative;\n  z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n  position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n  top: ${({ top }: NumericBadgeT) => `${top}px`};\n  right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n  left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n  z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: fit-content;\n  white-space: nowrap;\n  color: #fff;\n  padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n  background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n  border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n  font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n  font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n  height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n  min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n  background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n    disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n  width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n  height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n  border-radius: 100%;\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAgBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,eAAe,OAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,SAK3E,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA,aAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU;AAAA,sBACpD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS;AAAA,eAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,iBACpD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ;AAAA,YAC1D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,eACnD,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS;AAAA;AAG3E,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,MAAsB,SAAS,MAAM,SAAS;AAAA,YACrD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA;AAAA;",
   "names": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-notification-badge",
-  "version": "3.22.0-next.26",
+  "version": "3.22.0-next.28",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Notification Badge",
   "files": [
@@ -48,14 +48,14 @@
   },
   "dependencies": {
     "@elliemae/pui-theme": "~2.7.0",
-    "@elliemae/ds-props-helpers": "3.22.0-next.26",
-    "@elliemae/ds-system": "3.22.0-next.26"
+    "@elliemae/ds-props-helpers": "3.22.0-next.28",
+    "@elliemae/ds-system": "3.22.0-next.28"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.22",
     "@testing-library/react": "~12.1.3",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.26"
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.28"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -67,12 +67,12 @@
     "typeSafety": false
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
     "test": "pui-cli test --passWithNoTests",
-    "lint": "node ../../scripts/lint.mjs",
-    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
-    "dts": "node ../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
     "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npm exec ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""