import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, cloneElement } from "react";
import { Box } from "../../Box/Box.mjs";
import { mergeIds, FieldMessage } from "../../MonthPicker/MonthPicker.mjs";
import { Inline, Text } from "../../Accordion/AccordionItem.mjs";
import { virtualTouchable } from "../touchable/virtualTouchable.mjs";
import { StyledInput } from "./StyledInput.mjs";
import { sizeVars, labelOffset, children } from "./InlineField.css.mjs";
const InlineField = forwardRef(
  ({
    id,
    name,
    value,
    checked,
    data,
    onChange,
    label,
    type,
    children: children$1,
    description,
    badge,
    message,
    reserveMessageSpace = false,
    tone = "neutral",
    disabled = false,
    required,
    inList = false,
    tabIndex,
    size = "standard",
    "aria-describedby": ariaDescribedBy,
    ...restProps
  }, forwardedRef) => {
    const messageId = `${id}-message`;
    const descriptionId = `${id}-description`;
    const hasMessage = message || reserveMessageSpace;
    if (process.env.NODE_ENV !== "production") {
      if (badge && badge.props.bleedY !== void 0) {
        console.warn(
          `Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
        );
      }
    }
    return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
      /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
        /* @__PURE__ */ jsx(
          StyledInput,
          {
            ...restProps,
            type,
            id,
            checked,
            name,
            value,
            data,
            onChange,
            disabled,
            tone,
            tabIndex,
            required,
            "aria-describedby": mergeIds(
              ariaDescribedBy,
              message ? messageId : void 0,
              description ? descriptionId : void 0
            ),
            size,
            ref: forwardedRef
          }
        ),
        /* @__PURE__ */ jsxs(Box, { paddingLeft: "small", flexGrow: 1, children: [
          /* @__PURE__ */ jsx(Box, { className: [sizeVars[size], labelOffset], children: /* @__PURE__ */ jsxs(Inline, { space: "small", alignY: "center", children: [
            /* @__PURE__ */ jsx(
              Box,
              {
                component: "label",
                htmlFor: id,
                userSelect: "none",
                display: "block",
                cursor: !disabled ? "pointer" : void 0,
                className: virtualTouchable(),
                children: /* @__PURE__ */ jsx(
                  Text,
                  {
                    weight: checked && !inList ? "strong" : void 0,
                    tone: disabled ? "secondary" : void 0,
                    size,
                    children: label
                  }
                )
              }
            ),
            badge ? cloneElement(badge, { bleedY: true }) : null
          ] }) }),
          description ? /* @__PURE__ */ jsx(Box, { paddingTop: "small", children: /* @__PURE__ */ jsx(Text, { tone: "secondary", size, id: descriptionId, children: description }) }) : null,
          children$1 ? /* @__PURE__ */ jsx(
            Box,
            {
              position: "relative",
              display: "none",
              paddingTop: "small",
              className: children,
              children: children$1
            }
          ) : null
        ] })
      ] }),
      hasMessage ? /* @__PURE__ */ jsx(Box, { paddingTop: description ? "small" : "xsmall", children: /* @__PURE__ */ jsx(
        FieldMessage,
        {
          id: messageId,
          tone,
          disabled,
          message,
          reserveMessageSpace
        }
      ) }) : null
    ] });
  }
);
export {
  InlineField
};
