@transferwise/components 0.0.0-experimental-d11e9c5 → 0.0.0-experimental-76bb7cd

package/build/index.js

@@ -8,41 +8,8 @@ var SelectOption = require('./selectOption/SelectOption.js');
 var Alert = require('./alert/Alert.js');
 var avatarTypes = require('./avatar/avatarTypes.js');
 var Avatar = require('./avatar/Avatar.js');
-var AvatarView = require('./avatarView/AvatarView.js');
 var AvatarWrapper = require('./avatarWrapper/AvatarWrapper.js');
 var Badge = require('./badge/Badge.js');
-var StatusIcon = require('./statusIcon/StatusIcon.js');
-require('@wise/art');
-require('react');
-require('clsx');
-var breakpoint = require('./common/propsValues/breakpoint.js');
-require('react/jsx-runtime');
-var Image = require('./image/Image.js');
-require('@transferwise/icons');
-var documentIosClick = require('./common/domHelpers/documentIosClick.js');
-var theme = require('./common/theme.js');
-var direction = require('./common/direction.js');
-var control = require('./common/propsValues/control.js');
-var size = require('./common/propsValues/size.js');
-var typography = require('./common/propsValues/typography.js');
-var width = require('./common/propsValues/width.js');
-var type = require('./common/propsValues/type.js');
-var dateMode = require('./common/propsValues/dateMode.js');
-var monthFormat = require('./common/propsValues/monthFormat.js');
-var position = require('./common/propsValues/position.js');
-var layouts = require('./common/propsValues/layouts.js');
-var status = require('./common/propsValues/status.js');
-var sentiment = require('./common/propsValues/sentiment.js');
-var profileType = require('./common/propsValues/profileType.js');
-var variant = require('./common/propsValues/variant.js');
-var scroll = require('./common/propsValues/scroll.js');
-var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
-var fileType = require('./common/fileType.js');
-var index = require('./common/locale/index.js');
-var initials = require('./common/initials.js');
-var colors = require('./common/colors.js');
-require('react-intl');
-require('./common/closeButton/CloseButton.messages.js');
 var Body = require('./body/Body.js');
 var Button = require('./button/Button.js');
 var Carousel = require('./carousel/Carousel.js');
@@ -70,6 +37,7 @@ var Emphasis = require('./emphasis/Emphasis.js');
 var Field = require('./field/Field.js');
 var FlowNavigation = require('./flowNavigation/FlowNavigation.js');
 var Header = require('./header/Header.js');
+var Image = require('./image/Image.js');
 var infoPresentations = require('./info/infoPresentations.js');
 var Info = require('./info/Info.js');
 var InlineAlert = require('./inlineAlert/InlineAlert.js');
@@ -116,6 +84,7 @@ var SlidingPanel = require('./slidingPanel/SlidingPanel.js');
 var Snackbar = require('./snackbar/Snackbar.js');
 var SnackbarContext = require('./snackbar/SnackbarContext.js');
 var SnackbarProvider = require('./snackbar/SnackbarProvider.js');
+var StatusIcon = require('./statusIcon/StatusIcon.js');
 var Stepper = require('./stepper/Stepper.js');
 var Sticky = require('./sticky/Sticky.js');
 var Summary = require('./summary/Summary.js');
@@ -129,10 +98,37 @@ var Typeahead = require('./typeahead/Typeahead.js');
 var Upload = require('./upload/Upload.js');
 var UploadInput = require('./uploadInput/UploadInput.js');
 require('@transferwise/neptune-validation');
+require('react');
 var useDirection = require('./common/hooks/useDirection/useDirection.js');
 var useLayout = require('./common/hooks/useLayout/useLayout.js');
 var useScreenSize = require('./common/hooks/useScreenSize.js');
 var useSnackbar = require('./snackbar/useSnackbar.js');
