diff --git a/example/package-lock.json b/example/package-lock.json
index e73c3bde7..2386c61c8 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -9,16 +9,27 @@
       "version": "0.0.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-radio-group": "^1.3.8",
+        "@radix-ui/react-select": "^2.2.6",
         "@remoteoss/remote-flows": "file://..",
         "axios": "^1.8.3",
+        "class-variance-authority": "^0.7.1",
+        "cmdk": "^1.1.1",
+        "date-fns": "^3.6.0",
         "dotenv": "^17.0.0",
         "express": "^4.21.2",
         "jsonwebtoken": "^9.0.2",
+        "lucide-react": "0.477.0",
         "react": "^18.3.1",
+        "react-day-picker": "^8.10.1",
         "react-dom": "^18.3.1",
         "react-flagpack": "^2.0.6",
         "react-syntax-highlighter": "^15.6.1",
-        "typescript": "^5.8.3"
+        "typescript": "^5.8.3",
+        "vaul": "^1.1.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -40,7 +51,6 @@
       "version": "1.18.0",
       "dependencies": {
         "@hookform/resolvers": "^4.1.3",
-        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -680,6 +690,44 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -757,6 +805,692 @@
         "node": ">=18"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@remoteoss/remote-flows": {
       "resolved": "..",
       "link": true
@@ -1273,7 +2007,7 @@
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1282,7 +2016,7 @@
       "version": "19.1.6",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
       "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -1397,6 +2131,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -1622,6 +2368,43 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1716,7 +2499,17 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
+    },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
     },
     "node_modules/debug": {
       "version": "4.4.1",
@@ -1766,6 +2559,12 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/dotenv": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.0.1.tgz",
@@ -2380,6 +3179,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -3142,6 +3950,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.477.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.477.0.tgz",
+      "integrity": "sha512-yCf7aYxerFZAbd8jHJxjwe1j7jEMPptjnaOqdYeirFnEy85cNR3/L+o0I875CYFYya+eEVzZSbNuRk8BZPDpVw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3652,6 +4469,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "8.10.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
+      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.28.0 || ^3.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -3691,6 +4522,75 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.6.1",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
@@ -4117,6 +5017,12 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4190,6 +5096,49 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -4206,6 +5155,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
diff --git a/example/package.json b/example/package.json
index 3a204d7cc..dad63e7cb 100644
--- a/example/package.json
+++ b/example/package.json
@@ -13,16 +13,27 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
     "@remoteoss/remote-flows": "file://..",
     "axios": "^1.8.3",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
     "dotenv": "^17.0.0",
     "express": "^4.21.2",
     "jsonwebtoken": "^9.0.2",
+    "lucide-react": "0.477.0",
     "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-flagpack": "^2.0.6",
     "react-syntax-highlighter": "^15.6.1",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
diff --git a/example/src/ContractorOnboarding.tsx b/example/src/ContractorOnboarding.tsx
index 410afb912..dcd978d35 100644
--- a/example/src/ContractorOnboarding.tsx
+++ b/example/src/ContractorOnboarding.tsx
@@ -32,6 +32,7 @@ import { AlertError } from './AlertError';
 import { ReviewContractorOnboardingStep } from './ReviewContractorOnboardingStep';
 import { PricingPlanCard } from './components/PricingPlanCard';
 import { EngagingContractorsModal } from './components/PricingPlanModals';
+import { defaultComponents } from './DefaultComponents';
 import './css/main.css';
 import './css/contractor-onboarding.css';
 
@@ -500,6 +501,8 @@ export const ContractorOnboardingWithProps = ({
   return (
     <div className='contractor-onboarding-container'>
       <RemoteFlows
+        components={defaultComponents}
+        makeComponentsRequired
         authType='company-manager'
         proxy={{ url: window.location.origin }}
       >
diff --git a/example/src/Components.tsx b/example/src/CostCalculatorComponents.tsx
similarity index 100%
rename from example/src/Components.tsx
rename to example/src/CostCalculatorComponents.tsx
diff --git a/example/src/CostCalculatorWithPremiumBenefits.tsx b/example/src/CostCalculatorWithPremiumBenefits.tsx
index ab4da181b..9f4d205b0 100644
--- a/example/src/CostCalculatorWithPremiumBenefits.tsx
+++ b/example/src/CostCalculatorWithPremiumBenefits.tsx
@@ -31,7 +31,7 @@ import {
 } from '@remoteoss/remote-flows/internals';
 import { ButtonHTMLAttributes, useState, isValidElement } from 'react';
 import { RemoteFlows } from './RemoteFlows';
-import { components } from './Components';
+import { components } from './CostCalculatorComponents';
 import { downloadFile } from './utils';
 import { AlertError } from './AlertError';
 import 'react-flagpack/dist/style.css';
diff --git a/example/src/CostCalculatorWithReplaceableComponents.tsx b/example/src/CostCalculatorWithReplaceableComponents.tsx
index c8c11eba1..5a563bb41 100644
--- a/example/src/CostCalculatorWithReplaceableComponents.tsx
+++ b/example/src/CostCalculatorWithReplaceableComponents.tsx
@@ -4,7 +4,7 @@ import {
   CostCalculatorSubmitButton,
   CostCalculatorResetButton,
 } from '@remoteoss/remote-flows';
-import { components } from './Components';
+import { components } from './CostCalculatorComponents';
 import { RemoteFlows } from './RemoteFlows';
 import './css/main.css';
 
diff --git a/example/src/DefaultComponents.tsx b/example/src/DefaultComponents.tsx
new file mode 100644
index 000000000..8b6c79d82
--- /dev/null
+++ b/example/src/DefaultComponents.tsx
@@ -0,0 +1,42 @@
+import { Components } from '@remoteoss/remote-flows';
+import { CountryFieldDefault } from './components/defaults/CountryFieldDefault';
+import { MultiSelectFieldDefault } from './components/defaults/MultiSelectFieldDefault';
+import { TextFieldDefault } from './components/defaults/TextFieldDefault';
+import { TextAreaFieldDefault } from './components/defaults/TextAreaFieldDefault';
+import { SelectFieldDefault } from './components/defaults/SelectFieldDefault';
+import { CheckboxFieldDefault } from './components/defaults/CheckboxFieldDefault';
+import { RadioGroupFieldDefault } from './components/defaults/RadioGroupFieldDefault';
+import { DatePickerFieldDefault } from './components/defaults/DatePickerFieldDefault';
+import { ButtonDefault } from './components/defaults/ButtonDefault';
+import { EmailFieldDefault } from './components/defaults/EmailFieldDefault';
+import { NumberFieldDefault } from './components/defaults/NumberFieldDefault';
+import { StatementDefault } from './components/defaults/StatementDefault';
+import { PDFPreviewDefault } from './components/defaults/PDFPreviewDefault';
+import { FileUploadFieldDefault } from './components/defaults/FileUploadFieldDefault';
+import { DrawerDefault } from './components/defaults/DrawerDefault';
+import { TableFieldDefault } from './components/defaults/TableFieldDefault';
+import { ZendeskDrawerDefault } from './components/defaults/ZendeskDrawerDefault';
+import { FieldsetToggleButtonDefault } from './components/defaults/FieldsetToggleButtonDefault';
+import { WorkScheduleFieldDefault } from './components/defaults/WorkScheduleFieldDefault';
+
+export const defaultComponents: Components = {
+  text: TextFieldDefault,
+  textarea: TextAreaFieldDefault,
+  select: SelectFieldDefault,
+  checkbox: CheckboxFieldDefault,
+  radio: RadioGroupFieldDefault,
+  date: DatePickerFieldDefault,
+  button: ButtonDefault,
+  email: EmailFieldDefault,
+  number: NumberFieldDefault,
+  statement: StatementDefault,
+  countries: CountryFieldDefault,
+  'multi-select': MultiSelectFieldDefault,
+  pdfViewer: PDFPreviewDefault,
+  file: FileUploadFieldDefault,
+  drawer: DrawerDefault,
+  table: TableFieldDefault,
+  zendeskDrawer: ZendeskDrawerDefault,
+  fieldsetToggle: FieldsetToggleButtonDefault,
+  'work-schedule': WorkScheduleFieldDefault,
+};
diff --git a/example/src/Onboarding.tsx b/example/src/Onboarding.tsx
index 8c7b3e96c..fe16bfec3 100644
--- a/example/src/Onboarding.tsx
+++ b/example/src/Onboarding.tsx
@@ -17,6 +17,7 @@ import { OnboardingAlertStatuses } from './OnboardingAlertStatuses';
 import { RemoteFlows } from './RemoteFlows';
 import { AlertError } from './AlertError';
 import './css/main.css';
+import { defaultComponents } from './DefaultComponents';
 
 export const InviteSection = ({
   title,
@@ -256,7 +257,7 @@ const OnboardingWithProps = ({
   employmentId,
   externalId,
 }: OnboardingFormData) => (
-  <RemoteFlows>
+  <RemoteFlows components={defaultComponents} makeComponentsRequired>
     <OnboardingFlow
       companyId={companyId}
       type={type}
diff --git a/example/src/Termination.tsx b/example/src/Termination.tsx
index 0365e2087..114bbd583 100644
--- a/example/src/Termination.tsx
+++ b/example/src/Termination.tsx
@@ -13,6 +13,7 @@ import { RemoteFlows } from './RemoteFlows';
 import { ZendeskTriggerButton } from '@remoteoss/remote-flows';
 import { OffboardingRequestModal } from './OffboardingRequestModal';
 import { TerminationSuccessful } from './TerminationSuccesful';
+import { defaultComponents } from './DefaultComponents';
 import './css/main.css';
 
 const STEPS = [
@@ -191,7 +192,12 @@ export const TerminationWithProps = ({
 }) => {
   const proxyURL = window.location.origin;
   return (
-    <RemoteFlows proxy={{ url: proxyURL }} authType='company-manager'>
+    <RemoteFlows
+      components={defaultComponents}
+      makeComponentsRequired
+      proxy={{ url: proxyURL }}
+      authType='company-manager'
+    >
       <TerminationFlow
         employmentId={employmentId}
         render={TerminationRender}
diff --git a/example/src/components/defaults/ButtonDefault.tsx b/example/src/components/defaults/ButtonDefault.tsx
new file mode 100644
index 000000000..b6a8b6d0d
--- /dev/null
+++ b/example/src/components/defaults/ButtonDefault.tsx
@@ -0,0 +1,12 @@
+import { Button } from '../ui/button';
+import { ButtonComponentProps } from '@remoteoss/remote-flows';
+
+export const ButtonDefault = (props: ButtonComponentProps) => {
+  const { 'data-type': dataType, ...buttonProps } = props;
+
+  if (dataType === 'inline') {
+    return <Button size='link' variant='link' {...buttonProps} />;
+  }
+
+  return <Button {...buttonProps} />;
+};
diff --git a/example/src/components/defaults/CheckboxFieldDefault.tsx b/example/src/components/defaults/CheckboxFieldDefault.tsx
new file mode 100644
index 000000000..ecf7755a6
--- /dev/null
+++ b/example/src/components/defaults/CheckboxFieldDefault.tsx
@@ -0,0 +1,71 @@
+import { Checkbox } from '../ui/checkbox';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { FieldComponentProps } from '@remoteoss/remote-flows';
+
+export const CheckboxFieldDefault = ({
+  field,
+  fieldState,
+  fieldData,
+}: FieldComponentProps) => {
+  const { name, label, description, options, multiple } = fieldData;
+
+  return (
+    <FormItem
+      data-field={name}
+      className={cn(`RemoteFlows__CheckBoxField__Item__${name}`)}
+    >
+      <FormControl>
+        <>
+          {options && multiple ? <FormLabel>{label}</FormLabel> : null}
+
+          {options && multiple ? (
+            options.map((option) => (
+              <div key={option.value} className='flex space-x-2'>
+                <Checkbox
+                  id={option.value}
+                  onCheckedChange={(checked: boolean | 'indeterminate') => {
+                    field.onChange(checked === true, option.value);
+                  }}
+                  checked={field.value?.includes(option.value)}
+                  className='RemoteFlows__CheckBox__Input'
+                />
+                <FormLabel
+                  htmlFor={option.value}
+                  className='mb-0 RemoteFlows__CheckBox__Label'
+                >
+                  {option.label}
+                </FormLabel>
+              </div>
+            ))
+          ) : (
+            <div className='flex space-x-2'>
+              <Checkbox
+                id={name}
+                onCheckedChange={(checked: boolean | 'indeterminate') => {
+                  field.onChange(checked === true, null);
+                }}
+                checked={field.value}
+                className='RemoteFlows__CheckBox__Input'
+              />
+              <FormLabel
+                htmlFor={name}
+                className='mb-0 RemoteFlows__CheckBox__Label'
+              >
+                {label}
+              </FormLabel>
+            </div>
+          )}
+        </>
+      </FormControl>
+      {description && <FormDescription>{description}</FormDescription>}
+      {fieldState.error && <FormMessage />}
+    </FormItem>
+  );
+};
diff --git a/example/src/components/defaults/CountryFieldDefault.tsx b/example/src/components/defaults/CountryFieldDefault.tsx
new file mode 100644
index 000000000..f4b1caeec
--- /dev/null
+++ b/example/src/components/defaults/CountryFieldDefault.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { MultiSelect, type Option } from '../ui/multi-select';
+import { CountryComponentProps } from '@remoteoss/remote-flows';
+
+export function CountryFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: CountryComponentProps) {
+  const [selected, setSelected] = useState<Option[]>([]);
+
+  useEffect(() => {
+    if (field.value && fieldData.options) {
+      setSelected(
+        field.value.map(
+          (value: string) =>
+            fieldData?.options?.find(
+              (option) => option.value === value,
+            ) as Option,
+        ),
+      );
+    }
+  }, [field.value, fieldData.options]);
+
+  const handleChange = (rawValues: Option[]) => {
+    const values = rawValues.map(({ value }) => value);
+    field.onChange(values);
+    setSelected(rawValues);
+  };
+
+  const countryOptions = [
+    ...Object.entries(fieldData.$meta?.regions || {}).map(([key, value]) => ({
+      value,
+      label: key,
+      category: 'Regions',
+    })),
+    ...Object.entries(fieldData.$meta?.subregions || {}).map(
+      ([key, value]) => ({
+        value,
+        label: key,
+        category: 'Subregions',
+      }),
+    ),
+    ...(fieldData.options?.map((option) => ({
+      ...option,
+      value: option.value,
+      label: option.label,
+      category: 'Countries',
+    })) || []),
+  ];
+
+  return (
+    <FormItem
+      data-field={field.name}
+      className={`RemoteFlows__CountryField__Item__${field.name}`}
+    >
+      <FormLabel className='RemoteFlows__CountryField__Label'>
+        {fieldData.label}
+      </FormLabel>
+      <FormControl>
+        <MultiSelect
+          options={countryOptions}
+          selected={selected}
+          onChange={handleChange}
+        />
+      </FormControl>
+      {fieldData.description && (
+        <FormDescription>{fieldData.description}</FormDescription>
+      )}
+      {fieldState.error && <FormMessage />}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/DatePickerFieldDefault.tsx b/example/src/components/defaults/DatePickerFieldDefault.tsx
new file mode 100644
index 000000000..bac14d86e
--- /dev/null
+++ b/example/src/components/defaults/DatePickerFieldDefault.tsx
@@ -0,0 +1,91 @@
+import { Button } from '../ui/button';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { DatePickerComponentProps, HelpCenter } from '@remoteoss/remote-flows';
+import { CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { Calendar } from '../ui/calendar';
+
+export function DatePickerFieldDefault({
+  field,
+  fieldData,
+  fieldState,
+}: DatePickerComponentProps) {
+  const { name, label, description, minDate, maxDate } = fieldData;
+  const minDateValue = minDate ? new Date(minDate) : undefined;
+  const maxDateValue = maxDate ? new Date(maxDate) : undefined;
+  return (
+    <FormItem
+      data-field={name}
+      className={`flex flex-col RemoteFlows__DatePickerField__Item__${name}`}
+    >
+      <FormLabel className='RemoteFlows__DatePickerField__Label'>
+        {label}
+      </FormLabel>
+      <Popover>
+        <PopoverTrigger asChild>
+          <FormControl>
+            <div>
+              <Button
+                type='button'
+                variant={'outline'}
+                className={cn(
+                  'w-full pl-3 text-left font-normal',
+                  !field.value && 'text-muted-foreground',
+                )}
+                data-testid={`date-picker-button-${name}`}
+              >
+                {field.value && <>{format(field.value, 'yyyy-MM-dd')}</>}
+                <CalendarIcon className='ml-auto h-4 w-4 opacity-50' />
+              </Button>
+            </div>
+          </FormControl>
+        </PopoverTrigger>
+        <PopoverContent
+          className={`w-auto p-0 RemoteFlows__DatepickerField__PopoverContent`}
+          align='start'
+        >
+          <Calendar
+            mode='single'
+            className='RemoteFlows__DatepickerField__Calendar'
+            selected={field.value ? new Date(field.value) : undefined}
+            onSelect={(date) => {
+              field.onChange(date ? format(date, 'yyyy-MM-dd') : null);
+            }}
+            defaultMonth={minDateValue}
+            components={{
+              DayContent: (props) => {
+                return <PopoverClose>{props.date.getDate()}</PopoverClose>;
+              },
+            }}
+            disabled={(date: Date) => {
+              if (minDateValue && date < minDateValue) return true;
+              if (maxDateValue && date > maxDateValue) return true;
+              return false;
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+      {description ? (
+        <FormDescription>
+          {description} <HelpCenter helpCenter={fieldData.meta?.helpCenter} />
+        </FormDescription>
+      ) : null}
+      {fieldState.error && (
+        <FormMessage className='RemoteFlows__DatePickerField__Error' />
+      )}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/DrawerDefault.tsx b/example/src/components/defaults/DrawerDefault.tsx
new file mode 100644
index 000000000..bd11dd400
--- /dev/null
+++ b/example/src/components/defaults/DrawerDefault.tsx
@@ -0,0 +1,38 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '../ui/drawer';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { DrawerComponentProps } from '@remoteoss/remote-flows';
+
+export function DrawerDefault({
+  open,
+  onOpenChange,
+  direction,
+  className,
+  title,
+  trigger,
+  children,
+}: DrawerComponentProps) {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} direction={direction}>
+      <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+      <DrawerContent
+        className={cn(
+          'RemoteFlows__Drawer h-full w-[540px] mt-0 ml-auto px-4',
+          className,
+        )}
+      >
+        <div className='h-full flex flex-col'>
+          <DrawerHeader>
+            <DrawerTitle>{title}</DrawerTitle>
+          </DrawerHeader>
+          <div className='flex-1 overflow-y-auto'>{children}</div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/example/src/components/defaults/EmailFieldDefault.tsx b/example/src/components/defaults/EmailFieldDefault.tsx
new file mode 100644
index 000000000..10953884f
--- /dev/null
+++ b/example/src/components/defaults/EmailFieldDefault.tsx
@@ -0,0 +1,44 @@
+import { FormDescription, FormMessage } from '../ui/form';
+import { FormControl, FormItem, FormLabel } from '../ui/form';
+import { Input } from '../ui/input';
+import { TextFieldComponentProps } from '@remoteoss/remote-flows';
+
+export function EmailFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: TextFieldComponentProps) {
+  const { name, label, description, maxLength, includeErrorMessage } =
+    fieldData;
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__TextField__Item__${name}`}
+    >
+      {label && (
+        <FormLabel className='RemoteFlows__TextField__Label'>{label}</FormLabel>
+      )}
+      <FormControl>
+        <Input
+          {...field}
+          type='email'
+          value={field.value ?? ''}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            field.onChange(event);
+          }}
+          className='RemoteFlows__TextField__Input'
+          placeholder={label}
+          maxLength={maxLength}
+        />
+      </FormControl>
+      {description && (
+        <FormDescription className='RemoteFlows__TextField__Description'>
+          {description}
+        </FormDescription>
+      )}
+      {includeErrorMessage && fieldState.error && (
+        <FormMessage className='RemoteFlows__TextField__Error' />
+      )}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/FieldsetToggleButtonDefault.tsx b/example/src/components/defaults/FieldsetToggleButtonDefault.tsx
new file mode 100644
index 000000000..8dc109773
--- /dev/null
+++ b/example/src/components/defaults/FieldsetToggleButtonDefault.tsx
@@ -0,0 +1,25 @@
+import { Button } from '../ui/button';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { FieldSetToggleComponentProps } from '@remoteoss/remote-flows';
+
+export const FieldsetToggleButtonDefault = ({
+  isExpanded,
+  onToggle,
+  className,
+  ...props
+}: FieldSetToggleComponentProps) => {
+  return (
+    <Button
+      type='button'
+      className={cn(
+        'RemoteFlows__Button RemoteFlows__FieldSetField__ToggleButton',
+        className,
+      )}
+      variant='default'
+      onClick={onToggle}
+      {...props}
+    >
+      {isExpanded ? 'Remove' : 'Define'}
+    </Button>
+  );
+};
diff --git a/example/src/components/defaults/FileUploadFieldDefault.tsx b/example/src/components/defaults/FileUploadFieldDefault.tsx
new file mode 100644
index 000000000..24d7a3892
--- /dev/null
+++ b/example/src/components/defaults/FileUploadFieldDefault.tsx
@@ -0,0 +1,42 @@
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { FileUploader } from '@remoteoss/remote-flows/internals';
+import { FileComponentProps } from '@remoteoss/remote-flows';
+
+export function FileUploadFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: FileComponentProps) {
+  const { name, label, description, multiple, accept } = fieldData;
+
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__FileUpload__Item__${name}`}
+    >
+      <FormLabel className='RemoteFlows__FileUpload__Label'>{label}</FormLabel>
+      <FormControl>
+        <FileUploader
+          onChange={field.onChange}
+          multiple={multiple}
+          accept={accept}
+          files={field.value}
+        />
+      </FormControl>
+      {description && (
+        <FormDescription className='RemoteFlows__FileUpload__Description'>
+          {description}
+        </FormDescription>
+      )}
+      {fieldState.error && (
+        <FormMessage className='RemoteFlows__FileUpload__Error' />
+      )}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/MultiSelectFieldDefault.tsx b/example/src/components/defaults/MultiSelectFieldDefault.tsx
new file mode 100644
index 000000000..a38d06040
--- /dev/null
+++ b/example/src/components/defaults/MultiSelectFieldDefault.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { MultiSelect, type Option } from '../ui/multi-select';
+import { FieldComponentProps } from '@remoteoss/remote-flows';
+
+export function MultiSelectFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: FieldComponentProps) {
+  const [selected, setSelected] = useState<Option[]>([]);
+
+  useEffect(() => {
+    setSelected(
+      fieldData.options?.filter((option) =>
+        field.value?.includes(option.value),
+      ) || [],
+    );
+  }, [field.value, fieldData.options]);
+
+  const { name, label, description, options } = fieldData;
+  const selectedOptions =
+    selected ||
+    options?.filter((option) => field.value?.includes(option.value));
+
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__SelectField__Item__${name}`}
+    >
+      <FormLabel className='RemoteFlows__SelectField__Label'>{label}</FormLabel>
+      <FormControl>
+        <MultiSelect
+          options={options || []}
+          selected={selectedOptions}
+          onChange={(rawValues: Option[]) => {
+            const values = rawValues.map(({ value }) => value);
+            field.onChange(values);
+            setSelected(rawValues);
+          }}
+        />
+      </FormControl>
+      {description && <FormDescription>{description}</FormDescription>}
+      {fieldState.error && <FormMessage />}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/NumberFieldDefault.tsx b/example/src/components/defaults/NumberFieldDefault.tsx
new file mode 100644
index 000000000..0bb9427c8
--- /dev/null
+++ b/example/src/components/defaults/NumberFieldDefault.tsx
@@ -0,0 +1,46 @@
+import { FormDescription, FormMessage } from '../ui/form';
+import { FormControl, FormItem, FormLabel } from '../ui/form';
+import { Input } from '../ui/input';
+import { TextFieldComponentProps } from '@remoteoss/remote-flows';
+
+export function NumberFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: TextFieldComponentProps) {
+  const { name, label, description, maxLength, includeErrorMessage } =
+    fieldData;
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__TextField__Item__${name}`}
+    >
+      {label && (
+        <FormLabel className='RemoteFlows__TextField__Label'>{label}</FormLabel>
+      )}
+      <FormControl>
+        <Input
+          {...field}
+          type='text'
+          inputMode='decimal'
+          pattern='^[0-9.]*$'
+          value={field.value ?? ''}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            field.onChange(event);
+          }}
+          className='RemoteFlows__TextField__Input'
+          placeholder={label}
+          maxLength={maxLength}
+        />
+      </FormControl>
+      {description && (
+        <FormDescription className='RemoteFlows__TextField__Description'>
+          {description}
+        </FormDescription>
+      )}
+      {includeErrorMessage && fieldState.error && (
+        <FormMessage className='RemoteFlows__TextField__Error' />
+      )}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/PDFPreviewDefault.tsx b/example/src/components/defaults/PDFPreviewDefault.tsx
new file mode 100644
index 000000000..59167501c
--- /dev/null
+++ b/example/src/components/defaults/PDFPreviewDefault.tsx
@@ -0,0 +1,34 @@
+import { PDFPreviewComponentProps } from '@remoteoss/remote-flows';
+
+export function PDFPreviewDefault({
+  base64Data,
+  fileName = 'document.pdf',
+}: PDFPreviewComponentProps) {
+  if (!base64Data) {
+    return (
+      <div className='w-full border rounded p-8 text-center bg-gray-50'>
+        <p className='text-gray-500'>No PDF data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className='w-full space-y-4'>
+      <iframe
+        src={base64Data}
+        className='w-full h-[600px] border rounded'
+        title={fileName}
+      />
+      <div className='flex justify-between items-center text-sm'>
+        <p className='text-gray-600'>{fileName}</p>
+        <a
+          href={base64Data}
+          download={fileName}
+          className='text-blue-600 hover:underline'
+        >
+          Download PDF
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/example/src/components/defaults/RadioGroupFieldDefault.tsx b/example/src/components/defaults/RadioGroupFieldDefault.tsx
new file mode 100644
index 000000000..c98bbc784
--- /dev/null
+++ b/example/src/components/defaults/RadioGroupFieldDefault.tsx
@@ -0,0 +1,74 @@
+import { Fragment } from 'react';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { FieldComponentProps, HelpCenter } from '@remoteoss/remote-flows';
+
+export const RadioGroupFieldDefault = ({
+  field,
+  fieldData,
+  fieldState,
+}: FieldComponentProps) => {
+  const { name, label, description, options } = fieldData;
+  return (
+    <fieldset
+      className={cn('space-y-3', `RemoteFlows__RadioGroupField__Item__${name}`)}
+      data-field={name}
+    >
+      <FormItem>
+        <legend>{label}</legend>
+        {description && (
+          <FormDescription
+            helpCenter={<HelpCenter helpCenter={fieldData.meta?.helpCenter} />}
+          >
+            {description}
+          </FormDescription>
+        )}
+        <FormControl>
+          <RadioGroup
+            aria-label={label || name}
+            onValueChange={(value: string) => {
+              field.onChange(value);
+            }}
+            value={field.value}
+            className='flex flex-col space-y-3'
+          >
+            {options?.map((option) => (
+              <Fragment key={option.value}>
+                <FormItem
+                  data-field={name}
+                  className='flex items-start space-x-3 space-y-0 gap-0 RemoteFlows__RadioField__Item'
+                >
+                  <FormControl>
+                    <RadioGroupItem
+                      value={option.value}
+                      className='RemoteFlows__RadioField__Input'
+                      disabled={option.disabled}
+                    />
+                  </FormControl>
+                  <div>
+                    <FormLabel className='font-normal mb-0 RemoteFlows__RadioField__Label'>
+                      {option.label}
+                    </FormLabel>
+                    {option.description && (
+                      <FormDescription className='mt-2'>
+                        {option.description}
+                      </FormDescription>
+                    )}
+                  </div>
+                </FormItem>
+              </Fragment>
+            ))}
+          </RadioGroup>
+        </FormControl>
+        {fieldState.error && <FormMessage />}
+      </FormItem>
+    </fieldset>
+  );
+};
diff --git a/example/src/components/defaults/SelectFieldDefault.tsx b/example/src/components/defaults/SelectFieldDefault.tsx
new file mode 100644
index 000000000..5fa7810cf
--- /dev/null
+++ b/example/src/components/defaults/SelectFieldDefault.tsx
@@ -0,0 +1,69 @@
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { FieldComponentProps } from '@remoteoss/remote-flows';
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from '../ui/select';
+
+export function SelectFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: FieldComponentProps) {
+  const { name, label, description, options } = fieldData;
+
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__SelectField__Item__${name}`}
+    >
+      <FormLabel className='RemoteFlows__SelectField__Label'>{label}</FormLabel>
+      <FormControl>
+        <div className='relative'>
+          <Select
+            value={field.value || ''}
+            onValueChange={(value: string) => {
+              field.onChange(value);
+            }}
+          >
+            <SelectTrigger
+              className='RemoteFlows__SelectField__Trigger'
+              aria-invalid={Boolean(fieldState.error)}
+              aria-label={label}
+            >
+              <span className='absolute'>
+                <SelectValue placeholder={label} />
+              </span>
+            </SelectTrigger>
+            <SelectContent className='RemoteFlows__SelectField__Content'>
+              <SelectGroup className='RemoteFlows__SelectField__Group'>
+                {options?.map((option) => (
+                  <SelectItem
+                    key={option.value}
+                    value={option.value}
+                    className='RemoteFlows__SelectField__SelectItem'
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      </FormControl>
+      {description && <FormDescription>{description}</FormDescription>}
+      {fieldState.error && <FormMessage />}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/StatementDefault.tsx b/example/src/components/defaults/StatementDefault.tsx
new file mode 100644
index 000000000..fb2e85117
--- /dev/null
+++ b/example/src/components/defaults/StatementDefault.tsx
@@ -0,0 +1,35 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@remoteoss/remote-flows/internals';
+import { StatementComponentProps } from '@remoteoss/remote-flows';
+import { AlertCircle } from 'lucide-react';
+
+export function StatementDefault({ data }: StatementComponentProps) {
+  const { title, description, severity } = data;
+
+  const mapSeverityToVariant: Record<
+    string,
+    'warning' | 'destructive' | 'default'
+  > = {
+    warning: 'warning',
+    error: 'destructive',
+    info: 'default',
+    success: 'warning',
+  };
+
+  const variant =
+    mapSeverityToVariant[severity as keyof typeof mapSeverityToVariant] ??
+    'warning';
+
+  return (
+    <Alert variant={variant}>
+      <AlertCircle className='h-4 w-4' />
+      {title && <AlertTitle dangerouslySetInnerHTML={{ __html: title }} />}
+      {description && (
+        <AlertDescription dangerouslySetInnerHTML={{ __html: description }} />
+      )}
+    </Alert>
+  );
+}
diff --git a/example/src/components/defaults/TableFieldDefault.tsx b/example/src/components/defaults/TableFieldDefault.tsx
new file mode 100644
index 000000000..7b1deac44
--- /dev/null
+++ b/example/src/components/defaults/TableFieldDefault.tsx
@@ -0,0 +1,58 @@
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+} from '../ui/table';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { TableComponentProps } from '@remoteoss/remote-flows';
+
+export const TableFieldDefault = ({
+  data,
+  columns,
+  className,
+  ref,
+}: TableComponentProps) => {
+  return (
+    <Table ref={ref} className={cn('RemoteFlows__Table', className)}>
+      <TableHeader>
+        <TableRow>
+          {columns.map((column) => (
+            <TableHead
+              key={String(column.id)}
+              className={cn('RemoteFlows__TableHead', column.className)}
+            >
+              {column.label}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data?.map((row, rowIndex) => (
+          <TableRow key={String(row.id ?? rowIndex)}>
+            {columns.map((column) => (
+              <TableCell
+                key={String(column.id)}
+                className={cn(
+                  'RemoteFlows__TableCell',
+                  column.className,
+                  column.cellClassName,
+                )}
+              >
+                {column.render
+                  ? column.render(
+                      row[column.id as keyof typeof row],
+                      row,
+                      rowIndex,
+                    )
+                  : row[column.id as keyof typeof row]}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/example/src/components/defaults/TextAreaFieldDefault.tsx b/example/src/components/defaults/TextAreaFieldDefault.tsx
new file mode 100644
index 000000000..9a8924530
--- /dev/null
+++ b/example/src/components/defaults/TextAreaFieldDefault.tsx
@@ -0,0 +1,58 @@
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { Textarea } from '../ui/textarea';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { FieldComponentProps } from '@remoteoss/remote-flows';
+
+export function TextAreaFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: FieldComponentProps) {
+  const { name, label, description, maxLength } = fieldData;
+  const valueLength = field.value?.length ?? 0;
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__TextArea__Item__${name}`}
+    >
+      <FormLabel className='RemoteFlows__TextArea__Label'>{label}</FormLabel>
+      <FormControl>
+        <Textarea
+          {...field}
+          value={field.value ?? ''}
+          onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+            field.onChange(event);
+          }}
+          className={cn(
+            fieldState.error && 'border-red-500 focus-visible:ring-red-500',
+            'RemoteFlows__TextArea__Input',
+          )}
+          placeholder={label}
+        />
+      </FormControl>
+      {(description || maxLength) && (
+        <div className='flex items-center justify-between'>
+          {description && (
+            <FormDescription className='RemoteFlows__TextArea__Description'>
+              {description}
+            </FormDescription>
+          )}
+          {maxLength && (
+            <span className='text-sm ml-auto RemoteFlows__TextArea__MaxLength'>
+              {valueLength}/{maxLength}
+            </span>
+          )}
+        </div>
+      )}
+      {fieldState.error && (
+        <FormMessage className='RemoteFlows__TextArea__Error' />
+      )}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/TextFieldDefault.tsx b/example/src/components/defaults/TextFieldDefault.tsx
new file mode 100644
index 000000000..9c0784b58
--- /dev/null
+++ b/example/src/components/defaults/TextFieldDefault.tsx
@@ -0,0 +1,43 @@
+import { FormDescription, FormMessage } from '../ui/form';
+import { FormControl, FormItem, FormLabel } from '../ui/form';
+import { Input } from '../ui/input';
+import { TextFieldComponentProps } from '@remoteoss/remote-flows';
+
+export function TextFieldDefault({
+  field,
+  fieldState,
+  fieldData,
+}: TextFieldComponentProps) {
+  const { name, label, description, maxLength, includeErrorMessage } =
+    fieldData;
+  return (
+    <FormItem
+      data-field={name}
+      className={`RemoteFlows__TextField__Item__${name}`}
+    >
+      {label && (
+        <FormLabel className='RemoteFlows__TextField__Label'>{label}</FormLabel>
+      )}
+      <FormControl>
+        <Input
+          {...field}
+          value={field.value ?? ''}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            field.onChange(event);
+          }}
+          className='RemoteFlows__TextField__Input'
+          placeholder={label}
+          maxLength={maxLength}
+        />
+      </FormControl>
+      {description && (
+        <FormDescription className='RemoteFlows__TextField__Description'>
+          {description}
+        </FormDescription>
+      )}
+      {includeErrorMessage && fieldState.error && (
+        <FormMessage className='RemoteFlows__TextField__Error' />
+      )}
+    </FormItem>
+  );
+}
diff --git a/example/src/components/defaults/WorkScheduleFieldDefault.tsx b/example/src/components/defaults/WorkScheduleFieldDefault.tsx
new file mode 100644
index 000000000..d057916be
--- /dev/null
+++ b/example/src/components/defaults/WorkScheduleFieldDefault.tsx
@@ -0,0 +1,228 @@
+import { Fragment, useState } from 'react';
+import { useFieldArray, useForm, Controller } from 'react-hook-form';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Checkbox } from '../ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog';
+import {
+  calculateHours,
+  DailySchedule,
+  DAYS_OF_THE_WEEK,
+  getShortWeekday,
+  WorkScheduleComponentProps,
+} from '@remoteoss/remote-flows';
+
+type WorkScheduleFormData = {
+  schedule: DailySchedule[];
+};
+
+type WorkScheduleSelectionProps = {
+  defaultSchedule: DailySchedule[];
+  onSubmit: (data: DailySchedule[]) => void;
+};
+
+function WorkScheduleSelectionForm({
+  defaultSchedule,
+  onSubmit,
+}: WorkScheduleSelectionProps) {
+  const [openDialog, setOpenDialog] = useState(false);
+
+  const transformedSchedule = DAYS_OF_THE_WEEK.map((day) => {
+    const existingSchedule = defaultSchedule.find(
+      (schedule) =>
+        schedule.day.toLowerCase() === getShortWeekday(day).toLowerCase() ||
+        schedule.day.toLowerCase() === day.toLowerCase(),
+    );
+
+    if (existingSchedule) {
+      return { ...existingSchedule, day: getShortWeekday(day), checked: true };
+    }
+
+    return {
+      ...defaultSchedule[0],
+      checked: false,
+      day: getShortWeekday(day),
+    };
+  });
+
+  const { handleSubmit, watch, reset, control, register, formState } =
+    useForm<WorkScheduleFormData>({
+      defaultValues: { schedule: transformedSchedule },
+    });
+
+  const { fields } = useFieldArray({ name: 'schedule', control });
+  const watchedSchedule = watch('schedule');
+
+  function handleSubmitWorkingHours(data: WorkScheduleFormData) {
+    const schedule = data.schedule
+      .filter(({ checked }) => checked)
+      .map((day) => ({ ...day, hours: calculateHours(day) }));
+
+    onSubmit(schedule);
+    setOpenDialog(false);
+  }
+
+  function handleCancel() {
+    reset();
+    setOpenDialog(false);
+  }
+
+  return (
+    <div className='flex items-center justify-between'>
+      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+        <DialogTrigger asChild>
+          <Button
+            variant='link'
+            className='flex items-center p-0 RemoteFlows__WorkScheduleSelectionForm__Trigger'
+          >
+            Edit Schedule
+          </Button>
+        </DialogTrigger>
+        <DialogContent className='max-w-5xl max-h-[90vh] overflow-y-auto px-8 py-4 RemoteFlows__WorkScheduleSelectionForm__Content'>
+          <DialogHeader>
+            <DialogTitle className='RemoteFlows__WorkScheduleSelectionForm__Title'>
+              Edit employee working hours
+            </DialogTitle>
+          </DialogHeader>
+
+          <form className='space-y-4 RemoteFlows__WorkScheduleSelectionForm__Form'>
+            <div className='rounded-lg'>
+              <p className='text-gray-600 text-sm mb-4 RemoteFlows__WorkScheduleSelectionForm__Description'>
+                The times displayed are in the employee's time zone in the
+                24-hour format.
+              </p>
+
+              <div className='grid grid-cols-12 gap-4 text-sm font-medium text-gray-500 uppercase tracking-wide RemoteFlows__WorkScheduleSelectionForm__Header'>
+                <div className='col-span-2'></div>
+                <div className='col-span-3 text-center'>START</div>
+                <div className='col-span-1 text-center'></div>
+                <div className='col-span-3 text-center'>END</div>
+                <div className='col-span-2 text-center'>HOURS</div>
+              </div>
+
+              <div className='RemoteFlows__WorkScheduleSelectionForm__Rows'>
+                {fields.map((field, index) => {
+                  const currentDay = watchedSchedule[index];
+                  const calculatedHours = calculateHours(currentDay);
+
+                  return (
+                    <Fragment key={field.id}>
+                      <div className='grid grid-cols-12 gap-4 items-center py-2 RemoteFlows__WorkScheduleSelectionForm__Row-Hours'>
+                        <div className='col-span-2 flex items-center gap-3'>
+                          <Controller
+                            control={control}
+                            name={`schedule.${index}.checked`}
+                            render={({ field: checkboxField }) => (
+                              <div className='flex items-center gap-2'>
+                                <Checkbox
+                                  id={`schedule-${index}-checked`}
+                                  checked={checkboxField.value}
+                                  onCheckedChange={checkboxField.onChange}
+                                />
+                                <label
+                                  htmlFor={`schedule-${index}-checked`}
+                                  className='text-sm'
+                                >
+                                  {field.day}
+                                </label>
+                              </div>
+                            )}
+                          />
+                        </div>
+                        <div className='col-span-3'>
+                          <Input
+                            {...register(`schedule.${index}.start_time`)}
+                          />
+                        </div>
+                        <div className='col-span-1 text-center text-gray-500'>
+                          to
+                        </div>
+                        <div className='col-span-3'>
+                          <Input {...register(`schedule.${index}.end_time`)} />
+                        </div>
+                        <div className='col-span-2 text-center text-gray-600'>
+                          {isNaN(calculatedHours)
+                            ? '-'
+                            : `${calculatedHours} hours`}
+                        </div>
+                      </div>
+
+                      <div className='grid grid-cols-12 gap-4 items-center py-2 RemoteFlows__WorkScheduleSelectionForm__Row-Break'>
+                        <div className='col-span-2 text-gray-500'>Break</div>
+                        <div className='col-span-2'>
+                          <Input
+                            {...register(
+                              `schedule.${index}.break_duration_minutes`,
+                            )}
+                          />
+                        </div>
+                        <div className='col-span-2 text-gray-500'>minutes</div>
+                        <div className='col-span-4'></div>
+                      </div>
+                    </Fragment>
+                  );
+                })}
+              </div>
+            </div>
+
+            {Object.keys(formState.errors).length > 0 && (
+              <p className='text-destructive text-sm mb-0'>
+                Invalid time format (HH:mm)
+              </p>
+            )}
+
+            <div className='flex gap-4 pt-4'>
+              <Button type='button' variant='outline' onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button
+                type='button'
+                onClick={handleSubmit(handleSubmitWorkingHours)}
+              >
+                Save Schedule
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export const WorkScheduleFieldDefault = ({
+  fieldData,
+}: WorkScheduleComponentProps) => {
+  const { defaultFormattedValue, currentSchedule, onSubmit } = fieldData;
+  const { workHoursSummary, breakSummary, totalWorkHours } =
+    defaultFormattedValue;
+
+  return (
+    <div className='flex flex-col gap-3 RemoteFlows__WorkScheduleField'>
+      <p className='text-sm RemoteFlows__WorkScheduleField__Title'>
+        Work hours
+      </p>
+      <div className='flex flex-col gap-1 RemoteFlows__WorkScheduleField__Summary'>
+        <p
+          className='text-sm text-gray-500 RemoteFlows__WorkScheduleField__Summary__WorkHours'
+          dangerouslySetInnerHTML={{ __html: workHoursSummary.join(', ') }}
+        />
+        <p className='text-sm text-gray-500 RemoteFlows__WorkScheduleField__Summary__Break'>
+          {breakSummary.join()}
+        </p>
+        <p className='text-sm text-gray-500 RemoteFlows__WorkScheduleField__Summary__Total'>
+          Total of <span>{totalWorkHours}</span> hours per week
+        </p>
+        <WorkScheduleSelectionForm
+          defaultSchedule={currentSchedule}
+          onSubmit={onSubmit}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/example/src/components/defaults/ZendeskDrawerDefault.tsx b/example/src/components/defaults/ZendeskDrawerDefault.tsx
new file mode 100644
index 000000000..11c615c93
--- /dev/null
+++ b/example/src/components/defaults/ZendeskDrawerDefault.tsx
@@ -0,0 +1,54 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '../ui/drawer';
+import { ZendeskDrawerComponentProps } from '@remoteoss/remote-flows';
+
+export function ZendeskDrawerDefault({
+  open,
+  onClose,
+  data,
+  isLoading,
+  error,
+  zendeskURL,
+  Trigger,
+}: ZendeskDrawerComponentProps) {
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={(open) => !open && onClose()}
+      direction='right'
+    >
+      <DrawerTrigger asChild>{Trigger}</DrawerTrigger>
+      <DrawerContent className='h-full w-[540px] mt-0 ml-auto RemoteFlows_ZendeskDrawer'>
+        <div className='h-full flex flex-col'>
+          <DrawerHeader>
+            <DrawerTitle>{data?.title}</DrawerTitle>
+            <DrawerDescription>
+              For more details see our{' '}
+              <a href={zendeskURL} target='_blank' rel='noopener noreferrer'>
+                help article
+              </a>{' '}
+            </DrawerDescription>
+          </DrawerHeader>
+          {isLoading && <div>Loading...</div>}
+          {error && (
+            <div className='text-sm p-4 text-red-500'>
+              Error loading article
+            </div>
+          )}
+          <div
+            className='flex-1 overflow-y-auto p-4 RemoteFlows_ZendeskDrawer__Content'
+            dangerouslySetInnerHTML={{
+              __html: data?.body || '',
+            }}
+          />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/example/src/components/ui/button.tsx b/example/src/components/ui/button.tsx
new file mode 100644
index 000000000..0c4434046
--- /dev/null
+++ b/example/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 RemoteFlows_ButtonDefault',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 RemoteFlows_ButtonDestructive',
+        outline:
+          'border border-input bg-background shadow-xs RemoteFlows_ButtonOutline',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 RemoteFlows_ButtonSecondary',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground RemoteFlows_ButtonGhost',
+        link: 'text-link-button-primary underline-offset-4 hover:underline button-link RemoteFlows_ButtonLink',
+      },
+      size: {
+        default: 'h-9 px-4 py-7 has-[>svg]:px-3 RemoteFlows_ButtonDefault',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 RemoteFlows_ButtonSm',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4 RemoteFlows_ButtonLg',
+        icon: 'size-9 RemoteFlows_ButtonIcon',
+        link: 'px-0 RemoteFlows_ButtonLink',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>
+>(({ className, variant, size, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      data-slot='button'
+      className={cn(
+        buttonVariants({ variant, size, className }),
+        'RemoteFlows__Button',
+      )}
+      {...props}
+    />
+  );
+});
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/example/src/components/ui/calendar.tsx b/example/src/components/ui/calendar.tsx
new file mode 100644
index 000000000..1f467db34
--- /dev/null
+++ b/example/src/components/ui/calendar.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+import { buttonVariants } from './button';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row gap-2',
+        month: 'flex flex-col gap-4',
+        caption: 'flex justify-center pt-1 relative items-center w-full',
+        caption_label: 'text-sm font-medium',
+        nav: 'flex items-center gap-1',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-x-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: cn(
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md',
+        ),
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'size-8 p-0 font-normal aria-selected:opacity-100',
+        ),
+        day_range_start:
+          'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
+        day_range_end:
+          'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground aria-selected:text-muted-foreground',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn('size-4', className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn('size-4', className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };
diff --git a/example/src/components/ui/checkbox.tsx b/example/src/components/ui/checkbox.tsx
new file mode 100644
index 000000000..c0b9a0713
--- /dev/null
+++ b/example/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+const Checkbox = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-checkbox data-[state=checked]:text-primary',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className='h-4 w-4' />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/example/src/components/ui/command.tsx b/example/src/components/ui/command.tsx
new file mode 100644
index 000000000..719479906
--- /dev/null
+++ b/example/src/components/ui/command.tsx
@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { cn } from '@remoteoss/remote-flows/internals';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './dialog';
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className='sr-only'>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className='overflow-hidden p-0'>
+        <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty className='py-6 text-center text-sm' {...props} />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+};
diff --git a/example/src/components/ui/dialog.tsx b/example/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..78112d216
--- /dev/null
+++ b/example/src/components/ui/dialog.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+import { cn } from '@remoteoss/remote-flows/internals';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className='sr-only'>Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/example/src/components/ui/drawer.tsx b/example/src/components/ui/drawer.tsx
new file mode 100644
index 000000000..2bf6fb1b8
--- /dev/null
+++ b/example/src/components/ui/drawer.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    showHandle?: boolean;
+  }
+>(({ className, children, showHandle = true, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className,
+      )}
+      {...props}
+    >
+      {showHandle && (
+        <div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted' />
+      )}
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/example/src/components/ui/form.tsx b/example/src/components/ui/form.tsx
new file mode 100644
index 000000000..e63dfdcdc
--- /dev/null
+++ b/example/src/components/ui/form.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+import {
+  FormFieldContext,
+  FormItemContext,
+  useFormField,
+  FormDescription,
+} from '@remoteoss/remote-flows';
+import { cn } from '@remoteoss/remote-flows/internals';
+import { Label } from './label';
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot='form-item'
+        {...props}
+        className={cn('grid gap-2', className)}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<'label'>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot='form-label'
+      data-error={!!error}
+      className={cn(
+        'text-base-color mb-1 data-[error=true]:text-destructive',
+        className,
+      )}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+const FormControl = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }
+>(({ children, ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  const controlProps = {
+    'data-slot': 'form-control',
+    id: formItemId,
+    'aria-describedby': !error
+      ? `${formDescriptionId}`
+      : `${formDescriptionId} ${formMessageId}`,
+    'aria-invalid': !!error,
+    ...props,
+  };
+
+  if (!React.isValidElement(children)) {
+    return <>{children}</>;
+  }
+
+  return React.cloneElement(
+    children as React.ReactElement<Record<string, unknown>>,
+    { ...(children.props as object), ...controlProps, ref },
+  );
+});
+
+FormControl.displayName = 'FormControl';
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot='form-message'
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormFieldContext,
+  FormItemContext,
+};
diff --git a/example/src/components/ui/input.tsx b/example/src/components/ui/input.tsx
new file mode 100644
index 000000000..ead9e5de1
--- /dev/null
+++ b/example/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot='input'
+      className={cn(
+        'shadow-xs border-input file:text-foreground placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-xl border bg-transparent px-4 py-7 text-sm transition-[color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-focused',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/example/src/components/ui/label.tsx b/example/src/components/ui/label.tsx
new file mode 100644
index 000000000..ac5e7c16a
--- /dev/null
+++ b/example/src/components/ui/label.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
+  return (
+    <label
+      data-slot='label'
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/example/src/components/ui/multi-select.tsx b/example/src/components/ui/multi-select.tsx
new file mode 100644
index 000000000..8decb4b75
--- /dev/null
+++ b/example/src/components/ui/multi-select.tsx
@@ -0,0 +1,142 @@
+import { Fragment, useState } from 'react';
+import { Check, ChevronDownIcon, X } from 'lucide-react';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Button } from './button';
+import { cn } from '@remoteoss/remote-flows/internals';
+
+export type Option = {
+  label: string;
+  value: string | string[];
+  category?: string;
+};
+
+interface MultiSelectProps {
+  options: Option[];
+  selected: Option[];
+  onChange: (options: Option[]) => void;
+  placeholder?: string;
+}
+
+export function MultiSelect({
+  options,
+  selected,
+  onChange,
+  placeholder,
+}: MultiSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleUnselect = (option: Option) => {
+    onChange(selected.filter((item) => item.value !== option.value));
+  };
+
+  const hasCategories = options.some((option) => option.category);
+
+  const groupedOptions = options.reduce(
+    (groups, option) => {
+      const category = option.category || 'Uncategorized';
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(option);
+      return groups;
+    },
+    {} as Record<string, Option[]>,
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          role='combobox'
+          aria-expanded={open}
+          className='w-full justify-between font-normal'
+          type='button'
+        >
+          <div className='flex gap-1 flex-wrap overflow-x-auto max-h-[2.5rem] items-center'>
+            {selected.length > 0 ? (
+              selected.map((option) => (
+                <span
+                  key={option.label}
+                  className='inline-flex items-center gap-1 bg-secondary text-secondary-foreground rounded px-1.5 py-0.5 text-xs mr-1 mb-1'
+                >
+                  {option.label}
+                  <span
+                    role='button'
+                    tabIndex={0}
+                    aria-label={`remove ${option.label}`}
+                    className='ml-1 rounded-full outline-none focus:ring-2 cursor-pointer'
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') handleUnselect(option);
+                    }}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onClick={() => handleUnselect(option)}
+                  >
+                    <X className='h-3 w-3 text-muted-foreground hover:text-foreground' />
+                  </span>
+                </span>
+              ))
+            ) : (
+              <span className='text-foreground'>{placeholder}</span>
+            )}
+          </div>
+          <ChevronDownIcon className='size-4' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align='start' className='w-full p-0'>
+        <Command>
+          <CommandList>
+            <CommandEmpty>No item found.</CommandEmpty>
+            {Object.entries(groupedOptions).map(
+              ([category, categoryOptions], index) => (
+                <Fragment key={category}>
+                  {index > 0 && <CommandSeparator />}
+                  <CommandGroup heading={hasCategories ? category : undefined}>
+                    {categoryOptions.map((option) => {
+                      const isSelected = selected.some(
+                        (item) => item.value === option.value,
+                      );
+                      return (
+                        <CommandItem
+                          key={option.label}
+                          onSelect={() => {
+                            onChange(
+                              isSelected
+                                ? selected.filter(
+                                    (item) => item.value !== option.value,
+                                  )
+                                : [...selected, option],
+                            );
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              'mr-2 h-4 w-4',
+                              isSelected ? 'opacity-100' : 'opacity-0',
+                            )}
+                          />
+                          {option.label}
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </Fragment>
+              ),
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/example/src/components/ui/popover.tsx b/example/src/components/ui/popover.tsx
new file mode 100644
index 000000000..5b4165d68
--- /dev/null
+++ b/example/src/components/ui/popover.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+import { PopoverClose } from '@radix-ui/react-popover';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot='popover-content'
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
diff --git a/example/src/components/ui/radio-group.tsx b/example/src/components/ui/radio-group.tsx
new file mode 100644
index 000000000..4c30bdcd7
--- /dev/null
+++ b/example/src/components/ui/radio-group.tsx
@@ -0,0 +1,43 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot='radio-group'
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot='radio-group-item'
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot='radio-group-indicator'
+        className='relative flex items-center justify-center'
+      >
+        <CircleIcon className='fill-radio absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2' />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/example/src/components/ui/select.tsx b/example/src/components/ui/select.tsx
new file mode 100644
index 000000000..18e2f9cf0
--- /dev/null
+++ b/example/src/components/ui/select.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot='select' {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot='select-group' {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot='select-value' {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot='select-trigger'
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full items-center justify-between rounded-xl border bg-transparent px-4 py-7 text-sm whitespace-nowrap transition-[color] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'focus-visible:border-focused',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild className='absolute right-4'>
+        <ChevronDownIcon className='size-4' />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot='select-content'
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot='select-label'
+      className={cn('px-2 py-1.5 text-sm font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot='select-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground min-h-11 justify-between [&_svg:not([class*='text-'])]:text-muted-foreground flex w-full cursor-default items-center gap-2 py-2 px-4 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <span className='flex size-3.5 items-center justify-center'>
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className='size-4' />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot='select-separator'
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot='select-scroll-up-button'
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className='size-4' />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot='select-scroll-down-button'
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className='size-4' />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/example/src/components/ui/table.tsx b/example/src/components/ui/table.tsx
new file mode 100644
index 000000000..5a502ca8e
--- /dev/null
+++ b/example/src/components/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className='relative w-full overflow-auto'>
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/example/src/components/ui/textarea.tsx b/example/src/components/ui/textarea.tsx
new file mode 100644
index 000000000..389761606
--- /dev/null
+++ b/example/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@remoteoss/remote-flows/internals';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/package-lock.json b/package-lock.json
index b2256a6e4..d54d214c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "1.20.0",
       "dependencies": {
         "@hookform/resolvers": "^4.1.3",
-        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -2009,37 +2008,6 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
-    "node_modules/@radix-ui/react-accordion": {
-      "version": "1.2.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
-      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/react-collapsible": "1.1.12",
-        "@radix-ui/react-collection": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
diff --git a/package.json b/package.json
index 451e8d0b5..e8396c13a 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
-    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
diff --git a/plans/duplicate-components-to-example.md b/plans/duplicate-components-to-example.md
new file mode 100644
index 000000000..bc1da1af6
--- /dev/null
+++ b/plans/duplicate-components-to-example.md
@@ -0,0 +1,205 @@
+# Plan: Duplicate Basic Default Components to Example Folder
+
+## Goal
+
+Validate the headless approach with `text`, `textarea`, `select`, `date`, `radio`,
+`checkbox`. The example owns complete copies of all UI components. Minimal library
+surface change — only context primitives and utilities exported.
+
+---
+
+## Key Constraint — React Context Sharing
+
+`FormField` (library) sets `FormFieldContext`. The example's `FormItem`, `FormControl`,
+etc. must read from the **same** React context object or they see empty context and break.
+
+This is the only reason we touch the library: export the context primitives from
+`src/index.tsx` so the example's copied `form.tsx` can import and reuse them.
+
+---
+
+## Step 1 — Rename `Components.tsx`
+
+| Action        | File                                                                                             |
+| ------------- | ------------------------------------------------------------------------------------------------ |
+| Rename        | `example/src/Components.tsx` → `example/src/CostCalculatorComponents.tsx`                        |
+| Update import | `CostCalculatorWithReplaceableComponents.tsx`: `'./Components'` → `'./CostCalculatorComponents'` |
+
+---
+
+## Step 2 — Library: minimal additions
+
+### `src/index.tsx` — add
+
+```ts
+export {
+  FormFieldContext,
+  FormItemContext,
+  useFormField,
+} from '@/src/components/ui/form';
+```
+
+### `src/internals.ts` — add
+
+`cn` is already exported. Only add:
+
+```ts
+export { sanitizeHtml } from './lib/utils';
+```
+
+---
+
+## Step 3 — Copy UI components to `example/src/components/ui/`
+
+Copy from `src/components/ui/`. Replace in every file:
+
+- `@/src/lib/utils` → `@remoteoss/remote-flows/internals` (for `cn`)
+- `@/src/components/ui/X` → `./X`
+
+| File              | External packages required                    |
+| ----------------- | --------------------------------------------- |
+| `label.tsx`       | _(pure HTML, none)_                           |
+| `input.tsx`       | _(pure HTML, none)_                           |
+| `textarea.tsx`    | _(pure HTML, none)_                           |
+| `button.tsx`      | `class-variance-authority`                    |
+| `checkbox.tsx`    | `@radix-ui/react-checkbox`, `lucide-react`    |
+| `radio-group.tsx` | `@radix-ui/react-radio-group`, `lucide-react` |
+| `select.tsx`      | `@radix-ui/react-select`, `lucide-react`      |
+| `popover.tsx`     | `@radix-ui/react-popover`                     |
+| `calendar.tsx`    | `react-day-picker`, `lucide-react`            |
+
+### `form.tsx` — written from scratch (not a verbatim copy)
+
+Imports the shared context objects from the library so contexts are the same React
+reference. Does NOT include `FormField` (stays in library). Does NOT import
+`react-hook-form` — consumers should not need to install it.
+
+```ts
+import {
+  FormFieldContext,
+  FormItemContext,
+  useFormField,
+} from '@remoteoss/remote-flows';
+import { cn, sanitizeHtml } from '@remoteoss/remote-flows/internals';
+import { Label } from './label';
+
+export { useFormField };
+// + FormItem, FormControl, FormLabel, FormDescription, FormMessage
+// identical logic to src/components/ui/form.tsx using the imported shared contexts
+```
+
+---
+
+## Step 4 — Copy HelpCenter to `example/src/components/shared/`
+
+Copy `src/components/shared/zendesk-drawer/HelpCenter.tsx`. Replace:
+
+- `@/src/types/fields` → `@remoteoss/remote-flows`
+- `ZendeskTriggerButton` → `@remoteoss/remote-flows` (already exported from library)
+
+---
+
+## Step 5 — Copy field defaults to `example/src/components/defaults/`
+
+Copy from `src/components/form/fields/default/`. Import mapping for every file:
+
+| Old                                                 | New                                      |
+| --------------------------------------------------- | ---------------------------------------- |
+| `@/src/components/ui/*`                             | `../ui/*`                                |
+| `@/src/lib/utils`                                   | `@remoteoss/remote-flows/internals` (cn) |
+| `@/src/types/fields`                                | `@remoteoss/remote-flows`                |
+| `@/src/types/remoteFlows`                           | `@remoteoss/remote-flows`                |
+| `@/src/components/shared/zendesk-drawer/HelpCenter` | `../shared/HelpCenter`                   |
+| `CheckedState` from `@radix-ui/react-checkbox`      | inline as `boolean \| 'indeterminate'`   |
+
+Files to copy:
+
+- `TextFieldDefault.tsx`
+- `TextAreaFieldDefault.tsx`
+- `SelectFieldDefault.tsx`
+- `CheckboxFieldDefault.tsx`
+- `RadioGroupFieldDefault.tsx`
+- `DatePickerFieldDefault.tsx`
+
+---
+
+## Step 6 — Install packages in `example/package.json`
+
+```json
+"@radix-ui/react-checkbox": "^1.3.3",
+"@radix-ui/react-radio-group": "^1.3.8",
+"@radix-ui/react-select": "^2.2.6",
+"@radix-ui/react-popover": "^1.1.15",
+"class-variance-authority": "^0.7.1",
+"date-fns": "^3.6.0",
+"lucide-react": "0.477.0",
+"react-day-picker": "^8.10.1"
+```
+
+No `clsx`, `tailwind-merge`, `dompurify`, or `react-hook-form` needed —
+`cn` and `sanitizeHtml` come from `@remoteoss/remote-flows/internals`.
+
+---
+
+## Step 7 — Create `example/src/DefaultComponents.tsx`
+
+```ts
+import { Components } from '@remoteoss/remote-flows';
+import { TextFieldDefault } from './components/defaults/TextFieldDefault';
+import { TextAreaFieldDefault } from './components/defaults/TextAreaFieldDefault';
+import { SelectFieldDefault } from './components/defaults/SelectFieldDefault';
+import { CheckboxFieldDefault } from './components/defaults/CheckboxFieldDefault';
+import { RadioGroupFieldDefault } from './components/defaults/RadioGroupFieldDefault';
+import { DatePickerFieldDefault } from './components/defaults/DatePickerFieldDefault';
+
+export const defaultComponents: Components = {
+  text: TextFieldDefault,
+  textarea: TextAreaFieldDefault,
+  select: SelectFieldDefault,
+  checkbox: CheckboxFieldDefault,
+  radio: RadioGroupFieldDefault,
+  date: DatePickerFieldDefault,
+};
+```
+
+---
+
+## Final folder structure (new files only)
+
+```
+example/src/
+  CostCalculatorComponents.tsx        (renamed from Components.tsx)
+  DefaultComponents.tsx               (new)
+  components/
+    ui/
+      form.tsx                        (new — uses shared contexts from library)
+      label.tsx                       (copied)
+      input.tsx                       (copied)
+      textarea.tsx                    (copied)
+      button.tsx                      (copied)
+      checkbox.tsx                    (copied)
+      radio-group.tsx                 (copied)
+      select.tsx                      (copied)
+      popover.tsx                     (copied)
+      calendar.tsx                    (copied)
+    shared/
+      HelpCenter.tsx                  (copied)
+    defaults/
+      TextFieldDefault.tsx            (copied)
+      TextAreaFieldDefault.tsx        (copied)
+      SelectFieldDefault.tsx          (copied)
+      CheckboxFieldDefault.tsx        (copied)
+      RadioGroupFieldDefault.tsx      (copied)
+      DatePickerFieldDefault.tsx      (copied)
+```
+
+---
+
+## What does NOT change
+
+- All originals in `src/` stay untouched
+- `src/internals.ts` gets only `sanitizeHtml` added
+- `src/index.tsx` gets only the 3 form context exports added
+- Existing example demos are untouched
+- Remaining field types (country, multi-select, file, work-schedule, statement, button)
+  are deferred to the next iteration
diff --git a/plans/headless-library.md b/plans/headless-library.md
index df71965f5..1f8c78aef 100644
--- a/plans/headless-library.md
+++ b/plans/headless-library.md
@@ -8,41 +8,19 @@ Decouple all Radix UI (and other visual) dependencies from the library core, mak
 
 ### Radix packages in use (11 total)
 
-- `@radix-ui/react-accordion` — `ui/accordion.tsx`
 - `@radix-ui/react-checkbox` — `ui/checkbox.tsx`
 - `@radix-ui/react-collapsible` — `ui/collapsible.tsx`
 - `@radix-ui/react-dialog` — `ui/dialog.tsx`
-- `@radix-ui/react-label` — `ui/label.tsx`, `ui/form.tsx`
 - `@radix-ui/react-popover` — `ui/popover.tsx`
 - `@radix-ui/react-radio-group` — `ui/radio-group.tsx`
 - `@radix-ui/react-scroll-area` — `ui/scroll-area.tsx`
 - `@radix-ui/react-select` — `ui/select.tsx`
-- `@radix-ui/react-slot` — `ui/form.tsx` (`FormControl`)
 - `@radix-ui/react-tabs` — `ui/tabs.tsx`
 
-### Visual components embedded in flows/shared (must be made overridable or moved)
-
-- `EstimationResults` — uses `Accordion`
-- `SummaryResults` — uses `Accordion`
-
 ---
 
 ## Phases
 
-### Phase 1 — Simplify `src/components/ui/form.tsx`
-
-Remove the two Radix dependencies while keeping the helper pattern intact.
-
-**Changes:**
-
-- `FormLabel`: replace `@radix-ui/react-label` + `Label` with a plain `<label>` element.
-- `FormControl`: replace `@radix-ui/react-slot` `Slot` with a lightweight wrapper that clones the child and merges `id` + `aria-*` props using `React.cloneElement`, keeping accessibility intact.
-- Remove imports: `@radix-ui/react-label`, `@radix-ui/react-slot`, `Label`.
-
-`FormField`, `FormItem`, `FormDescription`, `FormMessage` require no changes (no Radix).
-
----
-
 ### Phase 2 — Move all Default components to `examples/`
 
 All files in `src/components/form/fields/default/` are reference implementations that depend on Radix-backed `ui/` components. Move them to `examples/fields/`.
@@ -139,45 +117,6 @@ These pure-HTML components have no Radix dependency but are still visual. Move t
 
 ---
 
-### Phase 4 — Make flows with embedded visual components headless
-
-For each flow component that directly renders visual elements (Card, Button, Alert, Accordion), replace the hardcoded component with either:
-
-- **Component override slot** via a `components` prop (preferred for public-facing output components).
-- **Native HTML equivalent** where the component is simple enough (e.g., `Button` → `<button>`, `Card` → `<div>`).
-
-#### 4a. `EstimationResults`
-
-Currently accepts a partial `components` prop. Extend it to cover all internal visual dependencies:
-
-```ts
-type EstimationResultsComponents = {
-  Accordion?: React.ComponentType<...>;
-  Tooltip?: React.ComponentType<{ content: React.ReactNode; children: React.ReactNode }>;
-  ActionsDropdown?: React.ComponentType<ActionsDropdownProps>;
-  HiringSection?: React.ComponentType<...>;     // already exists
-  OnboardingTimeline?: React.ComponentType<...>; // already exists
-  Header?: React.ComponentType<...>;             // already exists
-  Footer?: React.ComponentType;                  // already exists
-};
-```
-
-The default for each slot is a plain HTML fallback (no Radix).
-
-#### 4b. `SummaryResults`
-
-Same approach — accept `Card` and `Accordion` overrides. Provide plain HTML defaults.
-
-#### 4d. `Termination/PaidTimeOff`
-
-Replace `Button` import with a `components?.button` override or a plain `<button>`.
-
-#### 4f. `ActionsDropdown`
-
-Replace `Button` from `ui/button` with a native `<button>` element directly. `ActionsDropdown` is already a plain dropdown with no Radix — only the `Button` wrapper is Radix-backed.
-
----
-
 ### Phase 5 — Remove all `@radix-ui/*` from `package.json`
 
 After phases 1–4, verify no file in `src/` imports from `@radix-ui/*`. Then remove all 11 Radix entries from `package.json` dependencies.
@@ -246,8 +185,4 @@ examples/
 
 ## Open questions before starting
 
-1. **`form.tsx` `FormControl` replacement**: Use `React.cloneElement` or remove entirely? Since Default components move to examples and those are the only `FormControl` consumers, we could remove `FormControl` from the core export and let examples bring their own version.
-
-2. **`EstimationResults` plain HTML defaults**: When no `Card`/`Accordion` override is given, should the component render plain `<div>` fallbacks (keeping it functional but unstyled), or should it throw (forcing the consumer to provide all slots)? Recommendation: plain `<div>` fallbacks so the component works out-of-the-box without any Radix.
-
-3. **Naming the examples folder**: `examples/` vs `packages/ui/` vs keeping it in the repo as a separate package. TBD with team.
+1. **Naming the examples folder**: `examples/` vs `packages/ui/` vs keeping it in the repo as a separate package. TBD with team.
diff --git a/plans/make-components-required.md b/plans/make-components-required.md
new file mode 100644
index 000000000..072ad1652
--- /dev/null
+++ b/plans/make-components-required.md
@@ -0,0 +1,138 @@
+# `makeComponentsRequired` Implementation Plan
+
+## Overview
+
+Add a `makeComponentsRequired?: boolean` prop (default: `false`) to `RemoteFlows`.
+When `true`, the built-in **default** components read the flag from context and return `null`, effectively making them no-ops. User-provided components are unaffected and render normally. Field wrappers keep their existing `throw` behaviour for genuine "no component found" errors.
+
+## Files to change
+
+### 1. `src/types/remoteFlows.ts`
+
+Add to `RemoteFlowsSDKProps`:
+
+```ts
+/**
+ * When true, built-in default components render nothing.
+ * Users must provide all required components via the `components` prop.
+ * @default false
+ */
+makeComponentsRequired?: boolean;
+```
+
+---
+
+### 2. `src/context.ts`
+
+Add `makeComponentsRequired` to `FormFieldsContext` and expose via `useFormFields()`:
+
+```ts
+export const FormFieldsContext = createContext<{
+  components: Components;
+  makeComponentsRequired: boolean;
+} | null>(null);
+
+export const useFormFields = () => {
+  // ...
+  return {
+    components: context.components,
+    makeComponentsRequired: context.makeComponentsRequired,
+  };
+};
+```
+
+---
+
+### 3. `src/RemoteFlowsProvider.tsx`
+
+**`FormFieldsProvider`** — accept and forward the new prop (lazy defaults logic unchanged):
+
+```ts
+export function FormFieldsProvider({
+  children,
+  components: userComponents = {},
+  makeComponentsRequired = false,
+}: PropsWithChildren<{
+  components?: Components;
+  makeComponentsRequired?: boolean;
+}>) {
+  const resolvedComponents = useMemo(() => {
+    return { ...lazyDefaultComponents, ...userComponents } as Components;
+  }, [userComponents]);
+
+  return (
+    <FormFieldsContext.Provider value={{ components: resolvedComponents, makeComponentsRequired }}>
+      ...
+    </FormFieldsContext.Provider>
+  );
+}
+```
+
+**`RemoteFlows`** — pass through the new prop:
+
+```ts
+export function RemoteFlows({ makeComponentsRequired, ... }) {
+  return (
+    <FormFieldsProvider components={components} makeComponentsRequired={makeComponentsRequired}>
+    ...
+  );
+}
+```
+
+---
+
+### 4. Default components — return `null` when `makeComponentsRequired` is true
+
+Each component in `src/components/form/fields/default/` reads the flag from context.
+If `true`, returns `null` immediately. Otherwise renders as normal.
+
+```ts
+// example: CheckboxFieldDefault.tsx
+export const CheckboxFieldDefault = ({
+  field,
+  fieldState,
+  fieldData,
+}: FieldComponentProps) => {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) return null;
+  // ... existing render
+};
+```
+
+Files to update:
+
+| File                              |
+| --------------------------------- |
+| `CheckboxFieldDefault.tsx`        |
+| `TextFieldDefault.tsx`            |
+| `TextAreaFieldDefault.tsx`        |
+| `SelectFieldDefault.tsx`          |
+| `RadioGroupFieldDefault.tsx`      |
+| `DatePickerFieldDefault.tsx`      |
+| `NumberFieldDefault.tsx`          |
+| `EmailFieldDefault.tsx`           |
+| `CountryFieldDefault.tsx`         |
+| `FileUploadFieldDefault.tsx`      |
+| `MultiSelectFieldDefault.tsx`     |
+| `ButtonDefault.tsx`               |
+| `StatementDefault.tsx`            |
+| `FieldsetToggleButtonDefault.tsx` |
+| `WorkScheduleFieldDefault.tsx`    |
+
+Field wrapper `throw` logic is **not changed** — it still fires if no component at all is registered.
+
+---
+
+## Usage example
+
+```tsx
+// Default components are no-ops; only user-provided components render
+<RemoteFlows makeComponentsRequired auth={...}>
+  <ContractorOnboarding components={defaultComponents} />
+</RemoteFlows>
+
+// Default behaviour unchanged — library defaults used as fallback
+<RemoteFlows auth={...}>
+  <ContractorOnboarding />
+</RemoteFlows>
+```
diff --git a/src/RemoteFlowsProvider.tsx b/src/RemoteFlowsProvider.tsx
index bbc37a4a1..5ce68ecf8 100644
--- a/src/RemoteFlowsProvider.tsx
+++ b/src/RemoteFlowsProvider.tsx
@@ -35,8 +35,10 @@ function RemoteFlowContextWrapper({
 export function FormFieldsProvider({
   children,
   components: userComponents = {},
+  makeComponentsRequired = false,
 }: PropsWithChildren<{
   components?: Components;
+  makeComponentsRequired?: boolean;
 }>) {
   // Merge user components with lazy defaults
   // User-provided components take precedence, lazy defaults are only used as fallback
@@ -49,7 +51,9 @@ export function FormFieldsProvider({
   }, [userComponents]);
 
   return (
-    <FormFieldsContext.Provider value={{ components: resolvedComponents }}>
+    <FormFieldsContext.Provider
+      value={{ components: resolvedComponents, makeComponentsRequired }}
+    >
       <Suspense
         fallback={
           <DelayedFallback fallback={<FormLoadingFallback />} delay={200} />
@@ -73,6 +77,7 @@ export function RemoteFlows({
   errorBoundary = { useParentErrorBoundary: true },
   debug = false,
   credentials,
+  makeComponentsRequired = false,
 }: PropsWithChildren<RemoteFlowsSDKProps>) {
   const remoteApiClient = useRef(
     createClient(auth, { proxy, environment, credentials }),
@@ -87,7 +92,10 @@ export function RemoteFlows({
         client={remoteApiClient}
       >
         <QueryClientProvider client={queryClient}>
-          <FormFieldsProvider components={components}>
+          <FormFieldsProvider
+            components={components}
+            makeComponentsRequired={makeComponentsRequired}
+          >
             <RemoteFlowContextWrapper
               environment={environment}
               debug={debug}
diff --git a/src/components/form/fields/default/ButtonDefault.tsx b/src/components/form/fields/default/ButtonDefault.tsx
index 2299d9645..aeacbe43b 100644
--- a/src/components/form/fields/default/ButtonDefault.tsx
+++ b/src/components/form/fields/default/ButtonDefault.tsx
@@ -1,7 +1,13 @@
 import { Button } from '@/src/components/ui/button';
 import { ButtonComponentProps } from '@/src/types/remoteFlows';
+import { useFormFields } from '@/src/context';
 
 export const ButtonDefault = (props: ButtonComponentProps) => {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: ButtonDefault');
+    return null;
+  }
   const { 'data-type': dataType, ...buttonProps } = props;
 
   if (dataType === 'inline') {
diff --git a/src/components/form/fields/default/CheckboxFieldDefault.tsx b/src/components/form/fields/default/CheckboxFieldDefault.tsx
index f463567ef..fd8419bab 100644
--- a/src/components/form/fields/default/CheckboxFieldDefault.tsx
+++ b/src/components/form/fields/default/CheckboxFieldDefault.tsx
@@ -9,12 +9,18 @@ import {
 import { cn } from '@/src/lib/utils';
 import { FieldComponentProps } from '@/src/types/fields';
 import { CheckedState } from '@radix-ui/react-checkbox';
+import { useFormFields } from '@/src/context';
 
 export const CheckboxFieldDefault = ({
   field,
   fieldState,
   fieldData,
 }: FieldComponentProps) => {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: CheckboxFieldDefault');
+    return null;
+  }
   const { name, label, description, options, multiple } = fieldData;
 
   return (
diff --git a/src/components/form/fields/default/CountryFieldDefault.tsx b/src/components/form/fields/default/CountryFieldDefault.tsx
index 5f15d2eb4..363fef653 100644
--- a/src/components/form/fields/default/CountryFieldDefault.tsx
+++ b/src/components/form/fields/default/CountryFieldDefault.tsx
@@ -11,18 +11,15 @@ import { MultiSelect } from '@/src/components/ui/multi-select';
 import { $TSFixMe } from '@/src/types/remoteFlows';
 import { CountryComponentProps } from '@/src/types/fields';
 import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
+import { useFormFields } from '@/src/context';
+import { type Option } from '@/src/components/ui/multi-select';
 
 export function CountryFieldDefault({
   field,
   fieldState,
   fieldData,
 }: CountryComponentProps) {
-  const [selected, setSelected] = useState<$TSFixMe[]>([]);
-  const handleChange = (rawValues: $TSFixMe[]) => {
-    const values = rawValues.map(({ value }) => value);
-    field.onChange(values);
-    setSelected(rawValues);
-  };
+  const [selected, setSelected] = useState<Option[]>([]);
 
   useEffect(() => {
     if (field.value && fieldData.options) {
@@ -37,6 +34,17 @@ export function CountryFieldDefault({
     }
   }, [field.value, fieldData.options]);
 
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: CountryFieldDefault');
+    return null;
+  }
+  const handleChange = (rawValues: $TSFixMe[]) => {
+    const values = rawValues.map(({ value }) => value);
+    field.onChange(values);
+    setSelected(rawValues);
+  };
+
   const countryOptions = [
     ...Object.entries(fieldData.$meta?.regions || {}).map(([key, value]) => ({
       value,
@@ -68,7 +76,7 @@ export function CountryFieldDefault({
       <FormControl>
         <MultiSelect
           options={countryOptions}
-          selected={selected}
+          selected={selected as Option[]}
           onChange={handleChange}
         />
       </FormControl>
diff --git a/src/components/form/fields/default/DatePickerFieldDefault.tsx b/src/components/form/fields/default/DatePickerFieldDefault.tsx
index e9032fe81..75372aa26 100644
--- a/src/components/form/fields/default/DatePickerFieldDefault.tsx
+++ b/src/components/form/fields/default/DatePickerFieldDefault.tsx
@@ -18,12 +18,18 @@ import {
 import { cn } from '@/src/lib/utils';
 import { Calendar } from '@/src/components/ui/calendar';
 import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
+import { useFormFields } from '@/src/context';
 
 export function DatePickerFieldDefault({
   field,
   fieldData,
   fieldState,
 }: DatePickerComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: DatePickerFieldDefault');
+    return null;
+  }
   const { name, label, description, minDate, maxDate } = fieldData;
   const minDateValue = minDate ? new Date(minDate) : undefined;
   const maxDateValue = maxDate ? new Date(maxDate) : undefined;
diff --git a/src/components/form/fields/default/EmailFieldDefault.tsx b/src/components/form/fields/default/EmailFieldDefault.tsx
index a396ff169..55b24492b 100644
--- a/src/components/form/fields/default/EmailFieldDefault.tsx
+++ b/src/components/form/fields/default/EmailFieldDefault.tsx
@@ -1,6 +1,12 @@
 import { TextField } from '@/src/components/form/fields/TextField';
 import { FieldComponentProps } from '@/src/types/fields';
+import { useFormFields } from '@/src/context';
 
 export function EmailFieldDefault({ field, fieldData }: FieldComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: EmailFieldDefault');
+    return null;
+  }
   return <TextField name={field.name} {...fieldData} type='email' />;
 }
diff --git a/src/components/form/fields/default/FieldsetToggleButtonDefault.tsx b/src/components/form/fields/default/FieldsetToggleButtonDefault.tsx
index 8fd2b8c65..42f13cf44 100644
--- a/src/components/form/fields/default/FieldsetToggleButtonDefault.tsx
+++ b/src/components/form/fields/default/FieldsetToggleButtonDefault.tsx
@@ -1,23 +1,31 @@
 import { Button } from '@/src/components/ui/button';
 import { cn } from '@/src/lib/utils';
 import { FieldSetToggleComponentProps } from '@/src/types/remoteFlows';
+import { useFormFields } from '@/src/context';
 
 export const FieldsetToggleButtonDefault = ({
   isExpanded,
   onToggle,
   className,
   ...props
-}: FieldSetToggleComponentProps) => (
-  <Button
-    type='button'
-    className={cn(
-      'RemoteFlows__Button RemoteFlows__FieldSetField__ToggleButton',
-      className,
-    )}
-    variant='default'
-    onClick={onToggle}
-    {...props}
-  >
-    {isExpanded ? 'Remove' : 'Define'}
-  </Button>
-);
+}: FieldSetToggleComponentProps) => {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: FieldsetToggleButtonDefault');
+    return null;
+  }
+  return (
+    <Button
+      type='button'
+      className={cn(
+        'RemoteFlows__Button RemoteFlows__FieldSetField__ToggleButton',
+        className,
+      )}
+      variant='default'
+      onClick={onToggle}
+      {...props}
+    >
+      {isExpanded ? 'Remove' : 'Define'}
+    </Button>
+  );
+};
diff --git a/src/components/form/fields/default/FileUploadFieldDefault.tsx b/src/components/form/fields/default/FileUploadFieldDefault.tsx
index 1068fbfa1..5656b92e7 100644
--- a/src/components/form/fields/default/FileUploadFieldDefault.tsx
+++ b/src/components/form/fields/default/FileUploadFieldDefault.tsx
@@ -8,12 +8,18 @@ import {
 import { FileUploader } from '@/src/components/ui/file-uploader';
 import { cn } from '@/src/lib/utils';
 import { FileComponentProps } from '@/src/types/fields';
+import { useFormFields } from '@/src/context';
 
 export function FileUploadFieldDefault({
   field,
   fieldState,
   fieldData,
 }: FileComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: FileUploadFieldDefault');
+    return null;
+  }
   const { name, label, description, multiple, accept } = fieldData;
 
   return (
diff --git a/src/components/form/fields/default/MultiSelectFieldDefault.tsx b/src/components/form/fields/default/MultiSelectFieldDefault.tsx
index d63f616c9..b97a5e8a8 100644
--- a/src/components/form/fields/default/MultiSelectFieldDefault.tsx
+++ b/src/components/form/fields/default/MultiSelectFieldDefault.tsx
@@ -8,6 +8,7 @@ import {
 } from '@/src/components/ui/form';
 import { MultiSelect, Option } from '@/src/components/ui/multi-select';
 import { FieldComponentProps } from '@/src/types/fields';
+import { useFormFields } from '@/src/context';
 
 export const MultiSelectFieldDefault = ({
   field,
@@ -15,16 +16,25 @@ export const MultiSelectFieldDefault = ({
   fieldData,
 }: FieldComponentProps) => {
   const [selected, setSelected] = useState<Option[]>([]);
+
+  useEffect(() => {
+    setSelected(
+      fieldData.options?.filter((option) =>
+        field.value?.includes(option.value),
+      ) || [],
+    );
+  }, [field.value, fieldData.options]);
+
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: MultiSelectFieldDefault');
+    return null;
+  }
   const { name, label, description, options } = fieldData;
   const selectedOptions =
     selected ||
     options?.filter((option) => field.value?.includes(option.value));
 
-  useEffect(() => {
-    setSelected(
-      options?.filter((option) => field.value?.includes(option.value)) || [],
-    );
-  }, [field.value, options]);
   return (
     <FormItem
       data-field={name}
diff --git a/src/components/form/fields/default/NumberFieldDefault.tsx b/src/components/form/fields/default/NumberFieldDefault.tsx
index 64240a79a..88a051b43 100644
--- a/src/components/form/fields/default/NumberFieldDefault.tsx
+++ b/src/components/form/fields/default/NumberFieldDefault.tsx
@@ -1,7 +1,13 @@
 import { TextField } from '@/src/components/form/fields/TextField';
 import { FieldComponentProps } from '@/src/types/fields';
+import { useFormFields } from '@/src/context';
 
 export function NumberFieldDefault({ field, fieldData }: FieldComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: NumberFieldDefault');
+    return null;
+  }
   return (
     <TextField
       type='text'
diff --git a/src/components/form/fields/default/RadioGroupFieldDefault.tsx b/src/components/form/fields/default/RadioGroupFieldDefault.tsx
index aaf34d1d6..9d50f61ef 100644
--- a/src/components/form/fields/default/RadioGroupFieldDefault.tsx
+++ b/src/components/form/fields/default/RadioGroupFieldDefault.tsx
@@ -10,12 +10,18 @@ import { RadioGroup, RadioGroupItem } from '@/src/components/ui/radio-group';
 import { cn } from '@/src/lib/utils';
 import { FieldComponentProps } from '@/src/types/fields';
 import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
+import { useFormFields } from '@/src/context';
 
 export const RadioGroupFieldDefault = ({
   field,
   fieldData,
   fieldState,
 }: FieldComponentProps) => {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: RadioGroupFieldDefault');
+    return null;
+  }
   const { name, label, description, options } = fieldData;
   return (
     <fieldset
diff --git a/src/components/form/fields/default/SelectFieldDefault.tsx b/src/components/form/fields/default/SelectFieldDefault.tsx
index e58cf398d..e18fcd4e3 100644
--- a/src/components/form/fields/default/SelectFieldDefault.tsx
+++ b/src/components/form/fields/default/SelectFieldDefault.tsx
@@ -14,12 +14,18 @@ import {
   SelectContent,
   SelectItem,
 } from '@/src/components/ui/select';
+import { useFormFields } from '@/src/context';
 
 export function SelectFieldDefault({
   field,
   fieldState,
   fieldData,
 }: FieldComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: SelectFieldDefault');
+    return null;
+  }
   const { name, label, description, options } = fieldData;
 
   return (
diff --git a/src/components/form/fields/default/StatementDefault.tsx b/src/components/form/fields/default/StatementDefault.tsx
index b95e386b1..0a51b5d4f 100644
--- a/src/components/form/fields/default/StatementDefault.tsx
+++ b/src/components/form/fields/default/StatementDefault.tsx
@@ -1,8 +1,14 @@
 import { Alert, AlertDescription, AlertTitle } from '@/src/components/ui/alert';
 import { StatementComponentProps } from '@/src/types/fields';
 import { AlertCircle } from 'lucide-react';
+import { useFormFields } from '@/src/context';
 
 export function StatementDefault({ data }: StatementComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: StatementDefault');
+    return null;
+  }
   const { title, description, severity } = data;
 
   const mapSeverityToVariant: Record<
diff --git a/src/components/form/fields/default/TextAreaFieldDefault.tsx b/src/components/form/fields/default/TextAreaFieldDefault.tsx
index 45cc7d4d3..6d2a85606 100644
--- a/src/components/form/fields/default/TextAreaFieldDefault.tsx
+++ b/src/components/form/fields/default/TextAreaFieldDefault.tsx
@@ -8,12 +8,18 @@ import {
 import { Textarea } from '@/src/components/ui/textarea';
 import { cn } from '@/src/lib/utils';
 import { FieldComponentProps } from '@/src/types/fields';
+import { useFormFields } from '@/src/context';
 
 export function TextAreaFieldDefault({
   field,
   fieldState,
   fieldData,
 }: FieldComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: TextAreaFieldDefault');
+    return null;
+  }
   const { name, label, description, maxLength } = fieldData;
   const valueLength = field.value?.length ?? 0;
   return (
diff --git a/src/components/form/fields/default/TextFieldDefault.tsx b/src/components/form/fields/default/TextFieldDefault.tsx
index 1f2ea530a..4325f730f 100644
--- a/src/components/form/fields/default/TextFieldDefault.tsx
+++ b/src/components/form/fields/default/TextFieldDefault.tsx
@@ -2,12 +2,18 @@ import { FormDescription, FormMessage } from '@/src/components/ui/form';
 import { FormControl, FormItem, FormLabel } from '@/src/components/ui/form';
 import { Input } from '@/src/components/ui/input';
 import { TextFieldComponentProps } from '@/src/types/fields';
+import { useFormFields } from '@/src/context';
 
 export function TextFieldDefault({
   field,
   fieldState,
   fieldData,
 }: TextFieldComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: TextFieldDefault');
+    return null;
+  }
   const { name, label, description, maxLength, includeErrorMessage } =
     fieldData;
   return (
diff --git a/src/components/form/fields/default/WorkScheduleFieldDefault.tsx b/src/components/form/fields/default/WorkScheduleFieldDefault.tsx
index a649e2d86..9ea7276c8 100644
--- a/src/components/form/fields/default/WorkScheduleFieldDefault.tsx
+++ b/src/components/form/fields/default/WorkScheduleFieldDefault.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/src/components/ui/dialog';
 import { WorkScheduleComponentProps } from '@/src/types/fields';
 import { $TSFixMe } from '@/src/types/remoteFlows';
+import { useFormFields } from '@/src/context';
 
 type WorkScheduleFormData = {
   schedule: DailySchedule[];
@@ -245,6 +246,11 @@ function WorkScheduleSelectionForm({
 export const WorkScheduleFieldDefault = ({
   fieldData,
 }: WorkScheduleComponentProps) => {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: WorkScheduleFieldDefault');
+    return null;
+  }
   const { defaultFormattedValue, currentSchedule, onSubmit } = fieldData;
   const { workHoursSummary, breakSummary, totalWorkHours } =
     defaultFormattedValue;
diff --git a/src/components/shared/drawer/DrawerDefault.tsx b/src/components/shared/drawer/DrawerDefault.tsx
index f736291b3..56b8e61af 100644
--- a/src/components/shared/drawer/DrawerDefault.tsx
+++ b/src/components/shared/drawer/DrawerDefault.tsx
@@ -7,6 +7,7 @@ import {
   DrawerTitle,
 } from '@/src/components/ui/drawer';
 import { cn } from '@/src/lib/utils';
+import { useFormFields } from '@/src/context';
 
 export function DrawerDefault({
   open,
@@ -17,6 +18,11 @@ export function DrawerDefault({
   trigger,
   children,
 }: DrawerComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: DrawerDefault');
+    return null;
+  }
   return (
     <DrawerPrimitive
       open={open}
diff --git a/src/components/shared/drawer/tests/Drawer.test.tsx b/src/components/shared/drawer/tests/Drawer.test.tsx
index 3619e6198..4986ab4ff 100644
--- a/src/components/shared/drawer/tests/Drawer.test.tsx
+++ b/src/components/shared/drawer/tests/Drawer.test.tsx
@@ -5,7 +5,10 @@ import { FormFieldsContext } from '@/src/context';
 import { ReactNode } from 'react';
 import { DrawerDefault } from '@/src/components/shared/drawer/DrawerDefault';
 
-const mockComponents = { components: { drawer: DrawerDefault } };
+const mockComponents = {
+  components: { drawer: DrawerDefault },
+  makeComponentsRequired: false,
+};
 
 const FormFieldsProvider = ({ children }: { children: ReactNode }) => (
   <FormFieldsContext.Provider value={mockComponents}>
@@ -93,7 +96,10 @@ describe('Drawer', () => {
 
   it('should use custom drawer component from components prop', () => {
     const CustomDrawer = vi.fn(() => <div>Custom Drawer</div>);
-    const customComponents = { components: { drawer: CustomDrawer } };
+    const customComponents = {
+      components: { drawer: CustomDrawer },
+      makeComponentsRequired: false,
+    };
 
     render(
       <FormFieldsContext.Provider value={customComponents}>
diff --git a/src/components/shared/table/TableFieldDefault.tsx b/src/components/shared/table/TableFieldDefault.tsx
index c3751e23f..2002a42bb 100644
--- a/src/components/shared/table/TableFieldDefault.tsx
+++ b/src/components/shared/table/TableFieldDefault.tsx
@@ -8,6 +8,7 @@ import {
 } from '@/src/components/ui/table';
 import { cn } from '@/src/lib/utils';
 import { $TSFixMe, TableComponentProps } from '@/src/types/remoteFlows';
+import { useFormFields } from '@/src/context';
 
 export const TableFieldDefault = ({
   data,
@@ -15,6 +16,11 @@ export const TableFieldDefault = ({
   className,
   ref,
 }: TableComponentProps) => {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: TableFieldDefault');
+    return null;
+  }
   return (
     <TablePrimitive ref={ref} className={cn('RemoteFlows__Table', className)}>
       <TableHeader>
diff --git a/src/components/shared/zendesk-drawer/ZendeskDrawerDefault.tsx b/src/components/shared/zendesk-drawer/ZendeskDrawerDefault.tsx
index 21b7652b4..f0260cc9e 100644
--- a/src/components/shared/zendesk-drawer/ZendeskDrawerDefault.tsx
+++ b/src/components/shared/zendesk-drawer/ZendeskDrawerDefault.tsx
@@ -7,6 +7,7 @@ import {
   DrawerTrigger,
 } from '@/src/components/ui/drawer';
 import { ZendeskDrawerComponentProps } from '@/src/types/remoteFlows';
+import { useFormFields } from '@/src/context';
 
 export function ZendeskDrawerDefault({
   open,
@@ -17,6 +18,11 @@ export function ZendeskDrawerDefault({
   zendeskURL,
   Trigger,
 }: ZendeskDrawerComponentProps) {
+  const { makeComponentsRequired } = useFormFields();
+  if (makeComponentsRequired) {
+    console.log('Missing component: ZendeskDrawerDefault');
+    return null;
+  }
   return (
     <Drawer
       open={open}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index ef9f598d6..528f93f79 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,48 +1,177 @@
 import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from 'lucide-react';
 
 import { cn } from '@/src/lib/utils';
 
+type AccordionContextValue = {
+  openItem: string | undefined;
+  toggleItem: (value: string) => void;
+  collapsible: boolean;
+};
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(
+  null,
+);
+
+const useAccordion = () => {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error('Accordion components must be used within Accordion');
+  }
+  return context;
+};
+
+type AccordionProps = {
+  collapsible?: boolean;
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  children: React.ReactNode;
+};
+
 function Accordion({
+  collapsible = false,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  className,
+  children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot='accordion' {...props} />;
+}: AccordionProps) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState<
+    string | undefined
+  >(defaultValue);
+
+  const isControlled = controlledValue !== undefined;
+  const openItem = isControlled ? controlledValue : uncontrolledValue;
+
+  const toggleItem = React.useCallback(
+    (value: string) => {
+      let newValue: string | undefined;
+
+      if (openItem === value) {
+        // Clicking the open item
+        newValue = collapsible ? '' : value;
+      } else {
+        // Clicking a different item
+        newValue = value;
+      }
+
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+
+      if (onValueChange) {
+        onValueChange(newValue);
+      }
+    },
+    [openItem, collapsible, isControlled, onValueChange],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({ openItem, toggleItem, collapsible }),
+    [openItem, toggleItem, collapsible],
+  );
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      <div data-slot='accordion' className={className} {...props}>
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
 }
 
+type AccordionItemContextValue = {
+  value: string;
+  isOpen: boolean;
+  contentId: string;
+};
+
+const AccordionItemContext =
+  React.createContext<AccordionItemContextValue | null>(null);
+
+const useAccordionItem = () => {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      'AccordionItem components must be used within AccordionItem',
+    );
+  }
+  return context;
+};
+
+type AccordionItemProps = {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
 function AccordionItem({
+  value,
   className,
+  children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+}: AccordionItemProps) {
+  const { openItem } = useAccordion();
+  const isOpen = openItem === value;
+  const contentId = React.useId();
+
+  const contextValue = React.useMemo(
+    () => ({ value, isOpen, contentId }),
+    [value, isOpen, contentId],
+  );
+
   return (
-    <AccordionPrimitive.Item
-      data-slot='accordion-item'
-      className={cn('border-b last:border-b-0', className)}
-      {...props}
-    />
+    <AccordionItemContext.Provider value={contextValue}>
+      <div
+        data-slot='accordion-item'
+        className={cn('border-b last:border-b-0', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
   );
 }
 
-type AccordionTriggerProps = React.ComponentProps<
-  typeof AccordionPrimitive.Trigger
-> & {
+type AccordionTriggerProps = {
+  className?: string;
   iconClassName?: string;
-};
+  children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 function AccordionTrigger({
   className,
   iconClassName,
   children,
+  onClick,
   ...props
 }: AccordionTriggerProps) {
+  const { toggleItem } = useAccordion();
+  const { value, isOpen, contentId } = useAccordionItem();
+  const triggerId = React.useId();
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    toggleItem(value);
+    onClick?.(event);
+  };
+
   return (
-    <AccordionPrimitive.Header className='flex items-center'>
-      <AccordionPrimitive.Trigger
+    <div className='flex items-center'>
+      <button
+        id={triggerId}
+        type='button'
         data-slot='accordion-trigger'
+        data-state={isOpen ? 'open' : 'closed'}
+        aria-expanded={isOpen}
+        aria-controls={contentId}
         className={cn(
           'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
           className,
         )}
+        onClick={handleClick}
         {...props}
       >
         {children}
@@ -52,24 +181,56 @@ function AccordionTrigger({
             iconClassName,
           )}
         />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
+      </button>
+    </div>
   );
 }
 
+type AccordionContentProps = {
+  className?: string;
+  children: React.ReactNode;
+};
+
 function AccordionContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+}: AccordionContentProps): React.ReactElement | null {
+  const { isOpen, contentId } = useAccordionItem();
+  const [shouldRender, setShouldRender] = React.useState(isOpen);
+  const [shouldAnimate, setShouldAnimate] = React.useState(isOpen);
+
+  React.useLayoutEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      const rafId = requestAnimationFrame(() => {
+        void window.getComputedStyle(document.getElementById(contentId)!)
+          .height;
+        setShouldAnimate(true);
+      });
+      return () => cancelAnimationFrame(rafId);
+    }
+    setShouldAnimate(false);
+    const timer = setTimeout(() => setShouldRender(false), 200);
+    return () => clearTimeout(timer);
+  }, [isOpen, contentId]);
+
+  if (!shouldRender) return null;
+
   return (
-    <AccordionPrimitive.Content
+    <div
+      id={contentId}
+      role='region'
       data-slot='accordion-content'
-      className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
+      data-state={isOpen ? 'open' : 'closed'}
+      className={cn(
+        'overflow-hidden text-sm transition-all duration-200 ease-out',
+        shouldAnimate ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0',
+      )}
       {...props}
     >
       <div className={cn('pt-0 pb-4', className)}>{children}</div>
-    </AccordionPrimitive.Content>
+    </div>
   );
 }
 
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 714359568..77e5f0469 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -35,14 +35,13 @@ const buttonVariants = cva(
   },
 );
 
-function Button({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>) {
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>
+>(({ className, variant, size, ...props }, ref) => {
   return (
     <button
+      ref={ref}
       data-slot='button'
       className={cn(
         buttonVariants({ variant, size, className }),
@@ -51,6 +50,7 @@ function Button({
       {...props}
     />
   );
-}
+});
+Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index cd919e8e4..8fe50ccb5 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -203,4 +203,6 @@ export {
   FormLabel,
   FormMessage,
   useFormField,
+  FormFieldContext,
+  FormItemContext,
 };
diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
index 8c4339a32..79168d4f3 100644
--- a/src/components/ui/multi-select.tsx
+++ b/src/components/ui/multi-select.tsx
@@ -59,7 +59,7 @@ export function MultiSelect({
 
   return (
     <Popover open={open} onOpenChange={setOpen} {...props}>
-      <PopoverTrigger>
+      <PopoverTrigger asChild>
         <Button
           variant='outline'
           role='combobox'
diff --git a/src/context.ts b/src/context.ts
index 9bbd9c533..041fa8281 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -4,6 +4,7 @@ import { Components } from './types/remoteFlows';
 
 export const FormFieldsContext = createContext<{
   components: Components;
+  makeComponentsRequired: boolean;
 } | null>(null);
 
 export const useFormFields = () => {
@@ -14,6 +15,7 @@ export const useFormFields = () => {
 
   return {
     components: context.components,
+    makeComponentsRequired: context.makeComponentsRequired,
   };
 };
 
diff --git a/src/flows/ContractAmendment/tests/ContractAmendmentBack.test.tsx b/src/flows/ContractAmendment/tests/ContractAmendmentBack.test.tsx
index 649c12951..26af8d409 100644
--- a/src/flows/ContractAmendment/tests/ContractAmendmentBack.test.tsx
+++ b/src/flows/ContractAmendment/tests/ContractAmendmentBack.test.tsx
@@ -27,9 +27,8 @@ describe('ContractAmendmentBack', () => {
     });
 
     mockUseFormFields.mockReturnValue({
-      components: {
-        button: ButtonDefault,
-      },
+      components: { button: ButtonDefault },
+      makeComponentsRequired: false,
     });
   });
 
@@ -95,6 +94,7 @@ describe('ContractAmendmentBack', () => {
         components: {
           button: CustomButton,
         },
+        makeComponentsRequired: false,
       });
     });
 
diff --git a/src/flows/ContractAmendment/tests/ContractAmendmentSubmit.test.tsx b/src/flows/ContractAmendment/tests/ContractAmendmentSubmit.test.tsx
index 7c9c1c254..9b9b7fd03 100644
--- a/src/flows/ContractAmendment/tests/ContractAmendmentSubmit.test.tsx
+++ b/src/flows/ContractAmendment/tests/ContractAmendmentSubmit.test.tsx
@@ -23,9 +23,8 @@ describe('ContractAmendmentSubmit', () => {
     });
 
     mockUseFormFields.mockReturnValue({
-      components: {
-        button: ButtonDefault,
-      },
+      components: { button: ButtonDefault },
+      makeComponentsRequired: false,
     });
   });
 
@@ -68,6 +67,7 @@ describe('ContractAmendmentSubmit', () => {
         components: {
           button: CustomButton,
         },
+        makeComponentsRequired: false,
       });
     });
 
diff --git a/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx b/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx
index fd20105a1..c2bf928c4 100644
--- a/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx
+++ b/src/flows/CostCalculator/EstimationResults/EstimationResults.tsx
@@ -147,7 +147,6 @@ function OnboardingTimeline({
 }) {
   return (
     <Accordion
-      type='single'
       collapsible
       className={cn(
         'RemoteFlows__EstimationResults__OnboardingTimeline w-full',
@@ -208,7 +207,6 @@ function HiringSection({
 }) {
   return (
     <Accordion
-      type='single'
       collapsible
       className={cn(
         'RemoteFlows__EstimationResults__HiringSection w-full',
diff --git a/src/flows/CostCalculator/SummaryResults/SummaryResults.tsx b/src/flows/CostCalculator/SummaryResults/SummaryResults.tsx
index 5197f46b0..8b3a49082 100644
--- a/src/flows/CostCalculator/SummaryResults/SummaryResults.tsx
+++ b/src/flows/CostCalculator/SummaryResults/SummaryResults.tsx
@@ -117,7 +117,6 @@ const MultiColumnAccordion = ({
 
   return (
     <Accordion
-      type='single'
       collapsible
       defaultValue={defaultValue}
       className={cn(
@@ -295,10 +294,9 @@ export const SummaryResults = ({ estimations }: SummaryResultsProps) => {
   return (
     <Card className='RemoteFlows__SummaryResults__Card p-10'>
       <Accordion
-        type='single'
         collapsible
         defaultValue={accordionValue}
-        onValueChange={setAccordionValue}
+        onValueChange={(value) => setAccordionValue(value)}
         className='RemoteFlows__SummaryResults__Accordion w-full'
       >
         <AccordionItem
@@ -309,7 +307,7 @@ export const SummaryResults = ({ estimations }: SummaryResultsProps) => {
             className={cn(
               'RemoteFlows__SummaryResults__AccordionTriggerContainer',
               {
-                RemoteFlows__Separator: accordionValue === 'summary',
+                RemoteFlows__Separator: !!accordionValue,
               },
             )}
           >
diff --git a/src/flows/CostCalculator/tests/CostCalculatorResetButton.test.tsx b/src/flows/CostCalculator/tests/CostCalculatorResetButton.test.tsx
index 355fe53ad..68a591393 100644
--- a/src/flows/CostCalculator/tests/CostCalculatorResetButton.test.tsx
+++ b/src/flows/CostCalculator/tests/CostCalculatorResetButton.test.tsx
@@ -31,9 +31,8 @@ describe('CostCalculatorResetButton', () => {
     });
 
     mockUseFormFields.mockReturnValue({
-      components: {
-        button: ButtonDefault,
-      },
+      components: { button: ButtonDefault },
+      makeComponentsRequired: false,
     });
   });
 
@@ -103,6 +102,7 @@ describe('CostCalculatorResetButton', () => {
         components: {
           button: CustomButton,
         },
+        makeComponentsRequired: false,
       });
     });
 
diff --git a/src/flows/CostCalculator/tests/CostCalculatorSubmitButton.test.tsx b/src/flows/CostCalculator/tests/CostCalculatorSubmitButton.test.tsx
index 255fea96c..4a41e925a 100644
--- a/src/flows/CostCalculator/tests/CostCalculatorSubmitButton.test.tsx
+++ b/src/flows/CostCalculator/tests/CostCalculatorSubmitButton.test.tsx
@@ -27,6 +27,7 @@ describe('CostCalculatorSubmitButton', () => {
       components: {
         button: ButtonDefault,
       },
+      makeComponentsRequired: false,
     });
   });
 
@@ -70,6 +71,7 @@ describe('CostCalculatorSubmitButton', () => {
         components: {
           button: CustomButton,
         },
+        makeComponentsRequired: false,
       });
     });
 
diff --git a/src/flows/CostCalculator/tests/SummaryResults.test.tsx b/src/flows/CostCalculator/tests/SummaryResults.test.tsx
index 8a22765a0..7dc0e0921 100644
--- a/src/flows/CostCalculator/tests/SummaryResults.test.tsx
+++ b/src/flows/CostCalculator/tests/SummaryResults.test.tsx
@@ -201,10 +201,11 @@ describe('SummaryResults', () => {
     await user.click(screen.getByText('Summary Overview'));
 
     // Content should be hidden
-    expect(
-      screen.queryByText('Cost for all employees'),
-    ).not.toBeInTheDocument();
-
+    // the content is still in the DOM, but it's not visible because the accordion is collapsed
+    const mainContent = screen
+      .getByText('Summary Overview')
+      .closest('[data-state]');
+    expect(mainContent).toHaveAttribute('data-state', 'closed');
     // Expand again
     await user.click(screen.getByText('Summary Overview'));
 
diff --git a/src/flows/Termination/hooks.tsx b/src/flows/Termination/hooks.tsx
index 19b8007a2..025194f33 100644
--- a/src/flows/Termination/hooks.tsx
+++ b/src/flows/Termination/hooks.tsx
@@ -216,8 +216,12 @@ export const useTermination = ({
 
               return (
                 <PaidTimeOffContainer
-                  employeeName={employment?.basic_information?.name as string}
-                  proposedTerminationDate={formValues.proposed_termination_date}
+                  employeeName={
+                    (employment?.basic_information?.name ?? '') as string
+                  }
+                  proposedTerminationDate={
+                    formValues.proposed_termination_date as string
+                  }
                   employmentId={employmentId}
                   employment={employment}
                   render={(props) => {
diff --git a/src/flows/Termination/tests/TerminationBack.test.tsx b/src/flows/Termination/tests/TerminationBack.test.tsx
index c80661078..6e8522c06 100644
--- a/src/flows/Termination/tests/TerminationBack.test.tsx
+++ b/src/flows/Termination/tests/TerminationBack.test.tsx
@@ -30,6 +30,7 @@ describe('TerminationBack', () => {
       components: {
         button: ButtonDefault,
       },
+      makeComponentsRequired: false,
     });
   });
 
@@ -91,6 +92,7 @@ describe('TerminationBack', () => {
         components: {
           button: CustomButton,
         },
+        makeComponentsRequired: false,
       });
     });
 
diff --git a/src/flows/Termination/tests/TerminationSubmit.test.tsx b/src/flows/Termination/tests/TerminationSubmit.test.tsx
index 2b13fe561..c116e80ee 100644
--- a/src/flows/Termination/tests/TerminationSubmit.test.tsx
+++ b/src/flows/Termination/tests/TerminationSubmit.test.tsx
@@ -26,6 +26,7 @@ describe('TerminationSubmit', () => {
       components: {
         button: ButtonDefault,
       },
+      makeComponentsRequired: false,
     });
   });
 
@@ -68,6 +69,7 @@ describe('TerminationSubmit', () => {
         components: {
           button: CustomButton,
         },
+        makeComponentsRequired: false,
       });
     });
 
diff --git a/src/index.tsx b/src/index.tsx
index 27ee88c50..6eaa65ed7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -121,6 +121,7 @@ export type {
   ButtonComponentProps,
   ZendeskDrawerComponentProps,
   DrawerComponentProps,
+  TableComponentProps,
   PDFPreviewComponentProps,
   Meta,
 } from '@/src/types/remoteFlows';
@@ -135,6 +136,7 @@ export type {
   WorkScheduleComponentProps,
   PricingPlanComponentProps,
   PricingPlanDataProps,
+  HelpCenterDataProps,
 } from '@/src/types/fields';
 
 export type {
@@ -152,4 +154,19 @@ export type {
 export type { $TSFixMe, JSFCustomComponentProps } from './types/remoteFlows';
 export type { FieldError, NormalizedFieldError } from './lib/mutations';
 export { zendeskArticles } from './components/shared/zendesk-drawer/utils';
+
+export {
+  calculateHours,
+  DAYS_OF_THE_WEEK,
+  getShortWeekday,
+} from './components/form/fields/workScheduleUtils';
+export type { DailySchedule } from './components/form/fields/workScheduleUtils';
 export { ZendeskTriggerButton } from './components/shared/zendesk-drawer/ZendeskTriggerButton';
+export { HelpCenter } from './components/shared/zendesk-drawer/HelpCenter';
+
+export {
+  FormFieldContext,
+  FormItemContext,
+  useFormField,
+  FormDescription,
+} from '@/src/components/ui/form';
diff --git a/src/internals.ts b/src/internals.ts
index 9fbfd31e6..4172b31bb 100644
--- a/src/internals.ts
+++ b/src/internals.ts
@@ -8,7 +8,7 @@
  */
 
 // Internal utilities
-export { cn } from './lib/utils';
+export { cn, sanitizeHtml } from './lib/utils';
 
 // UI Components for internal use
 export { Button, buttonVariants } from './components/ui/button';
diff --git a/src/types/remoteFlows.ts b/src/types/remoteFlows.ts
index 969f97c35..02a0a3d5f 100644
--- a/src/types/remoteFlows.ts
+++ b/src/types/remoteFlows.ts
@@ -193,6 +193,12 @@ export type RemoteFlowsSDKProps = Omit<ThemeProviderProps, 'children'> & {
      */
     fallback?: ReactNode | ((error: Error) => ReactNode);
   };
+  /**
+   * When true, built-in default components render nothing.
+   * Users must provide all required components via the `components` prop.
+   * @default false
+   */
+  makeComponentsRequired?: boolean;
   /**
    * Debug mode to enable logging of telemetry errors to the console.
    * @default false