@transferwise/components 0.0.0-experimental-fb351fb → 0.0.0-experimental-0fa786b

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 +105 -105
  2. package/build/styles/listItem/ListItem.css +105 -105
  3. package/build/styles/listItem/ListItem.grid.css +105 -105
  4. package/build/styles/main.css +105 -105
  5. package/package.json +1 -1
  6. package/src/listItem/ListItem.css +105 -105
  7. package/src/listItem/ListItem.grid.css +105 -105
  8. package/src/listItem/ListItem.grid.less +162 -159
  9. package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx +1 -1
  10. package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx +1 -1
  11. package/src/main.css +105 -105
package/src/main.css CHANGED
@@ -29430,54 +29430,66 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29430
29430
  margin-top: -2px;
29431
29431
  }
29432
29432
 
29433
- @container (min-width: 308px) {
29433
+ @container (max-width: 240px) {
29434
29434
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29435
- height: var(--wds-list-item-control-wrapper-height);
29436
- align-content: center;
29437
- }
29438
- .wds-list-item-gridWrapper .wds-list-item-media-image {
29439
- -o-object-position: center;
29440
- object-position: center;
29435
+ align-content: start;
29441
29436
  }
29442
29437
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29443
- grid-template-columns: auto 1fr auto;
29438
+ grid-template-columns: 1fr auto;
29444
29439
  grid-template-rows: auto auto auto;
29445
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
29440
+ grid-template-areas: "body control" "info control" "prompt prompt";
29441
+ }
29442
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29443
+ grid-template-columns: 1fr;
29444
+ grid-template-rows: auto;
29445
+ grid-template-areas: "body" "info" "prompt" "control";
29446
29446
  }
29447
29447
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29448
- grid-template-columns: auto 1fr auto;
29448
+ grid-template-columns: 1fr auto;
29449
29449
  grid-template-rows: auto auto;
29450
- grid-template-areas: "media body control" ". info .";
29450
+ grid-template-areas: "body control" "info control";
29451
+ }
29452
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29453
+ grid-template-columns: 1fr;
29454
+ grid-template-areas: "body" "info" "control";
29451
29455
  }
29452
29456
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29453
- grid-template-columns: auto 1fr auto;
29457
+ grid-template-columns: 1fr auto;
29454
29458
  grid-template-rows: auto auto;
29455
- grid-template-areas: "media body control" ". prompt prompt";
29459
+ grid-template-areas: "body control" "prompt prompt";
29460
+ }
29461
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29462
+ grid-template-columns: 1fr;
29463
+ grid-template-areas: "body" "prompt" "control";
29456
29464
  }
29457
29465
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
29458
- grid-template-columns: auto 1fr auto;
29466
+ grid-template-columns: 1fr auto;
29459
29467
  grid-template-rows: auto;
29460
- grid-template-areas: "media body control";
29468
+ grid-template-areas: "body control";
29469
+ }
29470
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29471
+ grid-template-columns: 1fr;
29472
+ grid-template-areas: "body" "control";
29461
29473
  }
29462
29474
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
29463
- grid-template-columns: auto 1fr;
29464
- grid-template-rows: auto auto;
29465
- grid-template-areas: "media body" ". info" ". prompt";
29475
+ grid-template-columns: 1fr;
29476
+ grid-template-rows: auto auto auto;
29477
+ grid-template-areas: "body" "info" "prompt";
29466
29478
  }
29467
29479
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
29468
- grid-template-columns: auto 1fr;
29469
- grid-template-rows: auto auto auto;
29470
- grid-template-areas: "media body" ". info";
29480
+ grid-template-columns: 1fr;
29481
+ grid-template-rows: auto auto;
29482
+ grid-template-areas: "body" "info";
29471
29483
  }
29472
29484
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
29473
- grid-template-columns: auto 1fr;
29485
+ grid-template-columns: 1fr;
29474
29486
  grid-template-rows: auto auto;
29475
- grid-template-areas: "media body" ". prompt";
29487
+ grid-template-areas: "body" "prompt";
29476
29488
  }
29477
29489
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
29478
- grid-template-columns: auto 1fr;
29490
+ grid-template-columns: 1fr;
29479
29491
  grid-template-rows: auto;
29480
- grid-template-areas: "media body";
29492
+ grid-template-areas: "body";
29481
29493
  }
29482
29494
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
29483
29495
  grid-column: 1 / -1;
@@ -29485,23 +29497,43 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29485
29497
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29486
29498
  grid-template-columns: 1fr auto;
29487
29499
  grid-template-rows: auto auto auto;
