@transferwise/components 0.0.0-experimental-e5e0684 → 0.0.0-experimental-37d8e2c

package/build/index.mjs

@@ -6,6 +6,7 @@ export { default as SelectOption } from './selectOption/SelectOption.mjs';
 export { default as Alert, AlertArrowPosition } from './alert/Alert.mjs';
 export { AvatarType } from './avatar/avatarTypes.mjs';
 export { default as Avatar } from './avatar/Avatar.mjs';
+export { default as AvatarView } from './avatarView/AvatarView.mjs';
 export { default as AvatarWrapper } from './avatarWrapper/AvatarWrapper.mjs';
 export { default as Badge } from './badge/Badge.mjs';
 export { default as Body } from './body/Body.mjs';
@@ -95,6 +96,7 @@ export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
 export { useScreenSize } from './common/hooks/useScreenSize.mjs';
 export { default as useSnackbar } from './snackbar/useSnackbar.mjs';
+export { getAvatarColorFromSeed } from './avatar/colors/colors.mjs';
 export { default as translations } from './i18n/index.mjs';
 export { default as withId } from './withId/withId.mjs';
 export { default as CheckboxButton } from './checkboxButton/CheckboxButton.mjs';
@@ -122,4 +124,5 @@ export { Variant } from './common/propsValues/variant.mjs';
 export { Width } from './common/propsValues/width.mjs';
 export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale } from './common/locale/index.mjs';
 export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mjs';
+export { getInitials } from './common/initials.mjs';
 //# sourceMappingURL=index.mjs.map

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/main.css

