/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1fc5ad1 | Cube Dev Team */
import { extractStyles } from "../../tasty/utils/styles.js";
import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
import { tasty } from "../../tasty/tasty.js";
import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
import { useProviderProps } from "../../provider.js";
import { forwardRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useDOMRef } from "@react-spectrum/utils";

//#region src/components/form/Label.tsx
const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
	xmlns: "http://www.w3.org/2000/svg",
	version: "1.1",
	x: "0px",
	y: "0px",
	viewBox: "0 0 100 125",
	style: {
		enableBackground: "new 0 0 100 100",
		width: ".8em",
		height: ".8em",
		transform: "rotate(-5deg)"
	},
	children: /* @__PURE__ */ jsx("switch", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("polygon", {
		fill: "currentColor",
		points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57"
	}) }) })
});
const INTL_MESSAGES = {
	"(required)": "(required)",
	"(optional)": "(optional)"
};
const INLINE_LABEL_STYLES = {
	preset: "t3",
	color: {
		"": "#dark-02",
		invalid: "#danger-text"
	}
};
const LABEL_STYLES = {
	display: "block",
	preset: {
		"": "t3m",
		"size=small": "t4"
	},
	color: {
		"": "#dark",
		invalid: "#danger-text"
	},
	width: {
		"": "initial",
		side: "($label-width, initial)",
		split: "initial"
	}
};
const LabelElement = tasty({
	as: "label",
	qa: "Label",
	styles: LABEL_STYLES
});
function Label(props, ref) {
	props = useProviderProps(props);
	let { as, qa, children, labelPosition = "top", isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, validationState, size = "medium", for: labelFor, ...otherProps } = props;
	let domRef = useDOMRef(ref);
	const styles = extractStyles(otherProps, CONTAINER_STYLES);
	let formatMessage = (message) => INTL_MESSAGES[message];
	let necessityLabel = isRequired ? formatMessage("(required)") : formatMessage("(optional)");
	let icon = /* @__PURE__ */ jsx("span", {
		"aria-label": includeNecessityIndicatorInAccessibilityName ? formatMessage("(required)") : void 0,
		children: REQUIRED_ICON
	});
	return /* @__PURE__ */ jsx(LabelElement, {
		...filterBaseProps(otherProps),
		ref: domRef,
		styles,
		htmlFor: labelFor || htmlFor,
		"data-size": size,
		mods: {
			side: labelPosition === "side",
			disabled: isDisabled,
			invalid: validationState === "invalid",
			valid: validationState === "valid"
		},
		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
			children,
			(necessityIndicator === "label" || necessityIndicator === "icon" && isRequired) && " ​",
			necessityIndicator === "label" && /* @__PURE__ */ jsx("span", {
				"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? isRequired : void 0,
				children: necessityLabel
			}),
			necessityIndicator === "icon" && isRequired && icon
		] })
	});
}
let _Label = forwardRef(Label);
_Label.displayName = "Label";

//#endregion
export { INLINE_LABEL_STYLES, LABEL_STYLES, _Label };
//# sourceMappingURL=Label.js.map