@pelcro/react-pelcro-js 4.0.0-alpha.59 → 4.0.0-alpha.60

package/dist/index.cjs.js

@@ -25050,6 +25050,8 @@ const PaymentMethodContainerWithoutStripe = ({
 };
 
 const PaymentMethodContainer = props => {
+  var _window3, _window3$Pelcro, _window3$Pelcro$site, _window3$Pelcro$site$, _window3$Pelcro$site$2;
+
   const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
   const {
     whenUserReady
@@ -25061,7 +25063,11 @@ const PaymentMethodContainer = props => {
   }) : null;
   const [clientSecret, setClientSecret] = React.useState();
   const appearance = {
-    theme: "stripe"
+    theme: "stripe",
+    labels: "floating",
+    variables: {
+      colorPrimary: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$site = _window3$Pelcro.site) === null || _window3$Pelcro$site === void 0 ? void 0 : (_window3$Pelcro$site$ = _window3$Pelcro$site.read()) === null || _window3$Pelcro$site$ === void 0 ? void 0 : (_window3$Pelcro$site$2 = _window3$Pelcro$site$.design_settings) === null || _window3$Pelcro$site$2 === void 0 ? void 0 : _window3$Pelcro$site$2.primary_color
+    }
   };
   const options = {
     clientSecret,
@@ -26571,7 +26577,7 @@ const SelectedAddress = ({
   };
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-p-4 plc-my-4 last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark plc-relative"
+    className: "plc-p-4 plc-my-4 last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-shadow-md_dark plc-relative"
   }, address && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "pelcro-select-address-radio plc-order-2",
     id: `pelcro-address-select-${address.id}`,

package/dist/index.esm.js

@@ -25020,6 +25020,8 @@ const PaymentMethodContainerWithoutStripe = ({
 };
 
 const PaymentMethodContainer = props => {
+  var _window3, _window3$Pelcro, _window3$Pelcro$site, _window3$Pelcro$site$, _window3$Pelcro$site$2;
+
   const [isStripeLoaded, setIsStripeLoaded] = useState(Boolean(window.Stripe));
   const {
     whenUserReady
@@ -25031,7 +25033,11 @@ const PaymentMethodContainer = props => {
   }) : null;
   const [clientSecret, setClientSecret] = useState();
   const appearance = {
-    theme: "stripe"
+    theme: "stripe",
+    labels: "floating",
+    variables: {
+      colorPrimary: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$site = _window3$Pelcro.site) === null || _window3$Pelcro$site === void 0 ? void 0 : (_window3$Pelcro$site$ = _window3$Pelcro$site.read()) === null || _window3$Pelcro$site$ === void 0 ? void 0 : (_window3$Pelcro$site$2 = _window3$Pelcro$site$.design_settings) === null || _window3$Pelcro$site$2 === void 0 ? void 0 : _window3$Pelcro$site$2.primary_color
+    }
   };
   const options = {
     clientSecret,
@@ -26541,7 +26547,7 @@ const SelectedAddress = ({
   };
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-p-4 plc-my-4 last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark plc-relative"
+    className: "plc-p-4 plc-my-4 last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-shadow-md_dark plc-relative"
   }, address && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "pelcro-select-address-radio plc-order-2",
     id: `pelcro-address-select-${address.id}`,

package/dist/pelcro.css

@@ -743,40 +743,14 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .pelcro-modal{
   position: absolute;
-  bottom: 0px;
   display: flex;
   max-width: 32rem;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  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;
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-}
-
-@media (min-width: 768px){
-  .pelcro-root .pelcro-modal{
-    bottom: 50%;
-    --tw-translate-y: 50%;
-  }
-}
-
-.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 {
@@ -788,6 +762,8 @@ Add the correct display in Chrome and Safari.
   display: flex;
   min-height: 6rem;
   flex-direction: column;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
   border-bottom-width: 2px;
   border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
   --tw-bg-opacity: 1;
@@ -866,6 +842,8 @@ Add the correct display in Chrome and Safari.
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   padding-left: 1rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.59",
+  "version": "4.0.0-alpha.60",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",