@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/PaymentSourceFilter/PaymentSchemes.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Menu } from '../index.js';
+import { rightArrow } from '../../constants/index.js';
+import { MenuItemStyled } from './style';
+import { PaymentIcon } from './PaymentIcon';
+export default function PaymentSchemes({ paymentSchemesSource, filters, setFilters }) {
+    var _a, _b, _c, _d;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const paymentScheme = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_scheme) !== null && _a !== void 0 ? _a : [];
+    const isDisabled = !((_b = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _b === void 0 ? void 0 : _b.length);
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const isSelected = useMemo(() => { var _a; return paymentScheme.length === ((_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.length) && paymentScheme.length > 0; }, [paymentScheme.length, (_c = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _c === void 0 ? void 0 : _c.length]);
+    const isIndeterminate = useMemo(() => !isSelected && paymentScheme.length > 0, [paymentScheme.length, isSelected]);
+    const isSelectedPaymentScheme = useCallback((selectedPaymentScheme) => { var _a; return (_a = paymentScheme.includes(selectedPaymentScheme)) !== null && _a !== void 0 ? _a : false; }, [paymentScheme]);
+    const onClick = () => {
+        var _a, _b;
+        if (isDisabled)
+            return;
+        if (isSelected) {
+            const { payment_scheme } = filters, resetFilters = __rest(filters, ["payment_scheme"]);
+            setFilters(resetFilters);
+            return;
+        }
+        setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: (_b = (_a = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _a === void 0 ? void 0 : _a.map((paymentSchemeItem) => paymentSchemeItem.type)) !== null && _b !== void 0 ? _b : [] }));
+    };
+    const onClickPaymentScheme = (e, selectedPaymentScheme) => {
+        var _a, _b;
+        e.stopPropagation();
+        if (isSelectedPaymentScheme(selectedPaymentScheme)) {
+            setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: (_a = paymentScheme.filter((scheme) => scheme !== selectedPaymentScheme)) !== null && _a !== void 0 ? _a : [] }));
+        }
+        else {
+            setFilters(Object.assign(Object.assign({}, filters), { payment_scheme: [...((_b = filters === null || filters === void 0 ? void 0 : filters.payment_scheme) !== null && _b !== void 0 ? _b : []), selectedPaymentScheme] }));
+        }
+    };
+    return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick, sx: Object.assign({}, (isDisabled && { opacity: 0.5, pointerEvents: 'none' })) }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right-start" }, { children: (_d = paymentSchemesSource === null || paymentSchemesSource === void 0 ? void 0 : paymentSchemesSource.options) === null || _d === void 0 ? void 0 : _d.map((scheme) => (_jsx(MenuItemStyled, Object.assign({ isSelected: isSelectedPaymentScheme(scheme.type), onClick: (e) => onClickPaymentScheme(e, scheme.type) }, { children: _jsx(PaymentIcon, { type: scheme.type }) }), scheme.type))) }))] })));
+}

package/build/components/PaymentSourceFilter/PaymentSourceFilter.d.ts

