@transferwise/components 0.0.0-experimental-4c79cff → 0.0.0-experimental-3d434b1

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs

@@ -1,26 +1,6 @@
-const parseFileType = fileType => {
-  if (fileType?.includes('.')) {
-    return fileType.replace('.', '').toUpperCase();
-  }
-  const mimeType = fileType?.split('/');
-  if (mimeType?.length > 1) {
-    let parsedType = mimeType[1];
-    if (parsedType.toLocaleLowerCase() === 'jpeg') {
-      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
-    }
-    return parsedType.toUpperCase();
-  }
-  return fileType;
-};
-const getAllowedFileTypes = fileTypes => fileTypes.map(fileType => {
-  const splittedFileTypes = fileType?.split(',');
-  if (splittedFileTypes?.length > 1) {
-    // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
-    return splittedFileTypes.filter(splittedFileType => !splittedFileType?.includes('/')).map(splittedFileType => parseFileType(splittedFileType)).join(', ');
-  }
-  // If `fileType` contains only `format` or `mime` type, parse the type
-  return parseFileType(fileType);
-});
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
+.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
+.join(', '));
 
 export { getAllowedFileTypes as default };
 //# sourceMappingURL=getAllowedFileTypes.mjs.map

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n  if (fileType?.includes('.')) {\n    return fileType.replace('.', '').toUpperCase();\n  }\n\n  const mimeType = fileType?.split('/');\n  if (mimeType?.length > 1) {\n    let parsedType = mimeType[1];\n\n    if (parsedType.toLocaleLowerCase() === 'jpeg') {\n      parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n    }\n\n    return parsedType.toUpperCase();\n  }\n\n  return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileType: string) => {\n    const splittedFileTypes = fileType?.split(',');\n\n    if (splittedFileTypes?.length > 1) {\n      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n      return splittedFileTypes\n        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n        .map((splittedFileType: string) => parseFileType(splittedFileType))\n        .join(', ');\n    }\n\n    // If `fileType` contains only `format` or `mime` type, parse the type\n    return parseFileType(fileType);\n  });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":"AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}
+{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":"AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4c79cff",
+  "version": "0.0.0-experimental-3d434b1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,13 +91,13 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.20.1",
-    "@wise/components-theming": "1.6.1"
+    "@transferwise/neptune-css": "0.0.0-experimental-3d434b1",
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "^14.9.6",
+    "@transferwise/neptune-css": "0.0.0-experimental-3d434b1",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/alert/Alert.tests.story.tsx

@@ -5,7 +5,7 @@ import { Button, Field, SelectInput, Sentiment } from '..';
 import Alert, { type AlertProps } from './Alert';
 
 const meta = {
-  title: 'Feedback/Alert/tests',
+  title: 'Feedback/Alert/Tests',
   component: Alert,
   argTypes: {},
   args: {

package/src/avatarLayout/AvatarLayout.css

@@ -11,13 +11,20 @@
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
+[dir="rtl"] .np-avatar-layout-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
 .np-avatar-layout-diagonal-child {
   margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
+[dir="rtl"] .np-avatar-layout-diagonal-child {
+  margin-left: 0;
+  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+}
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -29,3 +36,6 @@
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
+[dir="rtl"] .np-avatar-layout-horizontal-child {
+  margin-right: calc(var(--np-avatar-offset) * -1);
+}

package/src/avatarLayout/AvatarLayout.less

@@ -13,16 +13,29 @@
           transparent 0,
           transparent calc(var(--np-avatar-size) / 2 + 2px),
           black 0);
+    
+      :dir(rtl) & {
+        mask-image:
+          radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)),
+            transparent 0,
+            transparent calc(var(--np-avatar-size) / 2 + 2px),
+            black 0);
+      }
     }
 
     &-child {
       margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
       margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
+
+      :dir(rtl) & {
+        margin-left: 0;
+        margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+      }
     }
   }
 
   &-horizontal {
-    width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+    width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
     height: var(--np-avatar-layout-size);
 
     &-mask {
@@ -34,6 +47,10 @@
 
     &-child {
       margin-left: calc(var(--np-avatar-offset) * -1);
+
+      :dir(rtl) & {
+        margin-right: calc(var(--np-avatar-offset) * -1);
+      }
     }
   }
-}
+}

package/src/avatarLayout/AvatarLayout.tsx

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import AvatarView, { AvatarViewProps } from '../avatarView';
+import { useDirection } from '../common/hooks';
 
 type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
   AvatarViewProps,
