@rolster/react-components 18.26.6 → 18.26.8

package/dist/es/assets/{index-BWk6HbJL.css → index-Dlyq90g-.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);
@@ -374,10 +377,13 @@
   --pvt-button-content-border: var(--pvt-gradient-border);
   --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
-.rls-button__label {
+.rls-button__description {
+  display: flex;
+  width: auto;
+  align-items: center;
+  column-gap: var(--rlc-button-description-gap, var(--rls-sizing-x2));
   padding: 0rem var(--rls-sizing-x2);
   line-height: initial;
-  width: auto;
   font-size: var(--rls-button-font-size);
   letter-spacing: var(--rls-button-letter-spacing);
   font-weight: var(--rlc-button-font-weight, var(--rls-font-weight-medium));
@@ -386,7 +392,7 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.rls-button__label a {
+.rls-button__description a {
   text-decoration: none;
   color: inherit;
 }

package/dist/es/index.js

@@ -1397,7 +1397,7 @@ function RlsBadge({ children, contrast, rlsTheme }) {
     const className = 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 }) {
@@ -1426,7 +1426,7 @@ function RlsButton({ type, children, disabled, identifier, prefixIcon, suffixIco
     const className = 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__label", 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: [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 }) {
@@ -1613,7 +1613,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 }) {