@rolster/react-components 19.8.21 → 19.8.22

package/dist/esm/components/atoms/AreaText/AreaText.d.ts

@@ -7,6 +7,9 @@ export interface AreaTextProps extends RlsComponent {
     disabled?: boolean;
     formControl?: RolsterReactAreaTextControl<string>;
     identifier?: string;
+    maxLength?: number;
+    maxRows?: number;
+    minRows?: number;
     onBlur?: () => void;
     onEnter?: () => void;
     onFocus?: () => void;
@@ -16,9 +19,8 @@ export interface AreaTextProps extends RlsComponent {
     placeholder?: string;
     readOnly?: boolean;
     resize?: CSSProperties['resize'];
-    rows?: number;
     value?: string;
 }
-declare function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows, value }: AreaTextProps): import("react/jsx-runtime").JSX.Element;
+declare function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, value }: AreaTextProps): import("react/jsx-runtime").JSX.Element;
 export declare const RlsAreaText: import("react").MemoExoticComponent<typeof RlsAreaTextComponent>;
 export {};

package/dist/esm/components/atoms/AreaText/AreaText.js

@@ -1,20 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { renderClassStatus } from '../../../helpers/css';
-function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
+const AREA_TEXT_MAX_ROWS = 8;
+const AREA_TEXT_MIN_ROWS = 3;
+function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
     const valueInitial = String(formControl?.value ?? value ?? '');
+    const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
+    const rowsMax = Math.max(maxRows ?? AREA_TEXT_MAX_ROWS, rowsMin);
     const [valueArea, setValueArea] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
     const elementRef = useRef(null);
     const areaRef = formControl?.elementRef ?? elementRef;
     const changeIsInternal = useRef(false);
