@pelcro/react-pelcro-js 4.0.0-alpha.2 → 4.0.0-alpha.20

package/dist/pelcro.css

@@ -548,7 +548,7 @@ Add the correct display in Chrome and Safari.
   background-size: 1.5em 1.5em;
   padding-right: 2.5rem;
   -webkit-print-color-adjust: exact;
-  color-adjust: exact;
+  print-color-adjust: exact;
 }
 
 .pelcro-root [multiple] {
@@ -558,7 +558,7 @@ Add the correct display in Chrome and Safari.
   background-size: initial;
   padding-right: 0.75rem;
   -webkit-print-color-adjust: unset;
-  color-adjust: unset;
+  print-color-adjust: unset;
 }
 
 .pelcro-root [type="checkbox"],
@@ -567,7 +567,7 @@ Add the correct display in Chrome and Safari.
   appearance: none;
   padding: 0;
   -webkit-print-color-adjust: exact;
-  color-adjust: exact;
+  print-color-adjust: exact;
   display: inline-block;
   vertical-align: middle;
   background-origin: border-box;
@@ -703,6 +703,12 @@ Add the correct display in Chrome and Safari.
   width: 100%;
 }
 
+@media (min-width: 425px) {
+  .pelcro-root .pelcro-modal {
+    max-width: 425px;
+  }
+}
+
 @media (min-width: 640px) {
   .pelcro-root .pelcro-modal {
     max-width: 640px;
@@ -737,7 +743,7 @@ Add the correct display in Chrome and Safari.
   position: absolute;
   top: 0px;
   display: flex;
-  max-width: 42rem;
+  max-width: 36rem;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
@@ -759,13 +765,13 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-modal-header {
   position: relative;
   display: flex;
-  min-height: 8rem;
+  min-height: 3rem;
   flex-direction: column;
   border-bottom-width: 2px;
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-left: 3rem;
-  padding-right: 3rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   border-bottom-width: 1px;
@@ -774,7 +780,7 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-modal-close {
   position: absolute;
   top: 50%;
-  right: 1.25rem;
+  right: 0.5rem;
   z-index: 999999;
   width: 1.5rem;
   --tw-translate-x: 0;
@@ -818,19 +824,25 @@ Add the correct display in Chrome and Safari.
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+@media (min-width: 640px) {
+  .pelcro-root .pelcro-modal-close {
+    right: 1.25rem;
+  }
+}
+
 .pelcro-root .pelcro-modal-body {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 @media (min-width: 768px) {
   .pelcro-root .pelcro-modal-body {
-    padding-left: 4rem;
-    padding-right: 4rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
   }
 }
 
@@ -842,7 +854,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;
 }
@@ -1498,6 +1509,10 @@ Add the correct display in Chrome and Safari.
   width: 1px;
 }
 
+.pelcro-root .pelcro-vertical-separator:first-child {
+  display: none;
+}
+
 .pelcro-root .pelcro-shop-product-image {
   max-width: 13rem;
 }
@@ -1636,6 +1651,10 @@ Add the correct display in Chrome and Safari.
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
 }
 
+.pelcro-root .pelcro-product {
+  display: flex !important;
+}
+
 .pelcro-root .pelcro-select-plan-radio {
   margin-top: 0.4rem;
 }
@@ -1650,13 +1669,29 @@ Add the correct display in Chrome and Safari.
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
 }
 
+/* Firefox */
+
+.pelcro-root .productTabs .tabs {
+  padding-bottom: 5px;
+  scrollbar-width: thin;
+  scrollbar-color: grey;
+}
+
+/* Chrome, Edge, and Safari */
+
 .pelcro-root .productTabs .tabs::-webkit-scrollbar {
-  display: none;
+  width: 15px;
+  height: 3px;
 }
 
-.pelcro-root .productTabs .tabs {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+.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 {
@@ -1668,20 +1703,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;
@@ -1693,6 +1725,136 @@ 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.5;
+  cursor: not-allowed;
+}
+
+.pelcro-root .slick-dots {
+  margin-top: 20px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.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;
+}
+
+.pelcro-root .slick-dots li.slick-active {
+  border-color: grey;
+}
+
+.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
@@ -1837,14 +1999,14 @@ in order to scope selectors under pelcro-root
   right: 0.5rem;
 }
 
-.pelcro-root .plc-right-4 {
-  right: 1rem;
-}
-
 .pelcro-root .plc-right-10 {
   right: 2.5rem;
 }
 
+.pelcro-root .plc--right-16 {
+  right: -4rem;
+}
+
 .pelcro-root .plc-bottom-0 {
   bottom: 0px;
 }
@@ -1857,10 +2019,18 @@ in order to scope selectors under pelcro-root
   left: 0px;
 }
 
+.pelcro-root .plc-left-4 {
+  left: 1rem;
+}
+
 .pelcro-root .plc-left-5 {
   left: 1.25rem;
 }
 
