"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var TextInput_exports = {};
__export(TextInput_exports, {
  TextInput: () => TextInput
});
module.exports = __toCommonJS(TextInput_exports);
var import_debounce = __toESM(require("lodash/debounce"));
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var import_assets = require("../../../assets");
var import_components = require("../../../components");
var import_libs = require("../../libs");
const DEBOUNCE_MS = 250;
const COLORS_BORDER_STATUS_ERROR_DEFAULT = "colors-border-status-error-default";
const EXTRA_FONT_SIZE = "0.75rem";
const ICON_BUTTONS_SIZE = "32px";
const LABEL_OFFSET_Y = `calc(-0.5 * ${EXTRA_FONT_SIZE})`;
const LABEL_OFFSET_X = "var(--spacing-s, 16px)";
const LABEL_PADDING = "5px";
const ClearButton = import_styled_components.default.button`
  ${(0, import_libs.withTokens)("colors-surface-dark-default")}

  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: ${ICON_BUTTONS_SIZE};
  width: ${ICON_BUTTONS_SIZE};
`;
const Container = import_styled_components.default.div`
  ${(0, import_libs.withTokens)("spacing-xxs")}

  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs, 4px);
  position: relative;
  min-width: 328px;
`;
const Label = import_styled_components.default.label`
  ${(0, import_libs.withTokens)(
  COLORS_BORDER_STATUS_ERROR_DEFAULT,
  "colors-border-active-default",
  "colors-content-disabled",
  "colors-content-subdued-default-default",
  "spacing-s"
)}
  color: ${({ hasError, isDisabled, isFocused }) => isDisabled ? "var(--colors-content-disabled)" : hasError ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});` : isFocused ? "var(--colors-border-active-default)" : "var(--colors-content-subdued-default-default);"};
  font-size: ${EXTRA_FONT_SIZE};
  padding-inline: ${LABEL_PADDING};
  position: absolute;
  top: ${LABEL_OFFSET_Y};
  left: calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});
`;
const Wrapper = import_styled_components.default.div`
  ${(0, import_libs.withTokens)(
  "colors-content-default-default",
  "colors-surface-transparent-subdued-default",
  "radius-s",
  "spacing-s",
  "spacing-xxs"
)}

  align-items: center;
  border-radius: var(--radius-s);
  display: flex;
  gap: var(--spacing-xxs, 8px);
  height: 56px;
  padding: ${({ hasEnd, hasStart }) => `0 ${hasEnd ? "var(--spacing-xs, 8px)" : LABEL_OFFSET_X} 0 ${hasStart ? "var(--spacing-xs, 8px)" : LABEL_OFFSET_X}`};
  position: relative;
  transition: height 0.3s linear;
`;
const StyledInput = import_styled_components.default.input`
  ${(0, import_libs.withTokens)("colors-border-disabled-default")}

  flex: 1;
  background: none;
  border: none;
  cursor: text;
  &[disabled] {
    color: var(--colors-border-disabled-default);
    cursor: not-allowed;
  }
  outline: none;
