@westpac/ui 0.17.0 → 0.19.0

package/dist/components/accordion/accordion.component.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ItemProps } from 'react-stately';
 import { type AccordionProps } from './accordion.types.js';
 declare function Accordion<T extends object>({ className, rounded, look, ...props }: AccordionProps<T>, ref: any): import("react/jsx-runtime").JSX.Element;
 declare const _Accordion: {
@@ -16,4 +17,4 @@ declare const _Accordion: {
     ref?: any;
 }) => ReturnType<typeof Accordion>);
 export { _Accordion as Accordion };
-export declare const AccordionItem: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
+export declare const AccordionItem: <T>(props: ItemProps<T>) => JSX.Element;

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

@@ -109,10 +109,12 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
     }, React.createElement("div", {
         className: styles.iconWrapper()
     }, loadingState ? React.createElement(ProgressIndicator, {
-        size: iconSize
+        size: iconSize,
+        color: "muted"
     }) : React.createElement(SearchIcon, {
         "aria-hidden": true,
-        size: iconSize
+        size: iconSize,
+        color: "muted"
     })), React.createElement("input", _extends({}, mergeProps(inputProps, inputFocusProps), {
         ref: inputRef,
         className: styles.input(),

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.styles.d.ts

@@ -8,7 +8,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isDisabled: {
         true: string;
     };
-}, undefined, "flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white", {
+}, undefined, "flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white", {
     responsiveVariants: string[];
 }, {
     isFocused: {

package/dist/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
     variants: {
         isFocused: {
             true: 'bg-hero !text-white'

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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -13,19 +14,24 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import { clsx } from 'clsx';
-import * as React from 'react';
+import React, { useMemo, useRef } from 'react';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 export function AutocompletePopover(props) {
     var _props_triggerRef_current;
-    const ref = React.useRef(null);
+    const ref = useRef(null);
     const { popoverRef =ref , state , children , className , isNonModal , portalContainer  } = props;
     const { popoverProps , underlayProps  } = usePopover({
         ...props,
         popoverRef
     }, state);
+    const brandContainer = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body;
+        }
+    }, []);
     const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
     return React.createElement(Overlay, {
-        portalContainer: portalContainer
+        portalContainer: portalContainer || brandContainer
     }, !isNonModal && React.createElement("div", _extends({}, underlayProps, {
         className: "fixed inset-0"
     })), React.createElement("div", _extends({}, popoverProps, {

package/dist/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.js

@@ -2,8 +2,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
-        title: 'typography-body-7 p-7 pb-4 pt-9 font-bold max-md:px-5',
-        body: 'flex-1 overflow-auto px-7 pb-7 max-md:px-5',
+        title: 'typography-body-7 p-7 pb-4 pt-9 font-bold text-text max-md:px-5',
+        body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5',
         closeBtn: 'absolute right-3 top-3 p-0',
         buttonWrapper: '-mt-2 flex gap-1 px-7 pb-7 max-md:flex-col max-md:px-5 max-md:pb-5',
         primaryBtn: '',

package/dist/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.js

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import { motion, useAnimation } from 'framer-motion';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 import { BREAKPOINTS } from '../../../../tailwind/constants/index.js';
 import { styles as bottomSheetModalStyles } from './bottom-sheet-modal.styles.js';
@@ -32,6 +32,11 @@ export function BottomSheetModal({ state , height , width , children , portalCon
     const { modalProps , underlayProps  } = useModalOverlay(props, state, ref);
     const controls = useAnimation();
     const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
+    const brandContainer = useMemo(()=>{
+        if (isBrowser) {
+            return document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body;
+        }
+    }, []);
     useEffect(()=>{
         function handleResize() {
             setIsMobile(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
@@ -64,7 +69,7 @@ export function BottomSheetModal({ state , height , width , children , portalCon
         return null;
     }
     return React.createElement(Overlay, {
-        portalContainer: portalContainer
+        portalContainer: portalContainer || brandContainer
     }, React.createElement("div", _extends({
         className: styles.underlay()
     }, underlayProps), React.createElement(motion.div, {

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

@@ -16,21 +16,68 @@ function _extends() {
 import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { ButtonGroupButton, ErrorMessage, Hint, Label } from '../index.js';
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 export const ButtonGroupContext = createContext({
-    name: '',
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    validationState: null,
-    selectedValue: null,
-    setSelectedValue: ()=>null,
-    lastFocusedValue: null,
-    setLastFocusedValue: ()=>null,
     block: false,
     look: 'hero',
-    size: 'medium'
+    size: 'medium',
+    state: {
+        name: '',
+        isDisabled: false,
+        isReadOnly: false,
+        isRequired: false,
+        validationState: null,
+        selectedValue: null,
+        setSelectedValue: ()=>null,
+        lastFocusedValue: null,
+        setLastFocusedValue: ()=>null,
+        isInvalid: false,
+        realtimeValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        displayValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        updateValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        resetValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        commitValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        }
+    }
 });
 export function ButtonGroup({ className , buttons , label , look ='hero' , size ='medium' , block =false , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
@@ -55,7 +102,7 @@ export function ButtonGroup({ className , buttons , label , look ='hero' , size
         className: styles.buttonWrapper()
     }, React.createElement(ButtonGroupContext.Provider, {
         value: {
-            ...state,
+            state,
             size,
             look,
             block

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

@@ -40,5 +40,13 @@ export type ButtonGroupContextState = {
      * Controls look of `Button` components, can't be applied directly to `Button`
      */
     look?: 'hero' | 'primary';
-} & RadioGroupState & Pick<ButtonProps, 'size'>;
+    /**
+     * Controls look of `Button` components, can't be applied directly to `Button`
+     */
+    size: ButtonProps['size'];
+    /**
+     * Radio group state
+     */
+    state: RadioGroupState;
+};
 export {};

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

@@ -19,8 +19,7 @@ import { Button as GELButton } from '../../../button/index.js';
 import { ButtonGroupContext } from '../../button-group.component.js';
 import { styles as buttonStyles } from './button-group-button.styles.js';
 export function ButtonGroupButton({ className , label , ...props }) {
-    const state = useContext(ButtonGroupContext);
-    const { size , look , block  } = state;
+    const { state , size , look , block  } = useContext(ButtonGroupContext);
     const ref = useRef(null);
     const { inputProps , isSelected , isDisabled  } = useRadio({
         ...props,

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

@@ -16,6 +16,7 @@ function _extends() {
 import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
 import { CheckboxGroupCheckbox, ErrorMessage, Hint, Label } from '../index.js';
@@ -23,15 +24,65 @@ import { styles as checkboxStyles } from './checkbox-group.styles.js';
 export const CheckboxGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium',
-    value: [],
-    isDisabled: false,
-    isReadOnly: false,
-    isSelected: ()=>false,
-    setValue: ()=>null,
-    addValue: ()=>null,
-    removeValue: ()=>null,
-    toggleValue: ()=>null,
-    validationState: 'valid'
+    state: {
+        value: [],
+        isDisabled: false,
+        isReadOnly: false,
+        isSelected: ()=>false,
+        setValue: ()=>null,
+        addValue: ()=>null,
+        removeValue: ()=>null,
+        toggleValue: ()=>null,
+        validationState: 'valid',
+        isInvalid: false,
+        isRequired: false,
+        setInvalid: ()=>function() {
+                throw new Error(FUNCTION_NOT_IMPLEMENTED);
+            },
+        realtimeValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        displayValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        updateValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        resetValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        commitValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        }
+    }
 });
 export function CheckboxGroup({ className , checkboxes , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useCheckboxGroupState({
@@ -82,7 +133,7 @@ export function CheckboxGroup({ className , checkboxes , label , orientation ='v
         id: panelId
     }, React.createElement(CheckboxGroupContext.Provider, {
         value: {
-            ...state,
+            state,
             orientation,
             size
         }

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

@@ -41,4 +41,8 @@ export type CheckboxGroupContextState = {
      * Controls size of `CheckboxItem` components, can't be applied directly on `CheckboxItem`
      */
     size: 'medium' | 'large';
-} & CheckboxGroupState;
+    /**
+     * State
+     */
+    state: CheckboxGroupState;
+};

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

@@ -32,8 +32,7 @@ function CheckIcon({ copyrightYear ='2024' , size , ...props }) {
     }));
 }
 function BaseCheckbox({ className , hint , label , value , ...props }, ref) {
-    const state = useContext(CheckboxGroupContext);
-    const { size , orientation  } = state;
+    const { state , size , orientation  } = useContext(CheckboxGroupContext);
     const localRef = useRef(null);
     const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
         ...props,

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

@@ -34,6 +34,7 @@ export type DatePickerProps = {
     onClose?: (...args: any[]) => unknown;
     onFocus?: (...args: any[]) => unknown;
     onOpen?: (...args: any[]) => unknown;
+    placeholder?: string;
     /**
      * Size of datepicker input
      */

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/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

@@ -1,3 +1,4 @@
+'use client';
 function _extends() {
     _extends = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -12,7 +13,7 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 import { styles as backdropStyles } from './modal-backdrop.styles.js';
 export function ModalBackdrop({ zIndex =100 , portalContainer , size , ...props }) {
@@ -24,11 +25,16 @@ export function ModalBackdrop({ zIndex =100 , portalContainer , size , ...props
         fluid: size === 'fluid'
     });
     const { modalProps , underlayProps  } = useModalOverlay(props, state, ref);
+    const brandContainer = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body;
+        }
+    }, []);
     if (!state.isOpen) {
         return null;
     }
     return React.createElement(Overlay, {
-        portalContainer: portalContainer
+        portalContainer: portalContainer || brandContainer
     }, React.createElement("div", _extends({
         style: {
             zIndex

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

@@ -1,8 +1,8 @@
 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: 'typography-body-7 pb-4 pt-9 font-bold',
+        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: {

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
@@ -7,7 +7,12 @@ import { styles as panelStyles } from './panel.styles.js';
 export function Panel({ state , heading , headingTag: Tag = 'h1' , content , placement , id , triggerRef  }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
-    const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+    const remSize = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+        }
+        return 1;
+    }, []);
     const [position, setPosition] = useState({
         placement: 'top',
         offset: 'left',

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/popover/popover.hooks.js

@@ -5,7 +5,7 @@ export const usePopoverPosition = (triggerRef, popoverRef, arrowRef, placement)=
     const trigger = triggerRef.current.getBoundingClientRect();
     const popover = popoverRef.current.getBoundingClientRect();
     const arrow = arrowRef.current.getBoundingClientRect();
-    const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+    const remSize = typeof window !== 'undefined' ? parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize) : 1;
     const position = {
         placement: placement ? placement : 'top',
         offset: popover.right >= window.innerWidth ? 'right' : 'left',

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,

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

@@ -16,22 +16,69 @@ function _extends() {
 import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
 import { ErrorMessage, Hint, Label, RadioGroupRadio } from '../index.js';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 export const RadioGroupContext = createContext({
-    name: '',
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    validationState: null,
-    selectedValue: null,
-    setSelectedValue: ()=>null,
-    lastFocusedValue: null,
-    setLastFocusedValue: ()=>null,
     orientation: 'vertical',
-    size: 'medium'
+    size: 'medium',
+    state: {
+        name: '',
+        isDisabled: false,
+        isReadOnly: false,
+        isRequired: false,
+        validationState: null,
+        selectedValue: null,
+        setSelectedValue: ()=>null,
+        lastFocusedValue: null,
+        setLastFocusedValue: ()=>null,
+        isInvalid: false,
+        realtimeValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        displayValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        updateValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        resetValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        commitValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        }
+    }
 });
 export function RadioGroup({ className , radios , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
@@ -84,7 +131,7 @@ export function RadioGroup({ className , radios , label , orientation ='vertical
         id: panelId
     }, React.createElement(RadioGroupContext.Provider, {
         value: {
-            ...state,
+            state,
             orientation,
             size
         }

package/dist/components/radio-group/radio-group.types.d.ts

@@ -37,4 +37,8 @@ export type RadioGroupContextState = {
      * Controls size of `Radio` components, can't be applied directly on `Radio`
      */
     size: 'medium' | 'large';
-} & RadioGroupState;
+    /**
+     * State
+     */
+    state: RadioGroupState;
+};

package/dist/components/selector/components/selector-button-group/selector-button-group.component.js

@@ -13,7 +13,7 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import { createContext, useCallback, useState } from 'react';
+import { createContext, useCallback, useMemo, useState } from 'react';
 import { useField } from 'react-aria';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 import { styles } from './selector-button-group.styles.js';
@@ -31,12 +31,14 @@ export function SelectorButtonGroup({ className , children , label , orientation
         selected,
         setSelected
     ]);
-    const state = {
-        value: selected,
-        onClick: (id)=>handleChange(id),
-        validationState: errorMessage ? 'invalid' : 'valid',
-        isDisabled
-    };
+    const state = useMemo(()=>({
+            value: selected,
+            onClick: (id)=>handleChange(id),
+            validationState: errorMessage ? 'invalid' : 'valid',
+            isDisabled
+        }), [
+        selected
+    ]);
     const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
         validationState: state.validationState,
         label,