@rolster/react-components 19.1.2 → 19.1.4

package/dist/cjs/assets/{index-B3qsKGu2.css → index-PhLxmZfd.css}

@@ -43,7 +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);
+  color: var(--rlc-amount-font-color, inherit);
 }
 .rls-amount[rls-theme] {
   color: var(--rls-theme-color-500);
@@ -73,14 +73,15 @@
   --rlc-image-height: var(--rlc-avatar-height);
   position: relative;
   display: flex;
-  justify-content: center;
-  overflow: hidden;
-  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
   width: var(--rlc-avatar-width, var(--rls-sizing-x24));
   height: var(--rlc-avatar-height, var(--rls-sizing-x24));
-  background: var(--rls-theme-gradient-500);
-  color: var(--rls-theme-color-050);
+  justify-content: center;
+  align-items: center;
   border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x4));
+  font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
+  color: var(--rls-theme-color-050);
+  background: var(--rls-theme-gradient-500);
+  overflow: hidden;
 }
 .rls-avatar--skeleton {
   background: var(--rls-theme-color-200);
@@ -91,9 +92,16 @@
 .rls-avatar--rounded {
   border-radius: 50%;
 }
-.rls-avatar span {
-  align-self: center;
+.rls-avatar--contrast {
+  color: var(--rls-theme-color-500);
+  background: var(--rls-theme-color-100);
+}
+.rls-avatar > span {
   font-size: inherit;
+}
+.rls-avatar > img {
+  width: 100%;
+  object-fit: cover;
 } /*# sourceMappingURL=Avatar.css.map */
 
 .rls-badge {
@@ -108,7 +116,7 @@
   min-width: var(--pvt-dimension);
   height: var(--pvt-dimension);
   line-height: var(--pvt-dimension);
-  padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x4));
+  padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
   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));
@@ -117,9 +125,9 @@
     --rlc-badge-letter-spacing,
     var(--rls-smalltext-letter-spacing)
   );
-  color: var(--rls-app-color-050);
-  background: var(--rls-app-color-700);
-  border-radius: var(--rlc-badge-border-radius, calc(var(--pvt-dimension) / 2));
+  color: var(--pvt-font-color);
+  background: var(--pvt-background);
+  border-radius: var(--rlc-badge-radius, calc(var(--pvt-dimension) / 2));
 }
 .rls-badge--contrast {
   color: var(--pvt-contrast-font-color);
@@ -980,9 +988,10 @@
 
 .rls-progress-bar {
   --pvt-component-display: block;
+  --pvt-component-height: var(--rlc-progress-bar-height, --rls-sizing-x2);
   position: relative;
   width: 100%;
-  height: var(--rls-sizing-x2);
+  height: var(--pvt-component-height);
   overflow: hidden;
   background: var(--rls-theme-color-200);
 }
@@ -995,7 +1004,7 @@
   content: '';
   top: 0rem;
   width: 0%;
-  height: var(--rls-sizing-x2);
+  height: var(--pvt-component-height);
   background: var(--rls-theme-gradient-500);
 }
 .rls-progress-bar--indeterminate::after {
@@ -1008,7 +1017,7 @@
   position: absolute;
   top: 0rem;
   width: 0%;
-  height: var(--rls-sizing-x4);
+  height: var(--pvt-component-height);
   display: var(--pvt-component-display);
   background: var(--rls-theme-gradient-500);
   transition: width 320ms 0ms var(--rls-standard-curve);

package/dist/cjs/index.js

@@ -466,10 +466,10 @@ function RlsAmount({ value, decimals, rlsTheme, symbol }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
 }
 
-function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
+function RlsAvatar({ children, contrast, rounded, skeleton, rlsTheme }) {
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-avatar', { rounded, skeleton });
-    }, [rounded, skeleton]);
+        return renderClassStatus('rls-avatar', { contrast, rounded, skeleton });
+    }, [contrast, rounded, skeleton]);
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }