@westpac/ui 0.59.1 → 0.59.3

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

@@ -3312,6 +3312,9 @@ body {
 .bottom-0 {
   bottom: 0rem;
 }
+.bottom-\[0\.1em\] {
+  bottom: 0.1em;
+}
 .bottom-full {
   bottom: 100%;
 }
@@ -3993,6 +3996,15 @@ body {
 .min-h-12 {
   min-height: 4.5rem;
 }
+.min-h-2 {
+  min-height: 0.75rem;
+}
+.min-h-3 {
+  min-height: 1.125rem;
+}
+.min-h-4 {
+  min-height: 1.5rem;
+}
 .min-h-5 {
   min-height: 1.875rem;
 }
@@ -4014,6 +4026,9 @@ body {
 .min-h-\[90px\] {
   min-height: 90px;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-0 {
   width: 0rem;
 }
@@ -4190,15 +4205,30 @@ body {
 .min-w-0 {
   min-width: 0rem;
 }
+.min-w-2 {
+  min-width: 0.75rem;
+}
+.min-w-3 {
+  min-width: 1.125rem;
+}
 .min-w-4 {
   min-width: 1.5rem;
 }
+.min-w-6 {
+  min-width: 2.25rem;
+}
 .min-w-7 {
   min-width: 2.625rem;
 }
+.min-w-8 {
+  min-width: 3rem;
+}
 .min-w-\[100px\] {
   min-width: 100px;
 }
+.min-w-\[100vw\] {
+  min-width: 100vw;
+}
 .min-w-\[11\.875rem\] {
   min-width: 11.875rem;
 }
@@ -4442,9 +4472,6 @@ body {
 .items-center {
   align-items: center;
 }
-.items-baseline {
-  align-items: baseline;
-}
 .items-stretch {
   align-items: stretch;
 }
@@ -4505,9 +4532,6 @@ body {
   --tw-divide-opacity: 1;
   border-color: rgba(var(--colors-border), var(--tw-divide-opacity, 1));
 }
-.self-center {
-  align-self: center;
-}
 .overflow-auto {
   overflow: auto;
 }
@@ -9126,6 +9150,9 @@ body {
   .xsl\:block {
     display: block;
   }
+  .xsl\:inline {
+    display: inline;
+  }
   .xsl\:flex {
     display: flex;
   }
@@ -9238,6 +9265,15 @@ body {
   .xsl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xsl\:min-h-2 {
+    min-height: 0.75rem;
+  }
+  .xsl\:min-h-3 {
+    min-height: 1.125rem;
+  }
+  .xsl\:min-h-4 {
+    min-height: 1.5rem;
+  }
   .xsl\:min-h-5 {
     min-height: 1.875rem;
   }
@@ -9329,9 +9365,21 @@ body {
   .xsl\:w-screen {
     width: 100vw;
   }
+  .xsl\:min-w-2 {
+    min-width: 0.75rem;
+  }
+  .xsl\:min-w-3 {
+    min-width: 1.125rem;
+  }
   .xsl\:min-w-4 {
     min-width: 1.5rem;
   }
+  .xsl\:min-w-6 {
+    min-width: 2.25rem;
+  }
+  .xsl\:min-w-8 {
+    min-width: 3rem;
+  }
   .xsl\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -9445,9 +9493,6 @@ body {
   .xsl\:items-center {
     align-items: center;
   }
-  .xsl\:items-baseline {
-    align-items: baseline;
-  }
   .xsl\:justify-start {
     justify-content: flex-start;
   }
@@ -9478,9 +9523,6 @@ body {
   .xsl\:gap-\[2px\] {
     gap: 2px;
   }
-  .xsl\:self-center {
-    align-self: center;
-  }
   .xsl\:overflow-auto {
     overflow: auto;
   }
@@ -10868,6 +10910,9 @@ body {
       display: inline-block;
     }
   }
+  .sm\:inline {
+    display: inline;
+  }
   .sm\:flex {
     display: flex;
   }
@@ -10991,6 +11036,15 @@ body {
   .sm\:min-h-12 {
     min-height: 4.5rem;
   }
+  .sm\:min-h-2 {
+    min-height: 0.75rem;
+  }
+  .sm\:min-h-3 {
+    min-height: 1.125rem;
+  }
+  .sm\:min-h-4 {
+    min-height: 1.5rem;
+  }
   .sm\:min-h-5 {
     min-height: 1.875rem;
   }
@@ -11085,9 +11139,21 @@ body {
   .sm\:min-w-10 {
     min-width: 3.75rem;
   }
+  .sm\:min-w-2 {
+    min-width: 0.75rem;
+  }
+  .sm\:min-w-3 {
+    min-width: 1.125rem;
+  }
   .sm\:min-w-4 {
     min-width: 1.5rem;
   }
+  .sm\:min-w-6 {
+    min-width: 2.25rem;
+  }
+  .sm\:min-w-8 {
+    min-width: 3rem;
+  }
   .sm\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -11201,9 +11267,6 @@ body {
   .sm\:items-center {
     align-items: center;
   }
-  .sm\:items-baseline {
-    align-items: baseline;
-  }
   .sm\:justify-start {
     justify-content: flex-start;
   }
@@ -11234,9 +11297,6 @@ body {
   .sm\:gap-\[2px\] {
     gap: 2px;
   }
-  .sm\:self-center {
-    align-self: center;
-  }
   .sm\:overflow-auto {
     overflow: auto;
   }
@@ -12723,6 +12783,9 @@ body {
   .md\:block {
     display: block;
   }
+  .md\:inline {
+    display: inline;
+  }
   .md\:flex {
     display: flex;
   }
@@ -12835,6 +12898,15 @@ body {
   .md\:min-h-12 {
     min-height: 4.5rem;
   }
+  .md\:min-h-2 {
+    min-height: 0.75rem;
+  }
+  .md\:min-h-3 {
+    min-height: 1.125rem;
+  }
+  .md\:min-h-4 {
+    min-height: 1.5rem;
+  }
   .md\:min-h-5 {
     min-height: 1.875rem;
   }
@@ -12926,9 +12998,21 @@ body {
   .md\:w-screen {
     width: 100vw;
   }
+  .md\:min-w-2 {
+    min-width: 0.75rem;
+  }
+  .md\:min-w-3 {
+    min-width: 1.125rem;
+  }
   .md\:min-w-4 {
     min-width: 1.5rem;
   }
+  .md\:min-w-6 {
+    min-width: 2.25rem;
+  }
+  .md\:min-w-8 {
+    min-width: 3rem;
+  }
   .md\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -13042,9 +13126,6 @@ body {
   .md\:items-center {
     align-items: center;
   }
-  .md\:items-baseline {
-    align-items: baseline;
-  }
   .md\:justify-start {
     justify-content: flex-start;
   }
@@ -13075,9 +13156,6 @@ body {
   .md\:gap-\[2px\] {
     gap: 2px;
   }
-  .md\:self-center {
-    align-self: center;
-  }
   .md\:overflow-auto {
     overflow: auto;
   }
@@ -14563,6 +14641,9 @@ body {
   .lg\:block {
     display: block;
   }
+  .lg\:inline {
+    display: inline;
+  }
   .lg\:flex {
     display: flex;
   }
@@ -14675,6 +14756,15 @@ body {
   .lg\:min-h-12 {
     min-height: 4.5rem;
   }
+  .lg\:min-h-2 {
+    min-height: 0.75rem;
+  }
+  .lg\:min-h-3 {
+    min-height: 1.125rem;
+  }
+  .lg\:min-h-4 {
+    min-height: 1.5rem;
+  }
   .lg\:min-h-5 {
     min-height: 1.875rem;
   }
@@ -14766,9 +14856,21 @@ body {
   .lg\:w-screen {
     width: 100vw;
   }
+  .lg\:min-w-2 {
+    min-width: 0.75rem;
+  }
+  .lg\:min-w-3 {
+    min-width: 1.125rem;
+  }
   .lg\:min-w-4 {
     min-width: 1.5rem;
   }
+  .lg\:min-w-6 {
+    min-width: 2.25rem;
+  }
+  .lg\:min-w-8 {
+    min-width: 3rem;
+  }
   .lg\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -14882,9 +14984,6 @@ body {
   .lg\:items-center {
     align-items: center;
   }
-  .lg\:items-baseline {
-    align-items: baseline;
-  }
   .lg\:justify-start {
     justify-content: flex-start;
   }
@@ -14915,9 +15014,6 @@ body {
   .lg\:gap-\[2px\] {
     gap: 2px;
   }
-  .lg\:self-center {
-    align-self: center;
-  }
   .lg\:overflow-auto {
     overflow: auto;
   }
@@ -16338,6 +16434,9 @@ body {
   .xl\:block {
     display: block;
   }
+  .xl\:inline {
+    display: inline;
+  }
   .xl\:flex {
     display: flex;
   }
@@ -16450,6 +16549,15 @@ body {
   .xl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xl\:min-h-2 {
+    min-height: 0.75rem;
+  }
+  .xl\:min-h-3 {
+    min-height: 1.125rem;
+  }
+  .xl\:min-h-4 {
+    min-height: 1.5rem;
+  }
   .xl\:min-h-5 {
     min-height: 1.875rem;
   }
@@ -16541,9 +16649,21 @@ body {
   .xl\:w-screen {
     width: 100vw;
   }
+  .xl\:min-w-2 {
+    min-width: 0.75rem;
+  }
+  .xl\:min-w-3 {
+    min-width: 1.125rem;
+  }
   .xl\:min-w-4 {
     min-width: 1.5rem;
   }
+  .xl\:min-w-6 {
+    min-width: 2.25rem;
+  }
+  .xl\:min-w-8 {
+    min-width: 3rem;
+  }
   .xl\:min-w-\[11\.875rem\] {
     min-width: 11.875rem;
   }
@@ -16649,9 +16769,6 @@ body {
   .xl\:items-center {
     align-items: center;
   }
-  .xl\:items-baseline {
-    align-items: baseline;
-  }
   .xl\:justify-start {
     justify-content: flex-start;
   }
@@ -16682,9 +16799,6 @@ body {
   .xl\:gap-\[2px\] {
     gap: 2px;
   }
-  .xl\:self-center {
-    align-self: center;
-  }
   .xl\:overflow-auto {
     overflow: auto;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.59.1",
+  "version": "0.59.3",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -209,6 +209,7 @@
   ],
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/compat": "~1.3.2",
     "@eslint/eslintrc": "~3.3.1",
     "@eslint/js": "~9.30.0",
     "@react-types/accordion": "3.0.0-alpha.14",
@@ -220,7 +221,7 @@
     "@storybook/addon-links": "10.2.3",
     "@storybook/addon-mcp": "~0.2.2",
     "@storybook/addon-themes": "~10.2.3",
-    "@storybook/react-vite": "10.2.3",
+    "@storybook/react-vite": "10.2.11",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.35",
     "@testing-library/jest-dom": "^5.16.5",
@@ -251,7 +252,7 @@
     "react-docgen-typescript": "~2.2.2",
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",
-    "storybook": "10.2.3",
+    "storybook": "10.2.11",
     "tailwind-variants": "~0.2.1",
     "tailwindcss": "~3.4.19",
     "tailwindcss-themer": "~3.1.0",
@@ -259,8 +260,8 @@
     "typescript": "^5.5.4",
     "vite": "^7.0.8",
     "vitest": "^3.2.4",
+    "@westpac/eslint-config": "~1.0.2",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/eslint-config": "~1.0.1",
     "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {

package/src/components/date-picker-beta/components/calendar/components/calendar-cell/calendar-cell.types.ts

@@ -1,8 +1,4 @@
 import { AriaCalendarCellProps } from 'react-aria';
 import { CalendarState, RangeCalendarState } from 'react-stately';
 
-// import { styles } from './calendar-Cell.styles.js';
-
-// type Variants = VariantProps<typeof styles>;
-
 export type CalendarCellProps = AriaCalendarCellProps & { state: CalendarState | RangeCalendarState };

package/src/components/icon/components/arrow-back-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowBackIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Back',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M12 20L13.41 18.59L7.83 13L20 13V11L7.83 11L13.41 5.41L12 4L4 12L12 20Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-down-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowDownIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Down',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M20 12L18.59 10.59L13 16.17V4L11 4L11 16.17L5.41 10.59L4 12L12 20L20 12Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-forward-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowForwardIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Forward',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-up-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowUpIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Up',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M4 12L5.41 13.41L11 7.83L11 20H13V7.83L18.59 13.41L20 12L12 4L4 12Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/icon.styles.ts

@@ -5,11 +5,11 @@ export const styles = tv(
     base: 'inline-block transition-colors disabled:pointer-events-none disabled:opacity-50',
     variants: {
       size: {
-        xsmall: 'size-2',
-        small: 'size-3',
-        medium: 'size-4',
-        large: 'size-6',
-        xlarge: 'size-8',
+        xsmall: 'size-2 min-h-2 min-w-2',
+        small: 'size-3 min-h-3 min-w-3',
+        medium: 'size-4 min-h-4 min-w-4',
+        large: 'size-6 min-h-6 min-w-6',
+        xlarge: 'size-8 min-h-8 min-w-8',
       },
       color: {
         success: 'text-success',

package/src/components/icon/index.ts

@@ -6,14 +6,18 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackIcon } from './components/arrow-back-icon.js';
 export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownIcon } from './components/arrow-down-icon.js';
 export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardIcon } from './components/arrow-forward-icon.js';
 export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
 export { ArrowThreadReplyIcon } from './components/arrow-thread-reply-icon.js';
+export { ArrowUpIcon } from './components/arrow-up-icon.js';
 export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';

package/src/components/link/link.component.tsx

@@ -1,3 +1,4 @@
+// TODO: This component will not work with the Next Link component in Next.js 16+ as legacyBehavior as has been deprecated in 15. Need to find a solution.
 'use client';
 
 import React, { ForwardedRef, RefObject, forwardRef } from 'react';

package/src/components/link/link.styles.ts

@@ -3,19 +3,17 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'inline-flex bg-[transparent] hover:underline',
-      iconBefore: 'mr-1',
-      iconAfter: 'ml-1',
+      base: 'bg-[transparent] hover:underline',
+      iconBefore: 'relative bottom-[0.1em] mr-1',
+      iconAfter: 'relative bottom-[0.1em] ml-1',
     },
     variants: {
       type: {
         inline: {
-          base: 'items-baseline text-link',
-          iconBefore: 'self-center',
-          iconAfter: 'self-center',
+          base: 'inline text-link',
         },
         standalone: {
-          base: 'items-center text-text',
+          base: 'text-text',
         },
       },
       underline: {

package/src/components/popover/components/panel/panel.component.tsx

@@ -1,7 +1,7 @@
-import React, { useRef } from 'react';
-import { FocusScope } from 'react-aria';
+import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
+import { ButtonRef } from '../../../button/button.types.js';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 
@@ -17,10 +17,14 @@ export function BasePanel({
   placement = 'top',
   id,
   triggerRef,
+  onClose,
+  open,
   portal,
 }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const buttonRef = useRef<ButtonRef>(null);
   const { popoverPosition, arrowPosition, localPlacement } = usePanel({
     state,
     placement,
@@ -29,30 +33,44 @@ export function BasePanel({
     popoverRef,
   });
   const styles = panelStyles({ placement: localPlacement });
+  useEffect(() => {
+    if (state.isOpen && !open) {
+      if (headingRef.current) {
+        headingRef.current.focus();
+      } else {
+        buttonRef.current?.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.isOpen]);
+
   return (
-    <FocusScope autoFocus restoreFocus>
-      <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef}>
-        <div className={styles.content()}>
-          {heading && (
-            <Tag className={styles.heading()} tabIndex={0}>
-              {heading}
-            </Tag>
-          )}
-          <div className={styles.body()} tabIndex={0}>
-            {content}
-          </div>
-          <Button
-            look="link"
-            size="small"
-            onClick={() => state.close()}
-            className={styles.closeBtn()}
-            iconAfter={() => <CloseIcon color="muted" size="small" aria-hidden />}
-            aria-label="Close popover"
-          />
+    <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef} role="dialog">
+      <div className={styles.content()}>
+        {heading && (
+          <Tag className={styles.heading()} tabIndex={-1} ref={headingRef}>
+            {heading}
+          </Tag>
+        )}
+        <div className={styles.body()} id="popover-content">
+          {content}
         </div>
-        <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+        <Button
+          look="link"
+          tag="button"
+          size="small"
+          ref={buttonRef}
+          onClick={() => {
+            onClose?.();
+            state.close();
+          }}
+          className={styles.closeBtn()}
+          iconAfter={() => <CloseIcon color="muted" size="small" aria-hidden />}
+          aria-label="Close popover"
+        />
       </div>
-    </FocusScope>
+      <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+    </div>
   );
 }