@cohiva/support-widget 1.1.0 → 1.1.2

package/dist/index.cjs

@@ -39,6 +39,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/SupportWidget.tsx
 var import_react2 = require("react");
+var import_lucide_react = require("lucide-react");
 
 // src/adapters/centralApi.ts
 function createCentralFeedbackClient(options) {
@@ -724,7 +725,7 @@ function buildFeedbackDescription(formData, diagnostics) {
 }
 
 // src/components/SupportWidget.tsx
-var import_widget = require("./widget-TTYCIVNC.css");
+var import_widget = require("./widget-IHSQAQI2.css");
 
 // src/utils/classNames.ts
 function classNames(...items) {
@@ -733,6 +734,12 @@ function classNames(...items) {
 
 // src/components/SupportWidget.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var typeIconMap = {
+  bug: { icon: import_lucide_react.Bug, color: "#ef4444" },
+  feature: { icon: import_lucide_react.Lightbulb, color: "#f59e0b" },
+  feedback: { icon: import_lucide_react.MessageCircle, color: "#3b82f6" },
+  improvement: { icon: import_lucide_react.Wrench, color: "#8b5cf6" }
+};
 function labelForType(type) {
   return feedbackTypes.find((item) => item.value === type)?.label || type;
 }
@@ -881,7 +888,7 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
         ]
       }
     ),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-modal-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         "aria-describedby": "support-widget-description",
@@ -892,7 +899,8 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { "aria-label": "Close", className: "sw-close", onClick: handleClose, type: "button", children: "x" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "sw-sr-only", id: "support-widget-description", children: "Support ticket dialog" }),
-          isSubmitted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-modal-body", children: isSubmitted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCircle, { "aria-hidden": "true", className: "sw-success-icon", color: "#0f766e", size: 48 }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Thank You!" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Your feedback helps us improve the product." }),
             submitResult?.issue_number || submitResult?.issue_url ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { "data-testid": "feedback-success-issue-link", children: [
@@ -904,23 +912,31 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
             ] }) : null
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "sw-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: step === 1 ? "Send Feedback" : selectedTypeConfig?.label || "Support Ticket" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: step === 1 ? "What kind of support ticket would you like to submit?" : selectedTypeConfig?.description })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: step === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MessageSquarePlus, { "aria-hidden": "true", className: "sw-header-icon", size: 22 }),
+                " Send Feedback"
+              ] }) : selectedTypeConfig?.label || "Support Ticket" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: step === 1 ? "Help us improve Cohiva by sharing your experience" : selectedTypeConfig?.description })
             ] }),
-            step === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "button",
-              {
-                className: "sw-type-card",
-                "data-testid": `feedback-type-${typeConfig.value}`,
-                onClick: () => handleTypeSelect(typeConfig.value),
-                type: "button",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: typeConfig.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: typeConfig.description })
-                ]
-              },
-              typeConfig.value
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "sw-form", onSubmit: handleSubmit, children: [
+            step === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => {
+              const entry = typeIconMap[typeConfig.value];
+              const Icon = entry?.icon;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  className: "sw-type-card",
+                  "data-testid": `feedback-type-${typeConfig.value}`,
+                  onClick: () => handleTypeSelect(typeConfig.value),
+                  type: "button",
+                  children: [
+                    Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "sw-type-card-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { color: entry.color, size: 36, strokeWidth: 1.5 }) }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: typeConfig.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: typeConfig.description })
+                  ]
+                },
+                typeConfig.value
+              );
+            }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "sw-form", onSubmit: handleSubmit, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "support-title", children: "Title *" }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "input",
@@ -1020,13 +1036,16 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
               !validation.valid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "sw-error", children: validation.description }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-actions", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setStep(1), type: "button", children: "Back" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : "Submit" })
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Send, { "aria-hidden": "true", size: 14, style: { marginRight: "0.35rem", verticalAlign: "middle" } }),
+                  "Submit"
+                ] }) })
               ] })
             ] })
-          ] })
+          ] }) })
         ]
       }
