@westpac/ui 0.47.1 → 0.49.0

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 (52) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/component-type.json +1 -1
  3. package/dist/components/accordion/accordion.component.js +4 -4
  4. package/dist/components/accordion/accordion.styles.d.ts +9 -0
  5. package/dist/components/accordion/accordion.styles.js +4 -1
  6. package/dist/components/accordion/components/accordion-item/accordion-item.component.d.ts +1 -1
  7. package/dist/components/accordion/components/accordion-item/accordion-item.component.js +7 -3
  8. package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts +15 -0
  9. package/dist/components/accordion/components/accordion-item/accordion-item.styles.js +27 -5
  10. package/dist/components/accordion/components/accordion-item/accordion-item.types.d.ts +5 -0
  11. package/dist/components/alert/alert.styles.js +1 -1
  12. package/dist/components/button-dropdown/button-dropdown.component.d.ts +1 -1
  13. package/dist/components/button-dropdown/button-dropdown.component.js +3 -2
  14. package/dist/components/button-dropdown/button-dropdown.types.d.ts +2 -1
  15. package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.js +0 -1
  16. package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.styles.js +1 -1
  17. package/dist/components/field/field.component.js +1 -1
  18. package/dist/components/header/header.component.d.ts +1 -1
  19. package/dist/components/header/header.component.js +6 -2
  20. package/dist/components/header/header.types.d.ts +11 -1
  21. package/dist/components/input-group/input-group.component.d.ts +1 -1
  22. package/dist/components/input-group/input-group.component.js +9 -3
  23. package/dist/components/input-group/input-group.styles.js +1 -1
  24. package/dist/components/input-group/input-group.types.d.ts +16 -0
  25. package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js +3 -2
  26. package/dist/components/modal/components/modal-backdrop/modal-backdrop.styles.js +1 -1
  27. package/dist/components/modal/modal.component.d.ts +1 -1
  28. package/dist/components/modal/modal.component.js +2 -1
  29. package/dist/components/modal/modal.types.d.ts +4 -0
  30. package/dist/css/westpac-ui.css +94 -43
  31. package/dist/css/westpac-ui.min.css +94 -43
  32. package/package.json +3 -3
  33. package/src/components/accordion/accordion.component.tsx +3 -3
  34. package/src/components/accordion/accordion.styles.ts +4 -1
  35. package/src/components/accordion/components/accordion-item/accordion-item.component.tsx +12 -2
  36. package/src/components/accordion/components/accordion-item/accordion-item.styles.ts +15 -6
  37. package/src/components/accordion/components/accordion-item/accordion-item.types.ts +6 -0
  38. package/src/components/alert/alert.styles.ts +1 -1
  39. package/src/components/button-dropdown/button-dropdown.component.tsx +2 -0
  40. package/src/components/button-dropdown/button-dropdown.types.ts +3 -1
  41. package/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx +1 -1
  42. package/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.styles.ts +1 -1
  43. package/src/components/field/field.component.tsx +5 -3
  44. package/src/components/header/header.component.tsx +4 -2
  45. package/src/components/header/header.types.ts +11 -1
  46. package/src/components/input-group/input-group.component.tsx +9 -3
  47. package/src/components/input-group/input-group.styles.ts +1 -1
  48. package/src/components/input-group/input-group.types.ts +16 -0
  49. package/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx +2 -3
  50. package/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts +1 -1
  51. package/src/components/modal/modal.component.tsx +12 -2
  52. package/src/components/modal/modal.types.ts +4 -0