29488
- grid-template-areas: "body control" "info ." "prompt prompt";
29500
+ grid-template-areas: "body control" "info control" "prompt prompt";
29501
+ }
29502
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29503
+ grid-template-columns: 1fr;
29504
+ grid-template-rows: auto;
29505
+ grid-template-areas: "body" "info" "prompt" "control";
29489
29506
  }
29490
29507
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29491
29508
  grid-template-columns: 1fr auto;
29492
29509
  grid-template-rows: auto auto;
29493
- grid-template-areas: "body control" "info .";
29510
+ grid-template-areas: "body control" "info control";
29511
+ }
29512
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29513
+ grid-template-columns: 1fr;
29514
+ grid-template-rows: auto;
29515
+ grid-template-areas: "body" "info" "control";
29494
29516
  }
29495
29517
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29496
29518
  grid-template-columns: 1fr auto;
29497
29519
  grid-template-rows: auto auto;
29498
29520
  grid-template-areas: "body control" "prompt prompt";
29499
29521
  }
29522
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29523
+ grid-template-columns: 1fr;
29524
+ grid-template-rows: auto;
29525
+ grid-template-areas: "body" "prompt" "control";
29526
+ }
29500
29527
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
29501
29528
  grid-template-columns: 1fr auto;
29502
29529
  grid-template-rows: auto;
29503
29530
  grid-template-areas: "body control";
29504
29531
  }
29532
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29533
+ grid-template-columns: 1fr;
29534
+ grid-template-rows: auto;
29535
+ grid-template-areas: "body" "control";
29536
+ }
29505
29537
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
29506
29538
  grid-column: 1 / -1;
29507
29539
  }
@@ -29525,9 +29557,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29525
29557
  grid-template-rows: auto;
29526
29558
  grid-template-areas: "body";
29527
29559
  }
29560
+ .wds-list-item-gridWrapper .wds-list-item-media {
29561
+ display: none;
29562
+ }
29563
+ .wds-list-item-gridWrapper .wds-list-item-body {
29564
+ grid-area: body;
29565
+ display: grid;
29566
+ grid-template-columns: 1fr;
29567
+ justify-items: start;
29568
+ grid-gap: 0;
29569
+ gap: 0;
29570
+ }
29571
+ .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
29572
+ text-align: left;
29573
+ }
29574
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
29575
+ margin-top: 4px;
29576
+ margin-top: var(--size-4);
29577
+ }
29528
29578
  }
29529
29579
 
29530
- @container (min-width: 241px) and (max-width: 308px) {
29580
+ @container (min-width: 240.01px) and (max-width: 308px) {
29531
29581
  .wds-list-item-gridWrapper .wds-list-item-media-image {
29532
29582
  -o-object-position: bottom left;
29533
29583
  object-position: bottom left;
@@ -29659,66 +29709,54 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29659
29709
  }
29660
29710
  }
29661
29711
 
29662
- @container (max-width: 240px) {
29712
+ @container (min-width: 308.01px) {
29663
29713
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29664
- align-content: start;
29714
+ height: var(--wds-list-item-control-wrapper-height);
29715
+ align-content: center;
29716
+ }
29717
+ .wds-list-item-gridWrapper .wds-list-item-media-image {
29718
+ -o-object-position: center;
29719
+ object-position: center;
29665
29720
  }
29666
29721
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29667
- grid-template-columns: 1fr auto;
29722
+ grid-template-columns: auto 1fr auto;
29668
29723
  grid-template-rows: auto auto auto;
29669
- grid-template-areas: "body control" "info control" "prompt prompt";
29670
- }
29671
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29672
- grid-template-columns: 1fr;
29673
- grid-template-rows: auto;
29674
- grid-template-areas: "body" "info" "prompt" "control";
29724
+ grid-template-areas: "media body control" ". info ." ". prompt prompt";
29675
29725
  }
29676
29726
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29677
- grid-template-columns: 1fr auto;
29727
+ grid-template-columns: auto 1fr auto;
29678
29728
  grid-template-rows: auto auto;
29679
- grid-template-areas: "body control" "info control";
29680
- }
29681
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29682
- grid-template-columns: 1fr;
29683
- grid-template-areas: "body" "info" "control";
29729
+ grid-template-areas: "media body control" ". info .";
29684
29730
  }
29685
29731
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29686
- grid-template-columns: 1fr auto;
29732
+ grid-template-columns: auto 1fr auto;
29687
29733
  grid-template-rows: auto auto;
