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

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty/index.js';
import { useSlotProps } from '../../utils/react/index.js';
import { TEXT_PROP_MAP } from './Text.js';
const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
const TitleElement = tasty({
    qa: 'Title',
    as: 'h1', // it should be dynamic
    styles: {
        gridArea: 'title',
        display: 'block',
        color: '#dark',
        preset: {
            '': 'h6',
            'level=1': 'h1',
            'level=2': 'h2',
            'level=3': 'h3',
            'level=4': 'h4',
            'level=5': 'h5',
            'level=6': 'h6',
        },
        margin: '0',
        whiteSpace: {
            '': 'inherit',
            'nowrap | ellipsis': 'nowrap',
        },
        textOverflow: {
            '': false,
            ellipsis: 'ellipsis',
        },
        overflow: {
            '': false,
            ellipsis: 'hidden',
        },
        width: {
            '': false,
            ellipsis: 'max 100%',
        },
    },
});
const Title = forwardRef(function CubeTitle({ qa, as, inline, nowrap, ellipsis, level, ...props }, ref) {
    const propsWithSlots = useSlotProps(props, 'title');
    const tag = `h${level || 1}`;
    const styles = extractStyles(propsWithSlots, STYLE_LIST, {}, TEXT_PROP_MAP);
    return (_jsx(TitleElement, { qa: qa || 'Title', as: as || tag, "data-level": level || 1, mods: {
            nowrap,
            ellipsis,
        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), ref: ref, styles: styles }));
});
const _Title = Object.assign(Title, {
    Danger: forwardRef(function DangerTitle(props, ref) {
        return _jsx(Title, { ref: ref, color: "#danger-text", ...props });
    }),
    Success: forwardRef(function SuccessTitle(props, ref) {
        return _jsx(Title, { ref: ref, color: "#success-text", ...props });
    }),
});
_Title.displayName = 'Title';
export { _Title as Title };

        