@pelcro/react-pelcro-js 4.0.0-alpha.55 → 4.0.0-alpha.57

package/dist/pelcro.css

@@ -756,7 +756,6 @@ Add the correct display in Chrome and Safari.
   transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   flex-direction: column;
   align-items: center;
-  overflow: hidden;
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -769,6 +768,17 @@ Add the correct display in Chrome and Safari.
   }
 }
 
+.pelcro-root .pelcro-modal{
+  max-height: 100vh;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.pelcro-root .pelcro-modal::-webkit-scrollbar {
+  display: none;
+}
+
 .pelcro-root .pelcro-modal-content {
   width: 100%;
 }
@@ -988,59 +998,34 @@ Add the correct display in Chrome and Safari.
   display: none;
 }
 
-.pelcro-root .pelcro-input-card-number-label, .pelcro-root .pelcro-input-cvc-number-label, .pelcro-root .pelcro-input-expiry-date-label{
-  position: absolute;
-  top: -0.5rem;
-  left: 0.5rem;
-  display: inline-flex;
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  --tw-text-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-text-opacity));
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
+/* .pelcro-root .pelcro-input-card-number-label,
+  .pelcro-root .pelcro-input-cvc-number-label,
+  .pelcro-root .pelcro-input-expiry-date-label {
+    @apply plc-inline-flex plc-text-gray-400 plc-font-medium plc-absolute plc--top-2 plc-left-2 plc-text-xs plc-transition-all plc-bg-white plc-px-1;
+  }
 
-.pelcro-root
+  .pelcro-root
     #pelcro-input-card-number:placeholder-shown
-    ~ .pelcro-input-card-number-label, .pelcro-root
+    ~ .pelcro-input-card-number-label,
+  .pelcro-root
     #pelcro-input-cvc-number:placeholder-shown
-    ~ .pelcro-input-cvc-number-label, .pelcro-root
+    ~ .pelcro-input-cvc-number-label,
+  .pelcro-root
     #pelcro-input-expiry-date:placeholder-shown
-    ~ .pelcro-input-expiry-date-label{
-  top: 0.625rem;
-  left: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  --tw-text-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-text-opacity));
-}
-
-.pelcro-root
+    ~ .pelcro-input-expiry-date-label {
+    @apply plc-text-gray-400 plc-font-medium plc-top-2.5 plc-left-2 plc-text-sm;
+  }
+  .pelcro-root
     #pelcro-input-card-number:focus
-    ~ .pelcro-input-card-number-label, .pelcro-root
+    ~ .pelcro-input-card-number-label,
+  .pelcro-root
     #pelcro-input-cvc-number:focus
-    ~ .pelcro-input-cvc-number-label, .pelcro-root
+    ~ .pelcro-input-cvc-number-label,
+  .pelcro-root
     #pelcro-input-expiry-date:focus
-    ~ .pelcro-input-expiry-date-label{
-  top: -0.5rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
+    ~ .pelcro-input-expiry-date-label {
+    @apply plc-text-xs plc--top-2 plc-transition-all plc-bg-white plc-px-1;
+  } */
 
 .pelcro-root .pelcro-checkbox-label {
   padding-left: 0.5rem;
@@ -1439,7 +1424,7 @@ Add the correct display in Chrome and Safari.
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  border-radius: 0.125rem;
+  border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
   padding-left: 1rem;
@@ -1459,7 +1444,7 @@ Add the correct display in Chrome and Safari.
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  border-radius: 0.125rem;
+  border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
   padding-left: 1rem;
@@ -2105,6 +2090,10 @@ apple-pay-button {
   top: -0.25rem;
 }
 
+.pelcro-root .plc--top-3{
+  top: -0.75rem;
+}
+
 .pelcro-root .plc-top-1\/2{
   top: 50%;
 }
@@ -2121,6 +2110,10 @@ apple-pay-button {
   right: 0.5rem;
 }
 
+.pelcro-root .plc-right-3{
+  right: 0.75rem;
+}
+
 .pelcro-root .plc-right-10{
   right: 2.5rem;
 }
@@ -2210,6 +2203,11 @@ apple-pay-button {
   margin-bottom: 2.75rem;
 }
 
+.pelcro-root .plc-my-auto{
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .pelcro-root .plc-mt-1{
   margin-top: 0.25rem;
 }
@@ -2446,6 +2444,10 @@ apple-pay-button {
   max-height: 100%;
 }
 
+.pelcro-root .plc-min-h-0{
+  min-height: 0px;
+}
+
 .pelcro-root .plc-min-h-12{
   min-height: 3rem;
 }
@@ -2518,10 +2520,6 @@ apple-pay-button {
   width: 14rem;
 }
 
-.pelcro-root .plc-w-auto{
-  width: auto;
-}
-
 .pelcro-root .plc-w-1\/2{
   width: 50%;
 }
@@ -2737,11 +2735,6 @@ apple-pay-button {
           user-select: none;
 }
 
-.pelcro-root .plc-appearance-none{
-  -webkit-appearance: none;
-          appearance: none;
-}
-
 .pelcro-root .plc-grid-cols-1{
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -3212,10 +3205,6 @@ apple-pay-button {
   padding: 0.5rem;
 }
 
-.pelcro-root .plc-p-3{
-  padding: 0.75rem;
-}
-
 .pelcro-root .plc-p-4{
   padding: 1rem;
 }
@@ -3333,10 +3322,6 @@ apple-pay-button {
   padding-bottom: 1rem;
 }
 
-.pelcro-root .plc-pl-1{
-  padding-left: 0.25rem;
-}
-
 .pelcro-root .plc-pl-2{
   padding-left: 0.5rem;
 }
@@ -3705,11 +3690,6 @@ apple-pay-button {
   --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
 }
 
-.pelcro-root .plc-ring-red-300{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(219, 110, 106, var(--tw-ring-opacity));
-}
-
 .pelcro-root .focus\:plc-ring-primary-300:focus{
   --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.55",
+  "version": "4.0.0-alpha.57",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",
@@ -77,8 +77,8 @@
     "postcss-import": "^14.0.0",
     "postcss-loader": "4.2.0",
     "prettier": "2.3.1",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
+    "react": "16.8.0",
+    "react-dom": "16.8.0",
     "react-ga": "^2.7.0",
     "react-refresh": "^0.9.0",
     "react-test-renderer": "^17.0.2",
@@ -101,7 +101,8 @@
   },
   "dependencies": {
     "@headlessui/react": "^0.3.0",
-    "@stripe/stripe-js": "^1.21.1",
+    "@stripe/react-stripe-js": "^2.5.0",
+    "@stripe/stripe-js": "^3.0.4",
     "gapi-script": "^1.2.0",
     "i18next": "^19.1.0",
     "react-easy-crop": "^3.3.2",
@@ -112,7 +113,6 @@
     "react-i18next": "^11.3.3",
     "react-qr-code": "^2.0.7",
     "react-slick": "^0.29.0",
-    "react-stripe-elements": "^6.1.2",
     "use-reducer-with-side-effects": "^2.2.0",
     "zustand": "^3.4.2"
   },