@rolster/react-components 19.1.1 → 19.1.2

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

@@ -1091,10 +1091,7 @@
 
 .rls-radiobutton {
   --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
-  --pvt-component-dimension: var(
-    --rlc-radiobutton-children-dimension,
-    var(--rls-sizing-x6)
-  );
+  --pvt-component-dimension: calc(var(--pvt-dimension) / 2);
   --pvt-component-background: transparent;
   position: relative;
   display: flex;
@@ -1225,6 +1222,7 @@
   --pvt-content-font-color: var(--rls-app-color-500);
   position: relative;
   display: flex;
+  align-items: var(--rlc-alert-align-items, flex-start);
   column-gap: var(--rls-sizing-x6);
   padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
   box-sizing: border-box;
@@ -1500,6 +1498,8 @@
 } /*# sourceMappingURL=FieldText.css.map */
 
 .rls-label-checkbox {
+  --pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
+  --rlc-checkbox-dimension: var(--pvt-dimension);
   --rlc-checkbox-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
@@ -1525,9 +1525,11 @@
   --pvt-text-height: auto;
 }
 .rls-label-checkbox__component {
-  width: auto;
+  width: var(--pvt-dimension);
+  flex: 0 0 auto;
 }
 .rls-label-checkbox__text {
+  flex: 1 1 auto;
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1535,6 +1537,7 @@
   color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
+  overflow: hidden;
 }
 .rls-label-checkbox__text > p {
   height: initial;
@@ -1544,6 +1547,11 @@
 } /*# sourceMappingURL=LabelCheckBox.css.map */
 
 .rls-label-radiobutton {
+  --pvt-dimension: var(
+    --rlc-label-radiobutton-dimension,
+    var(--rls-sizing-x12)
+  );
+  --rlc-radiobutton-dimension: var(--pvt-dimension);
   --rlc-radiobutton-cursor: pointer;
   --rlc-ballot-padding: 0rem;
   --pvt-text-opacity: 1;
@@ -1569,9 +1577,11 @@
   --pvt-text-height: auto;
 }
 .rls-label-radiobutton__component {
-  width: auto;
+  width: var(--pvt-dimension);
+  flex: 0 0 auto;
 }
 .rls-label-radiobutton__text {
+  flex: 1 1 auto;
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1579,6 +1589,7 @@
   color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
+  overflow: hidden;
 }
 .rls-label-radiobutton__text > p {
   height: initial;
@@ -1613,9 +1624,11 @@
   --pvt-text-height: auto;
 }
 .rls-label-switch__component {
-  max-width: 20rem;
+  width: 20rem;
+  flex: 0 0 auto;
 }
 .rls-label-switch__text {
+  flex: 1 1 auto;
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
@@ -1623,6 +1636,7 @@
   color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
   user-select: none;
   opacity: var(--pvt-text-opacity);
+  overflow: hidden;
 }
 .rls-label-switch__text > p {
   height: initial;

package/dist/cjs/index.js

@@ -566,21 +566,21 @@ function RlsSkeleton({ rlsTheme }) {
 }
 
 function RlsImage({ src, rlsTheme }) {
-    const [isComplet, setIsComplet] = require$$0.useState(false);
+    const [srcIsComplet, setSrcIsComplet] = require$$0.useState(false);
     const refSrc = require$$0.useRef(src);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-image', { complet: isComplet });
-    }, [isComplet]);
+        return renderClassStatus('rls-image', { complet: srcIsComplet });
+    }, [srcIsComplet]);
     require$$0.useEffect(() => {
         if (refSrc.current !== src) {
-            setIsComplet(false);
+            setSrcIsComplet(false);
             refSrc.current = src;
         }
     }, [src]);
     const onLoad = require$$0.useCallback(() => {
-        setIsComplet(true);
+        setSrcIsComplet(true);
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!isComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { src: src, onLoad: onLoad })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!srcIsComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { src: src, onLoad: onLoad })] }));
 }
 
 function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {