import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { F as FieldMessage } from './FieldMessage-DzxfodaI.js';
import { S as SrOnly } from './SrOnly-pnf8ajnh.js';

import './Helper.css';const helper = "_helper_1iokr_1";
const styles = {
	helper: helper
};

const Helper = forwardRef((props, ref) => {
  const {
    id,
    hint,
    description,
    error,
    warning,
    errorAriaLive: _errorAriaLive,
    errorMessage,
    maxLength,
    isTyping,
    inputLength = 0,
    showCounter
  } = props;
  return /* @__PURE__ */ jsxs("div", { className: styles["helper"], ref, id, children: [
    /* @__PURE__ */ jsx(
      FieldMessage,
      {
        hint,
        description,
        error,
        warning,
        errorMessage
      }
    ),
    showCounter && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
      inputLength,
      "/",
      maxLength
    ] }),
    isTyping && !!maxLength ? maxLength - inputLength >= 1 ? /* @__PURE__ */ jsx(SrOnly, { children: /* @__PURE__ */ jsx("span", { "aria-live": "polite", "aria-atomic": "true", children: `${maxLength - inputLength} character${maxLength - inputLength !== 1 ? "s" : ""} left` }) }) : /* @__PURE__ */ jsx(SrOnly, { children: /* @__PURE__ */ jsx("span", { role: "alert", children: "Maximum characters count reached" }) }) : null
  ] });
});
Helper.displayName = "Helper";

export { Helper as H };
//# sourceMappingURL=Helper-DtDeaYTn.js.map
