import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo } from "react";
import { color, size } from "./tokens.stylex";
const styles = stylex.create({
  label: {
    display: "flex",
    flexDirection: "column",
    gap: size.px1,
    cursor: "pointer",
    width: "100%"
  },
  row: {
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "row",
    alignItems: "baseline",
    gap: size.px2
  },
  error: {
    transition: "color 0.2s",
    color: {
      default: color.red150,
      "@starting-style": color.orange150
    },
    fontSize: "75%"
  }
});
export default memo(function TextBoxLabel(t0) {
  const $ = _c(12);
  const {
    label,
    error,
    children
  } = t0;
  let t1;
  let t2;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(styles.label);
    t2 = stylex.props(styles.row);
    $[0] = t1;
    $[1] = t2;
  } else {
    t1 = $[0];
    t2 = $[1];
  }
  let t3;
  if ($[2] !== label) {
    t3 = <span>{label}</span>;
    $[2] = label;
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  let t4;
  if ($[4] !== error) {
    t4 = !!error && <span {...stylex.props(styles.error)}>{error}</span>;
    $[4] = error;
    $[5] = t4;
  } else {
    t4 = $[5];
  }
  let t5;
  if ($[6] !== t3 || $[7] !== t4) {
    t5 = <span {...t2}>{t3}{t4}</span>;
    $[6] = t3;
    $[7] = t4;
    $[8] = t5;
  } else {
    t5 = $[8];
  }
  let t6;
  if ($[9] !== children || $[10] !== t5) {
    t6 = <label {...t1}>{t5}{children}</label>;
    $[9] = children;
    $[10] = t5;
    $[11] = t6;
  } else {
    t6 = $[11];
  }
  return t6;
});
//# sourceMappingURL=TextBoxLabel.jsx.map