import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE_chakra_react_select__ from "chakra-react-select";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__Select_mjs__ from "./Select.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__ from "./storyHelpers/selectComponents.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__ from "./storyHelpers/selectData.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectStyles_mjs__ from "./storyHelpers/selectStyles.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__ from "./storyHelpers/selectUtilities.mjs";
const meta = {
    title: 'Components/Inputs/ReactSelectExamples',
    component: __WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"]
};
/* ESM default export */ const ReactSelectExamples_stories_rslib_entry_ = meta;
/**
 *
 * @see https://react-select.com/advanced#accessibility
 */ const CustomAriaLive = ()=>{
    const [ariaFocusMessage, setAriaFocusMessage] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
    const [isMenuOpen, setIsMenuOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const style = {
        blockquote: {
            fontStyle: 'italic',
            fontSize: '.75rem',
            margin: '1rem 0'
        },
        label: {
            fontSize: '.75rem',
            fontWeight: 'bold',
            lineHeight: 2
        }
    };
    const onFocus = ({ focused, isDisabled })=>{
        const msg = `You are currently focused on option ${focused.label}${isDisabled ? ', disabled' : ''}`;
        setAriaFocusMessage(msg);
        return msg;
    };
    const onMenuOpen = ()=>setIsMenuOpen(true);
    const onMenuClose = ()=>setIsMenuOpen(false);
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.chakra.form, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.FormLabel, {
        style: style.label,
        id: "aria-label",
        htmlFor: "aria-example-input"
    }, "Select a color"), !!ariaFocusMessage && !!isMenuOpen && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.chakra.blockquote, {
        style: style.blockquote
    }, '"', ariaFocusMessage, '"'), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        "aria-labelledby": "aria-label",
        ariaLiveMessages: {
            onFocus
        },
        inputId: "aria-example-input",
        name: "aria-live-color",
        onMenuOpen: onMenuOpen,
        onMenuClose: onMenuClose,
        menuIsOpen: isMenuOpen,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    }));
};
/**
 *
 * @see https://react-select.com/advanced#custom-filter-logic
 */ const CustomFilterOptionWithCreateFilter = ()=>{
    const [ignoreCase, setIgnoreCase] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const [ignoreAccents, setIgnoreAccents] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const [trim, setTrim] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const [matchFromStart, setMatchFromStart] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const filterConfig = {
        ignoreCase,
        ignoreAccents,
        trim,
        matchFrom: matchFromStart ? 'start' : 'any'
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions,
        filterOption: (0, __WEBPACK_EXTERNAL_MODULE_chakra_react_select__.createFilter)(filterConfig)
    }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.HStack, {
        spacing: 4,
        mt: 4
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.Note, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Checkbox, {
        checked: ignoreCase,
        onChange: ()=>setIgnoreCase((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Ignore Case"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.Note, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Checkbox, {
        checked: ignoreAccents,
        onChange: ()=>setIgnoreAccents((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Ignore Accents"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.Note, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Checkbox, {
        checked: trim,
        onChange: ()=>setTrim((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Trim"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.Note, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Checkbox, {
        checked: matchFromStart,
        onChange: ()=>setMatchFromStart((prev)=>!prev),
        id: "single__clearable-checkbox"
    }), "Match from the start")));
};
/**
 *
 * @see https://react-select.com/advanced#custom-filter-logic
 */ const CustomFilterOptionFunction = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__.customOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__.customOptions,
        filterOption: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__.filterOptions
    });
/**
 *
 * @see https://react-select.com/advanced#replacing-builtins
 */ const FormatGroupLabel = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["1"],
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.groupedOptions,
        formatGroupLabel: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.formatGroupLabel
    });
const GetOptionLabel = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Composing a display label from the label property and rating property in the options object"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.flavourOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.flavourOptions,
        getOptionLabel: (option)=>{
            const optionAsFlavour = option;
            return `${optionAsFlavour.label}: ${optionAsFlavour.rating}`;
        }
    }));
const GetOptionValue = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Using id property, instead of value property."), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        // We need to cast it since we are using a different property name
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.dogOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "dog",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.dogOptions,
        getOptionValue: (option)=>{
            const optionAsDogBreed = option;
            return `${optionAsDogBreed.id}`;
        }
    }));
const IsOptionDisabled = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Disable all options that do not have a 'safe' rating, via the isOptionsDisabled fn prop"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.flavourOptions["0"],
        isClearable: true,
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.flavourOptions,
        isOptionDisabled: (option)=>'safe' !== option.rating
    }));
const ReplaceMenuBuffer = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["0"],
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions,
        styles: {
            menu: (base)=>({
                    ...base,
                    marginBottom: 144
                })
        }
    });
/**
 *
 * @param props https://react-select.com/components#adjusting-the-styling
 */ const ControlEmoji = (props)=>{
    const [clickCount, setClickCount] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
    const onClick = (e)=>{
        setClickCount(clickCount + 1);
        e.preventDefault();
        e.stopPropagation();
    };
    const styles = {
        control: (css)=>({
                ...css,
                paddingLeft: '1rem'
            })
    };
    const emoji = __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__.EMOJIS[clickCount % __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__.EMOJIS.length];
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        ...props,
        // @ts-ignore Pass to Control component
        emoji: emoji,
        onEmojiClick: onClick,
        components: {
            Control: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomControlEmoji
        },
        isSearchable: true,
        name: "emoji",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions,
        styles: styles
    });
};
const ClearIndicator = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            ClearIndicator: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomClearIndicator
        },
        styles: {
            clearIndicator: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.ClearIndicatorStyles
        },
        defaultValue: [
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["5"]
        ],
        isMulti: true,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const Control = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["0"],
        isClearable: true,
        components: {
            Control: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomControl
        },
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const DropdownIndicator = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["0"],
        isClearable: true,
        components: {
            DropdownIndicator: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomDropdownIndicator
        },
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const Group = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["1"],
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.groupedOptions,
        components: {
            Group: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomGroup
        }
    });
