@westpac/ui 0.6.0 → 0.7.0

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Pictogram } from './pictogram.component.js';
 declare const meta: Meta<typeof Pictogram>;
@@ -7,5 +6,5 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
-export declare const DecorativeStory: () => JSX.Element;
+export declare const Default: Story;
+export declare const Decorative: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/pictogram/pictogram.stories.js

@@ -22,7 +22,7 @@ const AllPictogramsExample = (props)=>{
             [key]: symbol
         } : curr, {});
     return React.createElement("div", {
-        className: clsx('grid grid-cols-5 gap-5 p-5', mode === 'light' && 'bg-hero text-white')
+        className: clsx('grid grid-cols-5 gap-5', mode === 'light' && 'bg-hero text-white')
     }, Object.entries(informativePictograms).map(([key, Pictogram])=>React.createElement("div", {
             key: key,
             className: "flex flex-col items-center justify-end"
@@ -31,7 +31,7 @@ const AllPictogramsExample = (props)=>{
         }, key))));
 };
 const meta = {
-    title: 'Example/Pictogram',
+    title: 'Foundation/Pictograms',
     component: AllPictogramsExample,
     tags: [
         'autodocs'
@@ -39,9 +39,6 @@ const meta = {
     decorators: [
         (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'centered'
-    },
     argTypes: {
         mode: {
             description: 'mode',
@@ -57,7 +54,7 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {}
 };
-export const DecorativeStory = ()=>React.createElement(WBCBankCardPictogram, null);
+export const Decorative = ()=>React.createElement(WBCBankCardPictogram, null);

package/dist/components/popover/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({ state, heading, headingTag: Tag, content, placement, id }: PanelProps): JSX.Element;
+export declare function Panel({ state, heading, headingTag: Tag, content, placement, id }: PanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,8 +2,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
-        arrow: 'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        popover: 'absolute z-[999] rounded-[3px] border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+        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',

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type PopoverProps } from './popover.types.js';
-export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, open, icon, }: PopoverProps): JSX.Element;
+export declare function Popover({ children, className, headingTag, content, heading, onClick, placement, look, open, icon, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { Popover } from './popover.component.js';
 declare const meta: Meta<typeof Popover>;
@@ -7,20 +6,20 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Using icon as trigger
  */
-export declare const PopoverIconTrigger: Story;
+export declare const IconTrigger: Story;
 /**
  * > Default open
  */
-export declare const DefaultOpenPopover: Story;
+export declare const DefaultOpen: Story;
 /**
  * > No heading
  */
-export declare const PopoverNoHeading: Story;
+export declare const NoHeading: Story;
 /**
  * > Top and bottom popover
  */
-export declare const PopoverPlacement: () => JSX.Element;
+export declare const PopoverPlacement: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.stories.js

@@ -2,44 +2,41 @@ import { HelpIcon } from '../icon/index.js';
 import { Popover } from './popover.component.js';
 const popoverContent = 'Small overlays of content for housing secondary information. These are often used to provide explanatory information for complex ideas.';
 const meta = {
-    title: 'Example/Popover',
+    title: 'Components/Popover',
     component: Popover,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement("div", {
-                className: "p-[200px]"
+                className: "p-29"
             }, React.createElement(Story, null))
     ],
-    parameters: {
-        layout: 'center'
-    },
     args: {
         content: popoverContent,
         heading: 'Test Heading'
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'Click Me'
     }
 };
-export const PopoverIconTrigger = {
+export const IconTrigger = {
     args: {
         icon: ()=>React.createElement(HelpIcon, {
                 color: "hero"
             })
     }
 };
-export const DefaultOpenPopover = {
+export const DefaultOpen = {
     args: {
         children: 'Click Me',
         open: true
     }
 };
-export const PopoverNoHeading = {
+export const NoHeading = {
     args: {
         children: 'Click Me',
         open: true,

package/dist/components/progress-bar/progress-bar.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressBarProps } from './progress-bar.types.js';
-export declare function ProgressBar({ className, look, value, noLabel, ...props }: ProgressBarProps): JSX.Element;
+export declare function ProgressBar({ className, look, value, noLabel, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-bar/progress-bar.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta, type StoryObj } from '@storybook/react';
 import { ProgressBar } from './progress-bar.component.js';
 declare const meta: Meta<typeof ProgressBar>;
@@ -7,16 +6,16 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Skinny example
  */
-export declare const ProgressBarSkinny: Story;
+export declare const Skinny: Story;
 /**
  * > No label example
  */
-export declare const ProgressBarNoLabel: Story;
+export declare const NoLabel: Story;
 /**
  * Example of Progress Bar controlled by buttons
  */
-export declare const ProgressBarControlled: () => JSX.Element;
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-bar/progress-bar.stories.js

@@ -2,41 +2,36 @@ import { useCallback, useState } from 'react';
 import { Button } from '../button/index.js';
 import { ProgressBar } from './progress-bar.component.js';
 const meta = {
-    title: 'Example/ProgressBar',
+    title: 'Components/ProgressBar',
     component: ProgressBar,
     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;
-export const DefaultStory = {
+export const Default = {
     args: {
         value: 50,
         look: 'default'
     }
 };
-export const ProgressBarSkinny = {
+export const Skinny = {
     args: {
         value: 50,
         look: 'skinny'
     }
 };
-export const ProgressBarNoLabel = {
+export const NoLabel = {
     args: {
         value: 50,
         look: 'default',
         noLabel: true
     }
 };
-export const ProgressBarControlled = ()=>{
+export const Controlled = ()=>{
     const [barValue, setBarValue] = useState(0);
     const handleProgress = useCallback((calc)=>{
         const progress = barValue + calc;

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressRopeGroupStepProps } from './progress-rope-group-step.types.js';
-export declare function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, }: ProgressRopeGroupStepProps): JSX.Element;
+export declare function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, }: ProgressRopeGroupStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.js

@@ -43,7 +43,6 @@ export function ProgressRopeGroupStep({ steps , currentKey , furthestVisitedStep
         current,
         visited
     ]);
-    console.log('state', state);
     const styles = progressRopeGroupStyles({
         firstItem,
         state

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.d.ts

@@ -22,7 +22,7 @@ export type ProgressRopeGroupStepProps = {
     /**
      * Trigger when the user try to open/close the group
      */
-    onToggle?: () => any;
+    onToggle?: () => unknown;
     /**
      * Boolean to tell if group is expanded
      */

package/dist/components/progress-rope/components/progress-rope-step/progress-rope-step.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressRopeStepProps } from './progress-rope-step.types.js';
-export declare function ProgressRopeStep({ className, current, visited, tag: Tag, type, size, children, firstItem, ...props }: ProgressRopeStepProps): JSX.Element;
+export declare function ProgressRopeStep({ className, current, visited, tag: Tag, type, size, children, firstItem, ...props }: ProgressRopeStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-rope/progress-rope.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type ProgressRopeProps } from './progress-rope.types.js';
-export declare function ProgressRope({ 'aria-label': ariaLabel, role, className, tag: Tag, current, data, ...props }: ProgressRopeProps): JSX.Element;
+export declare function ProgressRope({ 'aria-label': ariaLabel, role, className, tag: Tag, current, data, ...props }: ProgressRopeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-rope/progress-rope.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;
 /**
  * > Grouping steps story usage example
  */
-export declare const GroupingStepsStory: Story;
+export declare const GroupingSteps: Story;

package/dist/components/progress-rope/progress-rope.stories.js

@@ -2,20 +2,17 @@ import { useCallback, useState } from 'react';
 import { Button } from '../index.js';
 import { ProgressRope } from './progress-rope.component.js';
 const meta = {
-    title: 'Example/ProgressRope',
+    title: 'Components/ProgressRope',
     component: ProgressRope,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'centered'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {},
     render: ()=>{
         const [activeIndex, setActiveIndex] = useState(0);
@@ -58,7 +55,7 @@ export const DefaultStory = {
         }, "next")));
     }
 };
-export const GroupingStepsStory = {
+export const GroupingSteps = {
     args: {},
     render: ()=>{
         const [activeIndex, setActiveIndex] = useState(0);

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

@@ -6,12 +6,12 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Base radio, unchecked as that is handled by RadioGroup
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Radio with hint example
  */
-export declare const RadioWithHint: Story;
+export declare const Hint: Story;
 /**
  * > Disabled Radio example
  */
-export declare const RadioDisabled: Story;
+export declare const Disabled: Story;

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

@@ -1,18 +1,13 @@
 import { Radio } from './radio.component.js';
 const meta = {
-    title: 'Example/RadioGroup/Radio',
+    title: 'Components/RadioGroup/Radio',
     component: Radio,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex justify-center p-3"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     argTypes: {
         isDisabled: {
             description: 'Controls whether individual radio options are disabled or not',
@@ -23,20 +18,20 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         children: 'Option 1',
         value: 'Option 1'
     }
 };
-export const RadioWithHint = {
+export const Hint = {
     args: {
         children: 'Option 1',
         value: 'Option 1',
         hint: 'Test hint'
     }
 };
-export const RadioDisabled = {
+export const Disabled = {
     args: {
         children: 'Option 1',
         value: 'Option 1',

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

@@ -5,7 +5,7 @@ export const styles = tv({
         textWrapper: 'flex flex-col justify-center',
         labelText: 'typography-body-10 py-[2px] pl-1',
         hintText: 'typography-body-10 text-muted pl-1',
-        selector: 'border-hero flex h-4 w-4 items-center justify-center rounded-full border'
+        selector: 'border-hero flex shrink-0 h-4 w-4 items-center justify-center rounded-full border'
     },
     variants: {
         isDisabled: {
@@ -19,7 +19,7 @@ export const styles = tv({
         },
         isSelected: {
             true: {
-                selector: 'before:bg-hero before:block before:h-2 before:w-2 before:rounded-full'
+                selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero'
             }
         },
         isFocused: {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
 export declare const RadioGroupContext: React.Context<RadioGroupContextState>;
-export declare function RadioGroup({ className, children, label, orientation, showAmount, size, ...props }: RadioGroupProps): JSX.Element;
+export declare function RadioGroup({ className, children, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RadioGroup {
     var Radio: React.ForwardRefExoticComponent<{
         className?: string | undefined;

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

@@ -17,6 +17,7 @@ import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 import { Radio } from './components/radio/radio.component.js';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 export const RadioGroupContext = createContext({
@@ -32,13 +33,13 @@ export const RadioGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium'
 });
-export function RadioGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , ...props }) {
+export function RadioGroup({ className , children , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
         ...props,
         label,
         orientation
     });
-    const { radioGroupProps , labelProps  } = useRadioGroup({
+    const { radioGroupProps , labelProps , errorMessageProps , descriptionProps  } = useRadioGroup({
         ...props,
         label,
         orientation
@@ -77,7 +78,9 @@ export function RadioGroup({ className , children , label , orientation ='vertic
         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.radioWrapper()
     }, React.createElement(RadioGroupContext.Provider, {
         value: {

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

@@ -6,24 +6,44 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultRadio: Story;
+export declare const Default: Story;
+/**
+ * > Default with long content
+ */
+export declare const LongLines: Story;
 /**
  * > RadioGroup with default value
  */
-export declare const RadioWithDefaultValue: Story;
+export declare const DefaultValue: Story;
 /**
  * > RadioGroup with radios aligned horizontally
  */
-export declare const RadioHorizontal: Story;
+export declare const Inline: Story;
+/**
+ * > RadioGroup with radios aligned horizontally with long content
+ */
+export declare const InlineLongLines: Story;
 /**
  * > RadioGroup that is disabled
  */
-export declare const RadioDisabled: Story;
+export declare const Disabled: Story;
 /**
  * > RadioGroup with large radios
  */
-export declare const RadioLarge: Story;
+export declare const Large: Story;
 /**
  * > RadioGroup that has hidden radios that will be revealed on clicking on button
  */
-export declare const RadioWithHiddenOptions: Story;
+export declare const HiddenOptions: Story;
+/**
+ * > Example with hint text
+ */
+export declare const HintText: Story;
+/**
+ * > On change (check console log)
+ */
+export declare const OnChange: Story;
+/**
+ * Error message and label
+ */
+export declare const ErrorMessageAndLabel: Story;

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

@@ -1,18 +1,13 @@
 import { RadioGroup } from './radio-group.component.js';
 const meta = {
-    title: 'Example/RadioGroup',
+    title: 'Components/RadioGroup',
     component: RadioGroup,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex p-3"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {
         label: React.createElement("h2", null, "Test")
     },
@@ -39,7 +34,7 @@ const meta = {
     }
 };
 export default meta;
-export const DefaultRadio = {
+export const Default = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -54,7 +49,22 @@ export const DefaultRadio = {
         ]
     }
 };
-export const RadioWithDefaultValue = {
+export const LongLines = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.")
+        ]
+    }
+};
+export const DefaultValue = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -70,7 +80,7 @@ export const RadioWithDefaultValue = {
         defaultValue: 'Option 1'
     }
 };
-export const RadioHorizontal = {
+export const Inline = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -86,7 +96,23 @@ export const RadioHorizontal = {
         orientation: 'horizontal'
     }
 };
-export const RadioDisabled = {
+export const InlineLongLines = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.")
+        ],
+        orientation: 'horizontal'
+    }
+};
+export const Disabled = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -102,7 +128,7 @@ export const RadioDisabled = {
         isDisabled: true
     }
 };
-export const RadioLarge = {
+export const Large = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -118,7 +144,7 @@ export const RadioLarge = {
         size: 'large'
     }
 };
-export const RadioWithHiddenOptions = {
+export const HiddenOptions = {
     args: {
         children: [
             React.createElement(RadioGroup.Radio, {
@@ -134,3 +160,56 @@ export const RadioWithHiddenOptions = {
         showAmount: 1
     }
 };
+export const HintText = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1",
+                hint: "This is a hint"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2",
+                hint: "This is a hint"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3",
+                hint: "This is a hint"
+            }, "Option 3")
+        ]
+    }
+};
+export const OnChange = {
+    args: {
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        onChange: (e)=>console.log(e)
+    }
+};
+export const ErrorMessageAndLabel = {
+    args: {
+        label: 'Are you an existing customer?',
+        errorMessage: 'This is an inline error message',
+        validationState: 'invalid',
+        hintMessage: 'Hint: choose from one of the following options',
+        children: [
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(RadioGroup.Radio, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};