@transferwise/components 0.0.0-experimental-c83ffba → 0.0.0-experimental-f9079fe

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 (11) hide show
  1. package/build/main.css +3 -3
  2. package/build/styles/listItem/ListItem.css +3 -3
  3. package/build/styles/listItem/ListItem.grid.css +2 -2
  4. package/build/styles/main.css +3 -3
  5. package/package.json +3 -3
  6. package/src/listItem/ListItem.css +3 -3
  7. package/src/listItem/ListItem.grid.css +2 -2
  8. package/src/listItem/ListItem.grid.less +3 -3
  9. package/src/listItem/ListItem.less +1 -1
  10. package/src/listItem/ListItem.vars.less +2 -2
  11. package/src/main.css +3 -3
package/build/main.css CHANGED
@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2653
2653
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
2654
2654
  margin-top: -2px;
2655
2655
  }
2656
- @container (min-width: 308px) {
2656
+ @container (min-width: 309px) {
2657
2657
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2658
2658
  height: var(--wds-list-item-control-wrapper-height);
2659
2659
  align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2749
2749
  grid-template-areas: "body";
2750
2750
  }
2751
2751
  }
2752
- @container (min-width: 240px) and (max-width: 308px) {
2752
+ @container (min-width: 241px) and (max-width: 308px) {
2753
2753
  .wds-list-item-gridWrapper .wds-list-item-media-image {
2754
2754
  -o-object-position: bottom left;
2755
2755
  object-position: bottom left;
@@ -3315,7 +3315,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3315
3315
  flex-direction: column;
3316
3316
  justify-content: center;
3317
3317
  }
3318
- @container (min-width: 308px) {
3318
+ @container (min-width: 309px) {
3319
3319
  .wds-list-item-titles,
3320
3320
  .wds-list-item-value {
3321
3321
  min-height: 100%;
package/build/styles/listItem/ListItem.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 308px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
15
  align-content: center;
@@ -105,7 +105,7 @@
105
105
  grid-template-areas: "body";
106
106
  }
107
107
  }
108
- @container (min-width: 240px) and (max-width: 308px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
109
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
110
  -o-object-position: bottom left;
111
111
  object-position: bottom left;
@@ -671,7 +671,7 @@
671
671
  flex-direction: column;
672
672
  justify-content: center;
673
673
  }
674
- @container (min-width: 308px) {
674
+ @container (min-width: 309px) {
675
675
  .wds-list-item-titles,
676
676
  .wds-list-item-value {
677
677
  min-height: 100%;
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 308px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
15
  align-content: center;
@@ -105,7 +105,7 @@
105
105
  grid-template-areas: "body";
106
106
  }
107
107
  }
108
- @container (min-width: 240px) and (max-width: 308px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
109
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
110
  -o-object-position: bottom left;
111
111
  object-position: bottom left;
package/build/styles/main.css CHANGED
@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2653
2653
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
2654
2654
  margin-top: -2px;
2655
2655
  }
2656
- @container (min-width: 308px) {
2656
+ @container (min-width: 309px) {
2657
2657
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2658
2658
  height: var(--wds-list-item-control-wrapper-height);
2659
2659
  align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2749
2749
  grid-template-areas: "body";
2750
2750
  }
2751
2751
  }
2752
- @container (min-width: 240px) and (max-width: 308px) {
2752
+ @container (min-width: 241px) and (max-width: 308px) {
2753
2753
  .wds-list-item-gridWrapper .wds-list-item-media-image {
2754
2754
  -o-object-position: bottom left;
2755
2755
  object-position: bottom left;
@@ -3315,7 +3315,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3315
3315
  flex-direction: column;
3316
3316
  justify-content: center;
3317
3317
  }
3318
- @container (min-width: 308px) {
3318
+ @container (min-width: 309px) {
3319
3319
  .wds-list-item-titles,
3320
3320
  .wds-list-item-value {
3321
3321
  min-height: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-c83ffba",
3
+ "version": "0.0.0-experimental-f9079fe",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -83,9 +83,9 @@
83
83
  "storybook": "^9.1.3",
84
84
  "storybook-addon-tag-badges": "^2.0.2",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
- "@transferwise/neptune-css": "14.24.5",
87
- "@transferwise/less-config": "3.1.2",
88
86
  "@wise/components-theming": "1.6.4",
87
+ "@transferwise/less-config": "3.1.2",
88
+ "@transferwise/neptune-css": "14.24.5",
89
89
  "@wise/wds-configs": "0.0.0"
90
90
  },
91
91
  "peerDependencies": {
package/src/listItem/ListItem.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 308px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
15
  align-content: center;
@@ -105,7 +105,7 @@
105
105
  grid-template-areas: "body";
106
106
  }
107
107
  }
108
- @container (min-width: 240px) and (max-width: 308px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
109
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
110
  -o-object-position: bottom left;
111
111
  object-position: bottom left;
@@ -671,7 +671,7 @@
671
671
  flex-direction: column;
672
672
  justify-content: center;
673
673
  }
674
- @container (min-width: 308px) {
674
+ @container (min-width: 309px) {
675
675
  .wds-list-item-titles,
676
676
  .wds-list-item-value {
677
677
  min-height: 100%;
package/src/listItem/ListItem.grid.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 308px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
15
  align-content: center;
@@ -105,7 +105,7 @@
105
105
  grid-template-areas: "body";
106
106
  }
107
107
  }
108
- @container (min-width: 240px) and (max-width: 308px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
109
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
110
  -o-object-position: bottom left;
111
111
  object-position: bottom left;
package/src/listItem/ListItem.grid.less CHANGED
@@ -14,7 +14,7 @@
14
14
  }
15
15
  }
16
16
 
17
- @container (min-width: @wds-list-item-cq-max) {
17
+ @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
18
18
  .wds-list-item-control-wrapper {
19
19
  height: var(--wds-list-item-control-wrapper-height);
20
20
  align-content: center;
@@ -169,7 +169,7 @@
169
169
  }
170
170
  }
171
171
 
172
- @container (min-width: @wds-list-item-cq-min) and (max-width: @wds-list-item-cq-max) {
172
+ @container (min-width: unit(@wds-list-item-cq-min + 1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
173
173
  .wds-list-item-media-image{
174
174
  object-position: bottom left;
175
175
  }
@@ -400,7 +400,7 @@
400
400
  }
401
401
  }
402
402
 
403
- @container (max-width: @wds-list-item-cq-min) {
403
+ @container (max-width: unit(@wds-list-item-cq-min, px)) {
404
404
  .wds-list-item-control-wrapper {
405
405
  align-content: start;
406
406
  }
package/src/listItem/ListItem.less CHANGED
@@ -179,7 +179,7 @@
179
179
  flex-direction: column;
180
180
  justify-content: center;
181
181
 
182
- @container (min-width: @wds-list-item-cq-max) {
182
+ @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
183
183
  min-height: var(--wds-list-item-value-min-height, 100%);
184
184
  }
185
185
  }
package/src/listItem/ListItem.vars.less CHANGED
@@ -8,5 +8,5 @@
8
8
  //
9
9
  // @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
10
10
  // @see https://wise.slack.com/archives/C07H7DE0943/p1756305651916949
11
- @wds-list-item-cq-min: 240px;
12
- @wds-list-item-cq-max: 308px;
11
+ @wds-list-item-cq-min: 240;
12
+ @wds-list-item-cq-max: 308;
package/src/main.css CHANGED
@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2653
2653
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
2654
2654
  margin-top: -2px;
2655
2655
  }
2656
- @container (min-width: 308px) {
2656
+ @container (min-width: 309px) {
2657
2657
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
2658
2658
  height: var(--wds-list-item-control-wrapper-height);
2659
2659
  align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2749
2749
  grid-template-areas: "body";
2750
2750
  }
2751
2751
  }
2752
- @container (min-width: 240px) and (max-width: 308px) {
2752
+ @container (min-width: 241px) and (max-width: 308px) {
2753
2753
  .wds-list-item-gridWrapper .wds-list-item-media-image {
2754
2754
  -o-object-position: bottom left;
2755
2755
  object-position: bottom left;
@@ -3315,7 +3315,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3315
3315
  flex-direction: column;
3316
3316
  justify-content: center;
3317
3317
  }
3318
- @container (min-width: 308px) {
3318
+ @container (min-width: 309px) {
3319
3319
  .wds-list-item-titles,
3320
3320
  .wds-list-item-value {
3321
3321
  min-height: 100%;