@rolster/react-components 18.26.7 → 18.26.9

package/dist/cjs/assets/{index-H6EZ9odJ.css → index-BPY5vDCC.css}

@@ -31,9 +31,12 @@
   --pvt-font-weight: var(--rlc-amount-font-weight, inherit);
   --pvt-decimal-width: var(--rlc-amount-decimal-width, 0.5);
   --pvt-decimal-size: var(--rlc-amount-decimal-size, 0.6);
+  --pvt-width-separator: var(--rlc-amount-separator, 1.25);
   --rlc-tabular-text-font-size: var(--pvt-font-size);
   --rlc-tabular-text-font-weight: var(--pvt-font-weight);
-  --rlc-tabular-text-char-width: calc(var(--pvt-font-size) / 1.25);
+  --rlc-tabular-text-char-width: calc(
+    var(--pvt-font-size) / var(--pvt-width-separator)
+  );
   display: flex;
   width: var(--rlc-amount-width, auto);
   justify-content: var(--rlc-amount-text-align, flex-start);
@@ -211,6 +214,89 @@
   font-size: inherit;
 } /*# sourceMappingURL=Icon.css.map */
 
+.rls-spinner {
+  position: relative;
+  display: block;
+  width: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
+  height: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
+  fill: var(--rlc-spinner-color, var(--rls-app-color-800));
+}
+.rls-spinner__svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  fill: inherit;
+  transform-origin: center center;
+  transform: translateZ(0px);
+  animation: 1s linear 0s infinite normal none running rls-spinner-scale-out;
+}
+.rls-spinner__svg > circle {
+  r: 5;
+  transform: translate(32px, 32px);
+}
+.rls-spinner__svg--1 {
+  top: 0px;
+  left: 9px;
+  animation-delay: -1000ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--2 {
+  top: 5.78509px;
+  left: 6.8944px;
+  animation-delay: -888.889ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--3 {
+  top: 8.86327px;
+  left: 1.56283px;
+  animation-delay: -777.778ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--4 {
+  top: 7.79423px;
+  left: -4.5px;
+  animation-delay: -666.667ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--5 {
+  top: 3.07818px;
+  left: -8.45723px;
+  animation-delay: -555.556ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--6 {
+  top: -3.07818px;
+  left: -8.45723px;
+  animation-delay: -444.444ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--7 {
+  top: -7.79423px;
+  left: -4.5px;
+  animation-delay: -333.333ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--8 {
+  top: -8.86327px;
+  left: 1.56283px;
+  animation-delay: -222.222ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--9 {
+  top: -5.78509px;
+  left: 6.8944px;
+  animation-delay: -111.111ms;
+  animation-duration: 1000ms;
+}
+@keyframes rls-spinner-scale-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+  }
+} /*# sourceMappingURL=Spinner.css.map */
+
 .rls-button {
   --pvt-button-content-background: none;
   --pvt-button-content-border: none;
@@ -336,41 +422,48 @@
   visibility: var(--pvt-button-content-visibility);
 }
 .rls-button__content--ghost {
+  --rlc-spinner-color: var(--pvt-ghost-font-color);
   --pvt-button-content-font-color: var(--pvt-ghost-font-color);
   --pvt-button-content-background: var(--pvt-ghost-background);
   --pvt-button-content-border: var(--pvt-ghost-border);
 }
 .rls-button__content--outline {
+  --rlc-spinner-color: var(--pvt-outline-font-color);
   --pvt-button-content-font-color: var(--pvt-outline-font-color);
   --pvt-button-content-background: var(--pvt-outline-background);
   --pvt-button-content-border: var(--pvt-outline-border);
 }
 .rls-button__content--stroked {
+  --rlc-spinner-color: var(--pvt-stroked-font-color);
   --pvt-button-content-font-color: var(--pvt-stroked-font-color);
   --pvt-button-content-background: var(--pvt-stroked-background);
   --pvt-button-content-border: var(--pvt-stroked-border);
 }
 .rls-button__content--classic {
-  --pvt-button-content-background: var(--pvt-classic-background);
+  --rlc-spinner-color: var(--pvt-classic-font-color);
   --pvt-button-content-font-color: var(--pvt-classic-font-color);
+  --pvt-button-content-background: var(--pvt-classic-background);
   --pvt-button-content-border: var(--pvt-classic-border);
   --pvt-button-ripple-background: var(--rls-theme-font-100);
 }
 .rls-button__content--flat {
+  --rlc-spinner-color: var(--pvt-flat-font-color);
   --pvt-button-content-font-color: var(--pvt-flat-font-color);
   --pvt-button-content-background: var(--pvt-flat-background);
   --pvt-button-content-border: var(--pvt-flat-border);
   --pvt-button-ripple-background: var(--rls-theme-font-100);
 }
 .rls-button__content--raised {
-  --pvt-button-content-background: var(--pvt-raised-background);
+  --rlc-spinner-color: var(--pvt-raised-font-color);
   --pvt-button-content-font-color: var(--pvt-raised-font-color);
+  --pvt-button-content-background: var(--pvt-raised-background);
   --pvt-button-content-border: var(--pvt-raised-border);
   --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
 .rls-button__content--gradient {
-  --pvt-button-content-background: var(--pvt-gradient-background);
+  --rlc-spinner-color: var(--pvt-gradiunt-font-color);
   --pvt-button-content-font-color: var(--pvt-gradient-font-color);
+  --pvt-button-content-background: var(--pvt-gradient-background);
   --pvt-button-content-border: var(--pvt-gradient-border);
   --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
@@ -2177,21 +2270,20 @@
 .rls-card {
   --rlc-divider-background: var(--rls-app-color-300);
   --pvt-background: var(--rls-app-color-050);
-  --pvt-border: var(--rls-app-border-1-300);
-  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-4));
+  --pvt-border: var(--rlc-card-border, var(--rls-app-border-1-300));
+  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-6));
   background: var(--pvt-background);
   border-radius: var(--rls-sizing-x4);
   box-shadow: var(--pvt-box-shadow);
 }
 .rls-card[rls-theme] {
-  --rlc-divider-background: var(--rls-theme-color-300);
+  --rlc-divider-background: var(--rls-theme-color-200);
   --pvt-background: var(--rls-theme-color-050);
-  --pvt-border: var(--rls-theme-border-1-300);
+  --pvt-border: var(--rlc-card-border, var(--rls-theme-border-1-200));
 }
 .rls-card--outline {
   border: var(--pvt-border);
   box-sizing: border-box;
-  box-shadow: none;
 }
 .rls-card__content {
   display: flex;

package/dist/cjs/index.js

@@ -1399,7 +1399,7 @@ function RlsBadge({ children, contrast, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-badge', { contrast });
     }, [contrast]);
-    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("span", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsBreadcrumbLabel({ label }) {
@@ -1424,11 +1424,15 @@ function RlsIcon({ value, skeleton }) {
     return (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 
-function RlsButton({ type, children, disabled, identifier, prefixIcon, suffixIcon, rlsTheme, onClick }) {
+function RlsSpinner() {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-spinner", children: [jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--1", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--2", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--3", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--4", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--5", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--6", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--7", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--8", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--9", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) })] }));
+}
+
+function RlsButton({ type, children, disabled, identifier, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-button__content', { type });
     }, [type]);
-    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__description", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
+    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [requesting && jsxRuntimeExports.jsx(RlsSpinner, {}), prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__description", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
 function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
@@ -1615,7 +1619,7 @@ function RlsInputText(props) {
 }
 
 function RlsLabel({ children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("label", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
+    return (jsxRuntimeExports.jsx("span", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsMessageIcon({ icon, children, rlsTheme }) {
@@ -3978,6 +3982,7 @@ exports.RlsSkeleton = RlsSkeleton;
 exports.RlsSkeletonText = RlsSkeletonText;
 exports.RlsSlider = RlsSlider;
 exports.RlsSnackbar = RlsSnackbar;
+exports.RlsSpinner = RlsSpinner;
 exports.RlsSwitch = RlsSwitch;
 exports.RlsSwitchControl = RlsSwitchControl;
 exports.RlsTabs = RlsTabs;