@transferwise/components 46.139.0 → 46.140.1

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 (35) hide show
  1. package/build/dateLookup/DateLookup.js +1 -1
  2. package/build/dateLookup/DateLookup.js.map +1 -1
  3. package/build/dateLookup/DateLookup.mjs +1 -1
  4. package/build/dateLookup/DateLookup.mjs.map +1 -1
  5. package/build/main.css +64 -323
  6. package/build/popover/Popover.js +2 -2
  7. package/build/popover/Popover.js.map +1 -1
  8. package/build/popover/Popover.mjs +2 -2
  9. package/build/popover/Popover.mjs.map +1 -1
  10. package/build/select/Select.js +0 -3
  11. package/build/select/Select.js.map +1 -1
  12. package/build/select/Select.mjs +0 -3
  13. package/build/select/Select.mjs.map +1 -1
  14. package/build/styles/css/neptune.css +58 -317
  15. package/build/styles/less/neptune-tokens.less +2 -2
  16. package/build/styles/main.css +64 -323
  17. package/build/styles/props/neptune-tokens.css +1 -1
  18. package/build/styles/styles/less/core/viewport-themes.css +46 -42
  19. package/build/styles/styles/less/neptune.css +58 -317
  20. package/build/types/select/Select.d.ts.map +1 -1
  21. package/package.json +2 -2
  22. package/src/dateLookup/DateLookup.test.story.tsx +16 -0
  23. package/src/dateLookup/DateLookup.tsx +1 -1
  24. package/src/inputs/SelectInput/_stories/SelectInput.test.story.tsx +82 -0
  25. package/src/main.css +64 -323
  26. package/src/modal/Modal.test.story.tsx +61 -0
  27. package/src/popover/Popover.story.tsx +45 -0
  28. package/src/popover/Popover.test.story.tsx +124 -0
  29. package/src/popover/Popover.test.tsx +55 -0
  30. package/src/popover/Popover.tsx +2 -2
  31. package/src/select/Select.test.story.tsx +74 -1
  32. package/src/select/Select.tsx +0 -3
  33. package/src/styles/less/core/viewport-themes.css +46 -42
  34. package/src/styles/less/core/viewport-themes.less +2 -45
  35. package/src/styles/less/neptune.css +58 -317
package/build/main.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
3
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -144,7 +144,7 @@
144
144
 
145
145
  /**
146
146
  * Do not edit directly, this file was auto-generated.
147
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
147
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
148
148
  */
149
149
 
150
150
  .np-theme-personal {
@@ -326,75 +326,9 @@
326
326
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
327
327
  }
328
328
 
329
- /**
330
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
331
- *
332
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
333
- */
334
-
335
- @media (max-width: 320px) {
336
- .np-theme-personal {
337
- --delta: 2;
338
- --size-4: calc(4px / var(--delta));
339
- --size-5: calc(5px / var(--delta));
340
- --size-8: calc(8px / var(--delta));
341
- --size-10: calc(10px / var(--delta));
342
- --size-12: calc(12px / var(--delta));
343
- --size-14: calc(14px / var(--delta));
344
- --size-16: calc(16px / var(--delta));
345
- --size-24: calc(24px / var(--delta));
346
- --size-32: calc(32px / var(--delta));
347
- --size-40: calc(40px / var(--delta));
348
- --size-48: calc(48px / var(--delta));
349
- --size-52: calc(52px / var(--delta));
350
- --size-56: calc(56px / var(--delta));
351
- --size-60: calc(60px / var(--delta));
352
- --size-64: calc(64px / var(--delta));
353
- --size-72: calc(72px / var(--delta));
354
- --size-80: calc(80px / var(--delta));
355
- --size-88: calc(88px / var(--delta));
356
- --size-96: calc(96px / var(--delta));
357
- --size-104: calc(104px / var(--delta));
358
- --size-112: calc(112px / var(--delta));
359
- --size-120: calc(120px / var(--delta));
360
- --size-126: calc(126px / var(--delta));
361
- --size-128: calc(128px / var(--delta));
362
- --size-146: calc(146px / var(--delta));
363
- --size-154: calc(154px / var(--delta));
364
- --size-x-small: calc(24px / var(--delta));
365
- --size-small: calc(32px / var(--delta));
366
- --size-medium: calc(40px / var(--delta));
367
- --size-large: calc(48px / var(--delta));
368
- --size-x-large: calc(56px / var(--delta));
369
- --size-2x-large: calc(72px / var(--delta));
370
- --space-content-horizontal: calc(16px / var(--delta));
371
- --space-small: calc(16px / var(--delta));
372
- --space-medium: calc(32px / var(--delta));
373
- --space-large: calc(40px / var(--delta));
374
- --space-x-large: calc(56px / var(--delta));
375
- --padding-x-small: var(--size-8);
376
- --padding-small: var(--size-16);
377
- --padding-medium: var(--size-24);
378
- --padding-large: var(--size-32);
379
- --input-height-base: var(--size-32);
380
- --input-height-large: var(--input-height-small);
381
- --input-padding: var(--input-padding-small);
382
- --input-padding-large: var(--input-padding-small);
383
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
384
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
385
- --btn-height: var(--input-height-base);
386
- --btn-lg-height: var(--btn-height);
387
- --btn-sm-height: var(--btn-height);
388
- --btn-padding: var(--input-padding);
389
- --btn-sm-padding: var(--btn-padding);
390
- --btn-lg-padding: var(--btn-padding);
391
- --dropdown-link-padding: var(--size-12) var(--size-16);
392
- }
393
- }
394
-
395
329
  /**
396
330
  * Do not edit directly, this file was auto-generated.
397
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
331
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
398
332
  */
399
333
 
400
334
  .np-theme-personal--forest-green {
@@ -576,75 +510,9 @@
576
510
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
577
511
  }
578
512
 
579
- /**
580
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
581
- *
582
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
583
- */
584
-
585
- @media (max-width: 320px) {
586
- .np-theme-personal {
587
- --delta: 2;
588
- --size-4: calc(4px / var(--delta));
589
- --size-5: calc(5px / var(--delta));
590
- --size-8: calc(8px / var(--delta));
591
- --size-10: calc(10px / var(--delta));
592
- --size-12: calc(12px / var(--delta));
593
- --size-14: calc(14px / var(--delta));
594
- --size-16: calc(16px / var(--delta));
595
- --size-24: calc(24px / var(--delta));
596
- --size-32: calc(32px / var(--delta));
597
- --size-40: calc(40px / var(--delta));
598
- --size-48: calc(48px / var(--delta));
599
- --size-52: calc(52px / var(--delta));
600
- --size-56: calc(56px / var(--delta));
601
- --size-60: calc(60px / var(--delta));
602
- --size-64: calc(64px / var(--delta));
603
- --size-72: calc(72px / var(--delta));
604
- --size-80: calc(80px / var(--delta));
605
- --size-88: calc(88px / var(--delta));
606
- --size-96: calc(96px / var(--delta));
607
- --size-104: calc(104px / var(--delta));
608
- --size-112: calc(112px / var(--delta));
609
- --size-120: calc(120px / var(--delta));
610
- --size-126: calc(126px / var(--delta));
611
- --size-128: calc(128px / var(--delta));
612
- --size-146: calc(146px / var(--delta));
613
- --size-154: calc(154px / var(--delta));
614
- --size-x-small: calc(24px / var(--delta));
615
- --size-small: calc(32px / var(--delta));
616
- --size-medium: calc(40px / var(--delta));
617
- --size-large: calc(48px / var(--delta));
618
- --size-x-large: calc(56px / var(--delta));
619
- --size-2x-large: calc(72px / var(--delta));
620
- --space-content-horizontal: calc(16px / var(--delta));
621
- --space-small: calc(16px / var(--delta));
622
- --space-medium: calc(32px / var(--delta));
623
- --space-large: calc(40px / var(--delta));
624
- --space-x-large: calc(56px / var(--delta));
625
- --padding-x-small: var(--size-8);
626
- --padding-small: var(--size-16);
627
- --padding-medium: var(--size-24);
628
- --padding-large: var(--size-32);
629
- --input-height-base: var(--size-32);
630
- --input-height-large: var(--input-height-small);
631
- --input-padding: var(--input-padding-small);
632
- --input-padding-large: var(--input-padding-small);
633
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
634
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
635
- --btn-height: var(--input-height-base);
636
- --btn-lg-height: var(--btn-height);
637
- --btn-sm-height: var(--btn-height);
638
- --btn-padding: var(--input-padding);
639
- --btn-sm-padding: var(--btn-padding);
640
- --btn-lg-padding: var(--btn-padding);
641
- --dropdown-link-padding: var(--size-12) var(--size-16);
642
- }
643
- }
644
-
645
513
  /**
646
514
  * Do not edit directly, this file was auto-generated.
647
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
515
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
648
516
  */
