@westpac/ui 0.6.0 → 0.7.0

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -1,47 +1,30 @@
 import { Breadcrumb } from './breadcrumb.component.js';
 const meta = {
-    title: 'Example/Breadcrumb',
+    title: 'Components/Breadcrumb',
     component: Breadcrumb,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-2"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: [
             React.createElement(Breadcrumb.Item, {
                 tag: "button",
                 onClick: ()=>alert('Folder 1')
-            }, "Button item"),
-            React.createElement(Breadcrumb.Item, {
-                tag: "a",
-                href: "#test"
-            }, "Anchor item"),
-            React.createElement(Breadcrumb.Item, {
-                tag: "span"
-            }, "Span item"),
-            React.createElement(Breadcrumb.Item, {
-                tag: "span",
-                isDisabled: true
-            }, "Span and disabled"),
+            }, "About us"),
             React.createElement(Breadcrumb.Item, {
                 tag: "a",
-                isDisabled: true,
-                href: "#lol"
-            }, "anchor and disabled"),
+                href: "#nogo"
+            }, "Innovation"),
             React.createElement(Breadcrumb.Item, {
                 tag: "a",
                 href: "#loko"
-            }, "Last item")
+            }, "Principal investments")
         ]
     }
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type BreadcrumbItemProps } from './breadcrumb-item.types.js';
-export declare function BaseBreadcrumbItem({ className, isDisabled, isCurrent, href, children, tag: Tag, ...props }: BreadcrumbItemProps, propRef: any): JSX.Element;
+export declare function BaseBreadcrumbItem({ className, isDisabled, isCurrent, href, children, tag: Tag, ...props }: BreadcrumbItemProps, propRef: any): import("react/jsx-runtime").JSX.Element;
 export declare const BreadcrumbItem: React.ForwardRefExoticComponent<{
     isCurrent?: boolean | undefined;
     isDisabled?: boolean | undefined;

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.d.ts

@@ -6,8 +6,8 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Disabled
  */
-export declare const IsDisabledStory: Story;
+export declare const IsDisabled: Story;

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.stories.js

@@ -1,29 +1,24 @@
 import { BreadcrumbItem } from './breadcrumb-item.component.js';
 const meta = {
-    title: 'Example/Breadcrumb/BreadCrumbItem',
+    title: 'Components/Breadcrumb/BreadCrumbItem',
     component: BreadcrumbItem,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-2"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         isDisabled: false,
-        children: 'Default Crumb'
+        children: 'Strategic partnerships'
     }
 };
-export const IsDisabledStory = {
+export const IsDisabled = {
     args: {
         isDisabled: true,
-        children: 'Disabled Crumb'
+        children: 'Open Banking'
     }
 };

package/dist/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.styles.js

@@ -7,8 +7,8 @@ export const styles = tv({
             false: ''
         },
         isDisabled: {
-            true: 'text-muted-10',
-            false: 'text-muted'
+            true: 'text-text-10',
+            false: 'text-text'
         }
     },
     compoundVariants: [

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Button } from './button.component.js';
 declare const meta: Meta<typeof Button>;
@@ -7,32 +6,32 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Button looks
  */
-export declare const ButtonColors: () => JSX.Element;
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Button sizes
  */
-export declare const ButtonSizes: () => JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Block buttons
  */
-export declare const BlockButtons: () => JSX.Element;
+export declare const Block: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Buttons with icons
  */
-export declare const ButtonIcons: () => JSX.Element;
+export declare const Icons: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Responsive styles
  */
-export declare const ResponsiveSize: () => JSX.Element;
+export declare const ResponsiveSize: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > As anchor tag
  */
-export declare const AsLinkStory: Story;
+export declare const AsLink: Story;
 /**
  * > Disabled look
  */
-export declare const DisabledStory: Story;
+export declare const Disabled: Story;

package/dist/components/button/button.stories.js

@@ -1,21 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
 import { Button } from './button.component.js';
 const meta = {
-    title: 'Example/Button',
+    title: 'Components/Button',
     component: Button,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                style: {
-                    padding: '3rem'
-                }
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
 const LOOKS = [
@@ -35,12 +28,12 @@ const SIZES = [
     'large',
     'xlarge'
 ];
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'Button text'
     }
 };
-export const ButtonColors = ()=>React.createElement("div", {
+export const Colors = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, React.createElement("h3", {
         className: "font-bold"
@@ -56,7 +49,7 @@ export const ButtonColors = ()=>React.createElement("div", {
             look: look,
             soft: true
         }, look))));
-export const ButtonSizes = ()=>React.createElement("div", {
+export const Sizes = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, SIZES.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
             className: "font-bold"
@@ -72,7 +65,7 @@ export const ButtonSizes = ()=>React.createElement("div", {
                 size: size,
                 soft: true
             }, look))))));
