pager-widget 1.0.11-alpha.9 → 1.0.13

package/out/ChatPageHeader.js

@@ -0,0 +1,267 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPageHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const BotMain_1 = require("./BotMain");
+const widgetStore_1 = require("./widgetStore");
+const ChatPageHeader = ({ toggleWidget, isExpanded, restart, exit, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isMenuOpen, setIsMenuOpen] = react_1.default.useState(false);
+    const [showMenu, setShowMenu] = react_1.default.useState(false);
+    const ref = react_1.default.useRef(null);
+    const expandRef = react_1.default.useRef(null);
+    const [expandPopupOpen, setExpandPopupOpen] = react_1.default.useState(false);
+    const [showExpandPopUp, setShowExpandPopUp] = react_1.default.useState(false);
+    const handleRestartChat = () => {
+        // Step 1: Read current object from 'CONVERSATION'
+        const raw = localStorage.getItem(`CONVERSATION::${widget.data.id}`);
+        if (!raw) {
+            console.warn('No data found in CONVERSATION key');
+            return;
+        }
+        try {
+            const currentData = JSON.parse(raw);
+            // Step 2: Get existing array from 'CONVERASATION_LIST'
+            const listRaw = localStorage.getItem(`CONVERSATION_LIST::${widget.data.id}`);
+            const currentList = listRaw ? JSON.parse(listRaw) : [];
+            // Step 3: Append the current object
+            currentList.push(currentData);
+            // Step 4: Save back to CONVERSATION_LIST'
+            localStorage.setItem(`CONVERSATION_LIST::${widget.data.id}`, JSON.stringify(currentList));
+            localStorage.removeItem(`CONVERSATION::${widget.data.id}`);
+            localStorage.removeItem('CURRENT_CONVERSATION');
+            // Step 5: Perform other exit actions
+            restart();
+            // widgetFetchStore2.trigger.exitConversation()
+            // Optional: Also update widget state
+            // widgetStore.send({ type: 'handleExitChatState', value: true })
+        }
+        catch (error) {
+            console.error('Failed to parse localStorage data:', error);
+        }
+    };
+    const handleExitChat = () => {
+        console.log('exit triggering');
+        exit();
+    };
+    const menuItems = [
+        {
+            id: 1,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiRefreshSolid, { className: "w-[14px] h-[14px] text-slate-600" })),
+            label: 'Restart chat',
+            selected: true,
+            onClick: () => {
+                handleRestartChat();
+                setIsMenuOpen(false);
+            },
+        },
+        {
+            id: 2,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiStopBigStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
+            label: 'Exit chat',
+            selected: false,
+            onClick: () => {
+                handleExitChat();
+                setIsMenuOpen(false);
+                // handleBackButtonClick()
+            },
+        },
+    ];
+    const expandMenuItems = [
+        {
+            id: 1,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiPhoneStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
+            label: 'Default mode',
+            selected: isExpanded === widgetStore_1.WidgetExpandType.DEFAULT,
+            onClick: () => {
+                widgetStore_1.widgetStore.trigger.expandWidget({
+                    expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
+                });
+                setExpandPopupOpen(false);
+            },
+        },
+        {
+            id: 2,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiTabletStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
+            label: 'Expanded mode',
+            selected: isExpanded === widgetStore_1.WidgetExpandType.EXPANDED,
+            onClick: () => {
+                widgetStore_1.widgetStore.trigger.expandWidget({
+                    expanded_size: widgetStore_1.WidgetExpandType.EXPANDED,
+                });
+                setExpandPopupOpen(false);
+            },
+        },
+        {
+            id: 3,
+            icon: ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSpatialCurvedScreenStroke, { className: "w-[16px] h-[16px] text-slate-600" })),
+            label: 'Full screen mode',
+            selected: isExpanded === widgetStore_1.WidgetExpandType.FULLSCREEN,
+            onClick: () => {
+                widgetStore_1.widgetStore.trigger.expandWidget({
+                    expanded_size: widgetStore_1.WidgetExpandType.FULLSCREEN,
+                });
+                setExpandPopupOpen(false);
+            },
+        },
+    ];
+    const selectedExpandItem = expandMenuItems.find((item) => {
+        return item.selected ? item.icon : null;
+    });
+    (0, react_1.useEffect)(() => {
+        function handleClick(event) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        }
+        if (isMenuOpen) {
+            document.addEventListener('mousedown', handleClick);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [isMenuOpen]);
+    (0, react_1.useEffect)(() => {
+        function handleClick(event) {
+            if (expandRef.current &&
+                !expandRef.current.contains(event.target)) {
+                setExpandPopupOpen(false);
+            }
+        }
+        if (expandPopupOpen) {
+            document.addEventListener('mousedown', handleClick);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [expandPopupOpen]);
+    react_1.default.useEffect(() => {
+        if (isMenuOpen) {
+            setShowMenu(true);
+        }
+        else if (showMenu) {
+            const timeout = setTimeout(() => setShowMenu(false), 140);
+            return () => clearTimeout(timeout);
+        }
+    }, [isMenuOpen, showMenu]);
+    react_1.default.useEffect(() => {
+        if (expandPopupOpen) {
+            setShowExpandPopUp(true);
+        }
+        else if (showExpandPopUp) {
+            const timeout = setTimeout(() => setShowExpandPopUp(false), 140);
+            return () => clearTimeout(timeout);
+        }
+    }, [expandPopupOpen, showExpandPopUp]);
+    const handleBackButtonClick = () => {
+        if (isExpanded !== widgetStore_1.WidgetExpandType.DEFAULT) {
+            widgetStore_1.widgetStore.trigger.expandWidget({
+                expanded_size: widgetStore_1.WidgetExpandType.DEFAULT,
+            });
+            setTimeout(() => {
+                widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
+            }, 300);
+            widgetStore_1.widgetStore.trigger.handleExitChatState({ value: false });
+        }
+        else {
+            widgetStore_1.widgetStore.trigger.selectTab({ tab: BotMain_1.TabType.HOME });
+            widgetStore_1.widgetStore.send({ type: 'handleExitChatState', value: false });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("header", { className: "flex items-center px-0 py-[15px] border-b border-zinc-300 w-full justify-between h-[60px] bg-white rounded-t-[22px]", "data-model-id": "10445:55564", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-5 py-0 w-full", children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center justify-center gap-2.5 p-0 cursor-pointer hover:bg-slate-100 rounded-xl overflow-hidden", onClick: handleBackButtonClick, children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiChevronLeftStroke, { className: "w-6 h-6 cursor-pointer" }) }), (0, jsx_runtime_1.jsx)("img", { className: "w-auto h-[30px]", src: widget?.data?.logo_url }), (0, jsx_runtime_1.jsx)("span", { className: "flex flex-col items-start flex-1 grow", children: (0, jsx_runtime_1.jsx)("span", { className: "flex flex-col items-start gap-[18px] flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("h1", { className: "w-fit mt-[-1.00px] font-text-md-medium font-[number:var(--text-md-medium-font-weight)] text-[#020618] text-[length:var(--text-md-medium-font-size)] tracking-[var(--text-md-medium-letter-spacing)] leading-[var(--text-md-medium-line-height)] whitespace-nowrap [font-style:var(--text-md-medium-font-style)]", children: widget?.data?.name }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-5 py-0 w-max justify-end", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: ref, children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-1 cursor-pointer hover:bg-slate-100 rounded-lg overflow-hidden", onClick: () => setIsMenuOpen(!isMenuOpen), children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiThreeDotsMenuVerticalStroke, { className: "w-[16px] h-[16px]" }) }) }), showMenu && ((0, jsx_runtime_1.jsxs)("nav", { className: `flex flex-col w-[126px] h-max absolute items-start gap-1 p-1 right-0 bg-white rounded-lg overflow-hidden border border-solid border-slate-200 z-50`, style: {
+                                    animation: isMenuOpen
+                                        ? 'popin 0.18s cubic-bezier(0.4,0,0.2,1)'
+                                        : 'popout 0.14s cubic-bezier(0.4,0,0.2,1)',
+                                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                                    @keyframes popin {
+                                        0% {
+                                            opacity: 0;
+                                            transform: scale(0.95) translateY(-8px);
+                                        }
+                                        100% {
+                                            opacity: 1;
+                                            transform: scale(1) translateY(0);
+                                        }
+                                    }
+                                    @keyframes popout {
+                                        0% {
+                                            opacity: 1;
+                                            transform: scale(1) translateY(0);
+                                        }
+                                        100% {
+                                            opacity: 0;
+                                            transform: scale(0.95) translateY(-8px);
+                                        }
+                                    }
+                                ` }), menuItems.map((item) => ((0, jsx_runtime_1.jsxs)("button", { className: `flex items-center gap-1.5 pl-2 pr-3 py-1.5 relative self-stretch w-full cursor-pointer 
+                                    hover:bg-slate-100 rounded-md overflow-hidden`, onClick: item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5 flex-[0_0_auto]", children: item.icon }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start justify-center gap-2 flex-1 self-stretch grow", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "w-fit whitespace-nowrap text-xs font-medium text-[#020618]", children: item.label }) }) }) })] }, item.id)))] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: expandRef, children: [(0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-1 cursor-pointer hover:bg-slate-100 rounded-lg overflow-hidden", onClick: () => setExpandPopupOpen(!expandPopupOpen), children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: selectedExpandItem
+                                        ? selectedExpandItem.icon
+                                        : null }) }), showExpandPopUp && ((0, jsx_runtime_1.jsxs)("nav", { className: `flex flex-col w-[148px] h-max absolute items-start gap-1 p-1 right-0 bg-white rounded-lg overflow-hidden border border-solid border-slate-200 z-50`, style: {
+                                    animation: expandPopupOpen
+                                        ? 'popin 0.18s cubic-bezier(0.4,0,0.2,1)'
+                                        : 'popout 0.14s cubic-bezier(0.4,0,0.2,1)',
+                                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+                                    @keyframes popin {
+                                        0% {
+                                            opacity: 0;
+                                            transform: scale(0.95) translateY(-8px);
+                                        }
+                                        100% {
+                                            opacity: 1;
+                                            transform: scale(1) translateY(0);
+                                        }
+                                    }
+                                    @keyframes popout {
+                                        0% {
+                                            opacity: 1;
+                                            transform: scale(1) translateY(0);
+                                        }
+                                        100% {
+                                            opacity: 0;
+                                            transform: scale(0.95) translateY(-8px);
+                                        }
+                                    }
+                                ` }), expandMenuItems.map((item) => ((0, jsx_runtime_1.jsxs)("button", { className: `flex items-center gap-1.5 pl-2 pr-3 py-1.5 relative self-stretch w-full cursor-pointer 
+                                    hover:bg-slate-100 rounded-md overflow-hidden`, style: {
+                                            backgroundColor: item.selected
+                                                ? '#f0f0f0'
+                                                : '',
+                                        }, onClick: item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5 flex-[0_0_auto]", children: item.icon }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start justify-center gap-2 flex-1 self-stretch grow", children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-col items-start gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1 flex-[0_0_auto]", children: (0, jsx_runtime_1.jsx)("div", { className: "w-fit whitespace-nowrap text-xs font-medium text-[#020618]", children: item.label }) }) }) })] }, item.id)))] }))] }), (0, jsx_runtime_1.jsx)("button", { className: "inline-flex items-center gap-2.5 p-1 cursor-pointer hover:bg-slate-100 rounded-lg overflow-hidden", onClick: toggleWidget, children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2.5", children: (0, jsx_runtime_1.jsx)(pikaicons_react_1.PiMultipleCrossCancelDefaultStroke, { className: "w-[18px] h-[18px]" }) }) })] })] }));
+};
+exports.ChatPageHeader = ChatPageHeader;

package/out/ChatPageInput.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPageInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const pikaicons_react_1 = require("./assets/icons/pikaicons-react");
+const ChatPageInput = ({ sendMessage }) => {
+    const [typedMessage, setTypedMessage] = (0, react_1.useState)('');
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    const [isSendHover, setIsSendHover] = (0, react_1.useState)(false);
+    const send = () => {
+        if (typedMessage.trim()) {
+            sendMessage(typedMessage);
+        }
+        setTypedMessage('');
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: widget.status === 'ALLOW_MESSAGE' && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start p-5 gap-2.5", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full border border-zinc-300 rounded-lg overflow-hidden bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 px-4 py-2.5", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Enter message", className: "flex-1 text-sm text-[#1d293d] placeholder-[#62748e] outline-none", value: typedMessage, onChange: (e) => setTypedMessage(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    send();
+                                }
+                            } }), (0, jsx_runtime_1.jsx)("button", { className: "p-1.5 rounded-full transition-colors cursor-pointer flex items-center justify-center", onClick: () => send(), onMouseEnter: () => setIsSendHover(true), onMouseLeave: () => setIsSendHover(false), style: {
+                                color: isSendHover
+                                    ? widget.data?.brand_color || '#4B2FFF'
+                                    : '#62748e',
+                            }, children: isSendHover ? ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSendPlaneSlantSolid, { className: "w-5 h-5" })) : ((0, jsx_runtime_1.jsx)(pikaicons_react_1.PiSendPlaneSlantStroke, { className: "w-5 h-5" })) })] }) }) })) }));
+};
+exports.ChatPageInput = ChatPageInput;

