@westpac/ui 0.6.0 → 0.7.0

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
+import { FormHintProps } from '../index.js';
 export type RadioGroupProps = {
     /**
      * The `Radio` components to render
@@ -10,6 +11,14 @@ export type RadioGroupProps = {
      * String to override base style
      */
     className?: string;
+    /**
+     * error message
+     */
+    errorMessage?: string | string[];
+    /**
+     * hint message
+     */
+    hintMessage?: FormHintProps['children'];
     /**
      * Amount of Radios to display, remainder will be hidden behind reveal button
      */

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

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type RepeaterProps } from './repeater.types.js';
-export declare function Repeater({ addText, indexTag: ItemIndex, children, separator, className, }: RepeaterProps): JSX.Element;
+export declare function Repeater({ addText, indexTag: ItemIndex, children, separator, className, }: RepeaterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/repeater/repeater.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;
 /**
  * > Example using the separator prop
  */
-export declare const SeparatedRepeater: Story;
+export declare const Separator: Story;

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/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/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.styles.js

@@ -13,7 +13,7 @@ export const styles = tv({
         },
         isSelected: {
             true: {
-                base: 'border-hero shadow-hero shadow-[0_0_0_2px_inset]'
+                base: 'border-hero shadow-[0_0_0_2px_inset] shadow-hero'
             },
             false: {}
         },

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;
 }

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

@@ -13,9 +13,10 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import React from 'react';
-import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../flexi-cell/components/index.js';
+import { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint } from '../flexi-cell/components/index.js';
 import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
 import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
+import { SelectorLabel } from './components/selector-label/index.js';
 import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
 export function Selector(props) {
     if (props.type === 'checkbox') {
@@ -29,6 +30,6 @@ Selector.Body = FlexiCellBody;
 Selector.Footer = FlexiCellFooter;
 Selector.Adornment = FlexiCellAdornment;
 Selector.Hint = FlexiCellHint;
-Selector.Label = FlexiCellLabel;
+Selector.Label = SelectorLabel;
 Selector.Button = FlexiCellButton;
 Selector.Circle = FlexiCellCircle;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type Meta } from '@storybook/react';
 import { Selector } from './selector.component.js';
 declare const meta: Meta<typeof Selector>;
@@ -6,52 +5,52 @@ export default meta;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: () => JSX.Element;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Radio usage example
  */
-export declare const RadioStory: () => JSX.Element;
+export declare const Radio: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Radio usage example
  */
-export declare const CheckWithArrowStory: () => JSX.Element;
+export declare const CheckWithArrow: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Radio with state usage example
  */
-export declare const RadioWithStateStory: () => JSX.Element;
+export declare const RadioWithState: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Check options with state usage example
  */
-export declare const CheckboxWithStateStory: () => JSX.Element;
+export declare const CheckboxWithState: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Default usage example
  */
-export declare const LongTextStory: () => JSX.Element;
+export declare const LongText: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > With hint text usage example
  */
-export declare const WithHintTextStory: () => JSX.Element;
+export declare const HintText: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > With pictogram usage example
  */
-export declare const WithPictogramStory: () => JSX.Element;
+export declare const Pictogram: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > With pictogram with different sizes usage example
  */
-export declare const WithPictogramDifferentSizesStory: () => JSX.Element;
+export declare const PictogramSizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > With icon and different size
  */
-export declare const WithIconsDifferentSizesStory: () => JSX.Element;
+export declare const IconsSizes: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > With icon and secondary label
  */
-export declare const WithIconsAndSecondaryLabelStory: () => JSX.Element;
+export declare const IconsAndSecondaryLabel: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Radio example with icons and secondary text
  */
-export declare const RadioWithIconsAndSecondaryLabelStory: () => JSX.Element;
+export declare const RadioWithIconsAndSecondaryLabel: () => import("react/jsx-runtime").JSX.Element;
 /**
  * > Disable state style example
  */
-export declare const DisableStateStory: () => JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/selector/selector.stories.js

@@ -7,20 +7,17 @@ const HERE_IS_A_LABEL_A = 'Here is a label A';
 const HERE_IS_A_LABEL_B = 'Here is a label B';
 const HERE_IS_A_LABEL_C = 'Here is a label C';
 const meta = {
-    title: 'Example/Selector',
+    title: 'Components/Selector',
     component: Selector,
     tags: [
         'autodocs'
     ],
     decorators: [
         (Story)=>React.createElement(Story, null)
-    ],
-    parameters: {
-        layout: 'padded'
-    }
+    ]
 };
 export default meta;
-export const DefaultStory = ()=>{
+export const Default = ()=>{
     return React.createElement(Selector, {
         type: "checkbox"
     }, [
@@ -47,7 +44,7 @@ export const DefaultStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, "Something ", key))));
 };