@@ -421,6 +421,56 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.np-avatar-view {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.np-avatar-view .np-circle {
+  background-color: transparent;
+  border: var(--avatar-view-non-interactive-border-width) solid rgba(0,0,0,0.10196);
+  border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
+}
+.np-avatar-view-selected .np-circle {
+  border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border: none;
+}
+.np-avatar-group {
+  display: inline-flex;
+  --np-avatar-group-size: 48px;
+  --np-avatar-size: 32px;
+}
+.np-avatar-group-diagonal {
+  width: var(--np-avatar-group-size);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+          mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+}
+.np-avatar-group-diagonal-child {
+  margin-left: calc((var(--np-avatar-size) / 2) * -1);
+  margin-top: calc((var(--np-avatar-size) * var(--np-avatar-group-index)) / 2);
+}
+.np-avatar-group-horizontal {
+  width: calc((var(--np-avatar-size) * 2) - 2px);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-horizontal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+          mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+}
+.np-avatar-group-horizontal-child {
+  margin-left: calc((var(--np-avatar-size) / 4) * -1);
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -437,16 +487,16 @@ div.critical-comms .critical-comms-body {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: 0;
+  bottom: var(--badge-bottom-position);
   right: 0;
   box-sizing: border-box;
   text-align: center;
@@ -985,30 +1035,6 @@ div.critical-comms .critical-comms-body {
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
@@ -1157,6 +1183,23 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle img {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+}
+.np-circle .np-display {
+  font-size: var(--circle-font-size);
+}
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
 }
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
@@ -1439,6 +1482,16 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
+.np-notification-dot {
+  --badge-notification-dot-size: 14px;
+  width: 14px;
+  width: var(--badge-notification-dot-size);
+  height: 14px;
+  height: var(--badge-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+}
 .np-select-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -4144,12 +4197,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4165,12 +4212,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
 @media (max-width: 320px) {
   .status-circle-sm .status-icon > svg {
     width: 24px;

package/build/statusIcon/StatusIcon.js

@@ -30,12 +30,14 @@ const StatusIcon = ({
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
-  const size$1 = sizeProp === size.Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size$1 = sizeProp === size.Size.SMALL && isTinyViewport ? 32 : typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     as: "span",
     size: size$1,
     "data-testid": "status-icon",
-    className: clsx.clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
+    className: clsx.clsx('status-circle',
+    // `status-circle-${sizeProp}`,
+    sentiment),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: clsx.clsx('status-icon', iconColor)
     })

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAYA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,MAAI,GAAGC,QAAQ,KAAKP,SAAI,CAACC,KAAK,IAAIS,cAAc,GAAG,EAAE,GAAGZ,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,MAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE,iBAAiBX,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAc,QAAA,eAEzEL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n  sentiment?: `${Sentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size =\n    sizeProp === Size.SMALL && isTinyViewport\n      ? 32\n      : typeof sizeProp === 'string'\n        ? mapLegacySize[sizeProp]\n        : sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx(\n        'status-circle',\n        // `status-circle-${sizeProp}`,\n        sentiment,\n      )}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,MAAMP,MAAI,GACRC,QAAQ,KAAKP,SAAI,CAACC,KAAK,IAAIS,cAAc,GACrC,EAAE,GACF,OAAOH,QAAQ,KAAK,QAAQ,GAC1BT,aAAa,CAACS,QAAQ,CAAC,GACvBA,QAAQ,CAAA;EAChB,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,MAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,SAAI,CACb,eAAe;AACf;AACAb,IAAAA,SAAS,CACT;IAAAc,QAAA,eAEFL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/statusIcon/StatusIcon.mjs

@@ -28,12 +28,14 @@ const StatusIcon = ({
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
   return /*#__PURE__*/jsx(Circle, {
     as: "span",
     size: size,
     "data-testid": "status-icon",
-    className: clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
+    className: clsx('status-circle',
+    // `status-circle-${sizeProp}`,
+    sentiment),
     children: /*#__PURE__*/jsx(Icon, {
       className: clsx('status-icon', iconColor)
     })

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;AAYA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,IAAI;AACbC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,eAAe;AACxBC,EAAAA,IAAI,EAAEP,IAAI;AACVQ,EAAAA,KAAK,EAAEJ,KAAK;AACZK,EAAAA,OAAO,EAAEX,KAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,IAAI,GAAGC,QAAQ,KAAKP,IAAI,CAACC,KAAK,IAAIS,cAAc,GAAG,EAAE,GAAGZ,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEO,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,IAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAE,iBAAiBX,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAc,QAAA,eAEzEL,GAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n  sentiment?: `${Sentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size =\n    sizeProp === Size.SMALL && isTinyViewport\n      ? 32\n      : typeof sizeProp === 'string'\n        ? mapLegacySize[sizeProp]\n        : sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx(\n        'status-circle',\n        // `status-circle-${sizeProp}`,\n        sentiment,\n      )}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,IAAI;AACbC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,eAAe;AACxBC,EAAAA,IAAI,EAAEP,IAAI;AACVQ,EAAAA,KAAK,EAAEJ,KAAK;AACZK,EAAAA,OAAO,EAAEX,KAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,MAAMP,IAAI,GACRC,QAAQ,KAAKP,IAAI,CAACC,KAAK,IAAIS,cAAc,GACrC,EAAE,GACF,OAAOH,QAAQ,KAAK,QAAQ,GAC1BT,aAAa,CAACS,QAAQ,CAAC,GACvBA,QAAQ,CAAA;EAChB,oBACEO,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,IAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,IAAI,CACb,eAAe;AACf;AACAb,IAAAA,SAAS,CACT;IAAAc,QAAA,eAEFL,GAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/styles/avatarGroup/AvatarGroup.css

@@ -0,0 +1,28 @@
+.np-avatar-group {
+  display: inline-flex;
+  --np-avatar-group-size: 48px;
+  --np-avatar-size: 32px;
+}
+.np-avatar-group-diagonal {
+  width: var(--np-avatar-group-size);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+          mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+}
+.np-avatar-group-diagonal-child {
+  margin-left: calc((var(--np-avatar-size) / 2) * -1);
+  margin-top: calc((var(--np-avatar-size) * var(--np-avatar-group-index)) / 2);
+}
+.np-avatar-group-horizontal {
+  width: calc((var(--np-avatar-size) * 2) - 2px);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-horizontal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+          mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+}
+.np-avatar-group-horizontal-child {
+  margin-left: calc((var(--np-avatar-size) / 4) * -1);
+}

package/build/styles/avatarView/AvatarView.css

@@ -0,0 +1,22 @@
+.np-avatar-view {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.np-avatar-view .np-circle {
+  background-color: transparent;
+  border: var(--avatar-view-non-interactive-border-width) solid rgba(0,0,0,0.10196);
+  border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
+}
+.np-avatar-view-selected .np-circle {
+  border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border: none;
+}

package/build/styles/badge/Badge.css

@@ -14,16 +14,16 @@
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: 0;
+  bottom: var(--badge-bottom-position);
   right: 0;
   box-sizing: border-box;
   text-align: center;

package/build/styles/circularButton/CircularButton.css

@@ -6,30 +6,6 @@
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }

package/build/styles/common/circle/Circle.css

@@ -4,4 +4,21 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle img {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+}
+.np-circle .np-display {
+  font-size: var(--circle-font-size);
+}
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
 }

package/build/styles/common/notificationDot/NotificationDot.css

@@ -0,0 +1,10 @@
+.np-notification-dot {
+  --badge-notification-dot-size: 14px;
+  width: 14px;
+  width: var(--badge-notification-dot-size);
+  height: 14px;
+  height: var(--badge-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+}

package/build/styles/main.css

@@ -421,6 +421,56 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.np-avatar-view {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.np-avatar-view .np-circle {
+  background-color: transparent;
+  border: var(--avatar-view-non-interactive-border-width) solid rgba(0,0,0,0.10196);
+  border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
+}
+.np-avatar-view-selected .np-circle {
+  border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border: none;
+}
+.np-avatar-group {
+  display: inline-flex;
+  --np-avatar-group-size: 48px;
+  --np-avatar-size: 32px;
+}
+.np-avatar-group-diagonal {
+  width: var(--np-avatar-group-size);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+          mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+}
+.np-avatar-group-diagonal-child {
+  margin-left: calc((var(--np-avatar-size) / 2) * -1);
+  margin-top: calc((var(--np-avatar-size) * var(--np-avatar-group-index)) / 2);
+}
+.np-avatar-group-horizontal {
+  width: calc((var(--np-avatar-size) * 2) - 2px);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-horizontal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+          mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+}
+.np-avatar-group-horizontal-child {
+  margin-left: calc((var(--np-avatar-size) / 4) * -1);
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -437,16 +487,16 @@ div.critical-comms .critical-comms-body {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: 0;
+  bottom: var(--badge-bottom-position);
   right: 0;
   box-sizing: border-box;
   text-align: center;
@@ -985,30 +1035,6 @@ div.critical-comms .critical-comms-body {
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
@@ -1157,6 +1183,23 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle img {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+}
+.np-circle .np-display {
+  font-size: var(--circle-font-size);
+}
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
 }
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
@@ -1439,6 +1482,16 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
+.np-notification-dot {
+  --badge-notification-dot-size: 14px;
+  width: 14px;
+  width: var(--badge-notification-dot-size);
+  height: 14px;
+  height: var(--badge-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+}
 .np-select-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -4144,12 +4197,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4165,12 +4212,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
 @media (max-width: 320px) {
   .status-circle-sm .status-icon > svg {
     width: 24px;

package/build/styles/statusIcon/StatusIcon.css

@@ -1,9 +1,3 @@
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -19,12 +13,6 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
 @media (max-width: 320px) {
   .status-circle-sm .status-icon > svg {
     width: 24px;

package/build/typeahead/util/highlight.js

@@ -6,13 +6,25 @@ function Highlight({
   className,
   value,
   query
+}) {
+  const content = /*#__PURE__*/jsxRuntime.jsx(HighlightContent, {
+    value: value,
+    query: query
+  });
+  return className ? /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: className,
+    children: content
+  }) : content;
+}
+function HighlightContent({
+  value,
+  query
 }) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
-      return /*#__PURE__*/jsxRuntime.jsxs("span", {
-        className: className,
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsxRuntime.jsx("strong", {
           children: value.slice(highlightStart, highlightEnd)
         }), value.slice(Math.max(0, highlightEnd))]