package/dist/css/westpac-ui.css CHANGED
@@ -3356,9 +3356,6 @@ body {
3356
3356
  .z-10 {
3357
3357
  z-index: 10;
3358
3358
  }
3359
- .z-50 {
3360
- z-index: 50;
3361
- }
3362
3359
  .z-\[999\] {
3363
3360
  z-index: 999;
3364
3361
  }
@@ -3496,6 +3493,10 @@ body {
3496
3493
  margin-top: 0rem;
3497
3494
  margin-bottom: 0rem;
3498
3495
  }
3496
+ .my-0\.5 {
3497
+ margin-top: 0.1875rem;
3498
+ margin-bottom: 0.1875rem;
3499
+ }
3499
3500
  .my-1 {
3500
3501
  margin-top: 0.375rem;
3501
3502
  margin-bottom: 0.375rem;
@@ -3593,9 +3594,6 @@ body {
3593
3594
  .mt-0 {
3594
3595
  margin-top: 0rem;
3595
3596
  }
3596
- .mt-0\.5 {
3597
- margin-top: 0.1875rem;
3598
- }
3599
3597
  .mt-1 {
3600
3598
  margin-top: 0.375rem;
3601
3599
  }
@@ -3620,6 +3618,9 @@ body {
3620
3618
  .mt-\[0\.875rem\] {
3621
3619
  margin-top: 0.875rem;
3622
3620
  }
3621
+ .mt-\[1px\] {
3622
+ margin-top: 1px;
3623
+ }
3623
3624
  .mt-\[200px\] {
3624
3625
  margin-top: 200px;
3625
3626
  }
@@ -4655,10 +4656,6 @@ body {
4655
4656
  --tw-border-opacity: 1;
4656
4657
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
4657
4658
  }
4658
- .border-l-border {
4659
- --tw-border-opacity: 1;
4660
- border-left-color: rgba(var(--colors-border), var(--tw-border-opacity, 1));
4661
- }
4662
4659
  .border-l-hero {
4663
4660
  --tw-border-opacity: 1;
4664
4661
  border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity, 1));
@@ -6287,9 +6284,9 @@ body {
6287
6284
  --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
6288
6285
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
6289
6286
  }
6290
- .shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
6291
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
6292
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
6287
+ .shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
6288
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
6289
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
6293
6290
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
6294
6291
  }
6295
6292
  .shadow-lg {
@@ -8190,10 +8187,17 @@ body {
8190
8187
  border-top-left-radius: 0.1875rem;
8191
8188
  border-bottom-left-radius: 0.1875rem;
8192
8189
  }
8190
+ .group:first-child .group-first\:rounded-t-sm {
8191
+ border-top-left-radius: 0.125rem;
8192
+ border-top-right-radius: 0.125rem;
8193
+ }
8193
8194
  .group\/add-on-before:first-child .group-first\/add-on-before\:\!border-x {
8194
8195
  border-left-width: 1px !important;
8195
8196
  border-right-width: 1px !important;
8196
8197
  }
8198
+ .group:first-child .group-first\:border-t-0 {
8199
+ border-top-width: 0px;
8200
+ }
8197
8201
  .group\/panel:first-child .group-first\/panel\:px-4 {
8198
8202
  padding-left: 1.5rem;
8199
8203
  padding-right: 1.5rem;
@@ -8201,6 +8205,9 @@ body {
8201
8205
  .group\/panel:first-child .group-first\/panel\:pt-4 {
8202
8206
  padding-top: 1.5rem;
8203
8207
  }
8208
+ .group:last-child .group-last\:rounded-none {
8209
+ border-radius: 0px;
8210
+ }
8204
8211
  .group\/add-on-after:last-child .group-last\/add-on-after\:\!rounded-r {
8205
8212
  border-top-right-radius: 0.1875rem !important;
8206
8213
  border-bottom-right-radius: 0.1875rem !important;
@@ -8213,6 +8220,10 @@ body {
8213
8220
  border-top-right-radius: 0.1875rem;
8214
8221
  border-bottom-right-radius: 0.1875rem;
8215
8222
  }
8223
+ .group:last-child .group-last\:rounded-b-sm {
8224
+ border-bottom-right-radius: 0.125rem;
8225
+ border-bottom-left-radius: 0.125rem;
8226
+ }
8216
8227
  .group\/add-on-after:last-child .group-last\/add-on-after\:\!border-x {
8217
8228
  border-left-width: 1px !important;
8218
8229
  border-right-width: 1px !important;
@@ -9014,9 +9025,6 @@ body {
9014
9025
  .xsl\:self-center {
9015
9026
  align-self: center;
9016
9027
  }
9017
- .xsl\:overflow-hidden {
9018
- overflow: hidden;
9019
- }
9020
9028
  .xsl\:truncate {
9021
9029
  overflow: hidden;
9022
9030
  text-overflow: ellipsis;
@@ -9111,6 +9119,9 @@ body {
9111
9119
  .xsl\:border-l-\[6px\] {
9112
9120
  border-left-width: 6px;
9113
9121
  }
9122
+ .xsl\:border-r {
9123
+ border-right-width: 1px;
9124
+ }
9114
9125
  .xsl\:border-r-0 {
9115
9126
  border-right-width: 0px;
9116
9127
  }
@@ -9543,9 +9554,9 @@ body {
9543
9554
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
9544
9555
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
9545
9556
  }
9546
- .xsl\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
9547
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
9548
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
9557
+ .xsl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
9558
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
9559
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
9549
9560
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
9550
9561
  }
9551
9562
  .xsl\:shadow-md {
@@ -9838,6 +9849,14 @@ body {
9838
9849
  --tw-bg-opacity: 1;
9839
9850
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
9840
9851
  }
9852
+ .group:first-child .xsl\:group-first\:rounded-t-sm {
9853
+ border-top-left-radius: 0.125rem;
9854
+ border-top-right-radius: 0.125rem;
9855
+ }
9856
+ .group:last-child .xsl\:group-last\:rounded-b-sm {
9857
+ border-bottom-right-radius: 0.125rem;
9858
+ border-bottom-left-radius: 0.125rem;
9859
+ }
9841
9860
  @media (hover: hover) and (pointer: fine) {
9842
9861
  .group\/dualaction:hover .xsl\:group-hover\/dualaction\:text-primary {
9843
9862
  --tw-text-opacity: 1;
@@ -10549,9 +10568,6 @@ body {
10549
10568
  .sm\:self-center {
10550
10569
  align-self: center;
10551
10570
  }
10552
- .sm\:overflow-hidden {
10553
- overflow: hidden;
10554
- }
10555
10571
  .sm\:truncate {
10556
10572
  overflow: hidden;
10557
10573
  text-overflow: ellipsis;
@@ -10646,6 +10662,9 @@ body {
10646
10662
  .sm\:border-l-\[6px\] {
10647
10663
  border-left-width: 6px;
10648
10664
  }
10665
+ .sm\:border-r {
10666
+ border-right-width: 1px;
10667
+ }
10649
10668
  .sm\:border-r-0 {
10650
10669
  border-right-width: 0px;
10651
10670
  }
@@ -11101,9 +11120,9 @@ body {
11101
11120
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
11102
11121
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
11103
11122
  }
11104
- .sm\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
11105
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
11106
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
11123
+ .sm\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
11124
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
11125
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
11107
11126
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
11108
11127
  }
11109
11128
  .sm\:shadow-md {
@@ -11396,6 +11415,14 @@ body {
11396
11415
  --tw-bg-opacity: 1;
11397
11416
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
11398
11417
  }
11418
+ .group:first-child .sm\:group-first\:rounded-t-sm {
11419
+ border-top-left-radius: 0.125rem;
11420
+ border-top-right-radius: 0.125rem;
11421
+ }
11422
+ .group:last-child .sm\:group-last\:rounded-b-sm {
11423
+ border-bottom-right-radius: 0.125rem;
11424
+ border-bottom-left-radius: 0.125rem;
11425
+ }
11399
11426
  @media (hover: hover) and (pointer: fine) {
11400
11427
  .group\/checkbox-option:hover .sm\:group-hover\/checkbox-option\:translate-x-1 {
11401
11428
  --tw-translate-x: 0.375rem;
@@ -12178,9 +12205,6 @@ body {
12178
12205
  .md\:self-center {
12179
12206
  align-self: center;
12180
12207
  }
12181
- .md\:overflow-hidden {
12182
- overflow: hidden;
12183
- }
12184
12208
  .md\:truncate {
12185
12209
  overflow: hidden;
12186
12210
  text-overflow: ellipsis;
@@ -12278,6 +12302,9 @@ body {
12278
12302
  .md\:border-l-\[6px\] {
12279
12303
  border-left-width: 6px;
12280
12304
  }
12305
+ .md\:border-r {
12306
+ border-right-width: 1px;
12307
+ }
12281
12308
  .md\:border-r-0 {
12282
12309
  border-right-width: 0px;
12283
12310
  }
@@ -12741,9 +12768,9 @@ body {
12741
12768
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
12742
12769
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
12743
12770
  }
12744
- .md\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
12745
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
12746
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
12771
+ .md\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
12772
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
12773
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
12747
12774
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
12748
12775
  }
12749
12776
  .md\:shadow-md {
@@ -13036,6 +13063,14 @@ body {
13036
13063
  --tw-bg-opacity: 1;
13037
13064
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
13038
13065
  }
13066
+ .group:first-child .md\:group-first\:rounded-t-sm {
13067
+ border-top-left-radius: 0.125rem;
13068
+ border-top-right-radius: 0.125rem;
13069
+ }
13070
+ .group:last-child .md\:group-last\:rounded-b-sm {
13071
+ border-bottom-right-radius: 0.125rem;
13072
+ border-bottom-left-radius: 0.125rem;
13073
+ }
13039
13074
  @media (hover: hover) and (pointer: fine) {
13040
13075
  .group\/dualaction:hover .md\:group-hover\/dualaction\:text-primary {
13041
13076
  --tw-text-opacity: 1;
@@ -13800,9 +13835,6 @@ body {
13800
13835
  .lg\:self-center {
13801
13836
  align-self: center;
13802
13837
  }
13803
- .lg\:overflow-hidden {
13804
- overflow: hidden;
13805
- }
13806
13838
  .lg\:truncate {
13807
13839
  overflow: hidden;
13808
13840
  text-overflow: ellipsis;
@@ -13897,6 +13929,9 @@ body {
13897
13929
  .lg\:border-l-\[6px\] {
13898
13930
  border-left-width: 6px;
13899
13931
  }
13932
+ .lg\:border-r {
13933
+ border-right-width: 1px;
13934
+ }
13900
13935
  .lg\:border-r-0 {
13901
13936
  border-right-width: 0px;
13902
13937
  }
@@ -14341,9 +14376,9 @@ body {
14341
14376
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
14342
14377
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
14343
14378
  }
14344
- .lg\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
14345
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
14346
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
14379
+ .lg\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
14380
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
14381
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
14347
14382
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
14348
14383
  }
14349
14384
  .lg\:shadow-md {
@@ -14636,6 +14671,14 @@ body {
14636
14671
  --tw-bg-opacity: 1;
14637
14672
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
14638
14673
  }
14674
+ .group:first-child .lg\:group-first\:rounded-t-sm {
14675
+ border-top-left-radius: 0.125rem;
14676
+ border-top-right-radius: 0.125rem;
14677
+ }
14678
+ .group:last-child .lg\:group-last\:rounded-b-sm {
14679
+ border-bottom-right-radius: 0.125rem;
14680
+ border-bottom-left-radius: 0.125rem;
14681
+ }
14639
14682
  @media (hover: hover) and (pointer: fine) {
14640
14683
  .group\/dualaction:hover .lg\:group-hover\/dualaction\:text-primary {
14641
14684
  --tw-text-opacity: 1;
@@ -15346,9 +15389,6 @@ body {
15346
15389
  .xl\:self-center {
15347
15390
  align-self: center;
15348
15391
  }
15349
- .xl\:overflow-hidden {
15350
- overflow: hidden;
15351
- }
15352
15392
  .xl\:truncate {
15353
15393
  overflow: hidden;
15354
15394
  text-overflow: ellipsis;
@@ -15443,6 +15483,9 @@ body {
15443
15483
  .xl\:border-l-\[6px\] {
15444
15484
  border-left-width: 6px;
15445
15485
  }
15486
+ .xl\:border-r {
15487
+ border-right-width: 1px;
15488
+ }
15446
15489
  .xl\:border-r-0 {
15447
15490
  border-right-width: 0px;
15448
15491
  }
@@ -15869,9 +15912,9 @@ body {
15869
15912
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
15870
15913
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
15871
15914
  }
15872
- .xl\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
15873
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
15874
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
15915
+ .xl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
15916
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
15917
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
15875
15918
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
15876
15919
  }
15877
15920
  .xl\:shadow-md {
@@ -16164,6 +16207,14 @@ body {
16164
16207
  --tw-bg-opacity: 1;
16165
16208
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
16166
16209
  }
16210
+ .group:first-child .xl\:group-first\:rounded-t-sm {
16211
+ border-top-left-radius: 0.125rem;
16212
+ border-top-right-radius: 0.125rem;
16213
+ }
16214
+ .group:last-child .xl\:group-last\:rounded-b-sm {
16215
+ border-bottom-right-radius: 0.125rem;
16216
+ border-bottom-left-radius: 0.125rem;
16217
+ }
16167
16218
  @media (hover: hover) and (pointer: fine) {
16168
16219
  .group\/dualaction:hover .xl\:group-hover\/dualaction\:text-primary {
16169
16220
  --tw-text-opacity: 1;
package/dist/css/westpac-ui.min.css CHANGED
@@ -3356,9 +3356,6 @@ body {
3356
3356
  .z-10 {
3357
3357
  z-index: 10;
3358
3358
  }
3359
- .z-50 {
3360
- z-index: 50;
3361
- }
3362
3359
  .z-\[999\] {
3363
3360
  z-index: 999;
3364
3361
  }
@@ -3496,6 +3493,10 @@ body {
3496
3493
  margin-top: 0rem;
3497
3494
  margin-bottom: 0rem;
3498
3495
  }
3496
+ .my-0\.5 {
3497
+ margin-top: 0.1875rem;
3498
+ margin-bottom: 0.1875rem;
3499
+ }
3499
3500
  .my-1 {
3500
3501
  margin-top: 0.375rem;
3501
3502
  margin-bottom: 0.375rem;
@@ -3593,9 +3594,6 @@ body {
3593
3594
  .mt-0 {
3594
3595
  margin-top: 0rem;
3595
3596
  }
3596
- .mt-0\.5 {
3597
- margin-top: 0.1875rem;
3598
- }
3599
3597
  .mt-1 {
3600
3598
  margin-top: 0.375rem;
3601
3599
  }
@@ -3620,6 +3618,9 @@ body {
3620
3618
  .mt-\[0\.875rem\] {
3621
3619
  margin-top: 0.875rem;
3622
3620
  }
3621
+ .mt-\[1px\] {
3622
+ margin-top: 1px;
3623
+ }
3623
3624
  .mt-\[200px\] {
3624
3625
  margin-top: 200px;
3625
3626
  }
@@ -4655,10 +4656,6 @@ body {
4655
4656
  --tw-border-opacity: 1;
4656
4657
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
4657
4658
  }
4658
- .border-l-border {
4659
- --tw-border-opacity: 1;
4660
- border-left-color: rgba(var(--colors-border), var(--tw-border-opacity, 1));
4661
- }
4662
4659
  .border-l-hero {
4663
4660
  --tw-border-opacity: 1;
4664
4661
  border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity, 1));
@@ -6287,9 +6284,9 @@ body {
6287
6284
  --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
6288
6285
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
6289
6286
  }
6290
- .shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
6291
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
6292
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
6287
+ .shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
6288
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
6289
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
6293
6290
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
6294
6291
  }
6295
6292
  .shadow-lg {
@@ -8190,10 +8187,17 @@ body {
8190
8187
  border-top-left-radius: 0.1875rem;
8191
8188
  border-bottom-left-radius: 0.1875rem;
8192
8189
  }
8190
+ .group:first-child .group-first\:rounded-t-sm {
8191
+ border-top-left-radius: 0.125rem;
8192
+ border-top-right-radius: 0.125rem;
8193
+ }
8193
8194
  .group\/add-on-before:first-child .group-first\/add-on-before\:\!border-x {
8194
8195
  border-left-width: 1px !important;
8195
8196
  border-right-width: 1px !important;
8196
8197
  }
8198
+ .group:first-child .group-first\:border-t-0 {
8199
+ border-top-width: 0px;
8200
+ }
8197
8201
  .group\/panel:first-child .group-first\/panel\:px-4 {
8198
8202
  padding-left: 1.5rem;
8199
8203
  padding-right: 1.5rem;
@@ -8201,6 +8205,9 @@ body {
8201
8205
  .group\/panel:first-child .group-first\/panel\:pt-4 {
8202
8206
  padding-top: 1.5rem;
8203
8207
  }
8208
+ .group:last-child .group-last\:rounded-none {
8209
+ border-radius: 0px;
8210
+ }
8204
8211
  .group\/add-on-after:last-child .group-last\/add-on-after\:\!rounded-r {
8205
8212
  border-top-right-radius: 0.1875rem !important;
8206
8213
  border-bottom-right-radius: 0.1875rem !important;
@@ -8213,6 +8220,10 @@ body {
8213
8220
  border-top-right-radius: 0.1875rem;
8214
8221
  border-bottom-right-radius: 0.1875rem;
8215
8222
  }
8223
+ .group:last-child .group-last\:rounded-b-sm {
8224
+ border-bottom-right-radius: 0.125rem;
8225
+ border-bottom-left-radius: 0.125rem;
8226
+ }
8216
8227
  .group\/add-on-after:last-child .group-last\/add-on-after\:\!border-x {
8217
8228
  border-left-width: 1px !important;
8218
8229
  border-right-width: 1px !important;
@@ -9014,9 +9025,6 @@ body {
9014
9025
  .xsl\:self-center {
9015
9026
  align-self: center;
9016
9027
  }
9017
- .xsl\:overflow-hidden {
9018
- overflow: hidden;
9019
- }
9020
9028
  .xsl\:truncate {
9021
9029
  overflow: hidden;
9022
9030
  text-overflow: ellipsis;
@@ -9111,6 +9119,9 @@ body {
9111
9119
  .xsl\:border-l-\[6px\] {
9112
9120
  border-left-width: 6px;
9113
9121
  }
9122
+ .xsl\:border-r {
9123
+ border-right-width: 1px;
9124
+ }
9114
9125
  .xsl\:border-r-0 {
9115
9126
  border-right-width: 0px;
9116
9127
  }
@@ -9543,9 +9554,9 @@ body {
9543
9554
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
9544
9555
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
9545
9556
  }
9546
- .xsl\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
9547
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
9548
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
9557
+ .xsl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
9558
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
9559
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
9549
9560
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
9550
9561
  }
9551
9562
  .xsl\:shadow-md {
@@ -9838,6 +9849,14 @@ body {
9838
9849
  --tw-bg-opacity: 1;
9839
9850
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
9840
9851
  }
9852
+ .group:first-child .xsl\:group-first\:rounded-t-sm {
9853
+ border-top-left-radius: 0.125rem;
9854
+ border-top-right-radius: 0.125rem;
9855
+ }
9856
+ .group:last-child .xsl\:group-last\:rounded-b-sm {
9857
+ border-bottom-right-radius: 0.125rem;
9858
+ border-bottom-left-radius: 0.125rem;
9859
+ }
9841
9860
  @media (hover: hover) and (pointer: fine) {
9842
9861
  .group\/dualaction:hover .xsl\:group-hover\/dualaction\:text-primary {
9843
9862
  --tw-text-opacity: 1;
@@ -10549,9 +10568,6 @@ body {
10549
10568
  .sm\:self-center {
10550
10569
  align-self: center;
10551
10570
  }
10552
- .sm\:overflow-hidden {
10553
- overflow: hidden;
10554
- }
10555
10571
  .sm\:truncate {
10556
10572
  overflow: hidden;
10557
10573
  text-overflow: ellipsis;
@@ -10646,6 +10662,9 @@ body {
10646
10662
  .sm\:border-l-\[6px\] {
10647
10663
  border-left-width: 6px;
10648
10664
  }
10665
+ .sm\:border-r {
10666
+ border-right-width: 1px;
10667
+ }
10649
10668
  .sm\:border-r-0 {
10650
10669
  border-right-width: 0px;
10651
10670
  }
@@ -11101,9 +11120,9 @@ body {
11101
11120
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
11102
11121
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
11103
11122
  }
11104
- .sm\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
11105
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
11106
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
11123
+ .sm\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
11124
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
11125
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
11107
11126
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
11108
11127
  }
11109
11128
  .sm\:shadow-md {
@@ -11396,6 +11415,14 @@ body {
11396
11415
  --tw-bg-opacity: 1;
11397
11416
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
11398
11417
  }
11418
+ .group:first-child .sm\:group-first\:rounded-t-sm {
11419
+ border-top-left-radius: 0.125rem;
11420
+ border-top-right-radius: 0.125rem;
11421
+ }
11422
+ .group:last-child .sm\:group-last\:rounded-b-sm {
11423
+ border-bottom-right-radius: 0.125rem;
11424
+ border-bottom-left-radius: 0.125rem;
11425
+ }
11399
11426
  @media (hover: hover) and (pointer: fine) {
11400
11427
  .group\/checkbox-option:hover .sm\:group-hover\/checkbox-option\:translate-x-1 {
11401
11428
  --tw-translate-x: 0.375rem;
@@ -12178,9 +12205,6 @@ body {
12178
12205
  .md\:self-center {
12179
12206
  align-self: center;
12180
12207
  }
12181
- .md\:overflow-hidden {
12182
- overflow: hidden;
12183
- }
12184
12208
  .md\:truncate {
12185
12209
  overflow: hidden;
12186
12210
  text-overflow: ellipsis;
@@ -12278,6 +12302,9 @@ body {
12278
12302
  .md\:border-l-\[6px\] {
12279
12303
  border-left-width: 6px;
12280
12304
  }
12305
+ .md\:border-r {
12306
+ border-right-width: 1px;
12307
+ }
12281
12308
  .md\:border-r-0 {
12282
12309
  border-right-width: 0px;
12283
12310
  }
@@ -12741,9 +12768,9 @@ body {
12741
12768
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
12742
12769
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
12743
12770
  }
12744
- .md\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
12745
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
12746
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
12771
+ .md\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
12772
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
12773
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
12747
12774
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
12748
12775
  }
12749
12776
  .md\:shadow-md {
@@ -13036,6 +13063,14 @@ body {
13036
13063
  --tw-bg-opacity: 1;
13037
13064
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
13038
13065
  }
13066
+ .group:first-child .md\:group-first\:rounded-t-sm {
13067
+ border-top-left-radius: 0.125rem;
13068
+ border-top-right-radius: 0.125rem;
13069
+ }
13070
+ .group:last-child .md\:group-last\:rounded-b-sm {
13071
+ border-bottom-right-radius: 0.125rem;
13072
+ border-bottom-left-radius: 0.125rem;
13073
+ }
13039
13074
  @media (hover: hover) and (pointer: fine) {
13040
13075
  .group\/dualaction:hover .md\:group-hover\/dualaction\:text-primary {
13041
13076
  --tw-text-opacity: 1;
@@ -13800,9 +13835,6 @@ body {
13800
13835
  .lg\:self-center {
13801
13836
  align-self: center;
13802
13837
  }
13803
- .lg\:overflow-hidden {
13804
- overflow: hidden;
13805
- }
13806
13838
  .lg\:truncate {
13807
13839
  overflow: hidden;
13808
13840
  text-overflow: ellipsis;
@@ -13897,6 +13929,9 @@ body {
13897
13929
  .lg\:border-l-\[6px\] {
13898
13930
  border-left-width: 6px;
13899
13931
  }
13932
+ .lg\:border-r {
13933
+ border-right-width: 1px;
13934
+ }
13900
13935
  .lg\:border-r-0 {
13901
13936
  border-right-width: 0px;
13902
13937
  }
@@ -14341,9 +14376,9 @@ body {
14341
14376
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
14342
14377
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
14343
14378
  }
14344
- .lg\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
14345
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
14346
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
14379
+ .lg\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
14380
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
14381
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
14347
14382
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
14348
14383
  }
14349
14384
  .lg\:shadow-md {
@@ -14636,6 +14671,14 @@ body {
14636
14671
  --tw-bg-opacity: 1;
14637
14672
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
14638
14673
  }
14674
+ .group:first-child .lg\:group-first\:rounded-t-sm {
14675
+ border-top-left-radius: 0.125rem;
14676
+ border-top-right-radius: 0.125rem;
14677
+ }
14678
+ .group:last-child .lg\:group-last\:rounded-b-sm {
14679
+ border-bottom-right-radius: 0.125rem;
14680
+ border-bottom-left-radius: 0.125rem;
14681
+ }
14639
14682
  @media (hover: hover) and (pointer: fine) {
14640
14683
  .group\/dualaction:hover .lg\:group-hover\/dualaction\:text-primary {
14641
14684
  --tw-text-opacity: 1;
@@ -15346,9 +15389,6 @@ body {
15346
15389
  .xl\:self-center {
15347
15390
  align-self: center;
15348
15391
  }
15349
- .xl\:overflow-hidden {
15350
- overflow: hidden;
15351
- }
15352
15392
  .xl\:truncate {
15353
15393
  overflow: hidden;
15354
15394
  text-overflow: ellipsis;
@@ -15443,6 +15483,9 @@ body {
15443
15483
  .xl\:border-l-\[6px\] {
15444
15484
  border-left-width: 6px;
15445
15485
  }
15486
+ .xl\:border-r {
15487
+ border-right-width: 1px;
15488
+ }
15446
15489
  .xl\:border-r-0 {
15447
15490
  border-right-width: 0px;
15448
15491
  }
@@ -15869,9 +15912,9 @@ body {
15869
15912
  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
15870
15913
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
15871
15914
  }
15872
- .xl\:shadow-\[inset_0_1px_0_var\(--tw-shadow-color\)\] {
15873
- --tw-shadow: inset 0 1px 0 var(--tw-shadow-color);
15874
- --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
15915
+ .xl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
15916
+ --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
15917
+ --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
15875
15918
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
15876
15919
  }
15877
15920
  .xl\:shadow-md {
@@ -16164,6 +16207,14 @@ body {
16164
16207
  --tw-bg-opacity: 1;
16165
16208
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
16166
16209
  }
16210
+ .group:first-child .xl\:group-first\:rounded-t-sm {
16211
+ border-top-left-radius: 0.125rem;
16212
+ border-top-right-radius: 0.125rem;
16213
+ }
16214
+ .group:last-child .xl\:group-last\:rounded-b-sm {
16215
+ border-bottom-right-radius: 0.125rem;
16216
+ border-bottom-left-radius: 0.125rem;
16217
+ }
16167
16218
  @media (hover: hover) and (pointer: fine) {
16168
16219
  .group\/dualaction:hover .xl\:group-hover\/dualaction\:text-primary {
16169
16220
  --tw-text-opacity: 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westpac/ui",
3
- "version": "0.47.1",
3
+ "version": "0.49.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "type": "module",
@@ -252,9 +252,9 @@
252
252
  "typescript": "^5.5.4",
253
253
  "vite": "^7.0.5",
254
254
  "vitest": "^3.2.4",
255
- "@westpac/eslint-config": "~1.0.1",
256
255
  "@westpac/test-config": "~0.0.0",
257
- "@westpac/ts-config": "~0.0.0"
256
+ "@westpac/ts-config": "~0.0.0",
257
+ "@westpac/eslint-config": "~1.0.1"
258
258
  },
259
259
  "dependencies": {
260
260
  "@duetds/date-picker": "~1.4.0",