+var documentIosClick = require('./common/domHelpers/documentIosClick.js');
+var theme = require('./common/theme.js');
+var direction = require('./common/direction.js');
+var control = require('./common/propsValues/control.js');
+var breakpoint = require('./common/propsValues/breakpoint.js');
+var size = require('./common/propsValues/size.js');
+var typography = require('./common/propsValues/typography.js');
+var width = require('./common/propsValues/width.js');
+var type = require('./common/propsValues/type.js');
+var dateMode = require('./common/propsValues/dateMode.js');
+var monthFormat = require('./common/propsValues/monthFormat.js');
+var position = require('./common/propsValues/position.js');
+var layouts = require('./common/propsValues/layouts.js');
+var status = require('./common/propsValues/status.js');
+var sentiment = require('./common/propsValues/sentiment.js');
+var profileType = require('./common/propsValues/profileType.js');
+var variant = require('./common/propsValues/variant.js');
+var scroll = require('./common/propsValues/scroll.js');
+var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
+var fileType = require('./common/fileType.js');
+var index = require('./common/locale/index.js');
+require('@transferwise/icons');
+require('clsx');
+require('react-intl');
+require('./common/closeButton/CloseButton.messages.js');
+require('react/jsx-runtime');
 var index$1 = require('./i18n/index.js');
 var withId = require('./withId/withId.js');
 
@@ -152,103 +148,8 @@ Object.defineProperty(exports, "AvatarType", {
 	get: function () { return avatarTypes.AvatarType; }
 });
 exports.Avatar = Avatar;
-exports.AvatarView = AvatarView;
 exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
-exports.StatusIcon = StatusIcon;
-Object.defineProperty(exports, "Breakpoint", {
-	enumerable: true,
-	get: function () { return breakpoint.Breakpoint; }
-});
-exports.Image = Image.default;
-exports.isBrowser = documentIosClick.isBrowser;
-exports.isServerSide = documentIosClick.isServerSide;
-Object.defineProperty(exports, "Theme", {
-	enumerable: true,
-	get: function () { return theme.Theme; }
-});
-Object.defineProperty(exports, "Direction", {
-	enumerable: true,
-	get: function () { return direction.Direction; }
-});
-Object.defineProperty(exports, "ControlType", {
-	enumerable: true,
-	get: function () { return control.ControlType; }
-});
-Object.defineProperty(exports, "Priority", {
-	enumerable: true,
-	get: function () { return control.Priority; }
-});
-Object.defineProperty(exports, "Size", {
-	enumerable: true,
-	get: function () { return size.Size; }
-});
-Object.defineProperty(exports, "Typography", {
-	enumerable: true,
-	get: function () { return typography.Typography; }
-});
-Object.defineProperty(exports, "Width", {
-	enumerable: true,
-	get: function () { return width.Width; }
-});
-Object.defineProperty(exports, "Type", {
-	enumerable: true,
-	get: function () { return type.Type; }
-});
-Object.defineProperty(exports, "DateMode", {
-	enumerable: true,
-	get: function () { return dateMode.DateMode; }
-});
-Object.defineProperty(exports, "MonthFormat", {
-	enumerable: true,
-	get: function () { return monthFormat.MonthFormat; }
-});
-Object.defineProperty(exports, "Position", {
-	enumerable: true,
-	get: function () { return position.Position; }
-});
-Object.defineProperty(exports, "Layout", {
-	enumerable: true,
-	get: function () { return layouts.Layout; }
-});
-Object.defineProperty(exports, "Status", {
-	enumerable: true,
-	get: function () { return status.Status; }
-});
-Object.defineProperty(exports, "Sentiment", {
-	enumerable: true,
-	get: function () { return sentiment.Sentiment; }
-});
-Object.defineProperty(exports, "ProfileType", {
-	enumerable: true,
-	get: function () { return profileType.ProfileType; }
-});
-Object.defineProperty(exports, "Variant", {
-	enumerable: true,
-	get: function () { return variant.Variant; }
-});
-Object.defineProperty(exports, "Scroll", {
-	enumerable: true,
-	get: function () { return scroll.Scroll; }
-});
-Object.defineProperty(exports, "MarkdownNodeType", {
-	enumerable: true,
-	get: function () { return markdownNodeType.MarkdownNodeType; }
-});
-Object.defineProperty(exports, "FileType", {
-	enumerable: true,
-	get: function () { return fileType.FileType; }
-});
-exports.DEFAULT_LANG = index.DEFAULT_LANG;
-exports.DEFAULT_LOCALE = index.DEFAULT_LOCALE;
-exports.RTL_LANGUAGES = index.RTL_LANGUAGES;
-exports.SUPPORTED_LANGUAGES = index.SUPPORTED_LANGUAGES;
-exports.adjustLocale = index.adjustLocale;
-exports.getCountryFromLocale = index.getCountryFromLocale;
-exports.getDirectionFromLocale = index.getDirectionFromLocale;
-exports.getLangFromLocale = index.getLangFromLocale;
-exports.getInitials = initials.getInitials;
-exports.getBrandColorFromSeed = colors.getBrandColorFromSeed;
 exports.Body = Body;
 exports.Button = Button;
 exports.Carousel = Carousel;
