@transferwise/components 0.0.0-experimental-75fc27b → 0.0.0-experimental-8a932bb

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"AAKA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAY,IAAI,EAAE,MAAM,WAAW,CAAC;AAkB3C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC3D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,yBAA0B,SAAQ,UAAU;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgCD;;GAEG;AACH,QAAA,MAAM,uBAAuB,MAAO,CAAC;AAsBrC,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACjG,aAAa,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IAC3D,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACzF,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE;QAAE,EAAE,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC;IACtD,aAAa,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;IACrD,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,uBAAuB,KAAK,IAAI,CAAC;IACvE,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAID;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,WAAW,EACX,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,EACb,IAAW,EACX,KAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EAAE,cAAc,EACvB,cAAc,EACd,WAAW,EAAE,eAAoB,EACjC,iBAAiB,EACjB,UAAU,EAAE,cAAkC,EAC9C,UAAU,EACV,aAAa,EACb,WAAW,GACZ,EAAE,WAAW,+BA6cb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"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"}

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/build/upload/steps/completeStep/completeStep.js

@@ -2,7 +2,7 @@
 
 var icons = require('@transferwise/icons');
 var Body = require('../../../body/Body.js');
-var Button = require('../../../button/Button.js');
+var Button = require('../../../button/src/Button.js');
 var Title = require('../../../title/Title.js');
 var jsxRuntime = require('react/jsx-runtime');
 var typography = require('../../../common/propsValues/typography.js');

package/build/upload/steps/completeStep/completeStep.mjs

@@ -1,6 +1,6 @@
 import { Document } from '@transferwise/icons';
 import Body from '../../../body/Body.mjs';
-import Button from '../../../button/Button.mjs';
+import Button from '../../../button/src/Button.mjs';
 import Title from '../../../title/Title.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Typography } from '../../../common/propsValues/typography.mjs';

package/build/upload/steps/processingStep/processingStep.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../../button/Button.js');
+var Button = require('../../../button/src/Button.js');
 require('../../../common/theme.js');
 require('../../../common/direction.js');
 require('../../../common/propsValues/control.js');

package/build/upload/steps/processingStep/processingStep.mjs

@@ -1,4 +1,4 @@
-import Button from '../../../button/Button.mjs';
+import Button from '../../../button/src/Button.mjs';
 import '../../../common/theme.mjs';
 import '../../../common/direction.mjs';
 import '../../../common/propsValues/control.mjs';

package/build/uploadInput/UploadInput.js

@@ -3,7 +3,7 @@
 var clsx = require('clsx');
 var React = require('react');
 var reactIntl = require('react-intl');
-var Button = require('../button/Button.js');
+var Button = require('../button/src/Button.js');
 require('../common/theme.js');
 require('../common/direction.js');
 var control = require('../common/propsValues/control.js');

package/build/uploadInput/UploadInput.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { useState, useRef, useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../button/Button.mjs';
+import Button from '../button/src/Button.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import { Priority, ControlType } from '../common/propsValues/control.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-75fc27b",
+  "version": "0.0.0-experimental-8a932bb",
   "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-8a932bb",
+    "@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-8a932bb",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/avatarLayout/AvatarLayout.css

@@ -11,10 +11,18 @@
   -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) * 2 - var(--np-avatar-offset) - 2px);
   height: var(--np-avatar-layout-size);
@@ -28,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,11 +13,24 @@
           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);
+      }
     }
   }
 
@@ -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.story.tsx

