@pelcro/react-pelcro-js 4.0.0-alpha.37 → 4.0.0-alpha.39

package/dist/index.cjs.js

@@ -3997,7 +3997,7 @@ var labels$T = {
 };
 var buttons$g = {
 	next: "Next",
-	select: "Select",
+	select: "View Plans",
 	back: "Back",
 	gift: "Gift"
 };
@@ -4944,7 +4944,7 @@ var labels$y = {
 };
 var buttons$b = {
 	next: "Prochain",
-	select: "Choisir",
+	select: "Voir les forfaits",
 	back: "Retour",
 	gift: "cadeau"
 };
@@ -5946,7 +5946,7 @@ var labels$j = {
 };
 var buttons$6 = {
 	next: "다음",
-	select: "선택",
+	select: "플랜 보기",
 	back: "뒤로",
 	gift: "선물"
 };
@@ -6770,7 +6770,7 @@ var labels$4 = {
 var buttons$1 = {
 	next: "Siguiente",
 	select: "Seleccionar",
-	back: "Volver",
+	back: "Ver planes",
 	gift: "regalo"
 };
 var select_es = {
@@ -18916,9 +18916,10 @@ function SvgArrowThinLeft(props) {
 const NextArrow = ({
   onClick,
   className,
-  size = "normal"
+  size = "normal",
+  mobileArrowDown = false
 }) => /*#__PURE__*/React__default['default'].createElement("button", {
-  className: `sm:plc-flex plc-hidden plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--right-12 plc-transform plc--translate-y-1/2 hover:plc-text-gray-900 ${className}`,
+  className: `plc-flex plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-transform hover:plc-text-gray-900 ${mobileArrowDown ? "plc-right-0 plc-bottom-0 sm:plc--right-12 sm:plc-top-1/2 sm:plc--translate-y-1/2" : "plc--right-12 plc-top-1/2 plc--translate-y-1/2"} ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default['default'].createElement(SvgArrowThinRight, {
   stroke: "currentColor",
@@ -18930,9 +18931,10 @@ const NextArrow = ({
 const PrevArrow = ({
   onClick,
   className,
-  size = "normal"
+  size = "normal",
+  mobileArrowDown = false
 }) => /*#__PURE__*/React__default['default'].createElement("button", {
-  className: `sm:plc-flex plc-hidden plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--left-12 plc-transform plc--translate-y-1/2 hover:plc-text-gray-900 ${className}`,
+  className: `plc-flex plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-transform hover:plc-text-gray-900 ${mobileArrowDown ? "plx-left-0 plc-bottom-0 sm:plc--left-12 sm:plc-top-1/2 sm:plc--translate-y-1/2" : "plc--left-12 plc-top-1/2 plc--translate-y-1/2"} ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default['default'].createElement(SvgArrowThinLeft, {
   stroke: "currentColor",
@@ -18949,6 +18951,7 @@ function Carousel({
   slidesCount,
   arrowsSize = "normal",
   paddingSize = "small",
+  mobileArrowDown = false,
   children,
   ...otherProps
 }) {
@@ -18963,10 +18966,12 @@ function Carousel({
     slidesToShow: slidesToShow,
     slidesToScroll: slidesToScroll,
     nextArrow: /*#__PURE__*/React__default['default'].createElement(NextArrow, {
-      size: arrowsSize
+      size: arrowsSize,
+      mobileArrowDown: mobileArrowDown
     }),
     prevArrow: /*#__PURE__*/React__default['default'].createElement(PrevArrow, {
-      size: arrowsSize
+      size: arrowsSize,
+      mobileArrowDown: mobileArrowDown
     }),
     initialSlide: initialSlide,
     dots: dots,
@@ -18986,7 +18991,7 @@ function Carousel({
     }]
   };
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `carousel-wrapper plc-relative  ${paddingSize === "small" ? "sm:plc-px-8 plc-px-0" : paddingSize === "medium" ? "sm:plc-px-10 plc-px-0" : "sm:plc-px-14 plc-px-0"}`
+    className: `carousel-wrapper plc-relative  ${paddingSize === "small" ? "sm:plc-px-8" : paddingSize === "medium" ? "sm:plc-px-10" : "sm:plc-px-14"} ${mobileArrowDown ? "plc-px-0" : "plc-px-8"}`
   }, /*#__PURE__*/React__default['default'].createElement(Slider, Object.assign({
     ref: ref
   }, settings), children));
@@ -19204,7 +19209,7 @@ class SelectModal extends React.Component {
       }
 
       return /*#__PURE__*/React__default['default'].createElement("h5", {
-        className: "plc-text-3xl pelcro-select-product-cost"
+        className: "plc-text-2xl pelcro-select-product-cost"
       }, /*#__PURE__*/React__default['default'].createElement("span", {
         className: "plc-font-medium"
       }, startingPlan.amount_formatted), /*#__PURE__*/React__default['default'].createElement("span", {
@@ -19238,15 +19243,13 @@ class SelectModal extends React.Component {
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-mt-3 plc-mb-6"
       }, product.plans && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "plc-mb-2 plc-text-sm plc-text-gray-400"
-      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+        className: "plc-mb-2 plc-text-sm plc-text-gray-600 plc-font-bold"
+      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default['default'].createElement(Button, {
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
-        className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary hover:plc-bg-white hover:plc-text-primary plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
-      }, index === 0 && {
-        autoFocus: true
-      }), productButtonLabel)));
+        className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+      }, productButtonLabel)));
     });
 
     _defineProperty$3(this, "renderProducts", () => {
@@ -19260,7 +19263,8 @@ class SelectModal extends React.Component {
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
       const items = productsToShow.map((product, index) => this.renderOneProduct(product, index));
       return /*#__PURE__*/React__default['default'].createElement(Carousel, {
-        slidesCount: items.length
+        slidesCount: items.length,
+        mobileArrowDown: true
       }, items);
     });
 
@@ -19306,18 +19310,19 @@ class SelectModal extends React.Component {
         }
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: product.id
+          key: product.id,
+          className: "plc-flex plc-w-full plc-justify-center plc-text-center"
         }, /*#__PURE__*/React__default['default'].createElement("button", {
           onClick: e => productButtonCallback(e),
           "data-key": product.id,
           "data-index": index,
-          className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-flex ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
+          className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
         }, product.name));
       });
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-flex plc-flex-col"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "productTabs plc-relative plc-max-w-xl plc-mx-auto"
+        className: "productTabs plc-relative md:plc-max-w-xl md:plc-mx-auto plc-w-full"
       }, /*#__PURE__*/React__default['default'].createElement(Carousel, {
         slidesCount: tabs.length,
         initialSlide: this.state.initialTabSlide,
@@ -19333,11 +19338,11 @@ class SelectModal extends React.Component {
       })), description && /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-max-w-xl plc-text-center"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: `plc-overflow-x-hidden ${prodDescExpanded ? "plc-whitespace-normal" : "plc-whitespace-nowrap"}`
