@westpac/ui 0.5.0 → 0.7.0

package/dist/components/repeater/repeater.stories.js

@@ -1,33 +1,28 @@
 import { Form, Input } from '../index.js';
 import { Repeater } from './repeater.component.js';
 const meta = {
-    title: 'Example/Repeater',
+    title: 'Components/Repeater',
     component: Repeater,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-5"
-            }, React.createElement(Story, null))
+        (Story)=>React.createElement(Story, null)
     ],
-    parameters: {
-        layout: 'fullscreen'
-    },
     args: {
         children: React.createElement(Form, null, React.createElement(Form.Group, null, React.createElement(Form.Label, {
             htmlFor: `test`
         }, "Primary"), React.createElement(Form.Hint, null, "Primary title text"), React.createElement(Input, {
-            name: `test`,
+            name: "test",
             onChange: (e)=>console.log(e)
         })))
     }
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {}
 };
-export const SeparatedRepeater = {
+export const Separator = {
     args: {
         separator: true
     }

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

@@ -7,6 +7,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             footer: string;
         };
     };
+    isFocused: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     base: string;
     list: string;
@@ -27,6 +32,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             footer: string;
         };
     };
+    isFocused: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     base: string;
     list: string;

package/dist/components/repeater/repeater.styles.js

@@ -3,7 +3,7 @@ export const styles = tv({
     slots: {
         base: '',
         list: 'm-0 list-none pl-0',
-        item: 'relative focus:outline-none',
+        item: 'relative',
         itemIndex: 'mb-[1.125rem] font-bold',
         content: '',
         removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
@@ -18,6 +18,11 @@ export const styles = tv({
                 removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
                 footer: 'border-neutral border-t-2 pt-[0.875rem]'
             }
+        },
+        isFocused: {
+            true: {
+                item: 'outline-none'
+            }
         }
     }
 }, {

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

@@ -10,7 +10,12 @@ export declare const Select: React.ForwardRefExoticComponent<import("tailwind-va
         true: string;
         false: string;
     };
-}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined, "form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -23,4 +28,9 @@ export declare const Select: React.ForwardRefExoticComponent<import("tailwind-va
         true: string;
         false: string;
     };
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
 }, undefined>> & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select/select.component.js

@@ -13,15 +13,18 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { styles } from './select.styles.js';
 function BaseSelect({ className , size ='medium' , invalid =false , children , ...props }, ref) {
+    const { isFocused , focusProps  } = useFocusRing();
     return React.createElement("select", _extends({
         ref: ref,
         className: styles({
             className,
             size,
-            invalid
+            invalid,
+            isFocused
         })
-    }, props), children);
+    }, mergeProps(props, focusProps)), children);
 }
 export const Select = forwardRef(BaseSelect);

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

@@ -6,12 +6,16 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Invalid usage example
  */
-export declare const InvalidStory: Story;
+export declare const Invalid: Story;
 /**
  * > Disabled usage example
  */
-export declare const DisabledStory: Story;
+export declare const Disabled: Story;
+/**
+ * > Form field example
+ */
+export declare const FormField: Story;

package/dist/components/select/select.stories.js

@@ -1,21 +1,17 @@
+import { Field } from '../field/index.js';
 import { Select } from './select.component.js';
 const meta = {
-    title: 'Example/Select',
+    title: 'Components/Select',
     component: Select,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "flex items-center justify-center p-3"
-            }, 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(React.Fragment, null, React.createElement("option", {
             value: "option-1"
@@ -28,7 +24,7 @@ export const DefaultStory = {
         }, "option 4"))
     }
 };
