react-restyle-components 0.4.56 → 0.4.58

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-group-by-multiple-select-multiple-fields-display/auto-complete-filter-group-by-multiple-select-multiple-fields-display.component.js

@@ -5,7 +5,7 @@ import { Icon } from '../../Icon/Icon';
 import { AutoCompleteEmptyState } from '../shared/AutoCompleteEmptyState';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', groupByField, selectionConfig = {}, displayConfig = {}, uiConfig = {}, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, groupByDetails, onFilter, onUpdate, onSelect, onClearAll, onBlur, className, style, filterDebounceDelay = 500, optionsRenderKey, }) => {
+export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', groupByField, selectionConfig = {}, displayConfig = {}, uiConfig = {}, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, groupByDetails, onFilter, onUpdate, onSelect, onClearAll, onBlur, className, style, filterDebounceDelay = 1000, optionsRenderKey, }) => {
     // Merge configs with defaults
     const { isSelectedStringArray = false, maxSelection, onSelectionChange, } = selectionConfig;
     const { displayKeys, displaySeparator = ' - ', fallbackKeys = ['name', 'code'], renderItem, renderGroupName, } = displayConfig;
@@ -41,6 +41,7 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const [isListOpen, setIsListOpen] = useState(false);
     const [totalItems, setTotalItems] = useState(0);
+    const [isFiltering, setIsFiltering] = useState(false);
     // Internal filter state
     const [internalFilterText, setInternalFilterText] = useState('');
     const [groupFilters, setGroupFilters] = useState({});
@@ -220,6 +221,8 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
         setSelectedItems(Array.isArray(data?.selected) && !isSelectedStringArray
             ? data.selected
             : allSelected);
+        if (onFilter)
+            setIsFiltering(false);
     }, [
         data.list,
         data.selected,
@@ -246,6 +249,7 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
     const debouncedFilter = useCallback((search) => {
         if (!onFilterRef.current)
             return;
+        setIsFiltering(true);
         // Clear any existing timeout
         if (debounceTimeoutRef.current) {
             clearTimeout(debounceTimeoutRef.current);
@@ -385,7 +389,7 @@ export const AutoCompleteFilterGroupByMultipleSelectMultipleFieldsDisplay = ({ u
         const filteredOptions = getFilteredGroupedOptions();
         const groupNames = Object.keys(filteredOptions).sort();
         if (groupNames.length === 0) {
-            return (_jsxs("div", { className: cn(s['p-2']), children: [_jsx(AutoCompleteEmptyState, { loader: loader, hasSearchText: !!(internalFilterText?.trim() || Object.values(groupFilters).some((v) => v?.trim())), emptyStateMessage: emptyStateMessage, emptyStateDescription: emptyStateDescription }), internalFilterText && (_jsx("div", { className: cn(s['flex'], s['justify-center'], s['mt-2']), children: _jsx("button", { type: "button", onClick: () => {
+            return (_jsxs("div", { className: cn(s['p-2']), children: [_jsx(AutoCompleteEmptyState, { loader: loader || isFiltering, hasSearchText: !!(internalFilterText?.trim() || Object.values(groupFilters).some((v) => typeof v === 'string' && v.trim())), loadingDelayMs: filterDebounceDelay, emptyStateMessage: emptyStateMessage, emptyStateDescription: emptyStateDescription }), internalFilterText && (_jsx("div", { className: cn(s['flex'], s['justify-center'], s['mt-2']), children: _jsx("button", { type: "button", onClick: () => {
                                 setInternalFilterText('');
                                 setValue('');
                             }, className: cn(s['text-xs'], s['px-3'], s['py-1'], s['bg-blue-500'], s['text-white'], s['rounded'], s['hover:bg-blue-600']), children: "Clear Search" }) }))] }));

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multi-select-multi-fields-display-drag-drop/auto-complete-filter-multi-select-multi-fields-display-drag-drop.component.js

@@ -34,7 +34,7 @@ export const DraggableSelectedItem = ({ item, index, onRemove, displayKey, uniqu
     }
     return (_jsxs("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, className: cn(s['flex'], s['text-white'], s['gap-1'], s['bg-blue-500'], s['p-1'], s['rounded'], s['cursor-move'], className), children: [_jsx("div", { className: cn(s['flex'], s['w-fit'], s['cursor-pointer'], s['items-center']), onClick: handleRemove, children: _jsx(Icon, { nameIcon: "BsTrashFill", propsIcon: { size: 16, color: 'white' } }) }), _jsx("span", { children: getItemDisplayText() })] }));
 };
-export const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop = ({ componentKey, uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, defaultValue = '', displayConfig = {}, dragDropConfig = {}, selectionConfig = {}, uiConfig = {}, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay = 300, }) => {
+export const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop = ({ componentKey, uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, defaultValue = '', displayConfig = {}, dragDropConfig = {}, selectionConfig = {}, uiConfig = {}, onFilter, onUpdate, onSelect, onBlur, className, style, filterDebounceDelay = 1000, }) => {
     // Merge configs with defaults
     const { enabled: dragDropEnabled = true, strategy = horizontalListSortingStrategy, onDragEnd: customOnDragEnd, animationDuration = 200, } = dragDropConfig;
     const { maxSelection, onSelectionChange } = selectionConfig;
@@ -59,6 +59,7 @@ export const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop = ({ compon
     const [options, setOptions] = useState([]);
     const [originalOptions, setOriginalOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
+    const [isFiltering, setIsFiltering] = useState(false);
     const refSelectedItems = useRef(data?.selected || []);
     const [selectedItems, setSelectedItems] = useState(data?.selected || []);
     const sensors = useSensors(useSensor(PointerSensor));
@@ -101,6 +102,8 @@ export const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop = ({ compon
         const list = data?.list || [];
         setOriginalOptions(getSelectedItem(selected, list));
         setOptions(getSelectedItem(selected, list));
+        if (onFilter)
+            setIsFiltering(false);
         // Update both ref and state with sort field for drag-drop
         const itemsWithSort = selected.map((sItem, index) => ({
             ...sItem,
@@ -118,6 +121,7 @@ export const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop = ({ compon
             return () => { };
         let timeout;
         return (search) => {
+            setIsFiltering(true);
             clearTimeout(timeout);
             timeout = setTimeout(() => {
                 onFilter(search);
@@ -226,5 +230,5 @@ export const AutoCompleteFilterMultiSelectMultiFieldsDisplayDragDrop = ({ compon
                                             ? `${componentKey}_${index}_check_box_view`
                                             : undefined), _jsx("span", { className: cn(s['flex'], s['ml-2']), children: displayConfig.renderItem
                                                 ? displayConfig.renderItem(item)
-                                                : getItemDisplayText(item) })] }) }, `${componentKey || 'item'}_${index}_list`))) }, componentKey ? `${componentKey}_listView` : undefined)) : (_jsx(AutoCompleteEmptyState, { loader: loader, hasSearchText: !!value?.trim(), emptyStateMessage: emptyStateMessage || 'No Results Found', emptyStateDescription: "Try adjusting your search" }))] }, componentKey ? `${componentKey}_list_wrapper_view` : undefined))] }, componentKey ? `${componentKey}_wrapperView` : undefined) }));
+                                                : getItemDisplayText(item) })] }) }, `${componentKey || 'item'}_${index}_list`))) }, componentKey ? `${componentKey}_listView` : undefined)) : (_jsx(AutoCompleteEmptyState, { loader: loader || isFiltering, hasSearchText: !!value?.trim(), loadingDelayMs: filterDebounceDelay, emptyStateMessage: emptyStateMessage || 'No Results Found', emptyStateDescription: "Try adjusting your search" }))] }, componentKey ? `${componentKey}_list_wrapper_view` : undefined))] }, componentKey ? `${componentKey}_wrapperView` : undefined) }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.d.ts

@@ -9,9 +9,11 @@ export interface AutoCompleteFilterMultiSelectSelectedTopDisplayProps {
     name?: string;
     showSelectAllSection?: boolean;
     onFilter?: (value: string) => void;
+    /** How long (ms) to show "Loading..." before "No Results Found". Default 1000. */
+    filterDebounceDelay?: number;
     onUpdate?: (items?: Array<any>) => void;
     onSelect: (items: any) => void;
     onBlur?: (e: any) => void;
     dynamicCheck?: string;
 }
