@brightlayer-ui/react-auth-workflow/components/PasswordRequirements/PasswordRequirementsCheck.js

Re-usable workflow components for Authentication and Registration within Eaton applications.

import React from 'react';
import Typography from '@mui/material/Typography';
import Check from '@mui/icons-material/Check';
import Box from '@mui/material/Box';
/**
 * Component that renders an individual password complexity line item with check indicator.
 *
 * @param {PasswordRequirementsCheckProps} props - props of PasswordRequirementsCheck component
 *
 * @category Component
 */
export const PasswordRequirementsCheck = (props) => {
    const { isChecked, label } = props;
    return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
        React.createElement(Check, { color: isChecked ? 'primary' : 'disabled', sx: { mr: 1 } }),
        React.createElement(Typography, { variant: 'subtitle2', sx: {
                fontWeight: 400,
                lineHeight: 1.2,
            } }, label)));
};