/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-032998c
 * Released under the MIT license.
 */

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useDOMRef } from '@react-spectrum/utils';
import { forwardRef } from 'react';
import { useProviderProps } from '../../provider.js';
import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty/index.js';
const REQUIRED_ICON = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", viewBox: "0 0 100 125", style: {
        // @ts-ignore
        enableBackground: 'new 0 0 100 100',
        width: '.8em',
        height: '.8em',
        transform: 'rotate(-5deg)',
    }, children: _jsx("switch", { children: _jsx("g", { children: _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)',
};
export const INLINE_LABEL_STYLES = {
    preset: 't3',
    color: {
        '': '#dark-02',
        invalid: '#danger-text',
    },
};
export 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 = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
            ? formatMessage('(required)')
            : undefined, children: REQUIRED_ICON }));
    return (_jsx(LabelElement, { ...filterBaseProps(otherProps), ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, "data-size": size, mods: {
            side: labelPosition === 'side',
            disabled: isDisabled,
            invalid: validationState === 'invalid',
            valid: validationState === 'valid',
        }, children: typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [children, (necessityIndicator === 'label' ||
                    (necessityIndicator === 'icon' && isRequired)) &&
                    ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                        ? isRequired
                        : undefined, children: necessityLabel })), necessityIndicator === 'icon' && isRequired && icon] })) }));
}
let _Label = forwardRef(Label);
_Label.displayName = 'Label';
export { _Label as Label };

        