-export const RadioStory = ()=>{
+export const Radio = ()=>{
     return React.createElement(Selector, {
         type: "radio"
     }, [
@@ -74,7 +71,7 @@ export const RadioStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, "Something ", key))));
 };
-export const CheckWithArrowStory = ()=>{
+export const CheckWithArrow = ()=>{
     return React.createElement(Selector, {
         type: "radio"
     }, [
@@ -102,7 +99,7 @@ export const CheckWithArrowStory = ()=>{
             checkIcon: "arrow"
         }, React.createElement(Selector.Label, null, "Something ", key))));
 };
-export const RadioWithStateStory = ()=>{
+export const RadioWithState = ()=>{
     const [selectedOption, setSelectedOption] = useState();
     return React.createElement(React.Fragment, null, selectedOption, React.createElement(Selector, {
         type: "radio",
@@ -134,7 +131,7 @@ export const RadioWithStateStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, "Something ", key)))));
 };
-export const CheckboxWithStateStory = ()=>{
+export const CheckboxWithState = ()=>{
     const [selectedOptions, setSelectedOptions] = useState();
     return React.createElement(React.Fragment, null, selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.join(','), React.createElement(Selector, {
         type: "checkbox",
@@ -166,7 +163,7 @@ export const CheckboxWithStateStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, "Something ", key)))));
 };
-export const LongTextStory = ()=>{
+export const LongText = ()=>{
     return React.createElement(Selector, {
         type: "checkbox"
     }, [
@@ -193,7 +190,7 @@ export const LongTextStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores architecto eum aperiam consectetur quibusdam. Laboriosam saepe, explicabo odio quis doloribus consequuntur quae et necessitatibus quasi similique. Debitis non quo recusandae. ", key))));
 };
-export const WithHintTextStory = ()=>{
+export const HintText = ()=>{
     return React.createElement(Selector, {
         type: "checkbox"
     }, [
@@ -222,7 +219,7 @@ export const WithHintTextStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
 };
-export const WithPictogramStory = ()=>{
+export const Pictogram = ()=>{
     return React.createElement(Selector, {
         type: "checkbox"
     }, [
@@ -267,7 +264,7 @@ export const WithPictogramStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
 };
-export const WithPictogramDifferentSizesStory = ()=>{
+export const PictogramSizes = ()=>{
     return React.createElement(Selector, {
         type: "checkbox"
     }, [
@@ -312,7 +309,7 @@ export const WithPictogramDifferentSizesStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
 };
-export const WithIconsDifferentSizesStory = ()=>{
+export const IconsSizes = ()=>{
     return React.createElement(Selector, {
         type: "checkbox"
     }, [
@@ -357,7 +354,7 @@ export const WithIconsDifferentSizesStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
 };
-export const WithIconsAndSecondaryLabelStory = ()=>{
+export const IconsAndSecondaryLabel = ()=>{
     return React.createElement(Selector, {
         type: "checkbox"
     }, [
@@ -408,7 +405,7 @@ export const WithIconsAndSecondaryLabelStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
 };
-export const RadioWithIconsAndSecondaryLabelStory = ()=>{
+export const RadioWithIconsAndSecondaryLabel = ()=>{
     return React.createElement(Selector, {
         type: "radio"
     }, [
@@ -460,7 +457,7 @@ export const RadioWithIconsAndSecondaryLabelStory = ()=>{
             isDisabled: disabled
         }, React.createElement(Selector.Label, null, label), hint && React.createElement(Selector.Hint, null, hint))));
 };
-export const DisableStateStory = ()=>{
+export const Disabled = ()=>{
     return React.createElement(Selector, {
         type: "radio",
         value: "A"