@westpac/ui 0.4.0 → 0.5.0

package/dist/css/westpac-ui.min.css

@@ -2048,6 +2048,8 @@ video {
   margin: 0;
 }.m-1 {
   margin: 0.375rem;
+}.m-\[0_0_1\.875rem_1\.125rem\] {
+  margin: 0 0 1.875rem 1.125rem;
 }.-mx-1 {
   margin-left: -0.375rem;
   margin-right: -0.375rem;
@@ -2095,6 +2097,8 @@ video {
   margin-bottom: 0.5rem;
 }.mb-\[0\.9375rem\] {
   margin-bottom: 0.9375rem;
+}.mb-\[1\.125rem\] {
+  margin-bottom: 1.125rem;
 }.ml-1 {
   margin-left: 0.375rem;
 }.ml-\[0\.4em\] {
@@ -2163,6 +2167,8 @@ video {
   display: none;
 }.h-0 {
   height: 0;
+}.h-10 {
+  height: 3.75rem;
 }.h-13 {
   height: 4.875rem;
 }.h-15 {
@@ -2276,6 +2282,8 @@ video {
   width: 4.875rem;
 }.w-14 {
   width: 5.25rem;
+}.w-15 {
+  width: 5.625rem;
 }.w-2 {
   width: 0.75rem;
 }.w-23 {
@@ -2611,6 +2619,8 @@ video {
   border-top-width: 1px;
 }.border-t-0 {
   border-top-width: 0px;
+}.border-t-2 {
+  border-top-width: 2px;
 }.border-t-\[0\.125rem\] {
   border-top-width: 0.125rem;
 }.border-t-\[12px\] {
@@ -2826,6 +2836,8 @@ video {
   padding: 0.8125rem 1.125rem;
 }.p-\[0_1\.125rem_1\.875rem\] {
   padding: 0 1.125rem 1.875rem;
+}.p-\[0_1\.125rem_2\.625rem\] {
+  padding: 0 1.125rem 2.625rem;
 }.p-\[200px\] {
   padding: 200px;
 }.px-0 {
@@ -2952,6 +2964,10 @@ video {
   padding-top: 0.5625rem;
 }.pt-\[0\.5rem\] {
   padding-top: 0.5rem;
+}.pt-\[0\.625rem\] {
+  padding-top: 0.625rem;
+}.pt-\[0\.875rem\] {
+  padding-top: 0.875rem;
 }.text-left {
   text-align: left;
 }.text-center {
@@ -3094,6 +3110,10 @@ video {
   text-decoration-line: none;
 }.decoration-\[inherit\] {
   text-decoration-color: inherit;
+}.opacity-0 {
+  opacity: 0;
+}.opacity-100 {
+  opacity: 1;
 }.opacity-50 {
   opacity: 0.5;
 }.\!shadow-none {
@@ -3104,6 +3124,10 @@ video {
   --tw-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.175);
   --tw-shadow-colored: 0 0.375rem 0.75rem var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}.shadow-\[0_0_0_2px_inset\] {
+  --tw-shadow: 0 0 0 2px inset;
+  --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }.shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
   --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
   --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
@@ -3126,6 +3150,9 @@ video {
 }.shadow-black\/10 {
   --tw-shadow-color: rgb(0 0 0 / 0.1);
   --tw-shadow: var(--tw-shadow-colored);
+}.shadow-hero {
+  --tw-shadow-color: rgb(var(--colors-hero));
+  --tw-shadow: var(--tw-shadow-colored);
 }.outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4126,6 +4153,12 @@ video {
 }.group\/buttons:last-child .group-last\/buttons\:rounded-r {
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
+}.group\/checkbox-option:hover .group-hover\/checkbox-option\:translate-x-1 {
+  --tw-translate-x: 0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}.group\/radio-option:hover .group-hover\/radio-option\:translate-x-1 {
+  --tw-translate-x: 0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }.group:hover .group-hover\:text-link {
   --tw-text-opacity: 1;
   color: rgba(var(--colors-link), var(--tw-text-opacity));
@@ -4242,6 +4275,8 @@ video {
     grid-column-start: 8;
   }.xsl\:col-start-9 {
     grid-column-start: 9;
+  }.xsl\:m-\[0_0_1\.875rem_1\.125rem\] {
+    margin: 0 0 1.875rem 1.125rem;
   }.xsl\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -4478,6 +4513,8 @@ video {
     border-top-width: 1px;
   }.xsl\:border-t-0 {
     border-top-width: 0px;
+  }.xsl\:border-t-2 {
+    border-top-width: 2px;
   }.xsl\:border-t-\[0\.125rem\] {
     border-top-width: 0.125rem;
   }.xsl\:border-none {
@@ -4565,6 +4602,8 @@ video {
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }.xsl\:p-3 {
     padding: 1.125rem;
+  }.xsl\:p-\[0_1\.125rem_2\.625rem\] {
+    padding: 0 1.125rem 2.625rem;
   }.xsl\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -4619,6 +4658,10 @@ video {
     padding-top: 0.1875rem;
   }.xsl\:pt-\[0\.5625rem\] {
     padding-top: 0.5625rem;
+  }.xsl\:pt-\[0\.625rem\] {
+    padding-top: 0.625rem;
+  }.xsl\:pt-\[0\.875rem\] {
+    padding-top: 0.875rem;
   }.xsl\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.xsl\:font-bold {
@@ -4698,6 +4741,10 @@ video {
     text-decoration-line: underline;
   }.xsl\:opacity-50 {
     opacity: 0.5;
+  }.xsl\:shadow-\[0_0_0_2px_inset\] {
+    --tw-shadow: 0 0 0 2px inset;
+    --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }.xsl\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -4705,6 +4752,9 @@ video {
   }.xsl\:shadow-black\/10 {
     --tw-shadow-color: rgb(0 0 0 / 0.1);
     --tw-shadow: var(--tw-shadow-colored);
+  }.xsl\:shadow-hero {
+    --tw-shadow-color: rgb(var(--colors-hero));
+    --tw-shadow: var(--tw-shadow-colored);
   }.xsl\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4934,6 +4984,12 @@ video {
   }.xsl\:active\:bg-white:active {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.group\/checkbox-option:hover .xsl\:group-hover\/checkbox-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }.group\/radio-option:hover .xsl\:group-hover\/radio-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.group.input-field-inset-after .xsl\:group-\[\.input-field-inset-after\]\:pr-6 {
     padding-right: 2.25rem;
   }.group.input-field-inset-after .xsl\:group-\[\.input-field-inset-after\]\:pr-7 {
@@ -5026,6 +5082,8 @@ video {
     grid-column-start: 8;
   }.sm\:col-start-9 {
     grid-column-start: 9;
+  }.sm\:m-\[0_0_1\.875rem_1\.125rem\] {
+    margin: 0 0 1.875rem 1.125rem;
   }.sm\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -5272,6 +5330,8 @@ video {
     border-top-width: 1px;
   }.sm\:border-t-0 {
     border-top-width: 0px;
+  }.sm\:border-t-2 {
+    border-top-width: 2px;
   }.sm\:border-t-\[0\.125rem\] {
     border-top-width: 0.125rem;
   }.sm\:border-none {
@@ -5361,6 +5421,8 @@ video {
     padding: 1.125rem;
   }.sm\:p-4 {
     padding: 1.5rem;
+  }.sm\:p-\[0_1\.125rem_2\.625rem\] {
+    padding: 0 1.125rem 2.625rem;
   }.sm\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -5416,6 +5478,10 @@ video {
     padding-top: 0.1875rem;
   }.sm\:pt-\[0\.5625rem\] {
     padding-top: 0.5625rem;
+  }.sm\:pt-\[0\.625rem\] {
+    padding-top: 0.625rem;
+  }.sm\:pt-\[0\.875rem\] {
+    padding-top: 0.875rem;
   }.sm\:align-middle {
     vertical-align: middle;
   }@media (min-width: 768px) {.sm\:sm\:align-middle {
@@ -5500,6 +5566,10 @@ video {
     text-decoration-line: underline;
   }.sm\:opacity-50 {
     opacity: 0.5;
+  }.sm\:shadow-\[0_0_0_2px_inset\] {
+    --tw-shadow: 0 0 0 2px inset;
+    --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }.sm\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5507,6 +5577,9 @@ video {
   }.sm\:shadow-black\/10 {
     --tw-shadow-color: rgb(0 0 0 / 0.1);
     --tw-shadow: var(--tw-shadow-colored);
+  }.sm\:shadow-hero {
+    --tw-shadow-color: rgb(var(--colors-hero));
+    --tw-shadow: var(--tw-shadow-colored);
   }.sm\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -5736,6 +5809,12 @@ video {
   }.sm\:active\:bg-white:active {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.group\/checkbox-option:hover .sm\:group-hover\/checkbox-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }.group\/radio-option:hover .sm\:group-hover\/radio-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.group.input-field-inset-after .sm\:group-\[\.input-field-inset-after\]\:pr-6 {
     padding-right: 2.25rem;
   }.group.input-field-inset-after .sm\:group-\[\.input-field-inset-after\]\:pr-7 {
@@ -5836,6 +5915,8 @@ video {
     grid-column-start: 8;
   }.md\:col-start-9 {
     grid-column-start: 9;
+  }.md\:m-\[0_0_1\.875rem_1\.125rem\] {
+    margin: 0 0 1.875rem 1.125rem;
   }.md\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -5996,6 +6077,8 @@ video {
     justify-content: center;
   }.md\:justify-between {
     justify-content: space-between;
+  }.md\:gap-3 {
+    gap: 1.125rem;
   }.md\:gap-4 {
     gap: 1.5rem;
   }.md\:gap-\[2px\] {
@@ -6075,6 +6158,8 @@ video {
     border-top-width: 1px;
   }.md\:border-t-0 {
     border-top-width: 0px;
+  }.md\:border-t-2 {
+    border-top-width: 2px;
   }.md\:border-t-\[0\.125rem\] {
     border-top-width: 0.125rem;
   }.md\:border-none {
@@ -6162,6 +6247,8 @@ video {
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }.md\:p-3 {
     padding: 1.125rem;
+  }.md\:p-\[0_1\.125rem_2\.625rem\] {
+    padding: 0 1.125rem 2.625rem;
   }.md\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -6217,6 +6304,10 @@ video {
     padding-top: 0.1875rem;
   }.md\:pt-\[0\.5625rem\] {
     padding-top: 0.5625rem;
+  }.md\:pt-\[0\.625rem\] {
+    padding-top: 0.625rem;
+  }.md\:pt-\[0\.875rem\] {
+    padding-top: 0.875rem;
   }.md\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.md\:font-bold {
@@ -6296,6 +6387,10 @@ video {
     text-decoration-line: underline;
   }.md\:opacity-50 {
     opacity: 0.5;
+  }.md\:shadow-\[0_0_0_2px_inset\] {
+    --tw-shadow: 0 0 0 2px inset;
+    --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }.md\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -6303,6 +6398,9 @@ video {
   }.md\:shadow-black\/10 {
     --tw-shadow-color: rgb(0 0 0 / 0.1);
     --tw-shadow: var(--tw-shadow-colored);
+  }.md\:shadow-hero {
+    --tw-shadow-color: rgb(var(--colors-hero));
+    --tw-shadow: var(--tw-shadow-colored);
   }.md\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -6532,6 +6630,12 @@ video {
   }.md\:active\:bg-white:active {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.group\/checkbox-option:hover .md\:group-hover\/checkbox-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }.group\/radio-option:hover .md\:group-hover\/radio-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.group.input-field-inset-after .md\:group-\[\.input-field-inset-after\]\:pr-6 {
     padding-right: 2.25rem;
   }.group.input-field-inset-after .md\:group-\[\.input-field-inset-after\]\:pr-7 {
@@ -6639,6 +6743,8 @@ video {
     grid-column-start: 8;
   }.lg\:col-start-9 {
     grid-column-start: 9;
+  }.lg\:m-\[0_0_1\.875rem_1\.125rem\] {
+    margin: 0 0 1.875rem 1.125rem;
   }.lg\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -6878,6 +6984,8 @@ video {
     border-top-width: 1px;
   }.lg\:border-t-0 {
     border-top-width: 0px;
+  }.lg\:border-t-2 {
+    border-top-width: 2px;
   }.lg\:border-t-\[0\.125rem\] {
     border-top-width: 0.125rem;
   }.lg\:border-none {
@@ -6965,6 +7073,8 @@ video {
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }.lg\:p-3 {
     padding: 1.125rem;
+  }.lg\:p-\[0_1\.125rem_2\.625rem\] {
+    padding: 0 1.125rem 2.625rem;
   }.lg\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -7020,6 +7130,10 @@ video {
     padding-top: 0.1875rem;
   }.lg\:pt-\[0\.5625rem\] {
     padding-top: 0.5625rem;
+  }.lg\:pt-\[0\.625rem\] {
+    padding-top: 0.625rem;
+  }.lg\:pt-\[0\.875rem\] {
+    padding-top: 0.875rem;
   }.lg\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.lg\:font-bold {
@@ -7099,6 +7213,10 @@ video {
     text-decoration-line: underline;
   }.lg\:opacity-50 {
     opacity: 0.5;
+  }.lg\:shadow-\[0_0_0_2px_inset\] {
+    --tw-shadow: 0 0 0 2px inset;
+    --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }.lg\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -7106,6 +7224,9 @@ video {
   }.lg\:shadow-black\/10 {
     --tw-shadow-color: rgb(0 0 0 / 0.1);
     --tw-shadow: var(--tw-shadow-colored);
+  }.lg\:shadow-hero {
+    --tw-shadow-color: rgb(var(--colors-hero));
+    --tw-shadow: var(--tw-shadow-colored);
   }.lg\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -7335,6 +7456,12 @@ video {
   }.lg\:active\:bg-white:active {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.group\/checkbox-option:hover .lg\:group-hover\/checkbox-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }.group\/radio-option:hover .lg\:group-hover\/radio-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.group.input-field-inset-after .lg\:group-\[\.input-field-inset-after\]\:pr-6 {
     padding-right: 2.25rem;
   }.group.input-field-inset-after .lg\:group-\[\.input-field-inset-after\]\:pr-7 {
@@ -7433,6 +7560,8 @@ video {
     grid-column-start: 8;
   }.xl\:col-start-9 {
     grid-column-start: 9;
+  }.xl\:m-\[0_0_1\.875rem_1\.125rem\] {
+    margin: 0 0 1.875rem 1.125rem;
   }.xl\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -7667,6 +7796,8 @@ video {
     border-top-width: 1px;
   }.xl\:border-t-0 {
     border-top-width: 0px;
+  }.xl\:border-t-2 {
+    border-top-width: 2px;
   }.xl\:border-t-\[0\.125rem\] {
     border-top-width: 0.125rem;
   }.xl\:border-none {
@@ -7754,6 +7885,8 @@ video {
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }.xl\:p-3 {
     padding: 1.125rem;
+  }.xl\:p-\[0_1\.125rem_2\.625rem\] {
+    padding: 0 1.125rem 2.625rem;
   }.xl\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -7803,6 +7936,10 @@ video {
     padding-top: 0.1875rem;
   }.xl\:pt-\[0\.5625rem\] {
     padding-top: 0.5625rem;
+  }.xl\:pt-\[0\.625rem\] {
+    padding-top: 0.625rem;
+  }.xl\:pt-\[0\.875rem\] {
+    padding-top: 0.875rem;
   }.xl\:text-\[0\.75rem\] {
     font-size: 0.75rem;
   }.xl\:font-bold {
@@ -7882,6 +8019,10 @@ video {
     text-decoration-line: underline;
   }.xl\:opacity-50 {
     opacity: 0.5;
+  }.xl\:shadow-\[0_0_0_2px_inset\] {
+    --tw-shadow: 0 0 0 2px inset;
+    --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }.xl\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -7889,6 +8030,9 @@ video {
   }.xl\:shadow-black\/10 {
     --tw-shadow-color: rgb(0 0 0 / 0.1);
     --tw-shadow: var(--tw-shadow-colored);
+  }.xl\:shadow-hero {
+    --tw-shadow-color: rgb(var(--colors-hero));
+    --tw-shadow: var(--tw-shadow-colored);
   }.xl\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -8118,6 +8262,12 @@ video {
   }.xl\:active\:bg-white:active {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }.group\/checkbox-option:hover .xl\:group-hover\/checkbox-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }.group\/radio-option:hover .xl\:group-hover\/radio-option\:translate-x-1 {
+    --tw-translate-x: 0.375rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }.group.input-field-inset-after .xl\:group-\[\.input-field-inset-after\]\:pr-6 {
     padding-right: 2.25rem;
   }.group.input-field-inset-after .xl\:group-\[\.input-field-inset-after\]\:pr-7 {

package/dist/utils/generateId.d.ts

@@ -0,0 +1 @@
+export declare const generateID: () => string;

package/dist/utils/generateId.js

@@ -0,0 +1,6 @@
+export const generateID = ()=>{
+    const url = URL.createObjectURL(new Blob());
+    const [id] = url.toString().split('/').reverse();
+    URL.revokeObjectURL(url);
+    return id.replace('blob:nodedata:', '');
+};

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { generateID } from './generateId.js';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { generateID } from './generateId.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -107,9 +107,15 @@
     "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
+  "overrides": {
+    "react-aria": {
+      "@types/react": "$@types/react"
+    }
+  },
   "peerDependencies": {
     "@duetds/date-picker": "~1.4.0",
     "colorjs.io": "~0.4.5",
+    "react": ">=18.2.0",
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0"

package/src/components/alert/alert.component.tsx

@@ -59,7 +59,7 @@ export function Alert({
           >
             <Tag className={styles.base({ className })} {...props}>
               <span className={styles.icon()}>
-                <Icon size={{ initial: 'small', xsl: 'medium' }} />
+                <Icon size={{ initial: 'small', xsl: 'medium' }} look="outlined" />
               </span>
               <div className={styles.body()}>
                 {!!heading && <HeadingTag className={styles.heading()}>{heading}</HeadingTag>}

package/src/components/alert/alert.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 relative mb-4 p-3 xsl:flex',
+      base: 'typography-body-10 relative mb-4 xsl:flex',
       icon: 'float-left mr-1 flex-none xsl:mr-2',
       body: 'relative flex-1 xsl:top-[0.125rem] [&_a]:underline',
       heading: 'typography-body-9 mb-2 font-bold',
@@ -29,7 +29,7 @@ export const styles = tv(
       },
       mode: {
         box: {
-          base: 'border-y',
+          base: 'border-y p-3',
         },
         text: {
           base: 'bg-[transparent]',

package/src/components/compacta/compacta.component.tsx

@@ -1,12 +1,13 @@
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
 import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, IconProps, RemoveCircleIcon } from '../icon/index.js';
-import { Button, VisuallyHidden } from '../index.js';
+import { VisuallyHidden } from '../index.js';
 
 import { styles as compactaStyles } from './compacta.styles.js';
 import { type CompactaProps } from './compacta.types.js';
-import { generateID } from './compacta.utils.js';
 
 interface Action {
   id?: string;
@@ -97,7 +98,7 @@ export function Compacta({
         setTimeout(() => {
           headingRefs?.current[action.index]?.focus();
         }, 1);
-        setStatus(`Item ${action.index + 1} added`);
+        setStatus(`Item added`);
       }
 
       if (action.type === 'remove') {

package/src/components/flexi-cell/flexi-cell.component.tsx

@@ -26,11 +26,12 @@ function FlexiCellBase(
     withArrow,
     withBorder = false,
     href,
+    withHoverEffect = false,
     ...props
   }: FlexiCellProps,
   ref: any,
 ) {
-  const styles = flexiCellStyles({ className, withBorder, isLink: !!href });
+  const styles = flexiCellStyles({ className, withBorder, isLink: !!href || withHoverEffect });
   return (
     <Tag {...({ ref } as any)} className={styles.base({ className })} href={href} {...props}>
       {badge && <div className={styles.badge()}>{badge}</div>}

package/src/components/flexi-cell/flexi-cell.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative flex gap-2 bg-white px-2 py-3 transition-colors focus:focus-outline',
+      base: 'relative flex gap-2 bg-white p-2 transition-colors focus:focus-outline md:p-3',
       bodyWrapper: 'flex flex-1 flex-col',
       badge: 'absolute right-0 top-0',
     },

package/src/components/flexi-cell/flexi-cell.types.ts

@@ -44,6 +44,10 @@ type BaseFlexiCellProps = {
    * Adds a border radius and a border
    */
   withBorder?: boolean;
+  /**
+   * With hover style
+   */
+  withHoverEffect?: boolean;
 } & HTMLAttributes<HTMLOrSVGElement>;
 
 type FlexiCellAsLinkProps = {

package/src/components/flexi-cell/index.ts

@@ -1,2 +1,3 @@
+export * from './components/index.js';
 export { FlexiCell } from './flexi-cell.component.js';
 export { type FlexiCellProps } from './flexi-cell.types.js';

package/src/components/icon/index.ts

@@ -233,4 +233,5 @@ export { STGLogoIcon } from './components/stg-logo-icon.js';
 export { WBCLogoIcon } from './components/wbc-logo-icon.js';
 export { WBGLogoIcon } from './components/wbg-logo-icon.js';
 
+export { Icon } from './icon.component.js';
 export { type IconProps } from './icon.types.js';

package/src/components/index.ts

@@ -23,7 +23,7 @@ export * from './panel/index.js';
 export * from './collapsible/index.js';
 export * from './list/index.js';
 export * from './circle/index.js';
-export * from './flexi-cell/index.js';
+export { FlexiCell, type FlexiCellProps } from './flexi-cell/index.js';
 export * from './autocomplete/index.js';
 export * from './button-dropdown/index.js';
 export * from './form/index.js';
@@ -32,4 +32,6 @@ export * from './modal/index.js';
 export * from './pagination/index.js';
 export * from './popover/index.js';
 export * from './progress-rope/index.js';
+export * from './selector/index.js';
 export * from './compacta/index.js';
+export * from './repeater/index.js';

package/src/components/list/components/item/item.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 pl-[1.1875rem]',
+      base: 'pl-[1.1875rem]',
       bullet: 'absolute block border',
       link: 'text-text hover:cursor-pointer hover:underline focus:focus-outline',
       wrapper: 'relative',

package/src/components/list/list.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'list-none',
+      base: 'typography-body-10 list-none',
     },
     variants: {
       type: {

package/src/components/repeater/index.ts

@@ -0,0 +1,2 @@
+export { Repeater } from './repeater.component.js';
+export { type RepeaterProps } from './repeater.types.js';