feedback-vos 1.0.30 → 1.0.32

package/dist/index.js

@@ -14,8 +14,47 @@ var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
 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__ */ jsxRuntime.jsx(react.Popover.Button, { className: `text-zinc-400 hover:text-zinc-100 ${className}`, title, children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.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__ */ jsxRuntime.jsx(react.Popover.Button, { className: `${themeClasses.textTertiary} ${theme === "dark" ? "hover:text-zinc-100" : "hover:text-gray-900"} ${className}`, title, children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-5 h-5" }) });
 }
 
 // src/lib/translations.ts
@@ -70,24 +109,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between w-full gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg md:text-xl leading-6", children: t.form.header }),
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg md:text-xl leading-6 ${themeClasses.textPrimary}`, children: t.form.header }),
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton, theme })
     ] }),
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
         "button",
         {
-          className: "bg-zinc-800 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",
+          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__ */ jsxRuntime.jsx("img", { src: value.image.source, alt: value.image.alt, className: "w-5 h-5 md:w-6 md:h-6" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm text-center", children: value.title })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs md:text-sm text-center ${themeClasses.textPrimary}`, children: value.title })
           ]
         },
         key
@@ -102,13 +142,15 @@ function ScreenshotEditor({
   screenshot,
   onSave,
   onCancel,
-  language
+  language,
+  theme = "dark"
 }) {
   const canvasRef = react$1.useRef(null);
   const [isDrawing, setIsDrawing] = react$1.useState(false);
   const [color, setColor] = react$1.useState("#ef4444");
   const [brushSize, setBrushSize] = react$1.useState(3);
   const [image, setImage] = react$1.useState(null);
+  const themeClasses = getThemeClasses(theme);
   const t = {
     en: {
       save: "Save",
@@ -232,16 +274,16 @@ function ScreenshotEditor({
   const maxWidth = 600;
   const displayWidth = image ? Math.min(maxWidth, image.width) : maxWidth;
   const displayHeight = image ? displayWidth / image.width * image.height : 400;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-2 md:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] md:max-h-[90vh] overflow-auto", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 bg-zinc-800 border-b border-zinc-700 p-2 md:p-4 flex items-center justify-between z-10 gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base md:text-lg font-semibold text-zinc-100 truncate", children: language === "nl" ? "Teken op screenshot" : "Draw on screenshot" }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `fixed inset-0 z-50 flex items-center justify-center ${themeClasses.overlay} p-2 md:p-4`, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: `text-base md:text-lg font-semibold ${themeClasses.textPrimary} truncate`, children: language === "nl" ? "Teken op screenshot" : "Draw on screenshot" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 md:gap-2 flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             onClick: undo,
-            className: "p-1.5 md:p-2 bg-zinc-700 hover:bg-zinc-600 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            className: `p-1.5 md:p-2 ${themeClasses.buttonTertiary} rounded-md ${themeClasses.textPrimary} transition-colors touch-manipulation`,
             title: t.undo,
             children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ArrowCounterClockwise, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
           }
@@ -251,7 +293,7 @@ function ScreenshotEditor({
           {
             type: "button",
             onClick: clearCanvas,
-            className: "p-1.5 md:p-2 bg-zinc-700 hover:bg-zinc-600 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            className: `p-1.5 md:p-2 ${themeClasses.buttonTertiary} rounded-md ${themeClasses.textPrimary} transition-colors touch-manipulation`,
             title: t.clear,
             children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Trash, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
           }
@@ -261,7 +303,7 @@ function ScreenshotEditor({
           {
             type: "button",
             onClick: onCancel,
-            className: "p-1.5 md:p-2 bg-zinc-700 hover:bg-zinc-600 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            className: `p-1.5 md:p-2 ${themeClasses.buttonTertiary} rounded-md ${themeClasses.textPrimary} transition-colors touch-manipulation`,
             title: t.cancel,
             children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
           }
@@ -271,7 +313,7 @@ function ScreenshotEditor({
           {
             type: "button",
             onClick: handleSave,
-            className: "p-1.5 md:p-2 bg-brand-500 hover:bg-brand-400 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            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__ */ jsxRuntime.jsx(phosphorReact.Check, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
           }
@@ -280,13 +322,13 @@ function ScreenshotEditor({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 md:p-4", children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("label", { className: "text-xs md:text-sm text-zinc-300 whitespace-nowrap", children: language === "nl" ? "Kleur:" : "Color:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: `text-xs md:text-sm ${themeClasses.textSecondary} whitespace-nowrap`, children: language === "nl" ? "Kleur:" : "Color:" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 md:gap-2 flex-wrap", children: colors.map((c) => /* @__PURE__ */ jsxRuntime.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 ? "border-zinc-100 scale-110" : "border-zinc-600 hover:border-zinc-500"}`,
+            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
           },
@@ -294,7 +336,7 @@ function ScreenshotEditor({
         )) })
       ] }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("label", { className: "text-xs md:text-sm text-zinc-300 whitespace-nowrap", children: language === "nl" ? "Grootte:" : "Size:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: `text-xs md:text-sm ${themeClasses.textSecondary} whitespace-nowrap`, children: language === "nl" ? "Grootte:" : "Size:" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full md:w-auto", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -307,10 +349,10 @@ function ScreenshotEditor({
               className: "flex-1 md:flex-none md:max-w-xs"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm text-zinc-400 w-6 md:w-8 text-right", children: brushSize })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs md:text-sm ${themeClasses.textTertiary} w-6 md:w-8 text-right`, children: brushSize })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center bg-zinc-900 rounded-lg p-2 md:p-4 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex justify-center ${themeClasses.canvasBg} rounded-lg p-2 md:p-4 overflow-auto`, children: /* @__PURE__ */ jsxRuntime.jsx(
         "canvas",
         {
           ref: canvasRef,
@@ -321,7 +363,7 @@ function ScreenshotEditor({
           onTouchStart: startDrawing,
           onTouchMove: draw,
           onTouchEnd: stopDrawing,
-          className: "cursor-crosshair border border-zinc-700 rounded touch-none",
+          className: `cursor-crosshair border ${themeClasses.borderPrimary} rounded touch-none`,
           style: {
             width: `${displayWidth}px`,
             height: `${displayHeight}px`,
@@ -336,17 +378,22 @@ function ScreenshotEditor({
 function ScreenshotButton({
   screenshot,
   onScreenshotTook,
-  language = "en"
+  language = "en",
+  theme = "dark"
 }) {
   const [isTakenScreenshot, setIsTakenScreenShot] = react$1.useState(false);
   const [showEditor, setShowEditor] = react$1.useState(false);
   const [tempScreenshot, setTempScreenshot] = react$1.useState(null);
+  const themeClasses = getThemeClasses(theme);
   async function handleTakeScreenshot() {
     setIsTakenScreenShot(true);
-    const canvas = await html2canvas__default.default(document.querySelector("html"));
+    const canvas = await html2canvas__default.default(document.querySelector("html"), {
+      ignoreElements: (element) => {
+        return element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
+      }
+    });
     const base64image = canvas.toDataURL("image/png");
-    setTempScreenshot(base64image);
-    setShowEditor(true);
+    onScreenshotTook(base64image);
     setIsTakenScreenShot(false);
   }
   function handleEditorSave(editedScreenshot) {
@@ -372,61 +419,104 @@ function ScreenshotButton({
           screenshot: tempScreenshot || screenshot,
           onSave: handleEditorSave,
           onCancel: handleEditorCancel,
-          language
+          language,
+          theme
         }
       ),
-      screenshot && !tempScreenshot ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(phosphorReact.Trash, { weight: "fill" })
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
+      screenshot ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors rounded-md" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-3 h-3 text-white" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(phosphorReact.PencilSimple, { weight: "bold", className: `w-5 h-5 ${themeClasses.textPrimary}` })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.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}
+               transition-colors focus:outline-none focus:ring-2
+               focus:ring-offset-2 ${themeClasses.focusRingOffset} focus:ring-brand-500`,
           onClick: handleTakeScreenshot,
-          children: isTakenScreenshot ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Camera, { weight: "bold", className: "w-6 h-6" })
+          children: isTakenScreenshot ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Camera, { weight: "bold", className: `w-6 h-6 ${themeClasses.iconColor}` })
         }
       )
     ] });
   }
   if (screenshot) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors rounded-md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-3 h-3 text-white" })
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.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 relative",
           onClick: handleEditScreenshot,
-          style: {
-            backgroundImage: `url(${screenshot})`,
-            backgroundPosition: "right bottom",
-            backgroundSize: 180
-          },
-          title: language === "nl" ? "Klik om te bewerken" : "Click to edit",
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors rounded-md" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-3 h-3 text-white" })
+          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__ */ jsxRuntime.jsx(phosphorReact.PencilSimple, { weight: "bold", className: `w-5 h-5 ${themeClasses.textPrimary}` })
         }
       )
     ] });
@@ -435,9 +525,11 @@ function ScreenshotButton({
     "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__ */ jsxRuntime.jsx(Loading, {}) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Camera, { weight: "bold", className: "w-6 h-6" })
+      children: isTakenScreenshot ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Camera, { weight: "bold", className: `w-6 h-6 ${themeClasses.iconColor}` })
     }
   );
 }
@@ -449,10 +541,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 = react$1.useRef(null);
   const [error, setError] = react$1.useState(null);
+  const themeClasses = getThemeClasses(theme);
   const translations2 = {
     en: {
       upload: "Upload file",
@@ -538,10 +632,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__ */ jsxRuntime.jsx(phosphorReact.Paperclip, { weight: "bold", className: "w-6 h-6" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Paperclip, { weight: "bold", className: `w-6 h-6 ${themeClasses.iconColor}` })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -558,7 +654,7 @@ function FileUploadButton({
       files.map((uploadedFile) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               "img",
@@ -567,14 +663,14 @@ function FileUploadButton({
                 alt: uploadedFile.file.name,
                 className: "w-5 h-5 md:w-6 md:h-6 object-cover rounded flex-shrink-0"
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Paperclip, { className: "w-3 h-3 md:w-4 md:h-4 flex-shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-300 max-w-[80px] md:max-w-[100px] truncate", title: uploadedFile.file.name, children: uploadedFile.file.name }),
+            ) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Paperclip, { className: `w-3 h-3 md:w-4 md:h-4 flex-shrink-0 ${themeClasses.iconColor}` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${themeClasses.textSecondary} max-w-[80px] md:max-w-[100px] truncate`, title: uploadedFile.file.name, children: uploadedFile.file.name }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onClick: () => handleRemoveFile(uploadedFile.id),
-                className: "text-zinc-400 hover:text-zinc-100 transition-colors flex-shrink-0 touch-manipulation",
+                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__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-3 h-3 md:w-4 md:h-4" })
               }
@@ -585,7 +681,7 @@ function FileUploadButton({
       ))
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-400", children: error }),
-    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-zinc-400", children: [
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-xs ${themeClasses.textTertiary}`, children: [
       files.length,
       " ",
       t.files,
@@ -1110,10 +1206,12 @@ function FeedbackContentStep({
   onFeedbackSent,
   integration,
   githubConfig,
-  language
+  language,
+  theme
 }) {
   const t = getTranslations(language);
   const feedbackTypes = getFeedbackTypes(language);
+  const themeClasses = getThemeClasses(theme);
   const [screenshot, setScreenshot] = react$1.useState(null);
   const [uploadedFiles, setUploadedFiles] = react$1.useState([]);
   const feedbackTypeData = feedbackTypes[feedbackType];
@@ -1152,17 +1250,17 @@ function FeedbackContentStep({
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative w-full pr-8 md:pr-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          className: "absolute top-3 md:top-5 left-3 md:left-5 text-zinc-400 hover:text-zinc-100 z-10 p-1",
+          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__ */ jsxRuntime.jsx(phosphorReact.ArrowLeft, { weight: "bold", className: "w-4 h-4 md:w-4 md:h-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ArrowLeft, { weight: "bold", className: "w-5 h-5 md:w-5 md:h-5" })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-lg md:text-xl leading-6 flex items-center gap-2 mt-2 pl-8 md:pl-10", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "img",
           {
@@ -1173,13 +1271,17 @@ function FeedbackContentStep({
         ),
         feedbackTypeData.title
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { className: "absolute top-3 md:top-5 right-3 md:right-5", title: t.form.closeButton })
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { className: "absolute top-0 right-0 p-2 md:p-2.5", title: t.form.closeButton, theme })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmitFeedback, className: "my-3 md:my-4 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
-          className: "w-full min-h-[100px] md:min-h-[112px] text-sm \n        placeholder-zinc-400 text-zinc-100 border border-zinc-600 bg-transparent rounded-md p-2 md:p-3\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)
         }
@@ -1189,7 +1291,8 @@ function FeedbackContentStep({
         {
           files: uploadedFiles,
           onFilesChanged: setUploadedFiles,
-          language
+          language,
+          theme
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex gap-2 mt-3", children: [
@@ -1198,7 +1301,8 @@ function FeedbackContentStep({
           {
             screenshot,
             onScreenshotTook: setScreenshot,
-            language
+            language,
+            theme
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1206,7 +1310,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 flex",
+            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__ */ jsxRuntime.jsx(Loading, {}) : t.content.sendButton
           }
         )
@@ -1214,22 +1322,23 @@ function FeedbackContentStep({
     ] })
   ] });
 }
-function FeedbackSuccessStep({ onFeedbackRestartRequest, language }) {
+function FeedbackSuccessStep({ onFeedbackRestartRequest, language, theme }) {
   const t = getTranslations(language);
+  const themeClasses = getThemeClasses(theme);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton, theme }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-8 md:py-10 w-full max-w-[304px] px-2", children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-lg md:text-xl mt-2 text-center", children: t.success.message }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg md:text-xl mt-2 text-center ${themeClasses.textPrimary}`, children: t.success.message }),
       /* @__PURE__ */ jsxRuntime.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
         }
       )
@@ -1262,15 +1371,16 @@ function getFeedbackTypes(language = "en") {
     }
   };
 }
-function WidgetForm({ integration, githubConfig, language }) {
+function WidgetForm({ integration, githubConfig, language, theme }) {
   const [feedbackType, setFeedbackType] = react$1.useState(null);
   const [feedbackSent, setFeedbackSent] = react$1.useState(false);
+  const themeClasses = getThemeClasses(theme);
   function handleRestartFeedback() {
     setFeedbackSent(false);
     setFeedbackType(null);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900 p-3 md:p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto max-w-md", children: [
-    feedbackSent ? /* @__PURE__ */ jsxRuntime.jsx(FeedbackSuccessStep, { onFeedbackRestartRequest: handleRestartFeedback, language }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !feedbackType ? /* @__PURE__ */ jsxRuntime.jsx(FeedbackTypeStep, { onFeedbackTypeChanged: setFeedbackType, language }) : /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FeedbackSuccessStep, { onFeedbackRestartRequest: handleRestartFeedback, language, theme }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !feedbackType ? /* @__PURE__ */ jsxRuntime.jsx(FeedbackTypeStep, { onFeedbackTypeChanged: setFeedbackType, language, theme }) : /* @__PURE__ */ jsxRuntime.jsx(
       FeedbackContentStep,
       {
         feedbackType,
@@ -1278,10 +1388,11 @@ function WidgetForm({ integration, githubConfig, language }) {
         onFeedbackSent: () => setFeedbackSent(true),
         integration,
         githubConfig,
-        language
+        language,
+        theme
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "text-xs text-neutral-400 mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("footer", { className: `text-xs ${themeClasses.textMuted} mt-2`, children: /* @__PURE__ */ jsxRuntime.jsx(
       "a",
       {
         className: "underline underline-offset-2",
@@ -1299,13 +1410,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",
@@ -1313,14 +1436,18 @@ 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__ */ jsxRuntime.jsxs(react.Popover, { className: `fixed ${positionClasses[position]} flex flex-col ${alignmentClass} z-50`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Panel, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-feedback-widget": "true", className: `fixed ${positionClasses[position]} z-50`, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover, { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Panel, { className: `${panelPositionClass} ${panelAlignmentClass}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       WidgetForm,
       {
         integration,
         githubConfig,
-        language: finalLanguage
+        language: finalLanguage,
+        theme: finalTheme
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.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: [
@@ -1330,7 +1457,7 @@ function Widget({
         t.widget.button
       ] })
     ] })
-  ] });
+  ] }) });
 }
 
 exports.Widget = Widget;