qlu-20-ui-library 1.7.91 → 1.8.0

package/dist/types/components/ContinuousRangeComponent/ContinuousRangeComponent.js

@@ -1,50 +1,277 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import InputRange from "react-input-range";
-import "react-input-range/lib/css/index.css";
-import styles from "./style.module.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import styles from "./ContinuousRangeComponent.module.scss";
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-function ContinuousRangeComponent({ minValue, maxValue, getRange, initialMinValue = 0, initialMaxValue = 10001, disabled = false, displayLimit = 10000, }) {
+const ContinuousRangeComponent = ({ minValue, maxValue, getRange, initialMinValue = 0, initialMaxValue = 10001, disabled = false, displayLimit = 10000, }) => {
     const clampedMin = Math.max(initialMinValue, Math.min(minValue, initialMaxValue));
     const clampedMax = Math.max(initialMinValue, Math.min(maxValue, initialMaxValue));
-    const [rangeData, setRangeData] = useState({
-        min: clampedMin,
-        max: clampedMax,
-    });
+    // Ensure minimum gap of 1 between initial values
+    const adjustedMin = clampedMin;
+    const adjustedMax = Math.max(clampedMax, clampedMin + 1);
+    const [minSliderValue, setMinSliderValue] = useState(adjustedMin);
+    const [maxSliderValue, setMaxSliderValue] = useState(adjustedMax);
+    const [isDragging, setIsDragging] = useState(null);
+    const [isAnimating, setIsAnimating] = useState(false); // For smooth track click transitions
+    const [, forceUpdate] = useState({}); // For forcing re-renders during dragging
+    const sliderRef = useRef(null);
     const isSliderMoving = useRef(false);
-    useEffect(() => {
-        if (!isSliderMoving.current) {
-            setRangeData({
-                min: Math.max(0, Math.max(initialMinValue, Math.min(minValue, initialMaxValue))),
-                max: Math.max(0, Math.max(initialMinValue, Math.min(maxValue, initialMaxValue))),
-            });
-        }
-    }, [minValue, maxValue, initialMinValue, initialMaxValue]);
+    const isDraggingRef = useRef(false);
+    const animationFrameRef = useRef(null);
+    const lastUpdateTimeRef = useRef(0);
+    const animationTimeoutRef = useRef(null);
+    // Track visual positions for smooth active track rendering during drag
+    const visualMinValueRef = useRef(adjustedMin);
+    const visualMaxValueRef = useRef(adjustedMax);
+    // Throttling constants for smooth movement
+    const UPDATE_THROTTLE_MS = 32; // ~30fps for controlled dragging
     const compositeClassNames = clsx({
         [styles.discreteSliderGeneric]: true,
         [styles.discreteSliderDisabled]: disabled,
     });
-    const handleChange = (newValue) => {
-        if (typeof newValue !== "number") {
-            isSliderMoving.current = true;
-            setRangeData({
-                min: Math.max(0, newValue.min),
-                max: Math.min(displayLimit, Math.max(0, newValue.max)),
-            });
-            getRange({
-                minRange: Math.max(0, newValue.min),
-                maxRange: Math.min(displayLimit, Math.max(0, newValue.max)),
-            });
+    useEffect(() => {
+        if (!isSliderMoving.current) {
+            const newMinValue = Math.max(0, Math.max(initialMinValue, Math.min(minValue, initialMaxValue)));
+            const newMaxValue = Math.max(0, Math.max(initialMinValue, Math.min(maxValue, initialMaxValue)));
+            // Ensure minimum gap of 1 between thumbs
+            if (newMaxValue - newMinValue < 1) {
+                // If values are too close, adjust them to maintain minimum gap
+                const midPoint = (newMinValue + newMaxValue) / 2;
+                const adjustedMin = Math.max(0, Math.floor(midPoint - 0.5));
+                const adjustedMax = Math.min(initialMaxValue, Math.ceil(midPoint + 0.5));
+                setMinSliderValue(adjustedMin);
+                setMaxSliderValue(adjustedMax);
+                visualMinValueRef.current = adjustedMin;
+                visualMaxValueRef.current = adjustedMax;
+            }
+            else {
+                setMinSliderValue(newMinValue);
+                setMaxSliderValue(newMaxValue);
+                visualMinValueRef.current = newMinValue;
+                visualMaxValueRef.current = newMaxValue;
+            }
         }
-    };
-    const handleChangeComplete = () => {
-        isSliderMoving.current = false;
-    };
+    }, [minValue, maxValue, initialMinValue, initialMaxValue]);
     const formatLabel = (value) => {
         if (disabled)
             return "";
         return `${value.toLocaleString()}`;
     };
-    return (_jsx("span", { className: compositeClassNames, children: _jsx(InputRange, { disabled: disabled, minValue: initialMinValue, maxValue: initialMaxValue, value: rangeData, onChange: handleChange, onChangeComplete: handleChangeComplete, formatLabel: formatLabel }) }));
-}
+    const getPercentage = (value) => {
+        return (((value - initialMinValue) / (initialMaxValue - initialMinValue)) * 100);
+    };
+    const getValueFromPercentage = (percentage) => {
+        return Math.round(initialMinValue + (percentage / 100) * (initialMaxValue - initialMinValue));
+    };
+    // Function to determine which thumb is closest to the clicked position
+    const getClosestThumb = (value) => {
+        const distanceToMin = Math.abs(value - minSliderValue);
+        const distanceToMax = Math.abs(value - maxSliderValue);
+        return distanceToMin <= distanceToMax ? "min" : "max";
+    };
+    // Handle track click to move closest thumb to clicked position with smooth animation
+    const handleTrackClick = useCallback((e) => {
+        if (disabled || isDragging)
+            return;
+        // Prevent event from bubbling to avoid conflicts with thumb events
+        e.preventDefault();
+        e.stopPropagation();
+        if (!sliderRef.current)
+            return;
+        const rect = sliderRef.current.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+        const value = getValueFromPercentage(percentage);
+        // Determine which thumb is closest and move it
+        const closestThumb = getClosestThumb(value);
+        // Enable smooth transition animation
+        setIsAnimating(true);
+        // Clear any existing animation timeout
+        if (animationTimeoutRef.current) {
+            clearTimeout(animationTimeoutRef.current);
+        }
+        if (closestThumb === "min") {
+            // Ensure minimum gap of 1 between thumbs
+            const newMinValue = Math.max(0, Math.min(value, maxSliderValue - 1));
+            if (newMinValue !== minSliderValue) {
+                setMinSliderValue(newMinValue);
+                visualMinValueRef.current = newMinValue;
+                getRange({
+                    minRange: newMinValue,
+                    maxRange: Math.min(displayLimit, Math.max(0, maxSliderValue)),
+                });
+            }
+        }
+        else {
+            // Ensure minimum gap of 1 between thumbs
+            const newMaxValue = Math.min(displayLimit, Math.max(minSliderValue + 1, Math.max(value, minSliderValue)));
+            if (newMaxValue !== maxSliderValue) {
+                setMaxSliderValue(newMaxValue);
+                visualMaxValueRef.current = newMaxValue;
+                getRange({
+                    minRange: Math.max(0, minSliderValue),
+                    maxRange: newMaxValue,
+                });
+            }
+        }
+        // Disable animation after transition completes (300ms to match CSS transition)
+        animationTimeoutRef.current = window.setTimeout(() => {
+            setIsAnimating(false);
+        }, 300);
+    }, [
+        disabled,
+        isDragging,
+        minSliderValue,
+        maxSliderValue,
+        displayLimit,
+        getRange,
+    ]);
+    const handleMouseDown = useCallback((type) => (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation(); // Prevent track click when clicking on thumb
+        // Clear any pending animation timeout and disable animation when starting drag
+        if (animationTimeoutRef.current) {
+            clearTimeout(animationTimeoutRef.current);
+        }
+        setIsAnimating(false);
+        // Initialize visual refs with current state values
+        visualMinValueRef.current = minSliderValue;
+        visualMaxValueRef.current = maxSliderValue;
+        setIsDragging(type);
+        isSliderMoving.current = true;
+        isDraggingRef.current = true;
+    }, [disabled, minSliderValue, maxSliderValue]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging ||
+            !sliderRef.current ||
+            disabled ||
+            !isDraggingRef.current)
+            return;
+        // Cancel any pending animation frame to prevent stacking
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        // Throttle updates similar to react-input-range approach
+        const now = Date.now();
+        const timeDiff = now - lastUpdateTimeRef.current;
+        if (timeDiff < UPDATE_THROTTLE_MS) {
+            // Schedule update for next frame if we're updating too frequently
+            animationFrameRef.current = requestAnimationFrame(() => {
+                handleMouseMove(e);
+            });
+            return;
+        }
+        // Update last time here to ensure consistent throttling
+        lastUpdateTimeRef.current = now;
+        // Use requestAnimationFrame for smooth updates (similar to react-input-range)
+        animationFrameRef.current = requestAnimationFrame(() => {
+            if (!sliderRef.current || !isDraggingRef.current)
+                return;
+            const rect = sliderRef.current.getBoundingClientRect();
+            // Get clientX from either mouse or touch event
+            const clientX = 'touches' in e ? e.touches[0]?.clientX : e.clientX;
+            if (clientX === undefined)
+                return;
+            const percentage = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
+            const value = getValueFromPercentage(percentage);
+            if (isDragging === "min") {
+                // Ensure minimum gap of 1 between thumbs
+                const newMinValue = Math.max(0, Math.min(value, maxSliderValue - 1));
+                // Update visual ref for smooth active track rendering
+                visualMinValueRef.current = Math.max(0, Math.min(value, visualMaxValueRef.current - 1));
+                // Force re-render for smooth visual updates
+                forceUpdate({});
+                // Update state for callback when value actually changes
+                if (newMinValue !== minSliderValue) {
+                    setMinSliderValue(newMinValue);
+                    getRange({
+                        minRange: newMinValue,
+                        maxRange: Math.min(displayLimit, Math.max(0, maxSliderValue)),
+                    });
+                }
+            }
+            else if (isDragging === "max") {
+                // Ensure minimum gap of 1 between thumbs
+                const newMaxValue = Math.min(displayLimit, Math.max(minSliderValue + 1, Math.max(value, minSliderValue)));
+                // Update visual ref for smooth active track rendering
+                visualMaxValueRef.current = Math.min(displayLimit, Math.max(visualMinValueRef.current + 1, Math.max(value, visualMinValueRef.current)));
+                // Force re-render for smooth visual updates
+                forceUpdate({});
+                // Update state for callback when value actually changes
+                if (newMaxValue !== maxSliderValue) {
+                    setMaxSliderValue(newMaxValue);
+                    getRange({
+                        minRange: Math.max(0, minSliderValue),
+                        maxRange: newMaxValue,
+                    });
+                }
+            }
+        });
+    }, [
+        isDragging,
+        maxSliderValue,
+        minSliderValue,
+        disabled,
+        getRange,
+        displayLimit,
+    ]);
+    const handleMouseUp = useCallback(() => {
+        if (isDragging) {
+            isSliderMoving.current = false;
+        }
+        // Clean up any pending animation frames
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        setIsDragging(null);
+        isDraggingRef.current = false;
+        // Sync visual refs with final state values
+        visualMinValueRef.current = minSliderValue;
+        visualMaxValueRef.current = maxSliderValue;
+    }, [isDragging, minSliderValue, maxSliderValue]);
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            document.addEventListener("touchmove", handleMouseMove, { passive: false });
+            document.addEventListener("touchend", handleMouseUp);
+            return () => {
+                document.removeEventListener("mousemove", handleMouseMove);
+                document.removeEventListener("mouseup", handleMouseUp);
+                document.removeEventListener("touchmove", handleMouseMove);
+                document.removeEventListener("touchend", handleMouseUp);
+                // Clean up any pending animation frames when effect unmounts
+                if (animationFrameRef.current) {
+                    cancelAnimationFrame(animationFrameRef.current);
+                    animationFrameRef.current = null;
+                }
+            };
+        }
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    // Cleanup animation frames on component unmount
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            if (animationTimeoutRef.current) {
+                clearTimeout(animationTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Use visual refs during dragging for smooth active track, otherwise use state values
+    const currentMinValue = isDragging
+        ? visualMinValueRef.current
+        : minSliderValue;
+    const currentMaxValue = isDragging
+        ? visualMaxValueRef.current
+        : maxSliderValue;
+    const minPercentage = getPercentage(currentMinValue);
+    const maxPercentage = getPercentage(currentMaxValue);
+    return (_jsx("span", { className: compositeClassNames, children: _jsxs("div", { className: `${styles["range-slider-container"]} ${isDragging ? styles.dragging : ""}`, ref: sliderRef, onClick: handleTrackClick, children: [_jsx("div", { className: styles["range-slider-track"], children: _jsx("div", { className: styles["range-slider-track-active"], style: {
+                            left: `${minPercentage}%`,
+                            width: `${maxPercentage - minPercentage}%`,
+                        } }) }), _jsx("div", { className: `${styles["range-slider-thumb"]} ${styles["range-slider-thumb--min"]} ${isDragging === "min" ? styles.dragging : ""} ${isAnimating ? styles.animating : ""}`, style: { left: `${minPercentage}%` }, onMouseDown: handleMouseDown("min"), onTouchStart: handleMouseDown("min"), children: _jsx("div", { className: styles["range-slider-tooltip"], children: formatLabel(Math.round(currentMinValue)) }) }), _jsx("div", { className: `${styles["range-slider-thumb"]} ${styles["range-slider-thumb--max"]} ${isDragging === "max" ? styles.dragging : ""} ${isAnimating ? styles.animating : ""}`, style: { left: `${maxPercentage}%` }, onMouseDown: handleMouseDown("max"), onTouchStart: handleMouseDown("max"), children: _jsx("div", { className: styles["range-slider-tooltip"], children: formatLabel(Math.round(currentMaxValue)) }) })] }) }));
+};
 export default ContinuousRangeComponent;

package/dist/types/components/CreditsManagementDropdownButton/CreditsManagementDropdownButton/CreditsManagementDropdownItem/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { IconType } from "../../../../types";
 interface DropdownItemProps {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type DropDownFormProps = {
     items: string[];
     onSelect: (val: string) => void;

package/dist/types/components/DropDownGeneric/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style.scss';
 interface DropDownGenericProps {
     items: string[];

package/dist/types/components/DropDownWithSVG/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { IconType } from "../../types";
 interface DropdownWithSvgProps {

package/dist/types/components/EmailDisconnectPopup/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DialogPosition, IconType } from '../../types';
 import './style.scss';
 interface PrimaryFooterButton {

package/dist/types/components/FeedbackButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style.scss';
 interface FeedbackButtonProps {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/types/components/GetSvgIcon/index.js

@@ -204,7 +204,8 @@ import AccessRevoke from "../Svg/AccessRevoke";
 import Pipeline from "../Svg/Pipeline";
 import ChatSend from "../Svg/ChatSend";
 import Stopwatch from "../Svg/Stopwatch";
+import Expand from "../Svg/Expand";
 const GetSvgIcon = ({ iconType = "cross", iconSize = "24" }) => {
-    return iconType === "cross" ? (_jsx(Cross, { width: iconSize, height: iconSize })) : iconType === "plus" ? (_jsx(Plus, { width: iconSize, height: iconSize })) : iconType === "thumb" ? (_jsx(Thumb, { width: iconSize, height: iconSize })) : iconType === "clock" ? (_jsx(Clock, { width: iconSize, height: iconSize })) : iconType === "tick" ? (_jsx(Tick, { width: iconSize, height: iconSize })) : iconType === "linkedinLogo" ? (_jsx(LinkedinLogo, { width: iconSize, height: iconSize })) : iconType === "searchArrow" ? (_jsx(SearchArrow, { width: iconSize, height: iconSize })) : iconType === "excalamationCircle" ? (_jsx(ExclamationCircle, { width: iconSize, height: iconSize })) : iconType === "edit" ? (_jsx(Edit, { width: iconSize, height: iconSize })) : iconType === "delete" ? (_jsx(Delete, { width: iconSize, height: iconSize })) : iconType === "chatOneBallon" ? (_jsx(ChatOneballon, { width: iconSize, height: iconSize })) : iconType === "qluLogo" ? (_jsx(QluLogo, { width: iconSize, height: iconSize })) : iconType === "gear" ? (_jsx(Gear, { width: iconSize, height: iconSize })) : iconType === "home" ? (_jsx(Home, { width: iconSize, height: iconSize })) : iconType === "paperPlaneUpRight" ? (_jsx(PaperPlaneUpRight, { width: iconSize, height: iconSize })) : iconType === "search" ? (_jsx(Search, { width: iconSize, height: iconSize })) : iconType === "chat" ? (_jsx(Chat, { width: iconSize, height: iconSize })) : iconType === "briefcase" ? (_jsx(Briefcase, { width: iconSize, height: iconSize })) : iconType === "barGraph" ? (_jsx(BarGraph, { width: iconSize, height: iconSize })) : iconType === "book" ? (_jsx(Book, { width: iconSize, height: iconSize })) : iconType === "company" ? (_jsx(Company, { width: iconSize, height: iconSize })) : iconType === "dollarBriefcase" ? (_jsx(DollarBriefcase, { width: iconSize, height: iconSize })) : iconType === "industry" ? (_jsx(Industry, { width: iconSize, height: iconSize })) : iconType === "jobTitle" ? (_jsx(JobTitle, { width: iconSize, height: iconSize })) : iconType === "location" ? (_jsx(Location, { width: iconSize, height: iconSize })) : iconType === "strategyPath" ? (_jsx(StrategyPath, { width: iconSize, height: iconSize })) : iconType === "tools" ? (_jsx(Tools, { width: iconSize, height: iconSize })) : iconType === "management" ? (_jsx(Management, { width: iconSize, height: iconSize })) : iconType === "employees" ? (_jsx(Employees, { width: iconSize, height: iconSize })) : iconType === "cheveronDown" ? (_jsx(CheveronDown, { width: iconSize, height: iconSize })) : iconType === "cheveronUp" ? (_jsx(CheveronUp, { width: iconSize, height: iconSize })) : iconType === "arrowLeft" ? (_jsx(ArrowLeft, { width: iconSize, height: iconSize })) : iconType === "arrowRight" ? (_jsx(ArrowRight, { width: iconSize, height: iconSize })) : iconType === "passTick" ? (_jsx(PassTick, { width: iconSize, height: iconSize })) : iconType === "doNotInclude" ? (_jsx(DoNotInclude, { width: iconSize, height: iconSize })) : iconType === "tickCircle" ? (_jsx(TickCircle, { width: iconSize, height: iconSize })) : iconType === "phone" ? (_jsx(Phone, { width: iconSize, height: iconSize })) : iconType === "email" ? (_jsx(Email, { width: iconSize, height: iconSize })) : iconType === "eye" ? (_jsx(Eye, { width: iconSize, height: iconSize })) : iconType === "eyeOff" ? (_jsx(EyeOff, { width: iconSize, height: iconSize })) : iconType === "congratulations" ? (_jsx(Congratulations, {})) : iconType === "heart" ? (_jsx(Heart, { width: iconSize, height: iconSize })) : iconType === "questionMark" ? (_jsx(QuestionMark, { width: iconSize, height: iconSize })) : iconType === "kebab" ? (_jsx(Kebab, { width: iconSize, height: iconSize })) : iconType === "calendar" ? (_jsx(Calendar, { width: iconSize, height: iconSize })) : iconType === "officeBuilding" ? (_jsx(OfficeBuilding, { width: iconSize, height: iconSize })) : iconType === "notes" ? (_jsx(Notes, { width: iconSize, height: iconSize })) : iconType === "star" ? (_jsx(Star, { width: iconSize, height: iconSize })) : iconType === "filterFunel" ? (_jsx(FilterFunel, { width: iconSize, height: iconSize })) : iconType === "sortUpDownArrows" ? (_jsx(SortUpDownArrows, { width: iconSize, height: iconSize })) : iconType === "download" ? (_jsx(Download, { width: iconSize, height: iconSize })) : iconType === "sparkles" ? (_jsx(Sparkles, { width: iconSize, height: iconSize })) : iconType === "writeNotes" ? (_jsx(WriteNotes, { width: iconSize, height: iconSize })) : iconType === "undo" ? (_jsx(Undo, { width: iconSize, height: iconSize })) : iconType === "emailSend" ? (_jsx(EmailSend, { width: iconSize, height: iconSize })) : iconType === "copy" ? (_jsx(Copy, { width: iconSize, height: iconSize })) : iconType === "openLink" ? (_jsx(OpenLink, { width: iconSize, height: iconSize })) : iconType === "internalUser" ? (_jsx(InternalUser, { width: iconSize, height: iconSize })) : iconType === "link" ? (_jsx(Link, { width: iconSize, height: iconSize })) : iconType === "bell" ? (_jsx(Bell, { width: iconSize, height: iconSize })) : iconType === "graduationHat" ? (_jsx(GraduationHat, { width: iconSize, height: iconSize })) : iconType === "user" ? (_jsx(User, { width: iconSize, height: iconSize })) : iconType === "password" ? (_jsx(Password, { width: iconSize, height: iconSize })) : iconType === "emailDisconnected" ? (_jsx(EmailDisconnected, { width: iconSize, height: iconSize })) : iconType === "bolt" ? (_jsx(Bolt, { width: iconSize, height: iconSize })) : iconType === "images" ? (_jsx(Images, { width: iconSize, height: iconSize })) : iconType === "information" ? (_jsx(Information, { width: iconSize, height: iconSize })) : iconType === "inviteUser" ? (_jsx(InviteUser, { width: iconSize, height: iconSize })) : iconType === "list" ? (_jsx(List, { width: iconSize, height: iconSize })) : iconType === "table" ? (_jsx(Table, { width: iconSize, height: iconSize })) : iconType === "arrowDown" ? (_jsx(ArrowDown, { width: iconSize, height: iconSize })) : iconType === "arrowUp" ? (_jsx(ArrowUp, { width: iconSize, height: iconSize })) : iconType === "chevronLeft" ? (_jsx(ChevronLeft, { width: iconSize, height: iconSize })) : iconType === "chevronRight" ? (_jsx(ChevronRight, { width: iconSize, height: iconSize })) : iconType === "radio" ? (_jsx(Radio, { width: iconSize, height: iconSize })) : iconType === "like" ? (_jsx(Like, { width: iconSize, height: iconSize })) : iconType === "unlike" ? (_jsx(Unlike, { width: iconSize, height: iconSize })) : iconType === "refresh" ? (_jsx(Refresh, { width: iconSize, height: iconSize })) : iconType === "emailRound" ? (_jsx(EmailRound, { width: iconSize, height: iconSize })) : iconType === "abstractGeometric" ? (_jsx(AbstractGeometric, { width: iconSize, height: iconSize })) : iconType === "seo" ? (_jsx(Seo, { width: iconSize, height: iconSize })) : iconType === "abstractCircle" ? (_jsx(AbstractCircle, { width: iconSize, height: iconSize })) : iconType === "checkList" ? (_jsx(CheckList, { width: iconSize, height: iconSize })) : iconType === "penEdit" ? (_jsx(PenEdit, { width: iconSize, height: iconSize })) : iconType === "globeSearch" ? (_jsx(GlobeSearch, { width: iconSize, height: iconSize })) : iconType === "groupIcon" ? (_jsx(GroupIcon, { width: iconSize, height: iconSize })) : iconType === "jD" ? (_jsx(JD, {})) : iconType === "hiringCompany" ? (_jsx(HiringCompany, {})) : iconType === "sampleProfiles" ? (_jsx(SampleProfiles, {})) : iconType === "addToCollection" ? (_jsx(AddToCollection, { width: iconSize, height: iconSize })) : iconType === "pointingDown" ? (_jsx(PointingDown, { width: iconSize, height: iconSize })) : iconType === "pencilEdit" ? (_jsx(PencilEdit, { width: iconSize, height: iconSize })) : iconType === "matchingProfile" ? (_jsx(MatchingProfile, {})) : iconType === "stop" ? (_jsx(Stop, { width: iconSize, height: iconSize })) : iconType === "clipBoard" ? (_jsx(ClipBoard, { width: iconSize, height: iconSize })) : iconType === "sortascending" ? (_jsx(SortAscending, { width: iconSize, height: iconSize })) : iconType === "sortdescending" ? (_jsx(SortDescending, { width: iconSize, height: iconSize })) : iconType === "hourglass" ? (_jsx(HourGlass, { width: iconSize, height: iconSize })) : iconType === "exclamation" ? (_jsx(Exclamation, { width: iconSize, height: iconSize })) : iconType === "refresh-ccw" ? (_jsx(RefreshCounterClockWise, { width: iconSize, height: iconSize })) : iconType === "adjustment" ? (_jsx(Adjustment, { width: iconSize, height: iconSize })) : iconType === "outlook" ? (_jsx(Outlook, { width: iconSize, height: iconSize })) : iconType === "menu-alt" ? (_jsx(MenuAlt, { width: iconSize, height: iconSize })) : iconType === "simpler-tick" ? (_jsx(SimplerTick, { width: iconSize, height: iconSize })) : iconType === "menu-extended" ? (_jsx(MenuExtended, { width: iconSize, height: iconSize })) : iconType === "umberalla" ? (_jsx(Umberalla, { width: iconSize, height: iconSize })) : iconType === "sidebar" ? (_jsx(Sidebar, { width: iconSize, height: iconSize })) : iconType === "paperClip" ? (_jsx(PaperClip, { width: iconSize, height: iconSize })) : iconType === "document" ? (_jsx(Document, { width: iconSize, height: iconSize })) : iconType === "file" ? (_jsx(File, { width: iconSize, height: iconSize })) : iconType === "google" ? (_jsx(Google, { width: iconSize, height: iconSize })) : iconType === "pdf" ? (_jsx(PDF, { width: iconSize, height: iconSize })) : iconType === "enter" ? (_jsx(Enter, { width: iconSize, height: iconSize })) : iconType === "key" ? (_jsx(Key, { width: iconSize, height: iconSize })) : iconType === "cornerDown" ? (_jsx(CornerDown, { width: iconSize, height: iconSize })) : iconType === "notAllowed" ? (_jsx(NotAllowed, { width: iconSize, height: iconSize })) : iconType === "university" ? (_jsx(University, { width: iconSize, height: iconSize })) : iconType === "pause" ? (_jsx(Pause, { width: iconSize, height: iconSize })) : iconType === "resume" ? (_jsx(Resume, { width: iconSize, height: iconSize })) : iconType === "ascendingOrder" ? (_jsx(AscendingOrder, { width: iconSize, height: iconSize })) : iconType === "descendingOrder" ? (_jsx(DescendingOrder, { width: iconSize, height: iconSize })) : iconType === "userClock" ? (_jsx(UserClock, { width: iconSize, height: iconSize })) : iconType === "tickVerification" ? (_jsx(TickVerification, { width: iconSize, height: iconSize })) : iconType === "copied" ? (_jsx(Copied, { width: iconSize, height: iconSize })) : iconType === "archive" ? (_jsx(Archive, { width: iconSize, height: iconSize })) : iconType === "additionalInformation" ? (_jsx(AdditionalInformation, { width: iconSize, height: iconSize })) : iconType === "checkCircle" ? (_jsx(CheckCircle, { width: iconSize, height: iconSize })) : iconType === "companyClock" ? (_jsx(CompanyClock, { width: iconSize, height: iconSize })) : iconType === "boldPlus" ? (_jsx(BoldPlus, { width: iconSize, height: iconSize })) : iconType === "square" ? (_jsx(Square, { width: iconSize, height: iconSize })) : iconType === "boxPencil" ? (_jsx(BoxPencil, { width: iconSize, height: iconSize })) : iconType === "companyOwnership" ? (_jsx(CompanyOwnership, { width: iconSize, height: iconSize })) : iconType === "cutBriefcase" ? (_jsx(CutBriefcase, { width: iconSize, height: iconSize })) : iconType === "box" ? (_jsx(Box, { width: iconSize, height: iconSize })) : iconType === "googleLogo" ? (_jsx(GoogleLogo, { width: iconSize, height: iconSize })) : iconType === "microsoftLogo" ? (_jsx(MicrosoftLogo, { width: iconSize, height: iconSize })) : iconType === "people" ? (_jsx(People, { width: iconSize, height: iconSize })) : iconType === "crunchBaseLogo" ? (_jsx(CrunchBaseLogo, { width: iconSize, height: iconSize })) : iconType === "linkedinColoredLogo" ? (_jsx(LinkedinColoredLogo, { width: iconSize, height: iconSize })) : iconType === "googleColoredLogo" ? (_jsx(GoogleColoredLogo, { width: iconSize, height: iconSize })) : iconType === "websiteBadge" ? (_jsx(WebsiteBadge, { width: iconSize, height: iconSize })) : iconType === "arrowLeftShort" ? (_jsx(ArrowLeftShort, { width: iconSize, height: iconSize })) : iconType === "notDownloaded" ? (_jsx(NotDownloaded, { width: iconSize, height: iconSize })) : iconType === "lock" ? (_jsx(Lock, { width: iconSize, height: iconSize })) : iconType === "companyStrategy" ? (_jsx(CompanyStrategy, { width: iconSize, height: iconSize })) : iconType === "industryStrategy" ? (_jsx(IndustryStrategy, { width: iconSize, height: iconSize })) : iconType === "strategyUpdate" ? (_jsx(UpdateStrategy, { width: iconSize, height: iconSize })) : iconType === "unarchive" ? (_jsx(Unarchive, { width: iconSize, height: iconSize })) : iconType === "roundedDocument" ? (_jsx(RoundedDocument, { width: iconSize, height: iconSize })) : iconType === "marketMap" ? (_jsx(MarketMap, { width: iconSize, height: iconSize })) : iconType === "leadership" ? (_jsx(Leadership, { width: iconSize, height: iconSize })) : iconType === "fullScreen" ? (_jsx(FullScreen, { width: iconSize, height: iconSize })) : iconType === "exitFullScreen" ? (_jsx(ExitFullScreen, { width: iconSize, height: iconSize })) : iconType === "plannerTable" ? (_jsx(PlannerTable, { width: iconSize, height: iconSize })) : iconType === "upload" ? (_jsx(Upload, { width: iconSize, height: iconSize })) : iconType === "agent" ? (_jsx(Agent, { width: iconSize, height: iconSize })) : iconType === "doubleTick" ? (_jsx(DoubleTick, { width: iconSize, height: iconSize })) : iconType === "reply" ? (_jsx(Reply, { width: iconSize, height: iconSize })) : iconType === "lowCreditWarning" ? (_jsx(LowCreditWarning, { width: iconSize, height: iconSize })) : iconType === "threeDots" ? (_jsx(ThreeDots, { width: iconSize, height: iconSize })) : iconType === "creditAdmin" ? (_jsx(CreditAdmin, { width: iconSize, height: iconSize })) : iconType === "collection" ? (_jsx(Collection, { width: iconSize, height: iconSize })) : iconType === "save" ? (_jsx(Save, { width: iconSize, height: iconSize })) : iconType === "sidebarArrow" ? (_jsx(SidebarArrow, { width: iconSize, height: iconSize })) : iconType === "gradientSparkles" ? (_jsx(AiGradientSparkles, { width: iconSize, height: iconSize })) : iconType === "plusCircle" ? (_jsx(PlusCircle, { width: iconSize, height: iconSize })) : iconType === "incomingCall" ? (_jsx(IncomingCall, { width: iconSize, height: iconSize })) : iconType === "outgoingCall" ? (_jsx(OutGoingCall, { width: iconSize, height: iconSize })) : iconType === "message" ? (_jsx(Message, { width: iconSize, height: iconSize })) : iconType === "missedCall" ? (_jsx(MissedCall, { width: iconSize, height: iconSize })) : iconType === "filter" ? (_jsx(Filter, { width: iconSize, height: iconSize })) : iconType === "call" ? (_jsx(Call, { width: iconSize, height: iconSize })) : iconType === "voiceCall" ? (_jsx(VoiceCall, { width: iconSize, height: iconSize })) : iconType === "messageLogo" ? (_jsx(MessageLogo, { width: iconSize, height: iconSize })) : iconType === "requisitionLogo" ? (_jsx(RequisitionLogo, { width: iconSize, height: iconSize })) : iconType === "actionLogo" ? (_jsx(ActionLogo, { width: iconSize, height: iconSize })) : iconType === "organizationPlaceholder" ? (_jsx(OrganizationPlaceholder, { width: iconSize, height: iconSize })) : iconType === "approved" ? (_jsx(Approved, { width: iconSize, height: iconSize })) : iconType === "rejected" ? (_jsx(Reject, { width: iconSize, height: iconSize })) : iconType === "pending" ? (_jsx(Pending, { width: iconSize, height: iconSize })) : iconType === "default" ? (_jsx(Default, { width: iconSize, height: iconSize })) : iconType === "creditSystemUser" ? (_jsx(CreditSystemUser, { width: iconSize, height: iconSize })) : iconType === "usFlag" ? (_jsx(USFlag, { width: iconSize, height: iconSize })) : iconType === "canadaFlag" ? (_jsx(CanadaFlag, { width: iconSize, height: iconSize })) : iconType === "australiaFlag" ? (_jsx(AustraliaFlag, { width: iconSize, height: iconSize })) : iconType === "mexicoFlag" ? (_jsx(MexicoFlag, { width: iconSize, height: iconSize })) : iconType === "newZealandFlag" ? (_jsx(NewZealandFlag, { width: iconSize, height: iconSize })) : iconType === "inbox" ? (_jsx(Inbox, { width: iconSize, height: iconSize })) : iconType === "ukFlag" ? (_jsx(UkFlag, { width: iconSize, height: iconSize })) : iconType === "lightBulb" ? (_jsx(LightBulb, { width: iconSize, height: iconSize })) : iconType === "linkedin" ? (_jsx(LinkedinIcon, { width: iconSize, height: iconSize })) : iconType === "outlookColored" ? (_jsx(OutlookColored, { width: iconSize, height: iconSize })) : iconType === "googleColored" ? (_jsx(GoogleIcon, { width: iconSize, height: iconSize })) : iconType === "linkedinPremium" ? (_jsx(InmailIcon, { width: iconSize, height: iconSize })) : iconType === "text" ? (_jsx(TextIcon, { width: iconSize, height: iconSize })) : iconType === "telephone" ? (_jsx(PhoneIcon, { width: iconSize, height: iconSize })) : iconType === "welcomeAboard" ? (_jsx(WelcomeAboard, { width: iconSize, height: iconSize })) : iconType === "googleDriveLogo" ? (_jsx(GoogleDriveLogo, { width: iconSize, height: iconSize })) : iconType === "spreadsheet" ? (_jsx(Spreadsheet, { width: iconSize, height: iconSize })) : iconType === "sparklingStars" ? (_jsx(SparklingStars, { width: iconSize, height: iconSize })) : iconType === "syncLoader" ? (_jsx(SyncLoader, { width: iconSize, height: iconSize })) : iconType === "accessRevoke" ? (_jsx(AccessRevoke, { width: iconSize, height: iconSize })) : iconType === "pipeline" ? (_jsx(Pipeline, { width: iconSize, height: iconSize })) : iconType === "chatSend" ? (_jsx(ChatSend, { width: iconSize, height: iconSize })) : iconType === "stopwatch" ? (_jsx(Stopwatch, { width: iconSize, height: iconSize })) : null;
+    return iconType === "cross" ? (_jsx(Cross, { width: iconSize, height: iconSize })) : iconType === "plus" ? (_jsx(Plus, { width: iconSize, height: iconSize })) : iconType === "thumb" ? (_jsx(Thumb, { width: iconSize, height: iconSize })) : iconType === "clock" ? (_jsx(Clock, { width: iconSize, height: iconSize })) : iconType === "tick" ? (_jsx(Tick, { width: iconSize, height: iconSize })) : iconType === "linkedinLogo" ? (_jsx(LinkedinLogo, { width: iconSize, height: iconSize })) : iconType === "searchArrow" ? (_jsx(SearchArrow, { width: iconSize, height: iconSize })) : iconType === "excalamationCircle" ? (_jsx(ExclamationCircle, { width: iconSize, height: iconSize })) : iconType === "edit" ? (_jsx(Edit, { width: iconSize, height: iconSize })) : iconType === "delete" ? (_jsx(Delete, { width: iconSize, height: iconSize })) : iconType === "chatOneBallon" ? (_jsx(ChatOneballon, { width: iconSize, height: iconSize })) : iconType === "qluLogo" ? (_jsx(QluLogo, { width: iconSize, height: iconSize })) : iconType === "gear" ? (_jsx(Gear, { width: iconSize, height: iconSize })) : iconType === "home" ? (_jsx(Home, { width: iconSize, height: iconSize })) : iconType === "paperPlaneUpRight" ? (_jsx(PaperPlaneUpRight, { width: iconSize, height: iconSize })) : iconType === "search" ? (_jsx(Search, { width: iconSize, height: iconSize })) : iconType === "chat" ? (_jsx(Chat, { width: iconSize, height: iconSize })) : iconType === "briefcase" ? (_jsx(Briefcase, { width: iconSize, height: iconSize })) : iconType === "barGraph" ? (_jsx(BarGraph, { width: iconSize, height: iconSize })) : iconType === "book" ? (_jsx(Book, { width: iconSize, height: iconSize })) : iconType === "company" ? (_jsx(Company, { width: iconSize, height: iconSize })) : iconType === "dollarBriefcase" ? (_jsx(DollarBriefcase, { width: iconSize, height: iconSize })) : iconType === "industry" ? (_jsx(Industry, { width: iconSize, height: iconSize })) : iconType === "jobTitle" ? (_jsx(JobTitle, { width: iconSize, height: iconSize })) : iconType === "location" ? (_jsx(Location, { width: iconSize, height: iconSize })) : iconType === "strategyPath" ? (_jsx(StrategyPath, { width: iconSize, height: iconSize })) : iconType === "tools" ? (_jsx(Tools, { width: iconSize, height: iconSize })) : iconType === "management" ? (_jsx(Management, { width: iconSize, height: iconSize })) : iconType === "employees" ? (_jsx(Employees, { width: iconSize, height: iconSize })) : iconType === "cheveronDown" ? (_jsx(CheveronDown, { width: iconSize, height: iconSize })) : iconType === "cheveronUp" ? (_jsx(CheveronUp, { width: iconSize, height: iconSize })) : iconType === "arrowLeft" ? (_jsx(ArrowLeft, { width: iconSize, height: iconSize })) : iconType === "arrowRight" ? (_jsx(ArrowRight, { width: iconSize, height: iconSize })) : iconType === "passTick" ? (_jsx(PassTick, { width: iconSize, height: iconSize })) : iconType === "doNotInclude" ? (_jsx(DoNotInclude, { width: iconSize, height: iconSize })) : iconType === "tickCircle" ? (_jsx(TickCircle, { width: iconSize, height: iconSize })) : iconType === "phone" ? (_jsx(Phone, { width: iconSize, height: iconSize })) : iconType === "email" ? (_jsx(Email, { width: iconSize, height: iconSize })) : iconType === "eye" ? (_jsx(Eye, { width: iconSize, height: iconSize })) : iconType === "eyeOff" ? (_jsx(EyeOff, { width: iconSize, height: iconSize })) : iconType === "congratulations" ? (_jsx(Congratulations, {})) : iconType === "heart" ? (_jsx(Heart, { width: iconSize, height: iconSize })) : iconType === "questionMark" ? (_jsx(QuestionMark, { width: iconSize, height: iconSize })) : iconType === "kebab" ? (_jsx(Kebab, { width: iconSize, height: iconSize })) : iconType === "calendar" ? (_jsx(Calendar, { width: iconSize, height: iconSize })) : iconType === "officeBuilding" ? (_jsx(OfficeBuilding, { width: iconSize, height: iconSize })) : iconType === "notes" ? (_jsx(Notes, { width: iconSize, height: iconSize })) : iconType === "star" ? (_jsx(Star, { width: iconSize, height: iconSize })) : iconType === "filterFunel" ? (_jsx(FilterFunel, { width: iconSize, height: iconSize })) : iconType === "sortUpDownArrows" ? (_jsx(SortUpDownArrows, { width: iconSize, height: iconSize })) : iconType === "download" ? (_jsx(Download, { width: iconSize, height: iconSize })) : iconType === "sparkles" ? (_jsx(Sparkles, { width: iconSize, height: iconSize })) : iconType === "writeNotes" ? (_jsx(WriteNotes, { width: iconSize, height: iconSize })) : iconType === "undo" ? (_jsx(Undo, { width: iconSize, height: iconSize })) : iconType === "emailSend" ? (_jsx(EmailSend, { width: iconSize, height: iconSize })) : iconType === "copy" ? (_jsx(Copy, { width: iconSize, height: iconSize })) : iconType === "openLink" ? (_jsx(OpenLink, { width: iconSize, height: iconSize })) : iconType === "internalUser" ? (_jsx(InternalUser, { width: iconSize, height: iconSize })) : iconType === "link" ? (_jsx(Link, { width: iconSize, height: iconSize })) : iconType === "bell" ? (_jsx(Bell, { width: iconSize, height: iconSize })) : iconType === "graduationHat" ? (_jsx(GraduationHat, { width: iconSize, height: iconSize })) : iconType === "user" ? (_jsx(User, { width: iconSize, height: iconSize })) : iconType === "password" ? (_jsx(Password, { width: iconSize, height: iconSize })) : iconType === "emailDisconnected" ? (_jsx(EmailDisconnected, { width: iconSize, height: iconSize })) : iconType === "bolt" ? (_jsx(Bolt, { width: iconSize, height: iconSize })) : iconType === "images" ? (_jsx(Images, { width: iconSize, height: iconSize })) : iconType === "information" ? (_jsx(Information, { width: iconSize, height: iconSize })) : iconType === "inviteUser" ? (_jsx(InviteUser, { width: iconSize, height: iconSize })) : iconType === "list" ? (_jsx(List, { width: iconSize, height: iconSize })) : iconType === "table" ? (_jsx(Table, { width: iconSize, height: iconSize })) : iconType === "arrowDown" ? (_jsx(ArrowDown, { width: iconSize, height: iconSize })) : iconType === "arrowUp" ? (_jsx(ArrowUp, { width: iconSize, height: iconSize })) : iconType === "chevronLeft" ? (_jsx(ChevronLeft, { width: iconSize, height: iconSize })) : iconType === "chevronRight" ? (_jsx(ChevronRight, { width: iconSize, height: iconSize })) : iconType === "radio" ? (_jsx(Radio, { width: iconSize, height: iconSize })) : iconType === "like" ? (_jsx(Like, { width: iconSize, height: iconSize })) : iconType === "unlike" ? (_jsx(Unlike, { width: iconSize, height: iconSize })) : iconType === "refresh" ? (_jsx(Refresh, { width: iconSize, height: iconSize })) : iconType === "emailRound" ? (_jsx(EmailRound, { width: iconSize, height: iconSize })) : iconType === "abstractGeometric" ? (_jsx(AbstractGeometric, { width: iconSize, height: iconSize })) : iconType === "seo" ? (_jsx(Seo, { width: iconSize, height: iconSize })) : iconType === "abstractCircle" ? (_jsx(AbstractCircle, { width: iconSize, height: iconSize })) : iconType === "checkList" ? (_jsx(CheckList, { width: iconSize, height: iconSize })) : iconType === "penEdit" ? (_jsx(PenEdit, { width: iconSize, height: iconSize })) : iconType === "globeSearch" ? (_jsx(GlobeSearch, { width: iconSize, height: iconSize })) : iconType === "groupIcon" ? (_jsx(GroupIcon, { width: iconSize, height: iconSize })) : iconType === "jD" ? (_jsx(JD, {})) : iconType === "expand" ? (_jsx(Expand, { width: iconSize, height: iconSize })) : iconType === "hiringCompany" ? (_jsx(HiringCompany, {})) : iconType === "sampleProfiles" ? (_jsx(SampleProfiles, {})) : iconType === "addToCollection" ? (_jsx(AddToCollection, { width: iconSize, height: iconSize })) : iconType === "pointingDown" ? (_jsx(PointingDown, { width: iconSize, height: iconSize })) : iconType === "pencilEdit" ? (_jsx(PencilEdit, { width: iconSize, height: iconSize })) : iconType === "matchingProfile" ? (_jsx(MatchingProfile, {})) : iconType === "stop" ? (_jsx(Stop, { width: iconSize, height: iconSize })) : iconType === "clipBoard" ? (_jsx(ClipBoard, { width: iconSize, height: iconSize })) : iconType === "sortascending" ? (_jsx(SortAscending, { width: iconSize, height: iconSize })) : iconType === "sortdescending" ? (_jsx(SortDescending, { width: iconSize, height: iconSize })) : iconType === "hourglass" ? (_jsx(HourGlass, { width: iconSize, height: iconSize })) : iconType === "exclamation" ? (_jsx(Exclamation, { width: iconSize, height: iconSize })) : iconType === "refresh-ccw" ? (_jsx(RefreshCounterClockWise, { width: iconSize, height: iconSize })) : iconType === "adjustment" ? (_jsx(Adjustment, { width: iconSize, height: iconSize })) : iconType === "outlook" ? (_jsx(Outlook, { width: iconSize, height: iconSize })) : iconType === "menu-alt" ? (_jsx(MenuAlt, { width: iconSize, height: iconSize })) : iconType === "simpler-tick" ? (_jsx(SimplerTick, { width: iconSize, height: iconSize })) : iconType === "menu-extended" ? (_jsx(MenuExtended, { width: iconSize, height: iconSize })) : iconType === "umberalla" ? (_jsx(Umberalla, { width: iconSize, height: iconSize })) : iconType === "sidebar" ? (_jsx(Sidebar, { width: iconSize, height: iconSize })) : iconType === "paperClip" ? (_jsx(PaperClip, { width: iconSize, height: iconSize })) : iconType === "document" ? (_jsx(Document, { width: iconSize, height: iconSize })) : iconType === "file" ? (_jsx(File, { width: iconSize, height: iconSize })) : iconType === "google" ? (_jsx(Google, { width: iconSize, height: iconSize })) : iconType === "pdf" ? (_jsx(PDF, { width: iconSize, height: iconSize })) : iconType === "enter" ? (_jsx(Enter, { width: iconSize, height: iconSize })) : iconType === "key" ? (_jsx(Key, { width: iconSize, height: iconSize })) : iconType === "cornerDown" ? (_jsx(CornerDown, { width: iconSize, height: iconSize })) : iconType === "notAllowed" ? (_jsx(NotAllowed, { width: iconSize, height: iconSize })) : iconType === "university" ? (_jsx(University, { width: iconSize, height: iconSize })) : iconType === "pause" ? (_jsx(Pause, { width: iconSize, height: iconSize })) : iconType === "resume" ? (_jsx(Resume, { width: iconSize, height: iconSize })) : iconType === "ascendingOrder" ? (_jsx(AscendingOrder, { width: iconSize, height: iconSize })) : iconType === "descendingOrder" ? (_jsx(DescendingOrder, { width: iconSize, height: iconSize })) : iconType === "userClock" ? (_jsx(UserClock, { width: iconSize, height: iconSize })) : iconType === "tickVerification" ? (_jsx(TickVerification, { width: iconSize, height: iconSize })) : iconType === "copied" ? (_jsx(Copied, { width: iconSize, height: iconSize })) : iconType === "archive" ? (_jsx(Archive, { width: iconSize, height: iconSize })) : iconType === "additionalInformation" ? (_jsx(AdditionalInformation, { width: iconSize, height: iconSize })) : iconType === "checkCircle" ? (_jsx(CheckCircle, { width: iconSize, height: iconSize })) : iconType === "companyClock" ? (_jsx(CompanyClock, { width: iconSize, height: iconSize })) : iconType === "boldPlus" ? (_jsx(BoldPlus, { width: iconSize, height: iconSize })) : iconType === "square" ? (_jsx(Square, { width: iconSize, height: iconSize })) : iconType === "boxPencil" ? (_jsx(BoxPencil, { width: iconSize, height: iconSize })) : iconType === "companyOwnership" ? (_jsx(CompanyOwnership, { width: iconSize, height: iconSize })) : iconType === "cutBriefcase" ? (_jsx(CutBriefcase, { width: iconSize, height: iconSize })) : iconType === "box" ? (_jsx(Box, { width: iconSize, height: iconSize })) : iconType === "googleLogo" ? (_jsx(GoogleLogo, { width: iconSize, height: iconSize })) : iconType === "microsoftLogo" ? (_jsx(MicrosoftLogo, { width: iconSize, height: iconSize })) : iconType === "people" ? (_jsx(People, { width: iconSize, height: iconSize })) : iconType === "crunchBaseLogo" ? (_jsx(CrunchBaseLogo, { width: iconSize, height: iconSize })) : iconType === "linkedinColoredLogo" ? (_jsx(LinkedinColoredLogo, { width: iconSize, height: iconSize })) : iconType === "googleColoredLogo" ? (_jsx(GoogleColoredLogo, { width: iconSize, height: iconSize })) : iconType === "websiteBadge" ? (_jsx(WebsiteBadge, { width: iconSize, height: iconSize })) : iconType === "arrowLeftShort" ? (_jsx(ArrowLeftShort, { width: iconSize, height: iconSize })) : iconType === "notDownloaded" ? (_jsx(NotDownloaded, { width: iconSize, height: iconSize })) : iconType === "lock" ? (_jsx(Lock, { width: iconSize, height: iconSize })) : iconType === "companyStrategy" ? (_jsx(CompanyStrategy, { width: iconSize, height: iconSize })) : iconType === "industryStrategy" ? (_jsx(IndustryStrategy, { width: iconSize, height: iconSize })) : iconType === "strategyUpdate" ? (_jsx(UpdateStrategy, { width: iconSize, height: iconSize })) : iconType === "unarchive" ? (_jsx(Unarchive, { width: iconSize, height: iconSize })) : iconType === "roundedDocument" ? (_jsx(RoundedDocument, { width: iconSize, height: iconSize })) : iconType === "marketMap" ? (_jsx(MarketMap, { width: iconSize, height: iconSize })) : iconType === "leadership" ? (_jsx(Leadership, { width: iconSize, height: iconSize })) : iconType === "fullScreen" ? (_jsx(FullScreen, { width: iconSize, height: iconSize })) : iconType === "exitFullScreen" ? (_jsx(ExitFullScreen, { width: iconSize, height: iconSize })) : iconType === "plannerTable" ? (_jsx(PlannerTable, { width: iconSize, height: iconSize })) : iconType === "upload" ? (_jsx(Upload, { width: iconSize, height: iconSize })) : iconType === "agent" ? (_jsx(Agent, { width: iconSize, height: iconSize })) : iconType === "doubleTick" ? (_jsx(DoubleTick, { width: iconSize, height: iconSize })) : iconType === "reply" ? (_jsx(Reply, { width: iconSize, height: iconSize })) : iconType === "lowCreditWarning" ? (_jsx(LowCreditWarning, { width: iconSize, height: iconSize })) : iconType === "threeDots" ? (_jsx(ThreeDots, { width: iconSize, height: iconSize })) : iconType === "creditAdmin" ? (_jsx(CreditAdmin, { width: iconSize, height: iconSize })) : iconType === "collection" ? (_jsx(Collection, { width: iconSize, height: iconSize })) : iconType === "save" ? (_jsx(Save, { width: iconSize, height: iconSize })) : iconType === "sidebarArrow" ? (_jsx(SidebarArrow, { width: iconSize, height: iconSize })) : iconType === "gradientSparkles" ? (_jsx(AiGradientSparkles, { width: iconSize, height: iconSize })) : iconType === "plusCircle" ? (_jsx(PlusCircle, { width: iconSize, height: iconSize })) : iconType === "incomingCall" ? (_jsx(IncomingCall, { width: iconSize, height: iconSize })) : iconType === "outgoingCall" ? (_jsx(OutGoingCall, { width: iconSize, height: iconSize })) : iconType === "message" ? (_jsx(Message, { width: iconSize, height: iconSize })) : iconType === "missedCall" ? (_jsx(MissedCall, { width: iconSize, height: iconSize })) : iconType === "filter" ? (_jsx(Filter, { width: iconSize, height: iconSize })) : iconType === "call" ? (_jsx(Call, { width: iconSize, height: iconSize })) : iconType === "voiceCall" ? (_jsx(VoiceCall, { width: iconSize, height: iconSize })) : iconType === "messageLogo" ? (_jsx(MessageLogo, { width: iconSize, height: iconSize })) : iconType === "requisitionLogo" ? (_jsx(RequisitionLogo, { width: iconSize, height: iconSize })) : iconType === "actionLogo" ? (_jsx(ActionLogo, { width: iconSize, height: iconSize })) : iconType === "organizationPlaceholder" ? (_jsx(OrganizationPlaceholder, { width: iconSize, height: iconSize })) : iconType === "approved" ? (_jsx(Approved, { width: iconSize, height: iconSize })) : iconType === "rejected" ? (_jsx(Reject, { width: iconSize, height: iconSize })) : iconType === "pending" ? (_jsx(Pending, { width: iconSize, height: iconSize })) : iconType === "default" ? (_jsx(Default, { width: iconSize, height: iconSize })) : iconType === "creditSystemUser" ? (_jsx(CreditSystemUser, { width: iconSize, height: iconSize })) : iconType === "usFlag" ? (_jsx(USFlag, { width: iconSize, height: iconSize })) : iconType === "canadaFlag" ? (_jsx(CanadaFlag, { width: iconSize, height: iconSize })) : iconType === "australiaFlag" ? (_jsx(AustraliaFlag, { width: iconSize, height: iconSize })) : iconType === "mexicoFlag" ? (_jsx(MexicoFlag, { width: iconSize, height: iconSize })) : iconType === "newZealandFlag" ? (_jsx(NewZealandFlag, { width: iconSize, height: iconSize })) : iconType === "inbox" ? (_jsx(Inbox, { width: iconSize, height: iconSize })) : iconType === "ukFlag" ? (_jsx(UkFlag, { width: iconSize, height: iconSize })) : iconType === "lightBulb" ? (_jsx(LightBulb, { width: iconSize, height: iconSize })) : iconType === "linkedin" ? (_jsx(LinkedinIcon, { width: iconSize, height: iconSize })) : iconType === "outlookColored" ? (_jsx(OutlookColored, { width: iconSize, height: iconSize })) : iconType === "googleColored" ? (_jsx(GoogleIcon, { width: iconSize, height: iconSize })) : iconType === "linkedinPremium" ? (_jsx(InmailIcon, { width: iconSize, height: iconSize })) : iconType === "text" ? (_jsx(TextIcon, { width: iconSize, height: iconSize })) : iconType === "telephone" ? (_jsx(PhoneIcon, { width: iconSize, height: iconSize })) : iconType === "welcomeAboard" ? (_jsx(WelcomeAboard, { width: iconSize, height: iconSize })) : iconType === "googleDriveLogo" ? (_jsx(GoogleDriveLogo, { width: iconSize, height: iconSize })) : iconType === "spreadsheet" ? (_jsx(Spreadsheet, { width: iconSize, height: iconSize })) : iconType === "sparklingStars" ? (_jsx(SparklingStars, { width: iconSize, height: iconSize })) : iconType === "syncLoader" ? (_jsx(SyncLoader, { width: iconSize, height: iconSize })) : iconType === "accessRevoke" ? (_jsx(AccessRevoke, { width: iconSize, height: iconSize })) : iconType === "pipeline" ? (_jsx(Pipeline, { width: iconSize, height: iconSize })) : iconType === "chatSend" ? (_jsx(ChatSend, { width: iconSize, height: iconSize })) : iconType === "stopwatch" ? (_jsx(Stopwatch, { width: iconSize, height: iconSize })) : null;
 };
 export default GetSvgIcon;

package/dist/types/components/InputField/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 interface InputFieldProps {
     id?: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type InputFieldFormProps = {
     id?: string;
     value?: string;

package/dist/types/components/NoteEditor/FontSizeControl.d.ts

@@ -1,9 +1,6 @@
-import React from 'react';
-import { EditorState } from 'draft-js';
-import "./FontSizeControl.scss";
+import { Editor } from "@tiptap/react";
 interface FontSizeControlProps {
-    editorState: EditorState;
-    updateEditorState: (newEditorState: EditorState) => void;
+    editor: Editor | null;
 }
-declare const FontSizeControl: React.FC<FontSizeControlProps>;
+declare const FontSizeControl: ({ editor }: FontSizeControlProps) => import("react/jsx-runtime").JSX.Element | null;
 export default FontSizeControl;

package/dist/types/components/NoteEditor/FontSizeControl.js

@@ -1,33 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { EditorState, Modifier } from 'draft-js';
-import "./FontSizeControl.scss";
-const FontSizeControl = ({ editorState, updateEditorState }) => {
+import { useState, useEffect } from "react";
+import styles from "./FontSizeControl.module.scss";
+const FontSizeControl = ({ editor }) => {
     const fontSizes = ['12', '14', '16', '18', '20', '24', '32'];
-    const [fontIndex, setFontIndex] = useState(0);
+    const [fontIndex, setFontIndex] = useState(2); // Default to 16px (index 2)
     const [currentFontSize, setCurrentFontSize] = useState(fontSizes[fontIndex]);
-    const setFontSize = (fontSize) => {
-        const selection = editorState.getSelection();
-        const contentState = editorState.getCurrentContent();
-        // Remove any existing font size styles
-        let newContentState = contentState;
-        fontSizes.forEach((size) => {
-            newContentState = Modifier.removeInlineStyle(newContentState, selection, `FONTSIZE_${size}`);
-        });
-        // Get the last added font size style as a string
-        newContentState = Modifier.applyInlineStyle(newContentState, selection, `FONTSIZE_${fontSize}`);
-        updateEditorState(EditorState.push(editorState, newContentState, 'change-inline-style'));
+    if (!editor) {
+        return null;
+    }
+    // Get current font size from editor
+    const getCurrentFontSize = () => {
+        const fontSize = editor.getAttributes('textStyle').fontSize;
+        if (fontSize) {
+            const numericSize = fontSize.replace('px', '');
+            const index = fontSizes.indexOf(numericSize);
+            return index !== -1 ? index : 2; // Default to 16px if not found
+        }
+        return 2; // Default to 16px
     };
+    // Update font size state when editor selection changes
+    useEffect(() => {
+        if (editor) {
+            const updateFontSize = () => {
+                const currentIndex = getCurrentFontSize();
+                setFontIndex(currentIndex);
+                setCurrentFontSize(fontSizes[currentIndex]);
+            };
+            editor.on('selectionUpdate', updateFontSize);
+            editor.on('transaction', updateFontSize);
+            return () => {
+                editor.off('selectionUpdate', updateFontSize);
+                editor.off('transaction', updateFontSize);
+            };
+        }
+    }, [editor]);
     const handleFontDecrease = () => {
         setFontIndex(prevIndex => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
     };
     const handleFontIncrease = () => {
-        setFontIndex(prevIndex => (prevIndex < 6 ? prevIndex + 1 : prevIndex));
+        setFontIndex(prevIndex => (prevIndex < fontSizes.length - 1 ? prevIndex + 1 : prevIndex));
     };
     useEffect(() => {
         setCurrentFontSize(fontSizes[fontIndex]);
-        setFontSize(fontSizes[fontIndex]);
-    }, [fontIndex]);
-    return (_jsx("div", { className: "font-size-control", children: _jsxs("span", { className: 'fontSizeSpan', children: [_jsx("span", { className: "divider", children: "|" }), _jsx("span", { className: 'btnSpan', onClick: handleFontDecrease, children: "-" }), _jsx("input", { className: 'fontSizeInput', type: 'text', value: currentFontSize, disabled: true }), _jsx("span", { className: 'btnSpan', onClick: handleFontIncrease, children: "+" }), _jsx("span", { className: "divider", children: "|" })] }) }));
+        // Apply the font size to the editor using the FontSize extension
+        const fontSize = fontSizes[fontIndex];
+        editor.chain().focus().setFontSize(`${fontSize}px`).run();
+    }, [fontIndex, editor]);
+    return (_jsx("div", { className: styles.fontSizeControl, children: _jsxs("span", { className: styles.fontSizeSpan, children: [_jsx("span", { className: styles.divider, children: "|" }), _jsx("span", { className: styles.btnSpan, onClick: handleFontDecrease, children: "-" }), _jsx("input", { className: styles.fontSizeInput, type: 'text', value: currentFontSize, disabled: true }), _jsx("span", { className: styles.btnSpan, onClick: handleFontIncrease, children: "+" }), _jsx("span", { className: styles.divider, children: "|" })] }) }));
 };
 export default FontSizeControl;

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

@@ -0,0 +1,10 @@
+interface Props {
+    value: string;
+    handleChange: (newTextValue: string) => void;
+    contributors?: string[];
+    isDisabled: boolean;
+    isLoading: boolean;
+    notesLoading: boolean;
+}
+declare const NoteEditor: ({ value, handleChange, contributors, isDisabled, isLoading, notesLoading, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default NoteEditor;

package/dist/types/components/NoteEditor/NoteEditor.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import TextStyle from "@tiptap/extension-text-style";
+import Underline from "@tiptap/extension-underline";
+import FontSize from "tiptap-extension-font-size";
+import ToolbarItem from "./ToolbarItem";
+import styles from "./NoteEditor.module.scss";
+const NoteEditor = ({ value = "", handleChange = () => false, contributors, isDisabled = false, isLoading = false, notesLoading = false, }) => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                heading: {
+                    levels: [1, 2, 3, 4, 5, 6],
+                },
+                bulletList: {
+                    keepMarks: true,
+                    keepAttributes: false,
+                },
+                orderedList: {
+                    keepMarks: true,
+                    keepAttributes: false,
+                },
+            }),
+            TextStyle,
+            Underline,
+            FontSize.configure({
+                types: ['textStyle'],
+            }),
+        ],
+        content: value,
+        editable: !isDisabled,
+        onUpdate: ({ editor }) => {
+            if (!notesLoading) {
+                const text = editor.getText();
+                handleChange(text);
+            }
+        },
+        editorProps: {
+            attributes: {
+                class: styles.proseMirror,
+            },
+        },
+    });
+    useEffect(() => {
+        if (editor && value !== editor.getText()) {
+            editor.commands.setContent(value);
+        }
+    }, [value, editor]);
+    return (_jsxs("div", { className: styles.noteEditorContainer, children: [_jsx(ToolbarItem, { editor: editor, contributors: contributors, isLoading: isLoading }), _jsx("div", { className: styles.editorContent, children: _jsx(EditorContent, { editor: editor }) })] }));
+};
+export default NoteEditor;

package/dist/types/components/NoteEditor/TextStyles.d.ts

@@ -1,3 +1,6 @@
-import "./TextStyles.scss";
-declare const TextStyles: ({ editorState, updateEditorState }: any) => import("react/jsx-runtime").JSX.Element;
+import { Editor } from "@tiptap/react";
+interface TextStylesProps {
+    editor: Editor | null;
+}
+declare const TextStyles: ({ editor }: TextStylesProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TextStyles;