@transferwise/components 0.0.0-experimental-dac159e → 0.0.0-experimental-d07c802

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 (10) hide show
  1. package/build/main.css +15 -24
  2. package/build/styles/header/Header.css +2 -4
  3. package/build/styles/inputs/InputGroup.css +4 -4
  4. package/build/styles/inputs/SelectInput.css +9 -16
  5. package/build/styles/main.css +15 -24
  6. package/package.json +2 -2
  7. package/src/header/Header.css +2 -4
  8. package/src/inputs/InputGroup.css +4 -4
  9. package/src/inputs/SelectInput.css +9 -16
  10. package/src/main.css +15 -24
package/build/main.css CHANGED
@@ -2127,10 +2127,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2127
2127
  column-gap: var(--size-24);
2128
2128
  }
2129
2129
  .np-theme-personal .np-header__button {
2130
- margin-left: calc(16px * -1);
2131
- margin-right: calc(16px * -1);
2132
- margin-left: calc(var(--size-16) * -1);
2133
- margin-right: calc(var(--size-16) * -1);
2130
+ margin-inline: calc(16px * -1);
2131
+ margin-inline: calc(var(--size-16) * -1);
2134
2132
  margin-bottom: calc(4px * -1);
2135
2133
  margin-bottom: calc(var(--size-4) * -1);
2136
2134
  }
@@ -2352,12 +2350,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2352
2350
  padding-right: var(--size-16);
2353
2351
  }
2354
2352
  .np-input-addon--padding-md.np-input-addon--placement-start {
2355
- padding-right: 8px;
2356
- padding-right: var(--size-8);
2353
+ padding-inline-end: 8px;
2354
+ padding-inline-end: var(--size-8);
2357
2355
  }
2358
2356
  .np-input-addon--padding-md.np-input-addon--placement-end {
2359
- padding-left: 8px;
2360
- padding-left: var(--size-8);
2357
+ padding-inline-start: 8px;
2358
+ padding-inline-start: var(--size-8);
2361
2359
  }
2362
2360
  .np-bottom-sheet-v2-container {
2363
2361
  position: relative;
@@ -2375,20 +2373,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2375
2373
  }
2376
2374
  .np-bottom-sheet-v2-backdrop {
2377
2375
  position: fixed;
2378
- top: 0px;
2379
- right: 0px;
2380
- bottom: 0px;
2381
- left: 0px;
2376
+ inset: 0px;
2382
2377
  background-color: #37517e;
2383
2378
  background-color: var(--color-content-primary);
2384
2379
  opacity: 0.4;
2385
2380
  }
2386
2381
  .np-bottom-sheet-v2 {
2387
2382
  position: fixed;
2388
- top: 0px;
2389
- right: 0px;
2390
- bottom: 0px;
2391
- left: 0px;
2383
+ inset: 0px;
2392
2384
  display: flex;
2393
2385
  flex-direction: column;
2394
2386
  justify-content: flex-end;
@@ -2477,7 +2469,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2477
2469
  align-content: center;
2478
2470
  border-radius: 10px;
2479
2471
  border-radius: var(--size-10);
2480
- text-align: left;
2472
+ text-align: start;
2481
2473
  }
2482
2474
  .np-popover-v2-container {
2483
2475
  z-index: 1060;
@@ -2695,14 +2687,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2695
2687
  }
2696
2688
  .np-select-input-addon-container {
2697
2689
  pointer-events: none;
2698
- margin-left: 4px;
2699
- margin-left: var(--size-4);
2690
+ margin-inline-start: 4px;
2691
+ margin-inline-start: var(--size-4);
2700
2692
  display: inline-flex;
2701
2693
  align-items: center;
2702
2694
  }
2703
2695
  .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
2704
- margin-left: 4px;
2705
- margin-left: var(--size-4);
2696
+ margin-inline-start: 4px;
2697
+ margin-inline-start: var(--size-4);
2706
2698
  }
