@westpac/ui 0.53.1 → 0.53.2

package/dist/components/button/button.styles.js

@@ -33,7 +33,7 @@ export const styles = tv({
                 base: 'border border-borderDark bg-light text-muted hover:bg-white active:bg-white'
             },
             link: {
-                base: 'text-link underline px-0'
+                base: 'px-0 text-link underline'
             },
             unstyled: {
                 base: 'p-0 text-left'

package/dist/components/date-picker-beta/components/calendar/components/calendar-grid/calendar-grid.component.js

@@ -11,7 +11,7 @@ export function CalendarGrid({ state, weekdayStyle = 'short', ...props }) {
         ...gridProps
     }, React.createElement("thead", headerProps, React.createElement("tr", null, weekDays.map((day, index)=>React.createElement("th", {
             key: index,
-            className: "text-text size-6 text-center text-[0.75rem] font-semibold leading-9"
+            className: "size-6 text-center text-[0.75rem] font-semibold leading-9 text-text"
         }, day.toUpperCase().slice(0, 2))))), React.createElement("tbody", null, [
         ...new Array(weeksInMonth).keys()
     ].map((weekIndex)=>React.createElement("tr", {

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

@@ -18,7 +18,7 @@ export const styles = tv({
             },
             false: {
                 underlay: '',
-                closeButton: 'border-border pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
+                closeButton: 'pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border border-border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
                 headerLabel: 'hidden',
                 popover: 'absolute mt-1 scale-100 animate-fadeIn rounded border border-border bg-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]'
             }

package/dist/components/input-group/input-group.component.js

@@ -1,4 +1,5 @@
 'use client';
+import { clsx } from 'clsx';
 import React, { Children, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
 import { ErrorMessage, Hint, Label } from '../index.js';
 import { InputGroupSupportingText } from './components/index.js';
@@ -79,7 +80,7 @@ export function InputGroup({ label, hideLabel, size = 'medium', hint, errorMessa
                     ...width !== 'full' ? {
                         width: width
                     } : {},
-                    className: 'focus:z-10'
+                    className: clsx(child.props.className, 'focus:z-10')
                 });
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.53.1",
+  "version": "0.53.2",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -256,8 +256,8 @@
     "vite": "^7.0.5",
     "vitest": "^3.2.4",
     "@westpac/eslint-config": "~1.0.1",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/test-config": "~0.0.0"
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/button/button.styles.ts

@@ -33,7 +33,7 @@ export const styles = tv(
         },
         hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
         faint: { base: 'border border-borderDark bg-light text-muted hover:bg-white active:bg-white' },
-        link: { base: 'text-link underline px-0' },
+        link: { base: 'px-0 text-link underline' },
         unstyled: { base: 'p-0 text-left' },
       },
       soft: {

package/src/components/date-picker-beta/components/calendar/components/calendar-grid/calendar-grid.component.tsx

@@ -16,7 +16,7 @@ export function CalendarGrid({ state, weekdayStyle = 'short', ...props }: Calend
       <thead {...headerProps}>
         <tr>
           {weekDays.map((day, index) => (
-            <th key={index} className="text-text size-6 text-center text-[0.75rem] font-semibold leading-9">
+            <th key={index} className="size-6 text-center text-[0.75rem] font-semibold leading-9 text-text">
               {day.toUpperCase().slice(0, 2)}
             </th>
           ))}

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

@@ -22,7 +22,7 @@ export const styles = tv(
         false: {
           underlay: '',
           closeButton:
-            'border-border pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
+            'pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border border-border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
           headerLabel: 'hidden',
           popover:
             'absolute mt-1 scale-100 animate-fadeIn rounded border border-border bg-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]',

package/src/components/input-group/input-group.component.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { clsx } from 'clsx';
 import React, {
   Attributes,
   Children,
@@ -96,7 +97,8 @@ export function InputGroup({
           'aria-describedby': ariaDescribedBy || ariaDescribedByValue,
           'aria-label': ariaLabel,
           ...(width !== 'full' ? { width: width } : {}),
-          className: 'focus:z-10', // for focus ring visibility
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument
+          className: clsx(child.props.className, 'focus:z-10'), // for focus ring visibility
         } as Partial<unknown> & Attributes);
       }
     });