@pelcro/react-pelcro-js 4.0.0-alpha.36 → 4.0.0-alpha.38

package/dist/index.cjs.js

@@ -3998,7 +3998,8 @@ var labels$T = {
 var buttons$g = {
 	next: "Next",
 	select: "Select",
-	back: "Back"
+	back: "Back",
+	gift: "Gift"
 };
 var select_en = {
 	messages: messages$V,
@@ -4944,7 +4945,8 @@ var labels$y = {
 var buttons$b = {
 	next: "Prochain",
 	select: "Choisir",
-	back: "Retour"
+	back: "Retour",
+	gift: "cadeau"
 };
 var select_fr = {
 	messages: messages$B,
@@ -5945,7 +5947,8 @@ var labels$j = {
 var buttons$6 = {
 	next: "다음",
 	select: "선택",
-	back: "뒤로"
+	back: "뒤로",
+	gift: "선물"
 };
 var select_ko = {
 	messages: messages$k,
@@ -6767,7 +6770,8 @@ var labels$4 = {
 var buttons$1 = {
 	next: "Siguiente",
 	select: "Seleccionar",
-	back: "Volver"
+	back: "Volver",
+	gift: "regalo"
 };
 var select_es = {
 	messages: messages$3,
@@ -18911,7 +18915,8 @@ function SvgArrowThinLeft(props) {
 
 const NextArrow = ({
   onClick,
-  className
+  className,
+  size = "normal"
 }) => /*#__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}`,
   onClick: onClick
@@ -18919,12 +18924,13 @@ const NextArrow = ({
   stroke: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
-  className: "plc-h-7 plc-w-7"
+  className: `${size === "normal" ? "plc-w-7 plc-h-7" : size === "small" ? "plc-w-4 plc-h-4" : "plc-w-9 plc-h-9"}`
 }));
 
 const PrevArrow = ({
   onClick,
-  className
+  className,
+  size = "normal"
 }) => /*#__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}`,
   onClick: onClick
@@ -18932,28 +18938,40 @@ const PrevArrow = ({
   stroke: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
-  className: "plc-h-7 plc-w-7"
+  className: `${size === "normal" ? "plc-w-7 plc-h-7" : size === "small" ? "plc-w-4 plc-h-4" : "plc-w-9 plc-h-9"}`
 }));
 
 function Carousel({
   slidesToShow = 3,
   slidesToScroll = 1,
+  initialSlide = 0,
+  dots = true,
   slidesCount,
+  arrowsSize = "normal",
+  paddingSize = "small",
   children,
   ...otherProps
 }) {
   const ref = React.useRef(null);
+  React.useEffect(() => {
+    ref.current.slickGoTo(initialSlide, true);
+  }, [initialSlide]);
   const settings = {
     dots: true,
     infinite: false,
     speed: 200,
     slidesToShow: slidesToShow,
     slidesToScroll: slidesToScroll,
-    nextArrow: /*#__PURE__*/React__default['default'].createElement(NextArrow, null),
-    prevArrow: /*#__PURE__*/React__default['default'].createElement(PrevArrow, null),
-    initialSlide: 0,
+    nextArrow: /*#__PURE__*/React__default['default'].createElement(NextArrow, {
+      size: arrowsSize
+    }),
+    prevArrow: /*#__PURE__*/React__default['default'].createElement(PrevArrow, {
+      size: arrowsSize
+    }),
+    initialSlide: initialSlide,
+    dots: dots,
     customPaging: i => /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-w-3 plc-h-3 plc-rounded-full plc-transition-all plc-bg-gray-400 plc-inline-flex plc-cursor-pointer hover:plc-opacity-30"
+      className: "plc-w-3 plc-h-3 plc-rounded-full plc-transition-all plc-bg-gray-400 plc-inline-flex plc-cursor-pointer hover:plc-bg-primary"
     }),
     responsive: [{
       breakpoint: 1280,
@@ -18968,7 +18986,7 @@ function Carousel({
     }]
   };
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "carousel-wrapper plc-relative sm:plc-px-8 plc-px-0"
+    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"}`
   }, /*#__PURE__*/React__default['default'].createElement(Slider, Object.assign({
     ref: ref
   }, settings), children));
@@ -19225,7 +19243,7 @@ class SelectModal extends React.Component {
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
-        className: `plc-w-full ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+        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)));
@@ -19246,38 +19264,83 @@ class SelectModal extends React.Component {
       }, items);
     });
 
+    _defineProperty$3(this, "handleScrollLeft", () => {
+      this.productsTabRef.current.scrollLeft -= 100; // Adjust the scroll value as needed
+    });
+
+    _defineProperty$3(this, "handleScrollRight", () => {
+      this.productsTabRef.current.scrollLeft += 100; // Adjust the scroll value as needed
+    });
+
+    _defineProperty$3(this, "toggleProdDescExpanded", () => {
+      this.setState({
+        prodDescExpanded: !this.state.prodDescExpanded
+      });
+    });
+
     _defineProperty$3(this, "renderProductTabs", () => {
-      const productButtonCallback = this.selectProduct;
+      const {
+        prodDescExpanded
+      } = this.state;
+
+      const productButtonCallback = e => {
+        this.setState({
+          scrollToTab: false
+        });
+        this.selectProduct(e);
+      };
+
       const {
         image,
         description
       } = this.state.product;
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "productTabs plc-flex plc-flex-col plc-items-center"
-      }, /*#__PURE__*/React__default['default'].createElement("ul", {
-        className: "tabs plc-w-full plc-flex plc-items-center plc-text-center plc-border-b plc-border-gray-300 plc-mb-4 plc-overflow-x-auto"
-      }, this.state.productList.map((product, index) => {
-        var _this$state$product;
-
-        return /*#__PURE__*/React__default['default'].createElement("li", {
-          key: product.id,
-          id: `${product.id === ((_this$state$product = this.state.product) === null || _this$state$product === void 0 ? void 0 : _this$state$product.id) ? "activeTab" : ""}`,
-          className: "plc-relative plc-mx-1"
+      const tabs = this.state.productList.map((product, index) => {
+        if (product.id === this.state.product.id && this.state.scrollToTab) {
+          this.setState(oldState => {
+            if (+oldState.initialTabSlide !== +index) {
+              return {
+                initialTabSlide: index
+              };
+            }
+          });
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          key: product.id
         }, /*#__PURE__*/React__default['default'].createElement("button", {
-          onClick: productButtonCallback,
+          onClick: e => productButtonCallback(e),
           "data-key": product.id,
-          className: "plc-px-4 plc-py-2 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
+          "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"}`
         }, product.name));
-      })), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl"
+      });
+      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"
+      }, /*#__PURE__*/React__default['default'].createElement(Carousel, {
+        slidesCount: tabs.length,
+        initialSlide: this.state.initialTabSlide,
+        dots: false,
+        arrowsSize: "small"
+      }, tabs)), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl plc-mx-auto plc-mt-6"
       }, image && /*#__PURE__*/React__default['default'].createElement("figure", {
         className: "plc-mb-2"
       }, /*#__PURE__*/React__default['default'].createElement("img", {
         src: image,
         alt: "Product Image"
-      })), description && /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "plc-text-center"
-      }, description)));
+      })), 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"}`
+      }, 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", {
+        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"))))));
     });
 
     _defineProperty$3(this, "renderMatchingProductsFirst", () => {
@@ -19305,22 +19368,19 @@ class SelectModal extends React.Component {
     });
 
     _defineProperty$3(this, "renderPlans", () => {
+      const {
+        disableGifting
+      } = this.props;
       const items = this.state.planList.map(plan => {
-        var _this$state, _this$state2;
+        var _this$state;
 
-        const isChecked = this.state.plan.id === plan.id ? true : false;
+        this.state.plan.id === plan.id ? true : false;
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: plan.id,
           className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-md plc-bg-white pelcro-select-plan-wrapper`
-        }, /*#__PURE__*/React__default['default'].createElement(Radio, {
-          wrapperClassName: "plc-w-full plc-flex plc-h-full",
-          className: "plc-hidden pelcro-select-plan-radio",
-          labelClassName: "plc-cursor-pointer plc-w-full plc-h-full plc-m-0 plc-flex-1 plc-flex plc-flex-col",
-          id: `pelcro-select-plan-${plan.id}`,
-          name: "plan",
-          checked: isChecked,
-          "data-key": plan.id,
-          onChange: this.selectPlan
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-w-full plc-flex plc-flex-col plc-h-full",
+          id: `pelcro-select-plan-${plan.id}`
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-p-4 plc-text-center plc-flex plc-flex-col plc-justify-center plc-items-center plc-w-full"
         }, /*#__PURE__*/React__default['default'].createElement("h4", {
@@ -19340,8 +19400,16 @@ class SelectModal extends React.Component {
         }, plan.currency), /*#__PURE__*/React__default['default'].createElement("span", {
           className: "plc-capitalize"
         }, "/ ", plan.interval))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: `${((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.plan.id) === plan.id ? "plc-bg-primary plc-text-white" : "plc-text-primary-800"} 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`
-        }, this.locale("buttons.select")))));
+          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`,
+          "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`,
+          "data-key": plan.id,
+          onClick: e => this.selectPlan(e, true)
+        }, this.locale("buttons.gift"))))));
       });
       return /*#__PURE__*/React__default['default'].createElement(Carousel, {
         slidesCount: items.length
@@ -19375,39 +19443,30 @@ class SelectModal extends React.Component {
       }
     });
 