-export const InvalidStory = {
+export const Invalid = {
     args: {
         invalid: true,
         children: React.createElement(React.Fragment, null, React.createElement("option", {
@@ -42,7 +38,7 @@ export const InvalidStory = {
         }, "option 4"))
     }
 };
-export const DisabledStory = {
+export const Disabled = {
     args: {
         disabled: true,
         children: React.createElement(React.Fragment, null, React.createElement("option", {
@@ -56,3 +52,23 @@ export const DisabledStory = {
         }, "option 4"))
     }
 };
+export const FormField = {
+    args: {},
+    render: ()=>{
+        return React.createElement(Field, {
+            label: "Are you an existing customer?",
+            hintMessage: "Hint: choose from one of the following options",
+            errorMessage: "This is an inline error message"
+        }, React.createElement(Select, {
+            invalid: true
+        }, React.createElement("option", {
+            value: "option-1"
+        }, "option 1"), React.createElement("option", {
+            value: "option-2"
+        }, "option 2"), React.createElement("option", {
+            value: "option-3"
+        }, "option 3"), React.createElement("option", {
+            value: "option-4"
+        }, "option 4")));
+    }
+};

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

@@ -9,7 +9,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
+}, undefined, "form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none", {
     responsiveVariants: string[];
 }, {
     size: {
@@ -22,4 +27,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocused: {
+        true: {
+            base: string;
+        };
+    };
 }, undefined>;

package/dist/components/select/select.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+    base: 'form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
     variants: {
         size: {
             small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
@@ -11,6 +11,11 @@ export const styles = tv({
         invalid: {
             true: 'border-danger',
             false: 'border-borderDark'
+        },
+        isFocused: {
+            true: {
+                base: 'focus-outline'
+            }
         }
     }
 }, {

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

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../../../../../../components/flexi-cell/index.js';
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
 import { FlexiCell } from '../../../../../../components/index.js';
@@ -27,11 +27,11 @@ function BaseSelectorCheckboxGroupOption({ className , children , value , withBo
         value,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = selectorCheckboxGroupOptionStyles({
         className,
         isSelected,
-        isFocusVisible,
+        isFocused,
         isDisabled,
         checkIcon
     });
@@ -53,7 +53,7 @@ function BaseSelectorCheckboxGroupOption({ className , children , value , withBo
         ref: ref,
         withHoverEffect: true,
         className: styles.base({})
-    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
         ref: localRef
     }))), children);
 }

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

@@ -11,7 +11,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             base: string;
         };
@@ -41,7 +41,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             base: string;
         };

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.styles.js

@@ -17,7 +17,7 @@ export const styles = tv({
             },
             false: {}
         },
-        isFocusVisible: {
+        isFocused: {
             true: {
                 base: 'focus-outline'
             },

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import { type SelectorCheckboxGroupProps } from './selector-checkbox-group.types.js';
 export declare const SelectorCheckboxGroupContext: React.Context<import("react-stately").CheckboxGroupState>;
-export declare function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps): JSX.Element;
+export declare function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SelectorCheckboxGroup {
     var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => JSX.Element;
-        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => JSX.Element;
-        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => JSX.Element;
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
     };
 }

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

@@ -15,6 +15,7 @@ function _extends() {
 import React, { createContext } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
+import { ErrorMessage, FormHint, FormLabel } from '../../../index.js';
 import { SelectorCheckboxGroupOption } from './components/index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 export const SelectorCheckboxGroupContext = createContext({
@@ -36,14 +37,10 @@ export function SelectorCheckboxGroup(props) {
         className: styles({
             className: groupProps.className
         })
-    }), React.createElement("span", _extends({}, labelProps), label), React.createElement(SelectorCheckboxGroupContext.Provider, {
+    }), React.createElement(FormLabel, _extends({}, labelProps), label), description && React.createElement(FormHint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement(SelectorCheckboxGroupContext.Provider, {
         value: state
-    }, children), description && React.createElement("div", _extends({}, descriptionProps, {
-        style: {
-            fontSize: 12
-        }
-    }), description), errorMessage && state.validationState === 'invalid' && React.createElement("div", _extends({}, errorMessageProps, {
-        className: "typography-body-10 text-danger"
-    }), errorMessage));
+    }, children));
 }
 SelectorCheckboxGroup.Option = SelectorCheckboxGroupOption;

package/dist/components/selector/components/selector-label/index.d.ts