@@ -284,6 +185,7 @@ exports.Emphasis = Emphasis;
 exports.Field = Field.Field;
 exports.FlowNavigation = FlowNavigation;
 exports.Header = Header.Header;
+exports.Image = Image.default;
 Object.defineProperty(exports, "InfoPresentation", {
 	enumerable: true,
 	get: function () { return infoPresentations.InfoPresentation; }
@@ -340,6 +242,7 @@ exports.SnackbarPortal = Snackbar.default;
 exports.SnackbarConsumer = SnackbarContext.SnackbarConsumer;
 exports.SnackbarContext = SnackbarContext.SnackbarContext;
 exports.SnackbarProvider = SnackbarProvider;
+exports.StatusIcon = StatusIcon;
 exports.Stepper = Stepper;
 exports.Sticky = Sticky;
 exports.Summary = Summary;
@@ -360,6 +263,96 @@ exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;
 exports.useScreenSize = useScreenSize.useScreenSize;
 exports.useSnackbar = useSnackbar;
+exports.isBrowser = documentIosClick.isBrowser;
+exports.isServerSide = documentIosClick.isServerSide;
+Object.defineProperty(exports, "Theme", {
+	enumerable: true,
+	get: function () { return theme.Theme; }
+});
+Object.defineProperty(exports, "Direction", {
+	enumerable: true,
+	get: function () { return direction.Direction; }
+});
+Object.defineProperty(exports, "ControlType", {
+	enumerable: true,
+	get: function () { return control.ControlType; }
+});
+Object.defineProperty(exports, "Priority", {
+	enumerable: true,
+	get: function () { return control.Priority; }
+});
+Object.defineProperty(exports, "Breakpoint", {
+	enumerable: true,
+	get: function () { return breakpoint.Breakpoint; }
+});
+Object.defineProperty(exports, "Size", {
+	enumerable: true,
+	get: function () { return size.Size; }
+});
+Object.defineProperty(exports, "Typography", {
+	enumerable: true,
+	get: function () { return typography.Typography; }
+});
+Object.defineProperty(exports, "Width", {
+	enumerable: true,
+	get: function () { return width.Width; }
+});
+Object.defineProperty(exports, "Type", {
+	enumerable: true,
+	get: function () { return type.Type; }
+});
+Object.defineProperty(exports, "DateMode", {
+	enumerable: true,
+	get: function () { return dateMode.DateMode; }
+});
+Object.defineProperty(exports, "MonthFormat", {
+	enumerable: true,
+	get: function () { return monthFormat.MonthFormat; }
+});
+Object.defineProperty(exports, "Position", {
+	enumerable: true,
+	get: function () { return position.Position; }
+});
+Object.defineProperty(exports, "Layout", {
+	enumerable: true,
+	get: function () { return layouts.Layout; }
+});
+Object.defineProperty(exports, "Status", {
+	enumerable: true,
+	get: function () { return status.Status; }
+});
+Object.defineProperty(exports, "Sentiment", {
+	enumerable: true,
+	get: function () { return sentiment.Sentiment; }
+});
+Object.defineProperty(exports, "ProfileType", {
+	enumerable: true,
+	get: function () { return profileType.ProfileType; }
+});
+Object.defineProperty(exports, "Variant", {
+	enumerable: true,
+	get: function () { return variant.Variant; }
+});
+Object.defineProperty(exports, "Scroll", {
+	enumerable: true,
+	get: function () { return scroll.Scroll; }
+});
+Object.defineProperty(exports, "MarkdownNodeType", {
+	enumerable: true,
+	get: function () { return markdownNodeType.MarkdownNodeType; }
+});
+Object.defineProperty(exports, "FileType", {
+	enumerable: true,
+	get: function () { return fileType.FileType; }
+});
+exports.DEFAULT_LANG = index.DEFAULT_LANG;
+exports.DEFAULT_LOCALE = index.DEFAULT_LOCALE;
+exports.RTL_LANGUAGES = index.RTL_LANGUAGES;
+exports.SUPPORTED_LANGUAGES = index.SUPPORTED_LANGUAGES;
+exports.adjustLocale = index.adjustLocale;
+exports.getCountryFromLocale = index.getCountryFromLocale;
+exports.getDirectionFromLocale = index.getDirectionFromLocale;
+exports.getLangFromLocale = index.getLangFromLocale;
 exports.translations = index$1;
 exports.withId = withId;
 //# sourceMappingURL=index.js.map

package/build/index.js.map

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

package/build/index.mjs

@@ -6,41 +6,8 @@ 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 StatusIcon } from './statusIcon/StatusIcon.mjs';
-import '@wise/art';
-import 'react';
-import 'clsx';
-export { Breakpoint } from './common/propsValues/breakpoint.mjs';
-import 'react/jsx-runtime';
-export { default as Image } from './image/Image.mjs';
-import '@transferwise/icons';
-export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mjs';
-export { Theme } from './common/theme.mjs';
-export { Direction } from './common/direction.mjs';
-export { ControlType, Priority } from './common/propsValues/control.mjs';
-export { Size } from './common/propsValues/size.mjs';
-export { Typography } from './common/propsValues/typography.mjs';
-export { Width } from './common/propsValues/width.mjs';
-export { Type } from './common/propsValues/type.mjs';
-export { DateMode } from './common/propsValues/dateMode.mjs';
-export { MonthFormat } from './common/propsValues/monthFormat.mjs';
-export { Position } from './common/propsValues/position.mjs';
-export { Layout } from './common/propsValues/layouts.mjs';
-export { Status } from './common/propsValues/status.mjs';
-export { Sentiment } from './common/propsValues/sentiment.mjs';
-export { ProfileType } from './common/propsValues/profileType.mjs';
-export { Variant } from './common/propsValues/variant.mjs';
-export { Scroll } from './common/propsValues/scroll.mjs';
-export { MarkdownNodeType } from './common/propsValues/markdownNodeType.mjs';
-export { FileType } from './common/fileType.mjs';
-export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale } from './common/locale/index.mjs';
-export { getInitials } from './common/initials.mjs';
-export { getBrandColorFromSeed } from './common/colors.mjs';
-import 'react-intl';
-import './common/closeButton/CloseButton.messages.mjs';
 export { default as Body } from './body/Body.mjs';
 export { default as Button } from './button/Button.mjs';
 export { default as Carousel } from './carousel/Carousel.mjs';
