@transferwise/components 0.0.0-experimental-739bfcf → 0.0.0-experimental-82a48f6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/build/button/Button.js +1 -1
  2. package/build/button/Button.js.map +1 -1
  3. package/build/button/Button.mjs +1 -1
  4. package/build/button/Button.mjs.map +1 -1
  5. package/build/main.css +29 -43
  6. package/build/styles/button/Button.css +29 -43
  7. package/build/styles/button/Button.vars.css +5 -4
  8. package/build/styles/main.css +29 -43
  9. package/package.json +3 -3
  10. package/src/button/Button.css +29 -43
  11. package/src/button/Button.less +29 -39
  12. package/src/button/Button.tsx +1 -1
  13. package/src/button/Button.vars.css +5 -4
  14. package/src/button/Button.vars.less +8 -4
  15. package/src/main.css +29 -43
package/build/button/Button.js CHANGED
@@ -66,7 +66,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
66
66
  type: size === 'sm' ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_LARGE_BOLD,
67
67
  className: contentClassNames,
68
68
  children: [loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
69
- size: "xs",
69
+ size: size === 'sm' ? 'xxs' : 'xs',
70
70
  className: "wds-Button-loader",
71
71
  "data-testid": "button-loader-indicator"
72
72
  }), /*#__PURE__*/jsxRuntime.jsx("span", {
package/build/button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n type = 'button',\n loading = false,\n block = false,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size=\"xs\"\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n type = 'button',\n loading = false,\n block = false,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
package/build/button/Button.mjs CHANGED
@@ -64,7 +64,7 @@ const Button = /*#__PURE__*/forwardRef(({
64
64
  type: size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD,
65
65
  className: contentClassNames,
66
66
  children: [loading && /*#__PURE__*/jsx(ProcessIndicator, {
67
- size: "xs",
67
+ size: size === 'sm' ? 'xxs' : 'xs',
68
68
  className: "wds-Button-loader",
69
69
  "data-testid": "button-loader-indicator"
70
70
  }), /*#__PURE__*/jsx("span", {
package/build/button/Button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n type = 'button',\n loading = false,\n block = false,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size=\"xs\"\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n type = 'button',\n loading = false,\n block = false,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : 'xs'}\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </Body>\n );\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
package/build/main.css CHANGED
@@ -721,11 +721,12 @@ div.critical-comms .critical-comms-body {
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
723
723
  --Button-color: var(--color-interactive-control);
724
- --Button-padding: var(--size-8) var(--size-12);
725
724
  --Button-border-radius: var(--radius-full);
726
- --Button-size-small-padding: 5px var(--size-12);
727
- --Button-size-medium-padding: var(--size-8) var(--size-12);
728
- --Button-size-large-padding: var(--size-12) var(--size-16);
725
+ --Button-label-gap: var(--size-4);
726
+ --Button-large-padding: var(--size-12) var(--size-16);
727
+ --Button-medium-padding: var(--size-8) var(--size-12);
728
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
729
+ --Button-avatar-border-color: var(--color-border-neutral);
729
730
  --Button-transition-duration: 150ms;
730
731
  --Button-transition-easing: ease-in-out;
731
732
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -775,7 +776,6 @@ div.critical-comms .critical-comms-body {
775
776
  border-radius: var(--Button-border-radius);
776
777
  color: var(--Button-color);
777
778
  cursor: pointer;
778
- padding: var(--Button-padding);
779
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
780
  }
781
781
  .wds-Button:focus {
@@ -846,36 +846,39 @@ div.critical-comms .critical-comms-body {
846
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
847
847
  --Button-color: var(--Button-secondary-negative-color);
848
848
  }
849
- .wds-Button--small {
850
- --Button-padding: var(--Button-size-small-padding);
849
+ .wds-Button--large {
850
+ padding: var(--Button-large-padding);
851
851
  }
852
- .wds-Button--small .wds-Button-icon--start {
853
- margin-right: 4px;
854
- margin-right: var(--size-4);
852
+ .wds-Button--medium {
853
+ padding: var(--Button-medium-padding);
855
854
  }
856
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
857
- margin-right: 0;
858
- margin-left: 4px;
859
- margin-left: var(--size-4);
855
+ .wds-Button--medium:has(.wds-Button-avatars) {
856
+ padding-inline-start: 8px;
857
+ padding-inline-start: var(--size-8);
860
858
  }
861
- .wds-Button--medium {
862
- --Button-padding: var(--Button-size-medium-padding);
859
+ .wds-Button--medium:has(.wds-Button-icon--end) {
860
+ padding-inline-end: 8px;
861
+ padding-inline-end: var(--size-8);
863
862
  }
864
- .wds-Button--large {
865
- --Button-padding: var(--Button-size-large-padding);
863
+ .wds-Button--medium .wds-Button-icon--start {
864
+ margin-inline-end: var(--Button-label-gap);
865
+ }
866
+ .wds-Button--small {
867
+ padding: var(--Button-small-padding);
868
+ }
869
+ .wds-Button--small:has(.wds-Button-icon--start) {
870
+ padding-inline-start: 8px;
871
+ padding-inline-start: var(--size-8);
872
+ }
873
+ .wds-Button--small:has(.wds-Button-icon--end) {
874
+ padding-inline-end: 8px;
875
+ padding-inline-end: var(--size-8);
866
876
  }
867
877
  .wds-Button--block {
868
878
  width: 100%;
869
879
  }
870
880
  .wds-Button-avatars {
871
881
  display: inline-flex;
872
- margin-right: 5px;
873
- margin-left: calc(4px * -1);
874
- margin-left: calc(var(--size-4) * -1);
875
- }
876
- [dir="rtl"] .wds-Button-avatars {
877
- margin-right: 0;
878
- margin-left: 5px;
879
882
  }
880
883
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
881
884
  color: var(--Button-color);
@@ -883,24 +886,6 @@ div.critical-comms .critical-comms-body {
883
886
  .wds-Button-icon {
884
887
  display: inline-block;
885
888
  }
886
- .wds-Button-icon--start {
887
- margin-right: 8px;
888
- margin-right: var(--size-8);
889
- }
890
- [dir="rtl"] .wds-Button-icon--start {
891
- margin-right: 0;
892
- margin-left: 8px;
893
- margin-left: var(--size-8);
894
- }
895
- .wds-Button-icon--end {
896
- margin-left: 4px;
897
- margin-left: var(--size-4);
898
- }
899
- [dir="rtl"] .wds-Button-icon--end {
900
- margin-left: 0;
901
- margin-right: 4px;
902
- margin-right: var(--size-4);
903
- }
904
889
  .wds-Button-content {
905
890
  position: relative;
906
891
  }
@@ -914,6 +899,7 @@ div.critical-comms .critical-comms-body {
914
899
  display: flex;
915
900
  justify-content: center;
916
901
  align-items: center;
902
+ gap: var(--Button-label-gap);
917
903
  position: relative;
918
904
  }
919
905
  .wds-Button-loader {
package/build/styles/button/Button.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -57,7 +58,6 @@
57
58
  border-radius: var(--Button-border-radius);
58
59
  color: var(--Button-color);
59
60
  cursor: pointer;
60
- padding: var(--Button-padding);
61
61
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
62
62
  }
63
63
  .wds-Button:focus {
@@ -128,36 +128,39 @@
128
128
  --Button-background-active: var(--Button-secondary-negative-background-active);
129
129
  --Button-color: var(--Button-secondary-negative-color);
130
130
  }
131
- .wds-Button--small {
132
- --Button-padding: var(--Button-size-small-padding);
131
+ .wds-Button--large {
132
+ padding: var(--Button-large-padding);
133
133
  }
134
- .wds-Button--small .wds-Button-icon--start {
135
- margin-right: 4px;
136
- margin-right: var(--size-4);
134
+ .wds-Button--medium {
135
+ padding: var(--Button-medium-padding);
137
136
  }
138
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
139
- margin-right: 0;
140
- margin-left: 4px;
141
- margin-left: var(--size-4);
137
+ .wds-Button--medium:has(.wds-Button-avatars) {
138
+ padding-inline-start: 8px;
139
+ padding-inline-start: var(--size-8);
142
140
  }
143
- .wds-Button--medium {
144
- --Button-padding: var(--Button-size-medium-padding);
141
+ .wds-Button--medium:has(.wds-Button-icon--end) {
142
+ padding-inline-end: 8px;
143
+ padding-inline-end: var(--size-8);
145
144
  }
146
- .wds-Button--large {
147
- --Button-padding: var(--Button-size-large-padding);
145
+ .wds-Button--medium .wds-Button-icon--start {
146
+ margin-inline-end: var(--Button-label-gap);
147
+ }
148
+ .wds-Button--small {
149
+ padding: var(--Button-small-padding);
150
+ }
151
+ .wds-Button--small:has(.wds-Button-icon--start) {
152
+ padding-inline-start: 8px;
153
+ padding-inline-start: var(--size-8);
154
+ }
155
+ .wds-Button--small:has(.wds-Button-icon--end) {
156
+ padding-inline-end: 8px;
157
+ padding-inline-end: var(--size-8);
148
158
  }
149
159
  .wds-Button--block {
150
160
  width: 100%;
151
161
  }
152
162
  .wds-Button-avatars {
153
163
  display: inline-flex;
154
- margin-right: 5px;
155
- margin-left: calc(4px * -1);
156
- margin-left: calc(var(--size-4) * -1);
157
- }
158
- [dir="rtl"] .wds-Button-avatars {
159
- margin-right: 0;
160
- margin-left: 5px;
161
164
  }
162
165
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
163
166
  color: var(--Button-color);
@@ -165,24 +168,6 @@
165
168
  .wds-Button-icon {
166
169
  display: inline-block;
167
170
  }
168
- .wds-Button-icon--start {
169
- margin-right: 8px;
170
- margin-right: var(--size-8);
171
- }
172
- [dir="rtl"] .wds-Button-icon--start {
173
- margin-right: 0;
174
- margin-left: 8px;
175
- margin-left: var(--size-8);
176
- }
177
- .wds-Button-icon--end {
178
- margin-left: 4px;
179
- margin-left: var(--size-4);
180
- }
181
- [dir="rtl"] .wds-Button-icon--end {
182
- margin-left: 0;
183
- margin-right: 4px;
184
- margin-right: var(--size-4);
185
- }
186
171
  .wds-Button-content {
187
172
  position: relative;
188
173
  }
@@ -196,6 +181,7 @@
196
181
  display: flex;
197
182
  justify-content: center;
198
183
  align-items: center;
184
+ gap: var(--Button-label-gap);
199
185
  position: relative;
200
186
  }
201
187
  .wds-Button-loader {
package/build/styles/button/Button.vars.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
package/build/styles/main.css CHANGED
@@ -721,11 +721,12 @@ div.critical-comms .critical-comms-body {
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
723
723
  --Button-color: var(--color-interactive-control);
724
- --Button-padding: var(--size-8) var(--size-12);
725
724
  --Button-border-radius: var(--radius-full);
726
- --Button-size-small-padding: 5px var(--size-12);
727
- --Button-size-medium-padding: var(--size-8) var(--size-12);
728
- --Button-size-large-padding: var(--size-12) var(--size-16);
725
+ --Button-label-gap: var(--size-4);
726
+ --Button-large-padding: var(--size-12) var(--size-16);
727
+ --Button-medium-padding: var(--size-8) var(--size-12);
728
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
729
+ --Button-avatar-border-color: var(--color-border-neutral);
729
730
  --Button-transition-duration: 150ms;
730
731
  --Button-transition-easing: ease-in-out;
731
732
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -775,7 +776,6 @@ div.critical-comms .critical-comms-body {
775
776
  border-radius: var(--Button-border-radius);
776
777
  color: var(--Button-color);
777
778
  cursor: pointer;
778
- padding: var(--Button-padding);
779
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
780
  }
781
781
  .wds-Button:focus {
@@ -846,36 +846,39 @@ div.critical-comms .critical-comms-body {
846
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
847
847
  --Button-color: var(--Button-secondary-negative-color);
848
848
  }
849
- .wds-Button--small {
850
- --Button-padding: var(--Button-size-small-padding);
849
+ .wds-Button--large {
850
+ padding: var(--Button-large-padding);
851
851
  }
852
- .wds-Button--small .wds-Button-icon--start {
853
- margin-right: 4px;
854
- margin-right: var(--size-4);
852
+ .wds-Button--medium {
853
+ padding: var(--Button-medium-padding);
855
854
  }
856
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
857
- margin-right: 0;
858
- margin-left: 4px;
859
- margin-left: var(--size-4);
855
+ .wds-Button--medium:has(.wds-Button-avatars) {
856
+ padding-inline-start: 8px;
857
+ padding-inline-start: var(--size-8);
860
858
  }
861
- .wds-Button--medium {
862
- --Button-padding: var(--Button-size-medium-padding);
859
+ .wds-Button--medium:has(.wds-Button-icon--end) {
860
+ padding-inline-end: 8px;
861
+ padding-inline-end: var(--size-8);
863
862
  }
864
- .wds-Button--large {
865
- --Button-padding: var(--Button-size-large-padding);
863
+ .wds-Button--medium .wds-Button-icon--start {
864
+ margin-inline-end: var(--Button-label-gap);
865
+ }
866
+ .wds-Button--small {
867
+ padding: var(--Button-small-padding);
868
+ }
869
+ .wds-Button--small:has(.wds-Button-icon--start) {
870
+ padding-inline-start: 8px;
871
+ padding-inline-start: var(--size-8);
872
+ }
873
+ .wds-Button--small:has(.wds-Button-icon--end) {
874
+ padding-inline-end: 8px;
875
+ padding-inline-end: var(--size-8);
866
876
  }
867
877
  .wds-Button--block {
868
878
  width: 100%;
869
879
  }
870
880
  .wds-Button-avatars {
871
881
  display: inline-flex;
872
- margin-right: 5px;
873
- margin-left: calc(4px * -1);
874
- margin-left: calc(var(--size-4) * -1);
875
- }
876
- [dir="rtl"] .wds-Button-avatars {
877
- margin-right: 0;
878
- margin-left: 5px;
879
882
  }
880
883
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
881
884
  color: var(--Button-color);
@@ -883,24 +886,6 @@ div.critical-comms .critical-comms-body {
883
886
  .wds-Button-icon {
884
887
  display: inline-block;
885
888
  }
886
- .wds-Button-icon--start {
887
- margin-right: 8px;
888
- margin-right: var(--size-8);
889
- }
890
- [dir="rtl"] .wds-Button-icon--start {
891
- margin-right: 0;
892
- margin-left: 8px;
893
- margin-left: var(--size-8);
894
- }
895
- .wds-Button-icon--end {
896
- margin-left: 4px;
897
- margin-left: var(--size-4);
898
- }
899
- [dir="rtl"] .wds-Button-icon--end {
900
- margin-left: 0;
901
- margin-right: 4px;
902
- margin-right: var(--size-4);
903
- }
904
889
  .wds-Button-content {
905
890
  position: relative;
906
891
  }
@@ -914,6 +899,7 @@ div.critical-comms .critical-comms-body {
914
899
  display: flex;
915
900
  justify-content: center;
916
901
  align-items: center;
902
+ gap: var(--Button-label-gap);
917
903
  position: relative;
918
904
  }
919
905
  .wds-Button-loader {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-739bfcf",
3
+ "version": "0.0.0-experimental-82a48f6",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,12 +92,12 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@transferwise/neptune-css": "0.0.0-experimental-739bfcf",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-82a48f6",
96
96
  "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
100
- "@transferwise/neptune-css": "0.0.0-experimental-739bfcf",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-82a48f6",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
package/src/button/Button.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -57,7 +58,6 @@
57
58
  border-radius: var(--Button-border-radius);
58
59
  color: var(--Button-color);
59
60
  cursor: pointer;
60
- padding: var(--Button-padding);
61
61
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
62
62
  }
63
63
  .wds-Button:focus {
@@ -128,36 +128,39 @@
128
128
  --Button-background-active: var(--Button-secondary-negative-background-active);
129
129
  --Button-color: var(--Button-secondary-negative-color);
130
130
  }
131
- .wds-Button--small {
132
- --Button-padding: var(--Button-size-small-padding);
131
+ .wds-Button--large {
132
+ padding: var(--Button-large-padding);
133
133
  }
134
- .wds-Button--small .wds-Button-icon--start {
135
- margin-right: 4px;
136
- margin-right: var(--size-4);
134
+ .wds-Button--medium {
135
+ padding: var(--Button-medium-padding);
137
136
  }
138
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
139
- margin-right: 0;
140
- margin-left: 4px;
141
- margin-left: var(--size-4);
137
+ .wds-Button--medium:has(.wds-Button-avatars) {
138
+ padding-inline-start: 8px;
139
+ padding-inline-start: var(--size-8);
142
140
  }
143
- .wds-Button--medium {
144
- --Button-padding: var(--Button-size-medium-padding);
141
+ .wds-Button--medium:has(.wds-Button-icon--end) {
142
+ padding-inline-end: 8px;
143
+ padding-inline-end: var(--size-8);
145
144
  }
146
- .wds-Button--large {
147
- --Button-padding: var(--Button-size-large-padding);
145
+ .wds-Button--medium .wds-Button-icon--start {
146
+ margin-inline-end: var(--Button-label-gap);
147
+ }
148
+ .wds-Button--small {
149
+ padding: var(--Button-small-padding);
150
+ }
151
+ .wds-Button--small:has(.wds-Button-icon--start) {
152
+ padding-inline-start: 8px;
153
+ padding-inline-start: var(--size-8);
154
+ }
155
+ .wds-Button--small:has(.wds-Button-icon--end) {
156
+ padding-inline-end: 8px;
157
+ padding-inline-end: var(--size-8);
148
158
  }
149
159
  .wds-Button--block {
150
160
  width: 100%;
151
161
  }
152
162
  .wds-Button-avatars {
153
163
  display: inline-flex;
154
- margin-right: 5px;
155
- margin-left: calc(4px * -1);
156
- margin-left: calc(var(--size-4) * -1);
157
- }
158
- [dir="rtl"] .wds-Button-avatars {
159
- margin-right: 0;
160
- margin-left: 5px;
161
164
  }
162
165
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
163
166
  color: var(--Button-color);
@@ -165,24 +168,6 @@
165
168
  .wds-Button-icon {
166
169
  display: inline-block;
167
170
  }
168
- .wds-Button-icon--start {
169
- margin-right: 8px;
170
- margin-right: var(--size-8);
171
- }
172
- [dir="rtl"] .wds-Button-icon--start {
173
- margin-right: 0;
174
- margin-left: 8px;
175
- margin-left: var(--size-8);
176
- }
177
- .wds-Button-icon--end {
178
- margin-left: 4px;
179
- margin-left: var(--size-4);
180
- }
181
- [dir="rtl"] .wds-Button-icon--end {
182
- margin-left: 0;
183
- margin-right: 4px;
184
- margin-right: var(--size-4);
185
- }
186
171
  .wds-Button-content {
187
172
  position: relative;
188
173
  }
@@ -196,6 +181,7 @@
196
181
  display: flex;
197
182
  justify-content: center;
198
183
  align-items: center;
184
+ gap: var(--Button-label-gap);
199
185
  position: relative;
200
186
  }
201
187
  .wds-Button-loader {
package/src/button/Button.less CHANGED
@@ -18,7 +18,6 @@
18
18
  border-radius: var(--Button-border-radius);
19
19
  color: var(--Button-color);
20
20
  cursor: pointer;
21
- padding: var(--Button-padding);
22
21
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
23
22
 
24
23
  &:focus {
@@ -84,7 +83,6 @@
84
83
 
85
84
  // Negative styles
86
85
  &--negative {
87
-
88
86
  &.wds-Button--primary {
89
87
  --Button-background: var(--Button-primary-negative-background);
90
88
  --Button-background-hover: var(--Button-primary-negative-background-hover);
@@ -101,26 +99,40 @@
101
99
  }
102
100
 
103
101
  // Size modifiers
104
- &--small {
105
- --Button-padding: var(--Button-size-small-padding);
106
-
107
- .wds-Button-icon--start {
108
- margin-right: var(--size-4);
109
- :dir(rtl) & {
110
- margin-right: 0;
111
- margin-left: var(--size-4);
112
- }
113
- }
102
+ &--large {
103
+ padding: var(--Button-large-padding);
114
104
  }
115
105
 
116
106
  &--medium {
117
- --Button-padding: var(--Button-size-medium-padding);
107
+ padding: var(--Button-medium-padding);
108
+
109
+ &:has(.wds-Button-avatars){
110
+ padding-inline-start: var(--size-8);
111
+ }
112
+
113
+ &:has(.wds-Button-icon--end){
114
+ padding-inline-end: var(--size-8);
115
+ }
116
+
117
+ .wds-Button-icon--start{
118
+ margin-inline-end: var(--Button-label-gap);
119
+ }
118
120
  }
119
121
 
120
- &--large {
121
- --Button-padding: var(--Button-size-large-padding);
122
+ &--small {
123
+ padding: var(--Button-small-padding);
124
+
125
+ &:has(.wds-Button-icon--start){
126
+ padding-inline-start: var(--size-8);
127
+ }
128
+
129
+ &:has(.wds-Button-icon--end){
130
+ padding-inline-end: var(--size-8);
131
+ }
122
132
  }
123
133
 
134
+
135
+
124
136
  // Width mofidiers
125
137
  &--block {
126
138
  width: 100%;
@@ -128,13 +140,6 @@
128
140
 
129
141
  &-avatars {
130
142
  display: inline-flex;
131
- margin-right: 5px;
132
- margin-left: calc(var(--size-4) * -1);
133
-
134
- :dir(rtl) & {
135
- margin-right: 0;
136
- margin-left: 5px;
137
- }
138
143
 
139
144
  .np-avatar-view .np-avatar-view-content {
140
145
  color: var(--Button-color);
@@ -144,22 +149,6 @@
144
149
  // Icon styles
145
150
  &-icon {
146
151
  display: inline-block;
147
-
148
- &--start {
149
- margin-right: var(--size-8);
150
- :dir(rtl) & {
151
- margin-right: 0;
152
- margin-left: var(--size-8);
153
- }
154
- }
155
-
156
- &--end {
157
- margin-left: var(--size-4);
158
- :dir(rtl) & {
159
- margin-left: 0;
160
- margin-right: var(--size-4);
161
- }
162
- }
163
152
  }
164
153
 
165
154
  &-content {
@@ -179,6 +168,7 @@
179
168
  display: flex;
180
169
  justify-content: center;
181
170
  align-items: center;
171
+ gap: var(--Button-label-gap);
182
172
  position: relative;
183
173
  }
184
174
 
@@ -239,4 +229,4 @@
239
229
  }
240
230
  }
241
231
  }
242
- }
232
+ }
package/src/button/Button.tsx CHANGED
@@ -54,7 +54,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
54
54
  >
55
55
  {loading && (
56
56
  <ProcessIndicator
57
- size="xs"
57
+ size={size === 'sm' ? 'xxs' : 'xs'}
58
58
  className="wds-Button-loader"
59
59
  data-testid="button-loader-indicator"
60
60
  />
package/src/button/Button.vars.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
package/src/button/Button.vars.less CHANGED
@@ -3,11 +3,15 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+
9
+ --Button-large-padding: var(--size-12) var(--size-16);
10
+ --Button-medium-padding: var(--size-8) var(--size-12);
11
+ // 5px is required by design
12
+ --Button-small-padding: calc(var(--size-10) * .5) var(--size-12);
13
+
14
+ --Button-avatar-border-color: var(--color-border-neutral);
11
15
  --Button-transition-duration: 150ms;
12
16
  --Button-transition-easing: ease-in-out;
13
17
 
package/src/main.css CHANGED
@@ -721,11 +721,12 @@ div.critical-comms .critical-comms-body {
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
723
723
  --Button-color: var(--color-interactive-control);
724
- --Button-padding: var(--size-8) var(--size-12);
725
724
  --Button-border-radius: var(--radius-full);
726
- --Button-size-small-padding: 5px var(--size-12);
727
- --Button-size-medium-padding: var(--size-8) var(--size-12);
728
- --Button-size-large-padding: var(--size-12) var(--size-16);
725
+ --Button-label-gap: var(--size-4);
726
+ --Button-large-padding: var(--size-12) var(--size-16);
727
+ --Button-medium-padding: var(--size-8) var(--size-12);
728
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
729
+ --Button-avatar-border-color: var(--color-border-neutral);
729
730
  --Button-transition-duration: 150ms;
730
731
  --Button-transition-easing: ease-in-out;
731
732
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -775,7 +776,6 @@ div.critical-comms .critical-comms-body {
775
776
  border-radius: var(--Button-border-radius);
776
777
  color: var(--Button-color);
777
778
  cursor: pointer;
778
- padding: var(--Button-padding);
779
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
780
  }
781
781
  .wds-Button:focus {
@@ -846,36 +846,39 @@ div.critical-comms .critical-comms-body {
846
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
847
847
  --Button-color: var(--Button-secondary-negative-color);
848
848
  }
849
- .wds-Button--small {
850
- --Button-padding: var(--Button-size-small-padding);
849
+ .wds-Button--large {
850
+ padding: var(--Button-large-padding);
851
851
  }
852
- .wds-Button--small .wds-Button-icon--start {
853
- margin-right: 4px;
854
- margin-right: var(--size-4);
852
+ .wds-Button--medium {
853
+ padding: var(--Button-medium-padding);
855
854
  }
856
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
857
- margin-right: 0;
858
- margin-left: 4px;
859
- margin-left: var(--size-4);
855
+ .wds-Button--medium:has(.wds-Button-avatars) {
856
+ padding-inline-start: 8px;
857
+ padding-inline-start: var(--size-8);
860
858
  }
861
- .wds-Button--medium {
862
- --Button-padding: var(--Button-size-medium-padding);
859
+ .wds-Button--medium:has(.wds-Button-icon--end) {
860
+ padding-inline-end: 8px;
861
+ padding-inline-end: var(--size-8);
863
862
  }
864
- .wds-Button--large {
865
- --Button-padding: var(--Button-size-large-padding);
863
+ .wds-Button--medium .wds-Button-icon--start {
864
+ margin-inline-end: var(--Button-label-gap);
865
+ }
866
+ .wds-Button--small {
867
+ padding: var(--Button-small-padding);
868
+ }
869
+ .wds-Button--small:has(.wds-Button-icon--start) {
870
+ padding-inline-start: 8px;
871
+ padding-inline-start: var(--size-8);
872
+ }
873
+ .wds-Button--small:has(.wds-Button-icon--end) {
874
+ padding-inline-end: 8px;
875
+ padding-inline-end: var(--size-8);
866
876
  }
867
877
  .wds-Button--block {
868
878
  width: 100%;
869
879
  }
870
880
  .wds-Button-avatars {
871
881
  display: inline-flex;
872
- margin-right: 5px;
873
- margin-left: calc(4px * -1);
874
- margin-left: calc(var(--size-4) * -1);
875
- }
876
- [dir="rtl"] .wds-Button-avatars {
877
- margin-right: 0;
878
- margin-left: 5px;
879
882
  }
880
883
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
881
884
  color: var(--Button-color);
@@ -883,24 +886,6 @@ div.critical-comms .critical-comms-body {
883
886
  .wds-Button-icon {
884
887
  display: inline-block;
885
888
  }
886
- .wds-Button-icon--start {
887
- margin-right: 8px;
888
- margin-right: var(--size-8);
889
- }
890
- [dir="rtl"] .wds-Button-icon--start {
891
- margin-right: 0;
892
- margin-left: 8px;
893
- margin-left: var(--size-8);
894
- }
895
- .wds-Button-icon--end {
896
- margin-left: 4px;
897
- margin-left: var(--size-4);
898
- }
899
- [dir="rtl"] .wds-Button-icon--end {
900
- margin-left: 0;
901
- margin-right: 4px;
902
- margin-right: var(--size-4);
903
- }
904
889
  .wds-Button-content {
905
890
  position: relative;
906
891
  }
@@ -914,6 +899,7 @@ div.critical-comms .critical-comms-body {
914
899
  display: flex;
915
900
  justify-content: center;
916
901
  align-items: center;
902
+ gap: var(--Button-label-gap);
917
903
  position: relative;
918
904
  }
919
905
  .wds-Button-loader {