@@ -0,0 +1 @@
+export { SelectorLabel } from './selector-label.component.js';

package/dist/components/selector/components/selector-label/index.js

@@ -0,0 +1 @@
+export { SelectorLabel } from './selector-label.component.js';

package/dist/components/selector/components/selector-label/selector-label.component.d.ts

@@ -0,0 +1,2 @@
+import { FlexiCellLabelProps } from '../../../../components/flexi-cell/index.js';
+export declare function SelectorLabel({ className, ...props }: FlexiCellLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/selector/components/selector-label/selector-label.component.js

@@ -0,0 +1,24 @@
+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 from 'react';
+import { FlexiCellLabel } from '../../../../components/flexi-cell/index.js';
+import { styles } from './selector-label.styles.js';
+export function SelectorLabel({ className , ...props }) {
+    return React.createElement(FlexiCellLabel, _extends({}, props, {
+        className: styles({
+            className
+        })
+    }));
+}

package/dist/components/selector/components/selector-label/selector-label.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "font-medium"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "font-medium">;
+    } | undefined;
+} | {}, undefined, "font-medium", TVConfig<V, EV>, import("tailwind-variants").TVVariantsDefault<undefined, "font-medium"> | {}, undefined>;

package/dist/components/selector/components/selector-label/selector-label.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'font-medium'
+});

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

@@ -13,7 +13,7 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
+import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../../../../../../components/flexi-cell/index.js';
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
 import { FlexiCell } from '../../../../../index.js';
@@ -27,11 +27,11 @@ function BaseSelectorRadioGroupOption({ className , children , value , withBorde
         value,
         children
     }, state, localRef);
-    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocused , focusProps  } = useFocusRing();
     const styles = selectorRadioGroupOptionStyles({
         className,
         isSelected,
-        isFocusVisible,
+        isFocused,
         isDisabled,
         checkIcon
     });
@@ -53,7 +53,7 @@ function BaseSelectorRadioGroupOption({ className , children , value , withBorde
         ref: ref,
         className: styles.base({}),
         withHoverEffect: true
-    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
         ref: localRef
     }))), children);
 }

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.styles.d.ts

@@ -11,7 +11,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             base: string;
         };
