"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import * as LabelPrimitive from "@radix-ui/react-label";
import { forwardRef, useMemo, Fragment, isValidElement, cloneElement } from "react";
import { Text } from "../../atoms/Text/Text.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Flex } from "../../atoms/Flex/Flex.js";
const getFinalIcon = (icon, size) => {
  if (!isValidElement(icon)) {
    return null;
  }
  let finalIcon = icon;
  if (!icon.props.size) {
    const newProps = {
      size: size === "large" ? "14px" : "12px"
    };
    finalIcon = cloneElement(icon, newProps);
  }
  return finalIcon;
};
const Label = forwardRef(
  ({ as = "div", variant = "dim", size = "small", color, iconLeft, iconRight, htmlFor, className, children, ...props }, ref) => {
    const Wrapper = useMemo(() => {
      if (htmlFor) {
        const WrapperComponent = ({ children: children2 }) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { asChild: true, htmlFor, sx: { cursor: "default" }, children: children2 });
        WrapperComponent.displayName = "Label._Wrapper";
        return WrapperComponent;
      } else {
        return Fragment;
      }
    }, [htmlFor]);
    const TextComponent = size === "large" ? Text.C12 : Text.C10;
    const finalIconLeft = useMemo(() => getFinalIcon(iconLeft, size), [iconLeft, size]);
    const finalIconRight = useMemo(() => getFinalIcon(iconRight, size), [iconRight, size]);
    return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(
      Flex.Row,
      {
        ref,
        as,
        align: "center",
        gap: Spacing["4px"],
        className,
        sx: { color: color ?? (variant === "bright" ? "TextBright" : "TextDim") },
        ...props,
        children: [
          finalIconLeft,
          /* @__PURE__ */ jsx(TextComponent, { as: "span", children }),
          finalIconRight
        ]
      }
    ) });
  }
);
Label.displayName = "Label";
export {
  Label
};
