@payrails/web-sdk 5.29.0 → 5.29.1-rc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "5.29.0",
+  "version": "5.29.1-rc",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",

package/payrails-styles.css

@@ -683,44 +683,44 @@
   }
 }
 
-.payrails-generic-direct-form {
+.payrails-dynamic-element-form {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
 }
 
-.payrails-generic-direct-form-field {
+.payrails-dynamic-element-form-field {
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 100%;
 }
 
-.payrails-generic-direct-form-field-label {
+.payrails-dynamic-element-form-field-label {
   font-size: 14px;
   font-weight: 500;
   color: #000000;
   margin-bottom: 4px;
 }
 
-.payrails-generic-direct-form-field-component {
+.payrails-dynamic-element-form-field-component {
   width: 100%;
 }
 
-.payrails-generic-direct-form-field-error {
+.payrails-dynamic-element-form-field-error {
   font-size: 12px;
   color: #ff0000;
   margin-top: 4px;
   display: none;
 }
 
-.payrails-generic-direct-form-field.error
-  .payrails-generic-direct-form-field-error {
+.payrails-dynamic-element-form-field.error
+  .payrails-dynamic-element-form-field-error {
   display: block;
 }
 
-.payrails-generic-direct-text-input {
+.payrails-dynamic-element-input {
   width: 100%;
   padding: 10px 16px;
   border: 1px solid #eae8ee;
@@ -731,27 +731,78 @@
   transition: border-color 0.2s ease;
 }
 
-.payrails-generic-direct-text-input:focus {
+.payrails-dynamic-element-input:focus {
   outline: none;
   border-color: #007bff;
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
 }
 
-.payrails-generic-direct-text-input:invalid {
+.payrails-dynamic-element-input:invalid {
   border-color: #f25226;
   background-color: #f9e1e1;
 }
 
-.payrails-generic-direct-form-field.error .payrails-generic-direct-text-input {
+.payrails-dynamic-element-form-field.error .payrails-dynamic-element-input {
   border-color: #f25226;
   background-color: #f9e1e1;
 }
 
-.payrails-generic-direct-text-input::placeholder {
+.payrails-dynamic-element-input::placeholder {
   color: grey;
   opacity: 1;
 }
 
+.payrails-dynamic-element-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  width: 100%;
+  font-size: 14px;
+  color: #1d1d1d;
+  background-color: #fff;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease;
+  padding: 10px 16px;
+  margin: 0;
+  border: 1px solid #eae8ee;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.payrails-dynamic-element-tabs {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #eae8ee;
+  padding: 4px;
+  background: transparent;
+}
+
+.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab {
+  border-radius: 0;
+  flex: 1;
+  background: white;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  font-weight: 500;
+  color: #000000;
+  padding: 4px;
+  text-transform: unset;
+  cursor: pointer;
+}
+
+.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab.active {
+  background-color: #e0e5ed;
+}
+
+.payrails-dynamic-element-tabs button.payrails-dynamic-element-tab:hover {
+  background-color: unset;
+  color: unset;
+}
+
 button.payrails-generic-button {
   border: none;
   outline: none;