2707
2699
  .np-select-input-addon {
2708
2700
  border-width: 0;
@@ -2736,9 +2728,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2736
2728
  .np-select-input-addon-separator {
2737
2729
  height: 24px;
2738
2730
  height: var(--size-24);
2739
- border-left: 1px solid rgba(0,0,0,0.10196);
2740
- border-left: 1px solid #0000001a;
2741
- border-left: 1px solid var(--color-border-neutral);
2731
+ border-inline-start: 1px solid rgba(0,0,0,0.10196);
2732
+ border-inline-start: 1px solid var(--color-border-neutral);
2742
2733
  }
2743
2734
  .np-text-area {
2744
2735
  min-height: 72px;
package/build/styles/header/Header.css CHANGED
@@ -21,10 +21,8 @@
21
21
  column-gap: var(--size-24);
22
22
  }
23
23
  .np-theme-personal .np-header__button {
24
- margin-left: calc(16px * -1);
25
- margin-right: calc(16px * -1);
26
- margin-left: calc(var(--size-16) * -1);
27
- margin-right: calc(var(--size-16) * -1);
24
+ margin-inline: calc(16px * -1);
25
+ margin-inline: calc(var(--size-16) * -1);
28
26
  margin-bottom: calc(4px * -1);
29
27
  margin-bottom: calc(var(--size-4) * -1);
30
28
  }
package/build/styles/inputs/InputGroup.css CHANGED
@@ -53,10 +53,10 @@
53
53
  padding-right: var(--size-16);
54
54
  }
55
55
  .np-input-addon--padding-md.np-input-addon--placement-start {
56
- padding-right: 8px;
57
- padding-right: var(--size-8);
56
+ padding-inline-end: 8px;
57
+ padding-inline-end: var(--size-8);
58
58
  }
59
59
  .np-input-addon--padding-md.np-input-addon--placement-end {
60
- padding-left: 8px;
61
- padding-left: var(--size-8);
60
+ padding-inline-start: 8px;
61
+ padding-inline-start: var(--size-8);
62
62
  }
package/build/styles/inputs/SelectInput.css CHANGED
@@ -14,20 +14,14 @@
14
14
  }
15
15
  .np-bottom-sheet-v2-backdrop {
16
16
  position: fixed;
17
- top: 0px;
18
- right: 0px;
19
- bottom: 0px;
20
- left: 0px;
17
+ inset: 0px;
21
18
  background-color: #37517e;
22
19
  background-color: var(--color-content-primary);
23
20
  opacity: 0.4;
24
21
  }
25
22
  .np-bottom-sheet-v2 {
26
23
  position: fixed;
27
- top: 0px;
28
- right: 0px;
29
- bottom: 0px;
30
- left: 0px;
24
+ inset: 0px;
31
25
  display: flex;
32
26
  flex-direction: column;
33
27
  justify-content: flex-end;
@@ -116,7 +110,7 @@
116
110
  align-content: center;
117
111
  border-radius: 10px;
118
112
  border-radius: var(--size-10);
119
- text-align: left;
113
+ text-align: start;
120
114
  }
121
115
  .np-popover-v2-container {
122
116
  z-index: 1060;
@@ -334,14 +328,14 @@
334
328
  }
335
329
  .np-select-input-addon-container {
336
330
  pointer-events: none;
337
- margin-left: 4px;
338
- margin-left: var(--size-4);
331
+ margin-inline-start: 4px;
332
+ margin-inline-start: var(--size-4);
339
333
  display: inline-flex;
340
334
  align-items: center;
341
335
  }
342
336
  .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
343
- margin-left: 4px;
344
- margin-left: var(--size-4);
337
+ margin-inline-start: 4px;
338
+ margin-inline-start: var(--size-4);
345
339
  }
346
340
  .np-select-input-addon {
347
341
  border-width: 0;
@@ -375,7 +369,6 @@
375
369
  .np-select-input-addon-separator {
376
370
  height: 24px;
377
371
  height: var(--size-24);
378
- border-left: 1px solid rgba(0,0,0,0.10196);
379
- border-left: 1px solid #0000001a;
380
- border-left: 1px solid var(--color-border-neutral);
372
+ border-inline-start: 1px solid rgba(0,0,0,0.10196);
373
+ border-inline-start: 1px solid var(--color-border-neutral);
381
374
  }
package/build/styles/main.css CHANGED
@@ -2127,10 +2127,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2127
2127
  column-gap: var(--size-24);
2128
2128
  }