649
517
 
650
518
  .np-theme-personal--bright-green {
@@ -826,75 +694,9 @@
826
694
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
827
695
  }
828
696
 
829
- /**
830
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
831
- *
832
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
833
- */
834
-
835
- @media (max-width: 320px) {
836
- .np-theme-personal {
837
- --delta: 2;
838
- --size-4: calc(4px / var(--delta));
839
- --size-5: calc(5px / var(--delta));
840
- --size-8: calc(8px / var(--delta));
841
- --size-10: calc(10px / var(--delta));
842
- --size-12: calc(12px / var(--delta));
843
- --size-14: calc(14px / var(--delta));
844
- --size-16: calc(16px / var(--delta));
845
- --size-24: calc(24px / var(--delta));
846
- --size-32: calc(32px / var(--delta));
847
- --size-40: calc(40px / var(--delta));
848
- --size-48: calc(48px / var(--delta));
849
- --size-52: calc(52px / var(--delta));
850
- --size-56: calc(56px / var(--delta));
851
- --size-60: calc(60px / var(--delta));
852
- --size-64: calc(64px / var(--delta));
853
- --size-72: calc(72px / var(--delta));
854
- --size-80: calc(80px / var(--delta));
855
- --size-88: calc(88px / var(--delta));
856
- --size-96: calc(96px / var(--delta));
857
- --size-104: calc(104px / var(--delta));
858
- --size-112: calc(112px / var(--delta));
859
- --size-120: calc(120px / var(--delta));
860
- --size-126: calc(126px / var(--delta));
861
- --size-128: calc(128px / var(--delta));
862
- --size-146: calc(146px / var(--delta));
863
- --size-154: calc(154px / var(--delta));
864
- --size-x-small: calc(24px / var(--delta));
865
- --size-small: calc(32px / var(--delta));
866
- --size-medium: calc(40px / var(--delta));
867
- --size-large: calc(48px / var(--delta));
868
- --size-x-large: calc(56px / var(--delta));
869
- --size-2x-large: calc(72px / var(--delta));
870
- --space-content-horizontal: calc(16px / var(--delta));
871
- --space-small: calc(16px / var(--delta));
872
- --space-medium: calc(32px / var(--delta));
873
- --space-large: calc(40px / var(--delta));
874
- --space-x-large: calc(56px / var(--delta));
875
- --padding-x-small: var(--size-8);
876
- --padding-small: var(--size-16);
877
- --padding-medium: var(--size-24);
878
- --padding-large: var(--size-32);
879
- --input-height-base: var(--size-32);
880
- --input-height-large: var(--input-height-small);
881
- --input-padding: var(--input-padding-small);
882
- --input-padding-large: var(--input-padding-small);
883
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
884
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
885
- --btn-height: var(--input-height-base);
886
- --btn-lg-height: var(--btn-height);
887
- --btn-sm-height: var(--btn-height);
888
- --btn-padding: var(--input-padding);
889
- --btn-sm-padding: var(--btn-padding);
890
- --btn-lg-padding: var(--btn-padding);
891
- --dropdown-link-padding: var(--size-12) var(--size-16);
892
- }
893
- }
894
-
895
697
  /**
896
698
  * Do not edit directly, this file was auto-generated.
897
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
699
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
898
700
  */
899
701
 
900
702
  .np-theme-personal--dark {
@@ -1076,75 +878,9 @@
1076
878
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1077
879
  }
1078
880
 
