@westpac/ui 1.2.1 → 1.3.2

package/dist/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.js

@@ -12,7 +12,7 @@ export function AutocompletePopover(props) {
     }, state);
     const brandContainer = useMemo(()=>{
         if (typeof window !== 'undefined') {
-            return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
         }
     }, []);
     const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;

package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.js

@@ -20,7 +20,7 @@ export function BottomSheetModal({ zIndex = 10, state, height, width, children,
     const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
     const brandContainer = useMemo(()=>{
         if (isBrowser) {
-            return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
         }
     }, []);
     useEffect(()=>{

package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        underlay: 'fixed inset-0 flex animate-fadeIn flex-col justify-end bg-black/50 transition-all md:items-center md:justify-center',
+        underlay: 'fixed inset-0 flex animate-fadeIn flex-col justify-end bg-black/65 transition-all md:items-center md:justify-center',
         motionWrapper: 'flex flex-col',
         modal: 'flex w-full flex-col'
     }

package/dist/components/date-picker/components/popover/popover.styles.js

@@ -10,7 +10,7 @@ export const styles = tv({
     variants: {
         showAsBottomSheet: {
             true: {
-                underlay: 'animate-fadeIn bg-black/20',
+                underlay: 'animate-fadeIn bg-black/65',
                 popover: '!fixed inset-x-0 !top-auto !bottom-0 !left-0 animate-slideUp overflow-auto rounded-t-3xl px-[8%] pb-3',
                 header: 'mx-[-8vw] flex items-center justify-between border-b border-b-border-muted-soft px-3.5 py-2',
                 headerLabel: 'typography-body-10 text-text-body'

package/dist/components/date-picker/date-picker.component.js

@@ -86,7 +86,7 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
     const buttonRef = useRef(null);
     const { buttonProps: newButtonProps } = useButton(buttonProps, buttonRef);
     const brandContainer = useMemo(()=>{
-        return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
+        return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
     }, []);
     return React.createElement(React.Fragment, null, props.label && React.createElement("div", labelProps, props.label), React.createElement("div", {
         ...props,

package/dist/components/dropdown/dropdown.component.js

@@ -49,7 +49,7 @@ export function Dropdown({ className, portalClassName, dropdownSize = 'medium',
     ]);
     const brandContainer = useMemo(()=>{
         if (typeof window !== 'undefined') {
-            return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
         }
     }, []);
     return React.createElement(React.Fragment, null, React.createElement(Button, {

package/dist/components/icon/components/sort-icon.d.ts

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function SortIcon({ look = 'filled', 'aria-label': ariaLabel = 'Sort', copyrightYear = '2026', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, React.createElement("path", {
+        d: "M18.3643 14.6367L12 21.001L5.63574 14.6367L7.0498 13.2227L12 18.1729L16.9492 13.2227L18.3643 14.6367ZM18.3643 9.36426L16.9502 10.7783L12 5.82812L7.05078 10.7783L5.63672 9.36426L12 3L18.3643 9.36426Z",
+        fill: "currentColor"
+    }));
+}

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

@@ -210,6 +210,7 @@ export { ShoppingBasketIcon } from './components/shopping-basket-icon.js';
 export { SimCardIcon } from './components/sim-card-icon.js';
 export { SlackIcon } from './components/slack-icon.js';
 export { SmsIcon } from './components/sms-icon.js';
+export { SortIcon } from './components/sort-icon.js';
 export { SpaIcon } from './components/spa-icon.js';
 export { StarHalfIcon } from './components/star-half-icon.js';
 export { StarRateIcon } from './components/star-rate-icon.js';

package/dist/components/icon/index.js

@@ -210,6 +210,7 @@ export { ShoppingBasketIcon } from './components/shopping-basket-icon.js';
 export { SimCardIcon } from './components/sim-card-icon.js';
 export { SlackIcon } from './components/slack-icon.js';
 export { SmsIcon } from './components/sms-icon.js';
+export { SortIcon } from './components/sort-icon.js';
 export { SpaIcon } from './components/spa-icon.js';
 export { StarHalfIcon } from './components/star-half-icon.js';
 export { StarRateIcon } from './components/star-rate-icon.js';

package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js

@@ -12,7 +12,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, compact, ..
     const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
     const brandContainer = useMemo(()=>{
         if (typeof window !== 'undefined') {
-            return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
         }
     }, []);
     if (!state.isOpen) {

package/dist/components/modal/components/modal-backdrop/modal-backdrop.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'fixed inset-0 flex animate-fadeIn justify-center bg-black/50 px-4',
+        base: 'fixed inset-0 flex animate-fadeIn justify-center bg-black/65 px-4',
         modal: 'relative top-[5vh] z-10 size-fit max-w-full animate-fadeInDown'
     },
     variants: {

package/dist/components/multi-select/components/multi-select-popover/multi-select-popover.component.js

@@ -26,7 +26,7 @@ export function MultiSelectPopover({ children, className, ...props }) {
     }, overlayState);
     const brandContainer = useMemo(()=>{
         if (typeof window !== 'undefined') {
-            return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
         }
     }, []);
     const styles = popoverStyles();

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

@@ -1,2 +1,3 @@
 export { Pagination } from './pagination.component.js';
+export { usePagination } from './pagination.hooks.js';
 export { type PaginationProps } from './pagination.types.js';

package/dist/components/pagination/index.js

@@ -1 +1,2 @@
 export { Pagination } from './pagination.component.js';
+export { usePagination } from './pagination.hooks.js';

package/dist/components/pagination/pagination.hooks.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useState } from 'react';
 export const usePagination = ({ defaultCurrent = 1, totalPages, infinite = false })=>{
     const [currentPage, setCurrentPage] = useState(defaultCurrent);

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

@@ -8,7 +8,7 @@ export const styles = tv({
         after:top-0 after:left-[1.5px] after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-background-white
       `,
         closeBtn: 'absolute top-1 right-1 h-3 p-0',
-        content: 'w-[18.75rem] rounded-xl bg-background-white py-4 pr-5 pl-3',
+        content: 'w-[18.75rem] rounded-xl bg-background-white p-4',
         heading: 'mb-2 typography-body-9 font-medium text-text-body focus-visible:focus-outline',
         body: 'typography-body-10 text-text-body focus-visible:focus-outline'
     },

package/dist/css/westpac-ui.css

@@ -1989,16 +1989,10 @@
       background-color: color-mix(in oklab, var(--color-black, #000) 5%, transparent);
     }
   }
-  .bg-black\/20 {
-    background-color: color-mix(in srgb, #000 20%, transparent);
+  .bg-black\/65 {
+    background-color: color-mix(in srgb, #000 65%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black, #000) 20%, transparent);
-    }
-  }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-black, #000) 65%, transparent);
     }
   }
   .bg-border-danger {
@@ -2442,9 +2436,6 @@
   .py-3 {
     padding-block: calc(0.375rem * 3);
   }
-  .py-4 {
-    padding-block: calc(0.375rem * 4);
-  }
   .py-\[0\.5rem\] {
     padding-block: 0.5rem;
   }

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

@@ -1989,16 +1989,10 @@
       background-color: color-mix(in oklab, var(--color-black, #000) 5%, transparent);
     }
   }
-  .bg-black\/20 {
-    background-color: color-mix(in srgb, #000 20%, transparent);
+  .bg-black\/65 {
+    background-color: color-mix(in srgb, #000 65%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black, #000) 20%, transparent);
-    }
-  }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-black, #000) 65%, transparent);
     }
   }
   .bg-border-danger {
@@ -2442,9 +2436,6 @@
   .py-3 {
     padding-block: calc(0.375rem * 3);
   }
-  .py-4 {
-    padding-block: calc(0.375rem * 4);
-  }
   .py-\[0\.5rem\] {
     padding-block: 0.5rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.2.1",
+  "version": "1.3.2",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -238,7 +238,7 @@
     "glob": "~10.5.0",
     "jsdom": "^22.1.0",
     "plop": "~4.0.5",
-    "postcss": "~8.5.6",
+    "postcss": "~8.5.10",
     "postcss-cli": "~10.1.0",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
@@ -253,10 +253,10 @@
     "typescript": "^5.5.4",
     "vite": "^7.1.12",
     "vitest": "^3.2.4",
-    "@westpac/style-config": "~1.0.2",
+    "@westpac/eslint-config": "~1.1.0",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/eslint-config": "~1.1.0"
+    "@westpac/style-config": "~1.0.2",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@internationalized/date": "~3.10.0",

package/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx

@@ -23,7 +23,7 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
   const brandContainer = useMemo(() => {
     if (typeof window !== 'undefined') {
       return (
-        document.querySelector('[data-theme]') ||
+        document.querySelector('[data-brand]') ||
         document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
         document.body
       );

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -39,7 +39,7 @@ export function BottomSheetModal({
   const brandContainer = useMemo(() => {
     if (isBrowser) {
       return (
-        document.querySelector('[data-theme]') ||
+        document.querySelector('[data-brand]') ||
         document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
         document.body
       );

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     underlay:
-      'fixed inset-0 flex animate-fadeIn flex-col justify-end bg-black/50 transition-all md:items-center md:justify-center',
+      'fixed inset-0 flex animate-fadeIn flex-col justify-end bg-black/65 transition-all md:items-center md:justify-center',
     motionWrapper: 'flex flex-col',
     modal: 'flex w-full flex-col',
   },

package/src/components/date-picker/components/popover/popover.styles.ts

@@ -11,7 +11,7 @@ export const styles = tv({
   variants: {
     showAsBottomSheet: {
       true: {
-        underlay: 'animate-fadeIn bg-black/20',
+        underlay: 'animate-fadeIn bg-black/65',
         popover:
           '!fixed inset-x-0 !top-auto !bottom-0 !left-0 animate-slideUp overflow-auto rounded-t-3xl px-[8%] pb-3',
         header: 'mx-[-8vw] flex items-center justify-between border-b border-b-border-muted-soft px-3.5 py-2',

package/src/components/date-picker/date-picker.component.tsx

@@ -86,7 +86,7 @@ export function DatePicker({
 
   const brandContainer = useMemo(() => {
     return (
-      document.querySelector('[data-theme]') ||
+      document.querySelector('[data-brand]') ||
       document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
       undefined
     );

package/src/components/dropdown/dropdown.component.tsx

@@ -72,7 +72,7 @@ export function Dropdown({
   const brandContainer = useMemo(() => {
     if (typeof window !== 'undefined') {
       return (
-        document.querySelector('[data-theme]') ||
+        document.querySelector('[data-brand]') ||
         document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
         document.body
       );

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function SortIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Sort',
+  copyrightYear = '2026',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        d="M18.3643 14.6367L12 21.001L5.63574 14.6367L7.0498 13.2227L12 18.1729L16.9492 13.2227L18.3643 14.6367ZM18.3643 9.36426L16.9502 10.7783L12 5.82812L7.05078 10.7783L5.63672 9.36426L12 3L18.3643 9.36426Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/index.ts

@@ -210,6 +210,7 @@ export { ShoppingBasketIcon } from './components/shopping-basket-icon.js';
 export { SimCardIcon } from './components/sim-card-icon.js';
 export { SlackIcon } from './components/slack-icon.js';
 export { SmsIcon } from './components/sms-icon.js';
+export { SortIcon } from './components/sort-icon.js';
 export { SpaIcon } from './components/spa-icon.js';
 export { StarHalfIcon } from './components/star-half-icon.js';
 export { StarRateIcon } from './components/star-rate-icon.js';

package/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx

@@ -23,7 +23,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, compact, ..
   const brandContainer = useMemo(() => {
     if (typeof window !== 'undefined') {
       return (
-        document.querySelector('[data-theme]') ||
+        document.querySelector('[data-brand]') ||
         document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
         document.body
       );

package/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'fixed inset-0 flex animate-fadeIn justify-center bg-black/50 px-4',
+    base: 'fixed inset-0 flex animate-fadeIn justify-center bg-black/65 px-4',
     modal: 'relative top-[5vh] z-10 size-fit max-w-full animate-fadeInDown',
   },
   variants: {

package/src/components/multi-select/components/multi-select-popover/multi-select-popover.component.tsx

@@ -42,7 +42,7 @@ export function MultiSelectPopover({ children, className, ...props }: MultiSelec
   const brandContainer = useMemo(() => {
     if (typeof window !== 'undefined') {
       return (
-        document.querySelector('[data-theme]') ||
+        document.querySelector('[data-brand]') ||
         document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
         document.body
       );

package/src/components/pagination/index.ts

@@ -1,2 +1,3 @@
 export { Pagination } from './pagination.component.js';
+export { usePagination } from './pagination.hooks.js';
 export { type PaginationProps } from './pagination.types.js';

package/src/components/pagination/pagination.hooks.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useState } from 'react';
 
 import { type PaginationHookProps } from './pagination.types.js';

package/src/components/popover/components/panel/panel.styles.ts

@@ -10,7 +10,7 @@ export const styles = tv({
         after:top-0 after:left-[1.5px] after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-background-white
       `,
     closeBtn: 'absolute top-1 right-1 h-3 p-0',
-    content: 'w-[18.75rem] rounded-xl bg-background-white py-4 pr-5 pl-3',
+    content: 'w-[18.75rem] rounded-xl bg-background-white p-4',
     heading: 'mb-2 typography-body-9 font-medium text-text-body focus-visible:focus-outline',
     body: 'typography-body-10 text-text-body focus-visible:focus-outline',
   },