+        className: `plc-overflow-x-hidden ${prodDescExpanded ? "md:plc-whitespace-normal plc-whitespace-normal" : "md:plc-whitespace-nowrap plc-whitespace-normal"}`
       }, prodDescExpanded ? /*#__PURE__*/React__default['default'].createElement("span", null, description, " ", /*#__PURE__*/React__default['default'].createElement("button", {
         onClick: this.toggleProdDescExpanded,
         className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
-      }, "Read less")) : /*#__PURE__*/React__default['default'].createElement("span", null, description.slice(0, 50), " ", /*#__PURE__*/React__default['default'].createElement("button", {
+      }, "Read less")) : /*#__PURE__*/React__default['default'].createElement("span", null, description.slice(0, 50), " ... ", /*#__PURE__*/React__default['default'].createElement("button", {
         onClick: this.toggleProdDescExpanded,
         className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
       }, "Read more"))))));
@@ -19402,17 +19407,18 @@ class SelectModal extends React.Component {
         }, "/ ", plan.interval))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: `plc-grid ${disableGifting ? "plc-grid-cols-1" : "plc-grid-cols-2 plc-gap-2"}`
         }, /*#__PURE__*/React__default['default'].createElement("button", {
-          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-white hover:plc-text-primary plc-transition-all`,
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all`,
           "data-key": plan.id,
           onClick: e => this.selectPlan(e, false)
         }, this.locale("buttons.select")), !disableGifting && /*#__PURE__*/React__default['default'].createElement("button", {
-          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-primary plc-bg-white hover:plc-bg-primary hover:plc-text-white plc-transition-all`,
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-primary plc-bg-white hover:plc-border-primary-600 hover:plc-text-primary-600 hover:plc-shadow-sm plc-transition-all`,
           "data-key": plan.id,
           onClick: e => this.selectPlan(e, true)
         }, this.locale("buttons.gift"))))));
       });
       return /*#__PURE__*/React__default['default'].createElement(Carousel, {
-        slidesCount: items.length
+        slidesCount: items.length,
+        mobileArrowDown: true
       }, items);
     });
 