@@ -24,6 +25,7 @@ export default function AvatarLayout({
 }: Props) {
   const orientation =
     size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;
+  const { isRTL } = useDirection();
   const isDiagonal = orientation === 'diagonal';
   const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
   return avatars.length < 1 ? null : avatars.length === 1 ? (
@@ -38,7 +40,6 @@ export default function AvatarLayout({
         '--np-avatar-layout-size': `${size}px`,
         '--np-avatar-size': `${avatarSize}px`,
         '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
-        '--np-avatar-avatars-count': avatars.length,
       }}
       {...restProps}
     >
@@ -47,8 +48,14 @@ export default function AvatarLayout({
           // eslint-disable-next-line react/no-array-index-key
           key={index}
           className={clsx(
-            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },
-            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },
+            {
+              [`np-avatar-layout-${orientation}-child`]:
+                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,
+            },
+            {
+              [`np-avatar-layout-${orientation}-mask`]:
+                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,
+            },
           )}
         >
           <AvatarView

package/src/button/Button.accessibility.docs.mdx

@@ -0,0 +1,92 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import { NavigationOption } from '..';
+import { Bulb } from '@transferwise/icons';
+import * as stories from './Button.story';
+
+<Meta title="Actions/Button/Accessibility" />
+
+# Accessibility
+
+Given the `Button` is a widely used and highly sensitive component, there are some instances where care is required to ensure inclusive and accessible experience.
+
+<NavigationOption
+  media={<Bulb size={24} />}
+  title="Design guidance"
+  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
+  href="https://wise.design/components/button#accessibility"
+/>
+
+<br />
+<br />
+
+## Anchors
+
+While it's technically possible to make the `Button` component render as a link by using `as="a"` on its own, and there are use cases for it, this will not result in a semantic HTML anchor. For that to happen, you should set `href` instead – it will automatically render the component as a semantic anchor.
+
+<Source dark code={`
+// ⚠️ use with care
+<Button v2 as="a">Inaccessible anchor</Button>
+
+// ✅ semantic link
+
+<Button v2 href="https://wise.com">
+  Accessible anchor
+</Button>
+<Button v2 href="https://wise.com" as="a">
+  Accessible anchor
+</Button>
+`}/>
+
+It's also worth noting that HTML links without a valid `href` are not recognised by RTL via `getByRole('link')`.
+
+**Additional resources:**
+
+1. [Deque: Anchors must only be used as links with valid URLs or URL fragments](https://dequeuniversity.com/rules/axe-devtools/4.2/href-no-hash)
+2. [whatwg HTML standard: 4.6.2 Links created by a and area elements](https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements)
+
+<br />
+
+## Disabled anchors
+
+Technically, there's no such thing as disabled HTML anchor and the `disabled` attribute is not recognised on the `<a />`. While the code shown below works in all major screen readers, should be overall considered a last resort and design teams should be encouraged to use it sporadically and consider alternative flows instead.
+
+<Source
+  dark
+  code={`
+// ⚠️ use with care
+<Button v2 href="https://wise.com" disabled>Emulated disabled anchor</Button>
+`}
+/>
+
+We're emulating this behaviour by applying a combination of the following:
+
+1. removing `href` attribute to strip out the link's semantics.
+2. adding `role="link"` to make it recognisable and discoverable by the assistive tech.
+3. setting `aria-disabled="true"` to inform assistive tech of the component state.
+
+**Additional resources:**
+
+1. [Scott O'Hara: Disabling a link](https://www.scottohara.me/blog/2021/05/28/disabled-links.html)
+2. [CSS-Tricks: How to Disable Links](https://css-tricks.com/how-to-disable-links/)
+
+<br />
+
+## Loading state
+
+While it might be tempting to use the native, HTML `disabled` attribute for the `loading` state, it would result in a component that is completely invisible to the assistive tech – not focusable and not parsable – entirely inaccessible experience for users relying on such tools.
+
+Instead, we're relying on ARIA attributes and roles to ensure the `Button` is focusable, correctly announced as "busy" and offering visual cue different to the disabled state.
+
+`Button` instances rendered as HTML anchors, follow the strategy described in the [Disabled anchors](#disabled-anchors) section above.
+
+<br />
+
+## Working with addons (accessories)
+
+One of the core requirements of accessible experience is that all users have equal access to the same content, no matter how they interact with our products.
+
+This becomes troublesome for more complex instances of the `Button` such as those with contentful icons or avatars, e.g. those referring to particular currencies, people or action types.
+
+Exposing separate ARIA labels for such addons would likely become problematic due to syntactic differences between different languages and so instead we recommend using simple `aria-label` attribute to describe given components complete content. Please note, that screen readers will use that text over the visible label
+
+<Canvas of={stories.AccessibilityAddons} />

package/src/button/Button.css

@@ -1,23 +1,215 @@
-.np-btn {
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-border-radius: var(--radius-full);
+  --Button-label-gap: var(--size-4);
+  --Button-large-padding: var(--size-12) var(--size-16);
+  --Button-medium-padding: var(--size-8) var(--size-12);
+  --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+  --Button-tertiary-background: var(--color-background-neutral);
+  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
+  --Button-tertiary-background-active: var(--color-background-neutral-active);
+  --Button-tertiary-color: var(--color-content-primary);
+  --Button-minimal-background: transparent;
+  --Button-minimal-background-hover: var(--color-background-screen-hover);
+  --Button-minimal-background-active: var(--color-background-screen-active);
+  --Button-minimal-color: var(--color-interactive-primary);
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
+  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
+}
+.np-theme-personal--bright-green .wds-Button {
+  --Button-primary-negative-color: var(--color-white);
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-white);
+}
+.np-theme-personal--forest-green .wds-Button {
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-secondary-negative-color: var(--color-contrast-overlay);
+}
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
+}
+.wds-Button:hover {
+  background-color: var(--Button-background-hover);
+}
+.wds-Button:active {
+  background-color: var(--Button-background-active);
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled {
+  filter: none;
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled,
+.wds-Button.wds-Button--disabled:hover,
+.wds-Button:disabled:hover,
+.wds-Button.wds-Button--disabled:active,
+.wds-Button:disabled:active {
+  background-color: var(--Button-background);
+}
+.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-background);
+  --Button-background-hover: var(--Button-secondary-background-hover);
+  --Button-background-active: var(--Button-secondary-background-active);
+  --Button-color: var(--Button-secondary-color);
+}
+.wds-Button--tertiary {
+  --Button-background: var(--Button-tertiary-background);
+  --Button-background-hover: var(--Button-tertiary-background-hover);
+  --Button-background-active: var(--Button-tertiary-background-active);
+  --Button-color: var(--Button-tertiary-color);
+}
+.wds-Button--tertiary .wds-Button-icon--end {
+  color: var(--color-interactive-primary);
+}
+.wds-Button--minimal {
+  --Button-background: var(--Button-minimal-background);
+  --Button-background-hover: var(--Button-minimal-background-hover);
+  --Button-background-active: var(--Button-minimal-background-active);
+  --Button-color: var(--Button-minimal-color);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+.wds-Button--negative.wds-Button--primary {
+  --Button-background: var(--Button-primary-negative-background);
+  --Button-background-hover: var(--Button-primary-negative-background-hover);
+  --Button-background-active: var(--Button-primary-negative-background-active);
+  --Button-color: var(--Button-primary-negative-color);
+}
+.wds-Button--negative.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-negative-background);
+  --Button-background-hover: var(--Button-secondary-negative-background-hover);
+  --Button-background-active: var(--Button-secondary-negative-background-active);
+  --Button-color: var(--Button-secondary-negative-color);
+}
+.wds-Button--large {
+  padding: var(--Button-large-padding);
+}
+.wds-Button--medium {
+  padding: var(--Button-medium-padding);
+}
+.wds-Button--medium:has(.wds-Button-avatars) {
+  padding-inline-start: 8px;
+  padding-inline-start: var(--size-8);
+}
+.wds-Button--medium:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
+  padding-inline-end: var(--size-8);
+}
+.wds-Button--medium .wds-Button-icon--start {
+  margin-inline-end: var(--Button-label-gap);
+}
+.wds-Button--small {
+  padding: var(--Button-small-padding);
+}
+.wds-Button--small:has(.wds-Button-icon--start) {
+  padding-inline-start: 8px;
+  padding-inline-start: var(--size-8);
+}
+.wds-Button--small:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
+  padding-inline-end: var(--size-8);
+}
+.wds-Button--block {
+  width: 100%;
+}
+.wds-Button-avatars {
+  display: inline-flex;
+}
+.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
+  color: var(--Button-color);
+}
+.wds-Button-icon {
+  display: inline-block;
+}
+.wds-Button-content {
   position: relative;
 }
-.np-btn.np-btn-block > span.btn-loader {
+.wds-Button-content--loading .wds-Button-label,
+.wds-Button-content--loading .wds-Button-media,
+.wds-Button-content--loading .wds-Button-icon {
+  visibility: hidden;
+  opacity: 0;
+}
+.wds-Button-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Button-label-gap);
+  position: relative;
+}
+.wds-Button-loader {
   position: absolute;
-  left: 24px;
-  left: var(--size-24);
+  width: 100%;
+  height: 100%;
+}
+.wds-Button-loader .process-circle {
+  stroke: var(--Button-color);
+}
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
 }
-[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  right: 24px;
-  right: var(--size-24);
-  left: auto;
-  left: initial;
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-.np-btn.np-btn-xs > span.btn-loader {
-  background-size: 16px 16px;
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-.np-btn.np-btn-xs.btn-block > span.btn-loader {
-  top: 0;
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-.np-btn.disabled[class] {
-  pointer-events: auto;
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
+  scale: -1 1;
 }