-export declare const AutoCompleteFilterMultiSelectSelectedTopDisplay: ({ uniqueField, loader, placeholder, data, hasError, disable, isUpperCase, name, showSelectAllSection, onFilter, onUpdate, onSelect, onBlur, dynamicCheck, }: AutoCompleteFilterMultiSelectSelectedTopDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterMultiSelectSelectedTopDisplay: ({ uniqueField, loader, placeholder, data, hasError, disable, isUpperCase, name, showSelectAllSection, onFilter, filterDebounceDelay, onUpdate, onSelect, onBlur, dynamicCheck, }: AutoCompleteFilterMultiSelectSelectedTopDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multi-select-selected-top-display/auto-complete-filter-multi-select-selected-top-display.component.js

@@ -6,11 +6,12 @@ import { AutoCompleteEmptyState } from '../shared/AutoCompleteEmptyState';
 import { debounce } from '@techabl/core-utils';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const AutoCompleteFilterMultiSelectSelectedTopDisplay = ({ uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, showSelectAllSection = true, onFilter, onUpdate, onSelect, onBlur, dynamicCheck = 'panelCode', }) => {
+export const AutoCompleteFilterMultiSelectSelectedTopDisplay = ({ uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, showSelectAllSection = true, onFilter, filterDebounceDelay = 1000, onUpdate, onSelect, onBlur, dynamicCheck = 'panelCode', }) => {
     const [value, setValue] = useState('');
     const [options, setOptions] = useState([]);
     const [originalOptions, setOriginalOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
+    const [isFiltering, setIsFiltering] = useState(false);
     const useOutsideAlerter = (ref) => {
         useEffect(() => {
             function handleClickOutside(event) {
@@ -73,21 +74,29 @@ export const AutoCompleteFilterMultiSelectSelectedTopDisplay = ({ uniqueField =
     useEffect(() => {
         setOriginalOptions(getSelectedItem(data.selected, data.list));
         setOptions(getSelectedItem(data.selected, data.list));
+        if (onFilter)
+            setIsFiltering(false);
     }, [data, data.selected]);
     const onChange = (e) => {
         const search = e.target.value;
         setValue(search);
-        debounce(() => {
-            onFilter && onFilter(search);
-        });
+        if (onFilter) {
+            setIsFiltering(true);
+            debounce(() => {
+                onFilter(search);
+            });
+        }
     };
     const onKeyUp = (e) => {
         const charCode = e.which ? e.which : e.keyCode;
         if (charCode === 8) {
             const search = e.target.value;
-            debounce(() => {
-                onFilter && onFilter(search);
-            });
+            if (onFilter) {
+                setIsFiltering(true);
+                debounce(() => {
+                    onFilter(search);
+                });
+            }
         }
     };
     // Handle select all functionality
@@ -168,5 +177,5 @@ export const AutoCompleteFilterMultiSelectSelectedTopDisplay = ({ uniqueField =
                                             ?.map((item, index) => (_jsx("div", { className: cn(s['flex'], s['items-center'], s['gap-3'], s['p-3'], s['hover:bg-gray-50'], s['border-l-4'], s['border-transparent'], s['transition-colors']), children: _jsxs("label", { className: cn(s['flex'], s['items-center'], s['cursor-pointer'], s['w-full']), children: [_jsx("input", { type: "checkbox", checked: item.selected || false, onChange: () => onSelect([{ ...item, selected: !item.selected }]), className: cn(s['h-4'], s['w-4'], s['text-blue-600'], s['border-gray-300'], s['rounded'], s['focus:ring-blue-500'], s['cursor-pointer']) }), _jsx("div", { className: cn(s['ml-3'], s['flex'], s['flex-col']), children: _jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['text-gray-700']), children: data.displayKey
                                                                 ?.map((key) => item[key])
                                                                 .filter(Boolean)
-                                                                .join(' - ') || 'Unnamed Item' }) })] }) }, `available-${index}`))) }) })), (!options || options.length === 0) && (_jsx(AutoCompleteEmptyState, { loader: loader, hasSearchText: !!value?.trim(), emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search terms" }))] })] }))] }) }));
+                                                                .join(' - ') || 'Unnamed Item' }) })] }) }, `available-${index}`))) }) })), (!options || options.length === 0) && (_jsx(AutoCompleteEmptyState, { loader: loader || isFiltering, hasSearchText: !!value?.trim(), loadingDelayMs: filterDebounceDelay, emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search terms" }))] })] }))] }) }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts

@@ -69,10 +69,12 @@ export interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
     styles?: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayStyles;
     /** Maximum height for dropdown (e.g., '200px', '300px'). Shows scrollbar when content exceeds this height */
     maxHeight?: string;
+    /** How long (ms) to show "Loading..." before "No Results Found". Default 1000. */
+    filterDebounceDelay?: number;
     onFilter?: (value: string) => void;
     onUpdate: (selectedItems: any[]) => void;
     onSelect: (item: any) => any;
     onBlur?: (e: any) => void;
     onClickInput?: () => void;
 }
-export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, classNames, styles, maxHeight, onFilter, onUpdate, onSelect, onBlur, onClickInput, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, classNames, styles, maxHeight, filterDebounceDelay, onFilter, onUpdate, onSelect, onBlur, onClickInput, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js

@@ -6,11 +6,12 @@ import { AutoCompleteEmptyState } from '../shared/AutoCompleteEmptyState';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
 import { debounce } from '@techabl/core-utils';
-export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, classNames = {}, styles = {}, maxHeight = '250px', onFilter, onUpdate, onSelect, onBlur, onClickInput, }) => {
+export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, classNames = {}, styles = {}, maxHeight = '250px', filterDebounceDelay = 1000, onFilter, onUpdate, onSelect, onBlur, onClickInput, }) => {
     const [value, setValue] = useState('');
     const [options, setOptions] = useState();
     const [originalOptions, setOriginalOptions] = useState();
     const [isListOpen, setIsListOpen] = useState(false);
+    const [isFiltering, setIsFiltering] = useState(false);
     const useOutsideAlerter = (ref) => {
         useEffect(() => {
             function handleClickOutside(event) {
@@ -86,21 +87,29 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
     useEffect(() => {
         setOriginalOptions(getSelectedItem(data.selected, data.list));
         setOptions(getSelectedItem(data.selected, data.list));
+        if (onFilter)
+            setIsFiltering(false);
     }, [data, data.selected]);
     const onChange = (e) => {
         const search = e.target.value;
         setValue(search);
-        debounce(() => {
-            onFilter && onFilter(search);
-        });
+        if (onFilter) {
+            setIsFiltering(true);
+            debounce(() => {
+                onFilter(search);
+            });
+        }
     };
     const onKeyUp = (e) => {
         const charCode = e.which ? e.which : e.keyCode;
         if (charCode === 8) {
             const search = e.target.value;
-            debounce(() => {
-                onFilter && onFilter(search);
-            });
+            if (onFilter) {
+                setIsFiltering(true);
+                debounce(() => {
+                    onFilter(search);
+                });
+            }
         }
     };
     return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], classNames.container), style: styles.container, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
@@ -131,5 +140,5 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
                     }, children: _jsx("ul", { className: classNames.list, style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-1'], classNames.listItem), style: styles.listItem, children: _jsxs("label", { className: cn(s['flex'], s['items-center'], classNames.label), style: styles.label, children: [_jsx("input", { id: index?.toString(), className: cn(s['flex'], s['h-4'], s['w-4'], classNames.checkbox), style: styles.checkbox, type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }), ' ', _jsx("span", { className: cn(s['flex'], s['ml-2'], classNames.itemText), style: styles.itemText, children: data.displayKey
                                             .map((key) => `${item[key]}
                               `)
-                                            .join(' - ') })] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-200'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx(AutoCompleteEmptyState, { loader: loader, hasSearchText: !!value?.trim(), emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" }) }))) : null] }) }));
+                                            .join(' - ') })] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-200'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx(AutoCompleteEmptyState, { loader: loader || isFiltering, hasSearchText: !!value?.trim(), loadingDelayMs: filterDebounceDelay, emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" }) }))) : null] }) }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.d.ts

