import {
  defaultTextInputTypography,
  fieldWidth,
  maxFieldWidth,
  textInputBorderColor,
  textInputBorderColorFocused,
  textInputPadding,
  textInputPaddingPx,
  textInputPlaceholderColor
} from "./chunk-FTMB6R72.js";
import {
  z
} from "./chunk-55OQPFLF.js";
import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  getColor,
  themeOr
} from "./chunk-VAH342U2.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/Select.tsx
import { useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import BaseSelect from "react-select";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function Select(_a) {
  var _b = _a, {
    zIndex,
    selectRef,
    label,
    openMenuOnFocus = true,
    tabSelectsValue = false,
    getOptionStyles,
    getControlStyles
  } = _b, rest = __objRest(_b, [
    "zIndex",
    "selectRef",
    "label",
    "openMenuOnFocus",
    "tabSelectsValue",
    "getOptionStyles",
    "getControlStyles"
  ]);
  const theme = useTheme();
  const styles = {
    container: (styles2, state) => {
      return __spreadProps(__spreadValues({}, styles2), {
        width: fieldWidth,
        maxWidth: maxFieldWidth,
        zIndex: z.select
      });
    },
    control: (styles2, state) => {
      const controlStyles = getControlStyles ? getControlStyles(styles2, state) : {};
      return __spreadValues(__spreadProps(__spreadValues({}, styles2), {
        transition: "none",
        padding: state.menuIsOpen || state.isFocused ? `${textInputPaddingPx - 1}px` : textInputPadding,
        boxShadow: "none",
        background: theme.bg,
        minHeight: 0,
        fontSize: 14,
        borderWidth: state.menuIsOpen || state.isFocused ? "2px" : "1px",
        "&:hover": {
          borderColor: state.menuIsOpen ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme })
        },
        borderColor: state.menuIsOpen || state.isFocused ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme })
      }), controlStyles);
    },
    indicatorsContainer: (styles2) => __spreadProps(__spreadValues({}, styles2), {
      padding: "0 8px"
    }),
    indicatorSeparator: (styles2) => ({
      display: "none"
    }),
    menu: (styles2, state) => {
      return __spreadProps(__spreadValues({}, styles2), {
        overflow: "hidden",
        border: `2px solid ${theme.lcNeutral}`,
        backgroundColor: theme.bg,
        boxShadow: "0px 3px 6px 1px rgba(0,0,0,0.05)",
        borderColor: theme.hcNeutral,
        width: "max-content",
        minWidth: "100%"
      });
    },
    option: (styles2, props) => {
      const optionStyles = getOptionStyles ? getOptionStyles(styles2, props) : {};
      return __spreadValues(__spreadProps(__spreadValues({}, styles2), {
        color: props.isFocused ? getColor(theme, defaultTextInputTypography.color) : props.isDisabled ? textInputPlaceholderColor({ theme }) : getColor(theme, defaultTextInputTypography.color),
        fontWeight: 600,
        cursor: "pointer",
        backgroundColor: props.isFocused ? themeOr(theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
        WebkitTapHighlightColor: theme.c1Neutral,
        "&:active": {
          backgroundColor: themeOr(
            theme.c05Neutral,
            theme.c5Neutral
          )({ theme })
        }
      }), optionStyles);
    },
    menuPortal: (styles2) => __spreadProps(__spreadValues({}, styles2), {
      fontSize: 14,
      zIndex: zIndex || z.selectFocused
    }),
    singleValue: (styles2) => __spreadProps(__spreadValues({}, styles2), {
      color: theme.text,
      fontWeight: 600,
      fontSize: 14
    }),
    placeholder: (styles2) => __spreadProps(__spreadValues({}, styles2), {
      color: theme.mcNeutral
    }),
    valueContainer: (styles2) => __spreadProps(__spreadValues({}, styles2), {
      padding: 0
    }),
    input: (styles2) => __spreadProps(__spreadValues({}, styles2), {
      color: theme.text,
      fontWeight: 600,
      fontSize: 14
    })
  };
  return /* @__PURE__ */ jsxs(StyledSelect, { children: [
    label && /* @__PURE__ */ jsx(SelectLabel, { hasError: false, children: label }),
    /* @__PURE__ */ jsx(
      BaseSelect,
      __spreadProps(__spreadValues({}, rest), {
        styles,
        openMenuOnFocus,
        tabSelectsValue,
        menuPortalTarget: document.body,
        ref: selectRef,
        components: __spreadValues({
          DropdownIndicator: () => /* @__PURE__ */ jsx(Icon, { name: "Chevron", width: 16 })
        }, rest.components),
        theme: (selectTheme) => __spreadProps(__spreadValues({}, selectTheme), {
          borderRadius: 8,
          colors: {
            danger: theme.danger,
            dangerLight: "#ff8",
            primary: theme.text,
            primary75: "#ccc",
            primary50: "#888",
            primary25: "#444",
            neutral0: "#000",
            neutral5: "#111",
            neutral10: "#222",
            neutral20: "#999",
            neutral30: "#aaa",
            neutral40: "#bbb",
            neutral50: "#bbb",
            neutral60: "#ccc",
            neutral70: "#ccc",
            neutral80: "#ddd",
            neutral90: "#ddd"
          }
        })
      })
    )
  ] });
}
var SelectLabel = styled.label`
  font-size: 10px;
  position: absolute;
  z-index: ${z.select + 1};
  background-color: ${({ theme }) => theme.bg};
  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
  font-weight: 600;
  padding: 0px 6px;
  left: 12px;
  top: -6px;
`;
var StyledSelect = styled.div`
  position: relative;
  & + & {
    margin-top: 8px;
  }
`;
var Select_default = Select;

export {
  Select,
  StyledSelect,
  Select_default
};
