@transferwise/components 0.0.0-experimental-e5216db → 0.0.0-experimental-ffd4b26

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 (14) hide show
  1. package/build/index.js +1 -1
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +1 -1
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +9 -5
  6. package/build/styles/inputs/SelectInput.css +9 -5
  7. package/build/styles/main.css +9 -5
  8. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/inputs/SelectInput.css +9 -5
  11. package/src/inputs/_BottomSheet.less +6 -3
  12. package/src/inputs/_BottomSheet.tsx +1 -0
  13. package/src/inputs/_Popover.less +2 -2
  14. package/src/main.css +9 -5
package/build/main.css CHANGED
@@ -2468,12 +2468,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2468
2468
  padding: var(--size-16);
2469
2469
  }
2470
2470
  .np-bottom-sheet-v2-content-inner {
2471
- display: flex;
2472
- flex-direction: column;
2471
+ display: grid;
2472
+ grid-template-rows: minmax(0, 1fr);
2473
+ grid-row-gap: 8px;
2474
+ grid-row-gap: var(--size-8);
2473
2475
  row-gap: 8px;
2474
2476
  row-gap: var(--size-8);
2475
2477
  overflow: auto;
2476
2478
  }
2479
+ .np-bottom-sheet-v2-content-inner--has-title {
2480
+ grid-template-rows: auto minmax(0, 1fr);
2481
+ }
2477
2482
  .np-bottom-sheet-v2-content-inner--padding-md {
2478
2483
  padding: 16px;
2479
2484
  padding: var(--size-16);
@@ -2484,7 +2489,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2484
2489
  color: var(--color-content-primary);
2485
2490
  }
2486
2491
  .np-bottom-sheet-v2-body {
2487
- overflow: auto;
2488
2492
  color: #5d7079;
2489
2493
  color: var(--color-content-secondary);
2490
2494
  }
@@ -2525,10 +2529,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2525
2529
  row-gap: 8px;
2526
2530
  row-gap: var(--size-8);
2527
2531
  overflow-y: auto;
2528
- grid-template-rows: repeat(1, minmax(0, 1fr));
2532
+ grid-template-rows: minmax(0, 1fr);
2529
2533
  }
2530
2534
  .np-popover-v2--has-title {
2531
- grid-template-rows: auto 1fr;
2535
+ grid-template-rows: auto minmax(0, 1fr);
2532
2536
  }
2533
2537
  .np-popover-v2--padding-md {
2534
2538
  padding: 16px;
package/build/styles/inputs/SelectInput.css CHANGED
@@ -70,12 +70,17 @@
70
70
  padding: var(--size-16);
71
71
  }
72
72
  .np-bottom-sheet-v2-content-inner {
73
- display: flex;
74
- flex-direction: column;
73
+ display: grid;
74
+ grid-template-rows: minmax(0, 1fr);
75
+ grid-row-gap: 8px;
76
+ grid-row-gap: var(--size-8);
75
77
  row-gap: 8px;
76
78
  row-gap: var(--size-8);
77
79
  overflow: auto;
78
80
  }
81
+ .np-bottom-sheet-v2-content-inner--has-title {
82
+ grid-template-rows: auto minmax(0, 1fr);
83
+ }
79
84
  .np-bottom-sheet-v2-content-inner--padding-md {
80
85
  padding: 16px;
81
86
  padding: var(--size-16);
@@ -86,7 +91,6 @@
86
91
  color: var(--color-content-primary);
87
92
  }
88
93
  .np-bottom-sheet-v2-body {
89
- overflow: auto;
90
94
  color: #5d7079;
91
95
  color: var(--color-content-secondary);
92
96
  }
@@ -127,10 +131,10 @@
127
131
  row-gap: 8px;
128
132
  row-gap: var(--size-8);
129
133
  overflow-y: auto;
130
- grid-template-rows: repeat(1, minmax(0, 1fr));
134
+ grid-template-rows: minmax(0, 1fr);
131
135
  }