@@ -23,6 +23,8 @@ export interface AutoCompleteFilterSingleSelectStyles {
 }
 interface AutoCompleteFilterSingleSelectProps {
     loader?: boolean;
+    /** How long (ms) to show "Loading..." before "No Results Found". Default 1000. */
+    filterDebounceDelay?: number;
     disable?: boolean;
     displayValue?: string;
     placeholder?: string;
@@ -33,5 +35,5 @@ interface AutoCompleteFilterSingleSelectProps {
     onFilter: (item: any) => void;
     onSelect: (item: any) => any;
 }
-export declare const AutoCompleteFilterSingleSelect: ({ disable, loader, displayValue, placeholder, data, hasError, classNames, styles, onFilter, onSelect, }: AutoCompleteFilterSingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterSingleSelect: ({ disable, loader, filterDebounceDelay, displayValue, placeholder, data, hasError, classNames, styles, onFilter, onSelect, }: AutoCompleteFilterSingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js

@@ -6,10 +6,11 @@ import { AutoCompleteEmptyState } from '../shared/AutoCompleteEmptyState';
 import { debounce } from '@techabl/core-utils';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, classNames = {}, styles = {}, onFilter, onSelect, }) => {
+export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, filterDebounceDelay = 1000, displayValue = '', placeholder = 'Search...', data, hasError = false, classNames = {}, styles = {}, onFilter, onSelect, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState();
     const [isListOpen, setIsListOpen] = useState(false);
+    const [isFiltering, setIsFiltering] = useState(false);
     const useOutsideAlerter = (ref) => {
         useEffect(() => {
             function handleClickOutside(event) {
@@ -28,6 +29,7 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
     useOutsideAlerter(wrapperRef);
     useEffect(() => {
         setOptions(data.list);
+        setIsFiltering(false);
     }, [data]);
     useEffect(() => {
         setValue(displayValue);
@@ -35,11 +37,14 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
     const handleInputChange = (e) => {
         const search = e.target.value;
         setValue(search);
+        setIsFiltering(true);
         const filteredOptions = data.list.filter((item) => item[data.displayKey].toLowerCase().includes(search.toLowerCase()));
         setOptions(filteredOptions);
         debounce(() => {
             onFilter(search);
         });
+        // Clear loading after filter completes (local) or when parent updates data
+        setTimeout(() => setIsFiltering(false), 150);
     };
     return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: cn(s['w-full'], s['relative'], classNames.container), style: styles.container, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
                         [s['border-red']]: hasError,
@@ -52,5 +57,5 @@ export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false
                                 setValue(item[data.displayKey]);
                                 setIsListOpen(false);
                                 onSelect(item);
-                            }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black'], classNames.itemLabel), style: styles.itemLabel, children: item[data.displayKey] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx(AutoCompleteEmptyState, { loader: loader, hasSearchText: !!value?.trim(), emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" }) }))) : null] }) }));
+                            }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black'], classNames.itemLabel), style: styles.itemLabel, children: item[data.displayKey] }) }, index))) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['rounded-sm'], classNames.emptyState), style: { zIndex: 80, width: '100%', ...styles.emptyState }, children: _jsx(AutoCompleteEmptyState, { loader: loader || isFiltering, hasSearchText: !!value?.trim(), loadingDelayMs: filterDebounceDelay, emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" }) }))) : null] }) }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts

@@ -33,11 +33,13 @@ interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     className?: string;
     posstion?: string;
     keyboard?: string;
+    /** How long (ms) to show "Loading..." message before "No Results Found". Default 1000. */
+    filterDebounceDelay?: number;
     classNames?: AutoCompleteFilterSingleSelectMultiFieldsDisplayClassNames;
     styles?: AutoCompleteFilterSingleSelectMultiFieldsDisplayStyles;
     onFilter?: (item: any) => void;
     onSelect?: (item: any) => any;
     onBlur?: (item: any) => any;
 }
-export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, keyboard, classNames: customClassNames, styles: customStyles, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, keyboard, filterDebounceDelay, classNames: customClassNames, styles: customStyles, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/src/core-components/src/components/AutoComplete/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js

@@ -96,7 +96,7 @@ const injectKeyframes = () => {
 };
 // Loading spinner component
 const LoadingSpinner = () => (_jsx("div", { style: animationStyles.spinner, role: "status", "aria-label": "Loading" }));
-export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', classNames: customClassNames = {}, styles: customStyles = {}, onFilter, onSelect, onBlur, }) => {
+export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', filterDebounceDelay = 1000, classNames: customClassNames = {}, styles: customStyles = {}, onFilter, onSelect, onBlur, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState(data.list);
     const [isListOpen, setIsListOpen] = useState(false);
@@ -175,6 +175,8 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
         else {
             setOptions(data.list);
         }
+        // Clear loading when parent updates data (e.g. after onFilter API response)
+        setIsFiltering(false);
     }, [data]);
     useEffect(() => {
         setValue(displayValue);
@@ -185,7 +187,7 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
         setFilterValue(search);
         setIsFiltering(true);
         const filteredOptions = data.list.filter((item) => data.displayKey.some((key) => item[key]?.toString().toLowerCase().includes(search.toLowerCase())));
-        // Animate transition
+        // Animate transition (local filter)
         setIsAnimating(true);
         setTimeout(() => {
             setOptions(filteredOptions);
@@ -295,5 +297,5 @@ export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = fal
                                         .join(' - '), children: data.displayKey
                                         .map((key) => item[key])
                                         .filter((value) => value !== null && value !== undefined)
-                                        .join(' - ') }) }, index))) })) : (_jsx(AutoCompleteEmptyState, { loader: loader, hasSearchText: !!value?.trim(), emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" })) }) }))] }) }));
+                                        .join(' - ') }) }, index))) })) : (_jsx(AutoCompleteEmptyState, { loader: loader || isFiltering, hasSearchText: !!value?.trim(), loadingDelayMs: filterDebounceDelay, emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" })) }) }))] }) }));
 };

package/lib/src/core-components/src/components/AutoComplete/auto-complete-group-by/auto-complete-group-by.component.d.ts

@@ -1,9 +1,11 @@
 interface AutocompleteGroupByProps {
     data: any[];
+    /** How long (ms) to show "Loading..." before "No Results Found". Default 1000. */
+    filterDebounceDelay?: number;
     hasError?: boolean;
     displayValue?: string;
     onChange?: (item: any, children: any) => void;
     onClose?: () => void;
 }
-export declare const AutocompleteGroupBy: ({ data, hasError, displayValue, onChange, onClose, }: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteGroupBy: ({ data, filterDebounceDelay, hasError, displayValue, onChange, onClose, }: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/src/core-components/src/components/AutoComplete/auto-complete-group-by/auto-complete-group-by.component.js

@@ -5,7 +5,7 @@ import { Icon } from '../../Icon/Icon';
 import { AutoCompleteEmptyState } from '../shared/AutoCompleteEmptyState';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const AutocompleteGroupBy = ({ data = [], hasError = false, displayValue = '', onChange, onClose, }) => {
+export const AutocompleteGroupBy = ({ data = [], filterDebounceDelay = 1000, hasError = false, displayValue = '', onChange, onClose, }) => {
     //const [userRouter, setUserRouter] = useState<any>()
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState();
@@ -112,5 +112,5 @@ export const AutocompleteGroupBy = ({ data = [], hasError = false, displayValue
                                                 onChange && onChange(item, children);
                                                 setIsListOpen(false);
                                                 setValue(children.title);
-                                            }, children: children.title }, childrenIndex))) })] }))) }) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-200'], s['rounded-md']), style: { zIndex: 80, width: '100%' }, children: _jsx(AutoCompleteEmptyState, { emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" }) }))) : null] }) }));
+                                            }, children: children.title }, childrenIndex))) })] }))) }) }) })) : (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-200'], s['rounded-md']), style: { zIndex: 80, width: '100%' }, children: _jsx(AutoCompleteEmptyState, { loadingDelayMs: filterDebounceDelay, emptyStateMessage: "No Results Found", emptyStateDescription: "Try adjusting your search" }) }))) : null] }) }));
 };

package/lib/src/core-components/src/components/AutoComplete/autocomplete/autocomplete.d.ts