-    _defineProperty$3(this, "selectPlan", e => {
+    _defineProperty$3(this, "selectPlan", (e, isGift) => {
       const id = e.target.dataset.key;
 
       for (const plan of this.state.planList) {
         if (+plan.id === +id) {
-          plan.isCheked = true;
-          this.setState({
-            plan: plan
-          });
           this.setState({
-            disabled: false
+            plan: plan,
+            isGift: isGift
           });
-        } else {
-          plan.isCheked = false;
+          this.props.setProductAndPlan(this.state.product, plan, isGift);
+          this.submitOption(this.state.product, isGift);
         }
       }
     });
 
     _defineProperty$3(this, "goBack", () => {
       this.setState({
-        disabled: true
-      });
-      this.setState({
-        mode: "product"
+        disabled: true,
+        mode: "product",
+        scrollToTab: true
       });
     });
 
-    _defineProperty$3(this, "submitOption", () => {
-      this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift);
-      const {
-        product,
-        isGift
-      } = this.state;
+    _defineProperty$3(this, "submitOption", (product, isGift) => {
       const {
         setView
       } = this.props;
@@ -19442,31 +19501,20 @@ class SelectModal extends React.Component {
       isGift: props.isGift,
       disabled: true,
       mode: "product",
+      initialTabSlide: 0,
+      scrollToTab: true,
+      prodDescExpanded: false,
       productList: props.matchingEntitlements ? window.Pelcro.product.getByEntitlements(props.matchingEntitlements) : window.Pelcro.product.list()
     };
     this.product = this.props.product || window.Pelcro.paywall.getProduct();
     this.locale = this.props.t;
     this.closeButton = window.Pelcro.paywall.displayCloseButton();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    //Scroll to active tab
-    const activeElement = document.getElementById("activeTab");
-
-    if (activeElement) {
-      activeElement.parentNode.scrollLeft = activeElement.offsetLeft - 80;
-    } else {
-      console.log(document.getElementById("activeTab"));
-    }
+    this.productsTabRef = /*#__PURE__*/React__default['default'].createRef();
   }
 
   render() {
     var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
 
-    const {
-      disableGifting
-    } = this.props;
-
     if (this.state.mode === "product") {
       var _ReactGA$event;
 
@@ -19502,27 +19550,9 @@ class SelectModal extends React.Component {
       id: "pelcro-selection-view"
     }, /*#__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(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, (_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", {
       className: "pelcro-select-plans-wrapper plc-mt-4"
-    }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-justify-center plc-mt-4"
-    }, /*#__PURE__*/React__default['default'].createElement(Checkbox, {
-      onChange: this.onIsGiftChange,
-      checked: this.state.isGift,
-      id: "pelcro-input-is-gift"
-    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__default['default'].createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: this.submitOption,
-      id: "pelcro-submit",
-      className: "plc-mt-2 plc-w-full plc-max-w-sm plc-ml-auto plc-mr-auto plc-block"
-    }, this.locale("buttons.next"))))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, !window.Pelcro.user.isAuthenticated() && /*#__PURE__*/React__default['default'].createElement("p", {
-      className: "plc-mb-9"
-    }, /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-font-medium"
-    }, this.locale("messages.alreadyHaveAccount") + " "), /*#__PURE__*/React__default['default'].createElement(Link, {
-      id: "pelcro-link-login",
-      onClick: this.displayLoginView
-    }, this.locale("messages.loginHere")))));
+    }, this.renderPlans()))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
   }
 
 }
