@westpac/ui 1.10.0 → 1.12.0

package/dist/components/heading/heading.component.d.ts

@@ -1,2 +1,8 @@
-import { type HeadingProps } from './heading.types.js';
-export declare function Heading({ className, tag, brandHeading, size, children, uppercase, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const Heading: React.ForwardRefExoticComponent<{
+    brandHeading?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
+    children?: React.ReactNode;
+    size: import("../../types/responsive-variants.types.js").ResponsiveVariants<2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined>;
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    uppercase?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/heading/heading.component.js

@@ -1,9 +1,9 @@
 'use client';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { styles } from './heading.styles.js';
-export function Heading({ className, tag, brandHeading, size, children, uppercase, ...props }) {
+function BaseHeading({ className, tag, brandHeading, size, children, uppercase, ...props }, ref) {
     const sizeToTag = {
         1: 'h1',
         2: 'h2',
@@ -25,6 +25,8 @@ export function Heading({ className, tag, brandHeading, size, children, uppercas
             size: resolveResponsiveVariant(size, breakpoint),
             uppercase
         }),
+        ref: ref,
         ...props
     }, children);
 }
+export const Heading = forwardRef(BaseHeading);

package/dist/components/heading/heading.types.d.ts

@@ -3,6 +3,7 @@ import { type VariantProps } from 'tailwind-variants';
 import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
 import { styles } from './heading.styles.js';
 type Variants = VariantProps<typeof styles>;
+export type HeadingRef = HTMLHeadingElement;
 export type HeadingProps = {
     /**
      * Whether it should be a brand heading

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function PanelLeftIcon({ look = 'filled', 'aria-label': ariaLabel = 'Panel Left', copyrightYear = '2026', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, look === 'filled' ? React.createElement("path", {
+        d: "M19.7778 2C20.3889 2 20.912 2.21759 21.3472 2.65278C21.7824 3.08796 22 3.61111 22 4.22222L22 19.7778C22 20.3889 21.7824 20.912 21.3472 21.3472C20.912 21.7824 20.3889 22 19.7778 22L4.22222 22C3.61111 22 3.08796 21.7824 2.65277 21.3472C2.21759 20.912 2 20.3889 2 19.7778L2 4.22222C2 3.61111 2.21759 3.08796 2.65278 2.65278C3.08796 2.21759 3.61111 2 4.22222 2L19.7778 2ZM10 4L10 20L20 20L20 4L10 4Z",
+        fill: "currentColor"
+    }) : React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M19.7773 2C20.3885 2 20.9125 2.21716 21.3477 2.65234C21.7828 3.08753 22 3.61155 22 4.22266V19.7773C22 20.3885 21.7828 20.9125 21.3477 21.3477C20.9125 21.7828 20.3885 22 19.7773 22H4.22266C3.61155 22 3.08753 21.7828 2.65234 21.3477C2.21716 20.9125 2 20.3885 2 19.7773V4.22266C2 3.61155 2.21716 3.08753 2.65234 2.65234C3.08753 2.21716 3.61155 2 4.22266 2H19.7773ZM4 4V20H8V4H4ZM10 20H20V4H10V20Z",
+        fill: "currentColor"
+    }));
+}

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function PanelRightIcon({ look = 'filled', 'aria-label': ariaLabel = 'Panel Right', copyrightYear = '2026', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, look === 'filled' ? React.createElement("path", {
+        d: "M19.7778 2C20.3889 2 20.912 2.21759 21.3472 2.65278C21.7824 3.08796 22 3.61111 22 4.22222L22 19.7778C22 20.3889 21.7824 20.912 21.3472 21.3472C20.912 21.7824 20.3889 22 19.7778 22L4.22222 22C3.61111 22 3.08796 21.7824 2.65277 21.3472C2.21759 20.912 2 20.3889 2 19.7778L2 4.22222C2 3.61111 2.21759 3.08796 2.65278 2.65278C3.08796 2.21759 3.61111 2 4.22222 2L19.7778 2ZM4 4L4 20L14 20L14 4L4 4Z",
+        fill: "currentColor"
+    }) : React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M19.7773 2C20.3885 2 20.9125 2.21716 21.3477 2.65234C21.7828 3.08753 22 3.61155 22 4.22266V19.7773C22 20.3885 21.7828 20.9125 21.3477 21.3477C20.9125 21.7828 20.3885 22 19.7773 22H4.22266C3.61155 22 3.08753 21.7828 2.65234 21.3477C2.21716 20.9125 2 20.3885 2 19.7773V4.22266C2 3.61155 2.21716 3.08753 2.65234 2.65234C3.08753 2.21716 3.61155 2 4.22266 2H19.7773ZM4 4V20H14V4H4ZM16 20H20V4H16V20Z",
+        fill: "currentColor"
+    }));
+}

package/dist/components/icon/components/phone-icon.js

@@ -6,9 +6,12 @@ export function PhoneIcon({ 'aria-label': ariaLabel = 'Phone', copyrightYear = '
         copyrightYear: copyrightYear,
         ...props
     }, React.createElement("path", {
+        d: "M13 4C13.5523 4 14 4.44772 14 5C14 5.55228 13.5523 6 13 6H11C10.4477 6 10 5.55228 10 5C10 4.44772 10.4477 4 11 4H13Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
-        d: "M5 2C5 0.89543 5.89543 0 7 0H17C18.1046 0 19 0.895431 19 2V22C19 23.1046 18.1046 24 17 24H7C5.89543 24 5 23.1046 5 22V2ZM17 19H7V3H17V19ZM10.5 21.5C10.5 22.33 11.17 23 12 23C12.83 23 13.5 22.33 13.5 21.5C13.5 20.67 12.83 20 12 20C11.17 20 10.5 20.67 10.5 21.5Z",
+        d: "M17 0C18.1046 0 19 0.895431 19 2V22C19 23.1046 18.1046 24 17 24H7C5.89543 24 5 23.1046 5 22V2C5 0.895431 5.89543 0 7 0H17ZM7 22H17V2H7V22Z",
         fill: "currentColor"
     }));
 }

package/dist/components/icon/components/tablet-icon.js

@@ -6,9 +6,12 @@ export function TabletIcon({ 'aria-label': ariaLabel = 'Tablet', copyrightYear =
         copyrightYear: copyrightYear,
         ...props
     }, React.createElement("path", {
+        d: "M13 4C13.5523 4 14 4.44772 14 5C14 5.55228 13.5523 6 13 6H11C10.4477 6 10 5.55228 10 5C10 4.44772 10.4477 4 11 4H13Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
-        d: "M2 2C2 0.89543 2.89543 0 4 0H20C21.1046 0 22 0.895431 22 2V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H20V18H4V2ZM12 22.5C12.8284 22.5 13.5 21.8284 13.5 21C13.5 20.1716 12.8284 19.5 12 19.5C11.1716 19.5 10.5 20.1716 10.5 21C10.5 21.8284 11.1716 22.5 12 22.5Z",
+        d: "M20 0C21.1046 0 22 0.895431 22 2V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2C2 0.895431 2.89543 0 4 0H20ZM4 22H20V2H4V22Z",
         fill: "currentColor"
     }));
 }

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

@@ -165,6 +165,8 @@ export { PackageDeliveryIcon } from './components/package-delivery-icon.js';
 export { PadlockIcon } from './components/padlock-icon.js';
 export { PadlockOpenIcon } from './components/padlock-open-icon.js';
 export { PadlockTickIcon } from './components/padlock-tick-icon.js';
+export { PanelLeftIcon } from './components/panel-left-icon.js';
+export { PanelRightIcon } from './components/panel-right-icon.js';
 export { PasskeyIcon } from './components/passkey-icon.js';
 export { PassportIcon } from './components/passport-icon.js';
 export { PauseCircleIcon } from './components/pause-circle-icon.js';

package/dist/components/icon/index.js

@@ -165,6 +165,8 @@ export { PackageDeliveryIcon } from './components/package-delivery-icon.js';
 export { PadlockIcon } from './components/padlock-icon.js';
 export { PadlockOpenIcon } from './components/padlock-open-icon.js';
 export { PadlockTickIcon } from './components/padlock-tick-icon.js';
+export { PanelLeftIcon } from './components/panel-left-icon.js';
+export { PanelRightIcon } from './components/panel-right-icon.js';
 export { PasskeyIcon } from './components/passkey-icon.js';
 export { PassportIcon } from './components/passport-icon.js';
 export { PauseCircleIcon } from './components/pause-circle-icon.js';

package/dist/components/pictogram/components/map-pin-pictogram.d.ts

@@ -0,0 +1,2 @@
+import { type PictogramProps } from '../pictogram.types.js';
+export declare function MapPinPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/map-pin-pictogram.js

@@ -0,0 +1,32 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+export function MapPinPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Map pin', copyrightYear = '2026', className, ...props }) {
+    return React.createElement(Pictogram, {
+        className: clsx('size-13', className),
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight,
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M39 7C50.5979 7 59.9998 16.5511 60 28.333C60 40.1151 39 71 39 71C39 71 18 40.1151 18 28.333C18.0002 16.5511 27.4021 7 39 7ZM38 10C28.335 10 20.5 17.91 20.5 27.667C20.5004 37.4243 38 63 38 63C38 63 55.4996 37.4243 55.5 27.667C55.5 17.91 47.665 10 38 10Z"
+    }), React.createElement("circle", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        cx: "38",
+        cy: "27",
+        r: "8"
+    })));
+}

package/dist/components/pictogram/components/mobile-device-pictogram.js

@@ -17,20 +17,24 @@ export function MobileDevicePictogram({ mode = 'duo', viewBoxWidth = 78, viewBox
     }, React.createElement("path", {
         className: fill({
             mode,
-            highlight: true
+            outline: true
         }),
-        d: "M41.8564,62.8135 C41.8564,65.1335 39.9754,67.0155 37.6554,67.0155 C35.3354,67.0155 33.4544,65.1335 33.4544,62.8135 C33.4544,60.4935 35.3354,58.6125 37.6554,58.6125 C39.9754,58.6125 41.8564,60.4935 41.8564,62.8135"
+        d: "M53.5273 6C54.6145 6 55.5 7.05322 55.5 8.3457V65.6543C55.5 66.9468 54.6145 68 53.5273 68H22.4727C21.3855 68 20.5 66.9468 20.5 65.6543V8.3457C20.5 7.05322 21.3855 6 22.4727 6H53.5273ZM23.3184 65.249H52.8535V8.75098H23.3184V65.249Z"
     }), React.createElement("path", {
         className: fill({
             mode,
             outline: true
         }),
-        d: "M57.2051,67.753 C57.2051,69.041 56.1571,70.088 54.8701,70.088 L20.7571,70.088 C19.4701,70.088 18.4221,69.041 18.4221,67.753 L18.4221,6.836 C18.4221,5.548 19.4701,4.5 20.7571,4.5 L54.8701,4.5 C56.1571,4.5 57.2051,5.548 57.2051,6.836 L57.2051,67.753 Z M61.6581,7.546 C61.6651,7.544 61.6841,7.536 61.6841,7.536 C61.6841,7.536 60.2381,4.698 57.7131,2.874 C57.7011,2.865 57.6921,2.861 57.6811,2.853 C57.6511,2.832 57.6201,2.815 57.5901,2.795 C57.3791,2.652 57.2021,2.557 57.0581,2.505 C56.4171,2.192 55.7081,2 54.9481,2 L20.8351,2 C18.1691,2 16.0001,4.169 16.0001,6.836 L16.0001,67.753 C16.0001,68.566 16.2141,69.324 16.5711,69.993 C16.5671,69.995 16.5521,70.001 16.5521,70.001 C16.5521,70.001 17.8271,72.454 20.0561,74.249 C20.9071,75.027 22.0271,75.514 23.2721,75.514 L57.3861,75.514 C60.0521,75.514 62.2211,73.345 62.2211,70.679 L62.2211,9.762 C62.2211,8.959 62.0051,8.213 61.6581,7.546 L61.6581,7.546 Z"
-    }), React.createElement("path", {
+        d: "M55.0586 1.75684C55.8186 1.75684 56.5279 1.94872 57.1689 2.26172C57.3128 2.31371 57.4895 2.40896 57.7002 2.55176C57.7302 2.57176 57.762 2.58837 57.792 2.60938C57.8029 2.61731 57.8114 2.62198 57.8232 2.63086C60.3482 4.45486 61.7949 7.29297 61.7949 7.29297C61.7949 7.29297 61.7756 7.30073 61.7686 7.30273C62.1155 7.96966 62.332 8.71566 62.332 9.51855V70.4355C62.332 73.1014 60.1629 75.2703 57.4971 75.2705H23.3828C22.1379 75.2705 21.018 74.7837 20.167 74.0059C17.938 72.2109 16.6621 69.7578 16.6621 69.7578C16.6621 69.7578 16.6776 69.752 16.6816 69.75C16.3246 69.081 16.1104 68.3228 16.1104 67.5098V6.59277C16.1104 3.9259 18.2795 1.75699 20.9453 1.75684H55.0586ZM20.8672 4.25684C19.5804 4.25706 18.5323 5.30494 18.5322 6.59277V67.5098C18.5322 68.7976 19.5804 69.8445 20.8672 69.8447H54.9805C56.2675 69.8447 57.3154 68.7978 57.3154 67.5098V6.59277C57.3154 5.3048 56.2674 4.25684 54.9805 4.25684H20.8672Z"
+    }), React.createElement("rect", {
         className: fill({
             mode,
-            outline: true
+            highlight: true
         }),
-        d: "M24.377,53.2562 L51.407,53.2562 L51.407,10.5762 L24.377,10.5762 L24.377,53.2562 Z M52.024,8.0762 L23.603,8.0762 C22.608,8.0762 21.798,8.8862 21.798,9.8802 L21.798,53.9522 C21.798,54.9462 22.608,55.7562 23.603,55.7562 L52.024,55.7562 C53.019,55.7562 53.829,54.9462 53.829,53.9522 L53.829,9.8802 C53.829,8.8862 53.019,8.0762 52.024,8.0762 L52.024,8.0762 Z"
+        x: "35",
+        y: "12",
+        width: "6",
+        height: "3",
+        rx: "1.5"
     })));
 }

package/dist/components/pictogram/components/notification-pictogram.d.ts

@@ -0,0 +1,2 @@
+import { type PictogramProps } from '../pictogram.types.js';
+export declare function NotificationPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/notification-pictogram.js

@@ -0,0 +1,54 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+export function NotificationPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Notification', copyrightYear = '2026', className, ...props }) {
+    return React.createElement(Pictogram, {
+        className: clsx('size-13', className),
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight,
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M15.1504 33.873H6V31.373H15.1504V33.873Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M71.126 33.873H61.9766V31.373H71.126V33.873Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M22.8906 17.125L21.124 18.8916L14.6543 12.4209L16.4219 10.6533L22.8906 17.125Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M62.4727 12.4219L56.0029 18.8916L54.2354 17.124L60.7051 10.6543L62.4727 12.4219Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        d: "M39.8135 11.1504H37.3135V2.00098H39.8135V11.1504Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M46.0968 60.9717L46.0079 60.9697C45.5887 64.6654 42.9012 67.5292 39.6534 67.5293C36.7305 67.5291 32.1257 65.5263 30.6056 61.6367C30.3517 61.1251 30.1489 60.5763 30.0001 60H16.0763C16.0763 60 15.9052 55.6887 16.0763 54.875C16.5598 52.5757 20.5344 50.6378 20.5607 50.625V40.875C20.5607 32.9538 26.2776 26.2974 34.0148 24.4102V21.75C34.0148 19.4028 36.0232 17.5 38.5001 17.5C40.9769 17.5001 42.9845 19.4028 42.9845 21.75V24.4102C50.7217 26.2974 55.4396 32.9537 55.4396 40.875V51.625C55.4845 51.6469 59.4416 53.5812 59.9239 55.875C60.0949 56.6883 59.9241 59.9964 59.9239 60H46.0968V60.9717ZM32.6066 60C33.267 61.7775 34.6746 63.0194 36.3126 63.0195C37.9517 63.0195 39.3592 61.7784 40.0187 60H32.6066ZM37.5011 27C35.6358 27 34.1219 27.3104 34.1114 27.3125C28.2648 28.8338 23.9445 34.1989 23.9445 40.584V52.3613C23.9253 52.3633 22.5523 52.5091 21.5861 53.7871C20.615 55.0716 20.556 55.9963 20.5558 56H54.4454C54.4454 56 54.4455 54.9999 53.4728 54C52.5059 53.0062 51.0743 52.3691 51.0568 52.3613V40.584C51.0568 34.1989 46.7364 28.8338 40.8898 27.3125C38.913 27.0003 39.3722 27 37.5011 27Z"
+    })));
+}

package/dist/components/pictogram/components/tablet-pictogram.d.ts

@@ -0,0 +1,2 @@
+import { type PictogramProps } from '../pictogram.types.js';
+export declare function TabletPictogram({ mode, viewBoxWidth, viewBoxHeight, 'aria-label': ariaLabel, copyrightYear, className, ...props }: PictogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/components/tablet-pictogram.js

@@ -0,0 +1,40 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+export function TabletPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Tablet', copyrightYear = '2026', className, ...props }) {
+    return React.createElement(Pictogram, {
+        className: clsx('size-13', className),
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight,
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M56.4102 5.98633C57.7769 5.98644 58.8896 7.03957 58.8896 8.33203V65.6396C58.8896 66.9321 57.7769 67.9862 56.4102 67.9863H17.3691C16.0023 67.9863 14.8896 66.9322 14.8896 65.6396V8.33203C14.8896 7.0395 16.0023 5.98633 17.3691 5.98633H56.4102ZM18.4316 65.2354H55.5625V8.73633H18.4316V65.2354Z"
+    }), React.createElement("path", {
+        className: fill({
+            mode,
+            outline: true
+        }),
+        d: "M58.0312 2C58.9684 2.00005 59.8424 2.19118 60.6328 2.50195C60.8104 2.55358 61.0289 2.6471 61.2891 2.78906C61.326 2.80891 61.3644 2.82584 61.4014 2.84668C61.4149 2.85461 61.4257 2.85926 61.4404 2.86816C64.5433 4.67301 66.3253 7.47727 66.3379 7.49707C66.3379 7.49707 66.3143 7.50483 66.3057 7.50684C66.7336 8.16917 67 8.91062 67 9.70801V70.1992C66.9997 72.8464 64.3247 75 61.0371 75H18.9678C17.4326 75 16.0514 74.5166 15.002 73.7441C12.2531 71.9617 10.6807 69.5254 10.6807 69.5254C10.6807 69.5254 10.6991 69.5196 10.7041 69.5176C10.2639 68.8533 10 68.1003 10 67.293V6.80176C10.0003 4.1536 12.6753 2 15.9629 2H58.0312ZM15.8662 4.48242C14.2793 4.48249 12.9876 5.523 12.9873 6.80176V67.293C12.9873 68.5719 14.2791 69.6122 15.8662 69.6123H57.9346C59.5217 69.6123 60.8145 68.572 60.8145 67.293V6.80176C60.8142 5.52296 59.5215 4.48242 57.9346 4.48242H15.8662Z"
+    }), React.createElement("rect", {
+        className: fill({
+            mode,
+            highlight: true
+        }),
+        x: "33",
+        y: "12",
+        width: "8",
+        height: "3",
+        rx: "1.5"
+    })));
+}

package/dist/components/pictogram/components/target-pictogram.js

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import React from 'react';
 import { Pictogram } from '../pictogram.component.js';
 import { fill } from '../pictogram.styles.js';
-export function TargetPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Passport', copyrightYear = '2025', className, ...props }) {
+export function TargetPictogram({ mode = 'duo', viewBoxWidth = 78, viewBoxHeight = 78, 'aria-label': ariaLabel = 'Target', copyrightYear = '2025', className, ...props }) {
     return React.createElement(Pictogram, {
         className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,

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

@@ -54,12 +54,14 @@ export { HeartPictogram } from './components/heart-pictogram.js';
 export { HousePictogram } from './components/house-pictogram.js';
 export { LightBulbPictogram } from './components/light-bulb-pictogram.js';
 export { LoopPictogram } from './components/loop-pictogram.js';
+export { MapPinPictogram } from './components/map-pin-pictogram.js';
 export { MedicareCardPictogram } from './components/medicare-card-pictogram.js';
 export { MobileDevicePictogram } from './components/mobile-device-pictogram.js';
 export { MoneyInPictogram } from './components/money-in-pictogram.js';
 export { MoneyOutPictogram } from './components/money-out-pictogram.js';
 export { MovieTicketsPictogram } from './components/movie-tickets-pictogram.js';
 export { NestEggPictogram } from './components/nest-egg-pictogram.js';
+export { NotificationPictogram } from './components/notification-pictogram.js';
 export { NoodlesPictogram } from './components/noodles-pictogram.js';
 export { Number1Pictogram } from './components/number-1-pictogram.js';
 export { Number2Pictogram } from './components/number-2-pictogram.js';
@@ -81,6 +83,7 @@ export { ShoppingPictogram } from './components/shopping-pictogram.js';
 export { SparklePictogram } from './components/sparkle-pictogram.js';
 export { StarPictogram } from './components/star-pictogram.js';
 export { StopwatchPictogram } from './components/stopwatch-pictogram.js';
+export { TabletPictogram } from './components/tablet-pictogram.js';
 export { TargetPictogram } from './components/target-pictogram.js';
 export { TaxDocumentPictogram } from './components/tax-document-pictogram.js';
 export { TelephoneCallPictogram } from './components/telephone-call-pictogram.js';

package/dist/components/pictogram/index.js

@@ -54,12 +54,14 @@ export { HeartPictogram } from './components/heart-pictogram.js';
 export { HousePictogram } from './components/house-pictogram.js';
 export { LightBulbPictogram } from './components/light-bulb-pictogram.js';
 export { LoopPictogram } from './components/loop-pictogram.js';
+export { MapPinPictogram } from './components/map-pin-pictogram.js';
 export { MedicareCardPictogram } from './components/medicare-card-pictogram.js';
 export { MobileDevicePictogram } from './components/mobile-device-pictogram.js';
 export { MoneyInPictogram } from './components/money-in-pictogram.js';
 export { MoneyOutPictogram } from './components/money-out-pictogram.js';
 export { MovieTicketsPictogram } from './components/movie-tickets-pictogram.js';
 export { NestEggPictogram } from './components/nest-egg-pictogram.js';
+export { NotificationPictogram } from './components/notification-pictogram.js';
 export { NoodlesPictogram } from './components/noodles-pictogram.js';
 export { Number1Pictogram } from './components/number-1-pictogram.js';
 export { Number2Pictogram } from './components/number-2-pictogram.js';
@@ -81,6 +83,7 @@ export { ShoppingPictogram } from './components/shopping-pictogram.js';
 export { SparklePictogram } from './components/sparkle-pictogram.js';
 export { StarPictogram } from './components/star-pictogram.js';
 export { StopwatchPictogram } from './components/stopwatch-pictogram.js';
+export { TabletPictogram } from './components/tablet-pictogram.js';
 export { TargetPictogram } from './components/target-pictogram.js';
 export { TaxDocumentPictogram } from './components/tax-document-pictogram.js';
 export { TelephoneCallPictogram } from './components/telephone-call-pictogram.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -254,8 +254,8 @@
     "vite": "^7.3.5",
     "vitest": "^3.2.6",
     "@westpac/eslint-config": "~1.1.0",
-    "@westpac/test-config": "~0.0.0",
     "@westpac/style-config": "~1.0.2",
+    "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
@@ -290,6 +290,7 @@
     "build:types": "tsc --project tsconfig.build.json",
     "build:esm": "swc ./src -d dist --no-swcrc --config-file .swcrc",
     "build:icons": "node --loader ts-node/esm ./utils/build-icons/index.ts",
+    "build:pictogram-assets": "node --loader ts-node/esm ./utils/build-pictogram-assets/index.ts",
     "build:exports": "node --loader ts-node/esm ./utils/build-exports/index.ts && prettier --write package.json",
     "build:watch": "pnpm clean && pnpm build:types && pnpm build:esm -w && pnpm build:css:all",
     "build:type-table": "node generate-component-types.cjs",

package/src/components/heading/heading.component.tsx

@@ -1,14 +1,17 @@
 'use client';
 
-import React from 'react';
+import React, { forwardRef, Ref } from 'react';
 
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 
 import { styles } from './heading.styles.js';
-import { type HeadingProps } from './heading.types.js';
+import { HeadingRef, type HeadingProps } from './heading.types.js';
 
-export function Heading({ className, tag, brandHeading, size, children, uppercase, ...props }: HeadingProps) {
+function BaseHeading(
+  { className, tag, brandHeading, size, children, uppercase, ...props }: HeadingProps,
+  ref: Ref<HeadingRef>,
+) {
   const sizeToTag = {
     1: 'h1',
     2: 'h2',
@@ -32,9 +35,12 @@ export function Heading({ className, tag, brandHeading, size, children, uppercas
         size: resolveResponsiveVariant(size, breakpoint),
         uppercase,
       })}
+      ref={ref}
       {...props}
     >
       {children}
     </Tag>
   );
 }
+
+export const Heading = forwardRef(BaseHeading);

package/src/components/heading/heading.types.ts

@@ -6,6 +6,7 @@ import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
 import { styles } from './heading.styles.js';
 
 type Variants = VariantProps<typeof styles>;
+export type HeadingRef = HTMLHeadingElement;
 
 export type HeadingProps = {
   /**

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PanelLeftIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Panel Left',
+  copyrightYear = '2026',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          d="M19.7778 2C20.3889 2 20.912 2.21759 21.3472 2.65278C21.7824 3.08796 22 3.61111 22 4.22222L22 19.7778C22 20.3889 21.7824 20.912 21.3472 21.3472C20.912 21.7824 20.3889 22 19.7778 22L4.22222 22C3.61111 22 3.08796 21.7824 2.65277 21.3472C2.21759 20.912 2 20.3889 2 19.7778L2 4.22222C2 3.61111 2.21759 3.08796 2.65278 2.65278C3.08796 2.21759 3.61111 2 4.22222 2L19.7778 2ZM10 4L10 20L20 20L20 4L10 4Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.7773 2C20.3885 2 20.9125 2.21716 21.3477 2.65234C21.7828 3.08753 22 3.61155 22 4.22266V19.7773C22 20.3885 21.7828 20.9125 21.3477 21.3477C20.9125 21.7828 20.3885 22 19.7773 22H4.22266C3.61155 22 3.08753 21.7828 2.65234 21.3477C2.21716 20.9125 2 20.3885 2 19.7773V4.22266C2 3.61155 2.21716 3.08753 2.65234 2.65234C3.08753 2.21716 3.61155 2 4.22266 2H19.7773ZM4 4V20H8V4H4ZM10 20H20V4H10V20Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/panel-right-icon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PanelRightIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Panel Right',
+  copyrightYear = '2026',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          d="M19.7778 2C20.3889 2 20.912 2.21759 21.3472 2.65278C21.7824 3.08796 22 3.61111 22 4.22222L22 19.7778C22 20.3889 21.7824 20.912 21.3472 21.3472C20.912 21.7824 20.3889 22 19.7778 22L4.22222 22C3.61111 22 3.08796 21.7824 2.65277 21.3472C2.21759 20.912 2 20.3889 2 19.7778L2 4.22222C2 3.61111 2.21759 3.08796 2.65278 2.65278C3.08796 2.21759 3.61111 2 4.22222 2L19.7778 2ZM4 4L4 20L14 20L14 4L4 4Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.7773 2C20.3885 2 20.9125 2.21716 21.3477 2.65234C21.7828 3.08753 22 3.61155 22 4.22266V19.7773C22 20.3885 21.7828 20.9125 21.3477 21.3477C20.9125 21.7828 20.3885 22 19.7773 22H4.22266C3.61155 22 3.08753 21.7828 2.65234 21.3477C2.21716 20.9125 2 20.3885 2 19.7773V4.22266C2 3.61155 2.21716 3.08753 2.65234 2.65234C3.08753 2.21716 3.61155 2 4.22266 2H19.7773ZM4 4V20H14V4H4ZM16 20H20V4H16V20Z"
+          fill="currentColor"
+        />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/phone-icon.tsx

@@ -6,10 +6,14 @@ import { type IconProps } from '../icon.types.js';
 export function PhoneIcon({ 'aria-label': ariaLabel = 'Phone', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        d="M13 4C13.5523 4 14 4.44772 14 5C14 5.55228 13.5523 6 13 6H11C10.4477 6 10 5.55228 10 5C10 4.44772 10.4477 4 11 4H13Z"
+        fill="currentColor"
+      />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5 2C5 0.89543 5.89543 0 7 0H17C18.1046 0 19 0.895431 19 2V22C19 23.1046 18.1046 24 17 24H7C5.89543 24 5 23.1046 5 22V2ZM17 19H7V3H17V19ZM10.5 21.5C10.5 22.33 11.17 23 12 23C12.83 23 13.5 22.33 13.5 21.5C13.5 20.67 12.83 20 12 20C11.17 20 10.5 20.67 10.5 21.5Z"
+        d="M17 0C18.1046 0 19 0.895431 19 2V22C19 23.1046 18.1046 24 17 24H7C5.89543 24 5 23.1046 5 22V2C5 0.895431 5.89543 0 7 0H17ZM7 22H17V2H7V22Z"
         fill="currentColor"
       />
     </Icon>

package/src/components/icon/components/tablet-icon.tsx

@@ -6,10 +6,14 @@ import { type IconProps } from '../icon.types.js';
 export function TabletIcon({ 'aria-label': ariaLabel = 'Tablet', copyrightYear = '2026', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        d="M13 4C13.5523 4 14 4.44772 14 5C14 5.55228 13.5523 6 13 6H11C10.4477 6 10 5.55228 10 5C10 4.44772 10.4477 4 11 4H13Z"
+        fill="currentColor"
+      />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M2 2C2 0.89543 2.89543 0 4 0H20C21.1046 0 22 0.895431 22 2V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2ZM4 2H20V18H4V2ZM12 22.5C12.8284 22.5 13.5 21.8284 13.5 21C13.5 20.1716 12.8284 19.5 12 19.5C11.1716 19.5 10.5 20.1716 10.5 21C10.5 21.8284 11.1716 22.5 12 22.5Z"
+        d="M20 0C21.1046 0 22 0.895431 22 2V22C22 23.1046 21.1046 24 20 24H4C2.89543 24 2 23.1046 2 22V2C2 0.895431 2.89543 0 4 0H20ZM4 22H20V2H4V22Z"
         fill="currentColor"
       />
     </Icon>

package/src/components/icon/index.ts

@@ -165,6 +165,8 @@ export { PackageDeliveryIcon } from './components/package-delivery-icon.js';
 export { PadlockIcon } from './components/padlock-icon.js';
 export { PadlockOpenIcon } from './components/padlock-open-icon.js';
 export { PadlockTickIcon } from './components/padlock-tick-icon.js';
+export { PanelLeftIcon } from './components/panel-left-icon.js';
+export { PanelRightIcon } from './components/panel-right-icon.js';
 export { PasskeyIcon } from './components/passkey-icon.js';
 export { PassportIcon } from './components/passport-icon.js';
 export { PauseCircleIcon } from './components/pause-circle-icon.js';

package/src/components/pictogram/components/map-pin-pictogram.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function MapPinPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Map pin',
+  copyrightYear = '2026',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M39 7C50.5979 7 59.9998 16.5511 60 28.333C60 40.1151 39 71 39 71C39 71 18 40.1151 18 28.333C18.0002 16.5511 27.4021 7 39 7ZM38 10C28.335 10 20.5 17.91 20.5 27.667C20.5004 37.4243 38 63 38 63C38 63 55.4996 37.4243 55.5 27.667C55.5 17.91 47.665 10 38 10Z"
+        />
+        <circle className={fill({ mode, highlight: true })} cx="38" cy="27" r="8" />
+      </g>
+    </Pictogram>
+  );
+}