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

package/src/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/src/badge/Badge.less

@@ -33,7 +33,7 @@
 
     mask-image:
       radial-gradient(
-        circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),
+        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)
@@ -42,7 +42,7 @@
     [dir="rtl"] & {
       mask-image:
         radial-gradient(
-          circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),
+          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)
@@ -52,7 +52,7 @@
 
   & > &__content {
     position: absolute;
-    bottom: 0;
+    bottom: var(--badge-bottom-position);
     .right(0);
 
     box-sizing: border-box;

package/src/badge/Badge.tsx

@@ -27,6 +27,7 @@ export type BadgeProps = {
   size?: SizeSmall | DeprecatedSizes | SizeLarge;
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
+  position?: 'top-right' | 'bottom-right';
 } & CommonProps;
 
 const mapLegacySize = {
@@ -43,6 +44,7 @@ const Badge = ({
   border = Theme.LIGHT,
   'aria-label': ariaLabel,
   children,
+  position = 'bottom-right',
 }: BadgeProps) => {
   // medium is deprecated, so we map it to small
   const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
@@ -56,7 +58,14 @@ const Badge = ({
   );
 
   return (
-    <div aria-label={ariaLabel} className={classes}>
+    <div
+      aria-label={ariaLabel}
+      className={classes}
+      style={{
+        '--badge-mask-position': position === 'top-right' ? 'bottom' : 'top',
+        '--badge-bottom-position': position === 'top-right' ? 'calc(var(--badge-size) * 2)' : 0,
+      }}
+    >
       <div className="tw-badge__children">{children}</div>
       <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
         {badge}

package/src/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/src/circularButton/CircularButton.less

@@ -9,23 +9,23 @@
   cursor: pointer;
   position: relative;
 
-  .tw-icon {
-    position: absolute;
-    top: var(--size-16);
-    pointer-events: none;
-    color: white;
-    transition: color 0.15s ease-in-out;
-    width: 100%;
-    .left(0);
+  // .tw-icon {
+  //   position: absolute;
+  //   top: var(--size-16);
+  //   pointer-events: none;
+  //   color: white;
+  //   transition: color 0.15s ease-in-out;
+  //   width: 100%;
+  //   .left(0);
 
-    @media (--screen-400-zoom) {
-      top: var(--size-8);
-    }
+  //   @media (--screen-400-zoom) {
+  //     top: var(--size-8);
+  //   }
 
-    > svg {
-      margin: 0 auto;
-    }
-  }
+  //   > svg {
+  //     margin: 0 auto;
+  //   }
+  // }
 
   .np-theme-personal & {
     /* stylelint-disable-next-line no-duplicate-selectors */

package/src/circularButton/CircularButton.tsx

@@ -28,14 +28,12 @@ const CircularButton = ({
 }: CircularButtonProps) => {
   const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
 
-  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;
-
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
 
   return (
     <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
       <Circle
-        as="input"
+        as="button"
         // @ts-expect-error it's input[type=button] element
         type="button"
         size={isTinyViewport ? 64 : 56}
@@ -43,8 +41,9 @@ const CircularButton = ({
         className={classes}
         disabled={disabled}
         {...rest}
-      />
-      {iconElement}
+      >
+        {icon}
+      </Circle>
       <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
         {children}
       </Body>

package/src/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/src/common/circle/Circle.less

@@ -3,4 +3,26 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+
+  img {
+    border-radius: var(--radius-full);
+    width: 100%;
+    height: 100%;
+  }
+
+  // circle like components set custom typography styles for default (Inter) font
+  font-size: var(--circle-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+
+  // circle like components set custom typography styles for Wise Sand font
+  .np-display {
+    font-size: var(--circle-font-size);
+  }
+
+  // circle like components have custom icon sizes
+  .tw-icon > svg {
+    height: var(--circle-icon-size);
+    width: var(--circle-icon-size);
+  }
 }

package/src/common/circle/Circle.tsx

@@ -1,7 +1,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -19,6 +19,32 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const mapIconSize = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36,
+};
+
+/**
+ * circle like components have custom font styles
+ */
+const mapFontSize = {
+  16: 8,
+  24: 12,
+  32: 14,
+  40: 18,
+  48: 22,
+  56: 26,
+  72: 30,
+};
+
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -35,7 +61,12 @@ const Circle = forwardRef(function Circle(
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      style={{
+        ...style,
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size': `${mapIconSize[size]}px`,
+        '--circle-font-size': `${mapFontSize[size]}px`,
+      }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/common/index.js

@@ -23,3 +23,4 @@ export { MarkdownNodeType } from './propsValues/markdownNodeType';
 export { FileType } from './fileType';
 export * from './locale';
 export * from './commonProps';
+export * from './initials';

package/src/common/initials.ts

@@ -0,0 +1,13 @@
+export function getInitials(name: string) {
+  const allInitials = name
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+
+  return allInitials[0] + allInitials.slice(-1);
+}

package/src/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/src/common/notificationDot/NotificationDot.less

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

package/src/common/notificationDot/NotificationDot.tsx

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+
+type Props = Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+
+/**
+ * @deprecated make this element part pre build badges
+ */
+export default function NotificationDot(props: Props) {
+  return <div {...props} className="np-notification-dot" />;
+}

package/src/display/Display.tsx

@@ -18,7 +18,7 @@ function Display({
   id,
 }: Props) {
   return (
-    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>
+    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
       {children}
     </Heading>
   );

package/src/index.ts

@@ -8,6 +8,7 @@ export type { ActionOptionProps } from './actionOption';
 export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
+export type { AvatarViewProps } from './avatarView';
 export type { BadgeProps } from './badge';
 export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
@@ -102,6 +103,7 @@ export { default as ActionOption } from './actionOption';
 export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
+export { default as AvatarView } from './avatarView';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';
@@ -243,7 +245,9 @@ export {
   getLangFromLocale,
   isBrowser,
   isServerSide,
+  getInitials,
 } from './common';
+export { getAvatarColorFromSeed } from './avatar/colors';
 
 /**
  * Translations

package/src/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/src/main.less

@@ -2,6 +2,8 @@
 @import "./accordion/Accordion.less";
 @import "./actionButton/ActionButton.less";
 @import "./avatar/Avatar.less";
+@import "./avatarView/AvatarView.less";
+@import "./avatarGroup/AvatarGroup.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
@@ -14,6 +16,7 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
+@import "./common/notificationDot/NotificationDot.less";
 @import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";

package/src/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/src/statusIcon/StatusIcon.less

@@ -1,7 +1,7 @@
-.status-icon > svg {
-  height: var(--size-32);
-  width: var(--size-32);
-}
+// .status-icon > svg {
+//   height: var(--size-32);
+//   width: var(--size-32);
+// }
 
 .status-circle {
   .light {
@@ -25,8 +25,8 @@
 
   &-sm {
     .status-icon > svg {
-      height: var(--size-14);
-      width: var(--size-14);
+      // height: var(--size-14);
+      // width: var(--size-14);
 
       @media (--screen-400-zoom) {
         width: var(--size-24);