@@ -23975,7 +24005,7 @@ const PaypalSubscribeButton = props => {
     var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
 
     // sometimes, price is updated. eg. Coupon codes.
-    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice.amount_remaining;
+    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining;
     const selectedAddress = getAddressById((_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : selectedAddressId); // initialize paypal client, then render paypal button.
 
     const initializePaypal = async () => {

package/dist/index.esm.js

@@ -3968,7 +3968,8 @@ var labels$T = {
 var buttons$g = {
 	next: "Next",
 	select: "Select",
-	back: "Back"
+	back: "Back",
+	gift: "Gift"
 };
 var select_en = {
 	messages: messages$V,
@@ -4914,7 +4915,8 @@ var labels$y = {
 var buttons$b = {
 	next: "Prochain",
 	select: "Choisir",
-	back: "Retour"
+	back: "Retour",
+	gift: "cadeau"
 };
 var select_fr = {
 	messages: messages$B,
@@ -5915,7 +5917,8 @@ var labels$j = {
 var buttons$6 = {
 	next: "다음",
 	select: "선택",
-	back: "뒤로"
+	back: "뒤로",
+	gift: "선물"
 };
 var select_ko = {
 	messages: messages$k,
@@ -6737,7 +6740,8 @@ var labels$4 = {
 var buttons$1 = {
 	next: "Siguiente",
 	select: "Seleccionar",
-	back: "Volver"
+	back: "Volver",
+	gift: "regalo"
 };
 var select_es = {
 	messages: messages$3,
@@ -18881,7 +18885,8 @@ function SvgArrowThinLeft(props) {
 
 const NextArrow = ({
   onClick,
-  className
+  className,
+  size = "normal"
 }) => /*#__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}`,
   onClick: onClick
@@ -18889,12 +18894,13 @@ const NextArrow = ({
   stroke: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
-  className: "plc-h-7 plc-w-7"
+  className: `${size === "normal" ? "plc-w-7 plc-h-7" : size === "small" ? "plc-w-4 plc-h-4" : "plc-w-9 plc-h-9"}`
 }));
 
 const PrevArrow = ({
   onClick,
-  className
+  className,
+  size = "normal"
 }) => /*#__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}`,
   onClick: onClick
@@ -18902,28 +18908,40 @@ const PrevArrow = ({
   stroke: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
-  className: "plc-h-7 plc-w-7"
+  className: `${size === "normal" ? "plc-w-7 plc-h-7" : size === "small" ? "plc-w-4 plc-h-4" : "plc-w-9 plc-h-9"}`
 }));
 
 function Carousel({
   slidesToShow = 3,
   slidesToScroll = 1,
+  initialSlide = 0,
+  dots = true,
   slidesCount,
+  arrowsSize = "normal",
+  paddingSize = "small",
   children,
   ...otherProps
 }) {
   const ref = useRef(null);
+  useEffect(() => {
+    ref.current.slickGoTo(initialSlide, true);
+  }, [initialSlide]);
   const settings = {
     dots: true,
     infinite: false,
     speed: 200,
     slidesToShow: slidesToShow,
     slidesToScroll: slidesToScroll,
-    nextArrow: /*#__PURE__*/React__default.createElement(NextArrow, null),
-    prevArrow: /*#__PURE__*/React__default.createElement(PrevArrow, null),
-    initialSlide: 0,
+    nextArrow: /*#__PURE__*/React__default.createElement(NextArrow, {
+      size: arrowsSize
+    }),
+    prevArrow: /*#__PURE__*/React__default.createElement(PrevArrow, {
+      size: arrowsSize
+    }),
+    initialSlide: initialSlide,
+    dots: dots,
     customPaging: i => /*#__PURE__*/React__default.createElement("span", {
-      className: "plc-w-3 plc-h-3 plc-rounded-full plc-transition-all plc-bg-gray-400 plc-inline-flex plc-cursor-pointer hover:plc-opacity-30"
+      className: "plc-w-3 plc-h-3 plc-rounded-full plc-transition-all plc-bg-gray-400 plc-inline-flex plc-cursor-pointer hover:plc-bg-primary"
     }),
     responsive: [{
       breakpoint: 1280,
@@ -18938,7 +18956,7 @@ function Carousel({
     }]
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "carousel-wrapper plc-relative sm:plc-px-8 plc-px-0"
+    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"}`
   }, /*#__PURE__*/React__default.createElement(Slider, Object.assign({
     ref: ref
   }, settings), children));
@@ -19195,7 +19213,7 @@ class SelectModal extends Component {
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
-        className: `plc-w-full ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+        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)));
@@ -19216,38 +19234,83 @@ class SelectModal extends Component {
       }, items);
     });
 
+    _defineProperty$3(this, "handleScrollLeft", () => {
+      this.productsTabRef.current.scrollLeft -= 100; // Adjust the scroll value as needed
+    });
+
+    _defineProperty$3(this, "handleScrollRight", () => {
+      this.productsTabRef.current.scrollLeft += 100; // Adjust the scroll value as needed
+    });
+
+    _defineProperty$3(this, "toggleProdDescExpanded", () => {
+      this.setState({
+        prodDescExpanded: !this.state.prodDescExpanded
+      });
+    });
+
     _defineProperty$3(this, "renderProductTabs", () => {
-      const productButtonCallback = this.selectProduct;
+      const {
+        prodDescExpanded
+      } = this.state;
+
+      const productButtonCallback = e => {
+        this.setState({
+          scrollToTab: false
+        });
+        this.selectProduct(e);
+      };
+
       const {
         image,
         description
       } = this.state.product;
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "productTabs plc-flex plc-flex-col plc-items-center"
-      }, /*#__PURE__*/React__default.createElement("ul", {
-        className: "tabs plc-w-full plc-flex plc-items-center plc-text-center plc-border-b plc-border-gray-300 plc-mb-4 plc-overflow-x-auto"
-      }, this.state.productList.map((product, index) => {
-        var _this$state$product;
-
-        return /*#__PURE__*/React__default.createElement("li", {
-          key: product.id,
-          id: `${product.id === ((_this$state$product = this.state.product) === null || _this$state$product === void 0 ? void 0 : _this$state$product.id) ? "activeTab" : ""}`,
-          className: "plc-relative plc-mx-1"
+      const tabs = this.state.productList.map((product, index) => {
+        if (product.id === this.state.product.id && this.state.scrollToTab) {
+          this.setState(oldState => {
+            if (+oldState.initialTabSlide !== +index) {
+              return {
+                initialTabSlide: index
+              };
+            }
+          });
+        }
+
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: product.id
         }, /*#__PURE__*/React__default.createElement("button", {
-          onClick: productButtonCallback,
+          onClick: e => productButtonCallback(e),
           "data-key": product.id,
-          className: "plc-px-4 plc-py-2 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
+          "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"}`
         }, product.name));
-      })), /*#__PURE__*/React__default.createElement("div", {
-        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl"
+      });
+      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"
+      }, /*#__PURE__*/React__default.createElement(Carousel, {
+        slidesCount: tabs.length,
+        initialSlide: this.state.initialTabSlide,
+        dots: false,
+        arrowsSize: "small"
+      }, tabs)), /*#__PURE__*/React__default.createElement("div", {
+        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl plc-mx-auto plc-mt-6"
       }, image && /*#__PURE__*/React__default.createElement("figure", {
         className: "plc-mb-2"
       }, /*#__PURE__*/React__default.createElement("img", {
         src: image,
         alt: "Product Image"
-      })), description && /*#__PURE__*/React__default.createElement("p", {
-        className: "plc-text-center"
-      }, description)));
+      })), 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"}`
+      }, 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", {
+        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"))))));
     });
 
     _defineProperty$3(this, "renderMatchingProductsFirst", () => {
@@ -19275,22 +19338,19 @@ class SelectModal extends Component {
     });
 
     _defineProperty$3(this, "renderPlans", () => {
+      const {
+        disableGifting
+      } = this.props;
       const items = this.state.planList.map(plan => {
-        var _this$state, _this$state2;
+        var _this$state;
 
-        const isChecked = this.state.plan.id === plan.id ? true : false;
+        this.state.plan.id === plan.id ? true : false;
         return /*#__PURE__*/React__default.createElement("div", {
           key: plan.id,
           className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-md plc-bg-white pelcro-select-plan-wrapper`
-        }, /*#__PURE__*/React__default.createElement(Radio, {
-          wrapperClassName: "plc-w-full plc-flex plc-h-full",
-          className: "plc-hidden pelcro-select-plan-radio",
-          labelClassName: "plc-cursor-pointer plc-w-full plc-h-full plc-m-0 plc-flex-1 plc-flex plc-flex-col",
-          id: `pelcro-select-plan-${plan.id}`,
-          name: "plan",
-          checked: isChecked,
-          "data-key": plan.id,
-          onChange: this.selectPlan
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "plc-w-full plc-flex plc-flex-col plc-h-full",
+          id: `pelcro-select-plan-${plan.id}`
         }, /*#__PURE__*/React__default.createElement("div", {
           className: "plc-p-4 plc-text-center plc-flex plc-flex-col plc-justify-center plc-items-center plc-w-full"
         }, /*#__PURE__*/React__default.createElement("h4", {
@@ -19310,8 +19370,16 @@ class SelectModal extends Component {
         }, plan.currency), /*#__PURE__*/React__default.createElement("span", {
           className: "plc-capitalize"
         }, "/ ", plan.interval))), /*#__PURE__*/React__default.createElement("div", {
-          className: `${((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.plan.id) === plan.id ? "plc-bg-primary plc-text-white" : "plc-text-primary-800"} 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`
-        }, this.locale("buttons.select")))));
+          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`,
+          "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`,
+          "data-key": plan.id,
+          onClick: e => this.selectPlan(e, true)
+        }, this.locale("buttons.gift"))))));
       });
       return /*#__PURE__*/React__default.createElement(Carousel, {
         slidesCount: items.length
@@ -19345,39 +19413,30 @@ class SelectModal extends Component {
       }
     });
 