-    ) }) }) : null
+    ) }) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -196,4 +196,4 @@ interface GitHubIssueProxyClientOptions {
 }
 declare function createGitHubIssueProxyClient(options: GitHubIssueProxyClientOptions): (payload: SubmitFeedbackRequest) => Promise<SubmitResult>;
 
-export { type DiagnosticsConfig, type DiagnosticsSnapshot, type FeedbackFormData, type FeedbackType, type SubmissionConfig, type SubmissionMode, type SubmitFeedbackRequest, type SubmitResult, SupportWidget, type SupportWidgetConfig, type SupportWidgetProps, buildExperienceDetailsPayload, buildFeedbackDescription, clearFeedbackDiagnostics, createCentralFeedbackClient, createEmptyFeedbackForm, createGitHubIssueProxyClient, feedbackFieldLabels, feedbackTypes, getFeedbackDiagnosticsSnapshot, getRequiredFeedbackFields, installFeedbackDiagnostics, recordFeedbackRouteVisit, validateFeedbackForm };
+export { type DiagnosticsConfig, type DiagnosticsEntry, type DiagnosticsSnapshot, type FeedbackFormData, type FeedbackType, type SubmissionConfig, type SubmissionMode, type SubmitFeedbackRequest, type SubmitResult, SupportWidget, type SupportWidgetConfig, type SupportWidgetProps, buildExperienceDetailsPayload, buildFeedbackDescription, clearFeedbackDiagnostics, createCentralFeedbackClient, createEmptyFeedbackForm, createGitHubIssueProxyClient, feedbackFieldLabels, feedbackTypes, getFeedbackDiagnosticsSnapshot, getRequiredFeedbackFields, installFeedbackDiagnostics, recordFeedbackRouteVisit, validateFeedbackForm };

package/dist/index.d.ts

@@ -196,4 +196,4 @@ interface GitHubIssueProxyClientOptions {
 }
 declare function createGitHubIssueProxyClient(options: GitHubIssueProxyClientOptions): (payload: SubmitFeedbackRequest) => Promise<SubmitResult>;
 
-export { type DiagnosticsConfig, type DiagnosticsSnapshot, type FeedbackFormData, type FeedbackType, type SubmissionConfig, type SubmissionMode, type SubmitFeedbackRequest, type SubmitResult, SupportWidget, type SupportWidgetConfig, type SupportWidgetProps, buildExperienceDetailsPayload, buildFeedbackDescription, clearFeedbackDiagnostics, createCentralFeedbackClient, createEmptyFeedbackForm, createGitHubIssueProxyClient, feedbackFieldLabels, feedbackTypes, getFeedbackDiagnosticsSnapshot, getRequiredFeedbackFields, installFeedbackDiagnostics, recordFeedbackRouteVisit, validateFeedbackForm };
+export { type DiagnosticsConfig, type DiagnosticsEntry, type DiagnosticsSnapshot, type FeedbackFormData, type FeedbackType, type SubmissionConfig, type SubmissionMode, type SubmitFeedbackRequest, type SubmitResult, SupportWidget, type SupportWidgetConfig, type SupportWidgetProps, buildExperienceDetailsPayload, buildFeedbackDescription, clearFeedbackDiagnostics, createCentralFeedbackClient, createEmptyFeedbackForm, createGitHubIssueProxyClient, feedbackFieldLabels, feedbackTypes, getFeedbackDiagnosticsSnapshot, getRequiredFeedbackFields, installFeedbackDiagnostics, recordFeedbackRouteVisit, validateFeedbackForm };

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/SupportWidget.tsx
 import { useCallback, useEffect as useEffect2, useMemo, useState } from "react";
+import { Bug, CheckCircle, Lightbulb, MessageCircle, MessageSquarePlus, Send, Wrench } from "lucide-react";
 
 // src/adapters/centralApi.ts
 function createCentralFeedbackClient(options) {
@@ -685,7 +686,7 @@ function buildFeedbackDescription(formData, diagnostics) {
 }
 
 // src/components/SupportWidget.tsx
-import "./widget-TTYCIVNC.css";
+import "./widget-IHSQAQI2.css";
 
 // src/utils/classNames.ts
 function classNames(...items) {
@@ -694,6 +695,12 @@ function classNames(...items) {
 
 // src/components/SupportWidget.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var typeIconMap = {
+  bug: { icon: Bug, color: "#ef4444" },
+  feature: { icon: Lightbulb, color: "#f59e0b" },
+  feedback: { icon: MessageCircle, color: "#3b82f6" },
+  improvement: { icon: Wrench, color: "#8b5cf6" }
+};
 function labelForType(type) {
   return feedbackTypes.find((item) => item.value === type)?.label || type;
 }
@@ -842,7 +849,7 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
         ]
       }
     ),