@@ -41,7 +41,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    isFocusVisible: {
+    isFocused: {
         true: {
             base: string;
         };

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

@@ -17,7 +17,7 @@ export const styles = tv({
             },
             false: {}
         },
-        isFocusVisible: {
+        isFocused: {
             true: {
                 base: 'focus-outline'
             },

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
 export declare const SelectorRadioGroupContext: React.Context<SelectorRadioGroupContextState>;
-export declare function SelectorRadioGroup({ className, children, label, orientation, errorMessage, ...props }: SelectorRadioGroupProps): JSX.Element;
+export declare function SelectorRadioGroup({ className, children, label, orientation, errorMessage, description, ...props }: SelectorRadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SelectorRadioGroup {
     var Option: React.ForwardRefExoticComponent<import("./components/index.js").SelectorRadioGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => JSX.Element;
-        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => JSX.Element;
-        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => JSX.Element;
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Button: ({ className, ...props }: import("../../../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+        Circle: ({ className, ...props }: import("../../../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../../../flexi-cell/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../../../flexi-cell/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../../../flexi-cell/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
     };
 }

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

@@ -15,6 +15,7 @@ function _extends() {
 import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
+import { ErrorMessage, FormHint, FormLabel } from '../../../index.js';
 import { SelectorRadioGroupOption } from './components/index.js';
 import { styles } from './selector-radio-group.styles.js';
 export const SelectorRadioGroupContext = createContext({
@@ -29,14 +30,14 @@ export const SelectorRadioGroupContext = createContext({
     setLastFocusedValue: ()=>null,
     orientation: 'vertical'
 });
-export function SelectorRadioGroup({ className , children , label , orientation ='vertical' , errorMessage , ...props }) {
+export function SelectorRadioGroup({ className , children , label , orientation ='vertical' , errorMessage , description , ...props }) {
     const state = useRadioGroupState({
         ...props,
         errorMessage,
         label,
         orientation
     });
-    const { radioGroupProps , labelProps , errorMessageProps  } = useRadioGroup({
+    const { radioGroupProps , labelProps , errorMessageProps , descriptionProps  } = useRadioGroup({
         ...props,
         label,
         orientation
@@ -46,13 +47,13 @@ export function SelectorRadioGroup({ className , children , label , orientation
             className,
             orientation
         })
-    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement(SelectorRadioGroupContext.Provider, {
+    }, radioGroupProps), React.createElement(FormLabel, _extends({}, labelProps), label), description && React.createElement(FormHint, _extends({}, descriptionProps), description), errorMessage && state.validationState === 'invalid' && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        message: errorMessage
+    })), React.createElement(SelectorRadioGroupContext.Provider, {
         value: {
             ...state,
             orientation
         }
-    }, children), errorMessage && state.validationState === 'invalid' && React.createElement("div", _extends({}, errorMessageProps, {
-        className: "typography-body-10 text-danger"
-    }), errorMessage));
+    }, children));
 }
 SelectorRadioGroup.Option = SelectorRadioGroupOption;

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

@@ -1,30 +1,31 @@
 import React from 'react';
+import { SelectorLabel } from './components/selector-label/index.js';
 import { type SelectorProps } from './selector.types.js';
-export declare function Selector(props: SelectorProps): JSX.Element;
+export declare function Selector(props: SelectorProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Selector {
     var Radio: React.ForwardRefExoticComponent<import("./components/selector-radio-group/components/index.js").SelectorRadioGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => JSX.Element;
-        Button: ({ className, ...props }: import("../index.js").ButtonProps) => JSX.Element;
-        Circle: ({ className, ...props }: import("../index.js").CircleProps) => JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => JSX.Element;
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Button: ({ className, ...props }: import("../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+        Circle: ({ className, ...props }: import("../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
     };
     var Checkbox: React.ForwardRefExoticComponent<import("./components/selector-checkbox-group/components/index.js").SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
-        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => JSX.Element;
-        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => JSX.Element;
-        Button: ({ className, ...props }: import("../index.js").ButtonProps) => JSX.Element;
-        Circle: ({ className, ...props }: import("../index.js").CircleProps) => JSX.Element;
-        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => JSX.Element;
-        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => JSX.Element;
-        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => JSX.Element;
+        Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
+        Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Button: ({ className, ...props }: import("../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+        Circle: ({ className, ...props }: import("../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
+        Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
+        Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => import("react/jsx-runtime").JSX.Element;
     };
-    var Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => JSX.Element;
-    var Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => JSX.Element;
-    var Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => JSX.Element;
-    var Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => JSX.Element;
-    var Label: ({ children, tag: Tag, truncateText, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellLabelProps) => JSX.Element;
-    var Button: ({ className, ...props }: import("../index.js").ButtonProps) => JSX.Element;
-    var Circle: ({ className, ...props }: import("../index.js").CircleProps) => JSX.Element;
+    var Body: ({ children, tag: Tag, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellBodyProps) => import("react/jsx-runtime").JSX.Element;
+    var Footer: ({ children, className, tag: Tag, ...props }: import("../flexi-cell/components/index.js").FlexiCellFooterProps) => import("react/jsx-runtime").JSX.Element;
+    var Adornment: ({ children, tag: Tag, align, className, ...props }: import("../flexi-cell/components/index.js").FlexiCellAdornmentProps) => import("react/jsx-runtime").JSX.Element;
+    var Hint: ({ children, tag: Tag, className, truncateText, ...props }: import("../flexi-cell/components/index.js").FlexiCellHintProps) => import("react/jsx-runtime").JSX.Element;
+    var Label: typeof SelectorLabel;
+    var Button: ({ className, ...props }: import("../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    var Circle: ({ className, ...props }: import("../index.js").CircleProps) => import("react/jsx-runtime").JSX.Element;
 }