@tap-payments/os-micro-frontend-shared 0.1.134 → 0.1.135-test.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/BackgroundAnimation/BackgroundAnimation.js

@@ -11,6 +11,34 @@ const Wrapper = styled(Box)(({ theme }) => ({
     width: '100%',
     height: '100%',
     backgroundColor: theme.palette.grey[100],
+    // '.blob_right': {
+    // 	animation: 'right 35s ease infinite alternate'
+    // },
+    // '.blob_left': {
+    // 	animation: 'left 35s ease infinite alternate'
+    // },
+    // '@keyframes right': {
+    // 	'0%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	},
+    // 	'50%': {
+    // 		transform: 'translate(-50%, -200%) scale(1.5)'
+    // 	},
+    // 	'100%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	}
+    // },
+    // '@keyframes left': {
+    // 	'0%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	},
+    // 	'50%': {
+    // 		transform: 'translate(50%, 100%) scale(1.5)'
+    // 	},
+    // 	'100%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	}
+    // }
 }));
 function BackgroundAnimation({ gradient = 'purpleBlue', blobHeight = '30vw', blobWidth = '30vw' }) {
     return (_jsxs(Wrapper, Object.assign({ "aria-label": "Background-Animation-section", className: "blobContainer", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, { children: [_jsx(Blob, { "aria-label": "Background-Animation-Blob-right", gradient: gradient, width: blobWidth, height: blobHeight, className: "blob_right", style: {

package/build/components/BackgroundAnimation/Blob/Blob.js

@@ -26,6 +26,8 @@ const Wrapper = styled(Box)(() => ({
 function Blob(_a) {
     var { gradient = 'blueGreen', height = 500, width = 500, style } = _a, props = __rest(_a, ["gradient", "height", "width", "style"]);
     const theme = useTheme();
+    // TODO: need to add direction of gradient translate.
+    // example Blob one will have a translateX of 100% and Blob two will have a translateX of -100%.
     return (_jsx(Wrapper, Object.assign({}, props, { className: props.className || '', sx: Object.assign({ backgroundImage: theme.palette.background.gradient[gradient], width,
             height }, style) })));
 }

package/build/components/Chip/style.js

@@ -49,6 +49,7 @@ export const SourcesContainer = styled(motion.span)(({ sourcesCount }) => ({
     backgroundColor: 'transparent',
     borderRadius: '16px',
 }));
+// eslint-disable-next-line react-refresh/only-export-components
 export const defaultGetSourceAnimation = (params) => {
     const { index, xDelta = 39, shadow, itemsCount = 0, expandDirection = 'RIGHT' } = params;
     const startDisplacement = (itemsCount - 1) * 6;

package/build/components/ColorPicker/HexaFields.js

@@ -13,6 +13,7 @@ const HexaFields = ({ value, onChange }) => {
     }, [value]);
     const [hexInput, setHexInput] = useState(colorAsHex);
     const alphaPercent = Math.round(value.a * 100);
+    // Sync hexInput whenever `value` changes externally
     useEffect(() => {
         const newHex = Color.rgb(value.r, value.g, value.b).hex().replace('#', '');
         setHexInput(newHex);
@@ -26,6 +27,7 @@ const HexaFields = ({ value, onChange }) => {
     const handleHexBlur = () => {
         let formattedValue = hexInput;
         if (formattedValue.length === 3) {
+            // Expand shorthand like FFF -> FFFFFF
             formattedValue = formattedValue
                 .split('')
                 .map((ch) => ch + ch)
@@ -43,10 +45,12 @@ const HexaFields = ({ value, onChange }) => {
                 });
             }
             catch (_a) {
+                // invalid hex -> revert to current value
                 setHexInput(colorAsHex);
             }
         }
         else {
+            // revert to current value if incomplete
             setHexInput(colorAsHex);
         }
     };

package/build/components/ColorPicker/style.js

@@ -115,7 +115,7 @@ export const StyledInput = styled(TextField)(({ theme }) => ({
                 margin: 0,
             },
             '&[type=number]': {
-                MozAppearance: 'textfield',
+                MozAppearance: 'textfield', // Firefox
             },
         },
         '& .MuiOutlinedInput-notchedOutline': {

package/build/components/Dialog/style.js

@@ -28,6 +28,7 @@ export const DialogContent = styled(Box)(({ theme }) => ({
 export const DialogHeader = styled(Box)(({ theme }) => ({
     minHeight: 95,
     background: theme.palette.grey[400],
+    // backdropFilter: 'blur(4px)',
     paddingInline: '24px',
     paddingTop: '23px',
     paddingBottom: '23px',

package/build/components/Dropdown2/style.js

@@ -12,11 +12,13 @@ export const Info = styled(Box)(() => ({
 export const Label = styled(Box)(() => ({
     fontWeight: 600,
     fontSize: '8px',
+    // lineHeight: '10.93px',
     color: '#8D8D94',
 }));
 export const Value = styled(Box)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '11px',
     lineHeight: 1.1,
+    // lineHeight: '15.03px',
     color: theme.palette.text.primary,
 }));

package/build/components/HeatMap/constant.js

@@ -1 +1 @@
-export const COLOR_OPACITY_DEGREE = [0.06, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
+export const COLOR_OPACITY_DEGREE = [0.06, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]; // 0 - 10 so we have a fixed color degrees as per the design

package/build/components/InputBase/AmountInputBase/CurrencyList/style.js

@@ -10,6 +10,9 @@ export const CurrencyButton = styled('button')(({ theme }) => ({
     cursor: 'pointer',
 }));
 export const CurrenciesWrapper = styled(Popper)(({ theme }) => ({
+    // position: 'absolute',
+    // top: 30,
+    // left: 0,
     zIndex: 99,
     backgroundColor: theme.palette.common.white,
     padding: '4px 8px',

package/build/components/InputBase/PhoneInputBase/CountriesList/CountriesList.js

@@ -51,7 +51,7 @@ function CountriesList({ isLoading, countries, value: countryValue, onCountryCha
                     border: 'none',
                     height: 34,
                     paddingInlineStart: '8px',
-                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
+                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown, sx: { zIndex: 9999 } }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
                                 const isSelected = (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryId) === country.countryId;
                                 return (_jsxs(CountryStyled, Object.assign({ onClick: () => {
                                         handleOnCountryChange(country);

package/build/components/InputBase/PhoneInputBase/CountriesList/style.js

@@ -12,6 +12,9 @@ export const CountryButton = styled('button')(({ theme, disabled }) => ({
     opacity: disabled ? 0.5 : 1,
 }));
 export const CountriesWrapper = styled(Popper)(({ theme }) => ({
+    // position: 'absolute',
+    // top: 30,
+    // left: 0,
     zIndex: 9999,
     backgroundColor: theme.palette.common.white,
     padding: '4px 8px',

package/build/components/InputBase/SelectBase/SelectBase.js

@@ -18,6 +18,7 @@ import { FormControlStyles, StyledErrorMessage, MuiSelect, Wrapper } from './sty
 function SelectBase(_a, ref) {
     var _b;
     var { required, hasError, label, value, helperText, onChange, options, isOptionEqualToValue, renderOption, getOptionValue, isLoading, children, getOptionLabel } = _a, props = __rest(_a, ["required", "hasError", "label", "value", "helperText", "onChange", "options", "isOptionEqualToValue", "renderOption", "getOptionValue", "isLoading", "children", "getOptionLabel"]);
+    // eslint-disable-next-line
     const handleChange = (option) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(option);
     };

package/build/components/InputBase/SelectBase/SelectBaseMultiple.js

@@ -18,13 +18,16 @@ import { FormControlStyles, StyledErrorMessage, MuiSelect, Wrapper } from './sty
 function SelectBaseMultiple(_a, ref) {
     var _b;
     var { required, hasError, label, value, helperText, onChange, options, isOptionEqualToValue, renderOption, getOptionValue, isLoading, children, getOptionLabel } = _a, props = __rest(_a, ["required", "hasError", "label", "value", "helperText", "onChange", "options", "isOptionEqualToValue", "renderOption", "getOptionValue", "isLoading", "children", "getOptionLabel"]);
+    // eslint-disable-next-line
     const handleChange = (option) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(option);
     };
     const getMultipleValues = () => {
+        // eslint-disable-next-line
         return getOptionValue ? value === null || value === void 0 ? void 0 : value.map(getOptionValue) : value === null || value === void 0 ? void 0 : value.map((v) => v === null || v === void 0 ? void 0 : v.id);
     };
     const selectedOptions = useMemo(() => options === null || options === void 0 ? void 0 : options.filter((option) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return value === null || value === void 0 ? void 0 : value.some((v) => {
             return isOptionEqualToValue ? isOptionEqualToValue(option, v) : option.id === (v === null || v === void 0 ? void 0 : v.id);
         });

package/build/components/InputBase/SelectBase/style.js

@@ -43,10 +43,10 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     },
     '& .MuiOutlinedInput-root': {
         '& fieldset': {
-            borderColor: 'rgba(0, 0, 0, 0.23)',
+            borderColor: 'rgba(0, 0, 0, 0.23)', // default
         },
         '&.Mui-focused fieldset': {
-            border: '2px solid red',
+            border: '2px solid red', // focus
         },
     },
     minWidth: 52,
@@ -56,6 +56,7 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     '& .MuiFormLabel-asterisk': {
         color: 'red',
     },
+    //  style form label
     '& .MuiFormLabel-root': {
         fontSize: '10px',
         fontStyle: 'normal',

package/build/components/InputNumber/InputNumber.js

@@ -25,6 +25,7 @@ function InputNumber(_a, ref) {
             onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
             return;
         }
+        // eslint-disable-next-line
         if (isSafari && isNaN(evt.key) && evt.key !== 'Backspace') {
             evt.preventDefault();
         }
@@ -32,6 +33,7 @@ function InputNumber(_a, ref) {
     return (_jsx(Box, Object.assign({ sx: { flexGrow: 1 }, onClick: (e) => {
             e.stopPropagation();
         } }, { children: _jsx(InputStyled, Object.assign({}, props, { ref: ref, value: props.value || '', placeholder: props.placeholder, hideArrows: true, isError: isError, disableUnderline: true, inputProps: Object.assign(Object.assign({}, inputProps), { type: 'number' }), onKeyDown: handleKeyDown, onWheel: (e) => {
+                // eslint-disable-next-line
                 e.target instanceof HTMLElement && e.target.blur();
             } })) })));
 }

package/build/components/Inputs/Input/style.js

@@ -23,7 +23,9 @@ export const StyledInput = styled(TextField, {
         border: '1px solid green',
     }, '&.Mui-focused fieldset': {
         border: '1px solid blue',
-    }, border: '1px solid #F2F2F2', borderRadius: '4px', '& .MuiInputBase-input': {
+    }, border: '1px solid #F2F2F2', borderRadius: '4px', 
+    // input style
+    '& .MuiInputBase-input': {
         margin: '0px !important',
         padding: '0px !important',
         color: '#20232B !important',
@@ -31,7 +33,9 @@ export const StyledInput = styled(TextField, {
         fontStyle: 'normal !important',
         fontWeight: '500 !important',
         lineHeight: '130%  !important',
-    }, '& .MuiFormLabel-root': {
+    }, 
+    //  style form label
+    '& .MuiFormLabel-root': {
         fontSize: '10px',
         fontStyle: 'normal',
         fontWeight: 500,

package/build/components/Inputs/Select/Select.js

@@ -20,6 +20,7 @@ export default function Select(props) {
                             '& .MuiFormLabel-asterisk': {
                                 color: 'red',
                             },
+                            //  style form label
                             '& .MuiFormLabel-root': {
                                 fontSize: '10px',
                                 fontStyle: 'normal',

package/build/components/Inputs/Select/style.js

@@ -5,6 +5,7 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     color: theme.palette.common.black,
     borderRadius: '4px',
     boxShadow: '0px 0px 6px 0px rgba(0, 0, 0, 0.11);',
+    // padding: '4px 8px',
     height: '32px',
     border: 'none',
     outline: 'none',
@@ -14,10 +15,10 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     },
     '& .MuiOutlinedInput-root': {
         '& fieldset': {
-            borderColor: 'rgba(0, 0, 0, 0.23)',
+            borderColor: 'rgba(0, 0, 0, 0.23)', // default
         },
         '&.Mui-focused fieldset': {
-            border: '2px solid red',
+            border: '2px solid red', // focus
         },
     },
 }));

package/build/components/JSONViewer/JSONViewer.js

@@ -201,7 +201,11 @@ export default function JSONViewer({ index, json, requestJson = {}, isWindowMini
                                                             if (!keyName) {
                                                                 return _jsx("span", {});
                                                             }
-                                                        } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
+                                                        } }), _jsx(JsonView.Copied
+                                                    // @ts-expect-error Type is not supported
+                                                    , { 
+                                                        // @ts-expect-error Type is not supported
+                                                        render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
                                                             if (!keyName) {
                                                                 return _jsx("span", {});
                                                             }
@@ -253,7 +257,11 @@ export default function JSONViewer({ index, json, requestJson = {}, isWindowMini
                                                         if (!keyName) {
                                                             return _jsx("span", {});
                                                         }
-                                                    } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
+                                                    } }), _jsx(JsonView.Copied
+                                                // @ts-expect-error Type is not supported
+                                                , { 
+                                                    // @ts-expect-error Type is not supported
+                                                    render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
                                                         if (!keyName) {
                                                             return _jsx("span", {});
                                                         }

package/build/components/JSONViewer/context/Provider.js

@@ -11,9 +11,11 @@ export const JsonViewerDialogContextProvider = ({ children }) => {
             alert('Maximum allowed active Json Viewer is 7 per table.');
             return;
         }
+        // Prevent duplicate JsonViewer that's currently open
         if (jsonViewerList.some((item) => item.json.id === jsonViewer.json.id)) {
             return;
         }
+        // Create a copy to avoid mutating the original object
         const jsonCopy = structuredClone(jsonViewer.json);
         const requestData = jsonCopy.request_body;
         const jsonViewerPreservedRequest = {

package/build/components/LeftPeekRightExpandingChip/LeftPeekRightExpandingChip.d.ts

@@ -1,2 +1,12 @@
 import { type LeftPeekRightExpandingChipProps } from './type';
+/**
+ * LeftPeekRightExpandingChip
+ *
+ * Renders the last item of `icons` in a main chip and the remaining items as a vertical,
+ * left‑aligned peek stack (collapsed to 24px). Hovering the main chip reveals and expands
+ * the peek chips to the right and shifts the main chip accordingly. The top‑most peek chip
+ * stays anchored while the rest slide out to the right preserving the original order.
+ * Uses Framer Motion for smooth enter/leave and x‑translation, with z-index control via `expandedZIndex`.
+ * Peek chip content is rendered only on hover to minimize layout work.
+ */
 export default function LeftPeekRightExpandingChip({ icons, expandedZIndex, sx }: LeftPeekRightExpandingChipProps): import("react/jsx-runtime").JSX.Element;

package/build/components/LeftPeekRightExpandingChip/LeftPeekRightExpandingChip.js

@@ -3,15 +3,28 @@ import Box from '@mui/material/Box';
 import { AnimatePresence } from 'framer-motion';
 import { Root, Container, PeekStack, PeekChip, MainChip, tableCellSx } from './style';
 import { useLeftPeekRightExpandingChip } from './useLeftPeekRightExpandingChip';
+/**
+ * LeftPeekRightExpandingChip
+ *
+ * Renders the last item of `icons` in a main chip and the remaining items as a vertical,
+ * left‑aligned peek stack (collapsed to 24px). Hovering the main chip reveals and expands
+ * the peek chips to the right and shifts the main chip accordingly. The top‑most peek chip
+ * stays anchored while the rest slide out to the right preserving the original order.
+ * Uses Framer Motion for smooth enter/leave and x‑translation, with z-index control via `expandedZIndex`.
+ * Peek chip content is rendered only on hover to minimize layout work.
+ */
 export default function LeftPeekRightExpandingChip({ icons = [], expandedZIndex = 1000, sx }) {
     const { handleMouseEnter, handleRootMouseLeave, rootRef, mainChipRef, isHovering, peekItems, mainShiftX, mainIcon } = useLeftPeekRightExpandingChip({ icons });
-    return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, tableCellSx), sx), "data-testid": "LeftPeekRightExpandingChipBox" }, { children: _jsx(Root, Object.assign({ ref: rootRef, onMouseLeave: handleRootMouseLeave, onMouseEnter: handleMouseEnter }, { children: _jsxs(Container, Object.assign({ "data-testid": "Container", initial: false }, { children: [_jsx(PeekStack, Object.assign({ "data-testid": "PeekStack", onMouseEnter: handleMouseEnter, onMouseLeave: handleRootMouseLeave, style: { pointerEvents: isHovering ? 'auto' : 'none' } }, { children: _jsx(AnimatePresence, Object.assign({ initial: false }, { children: peekItems.map(({ key, rIdx, offX, hoverX, zIndex, refCb, content }) => (_jsx(PeekChip, Object.assign({ "data-testid": `LeftPeekChip-${rIdx}`, ref: refCb, initial: { opacity: 0, scale: 0.95, x: offX, y: 0 }, animate: { opacity: 1, scale: 1, x: isHovering ? hoverX : offX, y: 0 }, exit: { opacity: 0, scale: 0.95, x: offX, y: 0 }, transition: { duration: 0.18, ease: 'easeOut' }, style: {
+    return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, tableCellSx), sx), "data-testid": "LeftPeekRightExpandingChipBox" }, { children: _jsx(Root, Object.assign({ ref: rootRef, onMouseLeave: handleRootMouseLeave, onMouseEnter: handleMouseEnter }, { children: _jsxs(Container, Object.assign({ "data-testid": "Container", initial: false }, { children: [_jsx(PeekStack, Object.assign({ "data-testid": "PeekStack", 
+                        // Allow the expanded chips area to keep hover active
+                        onMouseEnter: handleMouseEnter, onMouseLeave: handleRootMouseLeave, style: { pointerEvents: isHovering ? 'auto' : 'none' } }, { children: _jsx(AnimatePresence, Object.assign({ initial: false }, { children: peekItems.map(({ key, rIdx, offX, hoverX, zIndex, refCb, content }) => (_jsx(PeekChip, Object.assign({ "data-testid": `LeftPeekChip-${rIdx}`, ref: refCb, initial: { opacity: 0, scale: 0.95, x: offX, y: 0 }, animate: { opacity: 1, scale: 1, x: isHovering ? hoverX : offX, y: 0 }, exit: { opacity: 0, scale: 0.95, x: offX, y: 0 }, transition: { duration: 0.18, ease: 'easeOut' }, style: {
                                     zIndex,
                                     width: isHovering ? 'auto' : 24,
                                     minWidth: 24,
                                     padding: isHovering ? '0 6px' : 0,
                                     whiteSpace: 'nowrap',
                                     overflow: isHovering ? 'visible' : 'hidden',
+                                    // Make the expanded chip area interactive to preserve hover
                                     pointerEvents: isHovering ? 'auto' : 'none',
                                 } }, { children: isHovering && _jsx(_Fragment, { children: content }) }), key))) })) })), _jsx(MainChip, Object.assign({ "data-testid": "MainChip", ref: mainChipRef, style: { zIndex: expandedZIndex + 10, padding: '0 6px' }, initial: false, animate: { x: isHovering ? mainShiftX : 0 }, transition: { duration: 0.18, ease: 'easeOut' } }, { children: mainIcon }))] })) })) })));
 }

package/build/components/LeftPeekRightExpandingChip/style.js

@@ -24,6 +24,7 @@ export const PeekStack = styled('div')(() => ({
 export const PeekChip = styled(motion.div)(({ theme }) => ({
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 12,
+    // width controlled in component to switch between 24 and auto
     height: 24,
     display: 'flex',
     alignItems: 'center',

package/build/components/LeftPeekRightExpandingChip/useLeftPeekRightExpandingChip.js

@@ -2,19 +2,30 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CHIP_GAP, DEFAULT_CHIP_MIN_WIDTH } from './style';
 export function useLeftPeekRightExpandingChip({ icons }) {
     var _a;
+    // ======================
+    // State
+    // ======================
     const [isHovering, setIsHovering] = useState(false);
     const [rightWidths, setRightWidths] = useState([]);
+    // ======================
+    // Refs (DOM and timers)
+    // ======================
     const rootRef = useRef(null);
     const mainChipRef = useRef(null);
     const rightChipRefs = useRef([]);
     const hoverTimeoutRef = useRef(null);
+    // Prepare icons: last is MainChip, the rest are peeks
     const safeIcons = icons !== null && icons !== void 0 ? icons : [];
     const lastIndex = Math.max(0, ((_a = safeIcons.length) !== null && _a !== void 0 ? _a : 1) - 1);
     const mainIcon = safeIcons[lastIndex];
     const peekIcons = safeIcons.slice(0, lastIndex);
+    // ======================
+    // Computed values
+    // ======================
     const { peekItems, mainShiftX, guardLeft, guardWidth } = useMemo(() => {
         const n = peekIcons.length;
         const measured = rightWidths.length === n && rightWidths.every((w) => w > 0);
+        // Anchor stacked offset for all peeks
         const anchorOffXAll = -6 * n;
         const totalPeekWidth = measured ? rightWidths.reduce((acc, w) => acc + w, 0) : n * DEFAULT_CHIP_MIN_WIDTH;
         const gapsTotal = Math.max(0, n - 1) * CHIP_GAP;
@@ -42,10 +53,14 @@ export function useLeftPeekRightExpandingChip({ icons }) {
                 content: peekIcons[origIdx],
             });
         }
+        // Guard box covers the full horizontal span of the expanded peeks
         const guardLeft = anchorOffXEach;
         const guardWidth = totalPeekWidth + gapsTotal;
         return { peekItems: items, mainShiftX: mainShift, guardLeft, guardWidth };
     }, [peekIcons, rightWidths, isHovering]);
+    // ======================
+    // Callbacks
+    // ======================
     const clearHoverTimeout = useCallback(() => {
         if (hoverTimeoutRef.current) {
             clearTimeout(hoverTimeoutRef.current);
@@ -53,8 +68,8 @@ export function useLeftPeekRightExpandingChip({ icons }) {
         }
     }, []);
     const measureRightWidths = useCallback(() => {
-        const TARGET_PADDING_X = 12;
-        const BORDER_X = 2;
+        const TARGET_PADDING_X = 12; /* 6px each side when expanded */
+        const BORDER_X = 2; /* 1px each side */
         const next = peekIcons.map((_, origIdx) => {
             const el = rightChipRefs.current[origIdx];
             if (!el)
@@ -77,12 +92,18 @@ export function useLeftPeekRightExpandingChip({ icons }) {
         clearHoverTimeout();
         hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
     }, [clearHoverTimeout]);
+    // ======================
+    // Effects
+    // ======================
     useEffect(() => {
         return () => clearHoverTimeout();
     }, [clearHoverTimeout]);
+    // Measure initially and when count changes
     useEffect(() => {
         measureRightWidths();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [peekIcons.length]);
+    // Re-measure shortly after hover begins to capture dynamic size
     useEffect(() => {
         if (!isHovering)
             return;
@@ -91,15 +112,22 @@ export function useLeftPeekRightExpandingChip({ icons }) {
         });
         return () => window.cancelAnimationFrame(id);
     }, [isHovering, measureRightWidths]);
+    // ======================
+    // Public API
+    // ======================
     return {
+        // hover state/handlers
         isHovering,
         handleMouseEnter,
         handleRootMouseLeave,
+        // refs
         rootRef,
         mainChipRef,
+        // render data
         peekItems,
         mainShiftX,
         mainIcon,
+        // guard for hover persistence over gaps
         guardLeft,
         guardWidth,
     };

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -13,6 +13,7 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
     const [dropdownWidth, setDropdownWidth] = useState(0);
     const [isHovered, setIsHovered] = useState(false);
     const isOpen = Boolean(anchorEl);
+    // Update internal state when props change (but only when dropdown is closed)
     useEffect(() => {
         if (!isOpen) {
             setInternalSelectedValues(selectedValues);
@@ -27,10 +28,12 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
             return;
         }
         setAnchorEl(buttonRef.current);
+        // Set initial dropdown width to prevent shrinking
         const buttonWidth = ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 200;
         setDropdownWidth(Math.max(buttonWidth, 200));
     };
     const handleClose = () => {
+        // To prevent unnecessary updates, we check if the selection has actually changed.
         const hasChanged = JSON.stringify([...internalSelectedValues].sort()) !== JSON.stringify([...selectedValues].sort());
         if (hasChanged) {
             onSelectionChange(internalSelectedValues);

package/build/components/NestedDropdown/Dropdown.js

@@ -38,11 +38,14 @@ function Dropdown(_a) {
                 return i;
             });
             const newList = updateList(list);
+            // update all children
             setList(newList);
             if (updatedList)
                 updatedList(newList);
+            // notify parent with the new children
             if (onChildrenChange)
                 onChildrenChange(newList);
+            // notify parent with selected / unselected children
             if (onSelect)
                 onSelect(changedChildren);
         }

package/build/components/RFH/Inputs/FormInput/FormInput.js

@@ -19,6 +19,7 @@ function FormInput(_a) {
     return (_jsx(Controller, { name: name, control: control, defaultValue: props.defaultValue, render: ({ field, fieldState }) => {
             var _a;
             return (_jsx(InputBase, Object.assign({}, props, field, { hasError: !!fieldState.error, helperText: helperText !== null && helperText !== void 0 ? helperText : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, hideArrows: hideArrows, onWheel: (e) => {
+                    // eslint-disable-next-line
                     e.target instanceof HTMLElement && e.target.blur();
                 } })));
         } }));

package/build/components/RFH/Inputs/MultiSelect/MultiSelect.js

@@ -23,6 +23,7 @@ export default function MultiSelect(_a) {
                     field.onChange(e);
                 } }, { children: (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
                     var _a, _b, _c;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const isSelected = (_a = field.value) === null || _a === void 0 ? void 0 : _a.some((v) => {
                         if (isOptionEqualToValue) {
                             return isOptionEqualToValue(v, option);

package/build/components/RangeCalender/RangeCalender.js

@@ -22,6 +22,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
     const open = Boolean(anchorEl);
     const [isError, setIsError] = useState(false);
     const { t } = useTranslation();
+    // eslint-disable-next-line
     const calendarRef = useRef();
     const isHijri = mode === 'hijri';
     const onCloseCalender = () => {

package/build/components/RangeCalender/components/RangeDatepicker/RangeDatepicker.js

@@ -16,7 +16,9 @@ import { darkLeftArrowIcon, darkRightArrowIcon } from '../../../../constants/ind
 import { ArrowButton } from './style';
 import { getLocale, getCalender } from '../../utils';
 const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-function RangeDatepicker(_a, ref) {
+function RangeDatepicker(_a, 
+// eslint-disable-next-line
+ref) {
     var { isAr = false, isHijri, values, onChange, numberOfMonths = 2 } = _a, props = __rest(_a, ["isAr", "isHijri", "values", "onChange", "numberOfMonths"]);
     const getArrow = (direction) => {
         if (direction === 'right') {