-    isOpen ? /* @__PURE__ */ jsx("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ jsx("div", { className: "sw-modal-wrapper", children: /* @__PURE__ */ jsxs(
+    isOpen ? /* @__PURE__ */ jsx("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ jsxs(
       "div",
       {
         "aria-describedby": "support-widget-description",
@@ -853,7 +860,8 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
         children: [
           /* @__PURE__ */ jsx("button", { "aria-label": "Close", className: "sw-close", onClick: handleClose, type: "button", children: "x" }),
           /* @__PURE__ */ jsx("p", { className: "sw-sr-only", id: "support-widget-description", children: "Support ticket dialog" }),
-          isSubmitted ? /* @__PURE__ */ jsxs("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+          /* @__PURE__ */ jsx("div", { className: "sw-modal-body", children: isSubmitted ? /* @__PURE__ */ jsxs("div", { className: "sw-success", "data-testid": "feedback-success-screen", children: [
+            /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": "true", className: "sw-success-icon", color: "#0f766e", size: 48 }),
             /* @__PURE__ */ jsx("h2", { children: "Thank You!" }),
             /* @__PURE__ */ jsx("p", { children: "Your feedback helps us improve the product." }),
             submitResult?.issue_number || submitResult?.issue_url ? /* @__PURE__ */ jsxs("p", { "data-testid": "feedback-success-issue-link", children: [
@@ -865,23 +873,31 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
             ] }) : null
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("header", { className: "sw-header", children: [
-              /* @__PURE__ */ jsx("h2", { children: step === 1 ? "Send Feedback" : selectedTypeConfig?.label || "Support Ticket" }),
-              /* @__PURE__ */ jsx("p", { children: step === 1 ? "What kind of support ticket would you like to submit?" : selectedTypeConfig?.description })
+              /* @__PURE__ */ jsx("h2", { children: step === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "sw-header-icon", size: 22 }),
+                " Send Feedback"
+              ] }) : selectedTypeConfig?.label || "Support Ticket" }),
+              /* @__PURE__ */ jsx("p", { children: step === 1 ? "Help us improve Cohiva by sharing your experience" : selectedTypeConfig?.description })
             ] }),
-            step === 1 ? /* @__PURE__ */ jsx("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: "sw-type-card",
-                "data-testid": `feedback-type-${typeConfig.value}`,
-                onClick: () => handleTypeSelect(typeConfig.value),
-                type: "button",
-                children: [
-                  /* @__PURE__ */ jsx("strong", { children: typeConfig.label }),
-                  /* @__PURE__ */ jsx("span", { children: typeConfig.description })
-                ]
-              },
-              typeConfig.value
-            )) }) : /* @__PURE__ */ jsxs("form", { className: "sw-form", onSubmit: handleSubmit, children: [
+            step === 1 ? /* @__PURE__ */ jsx("div", { className: "sw-type-grid", children: feedbackTypes.map((typeConfig) => {
+              const entry = typeIconMap[typeConfig.value];
+              const Icon = entry?.icon;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "sw-type-card",
+                  "data-testid": `feedback-type-${typeConfig.value}`,
+                  onClick: () => handleTypeSelect(typeConfig.value),
+                  type: "button",
+                  children: [
+                    Icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "sw-type-card-icon", children: /* @__PURE__ */ jsx(Icon, { color: entry.color, size: 36, strokeWidth: 1.5 }) }) : null,
+                    /* @__PURE__ */ jsx("strong", { children: typeConfig.label }),
+                    /* @__PURE__ */ jsx("span", { children: typeConfig.description })
+                  ]
+                },
+                typeConfig.value
+              );
+            }) }) : /* @__PURE__ */ jsxs("form", { className: "sw-form", onSubmit: handleSubmit, children: [
               /* @__PURE__ */ jsx("label", { htmlFor: "support-title", children: "Title *" }),
               /* @__PURE__ */ jsx(
                 "input",
@@ -981,13 +997,16 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
               !validation.valid ? /* @__PURE__ */ jsx("p", { className: "sw-error", children: validation.description }) : null,
               /* @__PURE__ */ jsxs("div", { className: "sw-actions", children: [
                 /* @__PURE__ */ jsx("button", { onClick: () => setStep(1), type: "button", children: "Back" }),
-                /* @__PURE__ */ jsx("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : "Submit" })
+                /* @__PURE__ */ jsx("button", { disabled: isSubmitting || !validation.valid, type: "submit", children: isSubmitting ? "Submitting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Send, { "aria-hidden": "true", size: 14, style: { marginRight: "0.35rem", verticalAlign: "middle" } }),
+                  "Submit"
+                ] }) })
               ] })
             ] })
