diff --git a/examples/7guis-flight-booker-react/package-lock.json b/examples/7guis-flight-booker-react/package-lock.json
index 652717a43b..f45f24d180 100644
--- a/examples/7guis-flight-booker-react/package-lock.json
+++ b/examples/7guis-flight-booker-react/package-lock.json
@@ -1,20 +1,22 @@
 {
-  "name": "7guis-flight-booker-react",
+  "name": "fb",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "7guis-flight-booker-react",
+      "name": "fb",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-alert-dialog": "^1.0.5",
         "@xstate/react": "^4.1.0",
+        "date-fns": "^3.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "vite-tsconfig-paths": "^4.3.2",
-        "xstate": "^5.10.0"
+        "xstate": "^5.9.1"
       },
       "devDependencies": {
+        "@types/node": "^20.12.10",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -24,7 +26,8 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
         "typescript": "^5.2.2",
-        "vite": "^5.2.0"
+        "vite": "^5.2.0",
+        "vite-tsconfig-paths": "^4.3.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -346,6 +349,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
@@ -994,6 +1008,357 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz",
+      "integrity": "sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.14.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
@@ -1234,7 +1599,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
@@ -1242,17 +1607,26 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.12.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+      "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.75",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.75.tgz",
       "integrity": "sha512-+DNnF7yc5y0bHkBTiLKqXFe+L4B3nvOphiMY3tuA5X10esmjqk7smyBZzbGTy2vsiy/Bnzj8yFIBL8xhRacoOg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1262,7 +1636,7 @@
       "version": "18.2.24",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.24.tgz",
       "integrity": "sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1570,6 +1944,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -1726,12 +2111,22 @@
       "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==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
     },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -1750,6 +2145,11 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "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=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1784,7 +2184,7 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
       "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -2262,6 +2662,14 @@
         "node": ">=6.9.0"
       }
     },
+    "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==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2348,7 +2756,8 @@
     "node_modules/globrex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -2415,6 +2824,14 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2622,13 +3039,14 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2762,7 +3180,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -2780,7 +3198,7 @@
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
       "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2874,6 +3292,78 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2912,7 +3402,7 @@
       "version": "4.14.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz",
       "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -3040,7 +3530,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3124,6 +3614,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.0.3.tgz",
       "integrity": "sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==",
+      "dev": true,
       "bin": {
         "tsconfck": "bin/tsconfck.js"
       },
@@ -3139,6 +3630,11 @@
         }
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3167,7 +3663,7 @@
       "version": "5.4.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.4.tgz",
       "integrity": "sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3176,6 +3672,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -3215,6 +3717,26 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
@@ -3228,6 +3750,27 @@
         }
       }
     },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -3240,7 +3783,7 @@
       "version": "5.2.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
       "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
@@ -3295,6 +3838,7 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz",
       "integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==",
+      "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
         "globrex": "^0.1.2",
