tp-react-elements 3.0.7 → 3.0.10

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var Month = {};
+var InputRangeField = {};
 
-export { Month as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var Month = {};
 
-export { InputRangeField as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm4.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRange = {};
 
-export { Calendar as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var DateRangePicker = {};
 
-export { DateRange as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DefinedRange = {};
+var Calendar = {};
 
-export { DefinedRange as __exports };
+export { Calendar as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DefinedRange = {};
 
-export { DateRangePicker as __exports };
+export { DefinedRange as __exports };

package/dist/auth/authContext.d.ts

@@ -16,4 +16,12 @@ interface AuthProviderProps {
 }
 export declare const TPElementsProvider: React.FC<AuthProviderProps>;
 export declare const useAuth: () => AuthContextType;
+/**
+ * Same `projectTheme` as `useAuth()`, but never throws when the tree isn't wrapped in
+ * `<TPElementsProvider>` — just returns `undefined`. Components rendered deep inside generic
+ * form/grid utilities (toggle switches, radio groups, etc.) use this instead of `useAuth()` so
+ * that consumers who never opted into `TPElementsProvider` keep working exactly as before,
+ * rather than crashing the moment a themeable field type is used.
+ */
+export declare const useOptionalProjectTheme: () => ProjectThemePropsTp | undefined;
 export {};

package/dist/auth/authContext.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useContext } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 const AuthContext = createContext(undefined);
 const TPElementsProvider = ({ children, projectTheme }) => {
@@ -22,5 +22,16 @@ const useAuth = () => {
     }
     return context;
 };
+/**
+ * Same `projectTheme` as `useAuth()`, but never throws when the tree isn't wrapped in
+ * `<TPElementsProvider>` — just returns `undefined`. Components rendered deep inside generic
+ * form/grid utilities (toggle switches, radio groups, etc.) use this instead of `useAuth()` so
+ * that consumers who never opted into `TPElementsProvider` keep working exactly as before,
+ * rather than crashing the moment a themeable field type is used.
+ */
+const useOptionalProjectTheme = () => {
+    const context = useContext(AuthContext);
+    return context?.projectTheme;
+};
 
-export { TPElementsProvider, useAuth };
+export { TPElementsProvider, useAuth, useOptionalProjectTheme };

package/dist/components/Form/FormActiveSwitch.d.ts

@@ -1,3 +1,12 @@
 import '../Form/FormsStyles.scss';
+/**
+ * `toggleSwitch` field renderer.
+ *
+ * By default (no `TPToggleSwitch` entry in the consuming app's `projectTheme`) this renders the
+ * original wide pill switch unchanged — every existing consumer of this package sees no visual
+ * difference. Passing `projectTheme.Styles.Component.TPToggleSwitch` to `<TPElementsProvider>`
+ * opts an app into a compact iOS-style switch with a title/description card instead, using
+ * `item.label` as the title and `item.helperText` as the description.
+ */
 declare const FormActiveSwitch: ({ props }: any) => import("react/jsx-runtime").JSX.Element;
 export default FormActiveSwitch;

package/dist/components/Form/FormActiveSwitch.esm.js

@@ -1,15 +1,78 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Controller } from 'react-hook-form';
+import { useOptionalProjectTheme } from '../../auth/authContext.esm.js';
 
 // Static — hoisted so they aren't rebuilt on every render.
 const FIELDSET_STYLE = { border: 'none', padding: 0, margin: 0 };
 const LEGEND_STYLE = { fontSize: '12px', paddingRight: 10 };
 const LABEL_STYLE = { textTransform: 'none' };
+const CARD_STYLE = {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 12,
+    background: '#FAFBFD',
+    border: '1px solid #E5EAF0',
+    borderRadius: 9,
+    padding: '13px 14px',
+    width: '100%',
+    boxSizing: 'border-box',
+};
+const TRACK_BASE = {
+    width: 34,
+    height: 19,
+    borderRadius: 10,
+    flex: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    marginTop: 2,
+    border: 'none',
+    padding: 0,
+};
+const KNOB_BASE = {
+    position: 'absolute',
+    top: 2,
+    width: 15,
+    height: 15,
+    borderRadius: '50%',
+    background: '#fff',
+    transition: 'left .18s ease',
+};
+const BADGE_BASE = {
+    display: 'inline-flex',
+    padding: '2px 8px',
+    borderRadius: 5,
+    fontSize: 9.5,
+    fontWeight: 700,
+    letterSpacing: '0.06em',
+    whiteSpace: 'nowrap',
+};
+/**
+ * `toggleSwitch` field renderer.
+ *
+ * By default (no `TPToggleSwitch` entry in the consuming app's `projectTheme`) this renders the
+ * original wide pill switch unchanged — every existing consumer of this package sees no visual
+ * difference. Passing `projectTheme.Styles.Component.TPToggleSwitch` to `<TPElementsProvider>`
+ * opts an app into a compact iOS-style switch with a title/description card instead, using
+ * `item.label` as the title and `item.helperText` as the description.
+ */
 const FormActiveSwitch = ({ props }) => {
     const { control, item } = props;
     const valueActive = item.value1 ?? 'A';
     const valueInactive = item.value2 ?? 'I';
-    return (jsxs("fieldset", { className: "m-form__input", style: FIELDSET_STYLE, children: [item.label && (jsx("legend", { id: `${item.name}-label`, style: LEGEND_STYLE, children: item.label })), jsx(Controller, { name: item.name, control: control, render: ({ field }) => (jsxs("span", { className: "switch prestashop-switch fixed-width-lg", role: "radiogroup", "aria-labelledby": `${item.name}-label`, children: [jsx("input", { id: `${item.name}_on`, name: item.name, type: "radio", value: valueActive, checked: field.value === valueActive, onChange: () => field.onChange(valueActive), "aria-checked": field.value === valueActive }), jsx("label", { htmlFor: `${item.name}_on`, style: LABEL_STYLE, children: item.label1 ?? 'Active' }), jsx("input", { id: `${item.name}_off`, name: item.name, type: "radio", value: valueInactive, checked: field.value === valueInactive, onChange: () => field.onChange(valueInactive), "aria-checked": field.value === valueInactive }), jsx("label", { htmlFor: `${item.name}_off`, style: LABEL_STYLE, children: item.label2 ?? 'In Active' }), jsx("span", { className: "slide-button btn", "aria-hidden": "true" })] })) })] }));
+    const toggleConfig = useOptionalProjectTheme()?.Styles?.Component?.TPToggleSwitch;
+    if (!toggleConfig) {
+        return (jsxs("fieldset", { className: "m-form__input", style: FIELDSET_STYLE, children: [item.label && (jsx("legend", { id: `${item.name}-label`, style: LEGEND_STYLE, children: item.label })), jsx(Controller, { name: item.name, control: control, render: ({ field }) => (jsxs("span", { className: "switch prestashop-switch fixed-width-lg", role: "radiogroup", "aria-labelledby": `${item.name}-label`, children: [jsx("input", { id: `${item.name}_on`, name: item.name, type: "radio", value: valueActive, checked: field.value === valueActive, onChange: () => field.onChange(valueActive), "aria-checked": field.value === valueActive }), jsx("label", { htmlFor: `${item.name}_on`, style: LABEL_STYLE, children: item.label1 ?? 'Active' }), jsx("input", { id: `${item.name}_off`, name: item.name, type: "radio", value: valueInactive, checked: field.value === valueInactive, onChange: () => field.onChange(valueInactive), "aria-checked": field.value === valueInactive }), jsx("label", { htmlFor: `${item.name}_off`, style: LABEL_STYLE, children: item.label2 ?? 'In Active' }), jsx("span", { className: "slide-button btn", "aria-hidden": "true" })] })) })] }));
+    }
+    const onColor = toggleConfig.onColor ?? '#00A86B';
+    const offColor = toggleConfig.offColor ?? '#D5DCE6';
+    return (jsx(Controller, { name: item.name, control: control, render: ({ field }) => {
+            const on = field.value === valueActive;
+            return (jsxs("div", { style: CARD_STYLE, children: [jsx("button", { type: "button", role: "switch", "aria-checked": on, "aria-labelledby": `${item.name}-label`, onClick: () => field.onChange(on ? valueInactive : valueActive), style: { ...TRACK_BASE, background: on ? onColor : offColor }, children: jsx("span", { style: { ...KNOB_BASE, left: on ? 17 : 2 } }) }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }, children: [jsx("span", { id: `${item.name}-label`, style: { fontSize: 12.5, fontWeight: 700, whiteSpace: 'nowrap' }, children: item.label }), jsx("span", { style: {
+                                            ...BADGE_BASE,
+                                            background: on ? '#EEF7F2' : '#F2F5F9',
+                                            color: on ? '#00764A' : '#8A97A8',
+                                        }, children: on ? 'ON' : 'OFF' })] }), item.helperText && (jsx("div", { style: { fontSize: 11.5, color: '#6C757D', marginTop: 3, whiteSpace: 'normal', lineHeight: 1.5 }, children: item.helperText }))] })] }));
+        } }));
 };
 
 export { FormActiveSwitch as default };

package/dist/components/Form/FormRender.esm.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
 import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -13,7 +14,6 @@ import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchAp
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
 import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
 import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
 import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
 import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';

package/dist/components/FormComponents/FormRadioGroup/FormRadioGroup.esm.js

@@ -1,23 +1,17 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { FormControl, RadioGroup, FormControlLabel, Typography, Radio } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import { useOptionalProjectTheme } from '../../../auth/authContext.esm.js';
 
 // Static — same for the group and for every radio option — hoisted so they
 // aren't rebuilt on every render/option.
 const RADIO_GROUP_SX = { gap: '8px' };
-const RADIO_SX = {
-    padding: '6px 2px 6px 8px',
-    color: 'black',
-    '&.Mui-checked': {
-        color: '#1976d2', // blue when selected
-    },
-    '& .MuiSvgIcon-root': {
-        fontSize: 16, // controls the radio icon size
-    },
-};
+/** Stock MUI blue — unchanged default for every consumer that doesn't set `TPRadioGroup.checkedColor`. */
+const DEFAULT_CHECKED_COLOR = '#1976d2';
 /**
  * FormRadioGroup Component
  *
@@ -34,13 +28,24 @@ const RADIO_SX = {
  * <FormRadioGroup props={formRenderProps} variant="outlined" />
  */
 const FormRadioGroup = ({ props, variant }) => {
+    const checkedColor = useOptionalProjectTheme()?.Styles?.Component?.TPRadioGroup?.checkedColor ?? DEFAULT_CHECKED_COLOR;
+    const radioSx = useMemo(() => ({
+        padding: '6px 2px 6px 8px',
+        color: 'black',
+        '&.Mui-checked': {
+            color: checkedColor,
+        },
+        '& .MuiSvgIcon-root': {
+            fontSize: 16, // controls the radio icon size
+        },
+    }), [checkedColor]);
     /**
      * Renders a group of radio buttons with labels and validation support
      */
     return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsx(RadioGroup, { value: field.value || '', onChange: (e) => {
                             field.onChange(e.target.value); // update form state
                             props.item.onChangeFn && props.item.onChangeFn(e.target.value); // optional handler
-                        }, row: true, sx: RADIO_GROUP_SX, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(Radio, { sx: RADIO_SX }), label: jsx(Typography, { fontSize: '11px', fontWeight: 'normal !important', children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
+                        }, row: true, sx: RADIO_GROUP_SX, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(Radio, { sx: radioSx }), label: jsx(Typography, { fontSize: '11px', fontWeight: 'normal !important', children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormRadioGroup as default };

package/dist/components/FormComponents/FormTextField/FormTextField.esm.js

@@ -47,7 +47,8 @@ const FormTextField = ({ props, variant }) => {
      * Generates the field label based on variant type
      * For non-standard variants, appends an asterisk if the field is required
      */
-    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    const isStaticLabel = props.item.labelVariant === 'static';
+    const label = variant !== 'standard' && !isStaticLabel ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
     /**
      * Handles input events with various text restrictions
      *

package/dist/components/FormComponents/Select/MultiSelectAutocomplete.esm.js

@@ -72,7 +72,10 @@ const MultiSelectAutocomplete = ({ props, variant, maxChips = 2, }) => {
     // ── Stable callbacks ───────────────────────────────────────────────────────
     const getOptionLabelCb = useCallback((option) => String(option.label), []);
     const isOptionEqualCb = useCallback((option, value) => String(option.value) === String(value.value), []);
-    const renderOptionCb = useCallback((renderProps, option, state) => (jsxs("li", { ...renderProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: state.selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] })), []);
+    const renderOptionCb = useCallback((renderProps, option, state) => {
+        const { key, ...otherProps } = renderProps;
+        return (jsxs("li", { ...otherProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: state.selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] }, key));
+    }, []);
     const chipSx = useMemo(() => ({
         mr: 0.5,
         height: 20,
@@ -109,7 +112,7 @@ const MultiSelectAutocomplete = ({ props, variant, maxChips = 2, }) => {
         clearErrors?.(name);
     }, [setValue, clearErrors, name, onChangeFn]);
     // ── Render ─────────────────────────────────────────────────────────────────
-    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
+    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, fullWidth: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
                         fieldOnBlur();
                         handleBlur(e);
                     }, size: "small", disablePortal: false, autoHighlight: true, selectOnFocus: true, clearOnBlur: false, renderTags: (tagValue, getTagProps) => (jsx(Box, { ref: tagsContainerRef, sx: {

package/dist/components/FormComponents/Select/MultiSelectv1.esm.js

@@ -56,7 +56,7 @@ function MultiSelectV1({ props, variant, }) {
     const selectedOptions = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
     const selectedValuesString = selectedOptions.map((item) => item.label).join(' , ');
     const isShowBorderError = !!props.errors?.[props.item.name];
-    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, children: [renderLabel(variant, props), variant !== 'standard' && (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => {
+    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, children: [renderLabel(variant, props), variant !== 'standard' && props.item.labelVariant !== 'static' && (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => {
                         if (!props.item.doNotEnableMultiselectOrder) {
                             setSavedSortValue(fieldValue);
                         }
@@ -67,7 +67,7 @@ function MultiSelectV1({ props, variant, }) {
                             setSavedSortValue(fieldValue);
                         }
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
-                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedValuesString, children: jsx("span", { style: { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: props.item.placeholder && selectedOptions.length === 0 ? (jsx("span", { style: { color: '#0009' }, children: props.item.placeholder })) : (selectedOptions.length > (props.item.multiSelectLabelLength || 3)
+                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' && props.item.labelVariant !== 'static' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedValuesString, children: jsx("span", { style: { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: props.item.placeholder && selectedOptions.length === 0 ? (jsx("span", { style: { color: '#0009' }, children: props.item.placeholder })) : (selectedOptions.length > (props.item.multiSelectLabelLength || 3)
                                 ? `${selectedOptions.length} Selected`
                                 : selectedValuesString) }) })), MenuProps: {
                         PaperProps: {

package/dist/components/FormComponents/Select/SingleSelect.esm.js

@@ -14,7 +14,7 @@ const SingleSelect = ({ props, variant }) => {
     const value = currentValue
         ? props.item.options?.find((item) => item.value === currentValue)
         : null;
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (value?.label || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(Autocomplete, { ...field, id: `${props.item.name}-autocomplete`, value: value, onChange: (_, newValue) => {
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (value?.label || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(Autocomplete, { ...field, fullWidth: true, id: `${props.item.name}-autocomplete`, value: value, onChange: (_, newValue) => {
                                     props.setValue(props?.item?.name, newValue?.value);
                                     props?.item?.onChangeFn && props?.item?.onChangeFn(newValue?.value, newValue);
                                     props?.clearErrors && props?.clearErrors(props?.item?.name);
@@ -49,10 +49,14 @@ const SingleSelect = ({ props, variant }) => {
                                             fontSize: '11px',
                                         },
                                     },
-                                }, renderOption: (props, option) => (createElement("li", { ...props, value: option.value, style: {
-                                        opacity: option.disable ? 0.5 : 1,
-                                        pointerEvents: option.disable ? 'none' : 'auto',
-                                    }, key: option.value }, option.label)), renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
+                                }, renderOption: (props, option) => {
+                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                    const { key, ...optionProps } = props;
+                                    return (createElement("li", { ...optionProps, value: option.value, style: {
+                                            opacity: option.disable ? 0.5 : 1,
+                                            pointerEvents: option.disable ? 'none' : 'auto',
+                                        }, key: option.value }, option.label));
+                                }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard' && props.item.labelVariant !== 'static'
                                         ? `${props.item.label}${props.item.required ? ' *' : ''}`
                                         : '', inputProps: {
                                         ...params.inputProps,

package/dist/components/FormComponents/Select/SingleSelectSearchApi.esm.js

@@ -197,7 +197,7 @@ const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs
         return fetchError ?? 'No results found';
     }, [searchQuery, minSearchLength, fetchError]);
     // ── Render ────────────────────────────────────────────────────────────────
-    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, value: resolvedValue, inputValue: displayText, onInputChange: handleInputChange, onChange: handleChange, onBlur: onBlur, options: options, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, 
+    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, fullWidth: true, value: resolvedValue, inputValue: displayText, onInputChange: handleInputChange, onChange: handleChange, onBlur: onBlur, options: options, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, 
                     // Options come pre-filtered from the server — disable client-side filtering
                     filterOptions: (x) => x, loading: isLoading, disabled: disable, size: "small", noOptionsText: noOptionsText, sx: {
                         '& .MuiAutocomplete-input': {

package/dist/components/FormComponents/index.esm.js

@@ -5,9 +5,9 @@ export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
+export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
 export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
 export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';

package/dist/components/PaginatedGrid/GenericPaginatedGrid.d.ts

@@ -119,6 +119,22 @@ export interface GenericPaginatedGridProps<TData extends object> {
     disableResponsive?: boolean;
     /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
     pageSizeOptions?: number[];
+    /**
+     * Initial "Rows per page" value, shown in the footer before the user touches the dropdown.
+     *
+     * The grid never slices rows client-side (`manualPagination: true`, no row model) — whatever
+     * `fetchPage` resolves with for a page **is** that page, shown in full. `pageSize` only feeds
+     * the footer's count text and the Next-page button's math, so it must match how many rows
+     * `fetchPage` actually returns per call, same as `batchSize` always had to. The two exist
+     * separately only because `batchSize` doubles as "rows per fetch" documentation elsewhere;
+     * use `pageSize` when you want the initial dropdown value to be authoritative without
+     * reinterpreting `batchSize`'s meaning at every call site.
+     *
+     * Default: `batchSize` (unchanged behaviour — identical to how the initial page size worked
+     * before this prop existed). If this value isn't already in `pageSizeOptions`, it's folded in
+     * automatically so the dropdown always has a matching selected entry.
+     */
+    pageSize?: number;
     /**
      * Show the Global Search input expanded by default (instead of requiring a
      * click on the search icon to reveal it). The icon remains in the top-right
@@ -306,5 +322,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     enableExpanding?: boolean;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, pageSize, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js

@@ -304,7 +304,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_next_page_icon`, size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_last_page_icon`, size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], pageSize, showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
     // ── Responsive tier detection ────────────────────────────────────────────────
     // Three tiers (desktop / tablet / mobile) drive auto density, a progressively
     // lower filter-chip cap, toolbar wrapping, and a stacked pagination footer —
@@ -392,9 +392,13 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     // ── State ──────────────────────────────────────────────────────────────────
     const [filterValues, setFilterValues] = useState(defaultFilters);
     const [visibleFilterIds, setVisibleFilterIds] = useState(defaultVisible);
+    const initialPageSize = pageSize ?? batchSize;
+    // The footer's "Rows per page" <Select> only highlights a value that's actually one of its
+    // <MenuItem>s — fold the initial page size in (deduped, ascending) so it's never orphaned.
+    const resolvedPageSizeOptions = useMemo(() => Array.from(new Set([...pageSizeOptions, initialPageSize])).sort((a, b) => a - b), [pageSizeOptions, initialPageSize]);
     const [pagination, setPagination] = useState({
         pageIndex: 0,
-        pageSize: batchSize,
+        pageSize: initialPageSize,
     });
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
@@ -460,12 +464,17 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         const allowGrow = layoutMode === 'grid' || layoutMode === 'semantic';
         return columns.map((col) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { filterType, options, getSearchText, ...mrtCol } = col;
+            const { filterType, options, getSearchText, exportExcel, ...mrtCol } = col;
             if (allowGrow && mrtCol.grow === undefined) {
                 mrtCol.grow = true;
             }
             // Auto-inject filterFn only when the user hasn't already supplied one.
-            if (!mrtCol.filterFn && filterType) {
+            // Note: `filterType` omitted defaults to the same plain text-input chip
+            // as `filterType: 'text'` (see `ColumnFilterType` doc comment), so the
+            // text-matching branch below must handle both, not just the explicit
+            // `'text'` value — only `enableColumnFilter: false` / `'number'` should
+            // fall through without an injected filterFn.
+            if (!mrtCol.filterFn) {
                 if (filterType === 'date') {
                     // ISO date strings: "2026-05-05T00:00:00" → startsWith "2026-05-05"
                     mrtCol.filterFn = (row, columnId, filterValue) => filterValue
@@ -485,7 +494,16 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                         ? true
                         : filterValue.includes(row.getValue(columnId) ?? '');
                 }
-                // 'text' and 'number' use MRT's built-in client-side filtering
+                else if (!filterType || filterType === 'text') {
+                    // MRT's own default filterFn ('fuzzy', via match-sorter) is a
+                    // non-contiguous subsequence match — e.g. "PH-1" would match like
+                    // "%P%H%-%1%" instead of a plain substring. Use MRT's built-in
+                    // 'contains' filterFn instead, matching Global Search's substring
+                    // behavior (case-insensitive `.includes()`). Applies whether
+                    // `filterType` is explicitly `'text'` or simply omitted.
+                    mrtCol.filterFn = 'contains';
+                }
+                // 'number' uses MRT's built-in client-side filtering
             }
             return mrtCol;
         });
@@ -521,8 +539,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     }, [searchTextGetters]);
     // Stable references for the two table options below — recreating either
     // per render would defeat the memoization on every other MRT callback
-    // (see docs/arch-performance.mdx: all function/object props passed into
-    // useMaterialReactTable must be memoized).
+    // (all function/object props passed into useMaterialReactTable must be memoized).
     const tpFilterFns = useMemo(() => ({ tpGlobalSearch: tpGlobalSearchFn }), [tpGlobalSearchFn]);
     const getColumnCanGlobalFilter = useCallback(() => true, []);
     // ── Derive column list for filter chip picker ──────────────────────────────
@@ -589,7 +606,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         const exportRows = scope === 'filtered' && tableRef.current
             ? tableRef.current.getFilteredRowModel().rows.map((r) => r.original)
             : rows;
-        const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey);
+        const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey && c.exportExcel !== false);
         const headerArgb = hexToArgb(exportHeaderBgColor ?? headerBgColor) ?? 'FF1565C0';
         const textArgb = hexToArgb(exportHeaderTextColor) ?? 'FFFFFFFF';
         const headerRow = dataCols.map((c) => c.header ?? '');
@@ -753,7 +770,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         availableColumns, effectiveMaxVisibleFilters, densityTokens, handleToggleFilter,
     ]);
     const renderToolbarInternalActions = useCallback(({ table: t }) => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [jsx(MRT_ToggleGlobalFilterButton, { table: t, id: `${resolvedGridId}_global_search_icon` }), jsx(MRT_ShowHideColumnsButton, { table: t, id: `${resolvedGridId}_columns_icon` }), showDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: t, id: `${resolvedGridId}_density_icon` })), jsx(MRT_ToggleFullScreenButton, { table: t, id: `${resolvedGridId}_fullscreen_icon` })] })), [resolvedGridId, showDensityToggle]);
-    const renderBottomToolbar = useCallback(({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens, gridId: resolvedGridId, isStacked: isMobileTier, isClientFiltered: isFiltered, filteredRowCount: t.getFilteredRowModel().rows.length, pageRowCount: rows.length })), [totalRecords, isFetching, isLoading, pageSizeOptions, densityTokens, resolvedGridId, isMobileTier, isFiltered, rows]);
+    const renderBottomToolbar = useCallback(({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: resolvedPageSizeOptions, density: densityTokens, gridId: resolvedGridId, isStacked: isMobileTier, isClientFiltered: isFiltered, filteredRowCount: t.getFilteredRowModel().rows.length, pageRowCount: rows.length })), [totalRecords, isFetching, isLoading, resolvedPageSizeOptions, densityTokens, resolvedGridId, isMobileTier, isFiltered, rows]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,

package/dist/components/PaginatedGrid/types.d.ts

@@ -100,6 +100,25 @@ export type TPColumnDef<TData extends object = object, TValue = any> = MRT_Colum
      * the raw accessor value is matched by default in that case.
      */
     getSearchText?: (row: TData) => string | number | null | undefined;
+    /**
+     * Whether this column is included in the Excel (`.xlsx`) export.
+     *
+     * Set to `false` on columns that only render UI (e.g. edit/delete action
+     * icons) and have no meaningful exported value:
+     *
+     * ```ts
+     * {
+     *   id: 'actions',
+     *   header: 'Actions',
+     *   Cell: ({ row }) => <IconButton onClick={() => onEdit(row.original)}><EditIcon /></IconButton>,
+     *   exportExcel: false,
+     * }
+     * ```
+     *
+     * Default: `true` — every column with an `accessorKey` is exported unless
+     * explicitly opted out.
+     */
+    exportExcel?: boolean;
 };
 export interface InvoiceDetail {
     Data_from: string;

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm4.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/utils/Constants/FormConstants.d.ts

@@ -9,6 +9,8 @@ import { VariantProps, FormRenderProps } from '../Interface/FormInterface';
  * @returns {JSX.Element | false} The rendered label element or false if not shown.
  */
 export declare const renderLabel: (variant: VariantProps, props: FormRenderProps, showLabel?: boolean) => false | import("react/jsx-runtime").JSX.Element;
+/** True when this field should render its label outside/above the input instead of MUI's floating inline label — either because the caller forced it, or the field opted into `labelVariant: 'static'`. */
+export declare const usesStaticLabel: (props: FormRenderProps) => boolean;
 /**
  * Formats a date string in "M/YYYY" or "MM/YYYY" format to "MM/01/YYYY".
  *

package/dist/utils/Constants/FormConstants.esm.js

@@ -9,7 +9,9 @@ import dayjs from 'dayjs';
  * @param {boolean} [showLabel=false] - Whether to always show the label.
  * @returns {JSX.Element | false} The rendered label element or false if not shown.
  */
-const renderLabel = (variant, props, showLabel = false) => (variant === 'standard' || showLabel) && (jsxs("span", { id: `${props.item.name}-label`, className: "formInputlabel", style: { fontSize: '12px' }, children: [props.item.label, ' ', props.item.required && (jsx("span", { "aria-hidden": "true", style: { color: 'var(--mui-palette-error-main, #B3261E)' }, children: "*" }))] }));
+const renderLabel = (variant, props, showLabel = false) => (variant === 'standard' || showLabel || props.item.labelVariant === 'static') && (jsxs("span", { id: `${props.item.name}-label`, className: "formInputlabel", style: { fontSize: '12px', ...(props.item.labelVariant === 'static' ? props.item.labelSx : {}) }, children: [props.item.label, ' ', props.item.required && (jsx("span", { "aria-hidden": "true", style: { color: 'var(--mui-palette-error-main, #B3261E)' }, children: "*" }))] }));
+/** True when this field should render its label outside/above the input instead of MUI's floating inline label — either because the caller forced it, or the field opted into `labelVariant: 'static'`. */
+const usesStaticLabel = (props) => props.item.labelVariant === 'static';
 /**
  * Formats a date string in "M/YYYY" or "MM/YYYY" format to "MM/01/YYYY".
  *
@@ -75,4 +77,4 @@ const extractDate = (inputDateString) => {
     return formattedDate;
 };
 
-export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel };
+export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel, usesStaticLabel };

package/dist/utils/Interface/FormInterface.d.ts

@@ -87,6 +87,16 @@ export interface FormSectionPropsItem {
     id?: string;
     className?: string;
     dataAttr?: any;
+    /**
+     * Overrides how this field's label is positioned, regardless of the form-level `variant`.
+     * `'floating'` (default when omitted) keeps every existing consumer's current look —
+     * the label sits inside the input border and floats up on focus/fill. `'static'` renders
+     * the label as a fixed caption above the input instead (no floating, no MUI notch).
+     * Opt-in per field; omitting it changes nothing for existing usage.
+     */
+    labelVariant?: 'floating' | 'static';
+    /** Style overrides for the label span when `labelVariant: 'static'` is used. */
+    labelSx?: SxProps<Theme>;
 }
 export type VariantProps = 'standard' | 'outlined' | '';
 export interface FormRenderProps {

package/dist/utils/Interface/MainInterface.d.ts

@@ -5,9 +5,27 @@ export interface ProjectComponentTPButton {
     isEnableConfirmDialog: boolean;
     sx?: SxProps<Theme>;
 }
+/**
+ * Optional brand colors for the `toggleSwitch` field. When omitted entirely (the default for
+ * every existing consumer), `FormActiveSwitch` renders its original pill-switch look unchanged.
+ * Providing this object opts an app into the compact iOS-style switch + title/description card.
+ */
+export interface ProjectComponentTPToggleSwitch {
+    onColor?: string;
+    offColor?: string;
+}
+/**
+ * Optional checked-state color for `radio-group` fields. Omitted = the existing stock MUI blue
+ * (`#1976d2`) is unchanged for every current consumer.
+ */
+export interface ProjectComponentTPRadioGroup {
+    checkedColor?: string;
+}
 export interface ProjectComponentStyles {
     TPButton: ProjectComponentTPButton[];
     TPButtonCommonSx: SxProps<Theme>;
+    TPToggleSwitch?: ProjectComponentTPToggleSwitch;
+    TPRadioGroup?: ProjectComponentTPRadioGroup;
 }
 export interface ProjectThemeStyles {
     Component: ProjectComponentStyles;

package/dist/utils/index.esm.js

@@ -1,4 +1,4 @@
 export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor } from './Constants/FunctionConstants.esm.js';
-export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel } from './Constants/FormConstants.esm.js';
+export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel, usesStaticLabel } from './Constants/FormConstants.esm.js';
 
 // Utility Functions - Helper functions for form operations and data manipulation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "3.0.7",
+  "version": "3.0.10",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",