"use strict";

import React, { memo } from 'react';
import { Platform } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { Text } from "../typography/index.js";
import { atoms as a } from "../styles/index.js";
import { fontSize } from "../styles/tokens.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SIZE_FONT = {
  xs: fontSize.xs,
  sm: fontSize.sm,
  md: fontSize.md
};

/**
 * Themed form label. A thin wrapper over Bloom's `Text` that applies the
 * label typography (medium weight, secondary color) and optionally renders a
 * required marker. On web it forwards `htmlFor` so a click focuses the
 * associated control.
 */
const LabelComponent = function Label({
  children,
  nativeID,
  htmlFor,
  required = false,
  disabled = false,
  size = 'sm',
  style,
  testID
}) {
  const theme = useTheme();
  const webProps = Platform.OS === 'web' ? {
    htmlFor: htmlFor ?? nativeID
  } : {};
  return /*#__PURE__*/_jsxs(Text, {
    ...webProps,
    nativeID: nativeID,
    testID: testID,
    style: [a.font_medium, a.mb_sm, {
      fontSize: SIZE_FONT[size],
      color: disabled ? theme.colors.textTertiary : theme.colors.textSecondary
    }, style],
    children: [children, required ? /*#__PURE__*/_jsx(Text, {
      accessibilityLabel: "required",
      style: {
        color: theme.colors.negative
      },
      children: ' *'
    }) : null]
  });
};
export const Label = /*#__PURE__*/memo(LabelComponent);
Label.displayName = 'Label';
//# sourceMappingURL=Label.js.map