@@ -55,6 +55,8 @@ export interface AutocompleteUIConfig {
     itemHeight?: number;
     /** Maximum height for dropdown */
     maxHeight?: string;
+    /** How long (ms) to show "Loading..." before "No Results Found". Default 1000. */
+    loadingDelayMs?: number;
     /** Z-index for dropdown */
     zIndex?: number;
     /** Show dropdown on focus */

package/lib/src/core-components/src/components/AutoComplete/autocomplete/autocomplete.js

@@ -10,7 +10,7 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
     const { enabled: filterEnabled = true, caseSensitive = false, filterFn, minCharacters = 0, } = filterConfig;
     const { renderOption, renderEmptyState, highlightActive = true, activeOptionClassName, optionClassName, } = displayConfig;
     const { enabled: keyboardEnabled = true, selectKeys = ['Enter'], closeKeys = ['Escape'], enterToSelect = true, escapeToClose = true, } = keyboardConfig;
-    const { placeholder = 'Search...', emptyStateMessage = 'Not Found Result!!', itemHeight = DEFAULT_ITEM_HEIGHT, maxHeight, zIndex = 999, showOnFocus = true, showOnClick = true, autoSelectFirst = false, loading = false, } = uiConfig;
+    const { placeholder = 'Search...', emptyStateMessage = 'Not Found Result!!', itemHeight = DEFAULT_ITEM_HEIGHT, maxHeight, loadingDelayMs = 1000, zIndex = 999, showOnFocus = true, showOnClick = true, autoSelectFirst = false, loading = false, } = uiConfig;
     // Helper to get option label (moved outside to avoid dependency issues)
     const getOptionLabel = useCallback((option) => {
         return typeof option === 'string' ? option : option.label;
@@ -317,7 +317,7 @@ export const Autocomplete = ({ value = '', onValueChange, options = [], filterCo
                     }) })) : (_jsx("div", { className: cn(s['flex'], s['flex-col'], s['items-center'], s['justify-center'], s['px-4'], s['py-3'], s['text-center']), style: {
                         margin: 0,
                         padding: 0,
-                    }, children: renderEmptyState ? (renderEmptyState()) : (_jsx(AutoCompleteEmptyState, { loader: loading, hasSearchText: !!searchValue?.trim(), emptyStateMessage: emptyStateMessage, emptyStateDescription: "Try adjusting your search" })) }))] }));
+                    }, children: renderEmptyState ? (renderEmptyState()) : (_jsx(AutoCompleteEmptyState, { loader: loading, hasSearchText: !!searchValue?.trim(), loadingDelayMs: loadingDelayMs, emptyStateMessage: emptyStateMessage, emptyStateDescription: "Try adjusting your search" })) }))] }));
     };
     // Update filtered options when options or search value changes
     useEffect(() => {

package/lib/src/core-components/src/components/AutoComplete/shared/AutoCompleteEmptyState.d.ts

@@ -4,6 +4,8 @@ export interface AutoCompleteEmptyStateProps {
     loader?: boolean;
     /** When true, user has typed/filtered - internally show Loading first, then No Results after delay */
     hasSearchText?: boolean;
+    /** How long (ms) to show "Loading..." before switching to "No Results Found". Default 400. */
+    loadingDelayMs?: number;
     /** Message when no results found (shown only when not loading) */
     emptyStateMessage?: string;
     /** Optional description below the message */

package/lib/src/core-components/src/components/AutoComplete/shared/AutoCompleteEmptyState.js

@@ -32,7 +32,7 @@ const injectKeyframes = () => {
         document.head.appendChild(style);
     }
 };
-export const AutoCompleteEmptyState = ({ loader = false, hasSearchText = false, emptyStateMessage = 'No Results Found', emptyStateDescription = 'Try adjusting your search', className, style, }) => {
+export const AutoCompleteEmptyState = ({ loader = false, hasSearchText = false, loadingDelayMs = LOADING_DELAY_MS, emptyStateMessage = 'No Results Found', emptyStateDescription = 'Try adjusting your search', className, style, }) => {
     const [internalLoading, setInternalLoading] = useState(hasSearchText);
     useEffect(() => {
         injectKeyframes();
@@ -41,13 +41,13 @@ export const AutoCompleteEmptyState = ({ loader = false, hasSearchText = false,
     useEffect(() => {
         if (hasSearchText) {
             setInternalLoading(true);
-            const t = setTimeout(() => setInternalLoading(false), LOADING_DELAY_MS);
+            const t = setTimeout(() => setInternalLoading(false), loadingDelayMs);
             return () => clearTimeout(t);
         }
         else {
             setInternalLoading(false);
         }
-    }, [hasSearchText]);
+    }, [hasSearchText, loadingDelayMs]);
     // loader (optional) from parent takes precedence; otherwise use internal logic
     const loading = loader || internalLoading;
     if (loading) {

package/lib/src/core-components/src/components/Table/Table.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef, } from 'react';
-import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, TableCellContent, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, ColumnToggleDragHandle, SelectionIndicator, SelectionCount, SelectSortButton, } from './elements';
+import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, TableCellContent, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeInputWrapper, PageSizeInput, PageSizeDropdownIcon, PageSizeDropdown, PageSizeDropdownItem, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, ColumnToggleDragHandle, SelectionIndicator, SelectionCount, SelectSortButton, } from './elements';
 import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, exportToExcel, } from './hooks';
 import { getFilterComponent } from './filters';
 import { Tooltip } from '../Tooltip';
+import { LoadingAnimateSpin } from '../Loader/loader.component';
 import { useColumnResize, getColumnStyle } from './columnResize';
 import { Icon } from '../Icon';
 // Column reorder is handled internally via popup drag & drop
@@ -54,9 +55,9 @@ const PrintIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stro
 const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const tableFilterCache = new Map();
 export const Table = forwardRef(function TableComponent(props, ref) {
-    const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', exportFormat = 'csv', columnToggle = false, isFieldSelector = true, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
+    const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, isLoading = false, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', exportFormat = 'csv', columnToggle = false, isFieldSelector = true, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
     // Quick configuration props
-    isDelete = false, isEditModify, isUpdate, isExport, isSelectRow, isSelectSort = false, onSelectSort, selectionActions, getNonSelectableRows, nonSelectableStyle, isView = false, fileName, hideExcelSheet = false, 
+    isDelete = false, isEditModify, isUpdate, isExport, isSelectRow, isSelectSort = false, onSelectSort, selectionActions, selectionHeaderActions, getNonSelectableRows, nonSelectableStyle, isView = false, fileName, hideExcelSheet = false, 
     // Quick callbacks
     onSelectedRow, selectedRowStyle, selectedRowClassName, onUpdateItem, onPageSizeChange, onFilter, clearAllFilter, onDelete, onEdit, onView, 
     // Dynamic configuration
@@ -169,6 +170,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const [selectionAnimation, setSelectionAnimation] = useState('none');
     // Select-sort state: stores keys to move to top (empty = not active)
     const [selectSortKeys, setSelectSortKeys] = useState([]);
+    // Page size input state
+    const [pageSizeInputFocused, setPageSizeInputFocused] = useState(false);
+    const [pageSizeInputValue, setPageSizeInputValue] = useState('');
+    const pageSizeDropdownRef = useRef(null);
     // Column toggle reorder state
     const [toggleDraggingColumn, setToggleDraggingColumn] = useState(null);
     const [toggleDragOverColumn, setToggleDragOverColumn] = useState(null);
@@ -225,6 +230,22 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [columnToggleOpen]);
+    // Close page size dropdown on outside click
+    useEffect(() => {
+        if (!pageSizeInputFocused)
+            return;
+        const handleClickOutside = (event) => {
+            if (pageSizeDropdownRef.current &&
+                !pageSizeDropdownRef.current.contains(event.target)) {
+                setPageSizeInputFocused(false);
+                setPageSizeInputValue('');
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [pageSizeInputFocused]);
     // Filter visibility (controlled or uncontrolled)
     const isFilterVisibilityControlled = controlledShowFilters !== undefined;
     const showFilterRow = isFilterVisibilityControlled
@@ -274,6 +295,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     // Track focused filter field to restore focus after data changes (or remounts)
     const focusedFilterFieldRef = useRef(cachedFilterState?.focusedField ?? null);
     const tableContainerRef = useRef(null);
+    const quickJumperInputRef = useRef(null);
     // Helper: save current filter/search/focus state to module-level cache
     const saveFilterCache = useCallback((updates) => {
         const current = tableFilterCache.get(id) || {
@@ -327,17 +349,20 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     }, [data]);
     // Pagination state
     const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, setPage, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
-    // Reset page to 0 when data changes (e.g., after server-side onFilter response)
-    // This ensures new data is visible without re-triggering onFilter.
+    // Reset page to 0 only when current page is out of bounds for the new data
+    // This allows pagination to work correctly without auto-resetting
     const prevDataRef = useRef(data);
     useEffect(() => {
         if (prevDataRef.current !== data) {
             prevDataRef.current = data;
-            if (page !== 0) {
-                setPage(0);
+            const calculatedTotal = totalSize ?? data.length;
+            const totalPages = Math.ceil(calculatedTotal / pageSize) || 1;
+            // Only reset page if current page is out of bounds
+            if (page >= totalPages) {
+                setPage(Math.max(0, totalPages - 1));
             }
         }
-    }, [data, page, setPage]);
+    }, [data, page, setPage, pageSize, totalSize]);
     // Row selection
     const { selectedKeys, isSelected, toggleRow, toggleAll, isAllSelected, isIndeterminate, } = useRowSelection(data, resolvedRowSelection?.keyField || keyField, resolvedRowSelection?.mode || 'none', resolvedRowSelection?.selectedRowKeys, resolvedRowSelection?.getCheckboxProps);
     // Row expansion
@@ -1117,7 +1142,30 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                         }
                                                         setToggleDraggingColumn(null);
                                                         setToggleDragOverColumn(null);
-                                                    }, children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField), onClick: (e) => e.stopPropagation() }), _jsx("span", { children: column.text }), reorderable && (_jsx(ColumnToggleDragHandle, { "$isDragging": toggleDraggingColumn === column.dataField, title: "Drag to reorder" }))] }, column.dataField)))] })] }))] }))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && isFieldSelector && (_jsxs("div", { ref: !showFilterToggle ? columnToggleRef : undefined, style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column, index) => (_jsxs(ColumnToggleItem, { "$reorderable": reorderable, "$isDragging": toggleDraggingColumn === column.dataField, "$isDragOver": toggleDragOverColumn === column.dataField, draggable: reorderable, onDragStart: (e) => {
+                                                    }, children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField), onClick: (e) => e.stopPropagation() }), _jsx("span", { children: column.text }), reorderable && (_jsx(ColumnToggleDragHandle, { "$isDragging": toggleDraggingColumn === column.dataField, title: "Drag to reorder" }))] }, column.dataField)))] })] }))] })), selectionHeaderActions &&
+                            (Array.isArray(selectionHeaderActions) ? (selectionHeaderActions.length > 0 && (_jsx("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: '8px',
+                                    alignItems: 'center',
+                                }, children: selectionHeaderActions.map((action, index) => {
+                                    const selectedRows = data.filter((row) => selectedKeys.has(getRowKey(row)));
+                                    const selectedKeysArray = Array.from(selectedKeys);
+                                    if (action.customComponent) {
+                                        const content = (_jsx("div", { style: { display: 'flex' }, children: action.customComponent }));
+                                        return (_jsx("div", { children: action.tooltip ? (_jsx(Tooltip, { content: action.tooltip, position: "bottom", children: content })) : (content) }, index));
+                                    }
+                                    return (_jsx("div", { children: _jsx(Icon, { nameIcon: action.nameIcon, propsIcon: action.propsIcon, onClick: () => {
+                                                if (!action.disabled && action.onClick) {
+                                                    action.onClick(selectedRows, selectedKeysArray);
+                                                }
+                                            }, isDisable: action.disabled, className: action.className, tooltip: action.tooltip || '' }) }, index));
+                                }) }))) : (_jsx("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: '8px',
+                                    alignItems: 'center',
+                                }, children: selectionHeaderActions })))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && isFieldSelector && (_jsxs("div", { ref: !showFilterToggle ? columnToggleRef : undefined, style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column, index) => (_jsxs(ColumnToggleItem, { "$reorderable": reorderable, "$isDragging": toggleDraggingColumn === column.dataField, "$isDragOver": toggleDragOverColumn === column.dataField, draggable: reorderable, onDragStart: (e) => {
                                                     if (!reorderable)
                                                         return;
                                                     setToggleDraggingColumn(column.dataField);
@@ -1210,20 +1258,26 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             return pages;
         };
         return (_jsxs(PaginationWrapper, { className: classNames.pagination, style: styles.pagination, children: [_jsxs(ToolbarGroup, { children: [(resolvedRowSelection?.mode === 'checkbox' || isSelectRow) &&
-                            selectedKeys.size > 0 && (_jsxs(_Fragment, { children: [selectionActions && selectionActions.length > 0 && (_jsx("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        gap: '8px',
-                                        alignItems: 'center',
-                                    }, children: selectionActions.map((action, index) => {
+                            selectedKeys.size > 0 && (_jsxs(_Fragment, { children: [selectionActions &&
+                                    (() => {
                                         const selectedRows = data.filter((row) => selectedKeys.has(getRowKey(row)));
-                                        const selectedKeysArray = Array.from(selectedKeys);
-                                        return (_jsx("div", { children: _jsx(Icon, { nameIcon: action.nameIcon, propsIcon: action.propsIcon, onClick: () => {
-                                                    if (!action.disabled) {
-                                                        action.onClick(selectedRows, selectedKeysArray);
-                                                    }
-                                                }, isDisable: action.disabled, className: action.className, tooltip: action.tooltip || '' }) }, index));
-                                    }) })), isSelectSort &&
+                                        const actions = typeof selectionActions === 'function'
+                                            ? selectionActions(selectedRows)
+                                            : selectionActions;
+                                        return (actions.length > 0 && (_jsx("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                gap: '8px',
+                                                alignItems: 'center',
+                                            }, children: actions.map((action, index) => {
+                                                const selectedKeysArray = Array.from(selectedKeys);
+                                                return (_jsx("div", { children: _jsx(Icon, { nameIcon: action.nameIcon, propsIcon: action.propsIcon, onClick: () => {
+                                                            if (!action.disabled) {
+                                                                action.onClick(selectedRows, selectedKeysArray);
+                                                            }
+                                                        }, isDisable: action.disabled, className: action.className, tooltip: action.tooltip || '' }) }, index));
+                                            }) })));
+                                    })(), isSelectSort &&
                                     (rowSelectionMode === 'checkbox' || isSelectRow) && (_jsx(Tooltip, { content: "Move selected to top", position: "top", children: _jsx(SelectSortButton, { onClick: () => {
                                             const keys = Array.from(selectedKeys);
                                             // Set internal state to trigger re-sort
@@ -1231,7 +1285,51 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                             // Also call optional callback
                                             const selectedRows = data.filter((row) => selectedKeys.has(getRowKey(row)));
                                             onSelectSort?.(selectedRows, keys);
-                                        }, "aria-label": "Move selected rows to top", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) }) }) }))] })), resolvedPaginationConfig?.showSizeChanger !== false && (_jsx(PageSizeSelect, { value: pageSize, onChange: (e) => handlePageSizeChange(Number(e.target.value)), children: (resolvedPaginationConfig?.pageSizeOptions || [10, 20, 30, 50]).map((size) => (_jsx("option", { value: size, children: size }, size))) }))] }), _jsxs(PaginationControls, { children: [_jsx(PageButton, { onClick: () => handlePageChange(0), disabled: page === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(page - 1), disabled: page === 0, children: _jsx(ChevronLeftIcon, {}) }), getPageNumbers().map((p, i) => typeof p === 'string' ? (_jsx("span", { style: { padding: '0 4px', color: 'white' }, children: p }, `ellipsis-${i}`)) : (_jsx(PageButton, { "$active": p === page, onClick: () => handlePageChange(p), children: p + 1 }, p))), _jsx(PageButton, { onClick: () => handlePageChange(page + 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(actualTotalPages - 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronsRightIcon, {}) })] }), showTotal && _jsx(PaginationInfo, { children: showTotal }), resolvedPaginationConfig?.showQuickJumper &&
+                                        }, "aria-label": "Move selected rows to top", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) }) }) }))] })), resolvedPaginationConfig?.showSizeChanger !== false && (_jsxs(PageSizeInputWrapper, { ref: pageSizeDropdownRef, children: [_jsx(PageSizeInput, { type: "text", value: pageSizeInputFocused ? pageSizeInputValue : pageSize, onChange: (e) => {
+                                        const value = e.target.value;
+                                        setPageSizeInputValue(value);
+                                        // If user types a valid number, update immediately
+                                        const numValue = parseInt(value, 10);
+                                        if (!isNaN(numValue) && numValue > 0 && numValue <= 1000) {
+                                            // Don't call handlePageSizeChange yet, wait for blur or Enter
+                                        }
+                                    }, onFocus: () => {
+                                        setPageSizeInputFocused(true);
+                                        setPageSizeInputValue('');
+                                    }, onBlur: () => {
+                                        // Apply the value if valid
+                                        if (pageSizeInputValue) {
+                                            const numValue = parseInt(pageSizeInputValue, 10);
+                                            if (!isNaN(numValue) && numValue > 0 && numValue <= 1000) {
+                                                handlePageSizeChange(numValue);
+                                            }
+                                        }
+                                        setTimeout(() => {
+                                            setPageSizeInputFocused(false);
+                                            setPageSizeInputValue('');
+                                        }, 200);
+                                    }, onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            const target = e.target;
+                                            const numValue = parseInt(target.value, 10);
+                                            if (!isNaN(numValue) && numValue > 0 && numValue <= 1000) {
+                                                handlePageSizeChange(numValue);
+                                                setPageSizeInputFocused(false);
+                                                setPageSizeInputValue('');
+                                                target.blur();
+                                            }
+                                        }
+                                        else if (e.key === 'Escape') {
+                                            setPageSizeInputFocused(false);
+                                            setPageSizeInputValue('');
+                                            e.target.blur();
+                                        }
+                                    }, placeholder: pageSizeInputFocused ? 'Type size...' : '', readOnly: !pageSizeInputFocused }), _jsx(PageSizeDropdownIcon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }), pageSizeInputFocused && (_jsx(PageSizeDropdown, { children: (resolvedPaginationConfig?.pageSizeOptions || [10, 20, 30, 50]).map((size) => (_jsx(PageSizeDropdownItem, { "$active": size === pageSize, onClick: () => {
+                                            handlePageSizeChange(size);
+                                            setPageSizeInputFocused(false);
+                                            setPageSizeInputValue('');
+                                        }, children: size }, size))) }))] }))] }), _jsxs(PaginationControls, { children: [_jsx(PageButton, { onClick: () => handlePageChange(0), disabled: page === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(page - 1), disabled: page === 0, children: _jsx(ChevronLeftIcon, {}) }), getPageNumbers().map((p, i) => typeof p === 'string' ? (_jsx("span", { style: { padding: '0 4px', color: 'white' }, children: p }, `ellipsis-${i}`)) : (_jsx(PageButton, { "$active": p === page, onClick: () => handlePageChange(p), children: p + 1 }, p))), _jsx(PageButton, { onClick: () => handlePageChange(page + 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { onClick: () => handlePageChange(actualTotalPages - 1), disabled: page >= actualTotalPages - 1, children: _jsx(ChevronsRightIcon, {}) })] }), showTotal && _jsx(PaginationInfo, { children: showTotal }), resolvedPaginationConfig?.showQuickJumper &&
                     (() => {
                         const handleQuickJump = (input) => {
                             const pageNum = parseInt(input.value, 10);
@@ -1244,7 +1342,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                             }
                             return false;
                         };
-                        return (_jsxs(QuickJumper, { children: ["Go to", _jsx("input", { type: "number", min: 1, max: actualTotalPages, placeholder: `1-${actualTotalPages}`, onKeyDown: (e) => {
+                        return (_jsxs(QuickJumper, { children: ["Go to", _jsx("input", { ref: quickJumperInputRef, type: "number", min: 1, max: actualTotalPages, placeholder: `1-${actualTotalPages}`, onKeyDown: (e) => {
                                         if (e.key === 'Enter') {
                                             e.preventDefault();
                                             const target = e.target;
@@ -1256,7 +1354,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                         const target = e.target;
                                         handleQuickJump(target);
                                     } }), _jsx(PageButton, { onClick: () => {
-                                        const input = document.querySelector(`#${id} input[type="number"]`);
+                                        const input = quickJumperInputRef.current;
                                         if (input) {
                                             handleQuickJump(input);
                                             input.blur();
@@ -1287,7 +1385,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             }
             // Also store in our container ref
             tableContainerRef.current = node;
-        }, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": resolvedRowSelection.columnWidth || 40, children: !resolvedRowSelection.hideSelectAll && (_jsx(Checkbox, { checked: isAllSelected, ref: (el) => {
+        }, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), isLoading && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: '1rem',
+                    right: '1rem',
+                    zIndex: 20,
+                }, children: _jsx(LoadingAnimateSpin, { width: "2rem", height: "2rem", borderWidth: "4px" }) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [resolvedRowSelection?.mode === 'checkbox' && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": resolvedRowSelection.columnWidth || 40, children: !resolvedRowSelection.hideSelectAll && (_jsx(Checkbox, { checked: isAllSelected, ref: (el) => {
                                                 if (el)
                                                     el.indeterminate = isIndeterminate;
                                             }, onChange: handleSelectAllChange })) })), expandable && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": expandable.columnWidth || 40 })), showRowNumber && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": rowNumberWidth, children: rowNumberTitle })), renderColumns.map((column, colIndex) => {

package/lib/src/core-components/src/components/Table/docs/PAGINATION_EXAMPLE.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PaginationExample: React.FC;
+export default PaginationExample;

package/lib/src/core-components/src/components/Table/docs/PAGINATION_EXAMPLE.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Table } from '..';
+// Generate sample data
+const generateUsers = (count) => {
+    const departments = ['Engineering', 'Sales', 'Marketing', 'HR', 'Finance'];
+    return Array.from({ length: count }, (_, i) => ({
+        _id: `user-${i + 1}`,
+        name: `User ${i + 1}`,
+        email: `user${i + 1}@example.com`,
+        age: 20 + (i % 50),
+        department: departments[i % departments.length],
+    }));
+};
+const PaginationExample = () => {
+    const [data] = useState(generateUsers(100));
+    const columns = [
+        {
+            dataField: 'name',
+            text: 'Name',
+            sort: true,
+        },
+        {
+            dataField: 'email',
+            text: 'Email',
+            sort: true,
+        },
+        {
+            dataField: 'age',
+            text: 'Age',
+            sort: true,
+            align: 'center',
+        },
+        {
+            dataField: 'department',
+            text: 'Department',
+            sort: true,
+            filter: true,
+        },
+    ];
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Table Pagination Improvements Demo" }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h2", { children: "Features Demonstrated:" }), _jsxs("ul", { children: [_jsx("li", { children: "\u2705 Click on page numbers (4, 5, etc.) - they stay active" }), _jsx("li", { children: "\u2705 Use Quick Jumper to navigate to any page" }), _jsx("li", { children: "\u2705 Page size selector with manual input + dropdown" }), _jsx("li", { children: "\u2705 Type custom page size (e.g., 15, 25, 35) and press Enter" }), _jsx("li", { children: "\u2705 Click page size input to see preset options (10, 20, 30, 50)" })] })] }), _jsx(Table, { id: "pagination-demo", data: data, columns: columns, keyField: "_id", pagination: true, paginationConfig: {
+                    page: 0,
+                    pageSize: 10,
+                    showSizeChanger: true,
+                    showQuickJumper: true,
+                    showTotal: true,
+                    pageSizeOptions: [10, 20, 30, 50],
+                }, searchable: true, filterable: true, bordered: true, hover: true, striped: true }), _jsxs("div", { style: { marginTop: '20px', padding: '15px', background: '#f0f9ff', borderRadius: '8px' }, children: [_jsx("h3", { children: "Testing Instructions:" }), _jsxs("ol", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Page Number Active State:" }), _jsxs("ul", { children: [_jsx("li", { children: "Click on page 4 or 5" }), _jsx("li", { children: "Notice the page number stays highlighted" }), _jsx("li", { children: "The correct data is displayed" })] })] }), _jsxs("li", { children: [_jsx("strong", { children: "Quick Jumper:" }), _jsxs("ul", { children: [_jsx("li", { children: "Type \"7\" in the \"Go to\" input" }), _jsx("li", { children: "Press Enter or click \"Go\"" }), _jsx("li", { children: "Page 7 becomes active and displays correct data" })] })] }), _jsxs("li", { children: [_jsx("strong", { children: "Page Size Input:" }), _jsxs("ul", { children: [_jsx("li", { children: "Click on the page size input (shows current size like \"10\")" }), _jsx("li", { children: "Dropdown appears with options: 10, 20, 30, 50" }), _jsx("li", { children: "Click \"20\" to change page size" }), _jsx("li", { children: "OR click the input again and type \"15\"" }), _jsx("li", { children: "Press Enter to apply custom size" }), _jsx("li", { children: "Pagination updates to show 15 items per page" })] })] })] })] })] }));
+};
+export default PaginationExample;

