@westpac/ui 1.2.0 → 1.3.0

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

@@ -125,7 +125,7 @@ function Autocomplete({ size = 'medium', invalid = false, isDisabled, footer, po
         portalContainer: portalContainer,
         triggerRef: outerRef
     }, React.createElement("div", {
-        className: "bg-background-white px-3 py-2 text-text-muted"
+        className: "bg-background-white px-3 py-2 text-text-muted first:rounded-t-xl only:rounded-xl"
     }, noOptionsMessage), footer && React.createElement("div", {
         className: "rounded-b border-t border-t-border-muted-soft bg-background-white px-3 py-2 text-text-muted"
     }, footer)), state.isOpen && React.createElement(AutocompletePopover, {

package/dist/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.component.js

@@ -8,7 +8,7 @@ export function AutocompleteListBox(props) {
     return React.createElement("ul", {
         ...listBoxProps,
         ref: listBoxRef,
-        className: "w-full overflow-hidden rounded-xl outline-none"
+        className: "w-full overflow-hidden outline-none first:rounded-t-xl only:rounded-xl"
     }, [
         ...state.collection
     ].map((item)=>item.type === 'section' ? React.createElement(AutocompleteListBoxSection, {

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/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.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/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 {
@@ -4121,6 +4115,12 @@
       will-change: opacity;
     }
   }
+  .first\:rounded-t-xl {
+    &:first-child {
+      border-top-left-radius: var(--border-radius-6);
+      border-top-right-radius: var(--border-radius-6);
+    }
+  }
   .first\:pt-0 {
     &:first-child {
       padding-top: calc(0.375rem * 0);
@@ -4143,6 +4143,11 @@
       padding-bottom: calc(0.375rem * 0);
     }
   }
+  .only\:rounded-xl {
+    &:only-child {
+      border-radius: var(--border-radius-6);
+    }
+  }
   .even\:bg-surface-muted-faint {
     &:nth-child(even) {
       background-color: var(--surface-muted-faint);

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 {
@@ -4121,6 +4115,12 @@
       will-change: opacity;
     }
   }
+  .first\:rounded-t-xl {
+    &:first-child {
+      border-top-left-radius: var(--border-radius-6);
+      border-top-right-radius: var(--border-radius-6);
+    }
+  }
   .first\:pt-0 {
     &:first-child {
       padding-top: calc(0.375rem * 0);
@@ -4143,6 +4143,11 @@
       padding-bottom: calc(0.375rem * 0);
     }
   }
+  .only\:rounded-xl {
+    &:only-child {
+      border-radius: var(--border-radius-6);
+    }
+  }
   .even\:bg-surface-muted-faint {
     &:nth-child(even) {
       background-color: var(--surface-muted-faint);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

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

@@ -153,7 +153,9 @@ function Autocomplete<T extends object>(
           portalContainer={portalContainer}
           triggerRef={outerRef}
         >
-          <div className="bg-background-white px-3 py-2 text-text-muted">{noOptionsMessage}</div>
+          <div className="bg-background-white px-3 py-2 text-text-muted first:rounded-t-xl only:rounded-xl">
+            {noOptionsMessage}
+          </div>
           {footer && (
             <div className="rounded-b border-t border-t-border-muted-soft bg-background-white px-3 py-2 text-text-muted">
               {footer}

package/src/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.component.tsx

@@ -15,7 +15,11 @@ export function AutocompleteListBox(props: AutocompleteListBoxProps) {
   const { listBoxProps } = useListBox(props, state, listBoxRef);
 
   return (
-    <ul {...listBoxProps} ref={listBoxRef} className="w-full overflow-hidden rounded-xl outline-none">
+    <ul
+      {...listBoxProps}
+      ref={listBoxRef}
+      className="w-full overflow-hidden outline-none first:rounded-t-xl only:rounded-xl"
+    >
       {[...state.collection].map(item =>
         item.type === 'section' ? (
           <AutocompleteListBoxSection key={item.key} section={item} state={state} />

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/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.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: {