@westpac/ui 0.23.0 → 0.24.1

package/dist/components/footer/footer.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative overflow-hidden border-t-[1px] border-t-border',
+        base: 'relative overflow-hidden border-t border-t-border',
         wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
         topRow: '',
         link: 'float-right block'

package/dist/components/header/header.styles.js

@@ -7,7 +7,7 @@ export const styles = tv({
         smallLogo: 'sm:hidden',
         largeLogo: 'max-sm:hidden',
         leftContent: 'flex items-center',
-        leftButton: 'my-1 border-r-[1px] border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        leftButton: 'my-1 border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
         rightContent: 'ml-auto flex items-center'
     },
     variants: {

package/dist/components/icon/components/drop-left-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function DropLeftIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/drop-left-icon.js

@@ -0,0 +1,25 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function DropLeftIcon({ 'aria-label': ariaLabel = 'Drop Left' , copyrightYear ='2024' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        d: "m8 19 8-7-8-7v14Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/drop-right-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function DropRightIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/drop-right-icon.js

@@ -0,0 +1,25 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function DropRightIcon({ 'aria-label': ariaLabel = 'Drop Right' , copyrightYear ='2024' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        d: "m16 5-8 7 8 7V5Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/index.d.ts

@@ -61,6 +61,8 @@ export { DownloadIcon } from './components/download-icon.js';
 export { DragIcon } from './components/drag-icon.js';
 export { DropDownIcon } from './components/drop-down-icon.js';
 export { DropUpIcon } from './components/drop-up-icon.js';
+export { DropLeftIcon } from './components/drop-left-icon.js';
+export { DropRightIcon } from './components/drop-right-icon.js';
 export { DropboxIcon } from './components/dropbox-icon.js';
 export { EditIcon } from './components/edit-icon.js';
 export { EducationIcon } from './components/education-icon.js';

package/dist/components/icon/index.js

@@ -61,6 +61,8 @@ export { DownloadIcon } from './components/download-icon.js';
 export { DragIcon } from './components/drag-icon.js';
 export { DropDownIcon } from './components/drop-down-icon.js';
 export { DropUpIcon } from './components/drop-up-icon.js';
+export { DropLeftIcon } from './components/drop-left-icon.js';
+export { DropRightIcon } from './components/drop-right-icon.js';
 export { DropboxIcon } from './components/dropbox-icon.js';
 export { EditIcon } from './components/edit-icon.js';
 export { EducationIcon } from './components/education-icon.js';

package/dist/components/popover/components/panel/panel.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: '',
         popover: 'absolute z-[999] rounded border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
-        arrow: 'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        arrow: 'absolute h-0 w-0 border-x-8 border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
         closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
         content: 'w-[17.625rem] py-4 pl-3 pr-5',
         heading: 'typography-body-9 mb-2 font-bold text-text',

package/dist/components/progress-bar/progress-bar.styles.js

@@ -8,8 +8,8 @@ export const styles = tv({
     variants: {
         look: {
             default: {
-                base: 'h-4 rounded-[1.5rem]',
-                innerBar: ' rounded-[1.5rem]'
+                base: 'h-4 rounded-3xl',
+                innerBar: ' rounded-3xl'
             },
             skinny: {
                 base: 'h-[0.625rem] rounded-[0.625rem]',

package/dist/components/progress-indicator/progress-indicator.styles.d.ts

@@ -10,7 +10,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-y-[1px] border-l-[1px] border-r-0 border-t-[transparent]", {
+}, undefined, "box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-[transparent]", {
     responsiveVariants: string[];
 }, {
     size: {

package/dist/components/progress-indicator/progress-indicator.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-y-[1px] border-l-[1px] border-r-0 border-t-[transparent]',
+    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-[transparent]',
     variants: {
         size: {
             xsmall: 'h-2 w-2',

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: '',
         circle: 'relative z-10 h-[14px] w-[14px] border-2 bg-white transition-colors',
-        circleWrapper: 'typography-body-9 relative flex w-full cursor-pointer items-center gap-2 pb-[1.625rem] pt-1 leading-[1.428571429] transition-colors ',
+        circleWrapper: 'typography-body-9 relative flex w-full cursor-pointer items-center gap-2 pb-[1.625rem] pt-1 leading-loose transition-colors ',
         stepsWrapper: 'relative transition-all'
     },
     variants: {

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 relative flex w-full cursor-pointer items-center gap-2 pb-[0.875rem] pt-[0.5rem] leading-[1.428571429] transition-colors',
+        base: 'typography-body-10 relative flex w-full cursor-pointer items-center gap-2 pb-[0.875rem] pt-[0.5rem] leading-loose transition-colors',
         circle: 'relative z-10 bg-white transition-colors'
     },
     variants: {

package/dist/components/progress-rope/progress-rope.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "relative after:absolute after:bottom-[1.5rem] after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-[2px] after:border-dotted after:border-borderDark"> | {
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "relative after:absolute after:bottom-4 after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-2 after:border-dotted after:border-borderDark"> | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "relative after:absolute after:bottom-[1.5rem] after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-[2px] after:border-dotted after:border-borderDark">;
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "relative after:absolute after:bottom-4 after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-2 after:border-dotted after:border-borderDark">;
     } | undefined;
-} | {}, undefined, "relative after:absolute after:bottom-[1.5rem] after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-[2px] after:border-dotted after:border-borderDark", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "relative after:absolute after:bottom-[1.5rem] after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-[2px] after:border-dotted after:border-borderDark"> | {}, undefined>;
+} | {}, undefined, "relative after:absolute after:bottom-4 after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-2 after:border-dotted after:border-borderDark", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "relative after:absolute after:bottom-4 after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-2 after:border-dotted after:border-borderDark"> | {}, undefined>;

package/dist/components/progress-rope/progress-rope.styles.js

@@ -1,4 +1,4 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'relative after:absolute after:bottom-[1.5rem] after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-[2px] after:border-dotted after:border-borderDark'
+    base: 'relative after:absolute after:bottom-4 after:left-1 after:top-[1.0625rem] after:z-0 after:block after:border-l-2 after:border-dotted after:border-borderDark'
 });

package/dist/components/table/components/table-cell/table-cell.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-top'
+        base: 'typography-body-10 border border-x-0 border-t-0 border-border p-2 text-left align-top'
     },
     variants: {
         bordered: {

package/dist/components/table/components/table-header-cell/table-header-cell.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 border border-x-0 border-b-[3px] border-t-0 border-hero p-2 text-left align-bottom text-text group-[:nth-child(1)_&]/row:border-b-[1px] group-[:nth-child(1)_&]/row:border-b-border'
+        base: 'typography-body-10 border border-x-0 border-b-[3px] border-t-0 border-hero p-2 text-left align-bottom text-text group-[:nth-child(1)_&]/row:border-b group-[:nth-child(1)_&]/row:border-b-border'
     },
     variants: {
         bordered: {

package/dist/components/table/table.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'mb-4 w-full',
-        wrapper: 'max-xsl:mb-[1.125rem] max-xsl:w-full max-xsl:overflow-x-auto max-xsl:overflow-y-hidden'
+        wrapper: 'max-xsl:mb-3 max-xsl:w-full max-xsl:overflow-x-auto max-xsl:overflow-y-hidden'
     },
     variants: {}
 }, {

package/dist/css/westpac-ui.css

@@ -3742,10 +3742,10 @@ video {
   white-space: pre-wrap;
 }.rounded {
   border-radius: 0.1875rem;
+}.rounded-3xl {
+  border-radius: 1.5rem;
 }.rounded-\[0\.625rem\] {
   border-radius: 0.625rem;
-}.rounded-\[1\.5rem\] {
-  border-radius: 1.5rem;
 }.rounded-\[1\.75rem\] {
   border-radius: 1.75rem;
 }.rounded-\[2\.125rem\] {
@@ -3796,7 +3796,7 @@ video {
 }.border-x-0 {
   border-left-width: 0px;
   border-right-width: 0px;
-}.border-x-\[8px\] {
+}.border-x-8 {
   border-left-width: 8px;
   border-right-width: 8px;
 }.border-y {
@@ -3805,9 +3805,6 @@ video {
 }.border-y-0 {
   border-top-width: 0px;
   border-bottom-width: 0px;
-}.border-y-\[1px\] {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
 }.border-b {
   border-bottom-width: 1px;
 }.border-b-0 {
@@ -3816,8 +3813,6 @@ video {
   border-bottom-width: 4px;
 }.border-b-\[0\.125rem\] {
   border-bottom-width: 0.125rem;
-}.border-b-\[1px\] {
-  border-bottom-width: 1px;
 }.border-b-\[3px\] {
   border-bottom-width: 3px;
 }.border-l {
@@ -3830,8 +3825,6 @@ video {
   border-left-width: 0.125rem;
 }.border-l-\[0\.375rem\] {
   border-left-width: 0.375rem;
-}.border-l-\[1px\] {
-  border-left-width: 1px;
 }.border-l-\[6px\] {
   border-left-width: 6px;
 }.border-r {
@@ -3840,8 +3833,6 @@ video {
   border-right-width: 0px;
 }.border-r-\[0\.125rem\] {
   border-right-width: 0.125rem;
-}.border-r-\[1px\] {
-  border-right-width: 1px;
 }.border-t {
   border-top-width: 1px;
 }.border-t-0 {
@@ -3852,8 +3843,6 @@ video {
   border-top-width: 0.125rem;
 }.border-t-\[12px\] {
   border-top-width: 12px;
-}.border-t-\[1px\] {
-  border-top-width: 1px;
 }.\!border-solid {
   border-style: solid !important;
 }.border-solid {
@@ -5012,8 +5001,6 @@ video {
   line-height: 1.125rem;
 }.leading-\[1\.3rem\] {
   line-height: 1.3rem;
-}.leading-\[1\.428571429\] {
-  line-height: 1.428571429;
 }.leading-\[1\.5\] {
   line-height: 1.5;
 }.leading-\[1\.685rem\] {
@@ -6008,7 +5995,7 @@ video {
   content: var(--tw-content);
   top: 1.25rem;
   bottom: 1.25rem;
-}.after\:bottom-\[1\.5rem\]::after {
+}.after\:bottom-4::after {
   content: var(--tw-content);
   bottom: 1.5rem;
 }.after\:bottom-\[1px\]::after {
@@ -6143,9 +6130,6 @@ video {
 }.after\:border-l-\[0\.125rem\]::after {
   content: var(--tw-content);
   border-left-width: 0.125rem;
-}.after\:border-l-\[2px\]::after {
-  content: var(--tw-content);
-  border-left-width: 2px;
 }.after\:border-r-0::after {
   content: var(--tw-content);
   border-right-width: 0px;
@@ -6440,7 +6424,7 @@ video {
   border-left-width: 0px;
 }.group\/buttons:not(:first-child) .group-\[\:not\(\:first-child\)\]\/buttons\:border-l-0 {
   border-left-width: 0px;
-}:nth-child(1) .group\/row .group-\[\:nth-child\(1\)_\&\]\/row\:border-b-\[1px\] {
+}:nth-child(1) .group\/row .group-\[\:nth-child\(1\)_\&\]\/row\:border-b {
   border-bottom-width: 1px;
 }:nth-child(1) .group\/row .group-\[\:nth-child\(1\)_\&\]\/row\:border-b-border {
   --tw-border-opacity: 1;
@@ -6641,7 +6625,7 @@ video {
       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));
     }
   }
-}@media not all and (min-width: 576px) {.max-xsl\:mb-\[1\.125rem\] {
+}@media not all and (min-width: 576px) {.max-xsl\:mb-3 {
     margin-bottom: 1.125rem;
   }.max-xsl\:w-full {
     width: 100%;
@@ -6965,10 +6949,10 @@ video {
     white-space: nowrap;
   }.xsl\:rounded {
     border-radius: 0.1875rem;
+  }.xsl\:rounded-3xl {
+    border-radius: 1.5rem;
   }.xsl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.xsl\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.xsl\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.xsl\:rounded-\[2\.125rem\] {
@@ -8038,10 +8022,10 @@ video {
     white-space: nowrap;
   }.sm\:rounded {
     border-radius: 0.1875rem;
+  }.sm\:rounded-3xl {
+    border-radius: 1.5rem;
   }.sm\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.sm\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.sm\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.sm\:rounded-\[2\.125rem\] {
@@ -9140,10 +9124,10 @@ video {
     white-space: nowrap;
   }.md\:rounded {
     border-radius: 0.1875rem;
+  }.md\:rounded-3xl {
+    border-radius: 1.5rem;
   }.md\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.md\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.md\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.md\:rounded-\[2\.125rem\] {
@@ -10244,10 +10228,10 @@ video {
     white-space: nowrap;
   }.lg\:rounded {
     border-radius: 0.1875rem;
+  }.lg\:rounded-3xl {
+    border-radius: 1.5rem;
   }.lg\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.lg\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.lg\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.lg\:rounded-\[2\.125rem\] {
@@ -11303,10 +11287,10 @@ video {
     white-space: nowrap;
   }.xl\:rounded {
     border-radius: 0.1875rem;
+  }.xl\:rounded-3xl {
+    border-radius: 1.5rem;
   }.xl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.xl\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.xl\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.xl\:rounded-\[2\.125rem\] {

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

@@ -3742,10 +3742,10 @@ video {
   white-space: pre-wrap;
 }.rounded {
   border-radius: 0.1875rem;
+}.rounded-3xl {
+  border-radius: 1.5rem;
 }.rounded-\[0\.625rem\] {
   border-radius: 0.625rem;
-}.rounded-\[1\.5rem\] {
-  border-radius: 1.5rem;
 }.rounded-\[1\.75rem\] {
   border-radius: 1.75rem;
 }.rounded-\[2\.125rem\] {
@@ -3796,7 +3796,7 @@ video {
 }.border-x-0 {
   border-left-width: 0px;
   border-right-width: 0px;
-}.border-x-\[8px\] {
+}.border-x-8 {
   border-left-width: 8px;
   border-right-width: 8px;
 }.border-y {
@@ -3805,9 +3805,6 @@ video {
 }.border-y-0 {
   border-top-width: 0px;
   border-bottom-width: 0px;
-}.border-y-\[1px\] {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
 }.border-b {
   border-bottom-width: 1px;
 }.border-b-0 {
@@ -3816,8 +3813,6 @@ video {
   border-bottom-width: 4px;
 }.border-b-\[0\.125rem\] {
   border-bottom-width: 0.125rem;
-}.border-b-\[1px\] {
-  border-bottom-width: 1px;
 }.border-b-\[3px\] {
   border-bottom-width: 3px;
 }.border-l {
@@ -3830,8 +3825,6 @@ video {
   border-left-width: 0.125rem;
 }.border-l-\[0\.375rem\] {
   border-left-width: 0.375rem;
-}.border-l-\[1px\] {
-  border-left-width: 1px;
 }.border-l-\[6px\] {
   border-left-width: 6px;
 }.border-r {
@@ -3840,8 +3833,6 @@ video {
   border-right-width: 0px;
 }.border-r-\[0\.125rem\] {
   border-right-width: 0.125rem;
-}.border-r-\[1px\] {
-  border-right-width: 1px;
 }.border-t {
   border-top-width: 1px;
 }.border-t-0 {
@@ -3852,8 +3843,6 @@ video {
   border-top-width: 0.125rem;
 }.border-t-\[12px\] {
   border-top-width: 12px;
-}.border-t-\[1px\] {
-  border-top-width: 1px;
 }.\!border-solid {
   border-style: solid !important;
 }.border-solid {
@@ -5012,8 +5001,6 @@ video {
   line-height: 1.125rem;
 }.leading-\[1\.3rem\] {
   line-height: 1.3rem;
-}.leading-\[1\.428571429\] {
-  line-height: 1.428571429;
 }.leading-\[1\.5\] {
   line-height: 1.5;
 }.leading-\[1\.685rem\] {
@@ -6008,7 +5995,7 @@ video {
   content: var(--tw-content);
   top: 1.25rem;
   bottom: 1.25rem;
-}.after\:bottom-\[1\.5rem\]::after {
+}.after\:bottom-4::after {
   content: var(--tw-content);
   bottom: 1.5rem;
 }.after\:bottom-\[1px\]::after {
@@ -6143,9 +6130,6 @@ video {
 }.after\:border-l-\[0\.125rem\]::after {
   content: var(--tw-content);
   border-left-width: 0.125rem;
-}.after\:border-l-\[2px\]::after {
-  content: var(--tw-content);
-  border-left-width: 2px;
 }.after\:border-r-0::after {
   content: var(--tw-content);
   border-right-width: 0px;
@@ -6440,7 +6424,7 @@ video {
   border-left-width: 0px;
 }.group\/buttons:not(:first-child) .group-\[\:not\(\:first-child\)\]\/buttons\:border-l-0 {
   border-left-width: 0px;
-}:nth-child(1) .group\/row .group-\[\:nth-child\(1\)_\&\]\/row\:border-b-\[1px\] {
+}:nth-child(1) .group\/row .group-\[\:nth-child\(1\)_\&\]\/row\:border-b {
   border-bottom-width: 1px;
 }:nth-child(1) .group\/row .group-\[\:nth-child\(1\)_\&\]\/row\:border-b-border {
   --tw-border-opacity: 1;
@@ -6641,7 +6625,7 @@ video {
       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));
     }
   }
-}@media not all and (min-width: 576px) {.max-xsl\:mb-\[1\.125rem\] {
+}@media not all and (min-width: 576px) {.max-xsl\:mb-3 {
     margin-bottom: 1.125rem;
   }.max-xsl\:w-full {
     width: 100%;
@@ -6965,10 +6949,10 @@ video {
     white-space: nowrap;
   }.xsl\:rounded {
     border-radius: 0.1875rem;
+  }.xsl\:rounded-3xl {
+    border-radius: 1.5rem;
   }.xsl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.xsl\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.xsl\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.xsl\:rounded-\[2\.125rem\] {
@@ -8038,10 +8022,10 @@ video {
     white-space: nowrap;
   }.sm\:rounded {
     border-radius: 0.1875rem;
+  }.sm\:rounded-3xl {
+    border-radius: 1.5rem;
   }.sm\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.sm\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.sm\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.sm\:rounded-\[2\.125rem\] {
@@ -9140,10 +9124,10 @@ video {
     white-space: nowrap;
   }.md\:rounded {
     border-radius: 0.1875rem;
+  }.md\:rounded-3xl {
+    border-radius: 1.5rem;
   }.md\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.md\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.md\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.md\:rounded-\[2\.125rem\] {
@@ -10244,10 +10228,10 @@ video {
     white-space: nowrap;
   }.lg\:rounded {
     border-radius: 0.1875rem;
+  }.lg\:rounded-3xl {
+    border-radius: 1.5rem;
   }.lg\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.lg\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.lg\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.lg\:rounded-\[2\.125rem\] {
@@ -11303,10 +11287,10 @@ video {
     white-space: nowrap;
   }.xl\:rounded {
     border-radius: 0.1875rem;
+  }.xl\:rounded-3xl {
+    border-radius: 1.5rem;
   }.xl\:rounded-\[0\.625rem\] {
     border-radius: 0.625rem;
-  }.xl\:rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
   }.xl\:rounded-\[1\.75rem\] {
     border-radius: 1.75rem;
   }.xl\:rounded-\[2\.125rem\] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -215,7 +215,7 @@
     "@storybook/blocks": "^7.6.4",
     "@storybook/manager-api": "~7.6.4",
     "@storybook/react": "^7.6.4",
-    "@storybook/react-vite": "^7.6.4",
+    "@storybook/react-vite": "^8.1.6",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "~7.6.4",
     "@swc/cli": "^0.1.62",
@@ -225,16 +225,17 @@
     "@testing-library/user-event": "~14.4.3",
     "@types/lodash-es": "~4.17.8",
     "@types/lodash.throttle": "~4.1.7",
+    "@types/node": "~20.12.12",
     "@types/prettier": "~2.7.3",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.1",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@vitejs/plugin-react-swc": "^3.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/coverage-c8": "^0.31.0",
     "chokidar": "^3.5.3",
     "colorjs.io": "~0.4.5",
     "cross-env": "~7.0.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-storybook": "~0.6.15",
     "glob": "~10.3.3",
     "jsdom": "^22.0.0",
@@ -253,11 +254,11 @@
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9",
+    "vite": "^5.2.12",
     "vitest": "^0.30.1",
-    "@westpac/ts-config": "~0.0.0",
+    "@westpac/eslint-config": "~0.2.2",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/eslint-config": "~0.2.1"
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",
@@ -277,6 +278,7 @@
   },
   "peerDependencies": {
     "@duetds/date-picker": "~1.4.0",
+    "@types/node": "~20.12.12",
     "colorjs.io": "~0.4.5",
     "react": ">=18.2.0",
     "tailwind-variants": "~0.1.13",

package/src/components/footer/footer.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative overflow-hidden border-t-[1px] border-t-border',
+      base: 'relative overflow-hidden border-t border-t-border',
       wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
       topRow: '',
       link: 'float-right block',

package/src/components/header/header.styles.ts

@@ -11,7 +11,7 @@ export const styles = tv(
       largeLogo: 'max-sm:hidden',
       leftContent: 'flex items-center',
       leftButton:
-        'my-1 border-r-[1px] border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        'my-1 border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
       rightContent: 'ml-auto flex items-center',
     },
     variants: {

package/src/components/icon/components/drop-left-icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function DropLeftIcon({ 'aria-label': ariaLabel = 'Drop Left', copyrightYear = '2024', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="m8 19 8-7-8-7v14Z" fill="currentColor" />
+    </Icon>
+  );
+}