2129
2129
  .np-theme-personal .np-header__button {
2130
- margin-left: calc(16px * -1);
2131
- margin-right: calc(16px * -1);
2132
- margin-left: calc(var(--size-16) * -1);
2133
- margin-right: calc(var(--size-16) * -1);
2130
+ margin-inline: calc(16px * -1);
2131
+ margin-inline: calc(var(--size-16) * -1);
2134
2132
  margin-bottom: calc(4px * -1);
2135
2133
  margin-bottom: calc(var(--size-4) * -1);
2136
2134
  }
@@ -2352,12 +2350,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2352
2350
  padding-right: var(--size-16);
2353
2351
  }
2354
2352
  .np-input-addon--padding-md.np-input-addon--placement-start {
2355
- padding-right: 8px;
2356
- padding-right: var(--size-8);
2353
+ padding-inline-end: 8px;
2354
+ padding-inline-end: var(--size-8);
2357
2355
  }
2358
2356
  .np-input-addon--padding-md.np-input-addon--placement-end {
2359
- padding-left: 8px;
2360
- padding-left: var(--size-8);
2357
+ padding-inline-start: 8px;
2358
+ padding-inline-start: var(--size-8);
2361
2359
  }
2362
2360
  .np-bottom-sheet-v2-container {
2363
2361
  position: relative;
@@ -2375,20 +2373,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2375
2373
  }
2376
2374
  .np-bottom-sheet-v2-backdrop {
2377
2375
  position: fixed;
2378
- top: 0px;
2379
- right: 0px;
2380
- bottom: 0px;
2381
- left: 0px;
2376
+ inset: 0px;
2382
2377
  background-color: #37517e;
2383
2378
  background-color: var(--color-content-primary);
2384
2379
  opacity: 0.4;
2385
2380
  }
2386
2381
  .np-bottom-sheet-v2 {
2387
2382
  position: fixed;
2388
- top: 0px;
2389
- right: 0px;
2390
- bottom: 0px;
2391
- left: 0px;
2383
+ inset: 0px;
2392
2384
  display: flex;
2393
2385
  flex-direction: column;
2394
2386
  justify-content: flex-end;
@@ -2477,7 +2469,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2477
2469
  align-content: center;
2478
2470
  border-radius: 10px;
2479
2471
  border-radius: var(--size-10);
2480
- text-align: left;
2472
+ text-align: start;
2481
2473
  }
2482
2474
  .np-popover-v2-container {
2483
2475
  z-index: 1060;
@@ -2695,14 +2687,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2695
2687
  }
2696
2688
  .np-select-input-addon-container {
2697
2689
  pointer-events: none;
2698
- margin-left: 4px;
2699
- margin-left: var(--size-4);
2690
+ margin-inline-start: 4px;
2691
+ margin-inline-start: var(--size-4);
2700
2692
  display: inline-flex;
2701
2693
  align-items: center;
2702
2694
  }
2703
2695
  .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
2704
- margin-left: 4px;
2705
- margin-left: var(--size-4);
2696
+ margin-inline-start: 4px;
2697
+ margin-inline-start: var(--size-4);
2706
2698
  }
