@westpac/ui 0.4.0 → 0.6.0

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, 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';
+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 { isFocused , focusProps  } = useFocusRing();
+    const styles = selectorRadioGroupOptionStyles({
+        className,
+        isSelected,
+        isFocused,
+        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({}, mergeProps(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;

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-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: {};
+    };
+    isFocused: {
+        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: {};
+    };
+    isFocused: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    icon: string;
+}>;

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

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'group/radio-option cursor-pointer',
+        icon: 'transition-transform'
+    },
+    variants: {
+        checkIcon: {
+            arrow: {
+                icon: 'text-primary group-hover/radio-option:translate-x-1'
+            },
+            checkbox: {}
+        },
+        isSelected: {
+            true: {
+                base: 'border-hero shadow-hero shadow-[0_0_0_2px_inset]'
+            },
+            false: {}
+        },
+        isFocused: {
+            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-radio-group/components/selector-radio-group-option/selector-radio-group-option.types.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from 'react';
+import { type AriaRadioProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+import { type FlexiCellProps } from '../../../../../../index.js';
+import { styles } from './selector-radio-group-option.styles.js';
+export type SelectorRadioGroupOptionProps = {
+    /**
+     * Check icon to render
+     */
+    checkIcon?: 'checkbox' | 'arrow';
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & FlexiCellProps & AriaRadioProps & VariantProps<typeof styles> & HTMLAttributes<Element>;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,58 @@
+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 { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+import { SelectorRadioGroupOption } from './components/index.js';
+import { styles } from './selector-radio-group.styles.js';
+export const SelectorRadioGroupContext = createContext({
+    name: '',
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+    validationState: null,
+    selectedValue: null,
+    setSelectedValue: ()=>null,
+    lastFocusedValue: null,
+    setLastFocusedValue: ()=>null,
+    orientation: 'vertical'
+});
+export function SelectorRadioGroup({ className , children , label , orientation ='vertical' , errorMessage , ...props }) {
+    const state = useRadioGroupState({
+        ...props,
+        errorMessage,
+        label,
+        orientation
+    });
+    const { radioGroupProps , labelProps , errorMessageProps  } = useRadioGroup({
+        ...props,
+        label,
+        orientation
+    }, state);
+    return React.createElement("div", _extends({
+        className: styles({
+            className,
+            orientation
+        })
+    }, radioGroupProps), React.createElement("span", _extends({}, labelProps), label), React.createElement(SelectorRadioGroupContext.Provider, {
+        value: {
+            ...state,
+            orientation
+        }
+    }, children), errorMessage && state.validationState === 'invalid' && React.createElement("div", _extends({}, errorMessageProps, {
+        className: "typography-body-10 text-danger"
+    }), errorMessage));
+}
+SelectorRadioGroup.Option = SelectorRadioGroupOption;

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from 'react';
+import { type AriaRadioGroupProps } from 'react-aria';
+import { type RadioGroupState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './selector-radio-group.styles.js';
+export type SelectorRadioGroupProps = {
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> & AriaRadioGroupProps & Omit<HTMLAttributes<Element>, 'onChange'>;
+export type SelectorRadioGroupContextState = {
+    /**
+     * Controls orientation of `Radio` components, can't be applied directly on `Radio`
+     */
+    orientation: 'vertical' | 'horizontal';
+} & RadioGroupState;

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

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

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

@@ -0,0 +1,2 @@
+export { Selector } from './selector.component.js';
+export { type SelectorProps } from './selector.types.js';

package/dist/components/selector/index.js

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type SelectorProps } from './selector.types.js';
+export declare function Selector(props: SelectorProps): 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;
+    };
+    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;
+    };
+    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;
+}

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

@@ -0,0 +1,34 @@
+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 { FlexiCellAdornment, FlexiCellBody, FlexiCellButton, FlexiCellCircle, FlexiCellFooter, FlexiCellHint, FlexiCellLabel } from '../flexi-cell/components/index.js';
+import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
+import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
+import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
+export function Selector(props) {
+    if (props.type === 'checkbox') {
+        return React.createElement(SelectorCheckboxGroup, _extends({}, props));
+    }
+    return React.createElement(SelectorRadioGroup, _extends({}, props));
+}
+Selector.Radio = SelectorRadioGroupOption;
+Selector.Checkbox = SelectorCheckboxGroupOption;
+Selector.Body = FlexiCellBody;
+Selector.Footer = FlexiCellFooter;
+Selector.Adornment = FlexiCellAdornment;
+Selector.Hint = FlexiCellHint;
+Selector.Label = FlexiCellLabel;
+Selector.Button = FlexiCellButton;
+Selector.Circle = FlexiCellCircle;

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

@@ -0,0 +1,57 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta } from '@storybook/react';
+import { Selector } from './selector.component.js';
+declare const meta: Meta<typeof Selector>;
+export default meta;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: () => JSX.Element;
+/**
+ * > Radio usage example
+ */
+export declare const RadioStory: () => JSX.Element;
+/**
+ * > Radio usage example
+ */
+export declare const CheckWithArrowStory: () => JSX.Element;
+/**
+ * > Radio with state usage example
+ */
+export declare const RadioWithStateStory: () => JSX.Element;
+/**
+ * > Check options with state usage example
+ */
+export declare const CheckboxWithStateStory: () => JSX.Element;
+/**
+ * > Default usage example
+ */
+export declare const LongTextStory: () => JSX.Element;
+/**
+ * > With hint text usage example
+ */
+export declare const WithHintTextStory: () => JSX.Element;
+/**
+ * > With pictogram usage example
+ */
+export declare const WithPictogramStory: () => JSX.Element;
+/**
+ * > With pictogram with different sizes usage example
+ */
+export declare const WithPictogramDifferentSizesStory: () => JSX.Element;
+/**
+ * > With icon and different size
+ */
+export declare const WithIconsDifferentSizesStory: () => JSX.Element;
+/**
+ * > With icon and secondary label
+ */
+export declare const WithIconsAndSecondaryLabelStory: () => JSX.Element;
+/**
+ * > Radio example with icons and secondary text
+ */
+export declare const RadioWithIconsAndSecondaryLabelStory: () => JSX.Element;
+/**
+ * > Disable state style example
+ */
+export declare const DisableStateStory: () => JSX.Element;