@@ -197,8 +197,10 @@ export const EdgeInstances: Story = {
       <AvatarLayout orientation="diagonal" avatars={[{}]} />
 
       <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
+      <AvatarLayout orientation="diagonal" size={16} avatars={[{ profileName: 'Jay Jay' }]} />
 
       <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
+      <AvatarLayout orientation="diagonal" size={24} avatars={[{ asset: <Flag code="gb" /> }]} />
 
       <AvatarLayout
         orientation="diagonal"

package/src/avatarLayout/AvatarLayout.tsx

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx';
 import AvatarView, { AvatarViewProps } from '../avatarView';
+import { useDirection } from '../common/hooks';
 
-type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
+export type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
   AvatarViewProps,
   'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'
 >;
@@ -24,10 +25,13 @@ 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 ? (
-    <AvatarView {...avatars[0]}>{avatars[0].asset}</AvatarView>
+    <AvatarView {...avatars[0]} size={size}>
+      {avatars[0].asset}
+    </AvatarView>
   ) : (
     <div
       className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}
@@ -44,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/avatarLayout/index.ts

@@ -1,2 +1,3 @@
 export type { Props as AvatarLayoutProps } from './AvatarLayout';
+export type { SingleAvatarType } from './AvatarLayout';
 export { default } from './AvatarLayout';

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -11,6 +11,8 @@ export default {
 
 type Story = StoryObj<typeof AvatarWrapper>;
 
+export const Basic: Story = {}
+
 export const All: Story = {
   args: {
     avatarProps: { outlined: true },

package/src/button/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from './src';
+export * from './src';

package/src/button/Button/less/Button.css

@@ -0,0 +1,253 @@
+:root {
+  --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-padding: var(--size-8) var(--size-12);
+  --Button-border-radius: var(--radius-full);
+  --Button-font-size: var(--font-size-16);
+  --Button-line-height: var(--size-24);
+  --Button-font-weight: var(--font-weight-semi-bold);
+  --Button-letter-spacing: -0.011em;
+  --Button-size-small-padding: 5px var(--size-12);
+  --Button-size-medium-padding: var(--size-8) var(--size-12);
+  --Button-size-large-padding: var(--size-12) var(--size-16);
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --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);
+  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
+  --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);
+  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
+}
+.np-theme-personal--dark {
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--forest-green {
+  --color-interactive-neutral: rgba(159,232,112,0.2);
+  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
+  --color-interactive-neutral-active: rgba(236,255,224,0.2);
+  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
+  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
+  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--bright-green {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-weight: 600;
+  font-weight: var(--Button-font-weight);
+  font-size: 1rem;
+  font-size: var(--Button-font-size);
+  letter-spacing: -0.011em;
+  letter-spacing: var(--Button-letter-spacing);
+  line-height: 24px;
+  line-height: var(--Button-line-height);
+  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: #00a2dd;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: 9999px;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  padding: 8px 12px;
+  padding: var(--Button-padding);
+}
+.wds-Button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:hover {
+  background-color: #008fc9;
+  background-color: var(--Button-background-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:active {
+  background-color: #0081ba;
+  background-color: var(--Button-background-active);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:disabled {
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.wds-Button:disabled:hover,
+.wds-Button:disabled:active {
+  background-color: #00a2dd;
+  background-color: var(--Button-background);
+}
+.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-background);
+  --Button-background-hover: var(--Button-secondary-hover-background);
+  --Button-background-active: var(--Button-secondary-active-background);
+  --Button-color: var(--Button-secondary-color);
+}
+.wds-Button--tertiary {
+  --Button-background: var(--Button-tertiary-background);
+  --Button-background-hover: var(--Button-tertiary-hover-background);
+  --Button-background-active: var(--Button-tertiary-active-background);
+  --Button-color: var(--Button-tertiary-color);
+}
+.wds-Button--tertiary .wds-Button-icon--right {
+  color: var(--color-interactive-primary);
+}
+.wds-Button--minimal {
+  --Button-background: var(--Button-minimal-background);
+  --Button-background-hover: var(--Button-minimal-hover-background);
+  --Button-background-active: var(--Button-minimal-active-background);
+  --Button-color: var(--Button-minimal-color);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-Button--minimal:hover,
+.wds-Button--minimal:hover:active {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-Button--negative.wds-Button--primary {
+  --Button-background: var(--Button-primary-negative-background);
+  --Button-background-hover: var(--Button-primary-negative-hover-background);
+  --Button-background-active: var(--Button-primary-negative-active-background);
+  --Button-color: var(--Button-primary-negative-color);
+  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}
+.wds-Button--negative.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-negative-background);
+  --Button-background-hover: var(--Button-secondary-negative-hover-background);
+  --Button-background-active: var(--Button-secondary-negative-active-background);
+  --Button-color: var(--Button-secondary-negative-color);
+  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
+}
+.wds-Button--small {
+  --Button-padding: var(--Button-size-small-padding);
+  --Button-line-height: 22px;
+  --Button-font-size: var(--font-size-14);
+  --Button-letter-spacing: -0.006em;
+}
+.wds-Button--small .wds-Button-icon--left {
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+[dir="rtl"] .wds-Button--small .wds-Button-icon--left {
+  margin-right: 0;
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
+.wds-Button--medium {
+  --Button-padding: var(--Button-size-medium-padding);
+}
+.wds-Button--large {
+  --Button-padding: var(--Button-size-large-padding);
+}
+.wds-Button--block {
+  width: 100%;
+}
+.wds-Button-avatars {
+  display: inline-flex;
+  margin-right: 5px;
+  margin-left: calc(4px * -1);
+  margin-left: calc(var(--size-4) * -1);
+}
+[dir="rtl"] .wds-Button-avatars {
+  margin-right: 0;
+  margin-left: 5px;
+}
+.wds-Button-avatars .np-circle {
+  --circle-border-color: var(--Button-avatar-border-color);
+}
+.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
+  color: var(--Button-color);
+}
+.wds-Button-icon {
+  display: inline-block;
+}
+.wds-Button-icon--left {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .wds-Button-icon--left {
+  margin-right: 0;
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.wds-Button-icon--right {
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
+[dir="rtl"] .wds-Button-icon--right {
+  margin-left: 0;
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+.wds-Button-content {
+  position: relative;
+}
+.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;
+  position: relative;
+}
+.wds-Button-loader {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.wds-Button-loader .process-circle {
+  stroke: var(--Button-color);
+}
+/* RTL Styles */
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
+  transform: rotate(180deg);
+}
+[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
+  transform: rotate(180deg);
+}