import {
  ErrorMessage
} from "./chunk-MZJT3USG.js";
import {
  Stack
} from "./chunk-XH3OJQMW.js";
import {
  Label
} from "./chunk-ZN7OWLZY.js";
import {
  Icon
} from "./chunk-TKIP5Q5H.js";
import {
  useLabel
} from "./chunk-YLEFK7S2.js";
import {
  useValidationClasses
} from "./chunk-DYOFXXZD.js";
import {
  spaceDelimitedList
} from "./chunk-DTWRSP5P.js";

// src/components/Select/Select.tsx
import { chevronDown } from "@simplybusiness/icons";
import classNames from "classnames/dedupe";
import { useId } from "react";
import "@simplybusiness/mobius/src/components/Select/Select.css";
import { jsx, jsxs } from "react/jsx-runtime";
var Select = ({ ref, ...props }) => {
  const {
    label,
    onChange,
    isInvalid,
    errorMessage,
    isDisabled = false,
    isRequired,
    ...otherProps
  } = props;
  const { labelProps, fieldProps } = useLabel({
    label,
    ...otherProps
  });
  const validationClasses = useValidationClasses({ isInvalid });
  const stateClasses = {
    "--is-disabled": isDisabled,
    "--is-required": typeof isRequired === "boolean" && isRequired,
    "--is-optional": typeof isRequired === "boolean" && !isRequired
  };
  const sharedClasses = classNames(validationClasses, stateClasses);
  const wrapperClasses = classNames(
    "mobius-select__wrapper",
    sharedClasses,
    otherProps.className
  );
  const selectClasses = classNames(
    "mobius-select",
    sharedClasses,
    otherProps.className
  );
  const labelClasses = classNames(
    "mobius-label",
    sharedClasses,
    otherProps.className
  );
  const iconClasses = classNames("mobius-select__icon", sharedClasses);
  const errorMessageId = useId();
  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
  const describedBy = spaceDelimitedList([
    shouldErrorMessageShow,
    props["aria-describedby"]
  ]);
  const handleChange = (e) => {
    if (onChange) {
      onChange(e);
    }
  };
  return /* @__PURE__ */ jsxs(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
    label && /* @__PURE__ */ jsx(Label, { ...labelProps, className: labelClasses, children: label }),
    /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
      /* @__PURE__ */ jsx(
        "select",
        {
          ...otherProps,
          ...fieldProps,
          ref,
          multiple: false,
          className: selectClasses,
          disabled: isDisabled,
          "aria-invalid": !!errorMessage,
          "aria-describedby": describedBy,
          "aria-required": isRequired,
          required: isRequired,
          onChange: handleChange
        }
      ),
      /* @__PURE__ */ jsx("span", { className: iconClasses, children: /* @__PURE__ */ jsx(Icon, { icon: chevronDown }) })
    ] }),
    errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { id: errorMessageId, errorMessage })
  ] });
};
Select.displayName = "Select";

export {
  Select
};
//# sourceMappingURL=chunk-P6YHEIFT.js.map
