@westpac/ui 0.24.1 → 0.26.0

package/dist/components/button/button.component.js

@@ -17,9 +17,10 @@ import React, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className , size ='medium' , look ='hero' , soft , block =false , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , iconColor , children , ...props }, ref) {
+function BaseButton({ className , size ='medium' , look ='hero' , soft , block =false , justify , tag: Tag = 'button' , iconBefore: IconBefore , iconAfter: IconAfter , iconColor , iconSize , children , ...props }, ref) {
     const { isFocusVisible , focusProps  } = useFocusRing();
-    const iconSize = useMemo(()=>getIconSize(size), [
+    const btnIconSize = useMemo(()=>iconSize || getIconSize(size), [
+        iconSize,
         size
     ]);
     const styles = buttonStyles({
@@ -37,14 +38,14 @@ function BaseButton({ className , size ='medium' , look ='hero' , soft , block =
             className
         })
     }, mergeProps(props, focusProps)), IconBefore && React.createElement(IconBefore, {
-        size: iconSize,
+        size: btnIconSize,
         className: styles.iconBefore(),
         color: iconColor,
         "aria-hidden": true
     }), React.createElement("span", {
         className: styles.text()
     }, children), IconAfter && React.createElement(IconAfter, {
-        size: iconSize,
+        size: btnIconSize,
         className: styles.iconAfter(),
         color: iconColor,
         "aria-hidden": true

package/dist/components/button/button.styles.d.ts

@@ -131,4 +131,70 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     iconAfter: string;
     dropdown: string;
     text: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        xlarge: {
+            base: string;
+        };
+    };
+    look: {
+        primary: {
+            base: string;
+        };
+        hero: {
+            base: string;
+        };
+        faint: {
+            base: string;
+        };
+        link: {
+            base: string;
+        };
+    };
+    soft: {
+        true: {
+            base: string;
+        };
+    };
+    block: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    justify: {
+        true: {
+            base: string;
+        };
+    };
+    hasChildren: {
+        true: string;
+    };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    iconBefore: string;
+    iconAfter: string;
+    dropdown: string;
+    text: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

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

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none',
+        base: 'items-center justify-center rounded leading-normal transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none',
         iconBefore: '',
         iconAfter: '',
         dropdown: 'ml-[0.4em]',
@@ -10,16 +10,16 @@ export const styles = tv({
     variants: {
         size: {
             small: {
-                base: 'typography-body-10 px-2 pb-[0.25rem] pt-0.5 active-theme-rams:before:h-[0.0625rem]'
+                base: 'typography-body-10 px-2 pb-1 pt-0.5 active-theme-rams:before:h-[0.0625rem]'
             },
             medium: {
-                base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]'
+                base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-0.5'
             },
             large: {
-                base: 'typography-body-9 px-2.5 py-[0.5rem] active-theme-rams:before:h-0.5'
+                base: 'typography-body-9 px-2.5 py-2 active-theme-rams:before:h-0.5'
             },
             xlarge: {
-                base: 'typography-body-8 px-3 pb-[0.625rem] pt-1.5 active-theme-rams:before:h-[0.25rem]'
+                base: 'typography-body-8 px-3 pb-2.5 pt-1.5 active-theme-rams:before:h-1'
             }
         },
         look: {

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

@@ -3,6 +3,7 @@ import { type VariantProps } from 'tailwind-variants';
 import { IconProps } from '../icon/index.js';
 import { styles } from './button.styles.js';
 type Variants = VariantProps<typeof styles>;
+export type ButtonRef = HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement;
 export type ButtonProps = {
     /**
      * Fit button width to its parent width.
@@ -27,6 +28,12 @@ export type ButtonProps = {
      * Defaults to the current text color.
      */
     iconColor?: IconProps['color'];
+    /**
+     * The size of the icon
+     *
+     * Defaults to system size depending on size of the button
+     */
+    iconSize?: IconProps['size'];
     /**
      * When true, children will use flex justify-between
      * @default false

package/dist/components/button-dropdown/button-dropdown.styles.d.ts

@@ -42,4 +42,27 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     panel: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{
+    dropdownSize: {
+        small: {
+            panel: string;
+        };
+        medium: {
+            panel: string;
+        };
+        large: {
+            panel: string;
+        };
+    };
+    block: {
+        true: {
+            panel: string;
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    panel: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/button-dropdown/components/button-dropdown-heading/button-dropdown-heading.styles.d.ts

@@ -4,4 +4,8 @@ export declare const styles: import("tailwind-variants").TVReturnType<{}, {
     responsiveVariants: string[];
 }, {}, {
     base: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.styles.d.ts

@@ -18,4 +18,15 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     dialog: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{
+    isFocused: {
+        true: {
+            dialog: string;
+        };
+    };
+}, {
+    base: string;
+    dialog: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/button-group/button-group.styles.d.ts

@@ -1,22 +1,35 @@
-export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<{
-    base: string;
-    buttonWrapper: string;
-}, undefined> | {
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            buttonWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<{
-            base: string;
-            buttonWrapper: string;
-        }, undefined>;
-    } | undefined;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            buttonWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
 } | {}, {
     base: string;
     buttonWrapper: string;
 }, undefined, {
     responsiveVariants: string[];
-}, import("tailwind-variants").TVVariantsDefault<{
+}, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            buttonWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
     base: string;
     buttonWrapper: string;
-}, undefined> | {}, {
+}, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
     buttonWrapper: string;
-}>;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/button-group/components/button-group-button/button-group-button.styles.d.ts

@@ -44,4 +44,28 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            button: string;
+        };
+    };
+    block: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/checkbox-group/checkbox-group.styles.d.ts

@@ -38,4 +38,25 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     itemWrapper: string;
     revealButton: string;
     buttonText: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            itemWrapper: string;
+        };
+        vertical: {
+            itemWrapper: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            revealButton: string;
+        };
+    };
+}, {
+    base: string;
+    itemWrapper: string;
+    revealButton: string;
+    buttonText: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const CheckboxGroupCheckbox: React.ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     hint?: React.ReactNode;
     label: React.ReactNode;
 } & Omit<import("react-aria").AriaCheckboxGroupItemProps, "children" | "isIndeterminate"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.styles.d.ts

@@ -84,4 +84,48 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     labelText: string;
     hintText: string;
     checkbox: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        true: {
+            labelText: string;
+            checkbox: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            checkbox: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    size: {
+        large: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+        medium: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    textWrapper: string;
+    labelText: string;
+    hintText: string;
+    checkbox: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/circle/circle.styles.d.ts

@@ -1,3 +1,5 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background", {
     responsiveVariants: string[];
-}, {}, undefined>;
+}, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background", {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/collapsible/collapsible.styles.d.ts

@@ -18,4 +18,15 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     content: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/compacta/compacta.styles.d.ts

@@ -34,4 +34,23 @@ export declare const styles: import("tailwind-variants").TVReturnType<{}, {
     titlePrimary: string;
     titleSecondary: string;
     titleTertiary: string;
-}>;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    item: string;
+    header: string;
+    headerTitle: string;
+    primaryHeading: string;
+    secondaryHeading: string;
+    itemIndex: string;
+    removeBtn: string;
+    addBtn: string;
+    toggleBtn: string;
+    collapsible: string;
+    content: string;
+    footer: string;
+    titlePrimary: string;
+    titleSecondary: string;
+    titleTertiary: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -22,4 +22,17 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined>;
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    block: {
+        true: string;
+        false: string;
+    };
+}, undefined, "date-picker", {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/error-message/error-message.styles.d.ts

@@ -1,25 +1,37 @@
-export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<{
-    base: string;
-    list: string;
-    icon: string;
-}, undefined> | {
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<{
-            base: string;
-            list: string;
-            icon: string;
-        }, undefined>;
-    } | undefined;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
 } | {}, {
     base: string;
     list: string;
     icon: string;
-}, undefined, TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<{
+}, undefined, TVConfig<V, EV>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
     base: string;
     list: string;
     icon: string;
-}, undefined> | {}, {
+}, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
     list: string;
     icon: string;
-}>;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;

package/dist/components/error-message/error-message.styles.js

@@ -1,8 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-11 flex items-center text-danger',
+        base: 'typography-body-11 flex items-start text-danger',
         list: 'mb-2 flex flex-col gap-1',
-        icon: 'mr-[0.5em] align-top'
+        icon: 'mr-[0.5em] align-top mt-[0.15rem]'
     }
 });

package/dist/components/field/field.styles.d.ts

@@ -1,3 +1,5 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {
     responsiveVariants: string[];
-}, {}, undefined>;
+}, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/filter/components/filter-buttons/filter-buttons.component.d.ts

@@ -1,2 +1,2 @@
 import { type FilterButtonsProps } from './filter-buttons.types.js';
-export declare function FilterButtons({ filterButtons, onClick, selectedButton, resultsFound, tag: Tag, className, ...props }: FilterButtonsProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterButtons({ filterButtons, onClick, selectedButton, tag: Tag, className, ...props }: FilterButtonsProps): import("react/jsx-runtime").JSX.Element;