package/lib/src/core-components/src/components/Table/elements.d.ts

@@ -93,6 +93,13 @@ export declare const PageButton: import("styled-components/dist/types").IStyledC
     $active?: boolean | undefined;
 }>> & string;
 export declare const PageSizeSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
+export declare const PageSizeInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PageSizeInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const PageSizeDropdownIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PageSizeDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PageSizeDropdownItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $active?: boolean | undefined;
+}>> & string;
 export declare const QuickJumper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const EmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LoadingOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/src/core-components/src/components/Table/elements.js

@@ -64,6 +64,7 @@ export const ToolbarGroup = styled.div `
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
+  position: relative;
 `;
 export const SearchInput = styled.div `
   position: relative;
@@ -633,6 +634,8 @@ export const PaginationWrapper = styled.div `
   background: #6b7280;
   border-top: 1px solid ${tokens.outline || '#e5e7eb'};
   color: white;
+  position: relative;
+  overflow: visible;
 
   @media (max-width: 640px) {
     flex-direction: column;
@@ -694,6 +697,75 @@ export const PageSizeSelect = styled.select `
     border-color: ${tokens.primary || '#3b82f6'};
   }
 `;
+export const PageSizeInputWrapper = styled.div `
+  position: relative;
+  display: inline-block;
+  z-index: 1;
+`;
+export const PageSizeInput = styled.input `
+  height: 32px;
+  width: 70px;
+  padding: 0 24px 0 8px;
+  font-size: 13px;
+  color: #1f2937;
+  background: white;
+  border: 1px solid ${tokens.outline || '#d1d5db'};
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+
+  &:focus {
+    outline: none;
+    border-color: ${tokens.primary || '#3b82f6'};
+  }
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+`;
+export const PageSizeDropdownIcon = styled.div `
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+export const PageSizeDropdown = styled.div `
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  min-width: 100%;
+  background: white;
+  border: 1px solid ${tokens.outline || '#d1d5db'};
+  border-radius: 4px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 9999;
+  max-height: 200px;
+  overflow-y: auto;
+`;
+export const PageSizeDropdownItem = styled.div `
+  padding: 8px 12px;
+  font-size: 13px;
+  color: #1f2937;
+  cursor: pointer;
+  background: ${({ $active }) => ($active ? '#f3f4f6' : 'transparent')};
+
+  &:hover {
+    background: #f3f4f6;
+  }
+
+  &:active {
+    background: #e5e7eb;
+  }
+`;
 export const QuickJumper = styled.div `
   display: flex;
   align-items: center;

package/lib/src/core-components/src/components/Table/types.d.ts

@@ -335,6 +335,8 @@ export interface TableProps<T = any> {
     loading?: boolean;
     /** Custom loading indicator */
     loadingIndicator?: React.ReactNode;
+    /** Show loading spinner at top right (uses LoadingAnimateSpin) */
+    isLoading?: boolean;
     /** Enable pagination */
     pagination?: boolean;
     /** Pagination config */
@@ -602,8 +604,9 @@ export interface TableProps<T = any> {
      */
     onSelectSort?: (selectedRows: T[], selectedKeys: string[]) => void;
     /**
-     * Array of action items to display when rows are selected
-     * Each action item can have an icon, props, and onClick handler
+     * Array of action items to display when rows are selected.
+     * Can be a static array OR a function that receives selectedRows and returns an array.
+     * Each action item can have an icon, props, and onClick handler.
      */
     selectionActions?: Array<{
         /** Name of the icon from react-icons library (e.g., 'FaWhatsapp', 'FaTrash') */
@@ -614,15 +617,51 @@ export interface TableProps<T = any> {
             color?: string;
             [key: string]: any;
         };
-        /** Click handler - receives selected rows and their keys */
-        onClick: (selectedRows: T[], selectedKeys: string[]) => void;
+        /** Click handler - receives selected rows and their keys (selectedRows is optional) */
+        onClick: (selectedRows: T[], selectedKeys?: string[]) => void;
         /** Tooltip text to display on hover */
         tooltip?: string;
         /** Whether the action is disabled */
         disabled?: boolean;
         /** Additional className for the icon container */
         className?: string;
-    }>;
+    }> | ((selectedRows: T[]) => Array<{
+        nameIcon: string;
+        propsIcon?: {
+            size?: string | number;
+            color?: string;
+            [key: string]: any;
+        };
+        onClick: (selectedRows: T[], selectedKeys?: string[]) => void;
+        tooltip?: string;
+        disabled?: boolean;
+        className?: string;
+    }>);
+    /**
+     * Header toolbar actions (after Show/Hide Columns).
+     * Accepts array of action items OR a single React component.
+     * Each array item can be an icon (nameIcon) or a custom component (customComponent).
+     */
+    selectionHeaderActions?: Array<{
+        /** Name of the icon from react-icons library (e.g., 'FaWhatsapp', 'FaTrash') */
+        nameIcon?: string;
+        /** Custom component - when provided, renders this instead of Icon */
+        customComponent?: React.ReactNode;
+        /** Props to pass to the Icon component (when using nameIcon) */
+        propsIcon?: {
+            size?: string | number;
+            color?: string;
+            [key: string]: any;
+        };
+        /** Click handler - receives selected rows and their keys (when using nameIcon) */
+        onClick?: (selectedRows: T[], selectedKeys: string[]) => void;
+        /** Tooltip text to display on hover */
+        tooltip?: string;
+        /** Whether the action is disabled */
+        disabled?: boolean;
+        /** Additional className for the icon container */
+        className?: string;
+    }> | React.ReactNode;
     /** Enable row dragging */
     draggable?: boolean;
     /** On row drag end */

package/lib/src/core-components/src/tc.global.css

@@ -38,4 +38,17 @@
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.\!filter,.backdrop-blur-sm,.blur,.ring,.ring-2,.shadow,.shadow-inner,body{font-family:Arima Regular;font-size:14px}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.\!visible{visibility:visible!important}.top-1\/2{top:50%}.-translate-x-1\/2,.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.\!filter,.blur,.ring,.ring-2,.shadow,.shadow-inner,.backdrop-blur-sm,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.\!visible{visibility:visible!important}.top-1\/2{top:50%}.flex-grow,.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.backdrop-blur-sm,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}

package/lib/src/core-components/src/tc.module.css

@@ -5,4 +5,4 @@
  *   var(--primary), var(--brand-theme-purple), var(--surface), etc.
  */
 .flex-grow{--tw-translate-x:-50%}.shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.focus\:ring-0:focus{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}
-.form-textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}.form-textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}.form-textarea::placeholder{color:#6b7280;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}.main{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.inset-0{inset:0}.left-0{left:0}.right-2{right:.5rem}.right-3{right:.75rem}.top-full{top:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-99{z-index:99}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.my-auto{margin-bottom:auto;margin-top:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-auto{height:auto}.max-h-48{max-height:12rem}.max-h-60{max-height:15rem}.max-h-80{max-height:20rem}.max-h-96{max-height:24rem}.min-h-10{min-height:2.5rem}.w-1{width:.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-8{width:2rem}.w-80{width:20rem}.w-auto{width:auto}.w-fit{width:-webkit-fit-content;width:fit-content}.w-full{width:100%}.min-w-32{min-width:8rem}.max-w-32{max-width:8rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-spin{animation:spin 1s linear infinite}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-scroll{overflow-y:scroll}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-100px{border-radius:100px}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-b-xl{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-emerald-100{--tw-border-opacity:1;border-color:rgb(209 250 229/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-indigo-100{--tw-border-opacity:1;border-color:rgb(224 231 255/var(--tw-border-opacity,1))}.border-indigo-200{--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity,1))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity,1))}.border-purple-300{--tw-border-opacity:1;border-color:rgb(216 180 254/var(--tw-border-opacity,1))}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.border-red{--tw-border-opacity:1;border-color:rgb(255 0 0/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.border-teal-100{--tw-border-opacity:1;border-color:rgb(204 251 241/var(--tw-border-opacity,1))}.border-transparent{border-color:#0000}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.bg-\[\#007BFF\]{--tw-bg-opacity:1;background-color:rgb(0 123 255/var(--tw-bg-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-transparent{background-color:initial}.bg-violet-600{--tw-bg-opacity:1;background-color:rgb(124 58 237/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-none{background-image:none}.from-blue-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position);--tw-gradient-to:#eff6ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:#06b6d400 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-400{--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:#4ade8000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:#6366f100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-50{--tw-gradient-from:#faf5ff var(--tw-gradient-from-position);--tw-gradient-to:#faf5ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:#a855f700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-600{--tw-gradient-from:#9333ea var(--tw-gradient-from-position);--tw-gradient-to:#9333ea00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:#14b8a600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-violet-50{--tw-gradient-from:#f5f3ff var(--tw-gradient-from-position);--tw-gradient-to:#f5f3ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.to-emerald-500{--tw-gradient-to:#10b981 var(--tw-gradient-to-position)}.to-indigo-50{--tw-gradient-to:#eef2ff var(--tw-gradient-to-position)}.to-pink-50{--tw-gradient-to:#fdf2f8 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-pink-600{--tw-gradient-to:#db2777 var(--tw-gradient-to-position)}.to-purple-50{--tw-gradient-to:#faf5ff var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.pb-2{padding-bottom:.5rem}.pr-12{padding-right:3rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-center{text-align:center}.font-arimaRegular{font-family:ArimaRegular}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-4{line-height:1rem}.leading-none{line-height:1}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity,1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity,1))}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity,1))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.text-red{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-violet-600{--tw-text-opacity:1;color:rgb(124 58 237/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.placeholder-purple-400::placeholder{--tw-placeholder-opacity:1;color:rgb(192 132 252/var(--tw-placeholder-opacity,1))}.accent-indigo-600{accent-color:#4f46e5}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-blue-200{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity,1))}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.ring-purple-500{--tw-ring-opacity:1;--tw-ring-color:rgb(168 85 247/var(--tw-ring-opacity,1))}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-width{transition-duration:.15s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.ps__rail-y{background:none!important}.scrollbar-container{width:97%!important}.dropdown-menu{min-width:3rem}.w-md-editor-show-live{height:800!important}.bg-orange1{background-color:"#EF4444"}.react-pdf__Page__canvas{max-width:100vw!important;min-height:100vh!important}.outer-box{border:2px solid #333;height:400px;overflow:hidden;position:relative;width:300px}.parent-container{background:#f0f0f0;padding:20px;position:relative}.menu{background:#fff;border:1px solid #ccc;box-shadow:0 4px 6px #0000001a;left:0;max-height:200px;overflow-y:auto;position:absolute;top:100%;width:100%}.border-t-2{border-top-width:2px}.border-b-2{border-bottom-width:2px}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.hover\:bg-\[\#007BFF\]:hover{--tw-bg-opacity:1;background-color:rgb(0 123 255/var(--tw-bg-opacity,1))}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.hover\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-blue-800:hover{--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity,1))}.hover\:bg-emerald-50:hover{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.hover\:bg-emerald-600:hover{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.hover\:bg-emerald-700:hover{--tw-bg-opacity:1;background-color:rgb(4 120 87/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.hover\:bg-indigo-50:hover{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.hover\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity,1))}.hover\:bg-red-100:hover{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.hover\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.hover\:bg-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.hover\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity,1))}.hover\:bg-violet-700:hover{--tw-bg-opacity:1;background-color:rgb(109 40 217/var(--tw-bg-opacity,1))}.hover\:bg-opacity-10:hover{--tw-bg-opacity:0.1}.hover\:from-indigo-600:hover{--tw-gradient-from:#4f46e5 var(--tw-gradient-from-position);--tw-gradient-to:#4f46e500 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-purple-600:hover{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:ring-pink-500:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(236 72 153/var(--tw-ring-opacity,1))}.focus\:border-indigo-400:focus{--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\:ring-indigo-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(165 180 252/var(--tw-ring-opacity,1))}.focus\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(69 76 191/var(--tw-ring-opacity,1))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\:ring-offset-1:focus{--tw-ring-offset-width:1px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.sm\:block{display:block}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}
+.form-textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}.form-textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}.form-textarea::placeholder{color:#6b7280;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}.main{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.inset-0{inset:0}.left-0{left:0}.right-2{right:.5rem}.right-3{right:.75rem}.top-full{top:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-99{z-index:99}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.my-auto{margin-bottom:auto;margin-top:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-auto{height:auto}.max-h-48{max-height:12rem}.max-h-60{max-height:15rem}.max-h-80{max-height:20rem}.max-h-96{max-height:24rem}.min-h-10{min-height:2.5rem}.w-1{width:.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-8{width:2rem}.w-80{width:20rem}.w-auto{width:auto}.w-fit{width:-webkit-fit-content;width:fit-content}.w-full{width:100%}.min-w-32{min-width:8rem}.max-w-32{max-width:8rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-spin{animation:spin 1s linear infinite}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;appearance:none}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-scroll{overflow-y:scroll}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-100px{border-radius:100px}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-b-xl{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-emerald-100{--tw-border-opacity:1;border-color:rgb(209 250 229/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-indigo-100{--tw-border-opacity:1;border-color:rgb(224 231 255/var(--tw-border-opacity,1))}.border-indigo-200{--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity,1))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity,1))}.border-purple-300{--tw-border-opacity:1;border-color:rgb(216 180 254/var(--tw-border-opacity,1))}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.border-red{--tw-border-opacity:1;border-color:rgb(255 0 0/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.border-teal-100{--tw-border-opacity:1;border-color:rgb(204 251 241/var(--tw-border-opacity,1))}.border-transparent{border-color:#0000}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.bg-\[\#007BFF\]{--tw-bg-opacity:1;background-color:rgb(0 123 255/var(--tw-bg-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139/var(--tw-bg-opacity,1))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-transparent{background-color:initial}.bg-violet-600{--tw-bg-opacity:1;background-color:rgb(124 58 237/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-none{background-image:none}.from-blue-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position);--tw-gradient-to:#eff6ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:#06b6d400 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-400{--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:#4ade8000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:#6366f100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-50{--tw-gradient-from:#faf5ff var(--tw-gradient-from-position);--tw-gradient-to:#faf5ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:#a855f700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-600{--tw-gradient-from:#9333ea var(--tw-gradient-from-position);--tw-gradient-to:#9333ea00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:#14b8a600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-violet-50{--tw-gradient-from:#f5f3ff var(--tw-gradient-from-position);--tw-gradient-to:#f5f3ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.to-emerald-500{--tw-gradient-to:#10b981 var(--tw-gradient-to-position)}.to-indigo-50{--tw-gradient-to:#eef2ff var(--tw-gradient-to-position)}.to-pink-50{--tw-gradient-to:#fdf2f8 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-pink-600{--tw-gradient-to:#db2777 var(--tw-gradient-to-position)}.to-purple-50{--tw-gradient-to:#faf5ff var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.pb-2{padding-bottom:.5rem}.pr-12{padding-right:3rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-center{text-align:center}.font-arimaRegular{font-family:ArimaRegular}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-4{line-height:1rem}.leading-none{line-height:1}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity,1))}.text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity,1))}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity,1))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.text-red{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-violet-600{--tw-text-opacity:1;color:rgb(124 58 237/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity,1))}.placeholder-purple-400::placeholder{--tw-placeholder-opacity:1;color:rgb(192 132 252/var(--tw-placeholder-opacity,1))}.accent-indigo-600{accent-color:#4f46e5}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-blue-200{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity,1))}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.ring-purple-500{--tw-ring-opacity:1;--tw-ring-color:rgb(168 85 247/var(--tw-ring-opacity,1))}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-width{transition-duration:.15s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.ps__rail-y{background:none!important}.scrollbar-container{width:97%!important}.dropdown-menu{min-width:3rem}.w-md-editor-show-live{height:800!important}.bg-orange1{background-color:"#EF4444"}.react-pdf__Page__canvas{max-width:100vw!important;min-height:100vh!important}.outer-box{border:2px solid #333;height:400px;overflow:hidden;position:relative;width:300px}.parent-container{background:#f0f0f0;padding:20px;position:relative}.menu{background:#fff;border:1px solid #ccc;box-shadow:0 4px 6px #0000001a;left:0;max-height:200px;overflow-y:auto;position:absolute;top:100%;width:100%}.border-t-2{border-top-width:2px}.border-b-2{border-bottom-width:2px}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity,1))}.hover\:bg-\[\#007BFF\]:hover{--tw-bg-opacity:1;background-color:rgb(0 123 255/var(--tw-bg-opacity,1))}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.hover\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-blue-800:hover{--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity,1))}.hover\:bg-emerald-50:hover{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.hover\:bg-emerald-600:hover{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.hover\:bg-emerald-700:hover{--tw-bg-opacity:1;background-color:rgb(4 120 87/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.hover\:bg-indigo-50:hover{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.hover\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity,1))}.hover\:bg-red-100:hover{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.hover\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.hover\:bg-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.hover\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity,1))}.hover\:bg-violet-700:hover{--tw-bg-opacity:1;background-color:rgb(109 40 217/var(--tw-bg-opacity,1))}.hover\:bg-opacity-10:hover{--tw-bg-opacity:0.1}.hover\:from-indigo-600:hover{--tw-gradient-from:#4f46e5 var(--tw-gradient-from-position);--tw-gradient-to:#4f46e500 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-purple-600:hover{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:ring-pink-500:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(236 72 153/var(--tw-ring-opacity,1))}.focus\:border-indigo-400:focus{--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-gray-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(107 114 128/var(--tw-ring-opacity,1))}.focus\:ring-indigo-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(165 180 252/var(--tw-ring-opacity,1))}.focus\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(69 76 191/var(--tw-ring-opacity,1))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))}.focus\:ring-offset-1:focus{--tw-ring-offset-width:1px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.sm\:block{display:block}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.4.56",
+  "version": "0.4.58",
   "private": false,
   "description": "Easy use restyle components",
   "author": {