"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 BaseInput_exports = {};
__export(BaseInput_exports, {
  BaseInput: () => BaseInput,
  ClearableButtonUnstyled: () => ClearableButtonUnstyled,
  InputContainer: () => InputContainer,
  InputErrorContainer: () => InputErrorContainer,
  InputInfoContainer: () => InputInfoContainer,
  InputRenderLeftContainer: () => InputRenderLeftContainer,
  InputRenderRightContainer: () => InputRenderRightContainer,
  InputWarningContainer: () => InputWarningContainer,
  default: () => BaseInput_default
});
module.exports = __toCommonJS(BaseInput_exports);
var import_styled_components = __toESM(require("styled-components"));
var import_styled_system = require("styled-system");
var import_react = __toESM(require("react"));
var import_CircledCrossSolidMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium"));
var import_Flex = __toESM(require("../../layout/Flex"));
var import_Text = __toESM(require("../../asorted/Text"));
var import_helpers = require("../../../styles/helpers");
var import_Button = require("../../cta/Button");
const InputContainer = import_styled_components.default.div`
  display: flex;
  height: 48px;
  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
  border-radius: 24px;
  transition: all 0.2s ease;
  color: ${(p) => p.theme.colors.neutral.c100};

  ${(p) => p.focus && !p.error && !p.warning && import_styled_components.css`
      border: 1px solid ${p.theme.colors.primary.c80};
      box-shadow: 0 0 0 4px ${(0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
    `};

  ${(p) => p.error && !p.disabled && import_styled_components.css`
      border: 1px solid ${p.theme.colors.error.c50};
    `};

  ${(p) => !p.error && p.warning && !p.disabled && import_styled_components.css`
      border: 1px solid ${p.theme.colors.warning.c40};
    `};

  ${(p) => !p.error && !p.warning && !p.disabled && import_styled_components.css`
      &:hover {
        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};
      }
    `};

  ${(p) => p.disabled && import_styled_components.css`
      color: ${p.theme.colors.neutral.c60};
      background: ${(p2) => p2.theme.colors.neutral.c20};
    `};
`;
const BaseInput = import_styled_components.default.input.attrs({
  fontSize: "paragraph",
  fontWeight: "medium"
})`
  height: 100%;
  width: 100%;
  border: 0;
  caret-color: ${(p) => p.error ? p.theme.colors.error.c50 : p.theme.colors.primary.c80};
  background: none;
  outline: none;
  cursor: ${(p) => p.disabled ? "not-allowed" : "text"};
  flex-shrink: 1;
  padding-left: 20px;
  padding-right: 20px;
  &::placeholder {
    color: ${(p) => p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70};
  }

  /* stylelint-disable property-no-vendor-prefix */

  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
  &::-webkit-outer-spin-button,
  ::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Hide type=number arrow for Firefox */
  &[type="number"] {
    -moz-appearance: textfield;
  }
  /* stylelint-enable property-no-vendor-prefix */

  ${import_styled_system.typography}
`;
const InputErrorContainer = (0, import_styled_components.default)(import_Text.default)`
  color: ${(p) => p.theme.colors.error.c50};
  margin-left: 12px;
`;
const InputWarningContainer = (0, import_styled_components.default)(import_Text.default)`
  color: ${(p) => p.theme.colors.warning.c40};
  margin-left: 12px;
`;
const InputInfoContainer = (0, import_styled_components.default)(import_Text.default)`
  color: ${(p) => p.theme.colors.neutral.c60};
  margin-left: 12px;
`;
const InputRenderLeftContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
  alignItems: "center",
  pl: "16px"
}))``;
const InputRenderRightContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
  alignItems: "center",
  pr: "16px"
}))``;
const ClearableButtonUnstyled = (0, import_styled_components.default)(import_Button.ButtonUnstyled)`
  display: flex;
`;
const IDENTITY = (_) => _;
function Input(props, ref) {
  const { colors } = (0, import_styled_components.useTheme)();
  const {
    value,
    disabled,
    error,
    warning,
    info,
    onChange,
    onChangeEvent,
    renderLeft,
    renderRight,
    unwrapped,
    containerProps,
    serialize = IDENTITY,
    deserialize = IDENTITY,
    clearable,
    ...htmlInputProps
  } = props;
  const [focus, setFocus] = (0, import_react.useState)(false);
  const inputValue = (0, import_react.useMemo)(() => serialize(value), [serialize, value]);
  const handleChange = (0, import_react.useCallback)(
    (e) => {
      onChange && onChange(deserialize(e.target.value));
      onChangeEvent && onChangeEvent(e);
    },
    [onChange, onChangeEvent, deserialize]
  );
  const handleClear = (0, import_react.useCallback)(() => {
    onChange && onChange(deserialize(""));
  }, [onChange, deserialize]);
  const inner = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, typeof renderLeft === "function" ? renderLeft(props) : renderLeft, /* @__PURE__ */ import_react.default.createElement(
    BaseInput,
    {
      ref,
      ...htmlInputProps,
      disabled,
      error,
      warning,
      info,
      onChange: handleChange,
      value: inputValue,
      onFocus: (event) => {
        setFocus(true);
        htmlInputProps.onFocus && htmlInputProps.onFocus(event);
      },
      onBlur: (event) => {
        setFocus(false);
        htmlInputProps.onBlur && htmlInputProps.onBlur(event);
      }
    }
  ), clearable && inputValue && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", mr: 7 }, /* @__PURE__ */ import_react.default.createElement(ClearableButtonUnstyled, { onClick: handleClear }, /* @__PURE__ */ import_react.default.createElement(import_CircledCrossSolidMedium.default, { size: 18, color: colors.neutral.c50 }))), typeof renderRight === "function" ? renderRight(props) : renderRight);
  if (unwrapped) {
    return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "stretch", style: { height: "100%" } }, inner);
  }
  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
    InputContainer,
    {
      disabled,
      focus,
      error,
      warning,
      ...containerProps
    },
    inner
  ), (error || warning || info) && !disabled && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 2, mt: 2 }, error ? /* @__PURE__ */ import_react.default.createElement(InputErrorContainer, { variant: "small" }, error) : warning ? /* @__PURE__ */ import_react.default.createElement(InputWarningContainer, { variant: "small" }, warning) : info ? /* @__PURE__ */ import_react.default.createElement(InputInfoContainer, { variant: "small" }, info) : null));
}
var BaseInput_default = import_react.default.forwardRef(Input);
//# sourceMappingURL=index.js.map
