npm - @westpac/ui - Versions diffs - 0.4.0 → 0.6.0 - Mend

@westpac/ui 0.4.0 → 0.6.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 (226) hide show

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

@@ -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;
@@ -4078,9 +4105,6 @@ video {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
 }.focus\:-outline-offset-2:focus {
   outline-offset: -2px;
 }.focus\:outline-focus:focus {
@@ -4126,6 +4150,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 +4272,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 +4510,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 +4599,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 +4655,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 +4738,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 +4749,12 @@ 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\:outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
   }.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,12 @@ 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\:outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
   }.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 +5812,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 +5918,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 +6080,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 +6161,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 +6250,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 +6307,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 +6390,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 +6401,12 @@ 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\:outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
   }.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 +6636,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 +6749,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 +6990,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 +7079,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 +7136,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 +7219,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 +7230,12 @@ 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\:outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
   }.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 +7465,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 +7569,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 +7805,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 +7894,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 +7945,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 +8028,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 +8039,12 @@ 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\:outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
   }.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 +8274,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/tailwind/constants/colors.d.ts CHANGED Viewed

@@ -60,7 +60,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    background: {
+    primary: {
         100: string;
         200: string;
         50: string;
@@ -73,7 +73,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    borderDark: {
+    hero: {
         100: string;
         200: string;
         50: string;
@@ -86,7 +86,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    focus: {
+    background: {
         100: string;
         200: string;
         50: string;
@@ -99,7 +99,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    hero: {
+    borderDark: {
         100: string;
         200: string;
         50: string;
@@ -112,7 +112,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    light: {
+    focus: {
         100: string;
         200: string;
         50: string;
@@ -125,7 +125,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    muted: {
+    light: {
         100: string;
         200: string;
         50: string;
@@ -138,7 +138,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    neutral: {
+    muted: {
         100: string;
         200: string;
         50: string;
@@ -151,7 +151,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    pop: {
+    neutral: {
         100: string;
         200: string;
         50: string;
@@ -164,7 +164,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    primary: {
+    pop: {
         100: string;
         200: string;
         50: string;

package/dist/tailwind/themes/index.d.ts CHANGED Viewed

@@ -59,7 +59,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            white: {
+            primary: {
                 100: string;
                 200: string;
                 50: string;
@@ -72,7 +72,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            black: {
+            hero: {
                 100: string;
                 200: string;
                 50: string;
@@ -85,7 +85,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            background: {
+            white: {
                 100: string;
                 200: string;
                 50: string;
@@ -98,7 +98,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            borderDark: {
+            black: {
                 100: string;
                 200: string;
                 50: string;
@@ -111,7 +111,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            focus: {
+            background: {
                 100: string;
                 200: string;
                 50: string;
@@ -124,7 +124,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            hero: {
+            borderDark: {
                 100: string;
                 200: string;
                 50: string;
@@ -137,7 +137,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            light: {
+            focus: {
                 100: string;
                 200: string;
                 50: string;
@@ -150,7 +150,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            muted: {
+            light: {
                 100: string;
                 200: string;
                 50: string;
@@ -163,7 +163,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            neutral: {
+            muted: {
                 100: string;
                 200: string;
                 50: string;
@@ -176,7 +176,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            pop: {
+            neutral: {
                 100: string;
                 200: string;
                 50: string;
@@ -189,7 +189,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            primary: {
+            pop: {
                 100: string;
                 200: string;
                 50: string;

package/dist/utils/generateId.d.ts ADDED Viewed

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

package/dist/utils/generateId.js ADDED Viewed

@@ -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 ADDED Viewed

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

package/dist/utils/index.js ADDED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.4.0",
+  "version": "0.6.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"