@welshare/questionnaire 0.2.1 → 0.2.2

package/README.md

@@ -168,6 +168,124 @@ function MyComponent() {
 }
 ```
 
+### LegalConsentForm
+
+A self-contained form component for collecting user consent before data submission. This component handles:
+
+1. **Terms & Conditions and Privacy Policy** (required) - User must accept to proceed
+2. **Study invitation notifications** (optional) - User can opt in to receive study invitations
+
+**Usage Pattern:**
+This component provides the content for a consent dialog. Applications should wrap this component in their own Dialog/Modal component (e.g., from shadcn/ui, Radix UI, MUI, etc.), similar to how BmiForm is used with input helpers.
+
+**Props:**
+
+- `initialValues?: Partial<LegalConsentResult>` - Initial consent state (for restoring previous preferences)
+- `documentLinks?: LegalDocumentLinks` - Custom URLs for Terms & Privacy documents
+- `onConfirm?: (result: LegalConsentResult) => void` - Called when user confirms (only if terms accepted)
+- `onCancel?: () => void` - Called when user cancels/declines
+- `onChange?: (result: LegalConsentResult) => void` - Called on any checkbox change (real-time updates)
+- `renderCheckbox?: (props: LegalCheckboxProps) => ReactNode` - Custom checkbox component renderer
+- `confirmButtonLabel?: string` - Custom confirm button text (default: "Confirm & Continue")
+- `cancelButtonLabel?: string` - Custom cancel button text (default: "Cancel")
+- `className?: string` - Additional CSS classes
+
+**Result Object:**
+
+```typescript
+interface LegalConsentResult {
+  termsAccepted: boolean; // Required - T&Cs and Privacy Policy
+  studyConsentAccepted: boolean; // Optional - Study invitations
+}
+```
+
+**Example with Dialog:**
+
+```tsx
+import { useState } from "react";
+import {
+  LegalConsentForm,
+  type LegalConsentResult,
+} from "@welshare/questionnaire";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import "@welshare/questionnaire/tokens.css";
+import "@welshare/questionnaire/styles.css";
+
+function DataSubmissionFlow() {
+  const [showConsent, setShowConsent] = useState(false);
+
+  const handleSubmitData = () => {
+    // Show consent dialog before submitting data
+    setShowConsent(true);
+  };
+
+  const handleConsent = (result: LegalConsentResult) => {
+    console.log("Terms accepted:", result.termsAccepted);
+    console.log("Study consent:", result.studyConsentAccepted);
+
+    // Proceed with data submission
+    submitDataToServer(result);
+    setShowConsent(false);
+  };
+
+  return (
+    <>
+      <button onClick={handleSubmitData}>Submit My Data</button>
+
+      <Dialog open={showConsent} onOpenChange={setShowConsent}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Health Data Storage Consent</DialogTitle>
+          </DialogHeader>
+          <LegalConsentForm
+            renderCheckbox={({ id, checked, onCheckedChange, className }) => (
+              <Checkbox
+                id={id}
+                checked={checked}
+                onCheckedChange={onCheckedChange}
+                className={className}
+              />
+            )}
+            onConfirm={handleConsent}
+            onCancel={() => setShowConsent(false)}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+```
+
+**Custom Document Links:**
+
+```tsx
+<LegalConsentForm
+  documentLinks={{
+    termsUrl: "https://myapp.com/terms",
+    privacyUrl: "https://myapp.com/privacy",
+  }}
+  onConfirm={handleConsent}
+  onCancel={handleCancel}
+/>
+```
+
+**CSS Classes for Styling:**
+
+- `.wq-legal-consent-form` - Main form container
+- `.wq-legal-consent-section` - Individual consent section
+- `.wq-legal-consent-heading` - Section headings
+- `.wq-legal-consent-checkbox-row` - Checkbox + label row
+- `.wq-legal-consent-link` - Links to legal documents
+- `.wq-legal-consent-info-box` - Information box (study consent details)
+- `.wq-legal-consent-actions` - Button container
+- `.wq-button`, `.wq-button-primary`, `.wq-button-outline` - Button styles
+
 ### Utilities
 
 **Questionnaire Utilities:**

package/dist/esm/components/legal-consent-form.d.ts

@@ -0,0 +1,123 @@
+import { ReactNode } from "react";
+/**
+ * Configuration for legal document links
+ */
+export interface LegalDocumentLinks {
+    /** URL to Terms & Conditions document */
+    termsUrl?: string;
+    /** URL to Privacy Policy document */
+    privacyUrl?: string;
+}
+/**
+ * Result object returned on submission
+ */
+export interface LegalConsentResult {
+    /** Whether user accepted terms & conditions and privacy policy */
+    termsAccepted: boolean;
+    /** Whether user opted in to receive study invitations */
+    studyConsentAccepted: boolean;
+}
+/**
+ * Props for rendering a checkbox in the legal consent form
+ */
+export interface LegalCheckboxProps {
+    /** Unique identifier for the checkbox */
+    id: string;
+    /** Whether the checkbox is checked */
+    checked: boolean;
+    /** Callback when the checkbox value changes */
+    onCheckedChange: (checked: boolean) => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+export interface LegalConsentFormProps {
+    /**
+     * Initial consent values.
+     * Useful for restoring previous consent state.
+     */
+    initialValues?: Partial<LegalConsentResult>;
+    /**
+     * Custom URLs for legal documents.
+     * Defaults to Welshare's standard T&Cs and Privacy Policy.
+     */
+    documentLinks?: LegalDocumentLinks;
+    /**
+     * Callback fired when user confirms the consent.
+     * Only fires if required consents are accepted.
+     */
+    onConfirm?: (result: LegalConsentResult) => void;
+    /**
+     * Callback fired when user cancels/declines.
+     */
+    onCancel?: () => void;
+    /**
+     * Callback fired whenever any consent value changes.
+     * Use this for real-time updates without requiring explicit submission.
+     */
+    onChange?: (result: LegalConsentResult) => void;
+    /**
+     * Custom checkbox renderer.
+     * Applications *can* optionally provide their own checkbox component renderer
+     * If not provided, uses native HTML checkboxes.
+     */
+    renderCheckbox?: (props: LegalCheckboxProps) => ReactNode;
+    /**
+     * Label for the confirm button.
+     * Defaults to "Confirm & Continue".
+     */
+    confirmButtonLabel?: string;
+    /**
+     * Label for the cancel button.
+     * Defaults to "Cancel".
+     */
+    cancelButtonLabel?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Legal Consent Form Component
+ *
+ * A self-contained form component for collecting user consent for:
+ * 1. Terms & Conditions and Privacy Policy (required)
+ * 2. Study invitation notifications (optional)
+ *
+ * **Usage Pattern:**
+ * This component provides the content for a consent dialog. Applications
+ * should wrap this component in their own Dialog/Modal component, similar
+ * to how BmiForm is used.
+ *
+ * **Customization:**
+ * - Provide custom checkbox renderer via `renderCheckbox` prop
+ * - Customize document URLs via `documentLinks` prop
+ * - Style with CSS classes using `className` prop
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={showConsent} onOpenChange={setShowConsent}>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Health Data Storage Consent</DialogTitle>
+ *     </DialogHeader>
+ *     <LegalConsentForm
+ *       renderCheckbox={({ id, checked, onCheckedChange, className }) => (
+ *         <Checkbox
+ *           id={id}
+ *           checked={checked}
+ *           onCheckedChange={onCheckedChange}
+ *           className={className}
+ *         />
+ *       )}
+ *       onConfirm={(result) => {
+ *         handleConsent(result);
+ *         setShowConsent(false);
+ *       }}
+ *       onCancel={() => setShowConsent(false)}
+ *     />
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+export declare const LegalConsentForm: ({ initialValues, documentLinks, onConfirm, onCancel, onChange, renderCheckbox, confirmButtonLabel, cancelButtonLabel, className, }: LegalConsentFormProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=legal-consent-form.d.ts.map

package/dist/esm/components/legal-consent-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legal-consent-form.d.ts","sourceRoot":"","sources":["../../../src/components/legal-consent-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,aAAa,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEjD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEhD;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAE1D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,gBAAgB,GAAI,oIAU9B,qBAAqB,4CAmLvB,CAAC"}

package/dist/esm/components/legal-consent-form.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+const DEFAULT_TERMS_URL = "https://www.welshare.health/terms-hpmp";
+const DEFAULT_PRIVACY_URL = "https://www.welshare.health/privacy-hpmp";
+/**
+ * Legal Consent Form Component
+ *
+ * A self-contained form component for collecting user consent for:
+ * 1. Terms & Conditions and Privacy Policy (required)
+ * 2. Study invitation notifications (optional)
+ *
+ * **Usage Pattern:**
+ * This component provides the content for a consent dialog. Applications
+ * should wrap this component in their own Dialog/Modal component, similar
+ * to how BmiForm is used.
+ *
+ * **Customization:**
+ * - Provide custom checkbox renderer via `renderCheckbox` prop
+ * - Customize document URLs via `documentLinks` prop
+ * - Style with CSS classes using `className` prop
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={showConsent} onOpenChange={setShowConsent}>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Health Data Storage Consent</DialogTitle>
+ *     </DialogHeader>
+ *     <LegalConsentForm
+ *       renderCheckbox={({ id, checked, onCheckedChange, className }) => (
+ *         <Checkbox
+ *           id={id}
+ *           checked={checked}
+ *           onCheckedChange={onCheckedChange}
+ *           className={className}
+ *         />
+ *       )}
+ *       onConfirm={(result) => {
+ *         handleConsent(result);
+ *         setShowConsent(false);
+ *       }}
+ *       onCancel={() => setShowConsent(false)}
+ *     />
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+export const LegalConsentForm = ({ initialValues, documentLinks, onConfirm, onCancel, onChange, renderCheckbox, confirmButtonLabel = "Confirm & Continue", cancelButtonLabel = "Cancel", className = "", }) => {
+    // Consent state
+    const [termsAccepted, setTermsAccepted] = useState(initialValues?.termsAccepted ?? false);
+    const [studyConsentAccepted, setStudyConsentAccepted] = useState(initialValues?.studyConsentAccepted ?? false);
+    // Resolve document URLs
+    const termsUrl = documentLinks?.termsUrl ?? DEFAULT_TERMS_URL;
+    const privacyUrl = documentLinks?.privacyUrl ?? DEFAULT_PRIVACY_URL;
+    // Handle terms acceptance change
+    const handleTermsChange = useCallback((checked) => {
+        setTermsAccepted(checked);
+        onChange?.({
+            termsAccepted: checked,
+            studyConsentAccepted,
+        });
+    }, [onChange, studyConsentAccepted]);
+    // Handle study consent change
+    const handleStudyConsentChange = useCallback((checked) => {
+        setStudyConsentAccepted(checked);
+        onChange?.({
+            termsAccepted,
+            studyConsentAccepted: checked,
+        });
+    }, [onChange, termsAccepted]);
+    // Handle confirm
+    const handleConfirm = useCallback(() => {
+        if (termsAccepted && onConfirm) {
+            onConfirm({
+                termsAccepted,
+                studyConsentAccepted,
+            });
+        }
+    }, [termsAccepted, studyConsentAccepted, onConfirm]);
+    // Handle cancel
+    const handleCancel = useCallback(() => {
+        onCancel?.();
+    }, [onCancel]);
+    // Render checkbox - use custom renderer or fallback to native
+    const renderCheckboxElement = (id, checked, onCheckedChange) => {
+        if (renderCheckbox) {
+            return renderCheckbox({
+                id,
+                checked,
+                onCheckedChange,
+                className: "wq-legal-checkbox",
+            });
+        }
+        return (_jsx("input", { type: "checkbox", id: id, checked: checked, onChange: (e) => onCheckedChange(e.target.checked), className: "wq-legal-checkbox" }));
+    };
+    return (_jsxs("div", { className: `wq-legal-consent-form ${className}`, children: [_jsxs("div", { className: "wq-legal-consent-sections", children: [_jsxs("div", { className: "wq-legal-consent-section", children: [_jsx("h3", { className: "wq-legal-consent-heading", children: "1. Agree to T&Cs & Privacy Policy" }), _jsxs("div", { className: "wq-legal-consent-checkbox-row", children: [renderCheckboxElement("terms", termsAccepted, handleTermsChange), _jsxs("label", { htmlFor: "terms", className: "wq-legal-consent-label", children: ["I agree to the", " ", _jsx("a", { href: termsUrl, target: "_blank", rel: "noopener noreferrer", className: "wq-legal-consent-link", children: "Terms & Conditions" }), " ", "and", " ", _jsx("a", { href: privacyUrl, target: "_blank", rel: "noopener noreferrer", className: "wq-legal-consent-link", children: "Privacy Policy" }), "."] })] })] }), _jsxs("div", { className: "wq-legal-consent-section", children: [_jsx("h3", { className: "wq-legal-consent-heading", children: "2. Consent for study invitations / recruitment notifications (optional)" }), _jsx("p", { className: "wq-legal-consent-subtitle", children: "Receive study invitations (optional)" }), _jsx("p", { className: "wq-legal-consent-description", children: "If you opt in, you may be contacted about relevant studies. We will not share your contact or identity with a sponsor unless you explicitly accept a specific invitation." }), _jsxs("div", { className: "wq-legal-consent-info-box", children: [_jsx("p", { className: "wq-legal-consent-info-title", children: "What happens if I opt in?" }), _jsxs("ul", { className: "wq-legal-consent-info-list", children: [_jsx("li", { children: "You may receive emails/in-app messages about studies that match your profile." }), _jsx("li", { children: "If you click \"I'm interested\", we'll show you the details and ask for separate consent to share your contact or to pre-screen you \u2014 you control this per study." }), _jsx("li", { children: "You can opt out of invitations at any time." })] })] }), _jsxs("div", { className: "wq-legal-consent-checkbox-row", children: [renderCheckboxElement("study-consent", studyConsentAccepted, handleStudyConsentChange), _jsx("label", { htmlFor: "study-consent", className: "wq-legal-consent-label", children: "I consent to receive study invitations from Welshare. I can opt out anytime." })] })] })] }), _jsxs("div", { className: "wq-legal-consent-actions", children: [_jsx("button", { type: "button", className: "wq-button wq-button-outline", onClick: handleCancel, children: cancelButtonLabel }), _jsx("button", { type: "button", className: "wq-button wq-button-primary", onClick: handleConfirm, disabled: !termsAccepted, children: confirmButtonLabel })] })] }));
+};

package/dist/esm/index.d.ts

@@ -2,6 +2,8 @@ export { QuestionRenderer } from "./components/question-renderer.js";
 export type { QuestionRendererProps } from "./components/question-renderer.js";
 export { BmiForm } from "./components/bmi-form.js";
 export type { BmiFormProps } from "./components/bmi-form.js";
+export { LegalConsentForm } from "./components/legal-consent-form.js";
+export type { LegalConsentFormProps, LegalConsentResult, LegalCheckboxProps, LegalDocumentLinks, } from "./components/legal-consent-form.js";
 export { QuestionnaireProvider, useQuestionnaire, type QuestionnaireContextType, type QuestionnaireProviderProps, } from "./contexts/questionnaire-context.js";
 export type { Attachment, Coding, Extension, Questionnaire, QuestionnaireItem, QuestionnaireItemAnswerOption, QuestionnaireResponse, QuestionnaireResponseAnswer, QuestionnaireResponseItem, } from "./types/fhir.js";
 export type { RadioInputProps, CheckboxInputProps, InputHelperConfig, HelperTriggerProps, } from "./types/index.js";

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,GAChC,MAAM,qCAAqC,CAAC;AAG7C,YAAY,EACV,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,6BAA6B,EAC7B,qBAAqB,EACrB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,cAAc,EACd,gBAAgB,GACjB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,GAChC,MAAM,qCAAqC,CAAC;AAG7C,YAAY,EACV,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,6BAA6B,EAC7B,qBAAqB,EACrB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,cAAc,EACd,gBAAgB,GACjB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC"}

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 // Components
 export { QuestionRenderer } from "./components/question-renderer.js";
 export { BmiForm } from "./components/bmi-form.js";
+export { LegalConsentForm } from "./components/legal-consent-form.js";
 // Contexts
 export { QuestionnaireProvider, useQuestionnaire, } from "./contexts/questionnaire-context.js";
 // Utils

package/dist/styles.css

@@ -573,3 +573,156 @@
   margin: 0;
   line-height: 1.5;
 }
+
+/* === Legal Consent Form === */
+.wq-legal-consent-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-lg);
+}
+
+.wq-legal-consent-sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-xl, 1.5rem);
+}
+
+.wq-legal-consent-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-md);
+}
+
+.wq-legal-consent-heading {
+  font-size: var(--wq-font-size-base);
+  font-weight: var(--wq-font-weight-medium);
+  color: var(--wq-color-text-primary);
+  margin: 0;
+}
+
+.wq-legal-consent-subtitle {
+  font-size: var(--wq-font-size-sm);
+  font-weight: var(--wq-font-weight-medium);
+  color: var(--wq-color-text-primary);
+  margin: 0;
+}
+
+.wq-legal-consent-description {
+  font-size: var(--wq-font-size-sm);
+  color: var(--wq-color-text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.wq-legal-consent-checkbox-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--wq-space-md);
+}
+
+.wq-legal-checkbox {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.wq-legal-consent-label {
+  font-size: var(--wq-font-size-sm);
+  color: var(--wq-color-text-primary);
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.wq-legal-consent-link {
+  color: var(--wq-color-primary);
+  text-decoration: underline;
+  transition: text-decoration var(--wq-transition-fast);
+}
+
+.wq-legal-consent-link:hover {
+  text-decoration: none;
+}
+
+.wq-legal-consent-info-box {
+  padding: var(--wq-space-md);
+  background-color: var(--wq-color-background);
+  border-radius: var(--wq-radius-md);
+}
+
+.wq-legal-consent-info-title {
+  font-size: var(--wq-font-size-sm);
+  font-weight: var(--wq-font-weight-medium);
+  color: var(--wq-color-text-primary);
+  margin: 0 0 var(--wq-space-sm) 0;
+}
+
+.wq-legal-consent-info-list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-xs);
+}
+
+.wq-legal-consent-info-list li {
+  font-size: var(--wq-font-size-sm);
+  color: var(--wq-color-text-secondary);
+  line-height: 1.5;
+  padding-left: var(--wq-space-md);
+  position: relative;
+}
+
+.wq-legal-consent-info-list li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+}
+
+.wq-legal-consent-actions {
+  display: flex;
+  gap: var(--wq-space-md);
+  padding-top: var(--wq-space-md);
+}
+
+/* === Buttons === */
+.wq-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--wq-input-padding-y) var(--wq-input-padding-x);
+  border-radius: var(--wq-radius-md);
+  font-size: var(--wq-font-size-base);
+  font-weight: var(--wq-font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--wq-transition-fast);
+  flex: 1;
+  min-height: var(--wq-input-height);
+}
+
+.wq-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.wq-button-primary {
+  background-color: var(--wq-color-primary);
+  color: white;
+  border: var(--wq-border-width) solid var(--wq-color-primary);
+}
+
+.wq-button-primary:hover:not(:disabled) {
+  background-color: var(--wq-color-primary-hover);
+  border-color: var(--wq-color-primary-hover);
+}
+
+.wq-button-outline {
+  background-color: transparent;
+  color: var(--wq-color-text-primary);
+  border: var(--wq-border-width) solid var(--wq-color-border);
+}
+
+.wq-button-outline:hover:not(:disabled) {
+  background-color: var(--wq-color-background);
+  border-color: var(--wq-color-border-hover);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welshare/questionnaire",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "FHIR Questionnaire components for React with state management and validation",
   "keywords": [
     "react",