package/out/ChatWidget.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatWidget = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const BotMain_1 = __importDefault(require("./BotMain"));
+const useSocketContext_1 = require("./hooks/useSocketContext");
+const ChatWidget = ({ widgetToggleState, toggleWidget, widgetConfig, }) => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    console.log('DEBUG:: widget', widget);
+    const isWidgetOpen = widgetToggleState === 'OPEN' && widget.status !== 'INVALID_STATE';
+    return ((0, jsx_runtime_1.jsx)(useSocketContext_1.SocketProvider, { endpoint: widgetConfig.endpoint, children: isWidgetOpen && ((0, jsx_runtime_1.jsx)(BotMain_1.default, { toggleWidget: toggleWidget, widgetToggleState: widgetToggleState, widgetConfig: widgetConfig })) }));
+};
+exports.ChatWidget = ChatWidget;

package/out/Consent.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Consent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const widgetConfigStore2_1 = require("./widgetConfigStore2");
+const react_device_detect_1 = require("react-device-detect");
+const uuid_1 = require("uuid");
+const pager_md_1 = __importDefault(require("./markdown/pager_md"));
+const widgetStore_1 = require("./widgetStore");
+const Consent = () => {
+    const widget = (0, widgetConfigStore2_1.useWidgetData)();
+    // const current_conversation_id = useGetCurrentConversationId()
+    if (widget.status === 'CONSENT_NEEDED') {
+        let systemDetails;
+        let submissionPayload;
+        if (widget.status === 'CONSENT_NEEDED') {
+            const language = navigator.language;
+            const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            systemDetails = [
+                { field_id: 'SYS_browser', value: react_device_detect_1.browserName },
+                { field_id: 'SYS_browser_os', value: react_device_detect_1.osName },
+                { field_id: 'SYS_browser_language', value: language },
+                {
+                    field_id: 'SYS_screen_resolution',
+                    value: `${window.screen.width} x ${window.screen.height}`,
+                },
+                { field_id: 'SYS_time_zone', value: timeZone },
+                { field_id: 'SYS_device_type', value: react_device_detect_1.deviceType },
+                { field_id: 'SYS_From_Page', value: window.location.origin },
+            ];
+            submissionPayload = {
+                form_id: widget?.form_data?.form_id ?? '',
+                conversation_id: (0, uuid_1.v4)(),
+                lead_data: {
+                    name: widget?.form_data?.name,
+                    fields: systemDetails,
+                    ws: widget?.data?.workspace,
+                    user_consent: widget?.data.user_consent,
+                },
+                type: 'browser',
+            };
+        }
+        const ConsentGiven = () => {
+            widgetConfigStore2_1.widgetFetchStore2.trigger.processConsent({
+                consentState: 'GIVEN',
+                submissionPayload,
+            });
+        };
+        const ConsentDenied = () => {
+            // widgetFetchStore2.trigger.processConsent({
+            //     consentState: 'DENIED',
+            //     submissionPayload,
+            // })
+            widgetStore_1.widgetStore.trigger.selectTab({ tab: widgetStore_1.TabType.HOME });
+        };
+        console.log('hereconsent', widget.consent);
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start gap-1.5 w-full px-5 animate-slide-in-left", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start w-full flex-col gap-2.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-start w-full rounded-lg overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-start gap-[5px]", children: (0, jsx_runtime_1.jsx)("div", { className: "flex w-[24px] h-[24px] items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: widget?.data?.logo_url, className: "w-6 h-6 text-white" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 w-[90%]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 items-baseline pt-0.5", children: (0, jsx_runtime_1.jsx)("div", { className: "font-inter text-sm font-medium text-[#020618]", children: widget?.data?.name }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative mt-[-1.00px] text-sm text-[#020618] w-full", children: (0, jsx_runtime_1.jsx)(pager_md_1.default, { mdText: widget?.consent
+                                                    .consent_display_data // TODO: fix this any
+                                             }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start gap-2 relative self-stretch pt-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: ConsentGiven, className: "flex cursor-pointer !h-7 w-max border border-slate-300 leading-5 px-3.5 py-1.5 font-medium text-slate-700 items-center text-sm justify-center bg-white rounded-lg hover:border-[#4b2fff]", children: "Yes, I agree" }), (0, jsx_runtime_1.jsx)("button", { onClick: ConsentDenied, className: "flex cursor-pointer !h-7 w-max border border-slate-300 leading-5 px-3.5 py-1.5 font-medium text-slate-700 items-center text-sm justify-center bg-white rounded-lg hover:border-[#4b2fff]", children: "No, I do not agree" })] })] })] }) }) }));
+    }
+    return null;
+};
+exports.Consent = Consent;

