import { useState } from 'react';
import { BackgroundPicker } from '@pega/cosmos-react-build';
export default {
    title: 'Build/BackgroundPicker',
    component: BackgroundPicker
};
export const BackgroundPickerDemo = (args) => {
    const [value, setValue] = useState('#10a5acdb');
    const onSubmit = (updatedValue) => {
        setValue(updatedValue);
    };
    return (<BackgroundPicker additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Select a background from the list.'
            }
            : undefined} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} swatchOnly={args.swatchOnly} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly} value={value} onBeforeClose={args.onBeforeClose} onSubmit={onSubmit}/>);
};
BackgroundPickerDemo.args = {
    label: 'Background',
    labelHidden: false,
    info: 'Pick a background',
    status: undefined,
    swatchOnly: false,
    inline: false,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
BackgroundPickerDemo.argTypes = {
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    swatchOnly: { control: { type: 'boolean' } },
    inline: { control: { type: 'boolean' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
//# sourceMappingURL=BackgroundPicker.stories.jsx.map