"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 Field_exports = {};
__export(Field_exports, {
  default: () => Field_default
});
module.exports = __toCommonJS(Field_exports);
var import_styled_components = __toESM(require("styled-components"));
const ICON_SIZE = 20;
const labelTransition = import_styled_components.css`
  ${({
  theme: {
    yoga: {
      transition,
      components: { input }
    }
  }
}) => `
    transform: translateY(-${input.height / 2 - 2}px);
    transition-property: transform, font-size, color;
    transition-duration: ${transition.duration[1]}ms;
    transition-timing-function: cubic-bezier(${transition.timing[0].join()});

    font-size: ${input.label.font.size.typed}px;
    line-height: ${input.label.font.lineHeight.typed}px;
  `}
`;
const Field = import_styled_components.default.input`
  width: 100%;

  appearance: none;
  background-color: transparent;
  outline: none;

  position: absolute;
  bottom: 0;
  left: 0;

  border: none;
  box-sizing: border-box;

  ${({
  label,
  placeholder,
  cleanable,
  error,
  value,
  theme: {
    yoga: {
      transition,
      colors,
      baseFont,
      components: { input }
    }
  }
}) => import_styled_components.css`
    height: ${input.height}px;
    padding-top: ${input.padding.top}px;
    padding-right: ${cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right}px;
    padding-bottom: ${input.padding.bottom}px;
    padding-left: ${input.padding.left}px;

    color: ${input.font.color.focus};
    font-family: ${baseFont.family}, sans-serif;
    font-size: ${input.font.size}px;
    font-weight: ${input.font.weight};
    line-height: ${input.font.lineHeight}px;

    &:focus {
      color: ${input.font.color.focus};

      & ~ legend {
        max-width: max-content;
        transition-property: max-width;
        transition-duration: ${transition.duration[1]}ms;
      }

      & ~ label {
        ${labelTransition}

        color: ${error ? `${colors.feedback.attention[1]}` : `${colors.text.primary}`};
      }

      &::placeholder {
        color: ${input.label.color.default};
      }
    }

    &:disabled {
      cursor: not-allowed;
      color: ${colors.steady};
      -webkit-text-fill-color: ${colors.steady};
      opacity: 1;
    }

    ${placeholder && label ? import_styled_components.css`
          &::placeholder {
            color: transparent;
          }
        ` : import_styled_components.css`
          &::placeholder {
            color: ${input.label.color.default};
          }
        `}

    ${value && import_styled_components.css`
      & ~ legend {
        max-width: max-content;
      }

      & ~ label {
        color: ${error ? `${colors.feedback.attention[1]}` : ""};
        ${labelTransition}
      }
    `}
  `}

  &[type="number"]::-webkit-outer-spin-button,
  &[type="number"]::-webkit-inner-spin-button {
    display: none;
  }

  &:invalid {
    box-shadow: none;
  }
`;
var Field_default = Field;
