@pelcro/react-pelcro-js 4.0.0-alpha.3 → 4.0.0-alpha.4

package/dist/pelcro.css

@@ -1693,6 +1693,114 @@ Add the correct display in Chrome and Safari.
 
 /* used by multiple input sub-components */
 
+.pelcro-root .alice-carousel {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
+.pelcro-root .alice-carousel__stage {
+  display: flex;
+}
+
+.pelcro-root .alice-carousel__stage-item {
+  flex: 1 0 auto;
+  height: auto;
+}
+
+.pelcro-root .alice-carousel__next-btn,
+.pelcro-root .alice-carousel__prev-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: auto;
+}
+
+.pelcro-root .alice-carousel__next-btn {
+  right: 0;
+}
+
+.pelcro-root .alice-carousel__prev-btn {
+  left: 0;
+}
+
+.pelcro-root .alice-carousel__next-btn-item span,
+.pelcro-root .alice-carousel__prev-btn-item span {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 999999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  color: white;
+}
+
+.pelcro-root .alice-carousel__next-btn-item span {
+  padding-left: 5px;
+}
+
+.pelcro-root .alice-carousel__prev-btn-item span {
+  padding-right: 5px;
+}
+
+.pelcro-root .alice-carousel__next-btn-item [data-area]::after,
+.pelcro-root .alice-carousel__prev-btn-item [data-area]::after {
+  height: 28px;
+  width: 28px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pelcro-root .alice-carousel__stage-item {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.pelcro-root .alice-carousel__dots {
+  margin-top: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pelcro-root .alice-carousel__dots-item {
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: #d1d5db;
+}
+
+.pelcro-root
+  .alice-carousel__dots-item:not(.__custom):not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.pelcro-root .alice-carousel__dots-item:not(.__custom):hover,
+.alice-carousel__dots-item:not(.__custom).__active {
+  background-color: black;
+}
+
+.pelcro-root .alice-carousel__next-btn-item [data-area]::after {
+  content: url("/assets/arrow-thin-right.svg");
+}
+
+.pelcro-root .alice-carousel__prev-btn-item [data-area]::after {
+  content: url("/assets/arrow-thin-left.svg");
+}
+
+@media (max-width: 1024px) {
+  .pelcro-root .alice-carousel__prev-btn,
+  .pelcro-root .alice-carousel__next-btn {
+    display: none;
+  }
+
+  .pelcro-root .alice-carousel {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
 /* 
 styling is copied from react-easy-crop/react-easy-crop.css 
 in order to scope selectors under pelcro-root
@@ -3631,118 +3739,6 @@ in order to scope selectors under pelcro-root
 /* purgecss end ignore */
 /* purgecss start ignore */
 
-.pelcro-root .alice-carousel {
-  padding-left: 5rem;
-  padding-right: 5rem;
-}
-
-.pelcro-root .alice-carousel__stage {
-  display: flex;
-}
-
-.pelcro-root .alice-carousel__stage-item {
-  flex: 1 0 auto;
-  height: auto;
-}
-
-.pelcro-root .alice-carousel__next-btn,
-.pelcro-root .alice-carousel__prev-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: auto;
-}
-
-.pelcro-root .alice-carousel__next-btn {
-  right: 0;
-}
-
-.pelcro-root .alice-carousel__prev-btn {
-  left: 0;
-}
-
-.pelcro-root .alice-carousel__next-btn-item span,
-.pelcro-root .alice-carousel__prev-btn-item span {
-  width: 3.5rem;
-  height: 3.5rem;
-  border-radius: 999999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: black;
-  color: white;
-}
-
-.pelcro-root .alice-carousel__next-btn-item span {
-  padding-left: 5px;
-}
-
-.pelcro-root .alice-carousel__prev-btn-item span {
-  padding-right: 5px;
-}
-
-.pelcro-root .alice-carousel__next-btn-item [data-area]::after,
-.pelcro-root .alice-carousel__prev-btn-item [data-area]::after {
-  height: 28px;
-  width: 28px;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pelcro-root .alice-carousel__next-btn-item [data-area]::after {
-  content: url("../assets/arrow-thin-right.svg");
-}
-
-.pelcro-root .alice-carousel__prev-btn-item [data-area]::after {
-  content: url("../assets/arrow-thin-left.svg");
-}
-
-.pelcro-root .alice-carousel__stage-item {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.pelcro-root .alice-carousel__dots {
-  margin-top: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pelcro-root .alice-carousel__dots-item {
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: #d1d5db;
-}
-
-.pelcro-root
-  .alice-carousel__dots-item:not(.__custom):not(:last-child) {
-  margin-right: 0.5rem;
-}
-
-.pelcro-root .alice-carousel__dots-item:not(.__custom):hover,
-.alice-carousel__dots-item:not(.__custom).__active {
-  background-color: black;
-}
-
-@media (max-width: 1024px) {
-  .pelcro-root .alice-carousel__prev-btn,
-  .pelcro-root .alice-carousel__next-btn {
-    display: none;
-  }
-
-  .pelcro-root .alice-carousel {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-/* purgecss end ignore */
-
-/* purgecss start ignore */
-
 .toggle-switch {
   position: relative;
   display: inline-block;

package/package.json

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