'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var react = require('@chakra-ui/react');

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
const isSize = (size) => {
  const isString = typeof size === "string";
  return isString && ["sm", "md", "lg"].includes(size);
};
const getDefaultSize = (size) => {
  if (isSize(size)) {
    return size;
  }
  if (size === "xs") {
    return "sm";
  }
  if (size === "xl") {
    return "lg";
  }
  return "md";
};
const useSize = (size) => {
  const chakraTheme = react.useTheme();
  const defaultSize = getDefaultSize(chakraTheme.components.Input.defaultProps.size);
  const definedSize = size != null ? size : defaultSize;
  const realSize = react.useBreakpointValue(typeof definedSize === "string" ? [definedSize] : definedSize, {
    fallback: "md"
  }) || defaultSize;
  return realSize;
};
const CheckIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(react.Icon, __spreadProps(__spreadValues({ viewBox: "0 0 14 14", w: "1em", h: "1em" }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
  "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 = react.useMultiStyleConfig("Menu").item;
  const paddings = {
    sm: "0.3rem 0.6rem",
    md: "0.4rem 0.8rem",
    lg: "0.5rem 1rem"
  };
  const selectedBg = react.useColorModeValue(
    `${selectedOptionColorScheme}.500`,
    `${selectedOptionColorScheme}.300`
  );
  const selectedColor = react.useColorModeValue("white", "black");
  const showCheckIcon = selectedOptionStyle === "check" && (!isMulti || hideSelectedOptions === false);
  const shouldHighlight = selectedOptionStyle === "color" && isSelected;
  const initialSx = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, 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 == null ? void 0 : chakraStyles.option) ? chakraStyles.option(initialSx, props) : initialSx;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    react.Box,
    __spreadProps(__spreadValues({}, innerProps), {
      role: "button",
      className: cx(
        {
          option: true,
          "option--is-disabled": isDisabled,
          "option--is-focused": isFocused,
          "option--is-selected": isSelected
        },
        className
      ),
      sx,
      ref: innerRef,
      "data-disabled": isDisabled ? true : void 0,
      "aria-disabled": isDisabled ? true : void 0,
      children: [
        showCheckIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(react.MenuIcon, { fontSize: "0.8em", marginEnd: "0.75rem", opacity: isSelected ? 1 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }) }),
        children
      ]
    })
  );
};

exports["default"] = CustomOption;
exports.useSize = useSize;
//# sourceMappingURL=Option.cjs.map