+    const heightIsManual = useRef(false);
+    const heightApplied = useRef(0);
     const refreshHeight = useCallback(() => {
         const element = areaRef.current;
-        if (element) {
-            element.style.height = 'auto';
-            element.style.height = `${element.scrollHeight}px`;
+        if (!element || heightIsManual.current) {
+            return;
         }
-    }, [areaRef]);
+        element.style.height = 'auto';
+        const { lineHeight, paddingBottom, paddingTop } = getComputedStyle(element);
+        const heightLine = parseFloat(lineHeight);
+        const heightContent = element.scrollHeight;
+        if (!heightLine) {
+            element.style.height = `${heightContent}px`;
+            heightApplied.current = heightContent;
+            return;
+        }
+        const heightPadding = parseFloat(paddingTop) + parseFloat(paddingBottom);
+        const heightMin = heightLine * rowsMin + heightPadding;
+        const heightMax = heightLine * rowsMax + heightPadding;
+        const height = Math.min(Math.max(heightContent, heightMin), heightMax);
+        element.style.height = `${height}px`;
+        element.style.overflowY = heightContent > heightMax ? 'auto' : 'hidden';
+        heightApplied.current = height;
+    }, [areaRef, rowsMax, rowsMin]);
     useEffect(() => {
         if (!changeIsInternal.current) {
             const nextValue = String(formControl?.value ?? value ?? '');
@@ -27,14 +48,31 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
     useEffect(() => {
         refreshHeight();
     }, [refreshHeight, valueArea]);
+    useEffect(() => {
+        const element = areaRef.current;
+        if (!element ||
+            resize === 'none' ||
+            typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            if (heightIsManual.current || !heightApplied.current) {
+                return;
+            }
+            if (Math.abs(element.offsetHeight - heightApplied.current) > 1) {
+                heightIsManual.current = true;
+                element.style.overflowY = 'auto';
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [areaRef, resize]);
     const onChangeArea = useCallback((event) => {
         const nextValue = event.target.value;
         changeIsInternal.current = true;
         onValue?.(nextValue);
         setValueArea(nextValue);
         formControl?.setValue(nextValue);
-        event.target.style.height = 'auto';
-        event.target.style.height = `${event.target.scrollHeight}px`;
     }, [formControl, onValue]);
     const onKeyDownArea = useCallback((event) => {
         onKeyDown?.(event);
@@ -55,12 +93,14 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
         setFocused(() => false);
         onBlur?.();
     }, [formControl, onBlur]);
+    const disabledArea = formControl?.disabled || disabled;
     const className = renderClassStatus('rls-area-text', {
-        disabled: formControl?.disabled || disabled,
+        disabled: disabledArea,
         focused: formControl?.focused ?? focused,
-        readonly: readOnly
+        readonly: readOnly,
+        resizable: resize !== 'none' && !disabledArea && !readOnly
     });
-    return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, rows: rows, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
+    return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
 }
 export const RlsAreaText = memo(RlsAreaTextComponent);
 //# sourceMappingURL=AreaText.js.map

package/dist/esm/components/atoms/AreaText/AreaText.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/atoms/Skeleton/Skeleton.d.ts

@@ -1,4 +1,8 @@
 import { RlsComponent } from '../../definitions';
-declare function RlsSkeletonComponent({ rlsTheme }: RlsComponent): import("react/jsx-runtime").JSX.Element;
+export type RlsSkeletonAnimation = 'shimmer' | 'pulse' | 'wave';
+export interface SkeletonProps extends RlsComponent {
+    animation?: RlsSkeletonAnimation;
+}
+declare function RlsSkeletonComponent({ animation, rlsTheme }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export declare const RlsSkeleton: import("react").MemoExoticComponent<typeof RlsSkeletonComponent>;
 export {};

package/dist/esm/components/atoms/Skeleton/Skeleton.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
-function RlsSkeletonComponent({ rlsTheme }) {
-    return _jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+import { renderClassStatus } from '../../../helpers/css';
+function RlsSkeletonComponent({ animation, rlsTheme }) {
+    const className = renderClassStatus('rls-skeleton', {
+        animation: animation !== 'shimmer' && animation
+    });
+    return _jsx("div", { className: className, "rls-theme": rlsTheme });
 }
 export const RlsSkeleton = memo(RlsSkeletonComponent);
 //# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/atoms/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,SAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAgB;IACtD,OAAO,cAAK,SAAS,EAAC,cAAc,eAAY,QAAQ,GAAQ,CAAC;AACnE,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,SAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAiB;IAClE,MAAM,SAAS,GAAG,iBAAiB,CAAC,cAAc,EAAE;QAClD,SAAS,EAAE,SAAS,KAAK,SAAS,IAAI,SAAS;KAChD,CAAC,CAAC;IAEH,OAAO,cAAK,SAAS,EAAE,SAAS,eAAa,QAAQ,GAAQ,CAAC;AAChE,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC"}

package/dist/esm/components/atoms/SkeletonText/SkeletonText.d.ts

@@ -1,7 +1,9 @@
 import { RlsComponent } from '../../definitions';
+import { RlsSkeletonAnimation } from '../Skeleton/Skeleton';
 interface SkeletonTextProps extends RlsComponent {
     active?: boolean;
+    animation?: RlsSkeletonAnimation;
 }
-declare function RlsSkeletonTextComponent({ active, children, rlsTheme }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+declare function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
 export declare const RlsSkeletonText: import("react").MemoExoticComponent<typeof RlsSkeletonTextComponent>;
 export {};

package/dist/esm/components/atoms/SkeletonText/SkeletonText.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { RlsSkeleton } from '../Skeleton/Skeleton';
-function RlsSkeletonTextComponent({ active, children, rlsTheme }) {
-    return (_jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (_jsx(RlsSkeleton, {})) : (_jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
+function RlsSkeletonTextComponent({ active, animation, children, rlsTheme }) {
+    return (_jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (_jsx(RlsSkeleton, { animation: animation })) : (_jsx("div", { className: "rls-skeleton-text__value", children: children })) }));
 }
 export const RlsSkeletonText = memo(RlsSkeletonTextComponent);
 //# sourceMappingURL=SkeletonText.js.map

package/dist/esm/components/atoms/SkeletonText/SkeletonText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMnD,SAAS,wBAAwB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,QAAQ,EACU;IAClB,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,eAAY,QAAQ,YACnD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,WAAW,KAAG,CAChB,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,CAC3D,GACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAwB,MAAM,sBAAsB,CAAC;AAOzE,SAAS,wBAAwB,CAAC,EAChC,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACU;IAClB,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,eAAY,QAAQ,YACnD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,GAAI,CACtC,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,CAC3D,GACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC"}

package/dist/esm/components/molecules/FieldArea/FieldArea.d.ts

@@ -1,6 +1,7 @@
 import { AreaTextProps, RolsterReactAreaTextControl } from '../../atoms/AreaText/AreaText';
 import { RlsComponent } from '../../definitions';
 interface FieldAreaProps extends AreaTextProps, RlsComponent {
+    counter?: boolean;
     formControl?: RolsterReactAreaTextControl<string>;
     msgErrorDisabled?: boolean;
 }

package/dist/esm/components/molecules/FieldArea/FieldArea.js

@@ -1,20 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { renderClassStatus } from '../../../helpers/css';
 import { RlsAreaText } from '../../atoms/AreaText/AreaText';
 import { RlsMessageFormError } from '../MessageFormError/MessageFormError';
 function RlsFieldAreaComponent(props) {
-    const { children, formControl, identifier, rlsTheme } = props;
+    const { children, formControl, identifier, maxLength, rlsTheme } = props;
+    const { onValue } = props;
     const disabled = useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
+    const valueSource = formControl?.value ?? props.value;
+    const [valueLength, setValueLength] = useState(() => {
+        return (valueSource ?? '').length;
+    });
+    useEffect(() => {
+        if (valueSource !== undefined) {
+            setValueLength(valueSource.length);
+        }
+    }, [valueSource]);
+    const onValueArea = useCallback((value) => {
+        setValueLength(value.length);
+        onValue?.(value);
+    }, [onValue]);
     const className = renderClassStatus('rls-field-box', {
         disabled,
         error: formControl?.wrong,
         focused: formControl?.focused && !disabled,
         readonly: props.readOnly
     }, 'rls-field-area');
-    return (_jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsx("div", { className: "rls-field-box__body", children: _jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+    return (_jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && _jsx("span", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsx("div", { className: "rls-field-box__body", children: _jsx(RlsAreaText, { ...props, onValue: onValueArea }) }) }), props.counter && (_jsx("span", { className: "rls-field-box__helper rls-field-area__counter", children: maxLength ? `${valueLength} / ${maxLength}` : valueLength })), !props.msgErrorDisabled && (_jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 export const RlsFieldArea = memo(RlsFieldAreaComponent);
 //# sourceMappingURL=FieldArea.js.map

package/dist/esm/components/molecules/FieldArea/FieldArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldArea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FieldArea/FieldArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAEL,WAAW,EAEZ,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAO3E,SAAS,qBAAqB,CAAC,KAAqB;IAClD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE9D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,EAAE,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;IACjD,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,SAAS,GAAG,iBAAiB,CACjC,eAAe,EACf;QACE,QAAQ;QACR,KAAK,EAAE,WAAW,EAAE,KAAK;QACzB,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,QAAQ;QAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB,EACD,gBAAgB,CACjB,CAAC;IAEF,OAAO,CACL,eAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,eAAa,QAAQ,aAC3D,QAAQ,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EAErE,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,WAAW,OAAK,KAAK,GAAI,GACtB,GACF,EAEL,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAC1B,KAAC,mBAAmB,IAClB,SAAS,EAAC,sBAAsB,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"FieldArea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/FieldArea/FieldArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAEL,WAAW,EAEZ,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAQ3E,SAAS,qBAAqB,CAAC,KAAqB;IAClD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE1B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,WAAW,EAAE,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;IACjD,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC;IAEtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAClD,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAa,EAAE,EAAE;QAChB,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC7B,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,SAAS,GAAG,iBAAiB,CACjC,eAAe,EACf;QACE,QAAQ;QACR,KAAK,EAAE,WAAW,EAAE,KAAK;QACzB,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,QAAQ;QAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB,EACD,gBAAgB,CACjB,CAAC;IAEF,OAAO,CACL,eAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,eAAa,QAAQ,aAC3D,QAAQ,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EAErE,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,WAAW,OAAK,KAAK,EAAE,OAAO,EAAE,WAAW,GAAI,GAC5C,GACF,EAEL,KAAK,CAAC,OAAO,IAAI,CAChB,eAAM,SAAS,EAAC,+CAA+C,YAC5D,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,GACrD,CACR,EAEA,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAC1B,KAAC,mBAAmB,IAClB,SAAS,EAAC,sBAAsB,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/react-components",
-  "version": "19.8.21",
+  "version": "19.8.22",
   "type": "module",
   "description": "Package containing UI components for React Project.",
   "license": "MIT",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@rolster/rollup": "^2.2.0",
-    "@rolster/styles-foundations": "^3.5.22",
+    "@rolster/styles-foundations": "^3.5.23",
     "@rolster/types": "^1.1.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",