@navinc/base-react-components/dist/password-strength-meter.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { useTheme } from 'styled-components';
import { Copy } from './copy.js';
import { Text } from './text.js';
const getPasswordScoreDefinition = (value, requiredScore, theme) => {
    if (value >= requiredScore) {
        return {
            label: 'Strong',
            color: theme.navStatusPositive500,
        };
    }
    else if (value === 0) {
        return {
            label: 'Weak',
            color: theme.navStatusNegative500,
        };
    }
    else if (value < requiredScore) {
        return {
            label: 'Fair',
            color: theme.navSecondary500,
        };
    }
    else {
        return {
            label: 'Weak',
            color: theme.navStatusNegative500,
        };
    }
};
const StyledPasswordMeterSection = styled.div.withConfig({ displayName: "brc-sc-StyledPasswordMeterSection", componentId: "brc-sc-d3i94i" }) `
  display: grid;
  grid-gap: 8px;
`;
const StyledProgress = styled.progress.withConfig({ displayName: "brc-sc-StyledProgress", componentId: "brc-sc-10easn9" }) `
  appearance: none;
  &::-webkit-progress-bar {
    background-color: ${({ theme }) => theme.navSecondary300};
    border-radius: 12px;
  }
  &::-webkit-progress-value {
    border-radius: 12px;
    background-color: ${({ value, max, theme }) => getPasswordScoreDefinition(value, max, theme).color};
  }
  height: 8px;
  width: 100%;
`;
const _PasswordStrengthMeter = ({ requiredPasswordScore, passwordStrengthScore, className, }) => {
    const theme = useTheme();
    return (_jsxs(StyledPasswordMeterSection, { className: className, children: [_jsx(StyledProgress, { max: String(requiredPasswordScore), value: String(passwordStrengthScore) }), _jsxs(Copy, { size: "sm", children: ["Password strength:", ' ', _jsx(Text, { "$bold": true, children: getPasswordScoreDefinition(passwordStrengthScore, requiredPasswordScore, theme).label })] })] }));
};
export const PasswordStrengthMeter = styled(_PasswordStrengthMeter).withConfig({ displayName: "brc-sc-PasswordStrengthMeter", componentId: "brc-sc-1cf4vmw" }) ``;
//# sourceMappingURL=password-strength-meter.js.map