diff --git a/examples/7guis-flight-booker-react/package.json b/examples/7guis-flight-booker-react/package.json
index f042caed58..4cccd1053d 100644
--- a/examples/7guis-flight-booker-react/package.json
+++ b/examples/7guis-flight-booker-react/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "7guis-flight-booker-react",
+  "name": "fb",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -10,13 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@xstate/react": "^4.1.0",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "xstate": "^5.10.0"
+    "xstate": "^5.9.1"
   },
   "devDependencies": {
+    "@types/node": "^20.12.10",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -26,6 +28,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }
diff --git a/examples/7guis-flight-booker-react/src/App.tsx b/examples/7guis-flight-booker-react/src/App.tsx
index ea69b0270c..87768600b4 100644
--- a/examples/7guis-flight-booker-react/src/App.tsx
+++ b/examples/7guis-flight-booker-react/src/App.tsx
@@ -1,57 +1,80 @@
-import FlightContext from './machines/flightMachine';
-import { BookButton, Header } from './components';
-import { DateSelector, TripSelector } from './components';
-import { TODAY } from './utils';
+import FlightContext, { TODAY } from "./machines/flightMachine";
+import { BookButton, Header } from "./components";
+import { DateSelector, TripSelector } from "./components";
+import { format } from "date-fns";
+
+const dateFormat = "EEEE MMMM do, yyyy";
 
 export default function App() {
   const { send } = FlightContext.useActorRef();
   const state = FlightContext.useSelector((state) => state);
   const { departDate, returnDate } = state.context;
-  const isRoundTrip = state.matches({ scheduling: 'roundTrip' });
-  const isBooking = state.matches('booking');
-  const isBooked = state.matches('booked');
+  const isRoundTrip = state.context.tripType === "roundTrip";
+  const isBooking = state.matches("booking");
+  const isBooked = state.matches("booked");
 
   const isValidDepartDate = departDate >= TODAY;
   const isValidReturnDate = returnDate >= departDate;
 
-  return (
-    <main>
+  const successMessage = (
+    <>
+      <Header>Booked!</Header>
+      <p>
+        You booked a <b>{isRoundTrip ? "round trip" : "one way"}</b> flight.
+      </p>
+      <p>
+        <b>Departs:</b> {format(departDate, dateFormat)}
+      </p>
+      {isRoundTrip && (
+        <p>
+          <b>Returns:</b> {format(returnDate, dateFormat)}
+        </p>
+      )}
+    </>
+  );
+
+  const ui = (
+    <>
       <Header>Book Flight</Header>
       <TripSelector
         id="Trip Type"
         isBooking={isBooking}
         isBooked={isBooked}
-        tripType={isRoundTrip ? 'roundTrip' : 'oneWay'}
+        tripType={isRoundTrip ? "roundTrip" : "oneWay"}
       />
       <DateSelector
         id="Depart Date"
         value={departDate}
         isValidDate={isValidDepartDate}
-        disabled={isBooking || isBooked}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-          send({
-            type: 'CHANGE_DEPART_DATE',
-            value: e.currentTarget.value
-          })
-        }
-      />
-      <DateSelector
-        id="Return Date"
-        value={returnDate}
-        isValidDate={isValidReturnDate}
-        disabled={!isRoundTrip}
+        disabled={isBooking}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           send({
-            type: 'CHANGE_RETURN_DATE',
-            value: e.currentTarget.value
+            type: "CHANGE_DEPART_DATE",
+            value: e.currentTarget.value,
           })
         }
       />
+      {isRoundTrip && (
+        <DateSelector
+          id="Return Date"
+          value={returnDate}
+          isValidDate={isValidReturnDate}
+          disabled={!isRoundTrip || isBooking}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            send({
+              type: "CHANGE_RETURN_DATE",
+              value: e.currentTarget.value,
+            })
+          }
+        />
+      )}
       <BookButton
-        eventType={isRoundTrip ? 'BOOK_RETURN' : 'BOOK_DEPART'}
+        eventType={isRoundTrip ? "BOOK_RETURN" : "BOOK_DEPART"}
         isBooking={isBooking}
         isBooked={isBooked}
       />
-    </main>
+    </>
   );
+
+  return <main>{isBooked ? successMessage : ui}</main>;
 }
