@transferwise/components 0.0.0-experimental-c575215 → 0.0.0-experimental-818845e

package/build/styles/button/Button.vars.css

@@ -1,4 +1,4 @@
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -13,8 +13,6 @@
   --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-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);
@@ -31,29 +29,23 @@
   --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-primary-negative-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);
+  --Button-secondary-negative-avatar-border-color: rgba(168,32,13,0.12157);
 }
 .np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--forest-green .wds-Button {
-  --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);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --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-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
 }

package/build/styles/main.css

@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -731,8 +731,6 @@ div.critical-comms .critical-comms-body {
   --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-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);
@@ -749,31 +747,25 @@ div.critical-comms .critical-comms-body {
   --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-primary-negative-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);
+  --Button-secondary-negative-avatar-border-color: rgba(168,32,13,0.12157);
 }
 .np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--forest-green .wds-Button {
-  --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);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --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-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
 }
 /* Button Styles */
 .wds-Button {
@@ -783,13 +775,9 @@ div.critical-comms .critical-comms-body {
   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;
@@ -799,30 +787,23 @@ div.critical-comms .critical-comms-body {
   -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);
-  transition: color, background-color 150ms ease-in-out;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 }
 .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;
@@ -837,7 +818,6 @@ div.critical-comms .critical-comms-body {
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
 .wds-Button:disabled:active {
-  background-color: #00a2dd;
   background-color: var(--Button-background);
 }
 .wds-Button--secondary {

package/build/types/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,MAAM,yOAkGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,MAAM,yOAoGX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/button/Button.resolver.d.ts

@@ -11,21 +11,21 @@ export type ButtonProps = (Omit<LegacyButtonProps, 'ref'> & CommonButtonProps &
     priority?: LegacyButtonProps['priority'];
     type?: LegacyButtonType;
     htmlType?: string;
-    v2?: false;
+    useNewButton?: false;
 }) | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> & CommonButtonProps & {
     priority?: NewButtonProps['priority'];
     type?: NewButtonType;
-    v2: true;
+    useNewButton: true;
 });
 declare const Button: import("react").ForwardRefExoticComponent<(Omit<Omit<LegacyButtonProps, "ref"> & CommonButtonProps & {
     priority?: LegacyButtonProps["priority"];
     type?: LegacyButtonType;
     htmlType?: string;
-    v2?: false;
+    useNewButton?: false;
 }, "ref"> | Omit<Omit<Omit<NewButtonProps, "type">, "ref"> & CommonButtonProps & {
     priority?: NewButtonProps["priority"];
     type?: NewButtonType;
-    v2: true;
+    useNewButton: true;
 }, "ref">) & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=Button.resolver.d.ts.map

package/build/types/button/Button.resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.resolver.d.ts","sourceRoot":"","sources":["../../../src/button/Button.resolver.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAG/D,KAAK,gBAAgB,GACjB,QAAQ,GACR,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,WAAW,GACX,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,SAAS,CAAC;AAEd,KAAK,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAElF,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAC7B,iBAAiB,GAAG;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ,CAAC,GACJ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,GACxC,iBAAiB,GAAG;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,EAAE,EAAE,IAAI,CAAC;CACV,CAAC,CAAC;AAyDT,QAAA,MAAM,MAAM;eAnEO,iBAAiB,CAAC,UAAU,CAAC;WACjC,gBAAgB;eACZ,MAAM;SACZ,KAAK;;eAIC,cAAc,CAAC,UAAU,CAAC;WAC9B,aAAa;QAChB,IAAI;kFA8Ed,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.resolver.d.ts","sourceRoot":"","sources":["../../../src/button/Button.resolver.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAG/D,KAAK,gBAAgB,GACjB,QAAQ,GACR,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,WAAW,GACX,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,SAAS,CAAC;AAEd,KAAK,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAElF,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAC7B,iBAAiB,GAAG;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC,GACJ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,GACxC,iBAAiB,GAAG;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,EAAE,IAAI,CAAC;CACpB,CAAC,CAAC;AAkDT,QAAA,MAAM,MAAM;eA5DO,iBAAiB,CAAC,UAAU,CAAC;WACjC,gBAAgB;eACZ,MAAM;mBACF,KAAK;;eAIT,cAAc,CAAC,UAAU,CAAC;WAC9B,aAAa;kBACN,IAAI;kFAuExB,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/build/types/button/Button.types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import type { PrimitiveButtonProps, PrimitiveAnchorProps, PrimitiveButtonElementRef, PrimitiveAnchorElementRef } from '../primitives';
 import type { SingleAvatarType } from '../avatarLayout';
-export type ButtonSentiment = 'default' | 'negative';
+export type ButtonApperance = 'default' | 'negative';
 export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -10,15 +10,12 @@ export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRe
  * Common properties for the Button component.
  */
 export interface CommonButtonProps {
-    /**
-     * If set, toggles the new Button API
-     * @default false
-     * */
-    v2?: boolean;
     /** The HTML element to render */
     as?: 'button' | 'a' | null;
     /** Additional class name(s) to apply to the button */
     className?: string;
+    /** Content to be displayed inside the button */
+    children?: ReactNode;
     /** Whether the button is disabled */
     disabled?: boolean;
     href?: string;
@@ -26,21 +23,18 @@ export interface CommonButtonProps {
     loading?: boolean;
     /** Whether the button should take up the full width of its container */
     block?: boolean;
-    /**
-     * Size of the button
-     * @default lg
-     * */
+    /** Size of the button */
     size?: ButtonSize;
     /**
      * Priority of the button
-     * @default "primary"
+     * @default 'primary'
      */
     priority?: ButtonPriority;
     /**
-     * Sentiment of the button
-     * @default default
+     * Appearance of the button
+     * @default 'default'
      */
-    sentiment?: ButtonSentiment;
+    appearance?: ButtonApperance;
     /** Icon to be displayed on the left side of the button */
     iconStart?: React.ElementType;
     /** Icon to be displayed on the right side of the button */
@@ -49,8 +43,6 @@ export interface CommonButtonProps {
     avatars?: SingleAvatarType[];
     /** Optional property to provide component Ref */
     ref?: ButtonRefType;
-    /** Content to be displayed inside the button */
-    children?: ReactNode;
 }
 export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
 export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;

package/build/types/button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;SAGK;IACL,EAAE,CAAC,EAAE,OAAO,CAAC;IAEb,iCAAiC;IACjC,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC;IAE3B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE9B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE5B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE7B,iDAAiD;IACjD,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC;IAE3B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE9B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE5B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE7B,iDAAiD;IACjD,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

package/build/types/button/LegacyButton.d.ts

@@ -23,7 +23,7 @@ export type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, '
 export type LegacyButtonProps = ButtonProps | AnchorProps;
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
 /**
- * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
+ * @deprecated make sure you use new Button component via `<Button useNewButton .. />` and new props
  */
 declare const LegacyButton: import("react").ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<AnchorProps, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
 export default LegacyButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c575215",
+  "version": "0.0.0-experimental-818845e",
   "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": "0.0.0-experimental-c575215",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/neptune-css": "0.0.0-experimental-818845e",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-c575215",
+    "@transferwise/neptune-css": "0.0.0-experimental-818845e",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/button/Button.css

@@ -1,4 +1,4 @@
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -13,8 +13,6 @@
   --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-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);
@@ -31,31 +29,25 @@
   --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-primary-negative-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);
+  --Button-secondary-negative-avatar-border-color: rgba(168,32,13,0.12157);
 }
 .np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--forest-green .wds-Button {
-  --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);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --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-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
 }
 /* Button Styles */
 .wds-Button {
@@ -65,13 +57,9 @@
   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;
@@ -81,30 +69,23 @@
   -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);
