@ozen-ui/kit/__inner__/esm/components/Typography/Typography.js

React component library

import { __assign, __rest } from "tslib";
import './Typography.css';
import React, { useMemo } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { TYPOGRAPHY_DEFAULT_COLOR, TYPOGRAPHY_DEFAULT_DEFAULT_MARGIN, TYPOGRAPHY_DEFAULT_NO_WRAP, TYPOGRAPHY_DEFAULT_VARIANT, } from './constants';
import { matchVariantToTag } from './utils';
export var cnTypography = cn('Typography');
export var Typography = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'Typography',
    });
    var _a = props.variant, variant = _a === void 0 ? TYPOGRAPHY_DEFAULT_VARIANT : _a, _b = props.color, color = _b === void 0 ? TYPOGRAPHY_DEFAULT_COLOR : _b, _c = props.noWrap, noWrap = _c === void 0 ? TYPOGRAPHY_DEFAULT_NO_WRAP : _c, _d = props.defaultMargin, defaultMargin = _d === void 0 ? TYPOGRAPHY_DEFAULT_DEFAULT_MARGIN : _d, as = props.as, children = props.children, align = props.align, display = props.display, className = props.className, other = __rest(props, ["variant", "color", "noWrap", "defaultMargin", "as", "children", "align", "display", "className"]);
    // Устанавливает варианту соответсвующий тэг по умолчанию
    var Tag = useMemo(function () { return as || (variant && matchVariantToTag[variant]) || 'p'; }, [as, variant]);
    return (React.createElement(Tag, __assign({ className: cnTypography({
            variant: variant,
            defaultMargin: defaultMargin,
            color: color,
            align: align,
            noWrap: noWrap,
            display: display,
        }, [className]), ref: ref }, other), children));
});
Typography.displayName = 'Typography';