Object.defineProperties(exports, {
	__esModule: { value: true },
	[Symbol.toStringTag]: { value: "Module" }
});
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_styles_fields = require("../styles/fields.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let react_select = require("react-select");
react_select = require_chunk.__toESM(react_select);
//#region src/components/Select.tsx
function Select({ zIndex, selectRef, label, openMenuOnFocus = true, tabSelectsValue = false, getMenuStyles, getOptionStyles, getControlStyles, getPlaceholderStyles, getInputStyles, getSingleValueStyles, ...rest }) {
	const theme = (0, _emotion_react.useTheme)();
	const styles = {
		container: (styles, state) => {
			return {
				...styles,
				width: require_styles_fields.fieldWidth,
				maxWidth: require_styles_fields.maxFieldWidth,
				zIndex: require_styles_z_index.z.select
			};
		},
		control: (styles, state) => {
			const controlStyles = getControlStyles ? getControlStyles(styles, state) : {
				padding: state.menuIsOpen || state.isFocused ? `11px` : require_styles_fields.textInputPadding,
				background: theme.bg,
				minHeight: 0,
				fontSize: 14,
				borderWidth: state.menuIsOpen || state.isFocused ? "2px" : "1px"
			};
			return {
				...styles,
				transition: "none",
				boxShadow: "none",
				"&:hover": { borderColor: state.menuIsOpen ? require_styles_fields.textInputBorderColorFocused({ theme }) : require_styles_fields.textInputBorderColor({ theme }) },
				borderColor: state.menuIsOpen || state.isFocused ? require_styles_fields.textInputBorderColorFocused({ theme }) : require_styles_fields.textInputBorderColor({ theme }),
				...controlStyles
			};
		},
		indicatorsContainer: (styles) => ({
			...styles,
			padding: "0 8px"
		}),
		indicatorSeparator: (styles) => ({ display: "none" }),
		menu: (styles, state) => {
			const menuStyles = getMenuStyles ? getMenuStyles(styles, state) : {
				...styles,
				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%"
			};
			return {
				...styles,
				...menuStyles
			};
		},
		option: (styles, props) => {
			const optionStyles = getOptionStyles ? getOptionStyles(styles, props) : {
				color: props.isFocused ? require_styles_themes.getColor(theme, require_styles_fields.defaultTextInputTypography.color) : props.isDisabled ? require_styles_fields.textInputPlaceholderColor({ theme }) : require_styles_themes.getColor(theme, require_styles_fields.defaultTextInputTypography.color),
				fontWeight: 600,
				cursor: "pointer",
				backgroundColor: props.isFocused ? require_styles_themes.themeOr(theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
				WebkitTapHighlightColor: theme.c1Neutral,
				"&:active": { backgroundColor: require_styles_themes.themeOr(theme.c05Neutral, theme.c5Neutral)({ theme }) }
			};
			return {
				...styles,
				...optionStyles
			};
		},
		menuPortal: (styles) => ({
			...styles,
			fontSize: 14,
			zIndex: zIndex || require_styles_z_index.z.selectFocused
		}),
		singleValue: (styles, state) => {
			const singleValueStyles = getSingleValueStyles ? getSingleValueStyles(styles, state) : {
				color: theme.text,
				fontWeight: 600,
				fontSize: 14
			};
			return {
				...styles,
				...singleValueStyles
			};
		},
		placeholder: (styles, state) => {
			const placeholderStyles = getPlaceholderStyles ? getPlaceholderStyles(styles, state) : { color: theme.mcNeutral };
			return {
				...styles,
				...placeholderStyles
			};
		},
		valueContainer: (styles) => ({
			...styles,
			padding: 0
		}),
		input: (styles, state) => {
			const inputStyles = getInputStyles ? getInputStyles(styles, state) : {
				color: theme.text,
				fontWeight: 600,
				fontSize: 14
			};
			return {
				...styles,
				...inputStyles
			};
		}
	};
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledSelect, { children: [label && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SelectLabel, {
		hasError: false,
		children: label
	}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_select.default, {
		...rest,
		styles,
		openMenuOnFocus,
		tabSelectsValue,
		menuPortalTarget: document.body,
		ref: selectRef,
		components: {
			DropdownIndicator: () => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
				name: "Chevron",
				width: 16
			}),
			...rest.components
		},
		theme: (selectTheme) => ({
			...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"
			}
		})
	})] });
}
const SelectLabel = _emotion_styled.default.label`
  font-size: 10px;
  position: absolute;
  z-index: ${require_styles_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;
`;
const StyledSelect = _emotion_styled.default.div`
  position: relative;
  & + & {
    margin-top: 8px;
  }
`;
//#endregion
exports.Select = Select;
exports.default = Select;
exports.StyledSelect = StyledSelect;
