feedback-vos 1.0.29 → 1.0.31

package/dist/index.mjs

@@ -1,15 +1,54 @@
-import { ChatTeardropDots, ArrowLeft, X, Paperclip, Trash, Camera, CircleNotch } from 'phosphor-react';
+import { ChatTeardropDots, ArrowLeft, X, Paperclip, PencilSimple, Camera, CircleNotch, ArrowCounterClockwise, Trash, Check } from 'phosphor-react';
 import { Popover } from '@headlessui/react';
-import { useState, useEffect, useRef } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import html2canvas from 'html2canvas';
 
 // src/lib/svg-assets.ts
 var bugImageUrl = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNzUwMDcgNEM4Ljc1MDA3IDMgOC4wMDAwNyAwIDYuMzEyMDcgMEM0LjYyNDA3IDAgNC43NTAwNyAyIDUuNzUwMDcgMkM2Ljc1MDA3IDIgNi43NTAwNyA0IDYuNzUwMDcgNUM2Ljc1MDA3IDYgNy43NTAwNyA0IDcuNzUwMDcgNFpNMy41NjcwNyA1LjcyQzQuNTY3MDcgNC43MiAzLjgxNzA3IDEuNzIgMi4xMjkwNyAxLjcyQzAuNDQxMDY4IDEuNzIgMC41NjcwNjggMy43MiAxLjU2NzA3IDMuNzJDMi41NjcwNyAzLjcyIDIuNTY3MDcgNS43MiAyLjU2NzA3IDYuNzJDMi41NjcwNyA3LjcyIDMuNTY3MDcgNS43MiAzLjU2NzA3IDUuNzJaIiBmaWxsPSIjQUE4REQ4Ii8+CjxwYXRoIGQ9Ik0yOS45NDIgMzIuODU2QzMwLjEzMSAzMy42NjQgMzEuMTY5IDM1LjEzNiAzMS45NzQgMzQuOTQ3QzMyLjc4IDM0Ljc1NyAzMy4wNTEgMzIuOTc2IDMyLjg2MiAzMi4xN0MzMi42NzMgMzEuMzYyIDMxLjg2NCAzMC44NjMgMzEuMDU4IDMxLjA1M0MzMC4yNTMgMzEuMjQzIDI5Ljc1MiAzMi4wNSAyOS45NDIgMzIuODU2Wk0yNC41MDggMzMuNTA1QzI0LjUxMSAzNC4zMzUgMjUuMTg5IDM2LjAwMyAyNi4wMTcgMzZDMjYuODQ1IDM1Ljk5NiAyNy41MTEgMzQuMzIzIDI3LjUwOCAzMy40OTRDMjcuNTA1IDMyLjY2NSAyNi44MzEgMzEuOTk3IDI2LjAwMyAzMS45OTlDMjUuMTc1IDMyLjAwMyAyNC41MDUgMzIuNjc2IDI0LjUwOCAzMy41MDVaTTE5LjIzNyAzMS4wNTlDMTguOTExIDMxLjgyMyAxOC44NzIgMzMuNjIyIDE5LjYzMyAzMy45NDlDMjAuMzk2IDM0LjI3MyAyMS42NyAzMy4wMDIgMjEuOTk2IDMyLjIzOUMyMi4zMjEgMzEuNDc3IDIxLjk2OCAzMC41OTYgMjEuMjA3IDMwLjI2OUMyMC40NDUgMjkuOTQ0IDE5LjU2NCAzMC4yOTYgMTkuMjM3IDMxLjA1OVpNMTQuMjA2IDIwLjAxOUMxMy4zOTQgMjAuMTkxIDExLjg5OCAyMS4xOTIgMTIuMDY3IDIyLjAwMkMxMi4yNCAyMi44MTIgMTQuMDEyIDIzLjEyNiAxNC44MjQgMjIuOTU1QzE1LjYzNSAyMi43ODQgMTYuMTUzIDIxLjk4OCAxNS45ODQgMjEuMTc4QzE1LjgxMiAyMC4zNjggMTUuMDE5IDE5Ljg0OCAxNC4yMDYgMjAuMDE5Wk0xMi4xNjkgMTUuMDE5QzExLjM1NyAxNS4xOTEgOS44NjEwNCAxNi4xOTIgMTAuMDMgMTcuMDAyQzEwLjIwMyAxNy44MTIgMTEuOTc1IDE4LjEyNiAxMi43ODcgMTcuOTU1QzEzLjU5OCAxNy43ODQgMTQuMTE2IDE2Ljk4OCAxMy45NDcgMTYuMTc4QzEzLjc3NSAxNS4zNjggMTIuOTgxIDE0Ljg0OCAxMi4xNjkgMTUuMDE5WiIgZmlsbD0iIzc0NEVBQSIvPgo8cGF0aCBkPSJNMjcuNTc5MSAzNEMzMC40MSAzNCAzMi41MDUgMzMuMTIzIDMyLjg0NSAzMi45NzNDMzUuMTE2MSAzMS45NjMgMzYuMTM4MSAyOS4zMDQgMzUuMTI5MSAyNy4wMzRDMzQuMTMwMSAyNC43ODQgMzEuNTEzMSAyMy43NTkgMjkuMjU3MSAyNC43MkMyOS4xMjQxIDI0Ljc3IDI3LjQ2NDEgMjUuMzY5IDI1LjkxNDEgMjQuNjQ4QzI0LjA2MzEgMjMuNzg3IDIyLjkxOTEgMjEuMzM5IDIyLjI4NjEgMTkuNDM5QzIyLjE0MjEgMTkuMDA5IDIxLjkwMTEgMTguMTY1IDIxLjYgMTcuMTIzQzE5LjczNDEgMTAuNjUyIDE4Ljc2ODEgOC44Mzc5OSAxNy42MTcxIDcuMzAyOTlDMTMuOTA2IDIuMzUxOTkgOC4wMjUwNSAyLjAwNjk5IDUuMTM0MDUgMi41ODY5OUMyLjY5NzA1IDMuMDczOTkgMS4xMTYwNSA1LjQ0NDk5IDEuNjA0MDUgNy44ODE5OUMyLjA5MjA1IDEwLjMyIDQuNDY0MDUgMTEuOTAyIDYuOTAwMDUgMTEuNDEyQzcuMDYyMDUgMTEuMzg2IDkuMTA0MDUgMTEuMTA2IDEwLjMyNDEgMTIuNTgxQzEwLjk2NzEgMTMuODY4IDEyLjQwNDEgMTcuNzA5IDEyLjk1NDEgMTkuNjE1QzEzLjMwMDEgMjAuODE0IDEzLjU4MzEgMjEuNzg2IDEzLjc0ODEgMjIuMjgyQzE1LjUyMTEgMjcuNTk5IDE4LjQxNDEgMzEuMTc1IDIyLjM1MTEgMzIuOTExQzI0LjIwMzEgMzMuNzI5IDI2LjAwNTEgMzQgMjcuNTc5MSAzNFoiIGZpbGw9IiM5MjY2Q0MiLz4KPHBhdGggZD0iTTcuMDE3MDkgNkM3LjU2OTM3IDYgOC4wMTcwOSA1LjU1MjI4IDguMDE3MDkgNUM4LjAxNzA5IDQuNDQ3NzIgNy41NjkzNyA0IDcuMDE3MDkgNEM2LjQ2NDgxIDQgNi4wMTcwOSA0LjQ0NzcyIDYuMDE3MDkgNUM2LjAxNzA5IDUuNTUyMjggNi40NjQ4MSA2IDcuMDE3MDkgNloiIGZpbGw9IiMyMDIwMjQiLz4KPHBhdGggZD0iTTMxLjI1ODEgMzIuOTY0QzMxLjE2OTEgMzIuOTY0IDMxLjA3ODEgMzIuOTUyIDMwLjk4OTEgMzIuOTI4QzMwLjQ1NzEgMzIuNzggMzAuMTQ1MSAzMi4yMjkgMzAuMjkzMSAzMS42OTdDMzEuMDUwMSAyOC45NzUgMjkuNTIzMSAyNy4xNTUgMjkuNTA4MSAyNy4xMzdDMjkuMTQ5MSAyNi43MTggMjkuMTk2MSAyNi4wODYgMjkuNjE1MSAyNS43MjdDMzAuMDMzMSAyNS4zNjggMzAuNjY2MSAyNS40MTUgMzEuMDI1MSAyNS44MzRDMzEuMTE3MSAyNS45NDEgMzMuMjU5MSAyOC40OTQgMzIuMjIwMSAzMi4yMzFDMzIuMDk4MSAzMi42NzQgMzEuNjk1MSAzMi45NjQgMzEuMjU4MSAzMi45NjRaTTI0LjA1OTEgMzIuNDAxQzIzLjgxNDEgMzIuNDAxIDIzLjU2OTEgMzIuMzEyIDIzLjM3NTEgMzIuMTMxQzIyLjk3MjEgMzEuNzUzIDIyLjk1MTEgMzEuMTIgMjMuMzI4MSAzMC43MTdDMjQuODEzMSAyOS4xMyAyNC43ODExIDI2LjUyNCAyNC43ODAxIDI2LjQ5N0MyNC43NjQxIDI1Ljk0NSAyNS4xOTkxIDI1LjQ4NSAyNS43NTIxIDI1LjQ2OUMyNi4yOTQxIDI1LjQ2NCAyNi43NjUxIDI1Ljg4OCAyNi43ODAxIDI2LjQ0MUMyNi43ODQxIDI2LjU4IDI2Ljg1MzEgMjkuODc4IDI0Ljc4OTEgMzIuMDg1QzI0LjU5MjEgMzIuMjk1IDI0LjMyNTEgMzIuNDAxIDI0LjA1OTEgMzIuNDAxWk0xNS41MTcxIDIzLjcwNUMxNS4wMzcxIDIzLjcwNSAxNC42MTMxIDIzLjM1OCAxNC41MzIxIDIyLjg2OEMxNC40NDIxIDIyLjMyNCAxNC44MTAxIDIxLjgwOCAxNS4zNTUxIDIxLjcxOUMxOC40MjkxIDIxLjIwOSAyMC4xMjkxIDE5LjM0MiAyMC4xNDYxIDE5LjMyM0MyMC41MTExIDE4LjkxMyAyMS4xNDQxIDE4Ljg3NCAyMS41NTUxIDE5LjIzOUMyMS45NjcxIDE5LjYwNCAyMi4wMDgxIDIwLjIzMiAyMS42NDYxIDIwLjY0NUMyMS41NTkxIDIwLjc0NCAxOS40OTAxIDIzLjA2IDE1LjY4MjEgMjMuNjkxQzE1LjYyNjEgMjMuNzAxIDE1LjU3MTEgMjMuNzA1IDE1LjUxNzEgMjMuNzA1Wk0xOC40MzgxIDI4LjU2MkMxOC4wMTMxIDI4LjU2MiAxNy42MTkxIDI4LjI5IDE3LjQ4NDEgMjcuODY0QzE3LjMxODEgMjcuMzM4IDE3LjYxMDEgMjYuNzc1IDE4LjEzNjEgMjYuNjA5QzIwLjgyOTEgMjUuNzU2IDIyLjAxNjEgMjMuNzc5IDIyLjAyODEgMjMuNzU5QzIyLjMwODEgMjMuMjgyIDIyLjkyMDEgMjMuMTIyIDIzLjM5NjEgMjMuNDAyQzIzLjg3MzEgMjMuNjgxIDI0LjAzMjEgMjQuMjk1IDIzLjc1MzEgMjQuNzdDMjMuNjkwMSAyNC44NzggMjIuMTU4MSAyNy40MzMgMTguNzQwMSAyOC41MTRDMTguNjM5MSAyOC41NDcgMTguNTM3MSAyOC41NjIgMTguNDM4MSAyOC41NjJaTTEzLjgxOTEgMTcuODkyQzEzLjMyMzEgMTcuODkyIDEyLjg5MjEgMTcuNTIzIDEyLjgyODEgMTcuMDE3QzEyLjc1OTEgMTYuNDY5IDEzLjE0NzEgMTUuOTY5IDEzLjY5NTEgMTUuODk5QzE2LjM4NDEgMTUuNTU5IDE4LjM1MjEgMTMuOTI4IDE4LjM3MTEgMTMuOTExQzE4Ljc5MzEgMTMuNTU3IDE5LjQyNDEgMTMuNjA4IDE5Ljc3OTEgMTQuMDNDMjAuMTM1MSAxNC40NTEgMjAuMDg0MSAxNS4wOCAxOS42NjQxIDE1LjQzN0MxOS41NjcxIDE1LjUyIDE3LjI0NDEgMTcuNDY2IDEzLjk0NjEgMTcuODgzQzEzLjkwMzEgMTcuODg5IDEzLjg2MTEgMTcuODkyIDEzLjgxOTEgMTcuODkyWk0xMS45OTgxIDEzLjEyNUMxMS41NzMxIDEzLjEyNSAxMS4xNzkxIDEyLjg1MiAxMS4wNDQxIDEyLjQyNEMxMC44NzkxIDExLjg5NyAxMS4xNzExIDExLjMzNiAxMS42OTgxIDExLjE3QzE0LjgyODEgMTAuMTg3IDE1Ljk1MTEgOC40NzggMTUuOTk3MSA4LjQwNkMxNi4yOTIxIDcuOTQ0IDE2LjkwODEgNy44MDEgMTcuMzcyMSA4LjA5NEMxNy44MzcxIDguMzg2IDE3Ljk4MzEgOC45OTMgMTcuNjk2MSA5LjQ2QzE3LjYzNjEgOS41NTcgMTYuMTkwMSAxMS44NTYgMTIuMjk3MSAxMy4wNzlDMTIuMTk4MSAxMy4xMSAxMi4wOTcxIDEzLjEyNSAxMS45OTgxIDEzLjEyNVoiIGZpbGw9IiM3NDRFQUEiLz4KPC9zdmc+";
 var ideaImageUrl = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMzUiIHZpZXdCb3g9IjAgMCAyMyAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjUgMTAuOTJDMjIuNSAxNy4zNTkgMTcuNSAxOC4zNTkgMTcuNSAyNC4zNkMxNy41IDI3LjQ1OCAxNC4zNzcgMjcuNzE5IDEyIDI3LjcxOUM5Ljk0NyAyNy43MTkgNS40MTQgMjYuOTQgNS40MTQgMjQuMzU4QzUuNDE0IDE4LjM2IDAuNSAxNy4zNiAwLjUgMTAuOTJDMC41IDQuODg5IDUuNzg1IDAgMTEuNTgzIDBDMTcuMzgzIDAgMjIuNSA0Ljg4OSAyMi41IDEwLjkyWiIgZmlsbD0iI0ZGREQ4MyIvPgo8cGF0aCBkPSJNMTUuNjY3IDMyLjM2QzE1LjY2NyAzMy4xODggMTMuNDMzIDM0Ljg2IDExLjUgMzQuODZDOS41NjcwMSAzNC44NiA3LjMzMzAxIDMzLjE4OCA3LjMzMzAxIDMyLjM2QzcuMzMzMDEgMzEuNTMyIDkuNTY2MDEgMzEuODYgMTEuNSAzMS44NkMxMy40MzMgMzEuODYgMTUuNjY3IDMxLjUzMiAxNS42NjcgMzIuMzZaIiBmaWxsPSIjQ0NENkREIi8+CjxwYXRoIGQ9Ik0xNi4yMDcgMTAuMTUzQzE1LjgxNiA5Ljc2MTk5IDE1LjE4NCA5Ljc2MTk5IDE0Ljc5MyAxMC4xNTNMMTEuNSAxMy40NDZMOC4yMDcwMSAxMC4xNTNDNy44MTYwMSA5Ljc2MTk5IDcuMTg0MDEgOS43NjE5OSA2Ljc5MzAxIDEwLjE1M0M2LjQwMjAxIDEwLjU0NCA2LjQwMjAxIDExLjE3NiA2Ljc5MzAxIDExLjU2N0wxMC41IDE1LjI3NFYyNS44NkMxMC41IDI2LjQxMyAxMC45NDggMjYuODYgMTEuNSAyNi44NkMxMi4wNTIgMjYuODYgMTIuNSAyNi40MTMgMTIuNSAyNS44NlYxNS4yNzRMMTYuMjA3IDExLjU2N0MxNi41OTggMTEuMTc2IDE2LjU5OCAxMC41NDQgMTYuMjA3IDEwLjE1M1oiIGZpbGw9IiNGRkNDNEQiLz4KPHBhdGggZD0iTTE3LjUgMzAuODZDMTcuNSAzMS45NjQgMTYuNjA0IDMyLjg2IDE1LjUgMzIuODZIOC41QzcuMzk2IDMyLjg2IDYuNSAzMS45NjQgNi41IDMwLjg2VjI0Ljg2SDE3LjVWMzAuODZaIiBmaWxsPSIjOTlBQUI1Ii8+CjxwYXRoIGQ9Ik01LjQ5OSAzMS44NkM1LjAxOSAzMS44NiA0LjU5NSAzMS41MTMgNC41MTQgMzEuMDI0QzQuNDIzIDMwLjQ4IDQuNzkxIDI5Ljk2NCA1LjMzNiAyOS44NzRMMTcuMzM2IDI3Ljg3NEMxNy44OCAyNy43NzYgMTguMzk2IDI4LjE1MSAxOC40ODYgMjguNjk2QzE4LjU3NyAyOS4yNCAxOC4yMDkgMjkuNzU2IDE3LjY2NCAyOS44NDZMOS42NjQgMzEuODQ2QzkuNjA5IDMxLjg1NiA5LjU1MyAzMS44NiA1LjQ5OSAzMS44NlpNNS40OTkgMjcuODZDNS4wMTkgMjcuODYgNC41OTUgMjcuNTEzIDQuNTE0IDI3LjAyNEM0LjQyMyAyNi40OCA0Ljc5MSAyNS45NjQgNS4zMzYgMjUuODc0TDE3LjMzNiAyMy44NzRDMTcuODggMjMuNzc3IDE4LjM5NiAyNC4xNTEgMTguNDg2IDI0LjY5NkMxOC41NzcgMjUuMjQgMTguMjA5IDI1Ljc1NiAxNy42NjQgMjUuODQ2TDkuNjY0IDI3Ljg0NkM5LjYwOSAyNy44NTYgOS41NTMgMjcuODYgNS40OTkgMjcuODZaIiBmaWxsPSIjQ0NENkREIi8+Cjwvc3ZnPg==";
 var thoughtImageUrl = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzNiAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTM1LjE2NjYgMTAuODc1QzM1LjE2NjYgNy4wMDkgMzIuMDMyNiAzLjg3NSAyOC4xNjY2IDMuODc1QzI2Ljk5OTYgMy44NzUgMjUuOTAxNiA0LjE2NSAyNC45MzQ2IDQuNjY5QzIyLjg1MjYgMS44NDIgMTkuNTA5NiAwIDE1LjcyOTYgMEMxMC41OTc2IDAgNi4yNTQ2MyAzLjM4IDQuODA2NjMgOC4wMzZDMi4xNDg2MyA4LjY1MyAwLjE2NjYyNiAxMS4wMyAwLjE2NjYyNiAxMy44NzVDMC4xNjY2MjYgMTYuODU0IDIuMzQwNjMgMTkuMzIgNS4xODc2MyAxOS43ODhDNS40MDM2MyAyMy43MzcgOC42NjQ2MyAyNi44NzUgMTIuNjY2NiAyNi44NzVDMTQuODQyNiAyNi44NzUgMTYuNzk2NiAyNS45NDIgMTguMTY2NiAyNC40NjJDMTkuNTM2NiAyNS45NDIgMjEuNDg5NiAyNi44NzUgMjMuNjY2NiAyNi44NzVDMjcuODA5NiAyNi44NzUgMzEuMTY2NiAyMy41MTggMzEuMTY2NiAxOS4zNzVDMzEuMTY2NiAxOC42NjUgMzEuMDYxNiAxNy45ODEgMzAuODc3NiAxNy4zM0MzMy4zOTY2IDE2LjI3MSAzNS4xNjY2IDEzLjc4IDM1LjE2NjYgMTAuODc1WiIgZmlsbD0iIzg1QzhGOCIvPgo8cGF0aCBkPSJNNC4xNjY2MyAzMi44NzVDNS44MjM0OCAzMi44NzUgNy4xNjY2MyAzMS41MzE5IDcuMTY2NjMgMjkuODc1QzcuMTY2NjMgMjguMjE4MSA1LjgyMzQ4IDI2Ljg3NSA0LjE2NjYzIDI2Ljg3NUMuNTA5NzcgMjYuODc1IDEuMTY2NjMgMjguMjE4MSAxLjE2NjYzIDI5Ljg3NUMxLjE2NjYzIDMxLjUzMTkgMi41MDk3NyAzMi44NzUgNC4xNjY2MyAzMi44NzVaIiBmaWxsPSIjODVDOEY4Ii8+Cjwvc3ZnPg==";
