import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import Icon from "../icon/icon.js";
import T from "../t/t.js";
import Tooltip from "../tooltip/tooltip.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/label/label.tsx
const LabelBase = styled.labelBox`
  display: block;
  color: darkBlue.main;
  width: 100%;

  &[aria-disabled='true'] {
    color: sandstone.75;
    cursor: not-allowed;
  }
`;
/** Displays a paragraph of text. */
const Label = vui((props, ref) => {
	const { children, className, markAsOptional, tooltipText, text, fontSize, ...rest } = omitThemingProps(props);
	const styles = useStyleConfig("Label", props);
	const isOnlyText = text && !markAsOptional && !tooltipText && !children;
	return /* @__PURE__ */ jsx(T, {
		as: LabelBase,
		className: cs("vui-label", className),
		fontSize,
		ref,
		...rest,
		children: children ?? (isOnlyText ? text : /* @__PURE__ */ jsxs(Fragment, { children: [
			/* @__PURE__ */ jsx(T, {
				variant: "label",
				fontSize,
				children: text
			}),
			!!markAsOptional && /* @__PURE__ */ jsx(T, {
				variant: "label",
				fontSize,
				...styles.helper,
				children: "(optional)"
			}),
			!!tooltipText && /* @__PURE__ */ jsx(T, {
				variant: "label",
				fontSize,
				...styles.helper,
				children: /* @__PURE__ */ jsx(Tooltip, {
					text: tooltipText,
					children: /* @__PURE__ */ jsx(Icon, {
						mb: fontSize === "xs" ? "-6px" : "-5px",
						name: "uiInfoCircle",
						role: "button",
						size: fontSize === "xs" ? "xs" : "sm"
					})
				})
			})
		] }))
	});
});
Label.displayName = "Label";

//#endregion
export { LabelBase, Label as default };
globalThis.__vuiVersion__ = "4.0.1"
//# sourceMappingURL=label.js.map