@kubit-ui-web/react-components/dist/esm/components/validationStatus/validationStatusStandAlone.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 { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { Text } from '../text/text';
import { ValidationStatusState } from './types/validationStatusTheme';
import { ValidationStatusFrame, ValidationStatusRow } from './validationStatus.styled';
const maxItems = 6;
const ValidationStatusStandAloneComponent = ({ maxItemsAllowed = maxItems, dataTestId = 'validation-status', ...props }, ref) => {
    const itemsLimited = props.items.length > maxItemsAllowed ? props.items.slice(0, maxItemsAllowed) : props.items;
    return (_jsx(ValidationStatusFrame, { ref: ref, "data-testid": dataTestId, styles: props.styles, children: itemsLimited.map((item, index) => {
            const checked = item.state === ValidationStatusState.SUCCESS;
            return (_jsxs(ValidationStatusRow, { "data-testid": item.dataTestId, role: item.role, styles: props.styles, children: [_jsx(ElementOrIcon, { "aria-checked": checked, customIconStyles: props.styles[item.state]?.icon, ...props.stateIcons[item.state] }), _jsx(Text, { customTypography: props.styles[item.state]?.explainText, ...item.text, children: item.text.content })] }, `${item.text.content}--${index}`));
        }) }));
};
export const ValidationStatusStandAlone = React.forwardRef(ValidationStatusStandAloneComponent);
//# sourceMappingURL=validationStatusStandAlone.js.map