@westpac/ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,34 @@
+import { Form, Input } from '../index.js';
+import { Repeater } from './repeater.component.js';
+const meta = {
+    title: 'Example/Repeater',
+    component: Repeater,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-5"
+            }, 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`,
+            onChange: (e)=>console.log(e)
+        })))
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {}
+};
+export const SeparatedRepeater = {
+    args: {
+        separator: true
+    }
+};

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

@@ -0,0 +1,39 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    separator: {
+        true: {
+            item: string;
+            content: string;
+            removeBtn: string;
+            footer: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    itemIndex: string;
+    content: string;
+    removeBtn: string;
+    footer: string;
+    addBtn: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    separator: {
+        true: {
+            item: string;
+            content: string;
+            removeBtn: string;
+            footer: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    itemIndex: string;
+    content: string;
+    removeBtn: string;
+    footer: string;
+    addBtn: string;
+}>;

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

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        list: 'm-0 list-none pl-0',
+        item: 'relative focus:outline-none',
+        itemIndex: 'mb-[1.125rem] font-bold',
+        content: '',
+        removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
+        footer: 'flex justify-between',
+        addBtn: 'height-auto p-0 no-underline hover:underline'
+    },
+    variants: {
+        separator: {
+            true: {
+                item: 'border-neutral border-t-2 pt-[0.625rem]',
+                content: 'p-[0_1.125rem_2.625rem]',
+                removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
+                footer: 'border-neutral border-t-2 pt-[0.875rem]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+export type RepeaterProps = {
+    /**
+     * Text for add button
+     */
+    addText?: string;
+    /**
+     * Component to repeat
+     */
+    children: React.ReactNode;
+    /**
+     * Index heading tag to use for index on separator version
+     */
+    indexTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Enable separator version
+     */
+    separator?: boolean;
+} & HTMLAttributes<Element>;

package/dist/components/repeater/repeater.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;

package/dist/components/repeater/repeater.utils.js

@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;

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

@@ -10,7 +10,7 @@ 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", {
+}, 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", {
     responsiveVariants: string[];
 }, {
     size: {

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

@@ -11,7 +11,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

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

@@ -9,7 +9,7 @@ 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", {
+}, 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", {
     responsiveVariants: string[];
 }, {
     size: {

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',
+    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',
     variants: {
         size: {
             small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',

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

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

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

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

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

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

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

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

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

@@ -0,0 +1,2 @@
+export { SelectorCheckboxGroupOption } from './selector-checkbox-group-option.component.js';
+export { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';

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

@@ -0,0 +1 @@
+export { SelectorCheckboxGroupOption } from './selector-checkbox-group-option.component.js';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FlexiCell } from '../../../../../../components/index.js';
+import { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';
+export declare const SelectorCheckboxGroupOption: React.ForwardRefExoticComponent<SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
+    Adornment: typeof FlexiCell.Adornment;
+    Body: typeof FlexiCell.Body;
+    Button: typeof FlexiCell.Button;
+    Circle: typeof FlexiCell.Circle;
+    Footer: typeof FlexiCell.Footer;
+    Hint: typeof FlexiCell.Hint;
+    Label: typeof FlexiCell.Label;
+};

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

@@ -0,0 +1,67 @@
+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, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, 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';
+import { SelectorCheckboxGroupContext } from '../../selector-checkbox-group.component.js';
+import { styles as selectorCheckboxGroupOptionStyles } from './selector-checkbox-group-option.styles.js';
+function BaseSelectorCheckboxGroupOption({ className , children , value , withBorder =true , withArrow , after , badge , badgeZIndex , before , body =true , checkIcon ='checkbox' , ...props }, ref) {
+    const state = useContext(SelectorCheckboxGroupContext);
+    const localRef = useRef(null);
+    const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+        ...props,
+        value,
+        children
+    }, state, localRef);
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = selectorCheckboxGroupOptionStyles({
+        className,
+        isSelected,
+        isFocusVisible,
+        isDisabled,
+        checkIcon
+    });
+    const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
+    return React.createElement(FlexiCell, {
+        after: React.createElement("div", {
+            className: "flex gap-2"
+        }, after, React.createElement(FinalIcon, {
+            "aria-hidden": "true",
+            className: styles.icon({})
+        })),
+        badge: badge,
+        badgeZIndex: badgeZIndex,
+        before: before,
+        body: body,
+        withBorder: withBorder,
+        withArrow: withArrow,
+        tag: "label",
+        ref: ref,
+        withHoverEffect: true,
+        className: styles.base({})
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+        ref: localRef
+    }))), children);
+}
+export const SelectorCheckboxGroupOption = forwardRef(BaseSelectorCheckboxGroupOption);
+SelectorCheckboxGroupOption.Body = FlexiCellBody;
+SelectorCheckboxGroupOption.Footer = FlexiCellFooter;
+SelectorCheckboxGroupOption.Adornment = FlexiCellAdornment;
+SelectorCheckboxGroupOption.Hint = FlexiCellHint;
+SelectorCheckboxGroupOption.Label = FlexiCellLabel;
+SelectorCheckboxGroupOption.Button = FlexiCellButton;
+SelectorCheckboxGroupOption.Circle = FlexiCellCircle;

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

@@ -0,0 +1,59 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    checkIcon: {
+        arrow: {
+            icon: string;
+        };
+        checkbox: {};
+    };
+    isSelected: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isFocusVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}>;

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

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'group/checkbox-option cursor-pointer',
+        icon: 'transition-transform'
+    },
+    variants: {
+        checkIcon: {
+            arrow: {
+                icon: 'text-primary group-hover/checkbox-option:translate-x-1'
+            },
+            checkbox: {}
+        },
+        isSelected: {
+            true: {
+                base: 'border-hero shadow-[0_0_0_2px_inset]'
+            },
+            false: {}
+        },
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            },
+            false: {}
+        },
+        isDisabled: {
+            true: {
+                base: 'opacity-50'
+            },
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            checkIcon: 'checkbox',
+            isSelected: false,
+            className: {
+                icon: 'opacity-0'
+            }
+        },
+        {
+            checkIcon: 'checkbox',
+            isSelected: true,
+            className: {
+                icon: 'opacity-100'
+            }
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,10 @@
+import { type AriaCheckboxGroupItemProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+import { FlexiCellProps } from '../../../../../index.js';
+import { styles } from './selector-checkbox-group-option.styles.js';
+export type SelectorCheckboxGroupOptionProps = {
+    /**
+     * Check icon to render
+     */
+    checkIcon?: 'checkbox' | 'arrow';
+} & FlexiCellProps & VariantProps<typeof styles> & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,2 @@
+export { SelectorCheckboxGroup } from './selector-checkbox-group.component.js';
+export { type SelectorCheckboxGroupProps } from './selector-checkbox-group.types.js';

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

@@ -0,0 +1 @@
+export { SelectorCheckboxGroup } from './selector-checkbox-group.component.js';

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

@@ -0,0 +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 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;
+    };
+}

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

@@ -0,0 +1,49 @@
+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, { createContext } from 'react';
+import { useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
+import { SelectorCheckboxGroupOption } from './components/index.js';
+import { styles } from './selector-checkbox-group.styles.js';
+export const SelectorCheckboxGroupContext = createContext({
+    value: [],
+    isDisabled: false,
+    isReadOnly: false,
+    isSelected: ()=>false,
+    setValue: ()=>null,
+    addValue: ()=>null,
+    removeValue: ()=>null,
+    toggleValue: ()=>null,
+    validationState: 'valid'
+});
+export function SelectorCheckboxGroup(props) {
+    const { children , label , description , errorMessage  } = props;
+    const state = useCheckboxGroupState(props);
+    const { groupProps , labelProps , descriptionProps , errorMessageProps  } = useCheckboxGroup(props, state);
+    return React.createElement("div", _extends({}, groupProps, {
+        className: styles({
+            className: groupProps.className
+        })
+    }), React.createElement("span", _extends({}, labelProps), label), 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));
+}
+SelectorCheckboxGroup.Option = SelectorCheckboxGroupOption;

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

@@ -0,0 +1,3 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex flex-col gap-2 md:gap-3", {
+    responsiveVariants: string[];
+}, {}, undefined>;

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

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'flex flex-col gap-2 md:gap-3',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+import { AriaCheckboxGroupProps } from 'react-aria';
+import { CheckboxGroupState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './selector-checkbox-group.styles.js';
+export type SelectorCheckboxGroupContextState = CheckboxGroupState;
+export type SelectorCheckboxGroupProps = {
+    /**
+     * String to override base style
+     */
+    className?: string;
+    /**
+     * Orientation of checkbox items
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controls size of `CheckboxItem` components, can't be applied directly to `CheckboxItem`
+     */
+    size?: 'medium' | 'large';
+} & AriaCheckboxGroupProps & VariantProps<typeof styles> & Omit<HTMLAttributes<Element>, 'onChange'>;

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+export * from './selector-radio-group-option/index.js';

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

@@ -0,0 +1 @@
+export * from './selector-radio-group-option/index.js';

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

@@ -0,0 +1,2 @@
+export { SelectorRadioGroupOption } from './selector-radio-group-option.component.js';
+export { type SelectorRadioGroupOptionProps } from './selector-radio-group-option.types.js';

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

@@ -0,0 +1 @@
+export { SelectorRadioGroupOption } from './selector-radio-group-option.component.js';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FlexiCell } from '../../../../../index.js';
+import { type SelectorRadioGroupOptionProps } from './selector-radio-group-option.types.js';
+export declare const SelectorRadioGroupOption: React.ForwardRefExoticComponent<SelectorRadioGroupOptionProps & React.RefAttributes<unknown>> & {
+    Adornment: typeof FlexiCell.Adornment;
+    Body: typeof FlexiCell.Body;
+    Button: typeof FlexiCell.Button;
+    Circle: typeof FlexiCell.Circle;
+    Footer: typeof FlexiCell.Footer;
+    Hint: typeof FlexiCell.Hint;
+    Label: typeof FlexiCell.Label;
+};

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

@@ -0,0 +1,67 @@
+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, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, 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';
+import { SelectorRadioGroupContext } from '../../selector-radio-group.component.js';
+import { styles as selectorRadioGroupOptionStyles } from './selector-radio-group-option.styles.js';
+function BaseSelectorRadioGroupOption({ className , children , value , withBorder =true , withArrow , after , badge , badgeZIndex , before , body =true , checkIcon ='checkbox' , ...props }, ref) {
+    const state = useContext(SelectorRadioGroupContext);
+    const localRef = useRef(null);
+    const { inputProps , isSelected , isDisabled  } = useRadio({
+        ...props,
+        value,
+        children
+    }, state, localRef);
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = selectorRadioGroupOptionStyles({
+        className,
+        isSelected,
+        isFocusVisible,
+        isDisabled,
+        checkIcon
+    });
+    const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
+    return React.createElement(FlexiCell, {
+        after: React.createElement("div", {
+            className: "flex gap-2"
+        }, after, React.createElement(FinalIcon, {
+            "aria-hidden": "true",
+            className: styles.icon({})
+        })),
+        badge: badge,
+        badgeZIndex: badgeZIndex,
+        before: before,
+        body: body,
+        withBorder: withBorder,
+        withArrow: withArrow,
+        tag: "label",
+        ref: ref,
+        className: styles.base({}),
+        withHoverEffect: true
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+        ref: localRef
+    }))), children);
+}
+export const SelectorRadioGroupOption = forwardRef(BaseSelectorRadioGroupOption);
+SelectorRadioGroupOption.Body = FlexiCellBody;
+SelectorRadioGroupOption.Footer = FlexiCellFooter;
+SelectorRadioGroupOption.Adornment = FlexiCellAdornment;
+SelectorRadioGroupOption.Hint = FlexiCellHint;
+SelectorRadioGroupOption.Label = FlexiCellLabel;
+SelectorRadioGroupOption.Button = FlexiCellButton;
+SelectorRadioGroupOption.Circle = FlexiCellCircle;