@kubit-ui-web/react-components/dist/esm/components/emptyState/emptyStateStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Button } from '../../components/button/button';
import { IconPositionType } from '../../components/button/types/buttonIconPosition';
import { ElementOrIllustration } from '../../components/elementOrIllustration/elementOrIllustration';
import { Link } from '../../components/link/link';
import { Text } from '../../components/text/text';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { TextComponentType } from '../text/types/component';
import { TextDecorationType } from '../text/types/decoration';
// styles
import { ActionSectionStyled, ButtonWrapperStyled, EmptyStateDescriptionWrapperStyled, EmptyStateStyled, EmptyStateTitleWrapperStyled, TextSectionStyled, } from './emptyState.styled';
const EmptyStateStandAloneComponent = ({ dataTestId = 'empty-state', ...props }, ref) => {
    const isHorizontalOrientation = props.variant === 'HORIZONTAL';
    const buildIconOrIllustration = () => {
        if (props.illustration) {
            return (_jsx(ElementOrIllustration, { customIllustrationStyles: props.styles?.illustration, ...props.illustration }));
        }
        else if (props.icon?.icon) {
            return _jsx(ElementOrIcon, { customIconStyles: props.styles?.icon, ...props.icon });
        }
        return null;
    };
    return (_jsxs(EmptyStateStyled, { ref: ref, "data-testid": dataTestId, isHorizontalOrientation: isHorizontalOrientation, styles: props.styles, children: [buildIconOrIllustration(), _jsxs(TextSectionStyled, { styles: props.styles, children: [props.title?.content && (_jsx(EmptyStateTitleWrapperStyled, { styles: props.styles, children: _jsx(Text, { component: TextComponentType.STRONG, customTypography: props.styles?.title, ...props.title, children: props.title.content }) })), _jsx(EmptyStateDescriptionWrapperStyled, { styles: props.styles, children: typeof props.subtitle.content === 'string' ? (_jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: props.styles?.subtitle, ...props.subtitle, children: props.subtitle.content })) : (props.subtitle.content) })] }), _jsxs(ActionSectionStyled, { styles: props.styles, children: [props.button?.content && (_jsx(ButtonWrapperStyled, { styles: props.styles, children: _jsx(Button, { iconPosition: IconPositionType.LEFT, size: props.styles?.buttonSize, ...props.button, children: props.button.content }) })), props.link?.content && (_jsx("div", { children: _jsx(Link, { decoration: TextDecorationType.UNDERLINE, ...props.link, children: props.link.content }) }))] })] }));
};
const EmptyStateStandAlone = React.forwardRef(EmptyStateStandAloneComponent);
export { EmptyStateStandAlone };
//# sourceMappingURL=emptyStateStandAlone.js.map