+.pelcro-root .plc--left-16 {
+  left: -4rem;
+}
+
 .pelcro-root .plc-z-max {
   z-index: 999999;
 }
@@ -1885,6 +2055,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;
@@ -1983,10 +2158,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;
 }
@@ -2027,6 +2198,10 @@ in order to scope selectors under pelcro-root
   display: inline-block;
 }
 
+.pelcro-root .plc-inline {
+  display: inline;
+}
+
 .pelcro-root .plc-flex {
   display: flex;
 }
@@ -2043,6 +2218,10 @@ in order to scope selectors under pelcro-root
   display: none;
 }
 
+.pelcro-root .plc-h-3 {
+  height: 0.75rem;
+}
+
 .pelcro-root .plc-h-4 {
   height: 1rem;
 }
@@ -2071,6 +2250,10 @@ in order to scope selectors under pelcro-root
   height: 2.5rem;
 }
 
+.pelcro-root .plc-h-11 {
+  height: 2.75rem;
+}
+
 .pelcro-root .plc-h-12 {
   height: 3rem;
 }
@@ -2155,6 +2338,10 @@ in order to scope selectors under pelcro-root
   width: 2.5rem;
 }
 
+.pelcro-root .plc-w-11 {
+  width: 2.75rem;
+}
+
 .pelcro-root .plc-w-12 {
   width: 3rem;
 }
@@ -2191,6 +2378,10 @@ in order to scope selectors under pelcro-root
   width: 50%;
 }
 
+.pelcro-root .plc-w-1\/3 {
+  width: 33.333333%;
+}
+
 .pelcro-root .plc-w-1\/4 {
   width: 25%;
 }
@@ -2239,12 +2430,8 @@ in order to scope selectors under pelcro-root
   max-width: 50%;
 }
 
-.pelcro-root .plc-max-w-80\% {
-  max-width: 80%;
-}
-
-.pelcro-root .plc-max-w-90\% {
-  max-width: 90%;
+.pelcro-root .plc-max-w-full {
+  max-width: 100%;
 }
 
 .pelcro-root .plc-flex-1 {
@@ -2282,6 +2469,10 @@ in order to scope selectors under pelcro-root
   --tw-translate-x: 0px;
 }
 
+.pelcro-root .plc--translate-x-1 {
+  --tw-translate-x: -0.25rem;
+}
+
 .pelcro-root .plc--translate-x-full {
   --tw-translate-x: -100%;
 }
@@ -2302,6 +2493,11 @@ in order to scope selectors under pelcro-root
   --tw-rotate: 180deg;
 }
 
+.pelcro-root .plc-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+}
+
 .pelcro-root .plc-scale-120 {
   --tw-scale-x: 1.2;
   --tw-scale-y: 1.2;
@@ -2512,6 +2708,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;
 }
@@ -2612,6 +2812,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 .plc-border-primary {
+  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .plc-border-white {
   --tw-border-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-border-opacity));
@@ -2661,6 +2865,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) - 30%));
 }
 
+.pelcro-root .plc-bg-primary {
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
+}
+
 .pelcro-root .plc-bg-white {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -2823,8 +3031,9 @@ in order to scope selectors under pelcro-root
   padding: 1.5rem;
 }
 
-.pelcro-root .plc-p-8 {
-  padding: 2rem;
+.pelcro-root .plc-px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 .pelcro-root .plc-px-1 {
@@ -2857,11 +3066,6 @@ 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;
@@ -3129,6 +3333,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));
@@ -3162,6 +3370,10 @@ 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;
 }
@@ -3287,6 +3499,12 @@ in order to scope selectors under pelcro-root
   --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
 }
 
