feat: add valid class for input and label elements

[aritro2002]

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

#1195

Previously, only the --invalid class was applied for validation feedback. This update introduces a --valid class, ensuring that both valid and invalid states are now explicitly represented in the UI for inputs and labels.

How did you test it?

appearance: {
      labels: "floating",
      rules: {
        ".Input, .Input:focus, .Input--invalid, .Input--empty": {
          border: "none",
          boxShadow: "none",
          borderRadius: "0",
          padding: "0 !important",
          // paddingTop: "0 !important",
          paddingBottom: "4px !important",
        },
        ".Input, .Input:focus, .Input--empty": {
          borderBottom: "1px solid #23366F",
          color: "#23366F",
        },
        ".Input--invalid": {
          borderBottom: "1px solid #CB4B40 !important",
        },
        ".Label--valid": {
          color: "chocolate",
        },
        ".Label": {
          marginLeft: "0",
          color: "#2167AE",
          opacity: "1 !important",
          fontSize: "12px !important",
        },
        ".Label--invalid, .Input--invalid, .Error": {
          color: "#CB4B40 !important",
          opacity: "1 !important", // for label
        },
        ".Label::after": {
          content: "' *'",
          color: "#23366F",
        },
        ".Label--invalid::after": {
          content: "' *'",
          color: "#CB4B40",
        },
        ".InputLogo--empty": {
          color: "#979797",
        },
        ".InputLogo": {
          color: "#23366F",
          margin: "-30px",
        },
        ".InputLogo--invalid": {
          color: "#CB4B40",
        },
        ".OrPayUsingLabel, .SaveWalletDetailsLabel, .CheckboxLabel, .TermsTextLabel, .InfoElement":
          {
            color: "#003264 !important",
            opacity: "1 !important",
          },
        ".OrPayUsingLine": {
          backgroundColor: "#003264",
        },
      },
    },

Screen.Recording.2025-08-20.at.1.46.37.pm.mov

Checklist

• I ran npm run re:build
• I reviewed submitted code
• I added unit tests for my changes where possible

[semanticdiff-com]

Review changes with