-function CloseButton({ className = "", title = "Close feedback form" }) {
-  return /* @__PURE__ */ jsx(Popover.Button, { className: `text-zinc-400 hover:text-zinc-100 ${className}`, title, children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-4 h-4" }) });
+
+// src/lib/theme.ts
+function getThemeClasses(theme) {
+  return {
+    // Background colors - light mode is now softer (gray-50 instead of white)
+    bgPrimary: theme === "dark" ? "bg-zinc-900" : "bg-gray-50",
+    bgSecondary: theme === "dark" ? "bg-zinc-800" : "bg-gray-100",
+    bgTertiary: theme === "dark" ? "bg-zinc-700" : "bg-gray-200",
+    bgHover: theme === "dark" ? "hover:bg-zinc-600" : "hover:bg-gray-200",
+    bgHoverSecondary: theme === "dark" ? "hover:bg-zinc-700" : "hover:bg-gray-200",
+    // Text colors
+    textPrimary: theme === "dark" ? "text-zinc-100" : "text-gray-900",
+    textSecondary: theme === "dark" ? "text-zinc-300" : "text-gray-700",
+    textTertiary: theme === "dark" ? "text-zinc-400" : "text-gray-600",
+    textMuted: theme === "dark" ? "text-neutral-400" : "text-gray-500",
+    // Border colors
+    borderPrimary: theme === "dark" ? "border-zinc-700" : "border-gray-300",
+    borderSecondary: theme === "dark" ? "border-zinc-600" : "border-gray-300",
+    borderHover: theme === "dark" ? "hover:border-zinc-500" : "hover:border-gray-400",
+    // Canvas/Editor background
+    canvasBg: theme === "dark" ? "bg-zinc-900" : "bg-gray-200",
+    // Overlay
+    overlay: theme === "dark" ? "bg-black/80" : "bg-black/60",
+    // Focus ring offset
+    focusRingOffset: theme === "dark" ? "focus:ring-offset-zinc-900" : "focus:ring-offset-gray-50",
+    // Button variants
+    buttonSecondary: theme === "dark" ? "bg-zinc-800 hover:bg-zinc-700 text-zinc-100" : "bg-gray-200 hover:bg-gray-300 text-gray-900",
+    buttonTertiary: theme === "dark" ? "bg-zinc-700 hover:bg-zinc-600 text-zinc-100" : "bg-gray-300 hover:bg-gray-400 text-gray-900",
+    // Icon colors - make icons more visible (darker for better contrast)
+    iconColor: theme === "dark" ? "text-zinc-100" : "text-gray-900"
+  };
+}
+function getDefaultTheme() {
+  if (typeof process !== "undefined" && process.env.NEXT_PUBLIC_FEEDBACK_THEME === "light") {
+    return "light";
+  }
+  return "dark";
+}
+function CloseButton({ className = "", title = "Close feedback form", theme = "dark" }) {
+  const themeClasses = getThemeClasses(theme);
+  return /* @__PURE__ */ jsx(Popover.Button, { className: `${themeClasses.textTertiary} ${theme === "dark" ? "hover:text-zinc-100" : "hover:text-gray-900"} ${className}`, title, children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-5 h-5" }) });
 }
 
 // src/lib/translations.ts
@@ -64,24 +103,25 @@ var translations = {
 function getTranslations(lang = "en") {
   return translations[lang];
 }
-function FeedbackTypeStep({ onFeedbackTypeChanged, language }) {
+function FeedbackTypeStep({ onFeedbackTypeChanged, language, theme }) {
   const t = getTranslations(language);
   const feedbackTypes = getFeedbackTypes(language);
+  const themeClasses = getThemeClasses(theme);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between w-full gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xl leading-6", children: t.form.header }),
-      /* @__PURE__ */ jsx(CloseButton, { title: t.form.closeButton })
+      /* @__PURE__ */ jsx("span", { className: `text-lg md:text-xl leading-6 ${themeClasses.textPrimary}`, children: t.form.header }),
+      /* @__PURE__ */ jsx(CloseButton, { title: t.form.closeButton, theme })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex py-8 gap-2 w-full", children: Object.entries(feedbackTypes).map(([key, value]) => {
+    /* @__PURE__ */ jsx("div", { className: "flex py-6 md:py-8 gap-2 md:gap-2 w-full justify-center md:justify-start flex-wrap", children: Object.entries(feedbackTypes).map(([key, value]) => {
       return /* @__PURE__ */ jsxs(
         "button",
         {
-          className: "bg-zinc-800 rounded py-5 w-24 flex1 flex flex-col items-center gap-2 border-2 border-transparent hover:border-brand-500 focus:border-brand-500 focus:outline-none",
+          className: `${themeClasses.bgSecondary} rounded py-4 md:py-5 flex-1 min-w-[80px] md:w-24 flex flex-col items-center gap-2 border-2 border-transparent hover:border-brand-500 focus:border-brand-500 focus:outline-none transition-colors`,
           type: "button",
           onClick: () => onFeedbackTypeChanged(key),
           children: [
-            /* @__PURE__ */ jsx("img", { src: value.image.source, alt: value.image.alt }),
-            /* @__PURE__ */ jsx("span", { children: value.title })
+            /* @__PURE__ */ jsx("img", { src: value.image.source, alt: value.image.alt, className: "w-5 h-5 md:w-6 md:h-6" }),
+            /* @__PURE__ */ jsx("span", { className: `text-xs md:text-sm text-center ${themeClasses.textPrimary}`, children: value.title })
           ]
         },
         key
@@ -92,41 +132,398 @@ function FeedbackTypeStep({ onFeedbackTypeChanged, language }) {
 function Loading() {
   return /* @__PURE__ */ jsx("div", { className: "w-4 h-4 flex items-center justify-center overflow-hidden ", children: /* @__PURE__ */ jsx(CircleNotch, { weight: "bold", className: "w-4 h-4 animate-spin" }) });
 }
+function ScreenshotEditor({
+  screenshot,
+  onSave,
+  onCancel,
+  language,
+  theme = "dark"
+}) {
+  const canvasRef = useRef(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [color, setColor] = useState("#ef4444");
+  const [brushSize, setBrushSize] = useState(3);
+  const [image, setImage] = useState(null);
+  const themeClasses = getThemeClasses(theme);
+  const t = {
+    en: {
+      save: "Save",
+      cancel: "Cancel",
+      clear: "Clear",
+      undo: "Undo"
+    },
+    nl: {
+      save: "Opslaan",
+      cancel: "Annuleren",
+      clear: "Wissen",
+      undo: "Ongedaan maken"
+    }
+  }[language];
+  const colors = [
+    "#ef4444",
+    // red-500
+    "#f59e0b",
+    // amber-500
+    "#eab308",
+    // yellow-500
+    "#22c55e",
+    // green-500
+    "#3b82f6",
+    // blue-500
+    "#8b5cf6",
+    // violet-500
+    "#ec4899",
+    // pink-500
+    "#ffffff",
+    // white
+    "#000000"
+    // black
+  ];
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      setImage(img);
+      if (canvasRef.current) {
+        const canvas = canvasRef.current;
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(img, 0, 0);
+        }
+      }
+    };
+    img.src = screenshot;
+  }, [screenshot]);
+  const getCoordinates = useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    if ("touches" in e) {
+      const touch = e.touches[0] || e.changedTouches[0];
+      return {
+        x: (touch.clientX - rect.left) * scaleX,
+        y: (touch.clientY - rect.top) * scaleY
+      };
+    } else {
+      return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY
+      };
+    }
+  }, []);
+  const startDrawing = useCallback((e) => {
+    e.preventDefault();
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = getCoordinates(e);
+    setIsDrawing(true);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = brushSize;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+  }, [color, brushSize, getCoordinates]);
+  const draw = useCallback((e) => {
+    if (!isDrawing) return;
+    e.preventDefault();
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = getCoordinates(e);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  }, [isDrawing, getCoordinates]);
+  const stopDrawing = useCallback(() => {
+    setIsDrawing(false);
+  }, []);
+  const clearCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas || !image) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(image, 0, 0);
+  };
+  const undo = () => {
+    const canvas = canvasRef.current;
+    if (!canvas || !image) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(image, 0, 0);
+  };
+  const handleSave = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const editedScreenshot = canvas.toDataURL("image/png");
+    onSave(editedScreenshot);
+  };
+  const maxWidth = 600;
+  const displayWidth = image ? Math.min(maxWidth, image.width) : maxWidth;
+  const displayHeight = image ? displayWidth / image.width * image.height : 400;
+  return /* @__PURE__ */ jsx("div", { className: `fixed inset-0 z-50 flex items-center justify-center ${themeClasses.overlay} p-2 md:p-4`, children: /* @__PURE__ */ jsxs("div", { className: `${themeClasses.bgSecondary} rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] md:max-h-[90vh] overflow-auto`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `sticky top-0 ${themeClasses.bgSecondary} border-b ${themeClasses.borderPrimary} p-2 md:p-4 flex items-center justify-between z-10 gap-2`, children: [
+      /* @__PURE__ */ jsx("h3", { className: `text-base md:text-lg font-semibold ${themeClasses.textPrimary} truncate`, children: language === "nl" ? "Teken op screenshot" : "Draw on screenshot" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 md:gap-2 flex-shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: undo,
+            className: `p-1.5 md:p-2 ${themeClasses.buttonTertiary} rounded-md ${themeClasses.textPrimary} transition-colors touch-manipulation`,
+            title: t.undo,
+            children: /* @__PURE__ */ jsx(ArrowCounterClockwise, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: clearCanvas,
+            className: `p-1.5 md:p-2 ${themeClasses.buttonTertiary} rounded-md ${themeClasses.textPrimary} transition-colors touch-manipulation`,
+            title: t.clear,
+            children: /* @__PURE__ */ jsx(Trash, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: `p-1.5 md:p-2 ${themeClasses.buttonTertiary} rounded-md ${themeClasses.textPrimary} transition-colors touch-manipulation`,
+            title: t.cancel,
+            children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleSave,
+            className: "p-1.5 md:p-2 bg-brand-500 hover:bg-brand-400 rounded-md text-white transition-colors touch-manipulation",
+            title: t.save,
+            children: /* @__PURE__ */ jsx(Check, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3 md:p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 md:mb-4 flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4", children: [
+        /* @__PURE__ */ jsx("label", { className: `text-xs md:text-sm ${themeClasses.textSecondary} whitespace-nowrap`, children: language === "nl" ? "Kleur:" : "Color:" }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 md:gap-2 flex-wrap", children: colors.map((c) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setColor(c),
+            className: `w-7 h-7 md:w-8 md:h-8 rounded-full border-2 transition-all touch-manipulation ${color === c ? `${theme === "dark" ? "border-zinc-100" : "border-gray-900"} scale-110` : `${themeClasses.borderSecondary} ${themeClasses.borderHover}`}`,
+            style: { backgroundColor: c },
+            title: c
+          },
+          c
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 md:mb-4 flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4", children: [
+        /* @__PURE__ */ jsx("label", { className: `text-xs md:text-sm ${themeClasses.textSecondary} whitespace-nowrap`, children: language === "nl" ? "Grootte:" : "Size:" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full md:w-auto", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "1",
+              max: "10",
+              value: brushSize,
+              onChange: (e) => setBrushSize(Number(e.target.value)),
+              className: "flex-1 md:flex-none md:max-w-xs"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: `text-xs md:text-sm ${themeClasses.textTertiary} w-6 md:w-8 text-right`, children: brushSize })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: `flex justify-center ${themeClasses.canvasBg} rounded-lg p-2 md:p-4 overflow-auto`, children: /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          onMouseDown: startDrawing,
+          onMouseMove: draw,
+          onMouseUp: stopDrawing,
+          onMouseLeave: stopDrawing,
+          onTouchStart: startDrawing,
+          onTouchMove: draw,
+          onTouchEnd: stopDrawing,
+          className: `cursor-crosshair border ${themeClasses.borderPrimary} rounded touch-none`,
+          style: {
+            width: `${displayWidth}px`,
+            height: `${displayHeight}px`,
+            maxWidth: "100%",
+            maxHeight: "calc(95vh - 200px)"
+          }
+        }
+      ) })
+    ] })
+  ] }) });
+}
 function ScreenshotButton({
   screenshot,
-  onScreenshotTook
+  onScreenshotTook,
+  language = "en",
+  theme = "dark"
 }) {
   const [isTakenScreenshot, setIsTakenScreenShot] = useState(false);
+  const [showEditor, setShowEditor] = useState(false);
+  const [tempScreenshot, setTempScreenshot] = useState(null);
+  const themeClasses = getThemeClasses(theme);
   async function handleTakeScreenshot() {
     setIsTakenScreenShot(true);
-    const canvas = await html2canvas(document.querySelector("html"));
+    const canvas = await html2canvas(document.querySelector("html"), {
+      ignoreElements: (element) => {
+        return element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
+      }
+    });
     const base64image = canvas.toDataURL("image/png");
     onScreenshotTook(base64image);
     setIsTakenScreenShot(false);
   }
+  function handleEditorSave(editedScreenshot) {
+    onScreenshotTook(editedScreenshot);
+    setShowEditor(false);
+    setTempScreenshot(null);
+  }
+  function handleEditorCancel() {
+    setShowEditor(false);
+    setTempScreenshot(null);
+  }
+  function handleEditScreenshot() {
+    if (screenshot) {
+      setTempScreenshot(screenshot);
+      setShowEditor(true);
+    }
+  }
+  if (showEditor && (tempScreenshot || screenshot)) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ScreenshotEditor,
+        {
+          screenshot: tempScreenshot || screenshot,
+          onSave: handleEditorSave,
+          onCancel: handleEditorCancel,
+          language,
+          theme
+        }
+      ),
+      screenshot ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `p-1 w-10 h-10 rounded-md border ${themeClasses.borderSecondary} flex 
+                        justify-end items-end relative overflow-hidden`,
+              style: {
+                backgroundImage: `url(${screenshot})`,
+                backgroundPosition: "center",
+                backgroundSize: "cover"
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors rounded-md" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onScreenshotTook(null);
+              },
+              className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10",
+              title: language === "nl" ? "Verwijderen" : "Delete",
+              children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-3 h-3 text-white" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleEditScreenshot,
+            className: `p-2 ${themeClasses.bgSecondary} rounded-md border-transparent ${themeClasses.bgHoverSecondary}
+                 transition-colors focus:outline-none focus:ring-2
+                 focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500`,
+            title: language === "nl" ? "Bewerk screenshot" : "Edit screenshot",
+            children: /* @__PURE__ */ jsx(PencilSimple, { weight: "bold", className: `w-5 h-5 ${themeClasses.textPrimary}` })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `p-2 ${themeClasses.bgSecondary} rounded-md border-transparent ${themeClasses.bgHoverSecondary}
+               transition-colors focus:outline-none focus:ring-2
+               focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500`,
+          onClick: handleTakeScreenshot,
+          children: isTakenScreenshot ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsx(Camera, { weight: "bold", className: `w-6 h-6 ${themeClasses.iconColor}` })
+        }
+      )
+    ] });
+  }
   if (screenshot) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "p-1 w-10 h-10 rounded-md border-transparent flex \n                justify-end items-end text-zinc-400 hover:text-zinc-100 transition-colors",