2707
2699
  .np-select-input-addon {
2708
2700
  border-width: 0;
@@ -2736,9 +2728,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2736
2728
  .np-select-input-addon-separator {
2737
2729
  height: 24px;
2738
2730
  height: var(--size-24);
2739
- border-left: 1px solid rgba(0,0,0,0.10196);
2740
- border-left: 1px solid #0000001a;
2741
- border-left: 1px solid var(--color-border-neutral);
2731
+ border-inline-start: 1px solid rgba(0,0,0,0.10196);
2732
+ border-inline-start: 1px solid var(--color-border-neutral);
2742
2733
  }
2743
2734
  .np-text-area {
2744
2735
  min-height: 72px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-dac159e",
3
+ "version": "0.0.0-experimental-d07c802",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -77,7 +77,7 @@
77
77
  "react-intl": "^5.10.0",
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
- "@transferwise/less-config": "0.0.0-experimental-dac159e",
80
+ "@transferwise/less-config": "0.0.0-experimental-d07c802",
81
81
  "@transferwise/neptune-css": "14.7.1",
82
82
  "@wise/components-theming": "0.8.4"
83
83
  },
package/src/header/Header.css CHANGED
@@ -21,10 +21,8 @@
21
21
  column-gap: var(--size-24);
22
22
  }
23
23
  .np-theme-personal .np-header__button {
24
- margin-left: calc(16px * -1);
25
- margin-right: calc(16px * -1);
26
- margin-left: calc(var(--size-16) * -1);
27
- margin-right: calc(var(--size-16) * -1);
24
+ margin-inline: calc(16px * -1);
25
+ margin-inline: calc(var(--size-16) * -1);
28
26
  margin-bottom: calc(4px * -1);
29
27
  margin-bottom: calc(var(--size-4) * -1);
30
28
  }
package/src/inputs/InputGroup.css CHANGED
@@ -53,10 +53,10 @@
53
53
  padding-right: var(--size-16);
54
54
  }
55
55
  .np-input-addon--padding-md.np-input-addon--placement-start {
56
- padding-right: 8px;
57
- padding-right: var(--size-8);
56
+ padding-inline-end: 8px;
57
+ padding-inline-end: var(--size-8);
58
58
  }
59
59
  .np-input-addon--padding-md.np-input-addon--placement-end {
60
- padding-left: 8px;
61
- padding-left: var(--size-8);
60
+ padding-inline-start: 8px;
61
+ padding-inline-start: var(--size-8);
62
62
  }
package/src/inputs/SelectInput.css CHANGED
@@ -14,20 +14,14 @@
14
14
  }
15
15
  .np-bottom-sheet-v2-backdrop {
16
16
  position: fixed;
17
- top: 0px;
18
- right: 0px;
19
- bottom: 0px;
20
- left: 0px;
17
+ inset: 0px;
21
18
  background-color: #37517e;
22
19
  background-color: var(--color-content-primary);
23
20
  opacity: 0.4;
24
21
  }
25
22
  .np-bottom-sheet-v2 {
26
23
  position: fixed;
27
- top: 0px;
28
- right: 0px;
29
- bottom: 0px;
30
- left: 0px;
24
+ inset: 0px;
31
25
  display: flex;
32
26
  flex-direction: column;
33
27
  justify-content: flex-end;
@@ -116,7 +110,7 @@
116
110
  align-content: center;
117
111
  border-radius: 10px;
118
112
  border-radius: var(--size-10);
119
- text-align: left;
113
+ text-align: start;
120
114
  }
121
115
  .np-popover-v2-container {
122
116
  z-index: 1060;
@@ -334,14 +328,14 @@
334
328
  }
335
329
  .np-select-input-addon-container {
336
330
  pointer-events: none;
337
- margin-left: 4px;
338
- margin-left: var(--size-4);
331
+ margin-inline-start: 4px;
332
+ margin-inline-start: var(--size-4);
339
333
  display: inline-flex;
340
334
  align-items: center;
341
335
  }
342
336
  .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
343
- margin-left: 4px;
344
- margin-left: var(--size-4);
337
+ margin-inline-start: 4px;
338
+ margin-inline-start: var(--size-4);
345
339
  }
346
340
  .np-select-input-addon {
347
341
  border-width: 0;
@@ -375,7 +369,6 @@
375
369
  .np-select-input-addon-separator {
376
370
  height: 24px;
377
371
  height: var(--size-24);
378
- border-left: 1px solid rgba(0,0,0,0.10196);
379
- border-left: 1px solid #0000001a;
380
- border-left: 1px solid var(--color-border-neutral);
372
+ border-inline-start: 1px solid rgba(0,0,0,0.10196);
373
+ border-inline-start: 1px solid var(--color-border-neutral);
381
374
  }
package/src/main.css CHANGED
@@ -2127,10 +2127,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2127
2127
  column-gap: var(--size-24);
2128
2128
  }