29688
- grid-template-areas: "body control" "prompt prompt";
29689
- }
29690
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29691
- grid-template-columns: 1fr;
29692
- grid-template-areas: "body" "prompt" "control";
29734
+ grid-template-areas: "media body control" ". prompt prompt";
29693
29735
  }
29694
29736
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
29695
- grid-template-columns: 1fr auto;
29737
+ grid-template-columns: auto 1fr auto;
29696
29738
  grid-template-rows: auto;
29697
- grid-template-areas: "body control";
29698
- }
29699
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29700
- grid-template-columns: 1fr;
29701
- grid-template-areas: "body" "control";
29739
+ grid-template-areas: "media body control";
29702
29740
  }
29703
29741
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
29704
- grid-template-columns: 1fr;
29705
- grid-template-rows: auto auto auto;
29706
- grid-template-areas: "body" "info" "prompt";
29742
+ grid-template-columns: auto 1fr;
29743
+ grid-template-rows: auto auto;
29744
+ grid-template-areas: "media body" ". info" ". prompt";
29707
29745
  }
29708
29746
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
29709
- grid-template-columns: 1fr;
29710
- grid-template-rows: auto auto;
29711
- grid-template-areas: "body" "info";
29747
+ grid-template-columns: auto 1fr;
29748
+ grid-template-rows: auto auto auto;
29749
+ grid-template-areas: "media body" ". info";
29712
29750
  }
29713
29751
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
29714
- grid-template-columns: 1fr;
29752
+ grid-template-columns: auto 1fr;
29715
29753
  grid-template-rows: auto auto;
29716
- grid-template-areas: "body" "prompt";
29754
+ grid-template-areas: "media body" ". prompt";
29717
29755
  }
29718
29756
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
29719
- grid-template-columns: 1fr;
29757
+ grid-template-columns: auto 1fr;
29720
29758
  grid-template-rows: auto;
29721
- grid-template-areas: "body";
29759
+ grid-template-areas: "media body";
29722
29760
  }
29723
29761
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
29724
29762
  grid-column: 1 / -1;
@@ -29726,43 +29764,23 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29726
29764
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29727
29765
  grid-template-columns: 1fr auto;
29728
29766
  grid-template-rows: auto auto auto;
29729
- grid-template-areas: "body control" "info control" "prompt prompt";
29730
- }
29731
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
29732
- grid-template-columns: 1fr;
29733
- grid-template-rows: auto;
29734
- grid-template-areas: "body" "info" "prompt" "control";
29767
+ grid-template-areas: "body control" "info ." "prompt prompt";
29735
29768
  }
29736
29769
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
29737
29770
  grid-template-columns: 1fr auto;
29738
29771
  grid-template-rows: auto auto;
29739
- grid-template-areas: "body control" "info control";
29740
- }
29741
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
29742
- grid-template-columns: 1fr;
29743
- grid-template-rows: auto;
29744
- grid-template-areas: "body" "info" "control";
29772
+ grid-template-areas: "body control" "info .";
29745
29773
  }
29746
29774
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
29747
29775
  grid-template-columns: 1fr auto;
29748
29776
  grid-template-rows: auto auto;
29749
29777
  grid-template-areas: "body control" "prompt prompt";
29750
29778
  }
29751
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
29752
- grid-template-columns: 1fr;
29753
- grid-template-rows: auto;
29754
- grid-template-areas: "body" "prompt" "control";
29755
- }
29756
29779
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
29757
29780
  grid-template-columns: 1fr auto;
29758
29781
  grid-template-rows: auto;
29759
29782
  grid-template-areas: "body control";
29760
29783
  }
29761
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
29762
- grid-template-columns: 1fr;
29763
- grid-template-rows: auto;
29764
- grid-template-areas: "body" "control";
29765
- }
29766
29784
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
29767
29785
  grid-column: 1 / -1;
29768
29786
  }
@@ -29786,24 +29804,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29786
29804
  grid-template-rows: auto;
29787
29805
  grid-template-areas: "body";
29788
29806
  }
29789
- .wds-list-item-gridWrapper .wds-list-item-media {
29790
- display: none;
29791
- }
29792
- .wds-list-item-gridWrapper .wds-list-item-body {
29793
- grid-area: body;
29794
- display: grid;
29795
- grid-template-columns: 1fr;
29796
- justify-items: start;
29797
- grid-gap: 0;
29798
- gap: 0;
29799
- }
29800
- .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
29801
- text-align: left;
29802
- }
29803
- .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
29804
- margin-top: 4px;
29805
- margin-top: var(--size-4);
29806
- }
29807
29807
  }
29808
29808
 
29809
29809
  .wds-list-item-prompt {