import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { string, bool, number } from "prop-types";
import Text from "../../Text";
const HelperWrapper = styled.View(
  ({
    full,
    theme: {
      yoga: {
        components: { input }
      }
    }
  }) => `
    width: ${full ? "100%" : `${input.width}px`};
    max-width: ${full ? "100%" : `${input.width}px`};
    flex-direction: row;
    justify-content: space-between;

    margin-top: ${input.helper.margin.top}px;
  `
);
const Info = styled(Text.Caption)(
  ({
    disabled,
    focused,
    error,
    theme: {
      yoga: {
        baseFont,
        colors,
        components: { input }
      }
    }
  }) => `
    flex-wrap: wrap;

    font-family: ${baseFont.family};
    color: ${input.helper.color.default};

    ${disabled ? `color: ${colors.steady};` : ""}
    ${focused ? `color: ${input.helper.color.focus};` : ""}
    ${error ? `color: ${colors.feedback.attention.dark};` : ""}
  `
);
const Helper = React.forwardRef(
  ({
    full = false,
    error = void 0,
    helper = void 0,
    disabled = void 0,
    focused = false,
    maxLength = void 0,
    length = void 0,
    hideMaxLength = false
  }, ref) => /* @__PURE__ */ jsxs(HelperWrapper, { ref, full, disabled, children: [
    (error || helper) && /* @__PURE__ */ jsx(Info, { disabled, focused, error, children: error || helper }),
    !hideMaxLength && maxLength && /* @__PURE__ */ jsxs(Info, { disabled, focused, error, children: [
      length,
      "/",
      maxLength
    ] })
  ] })
);
Helper.propTypes = {
  disabled: bool,
  error: string,
  focused: bool,
  full: bool,
  helper: string,
  maxLength: number,
  length: number,
  hideMaxLength: bool
};
var Helper_default = Helper;
export {
  Helper_default as default
};