@@ -19547,7 +19553,8 @@ class SelectModal extends React.Component {
     }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
       className: "plc-text-2xl plc-font-semibold"
     }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default['default'].createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle)))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "pelcro-selection-view"
+      id: "pelcro-selection-view",
+      className: "plc-pt-4"
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "pelcro-select-products-wrapper"
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement("div", {

package/dist/index.esm.js

@@ -3967,7 +3967,7 @@ var labels$T = {
 };
 var buttons$g = {
 	next: "Next",
-	select: "Select",
+	select: "View Plans",
 	back: "Back",
 	gift: "Gift"
 };
@@ -4914,7 +4914,7 @@ var labels$y = {
 };
 var buttons$b = {
 	next: "Prochain",
-	select: "Choisir",
+	select: "Voir les forfaits",
 	back: "Retour",
 	gift: "cadeau"
 };
@@ -5916,7 +5916,7 @@ var labels$j = {
 };
 var buttons$6 = {
 	next: "다음",
-	select: "선택",
+	select: "플랜 보기",
 	back: "뒤로",
 	gift: "선물"
 };
@@ -6740,7 +6740,7 @@ var labels$4 = {
 var buttons$1 = {
 	next: "Siguiente",
 	select: "Seleccionar",
-	back: "Volver",
+	back: "Ver planes",
 	gift: "regalo"
 };
 var select_es = {
@@ -18886,9 +18886,10 @@ function SvgArrowThinLeft(props) {
 const NextArrow = ({
   onClick,
   className,
-  size = "normal"
+  size = "normal",
+  mobileArrowDown = false
 }) => /*#__PURE__*/React__default.createElement("button", {
-  className: `sm:plc-flex plc-hidden plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--right-12 plc-transform plc--translate-y-1/2 hover:plc-text-gray-900 ${className}`,
+  className: `plc-flex plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-transform hover:plc-text-gray-900 ${mobileArrowDown ? "plc-right-0 plc-bottom-0 sm:plc--right-12 sm:plc-top-1/2 sm:plc--translate-y-1/2" : "plc--right-12 plc-top-1/2 plc--translate-y-1/2"} ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default.createElement(SvgArrowThinRight, {
   stroke: "currentColor",
@@ -18900,9 +18901,10 @@ const NextArrow = ({
 const PrevArrow = ({
   onClick,
   className,
-  size = "normal"
+  size = "normal",
+  mobileArrowDown = false
 }) => /*#__PURE__*/React__default.createElement("button", {
-  className: `sm:plc-flex plc-hidden plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--left-12 plc-transform plc--translate-y-1/2 hover:plc-text-gray-900 ${className}`,
+  className: `plc-flex plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-transform hover:plc-text-gray-900 ${mobileArrowDown ? "plx-left-0 plc-bottom-0 sm:plc--left-12 sm:plc-top-1/2 sm:plc--translate-y-1/2" : "plc--left-12 plc-top-1/2 plc--translate-y-1/2"} ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default.createElement(SvgArrowThinLeft, {
   stroke: "currentColor",
@@ -18919,6 +18921,7 @@ function Carousel({
   slidesCount,
   arrowsSize = "normal",
   paddingSize = "small",
+  mobileArrowDown = false,
   children,
   ...otherProps
 }) {
@@ -18933,10 +18936,12 @@ function Carousel({
     slidesToShow: slidesToShow,
     slidesToScroll: slidesToScroll,
     nextArrow: /*#__PURE__*/React__default.createElement(NextArrow, {
-      size: arrowsSize
+      size: arrowsSize,
+      mobileArrowDown: mobileArrowDown
     }),
     prevArrow: /*#__PURE__*/React__default.createElement(PrevArrow, {
-      size: arrowsSize
+      size: arrowsSize,
+      mobileArrowDown: mobileArrowDown
     }),
     initialSlide: initialSlide,
     dots: dots,
@@ -18956,7 +18961,7 @@ function Carousel({
     }]
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `carousel-wrapper plc-relative  ${paddingSize === "small" ? "sm:plc-px-8 plc-px-0" : paddingSize === "medium" ? "sm:plc-px-10 plc-px-0" : "sm:plc-px-14 plc-px-0"}`
+    className: `carousel-wrapper plc-relative  ${paddingSize === "small" ? "sm:plc-px-8" : paddingSize === "medium" ? "sm:plc-px-10" : "sm:plc-px-14"} ${mobileArrowDown ? "plc-px-0" : "plc-px-8"}`
   }, /*#__PURE__*/React__default.createElement(Slider, Object.assign({
     ref: ref
   }, settings), children));
@@ -19174,7 +19179,7 @@ class SelectModal extends Component {
       }
 
       return /*#__PURE__*/React__default.createElement("h5", {
-        className: "plc-text-3xl pelcro-select-product-cost"
+        className: "plc-text-2xl pelcro-select-product-cost"
       }, /*#__PURE__*/React__default.createElement("span", {
         className: "plc-font-medium"
       }, startingPlan.amount_formatted), /*#__PURE__*/React__default.createElement("span", {
@@ -19208,15 +19213,13 @@ class SelectModal extends Component {
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "plc-mt-3 plc-mb-6"
       }, product.plans && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
-        className: "plc-mb-2 plc-text-sm plc-text-gray-400"
-      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default.createElement(Button, Object.assign({
+        className: "plc-mb-2 plc-text-sm plc-text-gray-600 plc-font-bold"
+      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default.createElement(Button, {
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
-        className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary hover:plc-bg-white hover:plc-text-primary plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
-      }, index === 0 && {
-        autoFocus: true
-      }), productButtonLabel)));
+        className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+      }, productButtonLabel)));
     });
 
     _defineProperty$3(this, "renderProducts", () => {
@@ -19230,7 +19233,8 @@ class SelectModal extends Component {
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
       const items = productsToShow.map((product, index) => this.renderOneProduct(product, index));
       return /*#__PURE__*/React__default.createElement(Carousel, {
-        slidesCount: items.length
+        slidesCount: items.length,
+        mobileArrowDown: true
       }, items);
     });
 
@@ -19276,18 +19280,19 @@ class SelectModal extends Component {
         }
 
         return /*#__PURE__*/React__default.createElement("div", {
-          key: product.id
+          key: product.id,
+          className: "plc-flex plc-w-full plc-justify-center plc-text-center"
         }, /*#__PURE__*/React__default.createElement("button", {
           onClick: e => productButtonCallback(e),
           "data-key": product.id,
           "data-index": index,
-          className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-flex ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
+          className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
         }, product.name));
       });
       return /*#__PURE__*/React__default.createElement("div", {
         className: "plc-flex plc-flex-col"
       }, /*#__PURE__*/React__default.createElement("div", {
-        className: "productTabs plc-relative plc-max-w-xl plc-mx-auto"
+        className: "productTabs plc-relative md:plc-max-w-xl md:plc-mx-auto plc-w-full"
       }, /*#__PURE__*/React__default.createElement(Carousel, {
         slidesCount: tabs.length,
         initialSlide: this.state.initialTabSlide,
@@ -19303,11 +19308,11 @@ class SelectModal extends Component {
       })), description && /*#__PURE__*/React__default.createElement("div", {
         className: "plc-max-w-xl plc-text-center"
       }, /*#__PURE__*/React__default.createElement("div", {
-        className: `plc-overflow-x-hidden ${prodDescExpanded ? "plc-whitespace-normal" : "plc-whitespace-nowrap"}`
+        className: `plc-overflow-x-hidden ${prodDescExpanded ? "md:plc-whitespace-normal plc-whitespace-normal" : "md:plc-whitespace-nowrap plc-whitespace-normal"}`
       }, prodDescExpanded ? /*#__PURE__*/React__default.createElement("span", null, description, " ", /*#__PURE__*/React__default.createElement("button", {
         onClick: this.toggleProdDescExpanded,
         className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
-      }, "Read less")) : /*#__PURE__*/React__default.createElement("span", null, description.slice(0, 50), " ", /*#__PURE__*/React__default.createElement("button", {
+      }, "Read less")) : /*#__PURE__*/React__default.createElement("span", null, description.slice(0, 50), " ... ", /*#__PURE__*/React__default.createElement("button", {
         onClick: this.toggleProdDescExpanded,
         className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
       }, "Read more"))))));
@@ -19372,17 +19377,18 @@ class SelectModal extends Component {
         }, "/ ", plan.interval))), /*#__PURE__*/React__default.createElement("div", {
           className: `plc-grid ${disableGifting ? "plc-grid-cols-1" : "plc-grid-cols-2 plc-gap-2"}`
         }, /*#__PURE__*/React__default.createElement("button", {
-          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-white hover:plc-text-primary plc-transition-all`,
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all`,
           "data-key": plan.id,
           onClick: e => this.selectPlan(e, false)
         }, this.locale("buttons.select")), !disableGifting && /*#__PURE__*/React__default.createElement("button", {
-          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-primary plc-bg-white hover:plc-bg-primary hover:plc-text-white plc-transition-all`,
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-primary plc-bg-white hover:plc-border-primary-600 hover:plc-text-primary-600 hover:plc-shadow-sm plc-transition-all`,
           "data-key": plan.id,
           onClick: e => this.selectPlan(e, true)
         }, this.locale("buttons.gift"))))));
       });
       return /*#__PURE__*/React__default.createElement(Carousel, {
-        slidesCount: items.length
+        slidesCount: items.length,
+        mobileArrowDown: true
       }, items);
     });
 