-  transition: color, background-color 150ms ease-in-out;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 }
 .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;
@@ -119,7 +100,6 @@
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
 .wds-Button:disabled:active {
-  background-color: #00a2dd;
   background-color: var(--Button-background);
 }
 .wds-Button--secondary {

package/src/button/Button.less

@@ -1,5 +1,5 @@
 @import './Button.vars.less';
-
+  
 /* Button Styles */
 .wds-Button {
   display: inline-flex;
@@ -23,8 +23,7 @@
   color: var(--Button-color);
   cursor: pointer;
   padding: var(--Button-padding);
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
-
+  
   &:focus {
     text-decoration: none;
   }
@@ -216,10 +215,10 @@
     .tw-icon-arrow-right {
       transform: rotate(180deg);
     }
-
+  
     .tw-icon-chevron-left,
     .tw-icon-arrow-left {
       transform: rotate(180deg);
     }
   }
-}
+}

package/src/button/Button.resolver.tsx

@@ -29,13 +29,13 @@ export type ButtonProps =
         priority?: LegacyButtonProps['priority'];
         type?: LegacyButtonType;
         htmlType?: string;
-        v2?: false;
+        useNewButton?: false;
       })
   | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &
       CommonButtonProps & {
         priority?: NewButtonProps['priority'];
         type?: NewButtonType;
-        v2: true;
+        useNewButton: true;
       });
 
 const mapProps = (props: LegacyButtonProps): NewButtonProps => {
@@ -61,7 +61,7 @@ const mapProps = (props: LegacyButtonProps): NewButtonProps => {
 
   const mappedPriority =
     type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;
-  const mappedSentiment = type === 'negative' ? 'negative' : null;
+  const mappedAppearance = type === 'negative' ? 'negative' : null;
 
   const legacyButtonTypes: LegacyButtonType[] = [
     'accent',
@@ -74,19 +74,12 @@ const mapProps = (props: LegacyButtonProps): NewButtonProps => {
     'link',
   ];
 
-  const resolveSize = () => {
-    if (size) {
-      return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;
-    }
-
-    return size;
-  };
-
   return {
     ...newProps,
-    size: resolveSize(),
+    size:
+      size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
     priority: mappedPriority,
-    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
+    appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),
     type:
       type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,
     href: as === 'a' ? props.href || '' : null,
@@ -94,9 +87,9 @@ const mapProps = (props: LegacyButtonProps): NewButtonProps => {
 };
 
 const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
-  const { v2 = false, as, ...rest } = props;
+  const { useNewButton, as, ...rest } = props;
 
-  if (v2) {
+  if (useNewButton) {
     const mappedProps = mapProps(props as LegacyButtonProps);
     return (
       <NewButton

package/src/button/Button.spec.tsx

@@ -11,21 +11,21 @@ describe('Button', () => {
 
   const newProps: ButtonProps = {
     as: 'button',
-    v2: true,
+    useNewButton: true,
     priority: 'primary',
     size: 'md',
     type: 'accent',
     testId: 'new-button',
   };
 
-  it('renders LegacyButton when v2 is false', () => {
+  it('renders LegacyButton when useNewButton is false', () => {
     render(<Button {...legacyProps}>Legacy Button</Button>);
     const button = screen.getByText('Legacy Button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveClass('btn btn-md np-btn np-btn-md btn-accent btn-priority-1');
   });
 
-  it('renders the new Button when v2 is true', () => {
+  it('renders the new Button when useNewButton is true', () => {
     render(<Button {...newProps}>New Button</Button>);
     const button = screen.getByTestId('new-button');
     expect(button).toBeInTheDocument();