@rolster/react-components 1.5.5 → 1.5.7

package/dist/cjs/assets/{lib.cjs-49b3766e.css → lib.cjs-c052832f.css}

@@ -187,6 +187,7 @@
 .rls-button__content {
   display: flex;
   justify-content: center;
+  overflow: hidden;
   line-height: var(--sizing-40);
   height: var(--sizing-40);
   padding: var(--rls-button-content-padding);
@@ -244,10 +245,13 @@
   line-height: initial;
   width: auto;
   margin: auto 0rem;
-  font-size: 0.825rem;
+  font-size: var(--button-font-size);
   font-weight: var(--font-weight-bold);
-  letter-spacing: 0.825px;
+  letter-spacing: var(--button-letter-spacing);
   text-transform: var(--rls-button-label-text-transform);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .rls-button__label a {
   text-decoration: none;
@@ -280,7 +284,7 @@
   user-select: none;
   cursor: default;
   background: transparent;
-  color: var(--rls-buttonaction-color);
+  color: var(--rls-action-color);
 }
 .rls-button-action::before {
   position: absolute;
@@ -292,7 +296,7 @@
   visibility: hidden;
   border-radius: 50%;
   transform: scale(0);
-  background: var(--rls-buttonaction-ripple-color);
+  background: var(--rls-action-ripple-color);
   padding-top: calc(120% - var(--sizing-8));
   padding-left: calc(120% - var(--sizing-8));
   margin-top: calc(-60% + var(--sizing-4));
@@ -310,12 +314,12 @@
   top: 50%;
   left: 50%;
   opacity: 0.24;
-  width: var(--rls-buttonaction-ripple-dimension);
-  height: var(--rls-buttonaction-ripple-dimension);
-  margin-top: var(--rls-buttonaction-ripple-position);
-  margin-left: var(--rls-buttonaction-ripple-position);
+  width: var(--rls-action-ripple-dimension);
+  height: var(--rls-action-ripple-dimension);
+  margin-top: var(--rls-action-ripple-position);
+  margin-left: var(--rls-action-ripple-position);
   border-radius: 50%;
-  background: var(--rls-buttonaction-ripple-color);
+  background: var(--rls-action-ripple-color);
   transform: scale(0);
   transition: transform 160ms 0ms var(--sharp-curve);
 }
@@ -643,6 +647,7 @@
   position: relative;
   float: left;
   display: flex;
+  align-items: center;
   padding: var(--sizing-8) var(--sizing-12);
   box-sizing: border-box;
   border: var(--border-1-theme-300);
@@ -1240,8 +1245,8 @@
 
 .rls-password-field {
   --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
-  --rls-buttonaction-ripple-dimension: var(--sizing-32);
-  --rls-buttonaction-ripple-position: -1rem;
+  --rls-action-ripple-dimension: var(--sizing-32);
+  --rls-action-ripple-position: -1rem;
   position: relative;
   float: left;
   width: 100%;

package/dist/cjs/lib.cjs.js

@@ -1398,7 +1398,7 @@ function RlsIcon({ value, skeleton }) {
 }
 
 function RlsButton({ type, children, disabled, prefixIcon, suffixIcon, rlsTheme, onClick }) {
-    return (jsxRuntimeExports.jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && (jsxRuntimeExports.jsx("div", { className: "rls-button__label truncate", children: children })), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
+    return (jsxRuntimeExports.jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && (jsxRuntimeExports.jsx("div", { className: "rls-button__label", children: children })), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
 function RlsButtonAction({ icon, disabled, tooltip, onClick }) {