@@ -0,0 +1,15 @@
+import { SourceFilter } from '../../types/index.js';
+import { CustomColumnFilterProps } from '../VirtualTables';
+import { PaymentSourceFilters } from './type';
+interface SourceFilterProps extends CustomColumnFilterProps {
+    filters: PaymentSourceFilters;
+    setFilters: (filters: PaymentSourceFilters) => void;
+    showPaymentSchemes?: boolean;
+    showPaymentMethods?: boolean;
+    showPaymentInitiated?: boolean;
+    paymentMethodsSource: SourceFilter;
+    paymentSchemesSource: SourceFilter;
+    onConfirm?: () => void;
+}
+export default function PaymentSourceFilter({ filters, setFilters, anchorEl, showPaymentSchemes, showPaymentMethods, showPaymentInitiated, paymentMethodsSource, paymentSchemesSource, onCloseDropdown, onConfirm, }: Readonly<SourceFilterProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/PaymentSourceFilter/PaymentSourceFilter.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Menu, FilterTitle, FilterOkayButton, FilterFooter, FilterCancelButton } from '../index.js';
+import PaymentMethods from './PaymentMethods';
+import PaymentSchemes from './PaymentSchemes';
+import PaymentInitiated from './PaymentInitiated';
+export default function PaymentSourceFilter({ filters, setFilters, anchorEl, showPaymentSchemes = true, showPaymentMethods = true, showPaymentInitiated = true, paymentMethodsSource, paymentSchemesSource, onCloseDropdown, onConfirm, }) {
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const handleOkButtonClick = (e) => {
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+        onCloseDropdown(e);
+    };
+    return (_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px' } }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), showPaymentMethods && _jsx(PaymentMethods, { filters: filters, setFilters: setFilters, paymentMethodsSource: paymentMethodsSource }), showPaymentSchemes && _jsx(PaymentSchemes, { filters: filters, setFilters: setFilters, paymentSchemesSource: paymentSchemesSource }), showPaymentInitiated && _jsx(PaymentInitiated, { filters: filters, setFilters: setFilters }), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdown }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })));
+}

package/build/components/PaymentSourceFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PaymentSourceFilter } from './PaymentSourceFilter';
+export { type PaymentSourceFilters } from './type';

package/build/components/PaymentSourceFilter/index.js

@@ -0,0 +1 @@
+export { default as PaymentSourceFilter } from './PaymentSourceFilter';

