@rolster/react-components 18.26.23 → 19.0.0

package/dist/es/assets/{index-3tg8B_CA.css → index-QCv-Uo8R.css}

@@ -43,6 +43,7 @@
   column-gap: var(--rls-sizing-x2);
   font-size: var(--pvt-font-size);
   font-weight: var(--pvt-font-weight);
+  color: var(--rls-amount-font-color, inherit);
 }
 .rls-amount[rls-theme] {
   color: var(--rls-theme-color-500);
@@ -55,6 +56,7 @@
 .rls-amount__content {
   display: flex;
   justify-content: var(--rlc-amount-text-align, flex-start);
+  align-items: var(--rlc-amount-align-items, center);
 }
 .rls-amount__decimal {
   --rlc-tabular-text-char-width: calc(
@@ -96,6 +98,8 @@
 
 .rls-badge {
   --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-contrast-font-color: var(--rls-app-color-600);
+  --pvt-contrast-background: var(--rls-app-color-200);
   position: relative;
   display: inline-block;
   width: auto;
@@ -105,18 +109,25 @@
   padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x4));
   box-sizing: border-box;
   font-size: var(--rlc-badge-font-size, var(--rls-smalltext-font-size));
+  font-weight: var(--rlc-badge-font-weight, var(--rls-font-weight-regular));
   text-align: center;
   letter-spacing: var(
     --rlc-badge-letter-spacing,
     var(--rls-smalltext-letter-spacing)
   );
-  color: var(--rls-theme-color-050);
-  background: var(--rls-theme-color-500);
+  color: var(--rls-app-color-050);
+  background: var(--rls-app-color-700);
   border-radius: var(--rlc-badge-border-radius, calc(var(--pvt-dimension) / 2));
 }
 .rls-badge--contrast {
-  background: var(--rls-theme-color-100);
-  color: var(--rls-theme-color-700);
+  color: var(--pvt-contrast-font-color);
+  background: var(--pvt-contrast-background);
+}
+.rls-badge[rls-theme] {
+  --pvt-contrast-font-color: var(--rls-theme-color-700);
+  --pvt-contrast-background: var(--rls-theme-color-100);
+  color: var(--rls-theme-color-050);
+  background: var(--rls-theme-color-500);
 }
 .rls-badge > span {
   font-size: inherit;
@@ -2888,61 +2899,35 @@
 } /*# sourceMappingURL=FieldSelect.css.map */
 
 .rls-form-navigation {
-  --pvt-component-transform: translateX(100%);
-  --pvt-component-opacity: 0;
-  --pvt-component-visibility: hidden;
   --pvt-component-transition: 160ms;
-  --pvt-backdrop-opacity: 0;
-  --pvt-backdrop-bottom: initial;
   position: fixed;
   display: flex;
   top: 0rem;
-  left: 0rem;
-  width: 100%;
+  right: 0rem;
+  width: calc(100% - var(--rls-sizing-x16));
+  max-width: var(--rlc-form-navigation-max-width, 160rem);
   height: 100%;
-  z-index: var(--rls-z-index-24);
-  visibility: hidden;
   justify-content: flex-end;
+  visibility: hidden;
+  transform: translateX(100%);
+  transition: opacity var(--pvt-component-transition) 0ms
+      var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
+  z-index: var(--rls-z-index-16);
 }
 .rls-form-navigation--visible {
-  --pvt-component-visibility: visible;
-  --pvt-component-opacity: 1;
-  --pvt-component-transform: translateX(0%);
-  --pvt-backdrop-bottom: 0rem;
-  --pvt-backdrop-opacity: 1;
   visibility: visible;
+  transform: translateX(0%);
 }
 .rls-form-navigation__component {
   position: absolute;
   display: flex;
-  width: calc(100% - var(--rls-sizing-x16));
-  max-width: var(--rlc-form-navigation-max-width, 160rem);
+  width: 100%;
   height: 100%;
   flex-direction: column;
-  opacity: var(--pvt-component-opacity);
-  visibility: var(--pvt-component-visibility);
-  z-index: var(--rls-z-index-2);
-  border-radius: var(--rls-sizing-x4) 0rem 0rem var(--rls-sizing-x4);
-  background: var(--rlc-form-navigation-background, var(--rls-app-color-050));
-  transform: var(--pvt-component-transform);
-  transition: opacity var(--pvt-component-transition) 0ms
-      var(--rls-deceleration-curve),
-    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
-    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
-}
-.rls-form-navigation__backdrop {
-  position: absolute;
-  display: block;
-  top: 0rem;
-  left: 0rem;
-  right: 0rem;
-  bottom: var(--pvt-backdrop-bottom);
-  opacity: var(--pvt-backdrop-opacity);
-  z-index: 1;
-  background: var(--rls-theme-backdrop-900);
-  backdrop-filter: blur(2px);
-  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
-    bottom 120ms 0ms var(--rls-deceleration-curve);
+  background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
+  border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
 } /*# sourceMappingURL=FormNavigation.css.map */
 
 .rls-image-editor {