-    _defineProperty$3(this, "selectPlan", e => {
+    _defineProperty$3(this, "selectPlan", (e, isGift) => {
       const id = e.target.dataset.key;
 
       for (const plan of this.state.planList) {
         if (+plan.id === +id) {
-          plan.isCheked = true;
-          this.setState({
-            plan: plan
-          });
           this.setState({
-            disabled: false
+            plan: plan,
+            isGift: isGift
           });
-        } else {
-          plan.isCheked = false;
+          this.props.setProductAndPlan(this.state.product, plan, isGift);
+          this.submitOption(this.state.product, isGift);
         }
       }
     });
 
     _defineProperty$3(this, "goBack", () => {
       this.setState({
-        disabled: true
-      });
-      this.setState({
-        mode: "product"
+        disabled: true,
+        mode: "product",
+        scrollToTab: true
       });
     });
 
-    _defineProperty$3(this, "submitOption", () => {
-      this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift);
-      const {
-        product,
-        isGift
-      } = this.state;
+    _defineProperty$3(this, "submitOption", (product, isGift) => {
       const {
         setView
       } = this.props;
@@ -19412,31 +19471,20 @@ class SelectModal extends Component {
       isGift: props.isGift,
       disabled: true,
       mode: "product",
+      initialTabSlide: 0,
+      scrollToTab: true,
+      prodDescExpanded: false,
       productList: props.matchingEntitlements ? window.Pelcro.product.getByEntitlements(props.matchingEntitlements) : window.Pelcro.product.list()
     };
     this.product = this.props.product || window.Pelcro.paywall.getProduct();
     this.locale = this.props.t;
     this.closeButton = window.Pelcro.paywall.displayCloseButton();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    //Scroll to active tab
-    const activeElement = document.getElementById("activeTab");
-
-    if (activeElement) {
-      activeElement.parentNode.scrollLeft = activeElement.offsetLeft - 80;
-    } else {
-      console.log(document.getElementById("activeTab"));
-    }
+    this.productsTabRef = /*#__PURE__*/React__default.createRef();
   }
 
   render() {
     var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
 
-    const {
-      disableGifting
-    } = this.props;
-
     if (this.state.mode === "product") {
       var _ReactGA$event;
 
@@ -19472,27 +19520,9 @@ class SelectModal extends Component {
       id: "pelcro-selection-view"
     }, /*#__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(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    }, (_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", {
       className: "pelcro-select-plans-wrapper plc-mt-4"
-    }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-justify-center plc-mt-4"
-    }, /*#__PURE__*/React__default.createElement(Checkbox, {
-      onChange: this.onIsGiftChange,
-      checked: this.state.isGift,
-      id: "pelcro-input-is-gift"
-    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__default.createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: this.submitOption,
-      id: "pelcro-submit",
-      className: "plc-mt-2 plc-w-full plc-max-w-sm plc-ml-auto plc-mr-auto plc-block"
-    }, this.locale("buttons.next"))))), /*#__PURE__*/React__default.createElement(ModalFooter, null, !window.Pelcro.user.isAuthenticated() && /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-mb-9"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "plc-font-medium"
-    }, this.locale("messages.alreadyHaveAccount") + " "), /*#__PURE__*/React__default.createElement(Link, {
-      id: "pelcro-link-login",
-      onClick: this.displayLoginView
-    }, this.locale("messages.loginHere")))));
+    }, this.renderPlans()))), /*#__PURE__*/React__default.createElement(ModalFooter, null));
   }
 
 }