diff --git a/examples/7guis-flight-booker-react/src/components/BookButton.tsx b/examples/7guis-flight-booker-react/src/components/BookButton.tsx
index 9b58883073..8e160108e0 100644
--- a/examples/7guis-flight-booker-react/src/components/BookButton.tsx
+++ b/examples/7guis-flight-booker-react/src/components/BookButton.tsx
@@ -1,4 +1,4 @@
-import FlightContext from '../machines/flightMachine';
+import FlightContext from "../machines/flightMachine";
 
 type Props = {
   isBooking: boolean;
@@ -14,26 +14,9 @@ export default function BookButton({ eventType, isBooking, isBooked }: Props) {
 
   const bookFlight = () => send({ type: eventType });
 
-  const successMessage = (
-    <>
-      <h2>You booked a flight!</h2>
-      <p>
-        <span>Departs:</span> {state.context.departDate}
-      </p>
-      <p>
-        <span>Returns:</span> {state.context.returnDate}
-      </p>
-    </>
-  );
-
   return (
-    <>
-      <dialog open={isBooking || isBooked}>
-        {isBooking ? <p>Booking...</p> : successMessage}
-      </dialog>
-      <button onClick={bookFlight} disabled={!canBook}>
-        {isBooking ? 'Booking' : isBooked ? 'Booked!' : 'Book'}
-      </button>
-    </>
+    <button onClick={bookFlight} disabled={!canBook}>
+      {isBooking ? "Booking..." : "Book"}
+    </button>
   );
 }
diff --git a/examples/7guis-flight-booker-react/src/components/DateInput.tsx b/examples/7guis-flight-booker-react/src/components/DateInput.tsx
index 58c56b3cff..b5d58f1d35 100644
--- a/examples/7guis-flight-booker-react/src/components/DateInput.tsx
+++ b/examples/7guis-flight-booker-react/src/components/DateInput.tsx
@@ -6,7 +6,7 @@ function DateInput({ isValidDate, ...props }: Props) {
   return (
     <label>
       <span className="visually-hidden">{props.id}</span>
-      <input type="date" {...props} className={isValidDate ? '' : 'error'} />
+      <input type="date" {...props} className={isValidDate ? "" : "error"} />
     </label>
   );
 }
diff --git a/examples/7guis-flight-booker-react/src/components/TripSelector.tsx b/examples/7guis-flight-booker-react/src/components/TripSelector.tsx
index 51e21f0b30..486728f6f3 100644
--- a/examples/7guis-flight-booker-react/src/components/TripSelector.tsx
+++ b/examples/7guis-flight-booker-react/src/components/TripSelector.tsx
@@ -14,8 +14,9 @@ export default function TripSelector({
       <select
         disabled={isBooked || isBooking}
         value={tripType}
-        onChange={() => {
-          send({ type: "CHANGE_TRIP_TYPE" });
+        onChange={(e) => {
+          const selectedValue = e.currentTarget.value as "oneWay" | "roundTrip";
+          send({ type: "CHANGE_TRIP_TYPE", tripType: selectedValue });
         }}
         {...props}
       >
diff --git a/examples/7guis-flight-booker-react/src/components/index.ts b/examples/7guis-flight-booker-react/src/components/index.ts
index 049cff2df6..e58f05e36c 100644
--- a/examples/7guis-flight-booker-react/src/components/index.ts
+++ b/examples/7guis-flight-booker-react/src/components/index.ts
@@ -1,6 +1,6 @@
-import Header from './Header';
-import BookButton from './BookButton';
-import DateSelector from './DateInput';
-import TripSelector from './TripSelector';
+import Header from "./Header";
+import BookButton from "./BookButton";
+import DateSelector from "./DateInput";
+import TripSelector from "./TripSelector";
 
 export { Header, BookButton, DateSelector, TripSelector };
diff --git a/examples/7guis-flight-booker-react/src/machines/flightMachine.ts b/examples/7guis-flight-booker-react/src/machines/flightMachine.ts
index aa3ea12c06..cca705827a 100644
--- a/examples/7guis-flight-booker-react/src/machines/flightMachine.ts
+++ b/examples/7guis-flight-booker-react/src/machines/flightMachine.ts
@@ -1,107 +1,126 @@
-import { setup, assign, assertEvent, fromPromise } from 'xstate';
-import { createActorContext } from '@xstate/react';
-import { TODAY, TOMORROW } from '../utils';
-import { sleep } from '../utils';
+import { setup, assign, assertEvent, fromPromise } from "xstate";
+import { createActorContext } from "@xstate/react";
+import { generateDate } from "../utils";
+import { sleep } from "../utils";
+
+export const TODAY = generateDate(0);
+const TOMORROW = generateDate(1);
 
 export const flightBookerMachine = setup({
   types: {
     context: {} as FlightData,
     events: {} as
-      | { type: 'BOOK_DEPART' }
-      | { type: 'BOOK_RETURN' }
-      | { type: 'CHANGE_TRIP_TYPE' }
-      | { type: 'CHANGE_DEPART_DATE'; value: string }
-      | { type: 'CHANGE_RETURN_DATE'; value: string }
+      | { type: "BOOK_DEPART" }
+      | { type: "BOOK_RETURN" }
+      | { type: "CHANGE_TRIP_TYPE"; tripType: "oneWay" | "roundTrip" }
+      | { type: "CHANGE_DEPART_DATE"; value: string }
+      | { type: "CHANGE_RETURN_DATE"; value: string },
   },
   actions: {
     setDepartDate: assign(({ event }) => {
-      assertEvent(event, 'CHANGE_DEPART_DATE');
+      assertEvent(event, "CHANGE_DEPART_DATE");
       return { departDate: event.value };
     }),
     setReturnDate: assign(({ event }) => {
-      assertEvent(event, 'CHANGE_RETURN_DATE');
+      assertEvent(event, "CHANGE_RETURN_DATE");
       return { returnDate: event.value };
-    })
+    }),
+    setTripType: assign(({ event }) => {
+      assertEvent(event, "CHANGE_TRIP_TYPE");
+      return { tripType: event.tripType };
+    }),
   },
   actors: {
     Booker: fromPromise(() => {
-      return sleep(2000);
-    })
+      return sleep(1000);
+    }),
   },
   guards: {
-    'isValidDepartDate?': ({ context: { departDate } }) => {
+    "isValidDepartDate?": ({ context: { departDate } }) => {
       return departDate >= TODAY;
     },
-    'isValidReturnDate?': ({ context: { departDate, returnDate } }) => {
+    "isValidReturnDate?": ({ context: { departDate, returnDate } }) => {
       return departDate >= TODAY && returnDate > departDate;
-    }
-  }
+    },
+  },
 }).createMachine({
-  id: 'flightBookerMachine',
+  id: "flightBookerMachine",
   context: {
     departDate: TODAY,
-    returnDate: TOMORROW
+    returnDate: TOMORROW,
+    tripType: "oneWay",
   },
-  initial: 'scheduling',
+  initial: "scheduling",
   states: {
     scheduling: {
-      initial: 'oneWay',
+      initial: "oneWay",
       on: {
         CHANGE_DEPART_DATE: {
           actions: {
-            type: 'setDepartDate'
-          }
-        }
+            type: "setDepartDate",
+          },
+        },
+
+        BOOK_DEPART: {
+          target: "booking",
+          guard: {
+            type: "isValidDepartDate?",
+          },
+        },
+
+        BOOK_RETURN: {
+          target: "booking",
+          guard: {
+            type: "isValidReturnDate?",
+          },
+        },
       },
       states: {
         oneWay: {
           on: {
             CHANGE_TRIP_TYPE: {
-              target: 'roundTrip'
+              target: "roundTrip",
+              actions: {
+                type: "setTripType",
+                tripType: "roundTrip",
+              },
             },
-            BOOK_DEPART: {
-              target: '#flightBookerMachine.booking',
-              guard: {
-                type: 'isValidDepartDate?'
-              }
-            }
-          }
+          },
         },
         roundTrip: {
           on: {
             CHANGE_TRIP_TYPE: {
-              target: 'oneWay'
+              target: "oneWay",
+              actions: {
+                type: "setTripType",
+                tripType: "oneWay",
+              },
             },
+
             CHANGE_RETURN_DATE: {
               actions: {
-                type: 'setReturnDate'
-              }
+                type: "setReturnDate",
+              },
             },
-            BOOK_RETURN: {
-              target: '#flightBookerMachine.booking',
-              guard: {
-                type: 'isValidReturnDate?'
-              }
-            }
-          }
-        }
-      }
+          },
+        },
+      },
     },
     booking: {
       invoke: {
-        src: 'Booker',
+        src: "Booker",
         onDone: {
-          target: 'booked'
+          target: "booked",
         },
         onError: {
-          target: 'scheduling'
-        }
-      }
+          target: "scheduling",
+        },
+      },
     },
     booked: {
-      type: 'final'
-    }
-  }
+      type: "final",
+    },
+  },
 });
 
 export default createActorContext(flightBookerMachine);