-        onClick: () => onScreenshotTook(null),
-        style: {
-          backgroundImage: `url(${screenshot})`,
-          backgroundPosition: "right bottom",
-          backgroundSize: 180
-        },
-        children: /* @__PURE__ */ jsx(Trash, { weight: "fill" })
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `p-1 w-10 h-10 rounded-md border ${themeClasses.borderSecondary} flex 
+                    justify-end items-end relative overflow-hidden`,
+            style: {
+              backgroundImage: `url(${screenshot})`,
+              backgroundPosition: "center",
+              backgroundSize: "cover"
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors rounded-md" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onScreenshotTook(null);
+            },
+            className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10",
+            title: language === "nl" ? "Verwijderen" : "Delete",
+            children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-3 h-3 text-white" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleEditScreenshot,
+          className: `p-2 ${themeClasses.bgSecondary} rounded-md border-transparent ${themeClasses.bgHoverSecondary}
+             transition-colors focus:outline-none focus:ring-2
+             focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500`,
+          title: language === "nl" ? "Bewerk screenshot" : "Edit screenshot",
+          children: /* @__PURE__ */ jsx(PencilSimple, { weight: "bold", className: `w-5 h-5 ${themeClasses.textPrimary}` })
+        }
+      )
+    ] });
   }
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      className: "p-2 bg-zinc-800 rounded-md border-transparent hover:bg-zinc-700\n         transitions-colors focus:outline-none focus:ring-2\n         focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500",
+      className: `p-2 ${themeClasses.bgSecondary} rounded-md border-transparent ${themeClasses.bgHoverSecondary}
+         transitions-colors focus:outline-none focus:ring-2
+         focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500`,
       onClick: handleTakeScreenshot,
