@pelcro/react-pelcro-js 4.0.0-alpha.12 → 4.0.0-alpha.13

package/dist/index.cjs.js

@@ -18488,7 +18488,7 @@ const NextArrow = ({
   onClick,
   className
 }) => /*#__PURE__*/React__default['default'].createElement("button", {
-  className: `plc-text-white plc-w-11 plc-h-11 plc-bg-primary plc-flex plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--right-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
+  className: `sm:plc-flex plc-hidden plc-text-white plc-w-11 plc-h-11 plc-bg-primary  plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--right-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default['default'].createElement(SvgArrowThinRight, {
   stroke: "currentColor",
@@ -18501,7 +18501,7 @@ const PrevArrow = ({
   onClick,
   className
 }) => /*#__PURE__*/React__default['default'].createElement("button", {
-  className: `plc-text-white plc-w-11 plc-h-11 plc-bg-primary plc-flex plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--left-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
+  className: `sm:plc-flex plc-hidden plc-text-white plc-w-11 plc-h-11 plc-bg-primary plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--left-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default['default'].createElement(SvgArrowThinLeft, {
   stroke: "currentColor",
@@ -18542,19 +18542,11 @@ function Carousel({
       }
     }]
   };
-  return (
-    /*#__PURE__*/
-    // <div
-    //   className={`carousel-wrapper plc-relative plc-px-16 xl:plc-px-0 ${
-    //     slidesCount > 3 && `plc-px-16 xl:plc-px-16`
-    //   }`}
-    // >
-    React__default['default'].createElement("div", {
-      className: "carousel-wrapper plc-relative plc-px-16"
-    }, /*#__PURE__*/React__default['default'].createElement(Slider, Object.assign({
-      ref: ref
-    }, settings), children))
-  );
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "carousel-wrapper plc-relative sm:plc-px-16 plc-px-0"
+  }, /*#__PURE__*/React__default['default'].createElement(Slider, Object.assign({
+    ref: ref
+  }, settings), children));
 }
 
 var _path$m;
@@ -18762,20 +18754,20 @@ class SelectModal extends React.Component {
         description
       } = this.state.product;
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "productTabs plc-mb-8"
+        className: "productTabs"
       }, /*#__PURE__*/React__default['default'].createElement("ul", {
-        className: "tabs plc-flex plc-items-center plc-text-center plc-border-b plc-border-gray-300 plc-mb-8 plc-overflow-x-auto"
+        className: "tabs 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"
+          className: "plc-relative plc-mx-1"
         }, /*#__PURE__*/React__default['default'].createElement("button", {
           onClick: productButtonCallback,
           "data-key": product.id,
-          className: "plc-px-4 plc-py-2 plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
+          className: "plc-px-4 plc-py-2 plc-bg-white plc-border plc-border-gray-200 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
         }, product.name));
       })), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center"