132
136
  .np-popover-v2--has-title {
133
- grid-template-rows: auto 1fr;
137
+ grid-template-rows: auto minmax(0, 1fr);
134
138
  }
135
139
  .np-popover-v2--padding-md {
136
140
  padding: 16px;
package/build/styles/main.css CHANGED
@@ -2468,12 +2468,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2468
2468
  padding: var(--size-16);
2469
2469
  }
2470
2470
  .np-bottom-sheet-v2-content-inner {
2471
- display: flex;
2472
- flex-direction: column;
2471
+ display: grid;
2472
+ grid-template-rows: minmax(0, 1fr);
2473
+ grid-row-gap: 8px;
2474
+ grid-row-gap: var(--size-8);
2473
2475
  row-gap: 8px;
2474
2476
  row-gap: var(--size-8);
2475
2477
  overflow: auto;
2476
2478
  }
2479
+ .np-bottom-sheet-v2-content-inner--has-title {
2480
+ grid-template-rows: auto minmax(0, 1fr);
2481
+ }
2477
2482
  .np-bottom-sheet-v2-content-inner--padding-md {
2478
2483
  padding: 16px;
2479
2484
  padding: var(--size-16);
@@ -2484,7 +2489,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2484
2489
  color: var(--color-content-primary);
2485
2490
  }
2486
2491
  .np-bottom-sheet-v2-body {
2487
- overflow: auto;
2488
2492
  color: #5d7079;
2489
2493
  color: var(--color-content-secondary);
2490
2494
  }
@@ -2525,10 +2529,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2525
2529
  row-gap: 8px;
2526
2530
  row-gap: var(--size-8);
2527
2531
  overflow-y: auto;
2528
- grid-template-rows: repeat(1, minmax(0, 1fr));
2532
+ grid-template-rows: minmax(0, 1fr);
2529
2533
  }
2530
2534
  .np-popover-v2--has-title {
2531
- grid-template-rows: auto 1fr;
2535
+ grid-template-rows: auto minmax(0, 1fr);
2532
2536
  }
2533
2537
  .np-popover-v2--padding-md {
2534
2538
  padding: 16px;
package/build/types/inputs/_BottomSheet.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA4FlB"}
1
+ {"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA6FlB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-e5216db",
3
+ "version": "0.0.0-experimental-ffd4b26",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/inputs/SelectInput.css CHANGED
@@ -70,12 +70,17 @@
70
70
  padding: var(--size-16);
71
71
  }
72
72
  .np-bottom-sheet-v2-content-inner {
73
- display: flex;
74
- flex-direction: column;
73
+ display: grid;
74
+ grid-template-rows: minmax(0, 1fr);
75
+ grid-row-gap: 8px;
76
+ grid-row-gap: var(--size-8);
75
77
  row-gap: 8px;
76
78
  row-gap: var(--size-8);
77
79
  overflow: auto;
78
80
  }
81
+ .np-bottom-sheet-v2-content-inner--has-title {
82
+ grid-template-rows: auto minmax(0, 1fr);
83
+ }
79
84
  .np-bottom-sheet-v2-content-inner--padding-md {
80
85
  padding: 16px;
81
86
  padding: var(--size-16);
@@ -86,7 +91,6 @@
86
91
  color: var(--color-content-primary);
87
92
  }
88
93
  .np-bottom-sheet-v2-body {
89
- overflow: auto;
90
94
  color: #5d7079;
91
95
  color: var(--color-content-secondary);
92
96
  }
@@ -127,10 +131,10 @@
127
131
  row-gap: 8px;
128
132
  row-gap: var(--size-8);
129
133
  overflow-y: auto;
130
- grid-template-rows: repeat(1, minmax(0, 1fr));
134
+ grid-template-rows: minmax(0, 1fr);
131
135
  }