const GroupHeading = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["1"],
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.groupedOptions,
        components: {
            GroupHeading: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomGroupHeading
        },
        styles: {
            groupHeading: (base)=>({
                    ...base,
                    flex: '1 1',
                    color: 'white',
                    margin: 0
                })
        }
    });
const IndicatorsContainer = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            IndicatorsContainer: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomIndicatorsContainer
        },
        defaultValue: [
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["5"]
        ],
        isMulti: true,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const IndicatorSeparator = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            IndicatorSeparator: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomIndicatorSeparator
        },
        defaultValue: [
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["5"]
        ],
        isMulti: true,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const Input = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            Input: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomInput
        },
        defaultValue: [
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["5"]
        ],
        isMulti: true,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const LoadingIndicator = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE_chakra_react_select__.AsyncSelect, {
        cacheOptions: true,
        defaultOptions: true,
        loadOptions: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__.promiseOptions,
        components: {
            LoadingIndicator: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomLoadingIndicator
        }
    });
const Menu = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["1"],
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.groupedOptions,
        components: {
            Menu: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomMenu
        }
    });
const MenuList = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["1"],
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.groupedOptions,
        components: {
            MenuList: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomMenuList
        }
    });
const LoadingMessage = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE_chakra_react_select__.AsyncSelect, {
        cacheOptions: true,
        defaultOptions: true,
        loadOptions: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectUtilities_mjs__.promiseOptions,
        styles: {
            loadingMessage: (base)=>({
                    ...base,
                    backgroundColor: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color,
                    color: 'white'
                })
        },
        components: {
            LoadingMessage: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomLoadingMessage
        }
    });
const NoOptionsMessage = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        isClearable: true,
        components: {
            NoOptionsMessage: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomNoOptionsMessage
        },
        styles: {
            noOptionsMessage: (base)=>({
                    ...base,
                    ...__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectStyles_mjs__.msgStyles
                })
        },
        isSearchable: true,
        name: "color",
        options: []
    });
const MultiValueContainer = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            MultiValueContainer: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomMultiValueContainer
        },
        styles: {
            multiValue: (base)=>({
                    ...base,
                    border: `2px dotted ${__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color}`
                })
        },
        defaultValue: [
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["5"]
        ],
        isMulti: true,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const MultiValueLabel = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            MultiValueLabel: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomMultiValueLabel
        },
        styles: {
            multiValueLabel: (base)=>({
                    ...base,
                    backgroundColor: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color,
                    color: 'white'
                })
        },
        defaultValue: [
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["5"]
        ],
        isMulti: true,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const MultiValueRemove = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            MultiValueRemove: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomMultiValueRemove
        },
        styles: {
            multiValueRemove: (base)=>({
                    ...base,
                    border: `1px dotted ${__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color}`,
                    height: '100%'
                })
        },
        defaultValue: [
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
            __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["5"]
        ],
        isMulti: true,
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const Option = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            Option: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomOption
        },
        styles: {
            option: (base)=>({
                    ...base,
                    border: `1px dotted ${__WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color}`,
                    height: '100%'
                })
        },
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["4"],
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const Placeholder = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            Placeholder: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomPlaceholder
        },
        placeholder: "custom placeholder component",
        styles: {
            placeholder: (base)=>({
                    ...base,
                    fontSize: '1em',
                    color: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color,
                    fontWeight: 400
                })
        },
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const SelectContainer = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        closeMenuOnSelect: false,
        components: {
            SelectContainer: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomSelectContainer
        },
        styles: {
            container: (base)=>({
                    ...base,
                    backgroundColor: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color,
                    padding: 15
                })
        },
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const SingleValue = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["0"],
        isClearable: true,
        styles: {
            singleValue: (base)=>({
                    ...base,
                    padding: 5,
                    borderRadius: 5,
                    background: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color,
                    color: 'white',
                    display: 'flex'
                })
        },
        components: {
            SingleValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomSingleValue
        },
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
const ValueContainer = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        defaultValue: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["0"],
        isClearable: true,
        styles: {
            singleValue: (base)=>({
                    ...base,
                    color: 'white'
                }),
            valueContainer: (base)=>({
                    ...base,
                    background: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions["2"].color,
                    color: 'white',
                    width: '100%'
                })
        },
        components: {
            ValueContainer: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectComponents_mjs__.CustomValueContainer
        },
        isSearchable: true,
        name: "color",
        options: __WEBPACK_EXTERNAL_MODULE__storyHelpers_selectData_mjs__.colourOptions
    });
export { ClearIndicator, Control, ControlEmoji, CustomAriaLive, CustomFilterOptionFunction, CustomFilterOptionWithCreateFilter, DropdownIndicator, FormatGroupLabel, GetOptionLabel, GetOptionValue, Group, GroupHeading, IndicatorSeparator, IndicatorsContainer, Input, IsOptionDisabled, LoadingIndicator, LoadingMessage, Menu, MenuList, MultiValueContainer, MultiValueLabel, MultiValueRemove, NoOptionsMessage, Option, Placeholder, ReplaceMenuBuffer, SelectContainer, SingleValue, ValueContainer, ReactSelectExamples_stories_rslib_entry_ as default };
