import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
/** A typeguard to ensure the default size on the Input component is valid. */ const isSize = (size)=>{
    const isString = 'string' == typeof size;
    return isString && [
        'sm',
        'md',
        'lg'
    ].includes(size);
};
const getDefaultSize = (size)=>{
    if (isSize(size)) return size;
    if ('xs' === size) return 'sm';
    // This shouldn't be necessary but it might help the size get closer to the
    // user's goal if they have `xl` as a custom size.
    if ('xl' === size) return 'lg';
    return 'md';
};
const useSize = (size)=>{
    const chakraTheme = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useTheme)();
    const defaultSize = getDefaultSize(chakraTheme.components.Input.defaultProps.size);
    // Ensure that the size used is one of the options, either `sm`, `md`, or `lg`
    const definedSize = size ?? defaultSize;
    // Or, if a breakpoint is passed, get the size based on the current screen size
    const realSize = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useBreakpointValue)('string' == typeof definedSize ? [
        definedSize
    ] : definedSize, {
        fallback: 'md'
    }) || defaultSize;
    return realSize;
};
/**
 * The `CheckIcon` component from the Chakra UI Menu
 *
 * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/menu/src/menu.tsx#L314}
 */ const CheckIcon = (props)=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Icon, {
        viewBox: "0 0 14 14",
        w: "1em",
        h: "1em",
        ...props
    }, /*#__PURE__*/ React.createElement("polygon", {
        fill: "currentColor",
        points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
    }));
const CustomOption = (props)=>{
    const { className, cx, innerRef, innerProps, children, isFocused, isDisabled, isSelected, selectProps: { chakraStyles, size: sizeProp, isMulti, hideSelectedOptions, selectedOptionStyle, selectedOptionColorScheme } } = props;
    const size = useSize(sizeProp);
    const menuItemStyles = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useMultiStyleConfig)('Menu').item;
    const paddings = {
        sm: '0.3rem 0.6rem',
        md: '0.4rem 0.8rem',
        lg: '0.5rem 1rem'
    };
    /**
   * Use the same selected color as the border of the select component
   *
   * @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/theme/src/components/input.ts#L73}
   */ const selectedBg = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useColorModeValue)(`${selectedOptionColorScheme}.500`, `${selectedOptionColorScheme}.300`);
    const selectedColor = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useColorModeValue)('white', 'black');
    // Don't create exta space for the checkmark if using a multi select with
    // options that dissapear when they're selected
    const showCheckIcon = 'check' === selectedOptionStyle && (!isMulti || false === hideSelectedOptions);
    const shouldHighlight = 'color' === selectedOptionStyle && isSelected;
    const initialSx = {
        ...menuItemStyles,
        display: 'flex',
        alignItems: 'center',
        width: '100%',
        textAlign: 'start',
        fontSize: size,
        padding: paddings[size],
        ...isFocused && menuItemStyles._focus,
        ...shouldHighlight && {
            bg: selectedBg,
            color: selectedColor,
            _active: {
                bg: selectedBg
            }
        },
        ...isDisabled && menuItemStyles._disabled,
        ...isDisabled && {
            _active: {}
        }
    };
    const sx = chakraStyles?.option ? chakraStyles.option(initialSx, props) : initialSx;
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        ...innerProps,
        role: "button",
        className: cx({
            option: true,
            'option--is-disabled': isDisabled,
            'option--is-focused': isFocused,
            'option--is-selected': isSelected
        }, className),
        sx: sx,
        ref: innerRef,
        "data-disabled": !!isDisabled || void 0,
        "aria-disabled": !!isDisabled || void 0
    }, showCheckIcon && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Menu, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.MenuIcon, {
        fontSize: "0.8em",
        marginEnd: "0.75rem",
        opacity: isSelected ? 1 : 0
    }, /*#__PURE__*/ React.createElement(CheckIcon, null))), children);
};
/* ESM default export */ const Option_rslib_entry_ = CustomOption;
export { Option_rslib_entry_ as default, useSize };
