@westpac/ui 0.16.0 → 0.18.0

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

@@ -1,4 +1,5 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
+import { AriaFieldProps } from 'react-aria';
 export type ErrorMessageProps = {
     /**
      * Icon
@@ -7,7 +8,7 @@ export type ErrorMessageProps = {
     /**
      * Message or messages
      */
-    message?: ReactNode | ReactNode[];
+    message?: AriaFieldProps['errorMessage'];
     /**
      * Tag to render
      */

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

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

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

@@ -0,0 +1,40 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function XIcon({ look ='filled' , 'aria-label': ariaLabel = 'X' , copyrightYear ='2024' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("path", {
+        fill: "currentColor",
+        d: "M15.815 19.008h2.12L8.178 5.04h-2.12l9.757 13.968Z"
+    }), React.createElement("path", {
+        fill: "currentColor",
+        "fill-rule": "evenodd",
+        d: "M2 0a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm17.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Z",
+        "clip-rule": "evenodd"
+    })) : React.createElement(Fragment, null, React.createElement("path", {
+        fill: "currentColor",
+        "fill-rule": "evenodd",
+        d: "m19.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Zm-3.5 15.008h2.12L8.178 5.04h-2.12l9.757 13.968Z",
+        "clip-rule": "evenodd"
+    }), React.createElement("path", {
+        fill: "currentColor",
+        "fill-rule": "evenodd",
+        d: "M0 2a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2 0h20v20H2V2Z",
+        "clip-rule": "evenodd"
+    })));
+}

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

@@ -211,7 +211,6 @@ export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
 export { TuneIcon } from './components/tune-icon.js';
-export { TwitterIcon } from './components/twitter-icon.js';
 export { UmbrellaIcon } from './components/umbrella-icon.js';
 export { UploadIcon } from './components/upload-icon.js';
 export { VerifiedIcon } from './components/verified-icon.js';
@@ -229,6 +228,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/dist/components/icon/index.js

@@ -211,7 +211,6 @@ export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
 export { TuneIcon } from './components/tune-icon.js';
-export { TwitterIcon } from './components/twitter-icon.js';
 export { UmbrellaIcon } from './components/umbrella-icon.js';
 export { UploadIcon } from './components/upload-icon.js';
 export { VerifiedIcon } from './components/verified-icon.js';
@@ -229,6 +228,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/dist/components/list/components/list-item/list-item.component.d.ts

@@ -9,5 +9,5 @@ export declare const ListItem: React.ForwardRefExoticComponent<{
     nested?: number | undefined;
     spacing?: "medium" | "large" | undefined;
     target?: React.HTMLAttributeAnchorTarget | undefined;
-    type?: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered" | undefined;
+    type?: "link" | "icon" | "ordered" | "bullet" | "tick" | "cross" | "unstyled" | undefined;
 } & React.HTMLAttributes<Element> & React.RefAttributes<unknown>>;