-export const BlockButtons = ()=>React.createElement("div", {
+export const Block = ()=>React.createElement("div", {
         className: "flex flex-col gap-2"
     }, SIZES.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
             className: "font-bold"
@@ -83,7 +76,7 @@ export const BlockButtons = ()=>React.createElement("div", {
                 size: size,
                 block: true
             }, look))))));
-export const ButtonIcons = ()=>React.createElement("div", null, React.createElement("div", {
+export const Icons = ()=>React.createElement("div", null, React.createElement("div", {
         className: "mb-4 flex flex-col gap-2"
     }, React.createElement("h2", {
         className: "typography-body-7 font-bold"
@@ -197,28 +190,30 @@ export const ButtonIcons = ()=>React.createElement("div", null, React.createElem
         block: true,
         iconAfter: BurgerIcon
     }))));
-export const ResponsiveSize = ()=>React.createElement("div", null, React.createElement(Button, {
+export const ResponsiveSize = ()=>React.createElement("div", null, React.createElement("div", {
+        className: "py-2"
+    }, React.createElement(Button, {
         size: {
             initial: 'small',
             md: 'large',
             lg: 'xlarge'
         }
-    }, "Responsive Button"), ' ', React.createElement(Button, {
+    }, "Responsive Button")), React.createElement(Button, {
         iconAfter: BurgerIcon,
         size: {
             initial: 'small',
             md: 'large',
             lg: 'xlarge'
         }
-    }, "Responsive Button with icon"), ' ');
-export const AsLinkStory = {
+    }, "Responsive Button with icon"));
+export const AsLink = {
     args: {
         children: 'Link button',
         tag: 'a',
         href: '#'
     }
 };
-export const DisabledStory = {
+export const Disabled = {
     args: {
         children: 'Disabled button',
         disabled: true

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

@@ -10,27 +10,27 @@ export const styles = tv({
     variants: {
         size: {
             small: {
-                base: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]'
+                base: 'active-theme-rams:before:h-[0.0625rem] typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]'
             },
             medium: {
-                base: 'typography-body-9 px-2 py-[0.3125rem]'
+                base: 'active-theme-rams:before:h-[0.125rem] typography-body-9 px-2 py-[0.3125rem]'
             },
             large: {
-                base: 'typography-body-9 px-[0.9375rem] py-[0.5rem]'
+                base: 'active-theme-rams:before:h-[0.1875rem] typography-body-9 px-[0.9375rem] py-[0.5rem]'
             },
             xlarge: {
-                base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]'
+                base: 'active-theme-rams:before:h-[0.25rem] typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]'
             }
         },
         look: {
             primary: {
-                base: 'border-primary bg-primary hover:bg-primary-70 active:bg-primary-50 border text-white'
+                base: 'active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50'
             },
             hero: {
-                base: 'border-hero bg-hero hover:bg-hero-70 active:bg-hero-50 border text-white'
+                base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50'
             },
             faint: {
-                base: 'border-border bg-light text-muted border hover:bg-white active:bg-white'
+                base: 'border border-border bg-light text-muted hover:bg-white active:bg-white'
             },
             link: {
                 base: 'text-link underline'
@@ -70,7 +70,7 @@ export const styles = tv({
             ],
             look: 'primary',
             soft: true,
-            className: 'text-text hover:text-white'
+            className: 'text-text hover:text-white active-theme-rams:text-primary active-theme-rams:hover:text-white'
         },
         {
             slots: [

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

@@ -1,6 +1,5 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ButtonDropdownProps } from './button-dropdown.types.js';
-export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, look, soft, block, }: ButtonDropdownProps): JSX.Element;
+export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, look, soft, block, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ButtonDropdown {
     var Heading: typeof import("./components/heading/heading.component.js").Heading;
 }

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

@@ -58,7 +58,7 @@ export function ButtonDropdown({ className , dropdownSize ='medium' , iconBefore
         soft: soft,
         block: block,
         "aria-expanded": state.isOpen,
-        "aria-controls": "panel-dialog",
+        "aria-controls": panelId,
         className: styles.base()
     }, buttonProps), text), state.isOpen && React.createElement(Panel, _extends({
         className: styles.panel({

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { ButtonDropdown } from './button-dropdown.component.js';
 declare const meta: Meta<typeof ButtonDropdown>;
@@ -7,27 +6,27 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Standard looks of button
  */
-export declare const StandardLooks: () => JSX.Element;
+export declare const StandardLooks: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Soft looks of button
  */
-export declare const SoftLooks: () => JSX.Element;
+export declare const SoftLooks: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Sizes of buttons
  */
-export declare const ButtonSizes: () => JSX.Element;
+export declare const ButtonSizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Sizes of dropdown
  */
-export declare const DropdownSizes: () => JSX.Element;
+export declare const DropdownSizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Block usage example
  */
-export declare const BlockDropdownButton: Story;
+export declare const BlockDropdownButton: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Icon usage example
  */
@@ -36,3 +35,8 @@ export declare const DropdownButtonWithIcons: Story;
  * > With headings example
  */
 export declare const DropdownWithHeadings: Story;
+/**
+ * > Open by default
+ * NOTE: This element has a visual bug on the Storybook Docs page when page loaded but doesn't in dev docs/canvas view
+ */
+export declare const Open: Story;

package/dist/components/button-dropdown/button-dropdown.stories.js

@@ -1,19 +1,14 @@
 import { AndroidIcon } from '../icon/index.js';
 import { ButtonDropdown } from './button-dropdown.component.js';
 const meta = {
-    title: 'Example/ButtonDropdown',
+    title: 'Components/ButtonDropdown',
     component: ButtonDropdown,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>React.createElement(Story, null)
+    ]
 };
 export default meta;
 const LOOKS = [
@@ -32,7 +27,7 @@ const DROPDOWNSIZE = [
     'medium',
     'large'
 ];
-export const DefaultStory = {
+export const Default = {
     args: {
         text: 'Default Dropdown',
         children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
@@ -68,23 +63,48 @@ export const ButtonSizes = ()=>React.createElement("div", null, SIZES.map((size)
         }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
             href: "#",
             className: "text-[blue] underline"
-        }, "content"), "...")))));
+        }, "content"), "...")))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Responsive"), React.createElement(ButtonDropdown, {
+        size: {
+            initial: 'small',
+            md: 'large',
+            lg: 'xlarge'
+        },
+        text: "responsive"
+    }, React.createElement("p", null, "Example dropdown", React.createElement("a", {
+        href: "#",
+        className: "text-[blue] underline"
+    }, "content"), "...")));
 export const DropdownSizes = ()=>React.createElement("div", null, DROPDOWNSIZE.map((size)=>React.createElement(React.Fragment, null, React.createElement("h3", {
             className: "font-bold"
         }, size), React.createElement(ButtonDropdown, {
             dropdownSize: size,
             text: size
-        }, size))));
-export const BlockDropdownButton = {
-    args: {
+        }, size))), React.createElement("h3", {
+        className: "font-bold"
+    }, "Responsive"), React.createElement(ButtonDropdown, {
+        dropdownSize: {
+            initial: 'large',
+            md: 'small',
+            lg: 'medium'
+        },
+        text: "Responsive"
+    }, "Responive"));
+export const BlockDropdownButton = ()=>React.createElement("div", null, React.createElement("h3", {
+        className: "font-bold"
+    }, "Block"), React.createElement(ButtonDropdown, {
         block: true,
-        text: 'Block Dropdown',
-        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
-            href: "#",
-            className: "text-[blue] underline"
-        }, "content"), "...")
-    }
-};
+        text: "Block"
+    }, "Block"), React.createElement("h3", {
+        className: "font-bold"
+    }, "Responsive Block"), React.createElement(ButtonDropdown, {
+        block: {
+            initial: false,
+            lg: true
+        },
+        text: "Responsive Block"
+    }, "Responive Block"));
 export const DropdownButtonWithIcons = {
     args: {
         iconBefore: AndroidIcon,
@@ -102,3 +122,13 @@ export const DropdownWithHeadings = {
         children: React.createElement(React.Fragment, null, React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #1"), "Example dropdown content...", React.createElement(ButtonDropdown.Heading, null, "Dropdown heading #2"), "Example dropdown content...")
     }
 };
+export const Open = {
+    args: {
+        open: true,
+        text: 'Default Dropdown',
+        children: React.createElement("p", null, "Example dropdown", React.createElement("a", {
+            href: "#",
+            className: "text-[blue] underline"
+        }, "content"), "...")
+    }
+};

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type HeadingProps } from './heading.types.js';
-export declare function Heading({ className, tag: Tag, children, ...props }: HeadingProps): JSX.Element;
+export declare function Heading({ className, tag: Tag, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/components/heading/heading.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 text-hero bg-background -mx-1 mb-3 mt-4 p-[0.4375rem] font-medium first-of-type:-mt-1'
+        base: 'typography-body-10 -mx-1 mb-3 mt-4 bg-background p-[0.4375rem] font-medium text-hero first-of-type:-mt-1'
     },
     variants: {}
 }, {

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PanelProps } from './panel.types.js';
-export declare function Panel({ className, children, state, block, id, ...props }: PanelProps): JSX.Element;
+export declare function Panel({ className, children, state, block, id, ...props }: PanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/components/panel/panel.component.js

@@ -13,18 +13,15 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { useCallback, useEffect, useRef } from 'react';
-import { DismissButton, Overlay, mergeProps, useFocusRing, useOverlay, usePopover } from 'react-aria';
+import { DismissButton, Overlay, mergeProps, useFocusRing, usePopover } from 'react-aria';
 import { styles as panelStyles } from './panel.styles.js';
 export function Panel({ className , children , state , block , id , ...props }) {
     var _props_triggerRef_current;
     const popoverRef = useRef(null);
-    const { overlayProps  } = useOverlay({
-        shouldCloseOnBlur: true,
-        onClose: state.close
-    }, popoverRef);
     const { popoverProps  } = usePopover({
         popoverRef,
         shouldFlip: false,
+        isNonModal: true,
         ...props
     }, state);
     const { isFocused , focusProps  } = useFocusRing();
@@ -33,17 +30,24 @@ export function Panel({ className , children , state , block , id , ...props })
     });
     const width = (_props_triggerRef_current = props.triggerRef.current) === null || _props_triggerRef_current === void 0 ? void 0 : _props_triggerRef_current.getBoundingClientRect().width;
     const focusHandler = useCallback((event)=>{
+        if (event.target && popoverRef.current && event.target !== props.triggerRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
+    }, [
+        state.isOpen
+    ]);
+    const clickHandler = useCallback((event)=>{
         if (event.target && popoverRef.current && !popoverRef.current.contains(event.target) && state.isOpen) state.close();
     }, [
         state.isOpen
     ]);
     useEffect(()=>{
         window.document.addEventListener('focusin', focusHandler);
+        window.document.addEventListener('click', clickHandler);
         return ()=>{
             window.document.removeEventListener('focusin', focusHandler);
+            window.document.removeEventListener('click', clickHandler);
         };
     }, []);
-    return React.createElement(Overlay, null, React.createElement("div", _extends({}, mergeProps(popoverProps, overlayProps, focusProps), {
+    return React.createElement(Overlay, null, React.createElement("div", _extends({}, mergeProps(popoverProps, focusProps), {
         id: id,
         "data-testid": "panel-dialog",
         style: {

package/dist/components/button-dropdown/components/panel/panel.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'border-border mt-[0.1875rem] rounded-[3px] border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+        base: 'mt-[0.1875rem] rounded-[3px] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
         dialog: ''
     },
     variants: {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
 export declare const ButtonGroupContext: React.Context<ButtonGroupContextState>;
-export declare function ButtonGroup({ className, children, label, look, size, block, ...props }: ButtonGroupProps): JSX.Element;
+export declare function ButtonGroup({ className, children, label, look, size, block, errorMessage, hintMessage, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ButtonGroup {
     var Button: typeof import("./components/button/button.component.js").Button;
 }

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

@@ -15,6 +15,7 @@ function _extends() {
 import React, { cloneElement, createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 import { Button } from './components/button/button.component.js';
 export const ButtonGroupContext = createContext({
@@ -31,14 +32,15 @@ export const ButtonGroupContext = createContext({
     look: 'hero',
     size: 'medium'
 });
-export function ButtonGroup({ className , children , label , look ='hero' , size ='medium' , block =false , ...props }) {
+export function ButtonGroup({ className , children , label , look ='hero' , size ='medium' , block =false , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
         orientation: 'horizontal'
     });
-    const { radioGroupProps , labelProps  } = useRadioGroup({
+    const { radioGroupProps , labelProps , errorMessageProps , descriptionProps  } = useRadioGroup({
         ...props,
+        'aria-errormessage': Array.isArray(errorMessage) ? errorMessage.join(', ') : errorMessage,
         label,
         orientation: 'horizontal'
     }, state);
@@ -53,7 +55,9 @@ export function ButtonGroup({ className , children , label , look ='hero' , size
         className: styles.base({
             className
         })
-    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement("div", {
+    }, radioGroupProps), React.createElement(FormLabel, _extends({}, labelProps), label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement("div", {
         className: styles.buttonWrapper()
     }, React.createElement(ButtonGroupContext.Provider, {
         value: {