@westpac/ui 1.2.1 → 1.3.0

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 {

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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -253,10 +253,10 @@
     "typescript": "^5.5.4",
     "vite": "^7.1.12",
     "vitest": "^3.2.4",
+    "@westpac/eslint-config": "~1.1.0",
     "@westpac/style-config": "~1.0.2",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/eslint-config": "~1.1.0"
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@internationalized/date": "~3.10.0",

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