1079
- /**
1080
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
1081
- *
1082
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
1083
- */
1084
-
1085
- @media (max-width: 320px) {
1086
- .np-theme-personal {
1087
- --delta: 2;
1088
- --size-4: calc(4px / var(--delta));
1089
- --size-5: calc(5px / var(--delta));
1090
- --size-8: calc(8px / var(--delta));
1091
- --size-10: calc(10px / var(--delta));
1092
- --size-12: calc(12px / var(--delta));
1093
- --size-14: calc(14px / var(--delta));
1094
- --size-16: calc(16px / var(--delta));
1095
- --size-24: calc(24px / var(--delta));
1096
- --size-32: calc(32px / var(--delta));
1097
- --size-40: calc(40px / var(--delta));
1098
- --size-48: calc(48px / var(--delta));
1099
- --size-52: calc(52px / var(--delta));
1100
- --size-56: calc(56px / var(--delta));
1101
- --size-60: calc(60px / var(--delta));
1102
- --size-64: calc(64px / var(--delta));
1103
- --size-72: calc(72px / var(--delta));
1104
- --size-80: calc(80px / var(--delta));
1105
- --size-88: calc(88px / var(--delta));
1106
- --size-96: calc(96px / var(--delta));
1107
- --size-104: calc(104px / var(--delta));
1108
- --size-112: calc(112px / var(--delta));
1109
- --size-120: calc(120px / var(--delta));
1110
- --size-126: calc(126px / var(--delta));
1111
- --size-128: calc(128px / var(--delta));
1112
- --size-146: calc(146px / var(--delta));
1113
- --size-154: calc(154px / var(--delta));
1114
- --size-x-small: calc(24px / var(--delta));
1115
- --size-small: calc(32px / var(--delta));
1116
- --size-medium: calc(40px / var(--delta));
1117
- --size-large: calc(48px / var(--delta));
1118
- --size-x-large: calc(56px / var(--delta));
1119
- --size-2x-large: calc(72px / var(--delta));
1120
- --space-content-horizontal: calc(16px / var(--delta));
1121
- --space-small: calc(16px / var(--delta));
1122
- --space-medium: calc(32px / var(--delta));
1123
- --space-large: calc(40px / var(--delta));
1124
- --space-x-large: calc(56px / var(--delta));
1125
- --padding-x-small: var(--size-8);
1126
- --padding-small: var(--size-16);
1127
- --padding-medium: var(--size-24);
1128
- --padding-large: var(--size-32);
1129
- --input-height-base: var(--size-32);
1130
- --input-height-large: var(--input-height-small);
1131
- --input-padding: var(--input-padding-small);
1132
- --input-padding-large: var(--input-padding-small);
1133
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
1134
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
1135
- --btn-height: var(--input-height-base);
1136
- --btn-lg-height: var(--btn-height);
1137
- --btn-sm-height: var(--btn-height);
1138
- --btn-padding: var(--input-padding);
1139
- --btn-sm-padding: var(--btn-padding);
1140
- --btn-lg-padding: var(--btn-padding);
1141
- --dropdown-link-padding: var(--size-12) var(--size-16);
1142
- }
1143
- }
1144
-
1145
881
  /**
1146
882
  * Do not edit directly, this file was auto-generated.
1147
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
883
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1148
884
  */
1149
885
 