@@ -18784,7 +18776,9 @@ class SelectModal extends React.Component {
       }, /*#__PURE__*/React__default['default'].createElement("img", {
         src: image,
         alt: "Product Image"
-      })), description && /*#__PURE__*/React__default['default'].createElement("p", null, description)));
+      })), description && /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-text-center"
+      }, description)));
     });
 
     _defineProperty$3(this, "renderMatchingProductsFirst", () => {
@@ -18840,7 +18834,7 @@ class SelectModal extends React.Component {
         }, /*#__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 plc-border-b plc-border-gray-300"
         }, /*#__PURE__*/React__default['default'].createElement("h4", {
-          className: "pelcro-select-plan-title plc-font-medium plc-text-xl"
+          className: "pelcro-select-plan-title plc-font-medium plc-text-xl plc-break-all"
         }, plan.nickname), /*#__PURE__*/React__default['default'].createElement("p", {
           className: "plc-text-sm plc-mt-1 pelcro-select-plan-description"
         }, plan.description)), /*#__PURE__*/React__default['default'].createElement("div", {

package/dist/index.esm.js

@@ -18458,7 +18458,7 @@ const NextArrow = ({
   onClick,
   className
 }) => /*#__PURE__*/React__default.createElement("button", {
-  className: `plc-text-white plc-w-11 plc-h-11 plc-bg-primary plc-flex plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--right-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
+  className: `sm:plc-flex plc-hidden plc-text-white plc-w-11 plc-h-11 plc-bg-primary  plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--right-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default.createElement(SvgArrowThinRight, {
   stroke: "currentColor",
@@ -18471,7 +18471,7 @@ const PrevArrow = ({
   onClick,
   className
 }) => /*#__PURE__*/React__default.createElement("button", {
-  className: `plc-text-white plc-w-11 plc-h-11 plc-bg-primary plc-flex plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--left-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
+  className: `sm:plc-flex plc-hidden plc-text-white plc-w-11 plc-h-11 plc-bg-primary plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--left-16 plc-transform plc--translate-y-1/2 plc-border plc-border-primary hover:plc-bg-white hover:plc-text-primary ${className}`,
   onClick: onClick
 }, /*#__PURE__*/React__default.createElement(SvgArrowThinLeft, {
   stroke: "currentColor",
@@ -18512,19 +18512,11 @@ function Carousel({
       }
     }]
   };
-  return (
-    /*#__PURE__*/
-    // <div
-    //   className={`carousel-wrapper plc-relative plc-px-16 xl:plc-px-0 ${
-    //     slidesCount > 3 && `plc-px-16 xl:plc-px-16`
-    //   }`}
-    // >
-    React__default.createElement("div", {
-      className: "carousel-wrapper plc-relative plc-px-16"
-    }, /*#__PURE__*/React__default.createElement(Slider, Object.assign({
-      ref: ref
-    }, settings), children))
-  );
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "carousel-wrapper plc-relative sm:plc-px-16 plc-px-0"
+  }, /*#__PURE__*/React__default.createElement(Slider, Object.assign({
+    ref: ref
+  }, settings), children));
 }
 
 var _path$m;
@@ -18732,20 +18724,20 @@ class SelectModal extends Component {
         description
       } = this.state.product;
       return /*#__PURE__*/React__default.createElement("div", {
-        className: "productTabs plc-mb-8"
+        className: "productTabs"
       }, /*#__PURE__*/React__default.createElement("ul", {
-        className: "tabs plc-flex plc-items-center plc-text-center plc-border-b plc-border-gray-300 plc-mb-8 plc-overflow-x-auto"
+        className: "tabs 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"
+          className: "plc-relative plc-mx-1"
         }, /*#__PURE__*/React__default.createElement("button", {
           onClick: productButtonCallback,
           "data-key": product.id,
-          className: "plc-px-4 plc-py-2 plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
+          className: "plc-px-4 plc-py-2 plc-bg-white plc-border plc-border-gray-200 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
         }, product.name));
       })), /*#__PURE__*/React__default.createElement("div", {
         className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center"
@@ -18754,7 +18746,9 @@ class SelectModal extends Component {
       }, /*#__PURE__*/React__default.createElement("img", {
         src: image,
         alt: "Product Image"
-      })), description && /*#__PURE__*/React__default.createElement("p", null, description)));
+      })), description && /*#__PURE__*/React__default.createElement("p", {
+        className: "plc-text-center"
+      }, description)));
     });
 
     _defineProperty$3(this, "renderMatchingProductsFirst", () => {
@@ -18810,7 +18804,7 @@ class SelectModal extends Component {
         }, /*#__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 plc-border-b plc-border-gray-300"
         }, /*#__PURE__*/React__default.createElement("h4", {
-          className: "pelcro-select-plan-title plc-font-medium plc-text-xl"
+          className: "pelcro-select-plan-title plc-font-medium plc-text-xl plc-break-all"
         }, plan.nickname), /*#__PURE__*/React__default.createElement("p", {
           className: "plc-text-sm plc-mt-1 pelcro-select-plan-description"
         }, plan.description)), /*#__PURE__*/React__default.createElement("div", {

package/dist/pelcro.css

@@ -842,7 +842,6 @@ Add the correct display in Chrome and Safari.
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
   padding: 1rem;
-  padding-bottom: 2.75rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -1670,12 +1669,12 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .productTabs .tabs::-webkit-scrollbar {
   width: 15px;
-  height: 5px;
+  height: 3px;
 }
 
 .pelcro-root .productTabs .tabs::-webkit-scrollbar-track {
   background: lightGrey;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .pelcro-root .productTabs .tabs::-webkit-scrollbar-thumb {
@@ -1692,20 +1691,17 @@ Add the correct display in Chrome and Safari.
 }
 
 .pelcro-root .productTabs .tabs li#activeTab button {
-  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
-}
-
-.pelcro-root .productTabs .tabs li#activeTab:after {
-  content: "";
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  display: block;
-  height: 0.25rem;
-  width: 100%;
+  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), calc(var(--plc-primary-lightness) - 30%));
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-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;
@@ -1733,7 +1729,7 @@ Add the correct display in Chrome and Safari.
   display: block;
   overflow: hidden;
   padding: 0;
-  margin: 0 -10px;
+  /* margin: 0 -10px; */
 }
 
 .pelcro-root .slick-list:focus {
@@ -1772,7 +1768,7 @@ Add the correct display in Chrome and Safari.
 }
 
 .pelcro-root .slick-slide {
-  display: flex;
+  display: flex !important;
   align-self: stretch;
   height: unset;
   margin: 0 10px;
@@ -2047,6 +2043,11 @@ in order to scope selectors under pelcro-root
   margin: auto;
 }
 
+.pelcro-root .plc-mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .pelcro-root .plc-mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -2145,10 +2146,6 @@ in order to scope selectors under pelcro-root
   margin-bottom: 1.5rem;
 }
 
-.pelcro-root .plc-mb-8 {
-  margin-bottom: 2rem;
-}
-
 .pelcro-root .plc-mb-9 {
   margin-bottom: 2.25rem;
 }
@@ -2695,6 +2692,10 @@ in order to scope selectors under pelcro-root
   overflow-wrap: break-word;
 }
 
+.pelcro-root .plc-break-all {
+  word-break: break-all;
+}
+
 .pelcro-root .plc-rounded-none {
   border-radius: 0px;
 }
@@ -3014,6 +3015,11 @@ in order to scope selectors under pelcro-root
   padding: 1.5rem;
 }
 
+.pelcro-root .plc-px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .pelcro-root .plc-px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -3044,11 +3050,6 @@ in order to scope selectors under pelcro-root
   padding-right: 1.5rem;
 }
 
-.pelcro-root .plc-px-16 {
-  padding-left: 4rem;
-  padding-right: 4rem;
-}
-
 .pelcro-root .plc-py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3586,6 +3587,11 @@ in order to scope selectors under pelcro-root
     padding-right: 2rem;
   }
 
+  .pelcro-root .sm\:plc-px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .pelcro-root .sm\:plc-pl-8 {
     padding-left: 2rem;
   }
@@ -3608,15 +3614,6 @@ in order to scope selectors under pelcro-root
 }
 
 @media (min-width: 1280px) {
-  .pelcro-root .xl\:plc-px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .pelcro-root .xl\:plc-px-16 {
-    padding-left: 4rem;
-    padding-right: 4rem;
-  }
 }
 
 @media (min-width: 1536px) {

package/package.json

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