2129
2129
  .np-theme-personal .np-header__button {
2130
- margin-left: calc(16px * -1);
2131
- margin-right: calc(16px * -1);
2132
- margin-left: calc(var(--size-16) * -1);
2133
- margin-right: calc(var(--size-16) * -1);
2130
+ margin-inline: calc(16px * -1);
2131
+ margin-inline: calc(var(--size-16) * -1);
2134
2132
  margin-bottom: calc(4px * -1);
2135
2133
  margin-bottom: calc(var(--size-4) * -1);
2136
2134
  }
@@ -2352,12 +2350,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2352
2350
  padding-right: var(--size-16);
2353
2351
  }
2354
2352
  .np-input-addon--padding-md.np-input-addon--placement-start {
2355
- padding-right: 8px;
2356
- padding-right: var(--size-8);
2353
+ padding-inline-end: 8px;
2354
+ padding-inline-end: var(--size-8);
2357
2355
  }
2358
2356
  .np-input-addon--padding-md.np-input-addon--placement-end {
2359
- padding-left: 8px;
2360
- padding-left: var(--size-8);
2357
+ padding-inline-start: 8px;
2358
+ padding-inline-start: var(--size-8);
2361
2359
  }
2362
2360
  .np-bottom-sheet-v2-container {
2363
2361
  position: relative;
@@ -2375,20 +2373,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2375
2373
  }
2376
2374
  .np-bottom-sheet-v2-backdrop {
2377
2375
  position: fixed;
2378
- top: 0px;
2379
- right: 0px;
2380
- bottom: 0px;
2381
- left: 0px;
2376
+ inset: 0px;
2382
2377
  background-color: #37517e;
2383
2378
  background-color: var(--color-content-primary);
2384
2379
  opacity: 0.4;
2385
2380
  }
2386
2381
  .np-bottom-sheet-v2 {
2387
2382
  position: fixed;
2388
- top: 0px;
2389
- right: 0px;
2390
- bottom: 0px;
2391
- left: 0px;
2383
+ inset: 0px;
2392
2384
  display: flex;
2393
2385
  flex-direction: column;
2394
2386
  justify-content: flex-end;
@@ -2477,7 +2469,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2477
2469
  align-content: center;
2478
2470
  border-radius: 10px;
2479
2471
  border-radius: var(--size-10);
2480
- text-align: left;
2472
+ text-align: start;
2481
2473
  }
2482
2474
  .np-popover-v2-container {
2483
2475
  z-index: 1060;
@@ -2695,14 +2687,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2695
2687
  }
2696
2688
  .np-select-input-addon-container {
2697
2689
  pointer-events: none;
2698
- margin-left: 4px;
2699
- margin-left: var(--size-4);
2690
+ margin-inline-start: 4px;
2691
+ margin-inline-start: var(--size-4);
2700
2692
  display: inline-flex;
2701
2693
  align-items: center;
2702
2694
  }
2703
2695
  .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
2704
- margin-left: 4px;
2705
- margin-left: var(--size-4);
2696
+ margin-inline-start: 4px;
2697
+ margin-inline-start: var(--size-4);
2706
2698
  }
2707
2699
  .np-select-input-addon {
2708
2700
  border-width: 0;
@@ -2736,9 +2728,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2736
2728
  .np-select-input-addon-separator {
2737
2729
  height: 24px;
2738
2730
  height: var(--size-24);
2739
- border-left: 1px solid rgba(0,0,0,0.10196);
2740
- border-left: 1px solid #0000001a;
2741
- border-left: 1px solid var(--color-border-neutral);
2731
+ border-inline-start: 1px solid rgba(0,0,0,0.10196);
2732
+ border-inline-start: 1px solid var(--color-border-neutral);
2742
2733
  }
2743
2734
  .np-text-area {
2744
2735
  min-height: 72px;