package/dist/components/list/list.utils.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" resolution-mode="require"/>
 import { GetStateValuesProps } from './list.types.js';
 export declare const getStateValues: (props: GetStateValuesProps) => {
-    type: "link" | "icon" | "bullet" | "tick" | "cross" | "unstyled" | "ordered";
+    type: "link" | "icon" | "ordered" | "bullet" | "tick" | "cross" | "unstyled";
     look: "link" | "primary" | "hero" | "success" | "danger" | "neutral";
     spacing: "medium" | "large";
     icon: ((props: import("../icon/icon.types.js").IconProps) => JSX.Element) | undefined;

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

@@ -20,14 +20,16 @@ export function ModalBackdrop({ zIndex =100 , portalContainer , size , ...props
     const ref = useRef(null);
     const styles = backdropStyles({
         className,
-        fullscreen: size === 'full'
+        fullscreen: size === 'full',
+        fluid: size === 'fluid'
     });
     const { modalProps , underlayProps  } = useModalOverlay(props, state, ref);
     if (!state.isOpen) {
         return null;
     }
+    const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
     return React.createElement(Overlay, {
-        portalContainer: portalContainer
+        portalContainer: portalContainer || brandContainer || document.body
     }, React.createElement("div", _extends({
         style: {
             zIndex

package/dist/components/modal/components/modal-backdrop/modal-backdrop.styles.d.ts

@@ -5,6 +5,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    fluid: {
+        true: {
+            modal: string;
+        };
+    };
 }, {
     base: string;
     modal: string;
@@ -15,6 +20,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    fluid: {
+        true: {
+            modal: string;
+        };
+    };
 }, {
     base: string;
     modal: string;

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

@@ -1,8 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-        modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown'
+        base: 'fixed inset-0 z-50 flex animate-fadeIn items-center justify-center overflow-y-auto bg-black/50 p-2',
+        modal: 'relative top-3 z-10 h-fit w-full animate-fadeInDown'
     },
     variants: {
         fullscreen: {
@@ -10,6 +10,11 @@ export const styles = tv({
                 modal: 'top-0 flex flex-1 flex-col',
                 base: 'flex flex-col p-0'
             }
+        },
+        fluid: {
+            true: {
+                modal: 'px-2'
+            }
         }
     }
 });

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.js

@@ -13,10 +13,15 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { styles } from './modal-dialog-body.styles.js';
+import { useModalDialogContext } from '../../modal-dialog.component.js';
+import { styles as modalBodyStyles } from './modal-dialog-body.styles.js';
 export function ModalDialogBody({ className , children , ...props }) {
+    const { size  } = useModalDialogContext();
+    const styles = modalBodyStyles({
+        size
+    });
     return React.createElement("div", _extends({
-        className: styles({
+        className: styles.base({
             className
         })
     }, props), children);

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.d.ts

@@ -1,5 +1,43 @@
-export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "flex-1 overflow-auto px-4 py-3"> | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "flex-1 overflow-auto px-4 py-3">;
-    } | undefined;
-} | {}, undefined, "flex-1 overflow-auto px-4 py-3", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "flex-1 overflow-auto px-4 py-3"> | {}, undefined>;
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        full: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        fluid: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    size: {
+        full: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        fluid: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>;

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.js

@@ -1,4 +1,33 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex-1 overflow-auto px-4 py-3'
+    slots: {
+        base: 'flex-1 overflow-auto'
+    },
+    variants: {
+        size: {
+            full: {
+                base: 'px-4 py-3'
+            },
+            lg: {
+                base: 'px-12 pb-12'
+            },
+            md: {
+                base: 'px-7 pb-7'
+            },
+            sm: {
+                base: 'px-5 pb-7'
+            },
+            fluid: {
+                base: 'px-5 pb-7'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
 });

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.d.ts

@@ -1,2 +1,2 @@
 import { type ModalDialogFooterProps } from './modal-dialog-footer.types.js';
-export declare function ModalDialogFooter({ className, children, ...props }: ModalDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModalDialogFooter({ className, primaryLabel, primaryOnClick, secondaryLabel, secondaryOnClick, ...props }: ModalDialogFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.js

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -13,11 +14,27 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { styles } from './modal-dialog-footer.styles.js';
-export function ModalDialogFooter({ className , children , ...props }) {
+import { Button } from '../../../../../button/index.js';
+import { useModalDialogContext } from '../../modal-dialog.component.js';
+import { styles as modalFooterStyles } from './modal-dialog-footer.styles.js';
+export function ModalDialogFooter({ className , primaryLabel , primaryOnClick , secondaryLabel , secondaryOnClick , ...props }) {
+    const { size  } = useModalDialogContext();
+    const styles = modalFooterStyles({
+        size
+    });
     return React.createElement("div", _extends({
-        className: styles({
+        className: styles.base({
             className
         })
-    }, props), children);
+    }, props), React.createElement(Button, {
+        look: "primary",
+        size: "large",
+        className: styles.primaryBtn(),
+        onClick: primaryOnClick
+    }, primaryLabel), secondaryLabel && React.createElement(Button, {
+        look: "link",
+        size: "large",
+        className: styles.secondaryBtn(),
+        onClick: secondaryOnClick
+    }, secondaryLabel));
 }

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.styles.d.ts

@@ -1,5 +1,47 @@
-export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "border-t border-t-border bg-background px-3 py-2"> | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "border-t border-t-border bg-background px-3 py-2">;
-    } | undefined;
-} | {}, undefined, "border-t border-t-border bg-background px-3 py-2", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "border-t border-t-border bg-background px-3 py-2"> | {}, undefined>;
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        full: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        fluid: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    primaryBtn: string;
+    secondaryBtn: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    size: {
+        full: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        fluid: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    primaryBtn: string;
+    secondaryBtn: string;
+}>;

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.styles.js

@@ -1,4 +1,35 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'border-t border-t-border bg-background px-3 py-2'
+    slots: {
+        base: 'flex gap-1',
+        primaryBtn: '',
+        secondaryBtn: 'no-underline hover:underline'
+    },
+    variants: {
+        size: {
+            full: {
+                base: 'px-4 py-3'
+            },
+            lg: {
+                base: '-mt-6 px-12 pb-12'
+            },
+            md: {
+                base: '-mt-2 px-7 pb-7'
+            },
+            sm: {
+                base: '-mt-2 flex-col px-5 pb-5'
+            },
+            fluid: {
+                base: '-mt-2 px-5 pb-5 max-md:flex-col'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
 });

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.types.d.ts

@@ -4,4 +4,20 @@ export type ModalDialogFooterProps = {
      * Footer content
      */
     children?: ReactNode;
+    /**
+     * Label for primary button
+     */
+    primaryLabel: string;
+    /**
+     * onClick for primary button
+     */
+    primaryOnClick: () => void;
+    /**
+     * Label for secondary button
+     */
+    secondaryLabel?: string;
+    /**
+     * onClick for secondary button
+     */
+    secondaryOnClick?: () => void;
 } & HTMLAttributes<HTMLElement>;

package/dist/components/modal/components/modal-dialog/modal-dialog.component.d.ts

@@ -1,6 +1,7 @@
 import { ModalDialogBody } from './components/modal-dialog-body/index.js';
 import { ModalDialogFooter } from './components/modal-dialog-footer/index.js';
-import { type ModalDialogProps } from './modal-dialog.types.js';
+import { ModalDialogContextValue, type ModalDialogProps } from './modal-dialog.types.js';
+export declare const useModalDialogContext: () => ModalDialogContextValue;
 /**
  * @private
  */

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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -12,12 +13,16 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { useRef } from 'react';
+import React, { createContext, useContext, useRef } from 'react';
 import { useDialog, useFocusRing } from 'react-aria';
 import { CloseIcon } from '../../../../components/icon/index.js';
 import { ModalDialogBody } from './components/modal-dialog-body/index.js';
 import { ModalDialogFooter } from './components/modal-dialog-footer/index.js';
 import { styles as dialogStyles } from './modal-dialog.styles.js';
+const ModalDialogContext = createContext({
+    size: 'md'
+});
+export const useModalDialogContext = ()=>useContext(ModalDialogContext);
 export function ModalDialog({ className , body , onClose , size ='md' , ...props }) {
     const { children  } = props;
     const { isFocusVisible , focusProps  } = useFocusRing();
@@ -41,7 +46,11 @@ export function ModalDialog({ className , body , onClose , size ='md' , ...props
         size: "small"
     })), props.title && React.createElement("h3", _extends({}, titleProps, {
         className: styles.title()
-    }), props.title), body ? React.createElement(ModalDialogBody, null, children) : children);
+    }), props.title), React.createElement(ModalDialogContext.Provider, {
+        value: {
+            size
+        }
+    }, body ? React.createElement(ModalDialogBody, null, children) : children));
 }
 ModalDialog.Body = ModalDialogBody;
 ModalDialog.Footer = ModalDialogFooter;

package/dist/components/modal/components/modal-dialog/modal-dialog.styles.d.ts

@@ -2,15 +2,24 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         full: {
             base: string;
+            close: string;
+            title: string;
         };
         lg: {
             base: string;
+            title: string;
         };
         md: {
             base: string;
+            title: string;
         };
         sm: {
             base: string;
+            title: string;
+        };
+        fluid: {
+            base: string;
+            title: string;
         };
     };
     isFocusVisible: {
@@ -31,15 +40,24 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         full: {
             base: string;
+            close: string;
+            title: string;
         };
         lg: {
             base: string;
+            title: string;
         };
         md: {
             base: string;
+            title: string;
         };
         sm: {
             base: string;
+            title: string;
+        };
+        fluid: {
+            base: string;
+            title: string;
         };
     };
     isFocusVisible: {

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

@@ -1,23 +1,32 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white outline-none',
-        title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-        close: 'absolute right-1 top-1 block p-1'
+        base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white text-text outline-none',
+        title: 'typography-body-7 pb-4 pt-9 font-bold text-text',
+        close: 'absolute right-0 top-0 block p-3'
     },
     variants: {
         size: {
             full: {
-                base: 'max-h-screen w-full flex-1'
+                base: 'max-h-screen w-full flex-1',
+                close: 'p-2',
+                title: 'px-4 py-3'
             },
             lg: {
-                base: 'w-[56.25rem]'
+                base: 'w-[50rem]',
+                title: 'px-12 pt-12'
             },
             md: {
-                base: 'w-[37.5rem]'
+                base: 'w-[37.5rem]',
+                title: 'px-7 '
             },
             sm: {
-                base: 'w-[18.75rem]'
+                base: 'w-[25rem]',
+                title: 'px-5'
+            },
+            fluid: {
+                base: 'w-full',
+                title: 'px-5'
             }
         },
         isFocusVisible: {

package/dist/components/modal/components/modal-dialog/modal-dialog.types.d.ts

@@ -33,4 +33,10 @@ export type ModalDialogProps = {
      */
     title?: string;
 } & AriaDialogProps;
+export type ModalDialogContextValue = {
+    /**
+     * Size of dialog
+     */
+    size?: Variants['size'];
+};
 export {};

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

@@ -6,8 +6,8 @@ export const styles = tv({
         arrow: 'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
         closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
         content: 'w-[17.625rem] py-4 pl-3 pr-5',
-        heading: 'typography-body-9 mb-2 font-bold',
-        body: 'typography-body-10'
+        heading: 'typography-body-9 mb-2 font-bold text-text',
+        body: 'typography-body-10 text-text'
     },
     variants: {
         placement: {

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

@@ -18,8 +18,7 @@ import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 import { RadioGroupContext } from '../../radio-group.component.js';
 import { styles as radioStyles } from './radio-group-radio.styles.js';
 function BaseRadioGroupRadio({ className , hint , label , ...props }, ref) {
-    const state = useContext(RadioGroupContext);
-    const { size , orientation  } = state;
+    const { state , size , orientation  } = useContext(RadioGroupContext);
     const localRef = useRef(null);
     const { inputProps , isSelected , isDisabled  } = useRadio({
         ...props,