@@ -19517,7 +19523,8 @@ class SelectModal extends Component {
     }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
       className: "plc-text-2xl plc-font-semibold"
     }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default.createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle)))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement("div", {
-      id: "pelcro-selection-view"
+      id: "pelcro-selection-view",
+      className: "plc-pt-4"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "pelcro-select-products-wrapper"
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default.createElement("div", {

package/dist/pelcro.css

@@ -865,8 +865,8 @@ Add the correct display in Chrome and Safari.
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -1515,8 +1515,6 @@ Add the correct display in Chrome and Safari.
   display: block;
 }
 
-/* Slider */
-
 .pelcro-root .pelcro-shop-product-image {
   max-width: 13rem;
 }
@@ -1659,16 +1657,6 @@ Add the correct display in Chrome and Safari.
   display: flex !important;
 }
 
-.pelcro-root .pelcro-product:before {
-  content: "";
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 0.25rem;
-  width: 100%;
-  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
-}
-
 .pelcro-root .productTabs:before {
   content: "";
   width: calc(100% - 5.5rem);
@@ -1719,6 +1707,134 @@ Add the correct display in Chrome and Safari.
 
 /* used by multiple input sub-components */
 
+/* Slider */
+
+.pelcro-root .slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+          user-select: none;
+  touch-action: pan-y;
+}
+
+.pelcro-root .slick-list {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  /* margin: 0 -10px; */
+}
+
+.pelcro-root .slick-list:focus {
+  outline: none;
+}
+
+.pelcro-root .slick-list.dragging {
+  cursor: pointer;
+}
+
+.pelcro-root .slick-slider .slick-track,
+.pelcro-root .slick-slider .slick-list {
+  transform: translate3d(0, 0, 0);
+}
+
+.pelcro-root .slick-track {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: stretch;
+}
+
+.pelcro-root .slick-track:before,
+.pelcro-root .slick-track:after {
+  display: table;
+  content: "";
+}
+
+.pelcro-root .slick-track:after {
+  clear: both;
+}
+
+.pelcro-root .slick-loading .slick-track {
+  visibility: hidden;
+}
+
+.pelcro-root .slick-slide {
+  display: flex !important;
+  align-self: stretch;
+  height: unset;
+  margin: 0 10px;
+}
+
+.pelcro-root .slick-slide > div {
+  display: flex;
+  align-self: stretch;
+  width: 100%;
+  height: 100%;
+}
+
+.pelcro-root .slick-slide img {
+  display: block;
+}
+
+.pelcro-root .slick-slide.slick-loading img {
+  display: none;
+}
+
+.pelcro-root .slick-slide.dragging img {
+  pointer-events: none;
+}
+
+.pelcro-root .slick-initialized .slick-slide {
+  display: block;
+}
+
+.pelcro-root .slick-loading .slick-slide {
+  visibility: hidden;
+}
+
+.pelcro-root .slick-vertical .slick-slide {
+  display: block;
+  height: auto;
+  border: 1px solid transparent;
+}
+
+.pelcro-root .slick-arrow.slick-hidden {
+  display: none;
+}
+
+.pelcro-root .slick-disabled {
+  opacity: 0;
+  cursor: auto;
+}
+
+.pelcro-root .slick-dots {
+  margin-top: 20px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.pelcro-root .slick-dots li {
+  margin: 0 2px;
+}
+
+.pelcro-root .slick-dots li.slick-active span {
+  border-color: grey;
+  background-color: hsl(
+    var(--plc-primary-hue),
+    var(--plc-primary-saturation),
+    var(--plc-primary-lightness)
+  );
+}
+
+.pelcro-root .slick-arrow {
+  outline: none !important;
+}
+
 /* 
 styling is copied from react-easy-crop/react-easy-crop.css 
 in order to scope selectors under pelcro-root
@@ -1935,11 +2051,6 @@ in order to scope selectors under pelcro-root
   margin: 0.125rem;
 }
 
-.pelcro-root .plc-mx-1{
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
 .pelcro-root .plc-mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -2297,10 +2408,6 @@ in order to scope selectors under pelcro-root
   width: max-content;
 }
 
-.pelcro-root .plc-max-w-lg{
-  max-width: 32rem;
-}
-
 .pelcro-root .plc-max-w-xl{
   max-width: 36rem;
 }
@@ -2577,10 +2684,6 @@ in order to scope selectors under pelcro-root
   overflow: hidden;
 }
 
-.pelcro-root .plc-overflow-x-auto{
-  overflow-x: auto;
-}
-
 .pelcro-root .plc-overflow-y-auto{
   overflow-y: auto;
 }
@@ -2603,10 +2706,6 @@ in order to scope selectors under pelcro-root
   white-space: normal;
 }
 
-.pelcro-root .plc-whitespace-nowrap{
-  white-space: nowrap;
-}
-
 .pelcro-root .plc-whitespace-pre-line{
   white-space: pre-line;
 }
@@ -2748,6 +2847,10 @@ in order to scope selectors under pelcro-root
   border-color: rgba(52, 211, 153, var(--tw-border-opacity));
 }
 
+.pelcro-root .hover\:plc-border-primary-600:hover{
+  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
+}
+
 .pelcro-root .hover\:plc-border-primary-800:hover{
   border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
 }
@@ -2977,6 +3080,11 @@ in order to scope selectors under pelcro-root
   padding-right: 1.5rem;
 }
 
+.pelcro-root .plc-px-8{
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .pelcro-root .plc-py-1{
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3248,6 +3356,10 @@ in order to scope selectors under pelcro-root
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
 }
 
+.pelcro-root .hover\:plc-text-primary-600:hover{
+  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
+}
+
 .pelcro-root .hover\:plc-text-primary:hover{
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
 }
@@ -3294,10 +3406,6 @@ in order to scope selectors under pelcro-root
   text-decoration: none;
 }
 
-.pelcro-root .hover\:plc-opacity-30:hover{
-  opacity: 0.3;
-}
-
 *, ::before, ::after{
   --tw-shadow: 0 0 #0000;
 }
@@ -3327,6 +3435,11 @@ in order to scope selectors under pelcro-root
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.pelcro-root .hover\:plc-shadow-sm:hover{
+  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .pelcro-root .hover\:plc-shadow-none:hover{
   --tw-shadow: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -3453,10 +3566,22 @@ in order to scope selectors under pelcro-root
 }
 
 @media (min-width: 640px){
+  .pelcro-root .sm\:plc-top-1\/2{
+    top: 50%;
+  }
+
+  .pelcro-root .sm\:plc--right-12{
+    right: -3rem;
+  }
+
   .pelcro-root .sm\:plc-left-5{
     left: 1.25rem;
   }
 
+  .pelcro-root .sm\:plc--left-12{
+    left: -3rem;
+  }
+
   .pelcro-root .sm\:plc-m-4{
     margin: 1rem;
   }
@@ -3497,6 +3622,10 @@ in order to scope selectors under pelcro-root
     max-width: 90%;
   }
 
+  .pelcro-root .sm\:plc--translate-y-1\/2{
+    --tw-translate-y: -50%;
+  }
+
   .pelcro-root .sm\:plc-flex-row{
     flex-direction: row;
   }
@@ -3546,6 +3675,11 @@ in order to scope selectors under pelcro-root
     right: 2.5rem;
   }
 
+  .pelcro-root .md\:plc-mx-auto{
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .pelcro-root .md\:plc-my-20{
     margin-top: 5rem;
     margin-bottom: 5rem;
@@ -3575,6 +3709,10 @@ in order to scope selectors under pelcro-root
     width: 25%;
   }
 
+  .pelcro-root .md\:plc-max-w-xl{
+    max-width: 36rem;
+  }
+
   .pelcro-root .md\:plc-max-w-70\%{
     max-width: 70%;
   }
@@ -3582,6 +3720,14 @@ in order to scope selectors under pelcro-root
   .pelcro-root .md\:plc-max-w-80\%{
     max-width: 80%;
   }
+
+  .pelcro-root .md\:plc-whitespace-normal{
+    white-space: normal;
+  }
+
+  .pelcro-root .md\:plc-whitespace-nowrap{
+    white-space: nowrap;
+  }
 }
 
 @media (min-width: 1024px){

package/package.json

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