package/build/components/PaymentSourceFilter/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const MenuItemStyled: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const PaymentChip: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/PaymentSourceFilter/style.js

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { MenuItem } from '../index.js';
+export const MenuItemStyled = styled(MenuItem)(({ theme }) => ({
+    height: 40,
+    flex: 'unset',
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    '.label': {
+        flexGrow: 1,
+    },
+}));
+export const PaymentChip = styled(Box)(({ theme }) => ({
+    width: 36,
+    height: 24,
+    border: `1px solid ${theme.palette.divider}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '12px',
+}));

package/build/components/PaymentSourceFilter/type.d.ts

@@ -0,0 +1,10 @@
+export interface PaymentSourceFilters {
+    payment_methods?: string[];
+    payment_scheme?: string[];
+    payment_initiated?: string[];
+    issuer_countries?: string[];
+}
+export interface Filters {
+    filters: PaymentSourceFilters;
+    setFilters: (filters: PaymentSourceFilters) => void;
+}

package/build/components/PaymentSourceFilter/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/PhoneFilter/PhoneFilter.d.ts

@@ -0,0 +1,9 @@
+import { Country } from '../../types/index.js';
+export default function PhoneFilter({ onPhoneChange, onCountryChange, selectedPhone, selectedCountry, countriesOptions, isCountriesLoading, }: {
+    onPhoneChange: (phone: string) => void;
+    onCountryChange: (countryId: string) => void;
+    selectedPhone?: string;
+    selectedCountry?: Country;
+    countriesOptions: Country[];
+    isCountriesLoading: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/build/components/PhoneFilter/PhoneFilter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhoneInputBase } from '../index.js';
+export default function PhoneFilter({ onPhoneChange, onCountryChange, selectedPhone, selectedCountry, countriesOptions, isCountriesLoading, }) {
+    return (_jsx(PhoneInputBase, { "data-testid": `ColumnFilterInputs_PhoneInput`, phoneValue: selectedPhone, onPhoneChange: (val) => {
+            onPhoneChange(val);
+        }, countryValue: selectedCountry, onCountryChange: (c) => {
+            onCountryChange(c === null || c === void 0 ? void 0 : c.countryId);
+        }, countries: countriesOptions || [], isCountriesLoading: isCountriesLoading || false, hasError: false, disabled: isCountriesLoading, placeholder: 'User Mobile', sx: {
+            '&.MuiInputBase-root': {
+                paddingLeft: '0px !important',
+            },
+        } }));
+}

package/build/components/PhoneFilter/index.d.ts

@@ -0,0 +1 @@
+export { default as PhoneFilter } from './PhoneFilter';

package/build/components/PhoneFilter/index.js

@@ -0,0 +1 @@
+export { default as PhoneFilter } from './PhoneFilter';

package/build/components/ProgressBar/style.d.ts

@@ -12,6 +12,6 @@ export declare const ProgressBarFill: import("@emotion/styled").StyledComponent<
 }, {}, {}>;
 export declare const ProgressBarText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     value: number;
 }, {}, {}>;

package/build/components/ProgressRing/style.d.ts

@@ -9,11 +9,11 @@ export declare const TextContainer: import("@emotion/styled").StyledComponent<im
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const PercentageText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     isEmpty?: boolean | undefined;
 }, {}, {}>;
 export declare const LabelText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     isEmpty?: boolean | undefined;
 }, {}, {}>;

package/build/components/RFH/Inputs/FormInput/FormInput.d.ts

@@ -4,9 +4,5 @@ export interface FormInputProps extends Omit<InputBaseProps, 'name' | 'hasError'
     name: string;
     hideArrows?: boolean;
 }
-declare function FormInput({ name, helperText, hideArrows, ...props }: FormInputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace FormInput {
-    var displayName: string;
-}
-declare const _default: React.MemoExoticComponent<typeof FormInput>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<FormInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>>;
 export default _default;

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

@@ -13,15 +13,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import { InputBase } from '../../../InputBase';
-function FormInput(_a) {
+const FormInput = React.forwardRef((_a, ref) => {
     var { name, helperText, hideArrows } = _a, props = __rest(_a, ["name", "helperText", "hideArrows"]);
     const { control } = useFormContext();
     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) => {
+            return (_jsx(InputBase, Object.assign({}, props, field, { ref: ref, hasError: !!fieldState.error, helperText: helperText !== null && helperText !== void 0 ? helperText : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, hideArrows: hideArrows, onChange: (value) => {
+                    var _a;
+                    field.onChange(value); // update react-hook-form
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value); // optional external handler
+                }, onWheel: (e) => {
+                    // eslint-disable-next-line
                     e.target instanceof HTMLElement && e.target.blur();
                 } })));
         } }));
-}
+});
 FormInput.displayName = 'RFHFormInput';
 export default React.memo(FormInput);

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/RFH/Inputs/SelectWithAccordion/SelectWithAccordion.js

@@ -45,7 +45,7 @@ function SelectWithAccordion(_a) {
                             e.stopPropagation();
                             e.preventDefault();
                             setExpandedParentGroupIndex(expanded ? parentIndex : null);
-                        } }, { children: ((optionsGroup === null || optionsGroup === void 0 ? void 0 : optionsGroup.options) || []).map((option) => {
+                        } }, { children: ((optionsGroup === null || optionsGroup === void 0 ? void 0 : optionsGroup.options) || []).map((option, index) => {
                             var _a, _b;
                             const isSelected = (_a = props === null || props === void 0 ? void 0 : props.isOptionEqualToValue) === null || _a === void 0 ? void 0 : _a.call(props, option, selectedOption);
                             return (_jsxs(ItemStyled, Object.assign({ onClick: () => {
@@ -55,8 +55,8 @@ function SelectWithAccordion(_a) {
                                         shouldValidate: true,
                                     });
                                     closeDropdown();
-                                } }, { children: [((_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) || option.label, isSelected && _jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 14, height: 10 } })] }), option.value));
-                        }) }), `${optionsGroup.group}-group`));
+                                } }, { children: [((_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) || option.label, isSelected && _jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 14, height: 10 } })] }), `${option.value}-${option.label}-${index}`));
+                        }) }), `${optionsGroup.group}-group-${parentIndex}`));
                 }) })) }) })));
 }
 export default SelectWithAccordion;

package/build/components/RFH/Inputs/SelectWithAccordion/style.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 export declare const Caption: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const AccordionWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -26,7 +26,7 @@ export declare const SelectedBadge: import("@emotion/styled").StyledComponent<im
 }, {}, {}>;
 export declare const ItemStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const TriggerWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/build/components/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CustomRadioGroupProps } from './type';
-declare function RadioGroup({ options, onOptionChange, size, customLabelRenderer, layout, spacing, labelPosition, showHoverEffects, customRadioProps, labelSx, onChange, sx, ...props }: CustomRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup({ options, onOptionChange, size, customLabelRenderer, layout, spacing, labelPosition, showHoverEffects, customRadioProps, labelSx, onChange, title, sx, ...props }: CustomRadioGroupProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof RadioGroup>;
 export default _default;

package/build/components/RadioGroup/RadioGroup.js

@@ -9,23 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
 import MuiRadioGroup from '@mui/material/RadioGroup';
 import { StyledFormControlLabel } from './style';
 import { RadioButton } from '../RadioButton';
+import { FormControl, FormLabel, Stack } from '@mui/material';
 function RadioItem(_a) {
-    var { option, size = 'small', customLabelRenderer, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx } = _a, props = __rest(_a, ["option", "size", "customLabelRenderer", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx"]);
+    var { option, size = 'small', customLabelRenderer, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, icon } = _a, props = __rest(_a, ["option", "size", "customLabelRenderer", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "icon"]);
     const label = customLabelRenderer ? customLabelRenderer(option) : option.label;
-    return (_jsx(StyledFormControlLabel, Object.assign({ value: option.value, control: _jsx(RadioButton, Object.assign({ size: size }, customRadioProps, option.customProps)), label: label, disabled: option.disabled, size: size, labelPlacement: labelPosition, showHoverEffects: showHoverEffects, labelSx: labelSx }, props)));
+    const labelContent = useMemo(() => {
+        if (icon) {
+            return (_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", justifyContent: "space-between" }, { children: [label, _jsx("img", Object.assign({ alt: "icon" }, icon))] })));
+        }
+        return label;
+    }, [icon, label]);
+    return (_jsx(StyledFormControlLabel, Object.assign({ value: option.value, control: _jsx(RadioButton, Object.assign({ size: size }, customRadioProps, option.customProps)), label: labelContent, disabled: option.disabled, size: size, labelPlacement: labelPosition, showHoverEffects: showHoverEffects, labelSx: labelSx }, props)));
 }
 function RadioGroup(_a) {
-    var { options, onOptionChange, size = 'small', customLabelRenderer, layout = 'vertical', spacing = 0, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, onChange, sx } = _a, props = __rest(_a, ["options", "onOptionChange", "size", "customLabelRenderer", "layout", "spacing", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "onChange", "sx"]);
+    var { options, onOptionChange, size = 'small', customLabelRenderer, layout = 'vertical', spacing = 0, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, onChange, title, sx } = _a, props = __rest(_a, ["options", "onOptionChange", "size", "customLabelRenderer", "layout", "spacing", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "onChange", "title", "sx"]);
     const handleChange = (event) => {
         const value = event.target.value;
         onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
     };
-    return (_jsx(MuiRadioGroup, Object.assign({ onChange: handleChange, sx: Object.assign({ display: 'flex', flexDirection: layout === 'horizontal' ? 'row' : 'column', gap: spacing }, sx) }, props, { children: options.map((option) => (_jsx(RadioItem, { option: option, size: size, customLabelRenderer: customLabelRenderer, labelPosition: labelPosition, showHoverEffects: showHoverEffects, customRadioProps: customRadioProps, labelSx: labelSx }, option.value))) })));
+    return (_jsxs(FormControl, { children: [typeof title === 'string' ? _jsx(FormLabel, { children: title }) : title, _jsx(MuiRadioGroup, Object.assign({ onChange: handleChange, sx: Object.assign({ display: 'flex', flexDirection: layout === 'horizontal' ? 'row' : 'column', gap: spacing }, sx) }, props, { children: options.map((option) => (_jsx(RadioItem, { icon: option.icon, option: option, size: size, customLabelRenderer: customLabelRenderer, labelPosition: labelPosition, showHoverEffects: showHoverEffects, customRadioProps: customRadioProps, labelSx: labelSx }, option.value))) }))] }));
 }
 export default memo(RadioGroup);

package/build/components/RadioGroup/style.js

@@ -5,6 +5,7 @@ export const StyledFormControlLabel = styled(FormControlLabel, {
 })(({ size = 'small', showHoverEffects = true, labelSx }) => (Object.assign(Object.assign({ margin: '0', width: '100%', cursor: 'pointer', padding: size === 'small' ? '7.5px 16px 7.5px 8px' : size === 'medium' ? '9px 16px 9px 10px' : '11px 16px 11px 12px', maxHeight: size === 'small' ? '35px' : size === 'medium' ? '40px' : '45px' }, (showHoverEffects && {
     '&:hover': {
         boxShadow: '0px 0px 16px 0px #00000021',
+        borderLeft: '1px solid transparent',
     },
 })), { '& .MuiFormControlLabel-label': Object.assign({ fontSize: size === 'small' ? '11px' : size === 'medium' ? '13px' : '15px', fontWeight: '500', color: '#20232B', width: '100%', cursor: 'pointer' }, labelSx), '& .MuiRadio-root': {
         cursor: 'pointer',

package/build/components/RadioGroup/type.d.ts

@@ -7,10 +7,10 @@ export interface RadioOption {
     label: string;
     disabled?: boolean;
     description?: string;
-    icon?: ReactNode;
+    icon?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
     customProps?: Partial<RadioButtonProps>;
 }
-export interface CustomRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
+export interface CustomRadioGroupProps extends Omit<RadioGroupProps, 'children' | 'title'> {
     options: RadioOption[];
     onOptionChange?: (value: string) => void;
     size?: 'small' | 'medium' | 'large';
@@ -21,6 +21,7 @@ export interface CustomRadioGroupProps extends Omit<RadioGroupProps, 'children'>
     showHoverEffects?: boolean;
     customRadioProps?: Partial<RadioButtonProps>;
     labelSx?: React.CSSProperties;
+    title?: React.ReactNode;
 }
 export interface RadioItemProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
     option: RadioOption;
@@ -30,4 +31,5 @@ export interface RadioItemProps extends Omit<FormControlLabelProps, 'control' |
     showHoverEffects?: boolean;
     customRadioProps?: Partial<RadioButtonProps>;
     labelSx?: React.CSSProperties;
+    icon?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
 }

package/build/components/RangeCalender/RangeCalender.d.ts

@@ -1,28 +1,3 @@
-import { MouseEvent } from 'react';
-import { PopperProps } from '@mui/material/Popper';
-import type { CalenderMode, Timezone } from '../../types/index.js';
-import { SxProps } from '@mui/system';
-import { RangeDatepickerProps } from './components/RangeDatepicker/RangeDatepicker';
-interface RangeCalendarProps {
-    defaultDate: [Date, Date];
-    onDateChange: (date: [Date, Date], timezoneOffset?: number) => void;
-    mode?: CalenderMode;
-    onCalendarModeSwitch?: (mode: CalenderMode) => void;
-    numberOfMonths?: number;
-    noTimezone?: boolean;
-    noQuickFilter?: boolean;
-    maxDateRange?: number;
-    onCalendarGroupChange?: (value: string) => void;
-    groupBy?: string;
-    timezone: Timezone | null;
-    onChangeTimezoneHistory?: (timezone: Timezone) => void;
-    onChangeTimezone?: (timezone: Timezone) => void;
-    defaultTimezone: Timezone;
-    browserTimezone: string;
-    renderCalendarButton?: (open: boolean, onOpenCalender: (event: MouseEvent<HTMLElement>) => void) => React.ReactNode;
-    mainSx?: SxProps;
-    popperProps?: Partial<PopperProps>;
-    rangeDatePickerProps?: Partial<RangeDatepickerProps>;
-}
-declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
+import { RangeCalendarProps } from './type';
+declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezone, browserTimezone, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, defaultCountryTimezone, timezoneCountriesCodes, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
 export default RangeCalender;