// --- Right Icon Component ---
export const ClearIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8 0C5.87827 0 3.84344 0.842855 2.34314 2.34315C0.842849 3.84344 0 5.87827 0 8C0 10.1217 0.842849 12.1566 2.34314 13.6568C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1565 15.1571 13.6568 13.6568C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84345 13.6568 2.34315C12.1565 0.842867 10.1217 0 8 0ZM4.6759 5.72559L6.9503 7.99999L4.6759 10.2744L5.72562 11.3241L8.00002 9.04972L10.2744 11.3241L11.3241 10.2744L9.04975 7.99999L11.3241 5.72559L10.2744 4.67587L8.00002 6.95027L5.72562 4.67587L4.6759 5.72559Z"
      fill="var(--input-muted-more-foreground"
    />
  </svg>
)
export const ValidIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8 0C5.87827 0 3.84344 0.842858 2.34315 2.34315C0.842858 3.84344 0 5.87827 0 8C0 10.1217 0.842857 12.1566 2.34315 13.6569C3.84344 15.1572 5.87827 16 8 16C10.1217 16 12.1566 15.1572 13.6569 13.6569C15.1572 12.1566 16 10.1217 16 8C16 5.87827 15.1572 3.84344 13.6569 2.34315C12.1566 0.842857 10.1217 0 8 0ZM5.39122 7.47514L4.34149 8.52487L7.23718 11.4206L11.714 5.82452L10.5548 4.89714L7.11409 9.19801L5.39122 7.47514Z"
      fill="var(--success-foreground)"
    />
  </svg>
)
export const InvalidIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8 0C5.87827 0 3.84344 0.842855 2.34314 2.34315C0.842849 3.84344 0 5.87827 0 8C0 10.1217 0.842849 12.1566 2.34314 13.6568C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1565 15.1571 13.6568 13.6568C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84345 13.6568 2.34315C12.1565 0.842867 10.1217 0 8 0ZM4.6759 5.72559L6.9503 7.99999L4.6759 10.2744L5.72562 11.3241L8.00002 9.04972L10.2744 11.3241L11.3241 10.2744L9.04975 7.99999L11.3241 5.72559L10.2744 4.67587L8.00002 6.95027L5.72562 4.67587L4.6759 5.72559Z"
      fill="var(--error-foreground)"
    />
  </svg>
)
export const LoadingSpinner = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    fill="none"
    viewBox="0 0 16 16"
    className="animate-spin"
    {...props}
    style={{ animationDuration: '1.2s', ...props.style }}
  >
    <path
      stroke="var(--foreground)"
      strokeWidth="1.5"
      d="M8 0v4m0 8v4m5.657-13.657-2.829 2.829m-5.656 5.657-2.829 2.828M16 8h-4M4 8H0m13.657 5.657-2.829-2.829M5.172 5.173l-2.829-2.83"
    />
  </svg>
)