@@ -68,6 +35,7 @@ export { default as Emphasis } from './emphasis/Emphasis.mjs';
 export { Field } from './field/Field.mjs';
 export { default as FlowNavigation } from './flowNavigation/FlowNavigation.mjs';
 export { Header } from './header/Header.mjs';
+export { default as Image } from './image/Image.mjs';
 export { InfoPresentation } from './info/infoPresentations.mjs';
 export { default as Info } from './info/Info.mjs';
 export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
@@ -114,6 +82,7 @@ export { default as SlidingPanel } from './slidingPanel/SlidingPanel.mjs';
 export { default as SnackbarPortal } from './snackbar/Snackbar.mjs';
 export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext.mjs';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider.mjs';
+export { default as StatusIcon } from './statusIcon/StatusIcon.mjs';
 export { default as Stepper } from './stepper/Stepper.mjs';
 export { default as Sticky } from './sticky/Sticky.mjs';
 export { default as Summary } from './summary/Summary.mjs';
@@ -127,10 +96,37 @@ export { default as Typeahead } from './typeahead/Typeahead.mjs';
 export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
 import '@transferwise/neptune-validation';
+import 'react';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';
 export { useScreenSize } from './common/hooks/useScreenSize.mjs';
 export { default as useSnackbar } from './snackbar/useSnackbar.mjs';