-          ] })
+          ] }) })
         ]
       }
-    ) }) }) : null
+    ) }) : null
   ] });
 }
 export {

package/dist/styles.css

@@ -7,8 +7,8 @@
   --sw-color-text: #0f172a;
   --sw-color-text-muted: #475569;
   --sw-color-border: #cbd5e1;
-  --sw-color-primary: #0f766e;
-  --sw-color-primary-hover: #115e59;
+  --sw-color-primary: #8b5cf6;
+  --sw-color-primary-hover: #7c3aed;
   --sw-color-danger: #b91c1c;
   --sw-shadow-elevated: 0 20px 35px rgba(15, 23, 42, 0.25);
 }
@@ -61,12 +61,7 @@
   inset: 0;
   z-index: 1100;
   background: rgba(2, 6, 23, 0.7);
-  overflow-y: auto;
-}
-
-.sw-modal-wrapper {
   display: flex;
-  min-height: 100%;
   align-items: center;
   justify-content: center;
   padding: 1rem;
@@ -74,15 +69,25 @@
 
 .sw-modal {
   width: min(100%, 56rem);
+  max-height: calc(100dvh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   position: relative;
   border-radius: 1rem;
   border: 1px solid var(--sw-color-border);
   background: var(--sw-color-surface);
   color: var(--sw-color-text);
-  padding: 1.25rem;
   box-shadow: var(--sw-shadow-elevated);
 }
 
+.sw-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 1.25rem;
+}
+
 .sw-close {
   position: absolute;
   right: 0.75rem;
@@ -97,6 +102,13 @@
 .sw-header h2 {
   margin: 0;
   font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.sw-header-icon {
+  flex-shrink: 0;
 }
 
 .sw-header p {
@@ -115,12 +127,22 @@
   border: 2px solid var(--sw-color-border);
   border-radius: 0.75rem;
   background: #ffffff;
-  padding: 0.85rem;
-  display: grid;
-  gap: 0.4rem;
+  padding: 1.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
   transition: border-color 150ms ease, background 150ms ease;
 }
 
+.sw-type-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.25rem;
+}
+
 .sw-type-card:hover {
   border-color: var(--sw-color-primary);
   background: var(--sw-color-surface-muted);
@@ -218,10 +240,19 @@
   color: #ffffff;
   background: var(--sw-color-primary);
   border-color: var(--sw-color-primary);
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
 }
 
-.sw-actions button[type='submit']:hover {
+.sw-actions button[type='submit']:hover:not(:disabled) {
   background: var(--sw-color-primary-hover);
+  border-color: var(--sw-color-primary-hover);
 }
 
 .sw-actions button:disabled {
@@ -232,6 +263,14 @@
 .sw-success {
   text-align: center;
   padding: 3rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sw-success-icon {
+  margin-bottom: 0.5rem;
 }
 
 @media (max-width: 640px) {

package/dist/{widget-TTYCIVNC.css → widget-IHSQAQI2.css}

@@ -7,8 +7,8 @@
   --sw-color-text: #0f172a;
   --sw-color-text-muted: #475569;
   --sw-color-border: #cbd5e1;
-  --sw-color-primary: #0f766e;
-  --sw-color-primary-hover: #115e59;
+  --sw-color-primary: #8b5cf6;
+  --sw-color-primary-hover: #7c3aed;
   --sw-color-danger: #b91c1c;
   --sw-shadow-elevated: 0 20px 35px rgba(15, 23, 42, 0.25);
 }
@@ -61,12 +61,7 @@
   inset: 0;
   z-index: 1100;
   background: rgba(2, 6, 23, 0.7);
-  overflow-y: auto;
-}
-
-.sw-modal-wrapper {
   display: flex;
-  min-height: 100%;
   align-items: center;
   justify-content: center;
   padding: 1rem;
@@ -74,15 +69,25 @@
 
 .sw-modal {
   width: min(100%, 56rem);
+  max-height: calc(100dvh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   position: relative;
   border-radius: 1rem;
   border: 1px solid var(--sw-color-border);
   background: var(--sw-color-surface);
   color: var(--sw-color-text);
-  padding: 1.25rem;
   box-shadow: var(--sw-shadow-elevated);
 }
 
+.sw-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 1.25rem;
+}
+
 .sw-close {
   position: absolute;
   right: 0.75rem;
@@ -97,6 +102,13 @@
 .sw-header h2 {
   margin: 0;
   font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.sw-header-icon {
+  flex-shrink: 0;
 }
 
 .sw-header p {
@@ -115,12 +127,22 @@
   border: 2px solid var(--sw-color-border);
   border-radius: 0.75rem;
   background: #ffffff;
-  padding: 0.85rem;
-  display: grid;
-  gap: 0.4rem;
+  padding: 1.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
   transition: border-color 150ms ease, background 150ms ease;
 }
 
+.sw-type-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.25rem;
+}
+
 .sw-type-card:hover {
   border-color: var(--sw-color-primary);
   background: var(--sw-color-surface-muted);
@@ -218,10 +240,19 @@
   color: #ffffff;
   background: var(--sw-color-primary);
   border-color: var(--sw-color-primary);
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
 }
 
-.sw-actions button[type='submit']:hover {
+.sw-actions button[type='submit']:hover:not(:disabled) {
   background: var(--sw-color-primary-hover);
+  border-color: var(--sw-color-primary-hover);
 }
 
 .sw-actions button:disabled {
@@ -232,6 +263,14 @@
 .sw-success {
   text-align: center;
   padding: 3rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sw-success-icon {
+  margin-bottom: 0.5rem;
 }
 
 @media (max-width: 640px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cohiva/support-widget",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Reusable Support Ticket widget with diagnostics capture and typed payload generation",
   "license": "MIT",
   "engines": {
@@ -63,6 +63,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "lucide-react": "^1.7.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {

package/dist/widget-PDWZ5OMY.css

@@ -1,243 +0,0 @@
-:root {
-  --sw-color-launcher-bg: #6d28d9;
-  --sw-color-launcher-bg-hover: #5b21b6;
-  --sw-color-launcher-border: #8b5cf6;
-  --sw-color-surface: #ffffff;
-  --sw-color-surface-muted: #f8fafc;
-  --sw-color-text: #0f172a;
-  --sw-color-text-muted: #475569;
-  --sw-color-border: #cbd5e1;
-  --sw-color-primary: #0f766e;
-  --sw-color-primary-hover: #115e59;
-  --sw-color-danger: #b91c1c;
-  --sw-shadow-elevated: 0 20px 35px rgba(15, 23, 42, 0.25);
-}
-
-.sw-sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.sw-launcher {
-  position: fixed;
-  right: 1.5rem;
-  bottom: 1.5rem;
-  z-index: 1000;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 999px;
-  border: 2px solid var(--sw-color-launcher-border);
-  background: var(--sw-color-launcher-bg);
-  color: #ffffff;
-  font-size: 0.875rem;
-  font-weight: 700;
-  padding: 0.625rem 1rem;
-  box-shadow: 0 10px 24px rgba(76, 29, 149, 0.38);
-  transition: transform 150ms ease, background 150ms ease;
-}
-
-.sw-launcher:hover {
-  transform: scale(1.05);
-  background: var(--sw-color-launcher-bg-hover);
-}
-
-.sw-launcher-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sw-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1100;
-  background: rgba(2, 6, 23, 0.7);
-  display: grid;
-  place-items: center;
-  padding: 1rem;
-}
-
-.sw-modal {
-  width: min(100%, 56rem);
-  max-height: 92vh;
-  overflow: auto;
-  position: relative;
-  border-radius: 1rem;
-  border: 1px solid var(--sw-color-border);
-  background: var(--sw-color-surface);
-  color: var(--sw-color-text);
-  padding: 1.25rem;
-  box-shadow: var(--sw-shadow-elevated);
-}
-
-.sw-close {
-  position: absolute;
-  right: 0.75rem;
-  top: 0.75rem;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--sw-color-border);
-  background: transparent;
-}
-
-.sw-header h2 {
-  margin: 0;
-  font-size: 1.25rem;
-}
-
-.sw-header p {
-  margin: 0.3rem 0 1rem;
-  color: var(--sw-color-text-muted);
-}
-
-.sw-type-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
-}
-
-.sw-type-card {
-  text-align: left;
-  border: 2px solid var(--sw-color-border);
-  border-radius: 0.75rem;
-  background: #ffffff;
-  padding: 0.85rem;
-  display: grid;
-  gap: 0.4rem;
-  transition: border-color 150ms ease, background 150ms ease;
-}
-
-.sw-type-card:hover {
-  border-color: var(--sw-color-primary);
-  background: var(--sw-color-surface-muted);
-}
-
-.sw-type-card span {
-  color: var(--sw-color-text-muted);
-  font-size: 0.85rem;
-}
-
-.sw-form {
-  display: grid;
-  gap: 0.8rem;
-}
-
-.sw-field {
-  display: grid;
-  gap: 0.35rem;
-}
-
-.sw-field textarea,
-.sw-form input,
-.sw-form select {
-  border: 1px solid var(--sw-color-border);
-  border-radius: 0.5rem;
-  padding: 0.6rem;
-  font: inherit;
-}
-
-.sw-row {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
-}
-
-.sw-section {
-  border: 1px solid var(--sw-color-border);
-  border-radius: 0.75rem;
-  background: var(--sw-color-surface-muted);
-  padding: 0.8rem;
-}
-
-.sw-section h3 {
-  margin-top: 0;
-  margin-bottom: 0.6rem;
-  font-size: 1rem;
-}
-
-.sw-rating {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.sw-rating-button {
-  border: 1px solid var(--sw-color-border);
-  border-radius: 0.3rem;
-  background: transparent;
-  color: #94a3b8;
-  margin-right: 0.35rem;
-}
-
-.sw-rating-button.is-active {
-  color: #f59e0b;
-  border-color: #f59e0b;
-}
-
-.sw-diagnostics-note {
-  border: 1px dashed var(--sw-color-border);
-  border-radius: 0.55rem;
-  font-size: 0.8rem;
-  color: var(--sw-color-text-muted);
-  padding: 0.65rem;
-}
-
-.sw-error {
-  color: var(--sw-color-danger);
-  margin: 0;
-}
-
-.sw-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.sw-actions button {
-  flex: 1;
-  border: 1px solid var(--sw-color-border);
-  border-radius: 0.5rem;
-  padding: 0.6rem;
-  font: inherit;
-  background: #ffffff;
-}
-
-.sw-actions button[type='submit'] {
-  color: #ffffff;
-  background: var(--sw-color-primary);
-  border-color: var(--sw-color-primary);
-}
-
-.sw-actions button[type='submit']:hover {
-  background: var(--sw-color-primary-hover);
-}
-
-.sw-actions button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.sw-success {
-  text-align: center;
-  padding: 3rem 1rem;
-}
-
-@media (max-width: 640px) {
-  .sw-type-grid,
-  .sw-row {
-    grid-template-columns: 1fr;
-  }
-
-  .sw-launcher {
-    right: 1rem;
-    bottom: 1rem;
-  }
-}