@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/Typeahead/Typeahead.css

@@ -7,8 +7,11 @@
 .typeahead .dropdown-menu {
   max-inline-size: 100%;
   inline-size: 100%;
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
+  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -22,6 +25,7 @@
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
 .np-theme-personal--bright-green .typeahead .dropdown-menu,
 .np-theme-personal--dark .typeahead .dropdown-menu {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .typeahead--multiple .np-chip {
@@ -71,17 +75,21 @@
   inline-size: auto;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-container {
+  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .typeahead--multiple.typeahead--has-value .input-group-addon + .typeahead__input-container {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
+  margin-block-end: calc(-1 * 8px + 1px);
   margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
+  block-size: calc(8px - 1);
   block-size: calc(var(--size-8) - 1);
   inline-size: 100%;
 }
@@ -101,6 +109,7 @@
   margin: 0;
 }
 .typeahead--prompt {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
@@ -116,9 +125,11 @@
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
+  padding-block-start: calc(8px - 1);
   padding-block-start: calc(var(--size-8) - 1);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
+  padding-block-end: 8px;
   padding-block-end: var(--size-8);
   margin: 0;
 }
@@ -163,18 +174,19 @@
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
+  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
-.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
-.np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
+.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
-  .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
+  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+    padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
   }
 }

package/src/Typeahead/Typeahead.less

@@ -232,8 +232,7 @@
       margin-top: 9px !important;
     }
     .np-chip--removable {
-      .np-text-body-default-bold,
-      .wds-text-body-default-bold {
+      .np-text-body-default-bold {
         padding-right: var(--size-16);
         @media (--screen-400-zoom) {
           padding-right: var(--size-32);

package/src/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -2,7 +2,9 @@
   color: #ffffff;
 }
 .typeahead__option.tw-dropdown-item--focused {
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,

package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx

@@ -30,10 +30,10 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
     >
       <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <Highlight value={label} query={query} />
-        {note && <span className="np-text-body-default wds-text-body-default m-l-1">{note}</span>}
+        {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (
           <Highlight
-            className="np-text-body-default wds-text-body-default text-ellipsis"
+            className="np-text-body-default text-ellipsis"
             value={secondary}
             query={query}
           />

package/src/Typeahead/_stories/Typeahead.rtl.test.story.tsx

@@ -87,7 +87,7 @@ export const TriggerVariants: Story = {
       </>
     );
   },
-  ...withRTLDiff({ fixedRows: { heights: 'auto' }, width: '80%', i18n: localisedStrings }),
+  ...withRTLDiff({ width: '80%', i18n: localisedStrings }),
 };
 
 export const OpenDropdown: Story = {

package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx

@@ -78,10 +78,8 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
       <div className="droppable-default-card" aria-hidden={isComplete}>
         <div className="droppable-card-content">
           <div className="m-b-3">{this.getImage()}</div>
-          {usLabel && <h4 className="np-text-title-body wds-text-title-body m-b-1">{usLabel}</h4>}
-          {usPlaceholder && (
-            <p className="np-text-body-large wds-text-body-large m-b-3">{String(usPlaceholder)}</p>
-          )}
+          {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
+          {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
           <label
             className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}
             role="button"

package/src/Upload/Upload.css

@@ -20,7 +20,10 @@
   outline-offset: var(--ring-outline-offset);
 }
 .upload-error-message {
+  margin-block-start: 24px;
   margin-block-start: var(--padding-medium);
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   text-align: start;
 }

package/src/Upload/_stories/Upload.rtl.test.story.tsx

@@ -21,20 +21,13 @@ export const Sizes: Story = {
     const i18n = useRtlDiffI18n();
     return (
       <>
-        <div>
-          <Upload usLabel={i18n.smallUpload} size="sm" />
-        </div>
-        <div>
-          <Upload usLabel={i18n.mediumUpload} size="md" />
-        </div>
-        <div>
-          <Upload usLabel={i18n.largeUpload} size="lg" />
-        </div>
+        <Upload usLabel={i18n.smallUpload} size="sm" />
+        <Upload usLabel={i18n.mediumUpload} size="md" />
+        <Upload usLabel={i18n.largeUpload} size="lg" />
       </>
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: 'auto' },
     i18n: {
       smallUpload: { en: 'Small upload', ar: 'منطقة رفع صغيرة' },
       mediumUpload: { en: 'Medium upload', ar: 'منطقة رفع متوسطة' },

package/src/UploadInput/UploadButton/UploadButton.css

@@ -1,10 +1,13 @@
 .np-upload-input__upload-button {
   position: relative;
+  padding: 16px;
   padding: var(--size-16);
   display: flex;
   align-items: center;
   margin: 0;
+  border-end-start-radius: 10px;
   border-end-start-radius: var(--radius-small);
+  border-end-end-radius: 10px;
   border-end-end-radius: var(--radius-small);
   border: var(--outerBorder);
   cursor: pointer;
@@ -16,9 +19,11 @@
   text-underline-offset: 0.3em;
 }
 .np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-upload-input__upload-button .np-upload-input__icon {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -55,19 +60,24 @@
   display: block;
   position: absolute;
   block-size: 1px;
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
+  inset-inline-start: 16px;
   inset-inline-start: var(--size-16);
+  inline-size: calc(100% - 2 * 16px);
   inline-size: calc(100% - 2 * var(--size-16));
   inset-block-start: 0;
 }
 .np-upload-input__upload-button--without-entries {
   border-block-start: var(--outerBorder);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input__upload-button--enabled.is-dropping,
 .np-upload-input__upload-button--enabled:hover,
 .np-upload-input__upload-button--enabled:active {
+  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
 }
 .np-upload-input__upload-button--enabled.is-dropping:before,

package/src/UploadInput/UploadInput.css

@@ -1,15 +1,17 @@
 .np-upload-input {
   --outerBorder: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input .np-upload-input__section {
   margin: 0;
 }
 .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
+  border-radius: 10px;
   border-radius: var(--radius-small);
   border-block-end: var(--outerBorder);
 }
-.np-upload-input .np-upload-input__section:has(.np-upload-input__item:last-child.is-interactive:hover):not( :has(.np-upload-input__item-button:hover)) + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
+.np-upload-input .np-upload-input__section:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
   inset-inline-start: 0;
   inline-size: 100%;
   inset-block-start: 0;

package/src/UploadInput/UploadInput.less

@@ -1,6 +1,6 @@
 @import (reference) "./../styles/less/ring.less";
 @import (reference) "./../styles/less/mixins/_links.less";
-@import (reference) "./UploadItem/UploadItem.less";
+@import (reference) './UploadItem/UploadItem.less';
 
 .np-upload-input {
   --outerBorder: 1px solid var(--color-interactive-secondary);
@@ -20,14 +20,11 @@
     // if the last item in the file list is interactive (not an error)
     // and the user is hovering over it, then we need to adjust the
     // bottom separator, which happens to be in .np-upload-input__section--uploader
-    &:has(.np-upload-input__item:last-child.is-interactive:hover):not(
-        :has(.np-upload-input__item-button:hover)
-      )
-      + .np-upload-input__section--uploader
-      .np-upload-input__upload-button::before {
+    &:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover))
+    + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
       left: 0;
       width: 100%;
       top: 0;
     }
   }
-}
+}

package/src/UploadInput/UploadItem/UploadItem.css

@@ -1,5 +1,6 @@
 .np-upload-input__item {
   position: relative;
+  padding: 16px;
   padding: var(--size-16);
   display: flex;
   align-items: flex-start;
@@ -8,7 +9,9 @@
 }
 .np-upload-input__item:first-child {
   border-block-start: var(--outerBorder);
+  border-start-start-radius: 10px;
   border-start-start-radius: var(--radius-small);
+  border-start-end-radius: 10px;
   border-start-end-radius: var(--radius-small);
 }
 .np-upload-input__item + .np-upload-input__item:before {
@@ -16,17 +19,22 @@
   display: block;
   position: absolute;
   block-size: 1px;
+  inset-inline-start: 16px;
   inset-inline-start: var(--size-16);
+  inline-size: calc(100% - 2 * 16px);
   inline-size: calc(100% - 2 * var(--size-16));
   inset-block-start: 0;
+  background: rgba(0,0,0,0.10196);
   background: var(--color-border-neutral);
 }
 .np-upload-input__item .np-upload-input__item-content {
+  padding-inline-end: 32px;
   padding-inline-end: var(--size-32);
   flex: 1;
 }
 @media (max-width: 320px) {
   .np-upload-input__item .np-upload-input__item-content {
+    padding-inline-end: 64px;
     padding-inline-end: var(--size-64);
   }
 }
@@ -34,12 +42,15 @@
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
   text-align: start;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-upload-input__item .np-upload-input__icon {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 .np-upload-input__item .np-upload-input__item-link,
@@ -54,7 +65,9 @@
   --buttonTopRightOffset: var(--size-16);
   --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
   position: absolute;
+  inset-inline-end: 16px;
   inset-inline-end: var(--buttonTopRightOffset);
+  inset-block-start: 16px;
   inset-block-start: var(--buttonTopRightOffset);
 }
 @media (max-width: 320px) {
@@ -70,9 +83,11 @@
   block-size: var(--iconSize);
   inline-size: var(--iconSize);
   padding-block: 0;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
   border-radius: 50%;
   border: 0;
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
   transition: color, background-color 0.15s ease-in-out;
@@ -107,6 +122,7 @@
   inset-inline-start: 0;
 }
 .np-upload-input__item.is-interactive .np-upload-input__item-link {
+  padding: 16px;
   padding: var(--size-16);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -120,6 +136,7 @@
 }
 .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
 .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {
@@ -131,6 +148,7 @@
 }
 .np-upload-input__item .np-upload-input-errors > li {
   position: relative;
+  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
@@ -142,6 +160,7 @@
 }
 @media (max-width: 320px) {
   .np-upload-input__item .np-upload-input-errors > li {
+    padding-inline-start: 32px;
     padding-inline-start: var(--size-32);
   }
 }

package/src/UploadInput/_stories/UploadInput.test.story.tsx

@@ -344,7 +344,6 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    fixedRows: { heights: [8, 8, 46] },
     renderAs: 'iframe',
     i18n: {
       singleUpload: { en: 'single-upload.pdf', ar: 'تحميل-واحد.pdf' },

package/src/_deprecated/ActionButton/ActionButton.css

@@ -1,24 +1,36 @@
 .np-action-btn {
   display: inline-flex;
+  block-size: 32px;
   block-size: var(--size-32);
+  padding-block: 8px;
   padding-block: var(--size-8);
+  padding-inline: 12px;
   padding-inline: var(--size-12);
   transition: color, background-color 0.15s ease-in-out;
-  font-weight: var(--wds-font-weight-body-bold);
-  font-size: var(--wds-font-size-body);
-  line-height: var(--wds-line-height-body);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
   align-items: center;
   color: var(--color-interactive-control);
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
+  border-radius: 24px;
   border-radius: var(--radius-large);
   border: none;
 }
 @media (max-width: 320px) {
   .np-action-btn {
+    block-size: 40px;
     block-size: var(--size-40);
   }
 }
 .np-action-btn.btn-priority-2 {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
@@ -27,6 +39,7 @@
   color: var(--color-interactive-primary);
 }
 .np-action-btn:not(:disabled):hover {
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
@@ -38,6 +51,7 @@
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
 }
 .np-action-btn:not(:disabled):active.btn-priority-2 {

package/src/_deprecated/ActionButton/ActionButton.less

@@ -5,9 +5,10 @@
   height: var(--size-32);
   padding: var(--size-8) var(--size-12);
   transition: color, background-color 0.15s ease-in-out;
-  font-weight: var(--wds-font-weight-body-bold);
-  font-size: var(--wds-font-size-body);
-  line-height: var(--wds-line-height-body);
+  font-weight: var(--font-weight-semi-bold);
+  font-size: var(--font-size-14);
+  line-height: var(--line-height-control);
+  border-radius: var(--radius-small);
   align-items: center;
   color: var(--color-interactive-control);
   background-color: var(--color-interactive-accent);
@@ -45,7 +46,7 @@
       box-shadow: none;
       border-color: transparent;
       background-color: var(--color-interactive-accent-active);
-
+      
       &.btn-priority-2 {
         background-color: var(--color-background-neutral-active);
       }

package/src/_deprecated/ActionButton/ActionButton.tsx

@@ -36,7 +36,7 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
       type="button"
       className={clsx(
         'np-action-btn',
-        'np-text-body-default-bold wds-text-body-default-bold',
+        'np-text-body-default-bold',
         priority === Priority.TERTIARY
           ? 'btn-priority-3'
           : priority === Priority.SECONDARY

package/src/_deprecated/Alert/Alert.css

@@ -2,5 +2,6 @@
   display: contents;
 }
 .alert__close {
+  min-inline-size: 48px;
   min-inline-size: var(--size-48);
 }

package/src/_deprecated/Avatar/Avatar.css

@@ -9,8 +9,10 @@
 .tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
+  background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
   border-radius: 50%;
+  color: #37517e;
   color: var(--color-content-primary);
   display: flex;
   block-size: 100%;
@@ -21,10 +23,12 @@
   inline-size: 100%;
 }
 .tw-avatar--outlined {
+  border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
 }
 .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .tw-avatar--thumbnail * {
@@ -40,10 +44,12 @@
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
-  font-weight: var(--wds-font-weight-body-bold);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
 }
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .tw-avatar.tw-avatar--initials,
@@ -51,7 +57,8 @@
   font-family: Arial, sans-serif;
 }
 .tw-avatar.tw-avatar--branded .tw-avatar__content {
-  font-family: var(--wds-font-family-display);
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
@@ -86,6 +93,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -120,6 +128,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -154,6 +163,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -188,6 +198,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -222,6 +233,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;

package/src/_deprecated/Avatar/Avatar.less

@@ -55,7 +55,7 @@
   &.tw-avatar--initials,
   &.tw-avatar--emoji {
     font-family: Arial, sans-serif;
-    font-weight: var(--wds-font-weight-body-bold);
+    font-weight: var(--font-weight-semi-bold);
   }
 
   &.tw-avatar--initials,
@@ -71,7 +71,7 @@
   }
 
   &.tw-avatar--branded .tw-avatar__content {
-    font-family: var(--wds-font-family-display);
+    font-family: var(--font-family-display);
     font-feature-settings: "ss01";
     color: var(--color-dark-charcoal);
     line-height: 1;

package/src/_deprecated/Avatar/Avatar.tsx

@@ -86,7 +86,7 @@ const Avatar: React.FC<AvatarProps> = ({
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
-        'np-text-title-body wds-text-title-body': type === 'initials',
+        'np-text-title-body': type === 'initials',
       })}
       aria-label={ariaLabel}
     >

package/src/_deprecated/Badge/Badge.css

@@ -16,6 +16,8 @@
 }
 .tw-badge > .tw-badge__children {
   --badge-h-side: left;
+  -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) - var(--badge-content-position)) var(--badge-h-side) 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)) var(--badge-h-side) 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));
 }