+export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mjs';
+export { Theme } from './common/theme.mjs';
+export { Direction } from './common/direction.mjs';
+export { ControlType, Priority } from './common/propsValues/control.mjs';
+export { Breakpoint } from './common/propsValues/breakpoint.mjs';
+export { Size } from './common/propsValues/size.mjs';
+export { Typography } from './common/propsValues/typography.mjs';
+export { Width } from './common/propsValues/width.mjs';
+export { Type } from './common/propsValues/type.mjs';
+export { DateMode } from './common/propsValues/dateMode.mjs';
+export { MonthFormat } from './common/propsValues/monthFormat.mjs';
+export { Position } from './common/propsValues/position.mjs';
+export { Layout } from './common/propsValues/layouts.mjs';
+export { Status } from './common/propsValues/status.mjs';
+export { Sentiment } from './common/propsValues/sentiment.mjs';
+export { ProfileType } from './common/propsValues/profileType.mjs';
+export { Variant } from './common/propsValues/variant.mjs';
+export { Scroll } from './common/propsValues/scroll.mjs';
+export { MarkdownNodeType } from './common/propsValues/markdownNodeType.mjs';
+export { FileType } from './common/fileType.mjs';
+export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale } from './common/locale/index.mjs';
+import '@transferwise/icons';
+import 'clsx';
+import 'react-intl';
+import './common/closeButton/CloseButton.messages.mjs';
+import 'react/jsx-runtime';
 export { default as translations } from './i18n/index.mjs';
 export { default as withId } from './withId/withId.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

@@ -469,77 +469,6 @@ 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-notification-dot {
-  --np-notification-dot-size: 14px;
-  position: relative;
-  display: inline-block;
-}
-.np-notification-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-}
-.np-notification-dot-badge {
-  position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  right: 0;
-}
-.np-avatar-view .np-avatar-view-content {
-  color: var(--color-interactive-primary);
-}
-.np-avatar-view-interactive {
-  cursor: pointer;
-}
-.np-avatar-view-interactive .np-circle {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-avatar-view-interactive:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-avatar-view-interactive:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-avatar-view-non-interactive .np-circle {
-  background-color: transparent;
-}
-.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
-  box-shadow: none;
-}
-.np-avatar-group {
-  display: inline-flex;
-  position: relative;
-}
-.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 bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-}
-.np-avatar-group-diagonal-child {
-  position: absolute;
-  top: var(--np-avatar-group-diagonal-child-position);
-  right: 0;
-}
-.np-avatar-group-horizontal {
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-}
-.np-avatar-group-horizontal-child {
-  margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
-}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -547,7 +476,6 @@ div.critical-comms .critical-comms-body {
   --badge-mask: 2px;
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
-  --badge-content-position: 0px;
 }
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
@@ -557,8 +485,8 @@ 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) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), 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) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), 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 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));
 }
 [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));
@@ -568,8 +496,8 @@ div.critical-comms .critical-comms-body {
   position: absolute;
   width: var(--badge-size);
   height: var(--badge-size);
-  bottom: var(--badge-content-position);
-  right: var(--badge-content-position);
+  bottom: 0;
+  right: 0;
   box-sizing: border-box;
   border-radius: 50%;
   text-align: center;
@@ -582,7 +510,7 @@ div.critical-comms .critical-comms-body {
           user-select: none;
 }
 [dir="rtl"] .tw-badge > .tw-badge__content {
-  left: var(--badge-content-position);
+  left: 0;
   right: auto;
   right: initial;
 }
@@ -1283,43 +1211,11 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-border-neutral);
-  --circle-border-width: 1px;
-  font-size: var(--circle-font-size);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-}
-.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-circle img,
-.np-circle .wds-flag {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-.np-circle-border {
-  position: relative;
-}
-.np-circle-border::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
-}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }

package/build/styles/badge/Badge.css

@@ -5,7 +5,6 @@
   --badge-mask: 2px;
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
-  --badge-content-position: 0px;
 }
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
@@ -15,8 +14,8 @@
   --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) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), 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) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), 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 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));
 }
 [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));
@@ -26,8 +25,8 @@
   position: absolute;
   width: var(--badge-size);
   height: var(--badge-size);
-  bottom: var(--badge-content-position);
-  right: var(--badge-content-position);
+  bottom: 0;
+  right: 0;
   box-sizing: border-box;
   border-radius: 50%;
   text-align: center;
@@ -40,7 +39,7 @@
           user-select: none;
 }
 [dir="rtl"] .tw-badge > .tw-badge__content {
-  left: var(--badge-content-position);
+  left: 0;
   right: auto;
   right: initial;
 }

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

@@ -4,40 +4,8 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-border-neutral);
-  --circle-border-width: 1px;
-  font-size: var(--circle-font-size);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-}
-.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-circle img,
-.np-circle .wds-flag {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-.np-circle-border {
-  position: relative;
-}
-.np-circle-border::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
-}