@blocklet/payment-react/es/components/label.js

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { InfoOutlined } from "@mui/icons-material";
import { Box, FormLabel, Tooltip, Typography } from "@mui/material";
export default function CustomFormLabel({
  children,
  required = false,
  tooltip = "",
  description = "",
  boxSx = {},
  ...props
}) {
  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, width: "100%", ...boxSx }, children: [
    /* @__PURE__ */ jsxs(
      FormLabel,
      {
        ...props,
        sx: {
          display: "flex",
          alignItems: "center",
          gap: 0.5,
          fontSize: "0.875rem",
          fontWeight: 500,
          color: "text.primary",
          "&.MuiFormLabel-root": {
            display: "flex",
            alignItems: "center",
            gap: 0.5,
            fontWeight: 500,
            color: "text.primary"
          },
          ...props.sx || {}
        },
        children: [
          children,
          required && /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: "*" }),
          tooltip && (typeof tooltip === "string" ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7, fontSize: "1rem" } }) }) : tooltip)
        ]
      }
    ),
    description && /* @__PURE__ */ jsx(
      Typography,
      {
        variant: "caption",
        sx: {
          color: "text.secondary"
        },
        children: description
      }
    )
  ] });
}