diff --git a/examples/7guis-flight-booker-react/src/main.tsx b/examples/7guis-flight-booker-react/src/main.tsx
index aecc63e7d9..6e821ac917 100644
--- a/examples/7guis-flight-booker-react/src/main.tsx
+++ b/examples/7guis-flight-booker-react/src/main.tsx
@@ -1,12 +1,12 @@
-import './styles/reset.css';
-import './styles/styles.css';
+import "./styles/reset.css";
+import "./styles/styles.css";
 
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import FlightContext from './machines/flightMachine.ts';
-import App from './App.tsx';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import FlightContext from "./machines/flightMachine.ts";
+import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <FlightContext.Provider>
       <App />
diff --git a/examples/7guis-flight-booker-react/src/styles/reset.css b/examples/7guis-flight-booker-react/src/styles/reset.css
index 5bd00d4707..691da330e1 100644
--- a/examples/7guis-flight-booker-react/src/styles/reset.css
+++ b/examples/7guis-flight-booker-react/src/styles/reset.css
@@ -120,7 +120,7 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-  content: '';
+  content: "";
   content: none;
 }
 table {
diff --git a/examples/7guis-flight-booker-react/src/styles/styles.css b/examples/7guis-flight-booker-react/src/styles/styles.css
index c943de5e2e..b31e549a73 100644
--- a/examples/7guis-flight-booker-react/src/styles/styles.css
+++ b/examples/7guis-flight-booker-react/src/styles/styles.css
@@ -3,18 +3,19 @@
 ****************************/
 &:root {
   /* colors */
-  --white: hsl(0 0% 95%);
-  --black: hsl(0 0% 15%);
-  --gray: hsl(0 10% 70%);
-  --lightgray: hsl(0 20% 80%);
+
+  --dark-gray: hsl(0, 0%, 30%);
+  --gray: hsl(0, 0%, 50%);
+  --light-gray: hsl(0, 0%, 70%);
+  --white: hsl(0, 0%, 90%);
 
   /* shadows */
-  --box-border: var(--gray) 0px 0px 0px 2px inset, var(--black) 0px 0px 0px 2px;
-  --inner-shadow: inset 0 1px 2px hsl(0 0% 0%/0.8), 0 -1px 1px var(--gray),
-    0 1px 0 var(--gray);
-  --outer-shadow: 0.3px 0.5px 0.7px var(--black),
-    0.8px 1.6px 2px -0.8px var(--black), 2.1px 4.1px 5.2px -1.7px var(--black),
-    5px 10px 12.6px -2.5px var(--black);
+  --box-border: var(--white) 0px 0px 0px 2px inset,
+    var(--dark-gray) 0px 0px 0px 2px;
+  --outer-shadow: 0px 0.5px 0.7px var(--dark-gray),
+    0px 1.6px 2px -0.8px var(--dark-gray),
+    0px 4.1px 5.2px -1.7px var(--dark-gray),
+    0px 1px 2.6px -2.5px var(--dark-gray);
 }
 
 /****************************
@@ -39,18 +40,22 @@
 ****************************/
 body {
   display: grid;
-  min-height: 100vh;
   place-content: center;
-  background: var(--black);
+  margin-top: 2.5%;
+  background: #112;
+  color: var(--light-gray);
   & h1 {
-    margin-top: -4px;
-    color: var(--black);
     font-size: 2rem;
     font-weight: 700;
     letter-spacing: -0.05em;
+    text-align: center;
+    margin-top: -4px;
     padding-bottom: 6px;
     border-radius: 0;
-    border-bottom: 1px solid var(--black);
+    border-bottom: 1px solid var(--dark-gray);
+  }
+  & b {
+    font-weight: 700;
   }
 }
 
@@ -59,12 +64,10 @@ main {
   flex-direction: column;
   gap: 8px;
   padding: 16px;
-  background: var(--gray);
-  & .error {
-    background: red;
-    font-weight: 700;
-    color: white !important;
-  }
+  border: 1px solid var(--dark-gray);
+  background: linear-gradient(135deg, hsl(5 5% 25%/0.55), hsl(5 5% 25%/0.5));
+  box-shadow: 10px 10px 36px hsl(5 5% 25%/0.25),
+    -10px -10px 36px hsl(5 5% 25%/0.25);
 }
 
 dialog {
@@ -75,11 +78,11 @@ dialog {
   font-weight: 700;
   transition: background 0.5s;
   & h2 {
-    color: var(--black);
+    color: var(--dark-gray);
     font-size: 1.5rem;
     margin-bottom: 8px;
     padding: 8px 0;
-    border-bottom: 1px solid var(--black);
+    border-bottom: 1px solid var(--dark-gray);
     border-radius: 0;
   }
   & p {
@@ -90,21 +93,27 @@ dialog {
     }
   }
 }
-
-input[type='date'] {
+.error {
+  background: hsl(0 100% 50%/0.25);
+  font-weight: 700;
+  color: white !important;
+  border: 1px solid white !important;
+}
+input[type="date"] {
+  text-align: center;
   cursor: pointer;
-  box-shadow: var(--inner-shadow);
-  color: var(--black);
-  border-bottom: 1px solid var(--lightgray);
+  color: var(--dark-gray);
+  border: 1px solid var(--light-gray);
   &:disabled {
     cursor: not-allowed;
   }
 }
 
 select {
+  text-align: center;
   cursor: pointer;
   color: var(--white);
-  background: var(--black);
+  background: var(--dark-gray);
   &:hover {
     box-shadow: var(--box-border);
   }
@@ -115,7 +124,7 @@ button {
   color: var(--white);
   font-weight: 500;
   font-family: inherit;
-  background-color: var(--black);
+  background-color: var(--dark-gray);
   &:hover:not(:disabled) {
     box-shadow: var(--box-border);
   }
diff --git a/examples/7guis-flight-booker-react/src/utils/index.ts b/examples/7guis-flight-booker-react/src/utils/index.ts
index 223fbfea6e..0cf2dbda66 100644
--- a/examples/7guis-flight-booker-react/src/utils/index.ts
+++ b/examples/7guis-flight-booker-react/src/utils/index.ts
@@ -1,9 +1,6 @@
-// CONSTANTS
-export const TODAY = new Date().toISOString().split('T')[0];
-
-export const TOMORROW = new Date(Date.now() + 86400000)
-  .toISOString()
-  .split('T')[0];
+export function generateDate(days: number) {
+  return new Date(Date.now() + days * 86400000).toISOString().split("T")[0];
+}
 
 // Emulate async operation
 export function sleep(ms: number) {