-      children: isTakenScreenshot ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsx(Camera, { weight: "bold", className: "w-6 h-6" })
+      children: isTakenScreenshot ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsx(Camera, { weight: "bold", className: `w-6 h-6 ${themeClasses.iconColor}` })
     }
   );
 }
@@ -138,10 +535,12 @@ function FileUploadButton({
   maxFileSize = DEFAULT_MAX_FILE_SIZE,
   maxTotalSize = DEFAULT_MAX_TOTAL_SIZE,
   acceptedTypes = "image/*,.pdf,.doc,.docx,.txt",
-  language = "en"
+  language = "en",
+  theme = "dark"
 }) {
   const fileInputRef = useRef(null);
   const [error, setError] = useState(null);
+  const themeClasses = getThemeClasses(theme);
   const translations2 = {
     en: {
       upload: "Upload file",
@@ -227,10 +626,12 @@ function FileUploadButton({
         "button",
         {
           type: "button",
-          className: "p-2 bg-zinc-800 rounded-md border-transparent hover:bg-zinc-700\n             transitions-colors focus:outline-none focus:ring-2\n             focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500",
+          className: `p-2 ${themeClasses.bgSecondary} rounded-md border-transparent ${themeClasses.bgHoverSecondary}
+             transitions-colors focus:outline-none focus:ring-2
+             focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500`,
           onClick: handleButtonClick,
           title: t.upload,
-          children: /* @__PURE__ */ jsx(Paperclip, { weight: "bold", className: "w-6 h-6" })
+          children: /* @__PURE__ */ jsx(Paperclip, { weight: "bold", className: `w-6 h-6 ${themeClasses.iconColor}` })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -247,25 +648,25 @@ function FileUploadButton({
       files.map((uploadedFile) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex items-center gap-1 bg-zinc-800 rounded-md px-2 py-1 text-xs",
+          className: `flex items-center gap-1 ${themeClasses.bgSecondary} rounded-md px-2 py-1 text-xs`,
           children: [
             uploadedFile.preview ? /* @__PURE__ */ jsx(
               "img",
               {
                 src: uploadedFile.preview,
                 alt: uploadedFile.file.name,
-                className: "w-6 h-6 object-cover rounded"
+                className: "w-5 h-5 md:w-6 md:h-6 object-cover rounded flex-shrink-0"
               }
-            ) : /* @__PURE__ */ jsx(Paperclip, { className: "w-4 h-4" }),
-            /* @__PURE__ */ jsx("span", { className: "text-zinc-300 max-w-[100px] truncate", title: uploadedFile.file.name, children: uploadedFile.file.name }),
+            ) : /* @__PURE__ */ jsx(Paperclip, { className: `w-3 h-3 md:w-4 md:h-4 flex-shrink-0 ${themeClasses.iconColor}` }),
+            /* @__PURE__ */ jsx("span", { className: `${themeClasses.textSecondary} max-w-[80px] md:max-w-[100px] truncate`, title: uploadedFile.file.name, children: uploadedFile.file.name }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: () => handleRemoveFile(uploadedFile.id),
-                className: "text-zinc-400 hover:text-zinc-100 transition-colors",
+                className: `${themeClasses.textTertiary} ${theme === "dark" ? "hover:text-zinc-100" : "hover:text-gray-900"} transition-colors flex-shrink-0 touch-manipulation`,
                 title: t.remove,
-                children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-3 h-3 md:w-4 md:h-4" })
               }
             )
           ]
@@ -274,7 +675,7 @@ function FileUploadButton({
       ))
     ] }),
     error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-400", children: error }),
-    files.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-400", children: [
+    files.length > 0 && /* @__PURE__ */ jsxs("p", { className: `text-xs ${themeClasses.textTertiary}`, children: [
       files.length,
       " ",
       t.files,
@@ -799,10 +1200,12 @@ function FeedbackContentStep({
   onFeedbackSent,
   integration,
   githubConfig,
-  language
+  language,
+  theme
 }) {
   const t = getTranslations(language);
   const feedbackTypes = getFeedbackTypes(language);
+  const themeClasses = getThemeClasses(theme);
   const [screenshot, setScreenshot] = useState(null);
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const feedbackTypeData = feedbackTypes[feedbackType];
@@ -841,34 +1244,38 @@ function FeedbackContentStep({
     }
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("header", { className: "relative w-full pr-8", children: [
+    /* @__PURE__ */ jsxs("header", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: "absolute top-5 left-5 text-zinc-400 hover:text-zinc-100 z-10",
+          className: `absolute top-0 left-0 ${themeClasses.textTertiary} ${theme === "dark" ? "hover:text-zinc-100" : "hover:text-gray-900"} z-10 p-2 md:p-2.5`,
           onClick: onFeedbackRestartRequest,
-          children: /* @__PURE__ */ jsx(ArrowLeft, { weight: "bold", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx(ArrowLeft, { weight: "bold", className: "w-5 h-5 md:w-5 md:h-5" })
         }
       ),
-      /* @__PURE__ */ jsxs("span", { className: "text-xl leading-6 flex items-center gap-2 mt-2 pl-10", children: [
+      /* @__PURE__ */ jsxs("span", { className: `text-lg md:text-xl leading-6 flex items-center gap-2 pl-10 md:pl-12 pr-10 md:pr-12 ${themeClasses.textPrimary}`, children: [
         /* @__PURE__ */ jsx(
           "img",
           {
             src: feedbackTypeData.image.source,
             alt: feedbackTypeData.image.alt,
-            className: "w-6 h-6"
+            className: "w-5 h-5 md:w-6 md:h-6"
           }
         ),
         feedbackTypeData.title
       ] }),
-      /* @__PURE__ */ jsx(CloseButton, { className: "absolute top-5 right-5", title: t.form.closeButton })
+      /* @__PURE__ */ jsx(CloseButton, { className: "absolute top-0 right-0 p-2 md:p-2.5", title: t.form.closeButton, theme })
     ] }),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmitFeedback, className: "my-4 w-full", children: [
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmitFeedback, className: "my-3 md:my-4 w-full", children: [
       /* @__PURE__ */ jsx(
         "textarea",
         {
-          className: "min-w-[384px] w-full min-h-[112px] text-sm \n        placeholder-zinc-400 text-zinc-100 border-zinc-600 bg-transparent rounded-md \n        focus:border-brand-500 focus:ring-brand-500 focus:ring-1  resize-none focus:outline-none\n          scrollbar-thumb-zinc-700 scrollbar-track-transparent scrollbar-thin",
+          className: `w-full min-h-[100px] md:min-h-[112px] text-sm 
+        ${themeClasses.textPrimary} border-2 border-brand-500 bg-transparent rounded-md p-2 md:p-3
+        ${theme === "dark" ? "placeholder:text-zinc-400" : "placeholder:text-gray-500"}
+        focus:border-brand-500 focus:ring-brand-500 focus:ring-1 resize-none focus:outline-none
+          ${theme === "dark" ? "scrollbar-thumb-zinc-700" : "scrollbar-thumb-gray-400"} scrollbar-track-transparent scrollbar-thin`,
           placeholder: t.content.placeholder,
           onChange: (e) => setComment(e.target.value)
         }
@@ -878,15 +1285,18 @@ function FeedbackContentStep({
         {
           files: uploadedFiles,
           onFilesChanged: setUploadedFiles,
-          language
+          language,
+          theme
         }
       ) }),
-      /* @__PURE__ */ jsxs("footer", { className: " flex gap-2 mt-2", children: [
+      /* @__PURE__ */ jsxs("footer", { className: "flex gap-2 mt-3", children: [
         /* @__PURE__ */ jsx(
           ScreenshotButton,
           {
             screenshot,
-            onScreenshotTook: setScreenshot
+            onScreenshotTook: setScreenshot,
+            language,
+            theme
           }
         ),
         /* @__PURE__ */ jsx(
@@ -894,7 +1304,11 @@ function FeedbackContentStep({
           {
             type: "submit",
             disabled: comment.length === 0 || isSendingFeedback,
-            className: "p-2 bg-brand-500 rounded-md border-transparent flex-1 justify-center\n          items-center text-sm hover:bg-brand-300 focus:outline-none focus:ring-2\n           focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500\n           transition-colors disabled:opacity-50 disabled:cursor-not-allowed\n           disabled:hover:bg-brand-500",
+            className: `p-2 bg-brand-500 rounded-md border-transparent flex-1 justify-center
+          items-center text-sm hover:bg-brand-300 focus:outline-none focus:ring-2
+           focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500
+           transition-colors disabled:opacity-50 disabled:cursor-not-allowed
+           disabled:hover:bg-brand-500 flex text-white`,
             children: isSendingFeedback ? /* @__PURE__ */ jsx(Loading, {}) : t.content.sendButton
           }
         )
@@ -902,22 +1316,23 @@ function FeedbackContentStep({
     ] })
   ] });
 }
-function FeedbackSuccessStep({ onFeedbackRestartRequest, language }) {
+function FeedbackSuccessStep({ onFeedbackRestartRequest, language, theme }) {
   const t = getTranslations(language);
+  const themeClasses = getThemeClasses(theme);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx(CloseButton, { title: t.form.closeButton }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-10 w-[304px]", children: [
-      /* @__PURE__ */ jsxs("svg", { width: "41", height: "40", viewBox: "0 0 41 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx(CloseButton, { title: t.form.closeButton, theme }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 md:py-10 w-full max-w-[304px] px-2", children: [
+      /* @__PURE__ */ jsxs("svg", { width: "41", height: "40", viewBox: "0 0 41 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-10 h-10 md:w-[41px] md:h-[40px]", children: [
         /* @__PURE__ */ jsx("path", { d: "M38.5 34C38.5 36.209 36.709 38 34.5 38H6.5C4.291 38 2.5 36.209 2.5 34V6C2.5 3.791 4.291 2 6.5 2H34.5C36.709 2 38.5 3.791 38.5 6V34Z", fill: "#77B255" }),
         /* @__PURE__ */ jsx("path", { d: "M31.78 8.36202C30.624 7.61102 29.076 7.94002 28.322 9.09802L17.436 25.877L12.407 21.227C11.393 20.289 9.81103 20.352 8.87403 21.365C7.93703 22.379 7.99903 23.961 9.01303 24.898L16.222 31.564C16.702 32.009 17.312 32.229 17.918 32.229C18.591 32.229 19.452 31.947 20.017 31.09C20.349 30.584 32.517 11.82 32.517 11.82C33.268 10.661 32.938 9.11302 31.78 8.36202Z", fill: "white" })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-xl mt-2", children: t.success.message }),
+      /* @__PURE__ */ jsx("span", { className: `text-lg md:text-xl mt-2 text-center ${themeClasses.textPrimary}`, children: t.success.message }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: onFeedbackRestartRequest,
-          className: "py-2 px-6 mt-6 bg-zinc-800 rounded-md border-transparent text-sm leading-6 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500 transition-colors",
+          className: `py-2 px-6 mt-6 ${themeClasses.buttonSecondary} rounded-md border-transparent text-sm leading-6 focus:outline-none focus:ring-2 focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500 transition-colors`,
           children: t.success.sendAnother
         }
       )
@@ -950,15 +1365,16 @@ function getFeedbackTypes(language = "en") {
     }
   };
 }
-function WidgetForm({ integration, githubConfig, language }) {
+function WidgetForm({ integration, githubConfig, language, theme }) {
   const [feedbackType, setFeedbackType] = useState(null);
   const [feedbackSent, setFeedbackSent] = useState(false);
+  const themeClasses = getThemeClasses(theme);
   function handleRestartFeedback() {
     setFeedbackSent(false);
     setFeedbackType(null);
   }
-  return /* @__PURE__ */ jsxs("div", { className: "bg-zinc-900 p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto", children: [
-    feedbackSent ? /* @__PURE__ */ jsx(FeedbackSuccessStep, { onFeedbackRestartRequest: handleRestartFeedback, language }) : /* @__PURE__ */ jsx(Fragment, { children: !feedbackType ? /* @__PURE__ */ jsx(FeedbackTypeStep, { onFeedbackTypeChanged: setFeedbackType, language }) : /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: `${themeClasses.bgPrimary} p-3 md:p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto md:min-w-[384px] max-w-md`, children: [
+    feedbackSent ? /* @__PURE__ */ jsx(FeedbackSuccessStep, { onFeedbackRestartRequest: handleRestartFeedback, language, theme }) : /* @__PURE__ */ jsx(Fragment, { children: !feedbackType ? /* @__PURE__ */ jsx(FeedbackTypeStep, { onFeedbackTypeChanged: setFeedbackType, language, theme }) : /* @__PURE__ */ jsx(
       FeedbackContentStep,
       {
         feedbackType,
@@ -966,10 +1382,11 @@ function WidgetForm({ integration, githubConfig, language }) {
         onFeedbackSent: () => setFeedbackSent(true),
         integration,
         githubConfig,
-        language
+        language,
+        theme
       }
     ) }),
-    /* @__PURE__ */ jsx("footer", { className: "text-xs text-neutral-400", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("footer", { className: `text-xs ${themeClasses.textMuted} mt-2`, children: /* @__PURE__ */ jsx(
       "a",
       {
         className: "underline underline-offset-2",
@@ -987,13 +1404,25 @@ function getDefaultLanguage() {
   }
   return "en";
 }
+function isWidgetEnabled() {
+  if (typeof process !== "undefined" && process.env.NEXT_PUBLIC_FEEDBACK_ENABLED !== void 0) {
+    const enabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED.toLowerCase();
+    return enabled !== "false" && enabled !== "0";
+  }
+  return true;
+}
 function Widget({
   integration,
   githubConfig,
   position = "bottom-right",
-  language
+  language,
+  theme
 }) {
+  if (!isWidgetEnabled()) {
+    return null;
+  }
   const finalLanguage = language || getDefaultLanguage();
+  const finalTheme = theme || getDefaultTheme();
   const t = getTranslations(finalLanguage);
   const positionClasses = {
     "bottom-right": "bottom-4 right-4 md:bottom-8 md:right-8",
@@ -1001,24 +1430,28 @@ function Widget({
     "top-right": "top-4 right-4 md:top-8 md:right-8",
     "top-left": "top-4 left-4 md:top-8 md:left-4"
   };
-  const alignmentClass = position.includes("left") ? "items-start" : "items-end";
-  return /* @__PURE__ */ jsxs(Popover, { className: `fixed ${positionClasses[position]} flex flex-col ${alignmentClass} z-50`, children: [
-    /* @__PURE__ */ jsx(Popover.Panel, { children: /* @__PURE__ */ jsx(
+  const isTop = position.includes("top");
+  const isLeft = position.includes("left");
+  const panelPositionClass = isTop ? "absolute top-full mt-2" : "absolute bottom-full mb-2";
+  const panelAlignmentClass = isLeft ? "left-0" : "right-0";
+  return /* @__PURE__ */ jsx("div", { "data-feedback-widget": "true", className: `fixed ${positionClasses[position]} z-50`, children: /* @__PURE__ */ jsxs(Popover, { className: "relative", children: [
+    /* @__PURE__ */ jsx(Popover.Panel, { className: `${panelPositionClass} ${panelAlignmentClass}`, children: /* @__PURE__ */ jsx(
       WidgetForm,
       {
         integration,
         githubConfig,
-        language: finalLanguage
+        language: finalLanguage,
+        theme: finalTheme
       }
     ) }),
-    /* @__PURE__ */ jsxs(Popover.Button, { className: "bg-brand-500 rounded-full px-3 h-12 text-white flex items-center group focus:outline-none", children: [
-      /* @__PURE__ */ jsx(ChatTeardropDots, { className: "w-6 h-6" }),
-      /* @__PURE__ */ jsxs("span", { className: "max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 ease-linear", children: [
+    /* @__PURE__ */ jsxs(Popover.Button, { className: "bg-brand-500 rounded-full px-3 md:px-3 h-12 text-white flex items-center group focus:outline-none shadow-lg hover:shadow-xl transition-shadow", children: [
+      /* @__PURE__ */ jsx(ChatTeardropDots, { className: "w-6 h-6 flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { className: "max-w-0 overflow-hidden group-hover:max-w-xs md:group-hover:max-w-xs transition-all duration-500 ease-linear hidden md:block", children: [
         /* @__PURE__ */ jsx("span", { className: "pl-2" }),
         t.widget.button
       ] })
     ] })
-  ] });
+  ] }) });
 }
 
 export { Widget };