132
136
  .np-popover-v2--has-title {
133
- grid-template-rows: auto 1fr;
137
+ grid-template-rows: auto minmax(0, 1fr);
134
138
  }
135
139
  .np-popover-v2--padding-md {
136
140
  padding: 16px;
package/src/inputs/_BottomSheet.less CHANGED
@@ -69,11 +69,15 @@
69
69
  }
70
70
 
71
71
  .np-bottom-sheet-v2-content-inner {
72
- display: flex;
73
- flex-direction: column;
72
+ display: grid;
73
+ grid-template-rows: minmax(0, 1fr);
74
74
  row-gap: var(--size-8);
75
75
  overflow: auto;
76
76
 
77
+ &--has-title {
78
+ grid-template-rows: auto minmax(0, 1fr);
79
+ }
80
+
77
81
  &--padding-md {
78
82
  padding: var(--size-16);
79
83
  padding-top: 0px;
@@ -85,6 +89,5 @@
85
89
  }
86
90
 
87
91
  .np-bottom-sheet-v2-body {
88
- overflow: auto;
89
92
  color: var(--color-content-secondary);
90
93
  }
package/src/inputs/_BottomSheet.tsx CHANGED
@@ -114,6 +114,7 @@ export function BottomSheet({
114
114
  <div
115
115
  className={classNames(
116
116
  'np-bottom-sheet-v2-content-inner',
117
+ title && 'np-bottom-sheet-v2-content-inner--has-title',
117
118
  padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',
118
119
  )}
119
120
  >
package/src/inputs/_Popover.less CHANGED
@@ -26,10 +26,10 @@
26
26
  display: grid;
27
27
  row-gap: var(--size-8);
28
28
  overflow-y: auto;
29
- grid-template-rows: repeat(1, minmax(0, 1fr));
29
+ grid-template-rows: minmax(0, 1fr);
30
30
 
31
31
  &--has-title {
32
- grid-template-rows: auto 1fr;
32
+ grid-template-rows: auto minmax(0, 1fr);
33
33
  }
34
34
 
35
35
  &--padding-md {
package/src/main.css CHANGED
@@ -2468,12 +2468,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2468
2468
  padding: var(--size-16);
2469
2469
  }
2470
2470
  .np-bottom-sheet-v2-content-inner {
2471
- display: flex;
2472
- flex-direction: column;
2471
+ display: grid;
2472
+ grid-template-rows: minmax(0, 1fr);
2473
+ grid-row-gap: 8px;
2474
+ grid-row-gap: var(--size-8);
2473
2475
  row-gap: 8px;
2474
2476
  row-gap: var(--size-8);
2475
2477
  overflow: auto;
2476
2478
  }
2479
+ .np-bottom-sheet-v2-content-inner--has-title {
2480
+ grid-template-rows: auto minmax(0, 1fr);
2481
+ }
2477
2482
  .np-bottom-sheet-v2-content-inner--padding-md {
2478
2483
  padding: 16px;
2479
2484
  padding: var(--size-16);
@@ -2484,7 +2489,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2484
2489
  color: var(--color-content-primary);
2485
2490
  }
2486
2491
  .np-bottom-sheet-v2-body {
2487
- overflow: auto;
2488
2492
  color: #5d7079;
2489
2493
  color: var(--color-content-secondary);
2490
2494
  }
@@ -2525,10 +2529,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2525
2529
  row-gap: 8px;
2526
2530
  row-gap: var(--size-8);
2527
2531
  overflow-y: auto;
2528
- grid-template-rows: repeat(1, minmax(0, 1fr));
2532
+ grid-template-rows: minmax(0, 1fr);
2529
2533
  }
2530
2534
  .np-popover-v2--has-title {
2531
- grid-template-rows: auto 1fr;
2535
+ grid-template-rows: auto minmax(0, 1fr);
2532
2536
  }
2533
2537
  .np-popover-v2--padding-md {
2534
2538
  padding: 16px;