@@ -23945,7 +23975,7 @@ const PaypalSubscribeButton = props => {
     var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
 
     // sometimes, price is updated. eg. Coupon codes.
-    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice.amount_remaining;
+    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining;
     const selectedAddress = getAddressById((_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : selectedAddressId); // initialize paypal client, then render paypal button.
 
     const initializePaypal = async () => {

package/dist/pelcro.css

@@ -743,9 +743,17 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .pelcro-modal{
   position: absolute;
-  top: 0px;
+  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;
   overflow: hidden;
@@ -756,7 +764,8 @@ Add the correct display in Chrome and Safari.
 
 @media (min-width: 768px){
   .pelcro-root .pelcro-modal{
-    margin-top: 2rem;
+    bottom: 50%;
+    --tw-translate-y: 50%;
   }
 }
 
@@ -767,7 +776,7 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-modal-header {
   position: relative;
   display: flex;
-  min-height: 3rem;
+  min-height: 7rem;
   flex-direction: column;
   border-bottom-width: 2px;
   --tw-bg-opacity: 1;
@@ -838,7 +847,6 @@ Add the correct display in Chrome and Safari.
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
 }
 
 @media (min-width: 768px){
@@ -855,7 +863,10 @@ Add the correct display in Chrome and Safari.
   justify-content: center;
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
-  padding: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -1646,10 +1657,6 @@ Add the correct display in Chrome and Safari.
   display: flex !important;
 }
 
-.pelcro-root .pelcro-select-plan-radio {
-  margin-top: 0.4rem;
-}
-
 .pelcro-root .pelcro-product:before {
   content: "";
   position: absolute;
@@ -1660,51 +1667,17 @@ Add the correct display in Chrome and Safari.
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
 }
 
-/* Firefox */
-
-.pelcro-root .productTabs .tabs {
-  padding-bottom: 5px;
-  scrollbar-width: thin;
-  scrollbar-color: grey;
-}
-
-/* Chrome, Edge, and Safari */
-
-.pelcro-root .productTabs .tabs::-webkit-scrollbar {
-  width: 15px;
-  height: 3px;
-}
-
-.pelcro-root .productTabs .tabs::-webkit-scrollbar-track {
-  background: lightGrey;
-  border-radius: 3px;
-}
-
-.pelcro-root .productTabs .tabs::-webkit-scrollbar-thumb {
-  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
-  border-radius: 14px;
-}
-
-.pelcro-root .productTabs .tabs li:first-child {
-  margin-left: auto;
-}
-
-.pelcro-root .productTabs .tabs li:last-child {
-  margin-right: auto;
-}
-
-.pelcro-root .productTabs .tabs li#activeTab button {
-  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
-  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+.pelcro-root .productTabs:before {
+  content: "";
+  width: calc(100% - 5.5rem);
+  left: 2.75rem;
+  position: absolute;
+  bottom: 0.125rem;
+  height: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
 }
 
-/* .pelcro-root .productTabs .tabs li#activeTab:after {
-    content: "";
-    @apply plc-h-1 plc-bg-primary-800 plc-w-full plc-absolute plc-bottom-0 plc-left-0 plc-block;
-  } */
-
 .pelcro-root .selectedProduct img {
   max-width: 150px;
   height: auto;
@@ -1856,19 +1829,16 @@ Add the correct display in Chrome and Safari.
 }
 
 .pelcro-root .slick-dots li {
-  padding: 2px;
-  border: solid 1px transparent;
-  border-radius: 9999999px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
+  margin: 0 2px;
 }
 
-.pelcro-root .slick-dots li.slick-active {
+.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 {
@@ -2165,10 +2135,6 @@ in order to scope selectors under pelcro-root
   margin-right: 1.5rem;
 }
 
-.pelcro-root .plc-mr-auto{
-  margin-right: auto;
-}
-
 .pelcro-root .plc-mb-1{
   margin-bottom: 0.25rem;
 }
@@ -2213,10 +2179,6 @@ in order to scope selectors under pelcro-root
   margin-left: 1rem;
 }
 
-.pelcro-root .plc-ml-auto{
-  margin-left: auto;
-}
-
 .pelcro-root .plc--ml-2{
   margin-left: -0.5rem;
 }
@@ -2461,8 +2423,8 @@ in order to scope selectors under pelcro-root
   width: max-content;
 }
 
-.pelcro-root .plc-max-w-sm{
-  max-width: 24rem;
+.pelcro-root .plc-max-w-lg{
+  max-width: 32rem;
 }
 
 .pelcro-root .plc-max-w-xl{
@@ -2633,6 +2595,14 @@ in order to scope selectors under pelcro-root
           appearance: none;
 }
 
+.pelcro-root .plc-grid-cols-1{
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.pelcro-root .plc-grid-cols-2{
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .pelcro-root .plc-flex-row-reverse{
   flex-direction: row-reverse;
 }
@@ -2685,6 +2655,10 @@ in order to scope selectors under pelcro-root
   justify-items: center;
 }
 
+.pelcro-root .plc-gap-2{
+  gap: 0.5rem;
+}
+
 .pelcro-root .plc-gap-x-3{
   column-gap: 0.75rem;
 }
@@ -2751,6 +2725,10 @@ in order to scope selectors under pelcro-root
   white-space: nowrap;
 }
 
+.pelcro-root .plc-whitespace-normal{
+  white-space: normal;
+}
+
 .pelcro-root .plc-whitespace-nowrap{
   white-space: nowrap;
 }
@@ -2831,6 +2809,10 @@ in order to scope selectors under pelcro-root
   border-bottom-width: 2px;
 }
 
+.pelcro-root .plc-border-b-4{
+  border-bottom-width: 4px;
+}
+
 .pelcro-root .plc-border-b{
   border-bottom-width: 1px;
 }
@@ -2896,6 +2878,10 @@ in order to scope selectors under pelcro-root
   border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
 }
 
+.pelcro-root .hover\:plc-border-primary:hover{
+  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .plc-bg-transparent{
   background-color: transparent;
 }
@@ -3004,6 +2990,10 @@ in order to scope selectors under pelcro-root
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
 }
 
+.pelcro-root .hover\:plc-bg-primary:hover{
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .hover\:plc-bg-white:hover{
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -3282,6 +3272,10 @@ in order to scope selectors under pelcro-root
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
 }
 
+.pelcro-root .plc-text-primary{
+  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .plc-text-white{
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -3380,6 +3374,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:hover{
+  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .hover\:plc-text-black:hover{
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
@@ -3418,6 +3416,10 @@ in order to scope selectors under pelcro-root
   text-decoration: none;
 }
 
+.pelcro-root .hover\:plc-no-underline:hover{
+  text-decoration: none;
+}
+
 .pelcro-root .hover\:plc-opacity-30:hover{
   opacity: 0.3;
 }
@@ -3646,6 +3648,16 @@ in order to scope selectors under pelcro-root
     padding-right: 2rem;
   }
 
+  .pelcro-root .sm\:plc-px-10{
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .pelcro-root .sm\:plc-px-14{
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
   .pelcro-root .sm\:plc-pl-8{
     padding-left: 2rem;
   }

package/package.json

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