`;
const Fieldset = import_styled_components.default.fieldset`
  ${(0, import_libs.withTokens)(
  COLORS_BORDER_STATUS_ERROR_DEFAULT,
  "colors-border-active-default",
  "colors-content-subdued-default-default",
  "colors-content-disabled",
  "spacing-s"
)}
  border-radius: var(--radius-s);
  border-color: ${({ isDisabled, hasError, isFocused }) => isDisabled ? "var(--colors-content-disabled)" : hasError ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})` : isFocused ? "var(--colors-border-active-default)" : "var(--colors-content-subdued-default-default)"};
  border-style: solid;
  border-width: 1px;
  bottom: 0;
  font-size: ${EXTRA_FONT_SIZE};
  left: 0;
  overflow: hidden;
  padding: 0 calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});
  pointer-events: none;
  position: absolute;
  right: 0;
  top: ${({ hasLabel }) => hasLabel ? LABEL_OFFSET_Y : "0"};
`;
const Legend = import_styled_components.default.legend`
  visibility: hidden;
  padding-inline: ${LABEL_PADDING};
`;
const HelperContainer = (0, import_styled_components.default)(import_components.Flex)`
  ${(0, import_libs.withTokens)(COLORS_BORDER_STATUS_ERROR_DEFAULT)}
  align-items: center;
`;
const HelperText = import_styled_components.default.span`
  ${(0, import_libs.withTokens)(COLORS_BORDER_STATUS_ERROR_DEFAULT, "colors-border-disabled-default")}
  ${({ isDisabled, hasError }) => isDisabled ? "var(--colors-border-disabled-default)" : hasError ? `color: var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});` : ""}
  font-size: ${EXTRA_FONT_SIZE};
`;
const TextInput = import_react.default.forwardRef(
  ({
    label,
    name,
    defaultValue = "",
    startAdornment = null,
    endAdornment = null,
    error = false,
    helperText,
    style,
    onFocus,
    onBlur,
    onChange,
    ...rest
  }, ref) => {
    const inputRef = import_react.default.useRef(null);
    const [isFocused, setIsFocused] = import_react.default.useState(false);
    const [value, setValue] = import_react.default.useState(defaultValue);
    import_react.default.useImperativeHandle(ref, () => inputRef.current);
    const hideClearDebounced = import_react.default.useMemo(
      () => (0, import_debounce.default)(() => setIsFocused(false), DEBOUNCE_MS),
      []
    );
    const handleFocus = (e) => {
      hideClearDebounced.cancel();
      setIsFocused(true);
      onFocus == null ? void 0 : onFocus(e);
    };
    const handleBlur = (e) => {
      onBlur == null ? void 0 : onBlur(e);
      hideClearDebounced();
    };
    import_react.default.useEffect(() => () => hideClearDebounced.cancel(), [hideClearDebounced]);
    const handleChange = (e) => {
      setValue(e.target.value);
      onChange == null ? void 0 : onChange(e);
    };
    const clearInput = () => {
      if (inputRef.current) {
        inputRef.current.value = "";
        setValue("");
        inputRef.current.focus();
      }
    };
    const showClear = value.length > 0 && (isFocused || error);
    const hasEnd = showClear || Boolean(endAdornment);
    const hasError = Boolean(error);
    const hasLabel = Boolean(label);
    const isDisabled = Boolean(rest.disabled);
    return /* @__PURE__ */ import_react.default.createElement(Container, { style }, label && /* @__PURE__ */ import_react.default.createElement(Label, { isDisabled, hasError, isFocused, htmlFor: name }, label), /* @__PURE__ */ import_react.default.createElement(Wrapper, { hasStart: Boolean(startAdornment), hasEnd }, startAdornment, /* @__PURE__ */ import_react.default.createElement(
      StyledInput,
      {
        name,
        defaultValue,
        onFocus: handleFocus,
        onBlur: handleBlur,
        onChange: handleChange,
        ...rest,
        ref: inputRef
      }
    ), showClear ? /* @__PURE__ */ import_react.default.createElement(ClearButton, { onClick: clearInput, "aria-label": "Clear" }, /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.DeleteCircleFill, { size: "S", color: "var(--colors-surface-dark-default)" })) : endAdornment, /* @__PURE__ */ import_react.default.createElement(
      Fieldset,
      {
        hasError,
        hasLabel,
        isDisabled,
        isFocused
      },
      label ? /* @__PURE__ */ import_react.default.createElement(Legend, null, label) : null
    )), helperText ? /* @__PURE__ */ import_react.default.createElement(HelperContainer, { columnGap: 2 }, hasError ? /* @__PURE__ */ import_react.default.createElement(
      import_assets.Icons.DeleteCircleFill,
      {
        size: "S",
        color: `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`
      }
    ) : null, /* @__PURE__ */ import_react.default.createElement(HelperText, { isDisabled, hasError }, helperText)) : null);
  }
);
TextInput.displayName = "TextInput";
//# sourceMappingURL=TextInput.js.map
