import { jsx, jsxs } from "react/jsx-runtime";
import { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-ChJaTNa5.js";
import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
import { $ as $8e6cc465cc68f603$export$698f465ec27e93df } from "../../context-DCAZLyDS.js";
import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { BaseControl } from "../base-control/base-control.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
let $216918bed6669f72$var$filterHoverProps = (props) => {
  let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
  return otherProps;
};
const $216918bed6669f72$export$f5c9f3c2c4054eec = /* @__PURE__ */ forwardRef(function TextArea(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $216918bed6669f72$export$2dc6166a7e65358c);
  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
    isTextInput: true,
    autoFocus: props.autoFocus
  });
  let isInvalid = !!props["aria-invalid"] && props["aria-invalid"] !== "false";
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    values: {
      isHovered,
      isFocused,
      isFocusVisible,
      isDisabled: props.disabled || false,
      isInvalid
    },
    defaultClassName: "react-aria-TextArea"
  });
  return /* @__PURE__ */ React__default.createElement("textarea", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928($216918bed6669f72$var$filterHoverProps(props), focusProps, hoverProps),
    ...renderProps,
    ref,
    "data-focused": isFocused || void 0,
    "data-disabled": props.disabled || void 0,
    "data-hovered": isHovered || void 0,
    "data-focus-visible": isFocusVisible || void 0,
    "data-invalid": isInvalid || void 0
  });
});
const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TextField(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
  var _props_validationBehavior, _ref;
  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
  let inputRef = useRef(null);
  [props, inputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, inputRef, $8e6cc465cc68f603$export$698f465ec27e93df);
  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
  let [inputElementType, setInputElementType] = useState("input");
  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $2d73ec29415bd339$export$712718f7aec83d5({
    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
    inputElementType,
    label,
    validationBehavior
  }, inputRef);
  let inputOrTextAreaRef = useCallback((el) => {
    inputRef.current = el;
    if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
  }, [
    inputRef
  ]);
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    values: {
      isDisabled: props.isDisabled || false,
      isInvalid: validation.isInvalid,
      isReadOnly: props.isReadOnly || false,
      isRequired: props.isRequired || false
    },
    defaultClassName: "react-aria-TextField"
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  delete DOMProps.id;
  return /* @__PURE__ */ React__default.createElement("div", {
    ...DOMProps,
    ...renderProps,
    ref,
    slot: props.slot || void 0,
    "data-disabled": props.isDisabled || void 0,
    "data-invalid": validation.isInvalid || void 0,
    "data-readonly": props.isReadOnly || void 0,
    "data-required": props.isRequired || void 0
  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
    values: [
      [
        $01b77f81d0f07f68$export$75b6ee27786ba447,
        {
          ...labelProps,
          ref: labelRef
        }
      ],
      [
        $3985021b0ad6602f$export$37fb8590cf2c088c,
        {
          ...inputProps,
          ref: inputOrTextAreaRef
        }
      ],
      [
        $216918bed6669f72$export$2dc6166a7e65358c,
        {
          ...inputProps,
          ref: inputOrTextAreaRef
        }
      ],
      [
        $a049562f99e7db0e$export$f9c6924e160136d1,
        {
          role: "presentation",
          isInvalid: validation.isInvalid,
          isDisabled: props.isDisabled || false
        }
      ],
      [
        $514c0188e459b4c0$export$9afb8bc826b033ea,
        {
          slots: {
            description: descriptionProps,
            errorMessage: errorMessageProps
          }
        }
      ],
      [
        $ee014567cb39d3f0$export$ff05c3ac10437e03,
        validation
      ]
    ]
  }, renderProps.children));
});
/**
 * An input field.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - Icon to display in the label.
 * @param {string} [props.label] - Label to display.
 * @param {string} [props.subtitle] - Subtitle to display.
 * @param {string} [props.help] - Help text to display below the input.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
 * @param {boolean} [props.inline] - Whether the element menu is displayed inline with the label, to the right of it.
 * @param {string} [props.value] - The current value of the input.
 * @param {Function} [props.onChange] - Function to run when the input value changes.
 * @param {InputType} [props.type='text'] - The input type. Renders a `<textarea>` instead of `<input>` if set to 'multiline'.
 * @param {boolean} [props.disabled] - If `true`, the input is disabled.
 * @param {boolean} [props.readOnly] - If `true`, the input is read-only.
 * @param {string} [props.className] - Classes to pass to the input field.
 * @param {string} [props.wrapperClassName] - Classes to pass to the input field wrapping element.
 * @param {boolean} [props.monospaceFont] - If `true`, the input uses a monospace font. Useful for things like IDs to make them easier to read.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The InputField component.
 *
 * @typedef {'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | 'multiline'} InputType
 *
 * @example
 * <InputField
 * 	label='My input'
 * 	value={inputValue}
 * 	onChange={setInputValue}
 * />
 *
 * @preserve
 */
const InputField = (props) => {
  const { icon, label, subtitle, help, actions, inline, value, onChange, type = "text", disabled, readOnly, className, wrapperClassName, hidden, monospaceFont, ...other } = props;
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    $bcdf0525bf22703d$export$2c73285ae9390cec,
    {
      value: value ?? "",
      onChange,
      isDisabled: disabled,
      isReadOnly: readOnly,
      className: wrapperClassName,
      ...other,
      children: /* @__PURE__ */ jsxs(
        BaseControl,
        {
          icon,
          label,
          subtitle,
          actions,
          inline,
          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
          help,
          children: [
            type !== "multiline" && /* @__PURE__ */ jsx(
              $3985021b0ad6602f$export$f5b8910cec6cf069,
              {
                ...other,
                type,
                className: clsx(
                  "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm es:not-readonly:focus:shadow-md es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950 es:bg-white",
                  "es:any-focus:outline-hidden",
                  "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                  "es:focus-visible:border-accent-500",
                  "es:inset-ring es:inset-ring-secondary-100",
                  "es:disabled:shadow-none! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
                  type === "search" && "es:[&::-webkit-search-cancel-button]:hidden",
                  (monospaceFont || type === "password") && "es:font-mono",
                  className
                ),
                onKeyUp: (e) => {
                  if (type === "search" && e.key === "Escape") {
                    onChange("");
                  }
                  if (props.onKeyUp) {
                    props.onKeyUp(e);
                  }
                }
              }
            ),
            type === "multiline" && /* @__PURE__ */ jsx(
              $216918bed6669f72$export$f5c9f3c2c4054eec,
              {
                ...other,
                className: clsx(
                  "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm es:not-readonly:focus:shadow-md es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
                  "es:any-focus:outline-hidden",
                  "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                  "es:focus-visible:border-accent-500",
                  "es:inset-ring es:inset-ring-secondary-100",
                  "es:disabled:shadow-none! es:readonly:shadow-xs! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
                  monospaceFont && "es:font-mono",
                  className
                )
              }
            )
          ]
        }
      )
    }
  );
};
export {
  InputField
};