package/out/CountryDropdown.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountryDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CountryDropdown = ({ countries, value, onChange, disabled, error, placeholder = 'Select a country', label = 'Country', }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const dropdownRef = (0, react_1.useRef)(null);
+    const filteredCountries = countries.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()));
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", ref: dropdownRef, children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: label }), (0, jsx_runtime_1.jsxs)("div", { onClick: () => {
+                    if (!disabled)
+                        setIsOpen((prev) => !prev);
+                }, className: `w-full flex justify-between items-center px-4 py-2 h-9 text-sm rounded-lg border ${disabled ? 'text-slate-400 border-zinc-200 bg-zinc-50' : 'bg-white'} ${error
+                    ? 'border-red-500 focus:ring-red-500'
+                    : 'border-gray-300 focus:ring-blue-500'} focus:outline-none focus:ring-2 focus:border-transparent`, children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate", children: value || placeholder }), (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "z-50 mt-1 w-[100%] bg-white border border-gray-300 rounded-md shadow-lg", onMouseDown: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 border-b border-gray-200 bg-white sticky top-0 z-10 rounded-tl-md rounded-tr-md", children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), onMouseDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "max-h-48 overflow-y-auto", children: [filteredCountries.map((c) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                    onChange(c.name);
+                                    setIsOpen(false);
+                                }, className: "px-4 py-2 hover:bg-gray-100 cursor-pointer text-sm", children: c.name }, c.code))), filteredCountries.length === 0 && ((0, jsx_runtime_1.jsx)("li", { className: "px-4 py-2 text-sm text-gray-500", children: "No results found" }))] })] })), error && (0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })] }));
+};
+exports.CountryDropdown = CountryDropdown;