+.pelcro-root .plc-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .pelcro-root .plc-transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3307,6 +3525,9 @@ in order to scope selectors under pelcro-root
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+@media (min-width: 425px) {
+}
+
 @media (min-width: 640px) {
   .pelcro-root .sm\:plc-m-4 {
     margin: 1rem;
@@ -3356,6 +3577,10 @@ in order to scope selectors under pelcro-root
     max-width: 28rem;
   }
 
+  .pelcro-root .sm\:plc-max-w-90\% {
+    max-width: 90%;
+  }
+
   .pelcro-root .sm\:plc-flex-row {
     flex-direction: row;
   }
@@ -3381,12 +3606,36 @@ 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;
   }
 }
 
 @media (min-width: 768px) {
+  .pelcro-root .md\:plc-table-cell {
+    display: table-cell;
+  }
+
+  .pelcro-root .md\:plc-hidden {
+    display: none;
+  }
+
+  .pelcro-root .md\:plc-w-1\/5 {
+    width: 20%;
+  }
+
+  .pelcro-root .md\:plc-max-w-70\% {
+    max-width: 70%;
+  }
+
+  .pelcro-root .md\:plc-max-w-80\% {
+    max-width: 80%;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -3407,230 +3656,6 @@ in order to scope selectors under pelcro-root
 
 /* purgecss start ignore */
 
-.alice-carousel .animated {
-  animation-fill-mode: both;
-}
-
-.alice-carousel .animated-out {
-  z-index: 1;
-}
-
-.alice-carousel .fadeOut {
-  animation-name: fadeOut;
-}
-
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-.alice-carousel {
-  position: relative;
-  width: 100%;
-  margin: auto;
-  direction: ltr;
-}
-
-.alice-carousel__wrapper {
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  box-sizing: border-box;
-  width: 100%;
-  height: auto;
-}
-
-.alice-carousel__stage {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
-  transform-style: flat;
-  -webkit-transform-style: flat;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-
-.alice-carousel__stage-item {
-  position: relative;
-  display: inline-block;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  vertical-align: top;
-  white-space: normal;
-  line-height: 0;
-}
-
-.alice-carousel__stage-item * {
-  line-height: initial;
-}
-
-.alice-carousel__stage-item.__hidden {
-  opacity: 0;
-  overflow: hidden;
-}
-
-.alice-carousel__prev-btn,
-.alice-carousel__next-btn {
-  display: inline-block;
-  box-sizing: border-box;
-  width: 50%;
-  padding: 10px 5px;
-}
-
-.alice-carousel__prev-btn [data-area]::after,
-.alice-carousel__next-btn [data-area]::after {
-  position: relative;
-  content: attr(data-area);
-  text-transform: capitalize;
-}
-
-.alice-carousel__prev-btn {
-  text-align: right;
-}
-
-.alice-carousel__prev-btn-item,
-.alice-carousel__next-btn-item {
-  display: inline-block;
-  cursor: pointer;
-  padding: 5px;
-  margin: 0;
-  color: #465798;
-}
-
-.alice-carousel__prev-btn-item:hover,
-.alice-carousel__next-btn-item:hover {
-  color: darkred;
-}
-
-.alice-carousel__prev-btn-item.__inactive,
-.alice-carousel__next-btn-item.__inactive {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-.alice-carousel__play-btn {
-  position: absolute;
-  top: 30px;
-  left: 20px;
-  display: inline-block;
-}
-
-.alice-carousel__play-btn:hover {
-  cursor: pointer;
-}
-
-.alice-carousel__play-btn-wrapper {
-  position: relative;
-  width: 32px;
-  height: 32px;
-  padding: 10px;
-  border-radius: 50%;
-  background-color: #fff;
-}
-
-.alice-carousel__play-btn-item {
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  border: 0;
-  outline: none;
-  background: transparent;
-}
-
-.alice-carousel__play-btn-item::before, .alice-carousel__play-btn-item::after {
-  position: absolute;
-  pointer-events: none;
-  display: block;
-  width: 0;
-  height: 0;
-  content: "";
-  transition: all 0.4s linear;
-  border-width: 8px 0 8px 15px;
-  border-style: solid;
-  border-color: transparent;
-  border-left-color: #465798;
-}
-
-.alice-carousel__play-btn-item::before {
-  left: 5px;
-  height: 14px;
-}
-
-.alice-carousel__play-btn-item::after {
-  top: 7px;
-  left: 18px;
-}
-
-.alice-carousel__play-btn-item.__pause::before, .alice-carousel__play-btn-item.__pause::after {
-  height: 30px;
-  border-width: 0 0 0 10px;
-}
-
-.alice-carousel__play-btn-item.__pause::after {
-  top: 0;
-  left: 18px;
-}
-
-.alice-carousel__dots {
-  margin: 30px 3px 5px;
-  padding: 0;
-  list-style: none;
-  text-align: center;
-}
-
-.alice-carousel__dots > li {
-  display: inline-block;
-}
-
-.alice-carousel__dots-item:not(.__custom) {
-  width: 8px;
-  height: 8px;
-  cursor: pointer;
-  border-radius: 50%;
-  background-color: #e0e4fb;
-}
-
-.alice-carousel__dots-item:not(.__custom):not(:last-child) {
-  margin-right: 20px;
-}
-
-.alice-carousel__dots-item:not(.__custom):hover, .alice-carousel__dots-item:not(.__custom).__active {
-  background-color: #6e7ebc;
-}
-
-.alice-carousel__slide-info {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  display: inline-block;
-  padding: 5px 10px;
-  color: #465798;
-  border-radius: 5px;
-  background-color: rgba(224, 228, 251, 0.6);
-}
-
-.alice-carousel__slide-info-item {
-  vertical-align: middle;
-  line-height: 0;
-}
-
-/* purgecss end ignore */
-/* purgecss start ignore */
-
 .toggle-switch {
   position: relative;
   display: inline-block;