@rolster/react-components 18.22.4 → 18.23.4

package/dist/cjs/assets/{index-DrZV0dgi.css → index-SyKruNt7.css}

@@ -514,13 +514,65 @@
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=CheckBox.css.map */
 
+.rls-skeleton {
+  --pvt-height: var(--rlc-skeleton-height, inherit);
+  --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
+  --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
+  --pvt-color-primary: var(--rls-app-color-100);
+  --pvt-color-secondary: var(--rls-app-color-200);
+  position: relative;
+  width: 100%;
+  height: var(--pvt-height);
+  max-height: var(--pvt-max-height);
+  min-height: var(--pvt-min-height);
+  line-height: var(--pvt-height);
+  background: linear-gradient(
+    90deg,
+    var(--pvt-color-primary) 25%,
+    var(--pvt-color-secondary) 50%,
+    var(--pvt-color-primary) 75%
+  );
+  overflow: hidden;
+  background-size: 200% 100%;
+  animation: skeleton-animation 1600ms infinite;
+  border-radius: var(--rls-sizing-x2);
+}
+.rls-skeleton[rls-theme] {
+  --pvt-color-primary: var(--rls-theme-color-100);
+  --pvt-color-secondary: var(--rls-theme-color-200);
+}
+@keyframes skeleton-animation {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+} /*# sourceMappingURL=Skeleton.css.map */
+
 .rls-image {
-  content-visibility: auto;
-  background-color: var(--rls-theme-color-600);
-  opacity: 0;
+  --pvt-background: transparent;
+  --pvt-width: var(--rlc-image-width, 100%);
+  --pvt-height: var(--rlc-image-height, 100%);
+  --pvt-img-display: none;
+  --rlc-skeleton-width: var(--pvt-width);
+  --rlc-skeleton-height: var(--pvt-height);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  overflow: hidden;
 }
 .rls-image--complet {
-  opacity: 1;
+  --pvt-img-display: block;
+  background: var(--pvt-background);
+}
+.rls-image[rls-theme] {
+  --pvt-background: var(--rls-theme-color-600);
+}
+.rls-image > img {
+  display: var(--pvt-img-display);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  content-visibility: auto;
 } /*# sourceMappingURL=Image.css.map */
 
 .rls-input {
@@ -883,44 +935,6 @@
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=RadioButton.css.map */
 
-.rls-skeleton {
-  --pvt-height: var(--rlc-skeleton-height, inherit);
-  --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
-  --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
-  position: relative;
-  width: 100%;
-  max-height: var(--pvt-max-height);
-  min-height: var(--pvt-min-height);
-  height: var(--pvt-height);
-  line-height: var(--pvt-height);
-  letter-spacing: inherit;
-  overflow: hidden;
-  background: var(--rls-theme-color-100);
-  border-radius: var(--rls-sizing-x2);
-}
-.rls-skeleton::after {
-  position: absolute;
-  content: '';
-  top: 0rem;
-  right: 0rem;
-  bottom: 0rem;
-  left: 0rem;
-  transform: translateX(-100%);
-  background-image: linear-gradient(
-    90deg,
-    var(--rls-theme-skeleton-200) 0%,
-    var(--rls-theme-skeleton-200) 20%,
-    var(--rls-theme-skeleton-300) 60%,
-    var(--rls-theme-skeleton-200)
-  );
-  animation: skeleton-animation 1600ms infinite;
-}
-@keyframes skeleton-animation {
-  100% {
-    transform: translateX(100%);
-  }
-} /*# sourceMappingURL=Skeleton.css.map */
-
 .rls-skeleton-text {
   --pvt-height: var(--rlc-skeleton-text-height, var(--rls-body-line-height));
   --rlc-skeleton-height: var(--pvt-height);
@@ -2598,6 +2612,20 @@
   }
 } /*# sourceMappingURL=ImageEditor.css.map */
 
+.rls-image-editor-modal {
+  --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
+    var(--rls-sizing-x12) var(--rls-sizing-x12);
+  --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
+  width: 100%;
+}
+@media only screen and (max-width: 480px) {
+  .rls-image-editor-modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
+      var(--rls-sizing-x8) var(--rls-sizing-x8);
+    --rlc-modal-max-width: 160rem;
+  }
+} /*# sourceMappingURL=ImageEditorModal.css.map */
+
 .rls-image-chooser {
   position: relative;
   width: var(--rlc-image-chooser-width, 48rem);