1150
886
  .np-theme-platform {
@@ -1328,7 +1064,7 @@
1328
1064
 
1329
1065
  /**
1330
1066
  * Do not edit directly, this file was auto-generated.
1331
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1067
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1332
1068
  */
1333
1069
 
1334
1070
  .np-theme-platform--forest-green {
@@ -1512,7 +1248,7 @@
1512
1248
 
1513
1249
  /**
1514
1250
  * Do not edit directly, this file was auto-generated.
1515
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1251
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1516
1252
  */
1517
1253
 
1518
1254
  .np-theme-business {
@@ -1697,7 +1433,7 @@
1697
1433
 
1698
1434
  /**
1699
1435
  * Do not edit directly, this file was auto-generated.
1700
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1436
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1701
1437
  */
1702
1438
 
1703
1439
  .np-theme-business--dark {
@@ -1882,7 +1618,7 @@
1882
1618
 
1883
1619
  /**
1884
1620
  * Do not edit directly, this file was auto-generated.
1885
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1621
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
1886
1622
  */
1887
1623
 
1888
1624
  .np-theme-business--forest-green {
@@ -2067,7 +1803,7 @@
2067
1803
 
2068
1804
  /**
2069
1805
  * Do not edit directly, this file was auto-generated.
2070
- * Generated on Fri, 10 Apr 2026 14:46:01 GMT
1806
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
2071
1807
  */
2072
1808
 
2073
1809
  .np-theme-business--bright-green {
@@ -4615,48 +4351,53 @@ a.text-inverse:focus {
4615
4351
 
4616
4352
  @media (max-width: 320px) {
4617
4353
  .np-theme-personal {
4618
- --delta: 2;
4619
- --size-4: calc(4px / var(--delta));
4620
- --size-5: calc(5px / var(--delta));
4621
- --size-8: calc(8px / var(--delta));
4622
- --size-10: calc(10px / var(--delta));
4623
- --size-12: calc(12px / var(--delta));
4624
- --size-14: calc(14px / var(--delta));
4625
- --size-16: calc(16px / var(--delta));
4626
- --size-24: calc(24px / var(--delta));
4627
- --size-32: calc(32px / var(--delta));
4628
- --size-40: calc(40px / var(--delta));
4629
- --size-48: calc(48px / var(--delta));
4630
- --size-52: calc(52px / var(--delta));
4631
- --size-56: calc(56px / var(--delta));
4632
- --size-60: calc(60px / var(--delta));
4633
- --size-64: calc(64px / var(--delta));
4634
- --size-72: calc(72px / var(--delta));
4635
- --size-80: calc(80px / var(--delta));
4636
- --size-88: calc(88px / var(--delta));
4637
- --size-96: calc(96px / var(--delta));
4638
- --size-104: calc(104px / var(--delta));
4639
- --size-112: calc(112px / var(--delta));
4640
- --size-120: calc(120px / var(--delta));
4641
- --size-126: calc(126px / var(--delta));
4642
- --size-128: calc(128px / var(--delta));
4643
- --size-146: calc(146px / var(--delta));
4644
- --size-154: calc(154px / var(--delta));
4645
- --size-x-small: calc(24px / var(--delta));
4646
- --size-small: calc(32px / var(--delta));
4647
- --size-medium: calc(40px / var(--delta));
4648
- --size-large: calc(48px / var(--delta));
4649
- --size-x-large: calc(56px / var(--delta));
4650
- --size-2x-large: calc(72px / var(--delta));
4651
- --space-content-horizontal: calc(16px / var(--delta));
4652
- --space-small: calc(16px / var(--delta));
4653
- --space-medium: calc(32px / var(--delta));
4654
- --space-large: calc(40px / var(--delta));
4655
- --space-x-large: calc(56px / var(--delta));
4656
- --padding-x-small: var(--size-8);
4657
- --padding-small: var(--size-16);
4658
- --padding-medium: var(--size-24);
4659
- --padding-large: var(--size-32);
4354
+ --padding-x-small: 4px;
4355
+ --padding-small: 8px;
4356
+ --padding-medium: 12px;
4357
+ --padding-large: 16px;
4358
+ --size-4: 2px;
4359
+ --size-5: 2.5px;
4360
+ --size-8: 4px;
4361
+ --size-10: 5px;
4362
+ --size-12: 6px;
4363
+ --size-14: 7px;
4364
+ --size-16: 8px;
4365
+ --size-24: 12px;
4366
+ --size-32: 16px;
4367
+ --size-40: 20px;
4368
+ --size-48: 24px;
4369
+ --size-52: 26px;
4370
+ --size-56: 28px;
4371
+ --size-60: 30px;
4372
+ --size-64: 32px;
4373
+ --size-72: 36px;
4374
+ --size-80: 40px;
4375
+ --size-88: 44px;
4376
+ --size-96: 48px;
4377
+ --size-104: 52px;
4378
+ --size-112: 56px;
4379
+ --size-120: 60px;
4380
+ --size-126: 63px;
4381
+ --size-128: 64px;
4382
+ --size-146: 73px;
4383
+ --size-154: 77px;
4384
+ --size-160: 80px;
4385
+ --size-x-small: 12px;
4386
+ --size-small: 16px;
4387
+ --size-medium: 20px;
4388
+ --size-large: 24px;
4389
+ --size-x-large: 28px;
4390
+ --size-2x-large: 36px;
4391
+ --space-content-horizontal: 8px;
4392
+ --space-small: 8px;
4393
+ --space-medium: 16px;
4394
+ --space-large: 20px;
4395
+ --space-x-large: 28px;
4396
+ }
4397
+ }
4398
+
4399
+ @media (max-width: 320px) {
4400
+ .np-theme-personal {
4660
4401
  --input-height-base: var(--size-32);
4661
4402
  --input-height-large: var(--input-height-small);
4662
4403
  --input-padding: var(--input-padding-small);
@@ -28156,11 +27897,11 @@ a[data-toggle="tooltip"] {
28156
27897
  align-items: stretch;
28157
27898
  background-color: rgba(134,167,189,0.10196);
28158
27899
  background-color: var(--Card-background-color);
28159
- border-radius: calc(32px / 2);
27900
+ border-radius: 32px;
28160
27901
  border-radius: var(--Card-border-radius);
28161
- gap: calc(16px / 2);
27902
+ gap: 16px;
28162
27903
  gap: var(--Card-flex-gap);
28163
- padding: calc(24px / 2);
27904
+ padding: 24px;
28164
27905
  padding: var(--Card-padding);
28165
27906
  position: relative;
28166
27907
  box-sizing: border-box;
@@ -31480,7 +31221,7 @@ html:not([dir="rtl"]) .np-navigation-option {
31480
31221
  border-radius: var(--nudge-border-radius);
31481
31222
  display: flex;
31482
31223
  flex: 1;
31483
- gap: calc(16px / 2);
31224
+ gap: 16px;
31484
31225
  gap: var(--nudge-flex-gap);
31485
31226
  min-height: 106px;
31486
31227
  min-height: var(--nudge-min-height);
@@ -34678,9 +34419,9 @@ html:not([dir="rtl"]) .np-navigation-option {
34678
34419
  --buttonTopRightOffset: var(--size-16);
34679
34420
  --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
34680
34421
  position: absolute;
34681
- right: calc(16px / 2);
34422
+ right: 16px;
34682
34423
  right: var(--buttonTopRightOffset);
34683
- top: calc(16px / 2);
34424
+ top: 16px;
34684
34425
  top: var(--buttonTopRightOffset);
34685
34426
  }
34686
34427
 
package/build/popover/Popover.js CHANGED
@@ -67,7 +67,7 @@ function Popover({
67
67
  onClose?.();
68
68
  };
69
69
  return /*#__PURE__*/jsxRuntime.jsxs("span", {
70
- className: clsx.clsx('np-popover', className),
70
+ className: "np-popover",
71
71
  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
72
72
  ref: anchorReference,
73
73
  className: "d-inline-block",
@@ -84,7 +84,7 @@ function Popover({
84
84
  anchorRef: anchorReference,
85
85
  position: resolvedPlacement,
86
86
  arrow: true,
87
- className: "np-popover__container",
87
+ className: clsx.clsx('np-popover__container', className),
88
88
  onClose: handleOnClose,
89
89
  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
90
90
  className: "np-popover__content np-text-default-body",
package/build/popover/Popover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,mCAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,eAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAEmB,SAAI,CAAC,YAAY,EAAEnB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBAC7CqB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDuB,oBAAc,CAA2BvB,QAAQ,CAAC,gBAC/CwB,kBAAY,CAACxB,QAAQ,EAAE;QACrByB,OAAO,EAAEA,MAAK;AACZzB,UAAAA,QAAQ,CAAC0B,KAAK,CAACD,OAAO,IAAI;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF3B;AAAQ,KACR,CACN,eAAAqB,cAAA,CAACO,uBAAe,EAAA;AACd,MAAA,YAAA,EAAYrB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGqB,SAAU;AAC3Dd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,SAAS,EAAEjB,eAAgB;AAC3BkB,MAAAA,QAAQ,EAAErB,iBAAkB;MAC5BsB,KAAK,EAAA,IAAA;AACL/B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJgB,cAAA,CAACY,aAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className=\"np-popover\">\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className={clsx('np-popover__container', className)}\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,mCAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,eAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAC,YAAY;AAAAD,IAAAA,QAAA,gBAC1BoB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAER,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDsB,oBAAc,CAA2BtB,QAAQ,CAAC,gBAC/CuB,kBAAY,CAACvB,QAAQ,EAAE;QACrBwB,OAAO,EAAEA,MAAK;AACZxB,UAAAA,QAAQ,CAACyB,KAAK,CAACD,OAAO,IAAI;AAC1BR,UAAAA,OAAO,CAAEU,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF1B;AAAQ,KACR,CACN,eAAAoB,cAAA,CAACO,uBAAe,EAAA;AACd,MAAA,YAAA,EAAYpB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGoB,SAAU;AAC3Db,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL9B,MAAAA,SAAS,EAAE+B,SAAI,CAAC,uBAAuB,EAAE/B,SAAS,CAAE;AACpDK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJe,cAAA,CAACa,aAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
package/build/popover/Popover.mjs CHANGED
@@ -63,7 +63,7 @@ function Popover({
63
63
  onClose?.();
64
64
  };
65
65
  return /*#__PURE__*/jsxs("span", {
66
- className: clsx('np-popover', className),
66
+ className: "np-popover",
67
67
  children: [/*#__PURE__*/jsx("span", {
68
68
  ref: anchorReference,
69
69
  className: "d-inline-block",
@@ -80,7 +80,7 @@ function Popover({
80
80
  anchorRef: anchorReference,
81
81
  position: resolvedPlacement,
82
82
  arrow: true,
83
- className: "np-popover__container",
83
+ className: clsx('np-popover__container', className),
84
84
  onClose: handleOnClose,
85
85
  children: /*#__PURE__*/jsxs("div", {
86
86
  className: "np-popover__content np-text-default-body",
package/build/popover/Popover.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,QAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,iBAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,IAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAEmB,IAAI,CAAC,YAAY,EAAEnB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBAC7CqB,GAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDuB,cAAc,CAA2BvB,QAAQ,CAAC,gBAC/CwB,YAAY,CAACxB,QAAQ,EAAE;QACrByB,OAAO,EAAEA,MAAK;AACZzB,UAAAA,QAAQ,CAAC0B,KAAK,CAACD,OAAO,IAAI;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF3B;AAAQ,KACR,CACN,eAAAqB,GAAA,CAACO,eAAe,EAAA;AACd,MAAA,YAAA,EAAYrB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGqB,SAAU;AAC3Dd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,SAAS,EAAEjB,eAAgB;AAC3BkB,MAAAA,QAAQ,EAAErB,iBAAkB;MAC5BsB,KAAK,EAAA,IAAA;AACL/B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,IAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJgB,GAAA,CAACY,KAAK,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className=\"np-popover\">\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className={clsx('np-popover__container', className)}\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,QAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,iBAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,IAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAC,YAAY;AAAAD,IAAAA,QAAA,gBAC1BoB,GAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAER,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDsB,cAAc,CAA2BtB,QAAQ,CAAC,gBAC/CuB,YAAY,CAACvB,QAAQ,EAAE;QACrBwB,OAAO,EAAEA,MAAK;AACZxB,UAAAA,QAAQ,CAACyB,KAAK,CAACD,OAAO,IAAI;AAC1BR,UAAAA,OAAO,CAAEU,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF1B;AAAQ,KACR,CACN,eAAAoB,GAAA,CAACO,eAAe,EAAA;AACd,MAAA,YAAA,EAAYpB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGoB,SAAU;AAC3Db,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL9B,MAAAA,SAAS,EAAE+B,IAAI,CAAC,uBAAuB,EAAE/B,SAAS,CAAE;AACpDK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,IAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJe,GAAA,CAACa,KAAK,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
package/build/select/Select.js CHANGED
@@ -286,9 +286,6 @@ function Select({
286
286
  const handleCloseOptions = () => {
287
287
  setOpen(false);
288
288
  setKeyboardFocusedOptionIndex(-1);
289
- if (dropdownButtonReference.current) {
290
- dropdownButtonReference.current.focus();
291
- }
292
289
  };
293
290
  function createSelectHandlerForOption(option) {
294
291
  return event => {