@payrails/web-sdk 5.28.1 → 5.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payrails/web-sdk",
3
- "version": "5.28.1",
3
+ "version": "5.29.0",
4
4
  "description": "SDK providing tokenization options on the client for merchants",
5
5
  "main": "index.js",
6
6
  "types": "payrails.d.ts",
@@ -683,6 +683,75 @@
683
683
  }
684
684
  }
685
685
 
686
+ .payrails-generic-direct-form {
687
+ display: flex;
688
+ flex-direction: column;
689
+ gap: 16px;
690
+ width: 100%;
691
+ }
692
+
693
+ .payrails-generic-direct-form-field {
694
+ display: flex;
695
+ flex-direction: column;
696
+ gap: 4px;
697
+ width: 100%;
698
+ }
699
+
700
+ .payrails-generic-direct-form-field-label {
701
+ font-size: 14px;
702
+ font-weight: 500;
703
+ color: #000000;
704
+ margin-bottom: 4px;
705
+ }
706
+
707
+ .payrails-generic-direct-form-field-component {
708
+ width: 100%;
709
+ }
710
+
711
+ .payrails-generic-direct-form-field-error {
712
+ font-size: 12px;
713
+ color: #ff0000;
714
+ margin-top: 4px;
715
+ display: none;
716
+ }
717
+
718
+ .payrails-generic-direct-form-field.error
719
+ .payrails-generic-direct-form-field-error {
720
+ display: block;
721
+ }
722
+
723
+ .payrails-generic-direct-text-input {
724
+ width: 100%;
725
+ padding: 10px 16px;
726
+ border: 1px solid #eae8ee;
727
+ font-size: 14px;
728
+ color: #1d1d1d;
729
+ background-color: #fff;
730
+ box-sizing: border-box;
731
+ transition: border-color 0.2s ease;
732
+ }
733
+
734
+ .payrails-generic-direct-text-input:focus {
735
+ outline: none;
736
+ border-color: #007bff;
737
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
738
+ }
739
+
740
+ .payrails-generic-direct-text-input:invalid {
741
+ border-color: #f25226;
742
+ background-color: #f9e1e1;
743
+ }
744
+
745
+ .payrails-generic-direct-form-field.error .payrails-generic-direct-text-input {
746
+ border-color: #f25226;
747
+ background-color: #f9e1e1;
748
+ }
749
+
750
+ .payrails-generic-direct-text-input::placeholder {
751
+ color: grey;
752
+ opacity: 1;
753
+ }
754
+
686
755
  button.payrails-generic-button {
687
756
  border: none;
688
757
  outline: none;
@@ -760,12 +829,12 @@ button.payrails-generic-button {
760
829
  min-height: 44px;
761
830
  }
762
831
 
763
- #payrails-container-wrapper {
832
+ .payrails-container-wrapper {
764
833
  width: 100%;
765
834
  min-height: 90px;
766
835
  }
767
836
 
768
- .with-card-holder #payrails-container-wrapper {
837
+ .with-card-holder .payrails-container-wrapper {
769
838
  width: 100%;
770
839
  height: min-content;
771
840
  min-height: 120px;