@transferwise/components 0.0.0-experimental-54bf80b → 0.0.0-experimental-d0b30d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-54bf80b",
+  "version": "0.0.0-experimental-d0b30d6",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/button/Button.less

@@ -1,4 +1,4 @@
-@import "./Button.vars.less";
+@import './Button.vars.less';
 
 /* Button Styles */
 .wds-Button {
@@ -17,9 +17,7 @@
   border-radius: var(--Button-border-radius);
   color: var(--Button-color);
   cursor: pointer;
-  transition:
-    color,
-    background-color var(--Button-transition-duration) var(--Button-transition-easing);
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 
   &,
   &:hover,
@@ -92,7 +90,7 @@
     &:hover,
     &:active,
     &:focus {
-      .wds-Button-labelText {
+      .wds-Button-labelText{
         text-decoration: underline;
         text-underline-offset: 3px;
         text-decoration-thickness: 1px;
@@ -127,15 +125,15 @@
   &--medium {
     padding: var(--Button-medium-padding);
 
-    &:has(.wds-Button-avatars) {
+    &:has(.wds-Button-avatars){
       padding-inline-start: var(--size-8);
     }
 
-    &:has(.wds-Button-icon--end) {
+    &:has(.wds-Button-icon--end){
       padding-inline-end: var(--size-8);
     }
 
-    .wds-Button-icon--start {
+    .wds-Button-icon--start{
       margin-inline-end: var(--Button-label-gap);
     }
   }
@@ -143,15 +141,17 @@
   &--small {
     padding: var(--Button-small-padding);
 
-    &:has(.wds-Button-icon--start) {
+    &:has(.wds-Button-icon--start){
       padding-inline-start: var(--size-8);
     }
 
-    &:has(.wds-Button-icon--end) {
+    &:has(.wds-Button-icon--end){
       padding-inline-end: var(--size-8);
     }
   }
 
+
+
   // Width modifiers
   &--block {
     width: 100%;
@@ -169,11 +169,11 @@
   &-icon {
     display: inline-block;
 
-    &--md {
+    &--md{
       --Button-iconSize: 18px;
     }
 
-    &--sm {
+    &--sm{
       --Button-iconSize: 16px;
     }
 
@@ -225,12 +225,7 @@
     .wds-Button--secondary &,
     .wds-Button--secondary-neutral &,
     .wds-Button--tertiary & {
-      .np-theme-personal:not(
-          .np-theme-personal--dark,
-          .np-theme-personal--forest-green,
-          .np-theme-personal--bright-green
-        )
-        & {
+      .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
         --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
       }
     }
@@ -250,6 +245,7 @@
   }
 }
 
+
 :dir(rtl) {
   .wds-Button {
     .tw-icon-chevron-right,

package/src/button/_stories/Button.story.tsx

@@ -367,7 +367,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
     return (
       <>
         <Button {...props} {...previewProps} v2>
-          ======== Primary Priority (default)
+          Primary Priority (default)
         </Button>
         <Button {...props} {...previewProps} v2 priority="secondary">
           Secondary Priority