@lanaco/lnc-react-ui/dist/FormField.js

React component library

import { jsxs as b, jsx as s } from "react/jsx-runtime";
import { P as l } from "./index-S5Cd7WrG.js";
import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { c as i, b as n } from "./utils-DtRLzzTZ.js";
import { u as g } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const f = m.label`
  display: block;
  margin-bottom: 4px;
  ${(e) => i(e.theme, "FormField", e.size, "enabled")}
  color: ${(e) => n(e.theme, "FormField", "primary", "enabled", "label")};
`, h = m.span`
  display: block;
  margin-top: 8px;
  ${(e) => i(e.theme, "FormField", e.size, "enabled")}
  color: ${(e) => n(
  e.theme,
  "FormField",
  e.color,
  "enabled",
  "text"
)};
`, F = (e) => {
  const {
    size: r = "small",
    color: c = "primary",
    className: d = "",
    style: p = {},
    text: o = "",
    label: t = "",
    children: y,
    ...u
  } = e, a = g();
  return /* @__PURE__ */ b("div", { style: p, className: "lnc-ui-form-field " + d, children: [
    t && /* @__PURE__ */ s(f, { theme: a, size: r, children: t }),
    y,
    o && /* @__PURE__ */ s(h, { size: r, theme: a, color: c, children: o })
  ] });
};
F.propTypes = {
  /**
   * Additional text that appears below the main element.
   */
  text: l.string,
  /**
   * Label text that appears above the main element.
   */
  label: l.string,
  size: l.oneOf(["small", "medium", "large"]),
  color: l.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ]),
  style: l.object,
  className: l.string
};
export {
  F as default
};