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

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CustomFormLabel;
var _jsxRuntime = require("react/jsx-runtime");
var _iconsMaterial = require("@mui/icons-material");
var _material = require("@mui/material");
function CustomFormLabel({
  children,
  required = false,
  tooltip = "",
  description = "",
  boxSx = {},
  ...props
}) {
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      mb: 1,
      width: "100%",
      ...boxSx
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        component: "span",
        color: "error",
        children: "*"
      }), tooltip && (typeof tooltip === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
        title: tooltip,
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.InfoOutlined, {
          fontSize: "small",
          sx: {
            opacity: 0.7,
            fontSize: "1rem"
          }
        })
      }) : tooltip)]
    }), description && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      variant: "caption",
      sx: {
        color: "text.secondary"
      },
      children: description
    })]
  });
}