react-core-ts 1.1.21 → 1.1.23

package/dist/ReactOTPInput.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { FieldErrors } from "react-hook-form";
+type OTPInputProps = {
+    BoxLength?: number;
+    value?: string;
+    onChangeOTP: (otp: string) => void;
+    label?: string;
+    errors?: FieldErrors;
+    name: string;
+    id: string;
+    labelTitle?: string;
+    initialTime?: number;
+    callbackFn?: (data: boolean) => void;
+};
+declare const OTPInput: React.FC<OTPInputProps>;
+export default OTPInput;

package/dist/ReactOTPInput.js

@@ -0,0 +1,125 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var OTPInput = function (_a) {
+    var _b = _a.BoxLength, BoxLength = _b === void 0 ? 6 : _b, onChangeOTP = _a.onChangeOTP, _c = _a.value, value = _c === void 0 ? "" : _c, label = _a.label, errors = _a.errors, name = _a.name, id = _a.id, labelTitle = _a.labelTitle, _d = _a.initialTime, initialTime = _d === void 0 ? 240 : _d, callbackFn = _a.callbackFn;
+    // Initialize OTP state from value prop
+    var _e = (0, react_1.useState)(value.split("").concat(Array(BoxLength - value.length).fill(""))), otp = _e[0], setOtp = _e[1];
+    var inputRefs = (0, react_1.useRef)([]);
+    var _f = (0, react_1.useState)(initialTime), remainingTime = _f[0], setRemainingTime = _f[1];
+    var _g = (0, react_1.useState)(false), isTimerCompleted = _g[0], setIsTimerCompleted = _g[1];
+    (0, react_1.useEffect)(function () {
+        // Synchronize local otp state with value prop changes
+        setOtp(value.split("").concat(Array(BoxLength - value.length).fill("")));
+    }, [value, BoxLength]);
+    (0, react_1.useEffect)(function () {
+        if (otp)
+            onChangeOTP(otp.join(""));
+    }, [otp]);
+    (0, react_1.useEffect)(function () {
+        if (remainingTime > 0) {
+            var timerId_1 = setInterval(function () {
+                setRemainingTime(function (prev) { return prev - 1; });
+            }, 1000);
+            return function () { return clearInterval(timerId_1); };
+        }
+        else {
+            setIsTimerCompleted(true);
+        }
+    }, [remainingTime]);
+    var formatTime = function (time) {
+        var minutes = Math.floor(time / 60);
+        var seconds = time % 60;
+        return "".concat(minutes, ":").concat(seconds < 10 ? "0".concat(seconds) : seconds);
+    };
+    var handleChange = function (e, index) {
+        var _a;
+        var value = e.target.value;
+        if (/[^0-9]/.test(value))
+            return;
+        var newOtp = __spreadArray([], otp, true);
+        newOtp[index] = value;
+        setOtp(newOtp);
+        if (value !== "" && index < BoxLength - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus(); // Move focus to next input
+        }
+    };
+    var handleKeyDown = function (e, index) {
+        var _a;
+        if (e.key === "Backspace" && otp[index] === "" && index > 0) {
+            (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus(); // Move focus to previous input
+        }
+    };
+    var handlePaste = function (e) {
+        var _a, _b;
+        var pastedData = e.clipboardData.getData("Text").slice(0, BoxLength);
+        if (/[^0-9]/.test(pastedData))
+            return;
+        var newOtp = pastedData
+            .split("")
+            .concat(Array(BoxLength - pastedData.length).fill(""));
+        setOtp(newOtp);
+        // Move focus to the last filled input field
+        var lastIndex = newOtp.findIndex(function (val) { return val === ""; });
+        if (lastIndex !== -1) {
+            (_a = inputRefs.current[lastIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = inputRefs.current[BoxLength - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    var getErrors = function (err) {
+        var errMsg = "";
+        if (err.message) {
+            errMsg = err === null || err === void 0 ? void 0 : err.message;
+        }
+        return errMsg;
+    };
+    var handleError = function (data) {
+        var _a;
+        if (getErrors(data[name]) === "required" ||
+            getErrors(data[name]) === "Required") {
+            return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
+        }
+        else {
+            return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : "";
+        }
+    };
+    // Reset time function added
+    var resetTimer = function () {
+        setRemainingTime(initialTime);
+        setIsTimerCompleted(false);
+    };
+    var handleResend = function () {
+        if (isTimerCompleted) {
+            callbackFn === null || callbackFn === void 0 ? void 0 : callbackFn(isTimerCompleted);
+            resetTimer();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-2 me-2" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ className: "text-grey-label font-normal text-common" }, { children: label })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex flex-col w-fit" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "flex gap-x-5 " }, { children: Array(BoxLength)
+                            .fill("")
+                            .map(function (_, index) { return ((0, jsx_runtime_1.jsx)("input", { name: name, id: id, type: "text", value: otp[index], onChange: function (e) { return handleChange(e, index); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, onPaste: handlePaste, ref: function (el) { return (inputRefs.current[index] = el); }, maxLength: 1, onFocus: function (e) { return (e.target.style.borderColor = "#667085"); }, onBlur: function (e) { return (e.target.style.borderColor = "#D0D5DD"); }, className: "w-[54px] h-10 text-center text-lg  border border-[#D0D5DD] focus:border-[#667085] transition-colors duration-200 outline-none rounded-sm" }, index)); }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex items-center pt-3" }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ className: "text-common text-[#475467]" }, { children: "Didn't receive a code? " })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-common text-[#003C71] ml-2  ".concat(!isTimerCompleted ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleResend }, { children: "Resend Code" }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("span", __assign({ className: "text-common text-[#475467]" }, { children: ["Remaining Time: ", formatTime(remainingTime)] })) }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "flex justify-center items-center text-[#F94110] text-base font-medium\t" }, { children: errors && errors[name] && (0, jsx_runtime_1.jsxs)("span", { children: [" ", handleError(errors)] }) }))] }))] }));
+};
+exports.default = OTPInput;
+//# sourceMappingURL=ReactOTPInput.js.map

package/dist/ReactOTPInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactOTPInput.js","sourceRoot":"","sources":["../src/ReactOTPInput.tsx"],"names":[],"mappings":"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"}

package/dist/ReactRadioButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RadioProps } from "./commontypes";
+declare const Radio: React.FC<RadioProps>;
+export default Radio;

package/dist/ReactRadioButton.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Radio = function (_a) {
+    var name = _a.name, id = _a.id, label = _a.label, checked = _a.checked, _b = _a.value, value = _b === void 0 ? undefined : _b, handleChange = _a.handleChange, _c = _a.disabled, disabled = _c === void 0 ? false : _c, customLabel = _a.customLabel;
+    var radioRef = (0, react_1.useRef)(null);
+    var onChange = function (e) {
+        handleChange === null || handleChange === void 0 ? void 0 : handleChange(e);
+    };
+    var labelClick = function () {
+        if (radioRef.current) {
+            radioRef.current.click();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labels label-text flex items-center justify-start ".concat(!customLabel && "gap-0", "  ").concat(disabled ? " opacity-70" : "", " ") }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", __assign({ className: "radio-button ".concat(disabled ? "cursor-not-allowed" : "cursor-pointer") }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", checked: checked, disabled: disabled, ref: radioRef, name: name, "data-testid": "app-common-radio", value: value, id: id, onChange: onChange }), (0, jsx_runtime_1.jsx)("span", { className: "radio" })] })), " "] }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text-common font-normal cursor-pointer ".concat(checked ? "text-secondary" : ""), onClick: labelClick }, { children: label }))] })));
+};
+exports.default = Radio;
+//# sourceMappingURL=ReactRadioButton.js.map

package/dist/ReactRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactRadioButton.js","sourceRoot":"","sources":["../src/ReactRadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+BAAsC;AAItC,IAAM,KAAK,GAAyB,UAAC,EASpC;QARC,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,KAAK,WAAA,EACL,OAAO,aAAA,EACP,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EACjB,YAAY,kBAAA,EACZ,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,WAAW,iBAAA;IAEX,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,IAAM,QAAQ,GAAG,UAAC,CAAM;QACtB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,IAAM,UAAU,GAAG;QACjB,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC1B;IACH,CAAC,CAAC;IACF,OAAO,CACL,0CACE,SAAS,EAAE,4DACT,CAAC,WAAW,IAAI,OAAO,eACpB,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,MAAG,iBAErC,4CACE,4CACE,SAAS,EAAE,uBACT,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAClD,iBAEF,kCACE,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,iBACE,kBAAkB,EAC9B,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,GAClB,EACF,iCAAM,SAAS,EAAC,OAAO,GAAQ,KACzB,EAAC,GAAG,IACR,EACN,yCACE,SAAS,EAAE,iDACT,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAC/B,EACF,OAAO,EAAE,UAAU,gBAElB,KAAK,IACF,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC"}

package/dist/commontypes.d.ts

@@ -164,3 +164,13 @@ export interface CheckboxProps {
     handleChange?: (e: any) => void;
     value?: string | number;
 }
+export interface RadioProps {
+    id: string;
+    name: string;
+    label?: string;
+    value?: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    customLabel?: boolean;
+    handleChange?: (e: any) => void;
+}

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export type { AutoSuggestionInputProps } from "./commontypes";
 export { default as ExpandableAutoComplete } from "./ExpandableAutoComplete";
 export { default as ModernAutoComplete } from "./ReactAutoComplete";
 export { default as ModernCheckBox } from "./ReactCheckbox";
+export { default as ModernOtpInput } from "./ReactOTPInput";
+export { default as ModernRadio } from "./ReactRadioButton";
 export { default as ModernTextArea } from "./ReactTextArea";
 export { default as ModernTextField } from "./ReactTextField";
 export { deepEqual } from "./utilities/deepEqual";

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolTip = exports.ExpandableToolTip = exports.deepEqual = exports.ModernTextField = exports.ModernTextArea = exports.ModernCheckBox = exports.ModernAutoComplete = exports.ExpandableAutoComplete = exports.AutoCompleteWithTreeStructure = exports.AutoCompleteWithSelectedList = exports.CustomAutoComplete = exports.AutoComplete = void 0;
+exports.ToolTip = exports.ExpandableToolTip = exports.deepEqual = exports.ModernTextField = exports.ModernTextArea = exports.ModernRadio = exports.ModernOtpInput = exports.ModernCheckBox = exports.ModernAutoComplete = exports.ExpandableAutoComplete = exports.AutoCompleteWithTreeStructure = exports.AutoCompleteWithSelectedList = exports.CustomAutoComplete = exports.AutoComplete = void 0;
 require("./styles/global.css");
 var AutoComplete_1 = require("./AutoComplete");
 Object.defineProperty(exports, "AutoComplete", { enumerable: true, get: function () { return __importDefault(AutoComplete_1).default; } });
@@ -18,6 +18,10 @@ var ReactAutoComplete_1 = require("./ReactAutoComplete");
 Object.defineProperty(exports, "ModernAutoComplete", { enumerable: true, get: function () { return __importDefault(ReactAutoComplete_1).default; } });
 var ReactCheckbox_1 = require("./ReactCheckbox");
 Object.defineProperty(exports, "ModernCheckBox", { enumerable: true, get: function () { return __importDefault(ReactCheckbox_1).default; } });
+var ReactOTPInput_1 = require("./ReactOTPInput");
+Object.defineProperty(exports, "ModernOtpInput", { enumerable: true, get: function () { return __importDefault(ReactOTPInput_1).default; } });
+var ReactRadioButton_1 = require("./ReactRadioButton");
+Object.defineProperty(exports, "ModernRadio", { enumerable: true, get: function () { return __importDefault(ReactRadioButton_1).default; } });
 var ReactTextArea_1 = require("./ReactTextArea");
 Object.defineProperty(exports, "ModernTextArea", { enumerable: true, get: function () { return __importDefault(ReactTextArea_1).default; } });
 var ReactTextField_1 = require("./ReactTextField");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAGwB;AAFtB,6HAAA,OAAO,OAAgB;AACvB,mIAAA,OAAO,OAAsB;AAE/B,+EAAyF;AAAhF,6JAAA,OAAO,OAAgC;AAChD,iFAA2F;AAAlF,+JAAA,OAAO,OAAiC;AAEjD,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAC1C,yDAAoE;AAA3D,wIAAA,OAAO,OAAsB;AACtC,iDAA4D;AAAnD,gIAAA,OAAO,OAAkB;AAClC,iDAA4D;AAAnD,gIAAA,OAAO,OAAkB;AAClC,mDAA8D;AAArD,kIAAA,OAAO,OAAmB;AACnC,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,qEAA8E;AAArE,wIAAA,OAAO,OAAqB;AACrC,+CAAyD;AAAhD,mHAAA,OAAO,OAAW"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAGwB;AAFtB,6HAAA,OAAO,OAAgB;AACvB,mIAAA,OAAO,OAAsB;AAE/B,+EAAyF;AAAhF,6JAAA,OAAO,OAAgC;AAChD,iFAA2F;AAAlF,+JAAA,OAAO,OAAiC;AAEjD,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAC1C,yDAAoE;AAA3D,wIAAA,OAAO,OAAsB;AACtC,iDAA4D;AAAnD,gIAAA,OAAO,OAAkB;AAClC,iDAA4D;AAAnD,gIAAA,OAAO,OAAkB;AAClC,uDAA4D;AAAnD,gIAAA,OAAO,OAAe;AAC/B,iDAA4D;AAAnD,gIAAA,OAAO,OAAkB;AAClC,mDAA8D;AAArD,kIAAA,OAAO,OAAmB;AACnC,mDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,qEAA8E;AAArE,wIAAA,OAAO,OAAqB;AACrC,+CAAyD;AAAhD,mHAAA,OAAO,OAAW"}

package/dist/styles/components/tooltip.css

@@ -0,0 +1,441 @@
+.tooltip-container {
+  position: relative;
+  transition:
+    background-color 0.3s,
+    width 0.3s,
+    height 0.3s,
+    color 0.3s;
+}
+
+.bottom {
+  .tooltip {
+    position: absolute;
+    bottom: -40;
+    right: 3px;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    max-width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition: all 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+
+    &.info {
+      color: #ffffff !important;
+      border: 1px solid #ffffff;
+      background-color: #000000;
+      right: 1px;
+      top: 5px;
+    }
+
+    &.card {
+      color: #ffffff !important;
+      border: 1px solid #ffffff;
+      background-color: #000000;
+      right: -8px;
+      top: 5px;
+    }
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 20px;
+    z-index: 999;
+    top: -4px;
+    border: 1px solid #e55353;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .info.tooltip::before {
+    border: 1px solid #000000;
+    background-color: #000000;
+    right: 14px;
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -4px;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+  }
+
+  .card.tooltip::before {
+    border: 1px solid #000000;
+    background-color: #000000;
+    right: 14px;
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -3px;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 46px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+
+    &.info {
+      top: 30px;
+      max-width: 500px;
+      position: absolute;
+    }
+
+    &.card {
+      top: 20px;
+      max-width: 300px;
+      position: absolute;
+    }
+  }
+}
+.top-tool {
+  .tooltip {
+    position: absolute;
+    bottom: 45px !important;
+    left: 0;
+    top: auto !important;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    white-space: normal;
+    z-index: 999;
+    font-size: 12px;
+    max-width: 100%;
+    color: #ff681d !important;
+    pointer-events: none;
+    transition: all 0.3s;
+    border: 1px solid #ff681d;
+    background-color: #fff;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    bottom: -4px;
+    border: 1px solid #ff681d;
+    border-left: none;
+    border-top: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #fff;
+  }
+
+  .tooltip-container:hover .tooltip {
+    bottom: 45px !important;
+    opacity: 1;
+    top: auto !important;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+.bottom-tool {
+  .tooltip {
+    position: absolute;
+    bottom: -40;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    max-width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #ff681d !important;
+    white-space: wrap;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #ff681d;
+    background-color: #fff;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -4px;
+    border: 1px solid #ff681d;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #fff;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 46px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.right {
+  .tooltip {
+    position: absolute;
+    top: 2.5px;
+    left: calc(100% + 9px);
+    transform: translateX(0%);
+    padding: 8px;
+    opacity: 0;
+    min-width: 200px;
+    max-width: 200px;
+    min-height: calc(100% - 16px);
+    height: auto;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip-card {
+    padding: 3px 10px 4px;
+    top: -4px;
+    min-width: 175px;
+    background-color: #3d414a;
+    border: 1px solid #3d414a;
+
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    left: -8px;
+    top: 14px;
+    z-index: 999;
+    transform: translateY(10px);
+    border: 1px solid #e55353;
+    border-top: none;
+    border-right: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-card::before {
+    top: 8px;
+    background-color: #3d414a;
+    border: 1px solid #3d414a;
+  }
+
+  .tooltip-container:hover {
+    .tooltip {
+      top: 2.5px;
+      opacity: 1;
+      visibility: visible;
+      z-index: 999;
+      pointer-events: auto;
+    }
+
+    .tooltip-card {
+      top: -4px;
+    }
+  }
+}
+
+.left {
+  .tooltip {
+    position: absolute;
+    top: 2.5px;
+    right: calc(100% + 9px);
+    transform: translateX(0%);
+    padding: 8px;
+    opacity: 0;
+    min-width: 200px;
+    max-width: 200px;
+    min-height: calc(100% - 16px);
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 0px;
+    top: 14px;
+    z-index: 999;
+    transform: translateY(10px);
+    border: 1px solid #e55353;
+    border-bottom: none;
+    border-left: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 2.5px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.top {
+  .tooltip {
+    position: absolute;
+    top: -40;
+    left: 0;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 20px;
+    z-index: 999;
+    bottom: -4px;
+    border: 1px solid #e55353;
+    border-left: none;
+    border-top: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: -40px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.custom-tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-text {
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.custom-tooltip {
+  position: absolute;
+  top: 100%;
+  left: 20%;
+  opacity: 0;
+  visibility: hidden;
+  font-size: 12px;
+  background: #deefff;
+  border-color: #bee0ff;
+  padding: 5px;
+  align-items: center;
+  transition:
+    opacity 0.3s,
+    visibility 0.3s,
+    top 0.3s,
+    background 0.3s;
+  z-index: 1;
+}
+
+.custom-tooltip::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 20%;
+  /* Center the arrow */
+  border-width: 9px;
+  /* Slightly larger to act as border */
+  border-style: solid;
+  border-color: transparent transparent #bee0ff transparent;
+  /* Border color */
+  transform: translateX(-20%);
+  z-index: -1;
+  /* Ensure it's behind the ::after pseudo-element */
+}
+
+.custom-tooltip::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 20%;
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent transparent #deefff transparent;
+  transform: translateX(-20%);
+  z-index: 1;
+}
+
+.custom-tooltip-container:hover .custom-tooltip {
+  top: 100%;
+  opacity: 1;
+  visibility: visible;
+  background: #deefff;
+  transform: translate(-20%, 10px);
+}