attempt new formula

eslint.config.js

@@ -14,7 +14,7 @@ export default tseslint.config(
     files: ["**/*.ts", "**/*.tsx"],
     extends: [
       ...tseslint.configs.recommended,
-      ...tseslint.configs.strictTypeChecked,
+      ...tseslint.configs.recommendedTypeChecked,
       ...tseslint.configs.stylisticTypeChecked,
     ],
     rules: {

package-lock.json

@@ -11,6 +11,7 @@
         "@hookform/resolvers": "^5.0.1",
         "@radix-ui/react-accordion": "^1.2.8",
         "@radix-ui/react-label": "^2.1.4",
+        "@radix-ui/react-select": "^2.2.2",
         "@radix-ui/react-slot": "^1.2.0",
         "@t3-oss/env-nextjs": "^0.12.0",
         "class-variance-authority": "^0.7.1",
@@ -238,6 +239,44 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
     "node_modules/@hookform/resolvers": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.0.1.tgz",
@@ -898,6 +937,12 @@
         "node": ">=12.4.0"
       }
     },
+    "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.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
@@ -935,6 +980,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.4.tgz",
+      "integrity": "sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.0"
+      },
+      "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-collapsible": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.8.tgz",
@@ -1036,6 +1104,73 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.7.tgz",
+      "integrity": "sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.0",
+        "@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.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "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.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.4.tgz",
+      "integrity": "sha512-r2annK27lIW5w9Ho5NyQgqs0MmgZSTIKXWpVCJaLC1q2kZrZkcqnmHkCHMEmv8XLvsLlurKMPT+kbKkRkm/xVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.0",
+        "@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",
@@ -1077,6 +1212,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.4.tgz",
+      "integrity": "sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.4",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.0",
+        "@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.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.6.tgz",
+      "integrity": "sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.0",
+        "@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.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
@@ -1124,6 +1315,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.2.tgz",
+      "integrity": "sha512-HjkVHtBkuq+r3zUAZ/CvNWUGKPfuicGDbgtZgiQuFmNcV5F+Tgy24ep2nsAW2nFgvhGPJVqeBZa6KyVN0EyrBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.4",
+        "@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.7",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.4",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.4",
+        "@radix-ui/react-portal": "1.1.6",
+        "@radix-ui/react-primitive": "2.1.0",
+        "@radix-ui/react-slot": "1.2.0",
+        "@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.0",
+        "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.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
@@ -1142,6 +1376,21 @@
         }
       }
     },
+    "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",
@@ -1179,6 +1428,24 @@
         }
       }
     },
+    "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",
@@ -1194,6 +1461,86 @@
         }
       }
     },
+    "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.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.0.tgz",
+      "integrity": "sha512-rQj0aAWOpCdCMRbI6pLQm8r7S2BM3YhTa0SzOYD55k+hJA8oo9J+H+9wLM9oMlZWOX/wJWPTzfDfmZkf7LvCfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.0"
+      },
+      "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/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2209,6 +2556,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -2928,6 +3287,12 @@
         "node": ">=8"
       }
     },
+    "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/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -3822,6 +4187,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",
@@ -5610,6 +5984,53 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
+      "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-smooth": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
@@ -5625,6 +6046,28 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "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-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6617,6 +7060,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/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@hookform/resolvers": "^5.0.1",
     "@radix-ui/react-accordion": "^1.2.8",
     "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slot": "^1.2.0",
     "@t3-oss/env-nextjs": "^0.12.0",
     "class-variance-authority": "^0.7.1",

src/app/components/FireCalculatorForm.tsx

@@ -33,6 +33,13 @@ import {
   YAxis,
   ReferenceLine,
 } from "recharts";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 // Schema for form validation
 const formSchema = z.object({
@@ -53,6 +60,7 @@ const formSchema = z.object({
   lifeExpectancy: z.coerce
     .number()
     .min(50, "Life expectancy must be at least 50"),
+  retirementStrategy: z.enum(["Depletion", "Maintenance", "4% Rule"]),
 });
 
 // Type for form values
@@ -87,6 +95,7 @@ export default function FireCalculatorForm() {
       desiredMonthlyAllowance: 2000,
       inflationRate: 2,
       lifeExpectancy: 84,
+      retirementStrategy: "Depletion",
     },
   });
 
@@ -100,29 +109,20 @@ export default function FireCalculatorForm() {
     const initialMonthlyAllowance = values.desiredMonthlyAllowance;
     const annualInflation = values.inflationRate / 100;
     const lifeExpectancy = values.lifeExpectancy;
+    const retirementStrategy = values.retirementStrategy;
 
     const monthlyGrowthRate = Math.pow(1 + annualGrowthRate, 1 / 12) - 1;
     const monthlyInflationRate = Math.pow(1 + annualInflation, 1 / 12) - 1;
-    const maxIterations = 1000; // Safety limit for iterations
+    const maxIterations = 100; // Adjusted max iterations for age limit
 
-    // Binary search for the required retirement capital
+    let requiredCapital: number | null = null;
-    let low = initialMonthlyAllowance * 12; // Minimum: one year of expenses
+    let retirementAge: number | null = null;
-    let high = initialMonthlyAllowance * 12 * 100; // Maximum: hundred years of expenses
+    let finalInflationAdjustedAllowance: number | null = null;
-    let requiredCapital = 0;
-    let retirementAge = 0;
-    let finalInflationAdjustedAllowance = 0;
-
-    // First, find when retirement is possible with accumulation phase
     let canRetire = false;
-    let currentCapital = startingCapital;
+    let errorMessage: string | undefined = undefined;
-    let age = currentAge;
-    let monthlyAllowance = initialMonthlyAllowance;
-    let iterations = 0;
 
     // Array to store yearly data for the chart
     const yearlyData: CalculationResult["yearlyData"] = [];
-
-    // Add starting point
     yearlyData.push({
       age: currentAge,
       year: currentYear,
@@ -130,79 +130,91 @@ export default function FireCalculatorForm() {
       phase: "accumulation",
     });
 
-    // Accumulation phase simulation
+    let currentCapital = startingCapital;
-    while (age < lifeExpectancy && iterations < maxIterations) {
+    let age = currentAge;
-      // Simulate one year of saving and growth
+    let monthlyAllowance = initialMonthlyAllowance;
-      for (let month = 0; month < 12; month++) {
-        currentCapital += monthlySavings;
-        currentCapital *= 1 + monthlyGrowthRate;
-        // Update allowance for inflation
-        monthlyAllowance *= 1 + monthlyInflationRate;
-      }
-      age++;
-      iterations++;
 
-      // Record yearly data
+    // --- Calculation Logic based on Strategy ---
-      yearlyData.push({
-        age: age,
-        year: currentYear + (age - currentAge),
-        balance: Math.round(currentCapital),
-        phase: "accumulation",
-      });
 
-      // Check each possible retirement capital target through binary search
+    if (retirementStrategy === "4% Rule") {
-      const mid = (low + high) / 2;
+      // --- 4% Rule Calculation ---
-      if (high - low < 1) {
+      requiredCapital = (initialMonthlyAllowance * 12) / 0.04;
-        // Binary search converged
-        requiredCapital = mid;
-        break;
-      }
 
-      // Test if this retirement capital is sufficient
+      // Simulate accumulation until the 4% rule target is met
-      let testCapital = mid;
+      while (age < lifeExpectancy) {
-      let testAge = age;
+        if (currentCapital >= requiredCapital) {
-      let testAllowance = monthlyAllowance;
-      let isSufficient = true;
-
-      // Simulate retirement phase with this capital
-      while (testAge < lifeExpectancy) {
-        for (let month = 0; month < 12; month++) {
-          // Withdraw inflation-adjusted allowance
-          testCapital -= testAllowance;
-          // Grow remaining capital
-          testCapital *= 1 + monthlyGrowthRate;
-          // Adjust allowance for inflation
-          testAllowance *= 1 + monthlyInflationRate;
-        }
-        testAge++;
-
-        // Check if we've depleted capital before life expectancy
-        if (testCapital <= 0) {
-          isSufficient = false;
-          break;
-        }
-      }
-
-      if (isSufficient) {
-        high = mid; // This capital or less might be enough
-        if (currentCapital >= mid) {
-          // We can retire now with this capital
           canRetire = true;
           retirementAge = age;
-          requiredCapital = mid;
           finalInflationAdjustedAllowance = monthlyAllowance;
-          break;
+          break; // Found retirement age
         }
-      } else {
-        low = mid; // We need more capital
-      }
-    }
 
-    // If we didn't find retirement possible in the loop
+        // Simulate one year of saving and growth
-    if (!canRetire && iterations < maxIterations) {
+        for (let month = 0; month < 12; month++) {
-      // Continue accumulation phase until we reach sufficient capital
+          currentCapital += monthlySavings;
+          currentCapital *= 1 + monthlyGrowthRate;
+          monthlyAllowance *= 1 + monthlyInflationRate; // Keep track of inflation-adjusted allowance
+        }
+        age++;
+
+        yearlyData.push({
+          age: age,
+          year: currentYear + (age - currentAge),
+          balance: Math.round(currentCapital),
+          phase: "accumulation",
+        });
+
+        if (age >= lifeExpectancy) break; // Stop if life expectancy is reached
+      }
+
+      if (!canRetire) {
+        errorMessage =
+          "Cannot reach FIRE goal (4% Rule) before life expectancy.";
+        requiredCapital = null; // Cannot retire, so no specific FIRE number applies this way
+      } else if (retirementAge !== null) {
+        // Simulate retirement phase for chart data (using 4% withdrawal adjusted for inflation)
+        let simulationCapital = currentCapital;
+        let simulationAge = retirementAge;
+        let simulationAllowance = finalInflationAdjustedAllowance!;
+
+        // Mark retirement phase in existing data
+        yearlyData.forEach((data) => {
+          if (data.age >= retirementAge!) {
+            data.phase = "retirement";
+          }
+        });
+
+        while (simulationAge < lifeExpectancy) {
+          let yearlyWithdrawal = requiredCapital * 0.04; // Initial 4%
+          // Adjust for inflation annually from retirement start
+          yearlyWithdrawal *= Math.pow(
+            1 + annualInflation,
+            simulationAge - retirementAge,
+          );
+          const monthlyWithdrawal = yearlyWithdrawal / 12;
+
+          for (let month = 0; month < 12; month++) {
+            simulationCapital -=
+              monthlyWithdrawal * Math.pow(1 + monthlyInflationRate, month); // Approximate intra-year inflation on withdrawal
+            simulationCapital *= 1 + monthlyGrowthRate;
+          }
+          simulationAge++;
+
+          yearlyData.push({
+            age: simulationAge,
+            year: currentYear + (simulationAge - currentAge),
+            balance: Math.round(simulationCapital),
+            phase: "retirement",
+          });
+        }
+      }
+    } else {
+      // --- Depletion and Maintenance Calculation (Simulation-based) ---
+      let iterations = 0;
+
       while (age < lifeExpectancy && iterations < maxIterations) {
-        // Simulate one year
+        // Simulate one year of saving and growth
+        let yearStartCapital = currentCapital;
         for (let month = 0; month < 12; month++) {
           currentCapital += monthlySavings;
           currentCapital *= 1 + monthlyGrowthRate;
@@ -211,7 +223,6 @@ export default function FireCalculatorForm() {
         age++;
         iterations++;
 
-        // Record yearly data
         yearlyData.push({
           age: age,
           year: currentYear + (age - currentAge),
@@ -219,71 +230,120 @@ export default function FireCalculatorForm() {
           phase: "accumulation",
         });
 
-        // Test with current capital
+        // --- Check if retirement is possible at this age ---
         let testCapital = currentCapital;
         let testAge = age;
         let testAllowance = monthlyAllowance;
         let isSufficient = true;
 
-        // Simulate retirement with current capital
+        // Simulate retirement phase to check sufficiency
         while (testAge < lifeExpectancy) {
+          let yearlyStartCapital = testCapital;
+          let yearlyGrowth = 0;
+          let yearlyWithdrawal = 0;
+
           for (let month = 0; month < 12; month++) {
-            testCapital -= testAllowance;
+            let withdrawal = testAllowance;
-            testCapital *= 1 + monthlyGrowthRate;
+            yearlyWithdrawal += withdrawal;
-            testAllowance *= 1 + monthlyInflationRate;
+            testCapital -= withdrawal;
+            let growth = testCapital * monthlyGrowthRate;
+            yearlyGrowth += growth;
+            testCapital += growth; // Apply growth *after* withdrawal for the month
+            testAllowance *= 1 + monthlyInflationRate; // Inflate allowance for next month
           }
           testAge++;
 
           if (testCapital <= 0) {
+            // Depleted capital before life expectancy
             isSufficient = false;
             break;
           }
-        }
+
+          if (retirementStrategy === "Maintenance") {
+            // Maintenance check: Withdrawal should not exceed growth for the year
+            // Use average capital for a slightly more stable check? Or end-of-year growth vs start-of-year withdrawal?
+            // Let's check if end-of-year capital is less than start-of-year capital
+            if (testCapital < yearlyStartCapital) {
+              isSufficient = false;
+              break; // Capital decreased, maintenance failed
+            }
+            // Alternative check: yearlyWithdrawal > yearlyGrowth
+            // if (yearlyWithdrawal > yearlyGrowth) {
+            //     isSufficient = false;
+            //     break; // Withdrawals exceed growth, maintenance failed
+            // }
+          }
+        } // End retirement simulation check
 
         if (isSufficient) {
           canRetire = true;
           retirementAge = age;
-          requiredCapital = currentCapital;
+          requiredCapital = currentCapital; // The capital needed at this point
-          finalInflationAdjustedAllowance = monthlyAllowance;
+          finalInflationAdjustedAllowance = monthlyAllowance; // Allowance level at retirement
-          break;
+          break; // Found retirement age
         }
-      }
+      } // End accumulation simulation loop
-    }
 
-    // If retirement is possible, simulate the retirement phase for the chart
+      if (!canRetire) {
-    if (canRetire) {
+        errorMessage = `Cannot reach FIRE goal (${retirementStrategy}) before life expectancy or within ${maxIterations} years.`;
-      // Update the phase for all years after retirement
+        requiredCapital = null;
-      yearlyData.forEach((data) => {
+      } else if (retirementAge !== null) {
-        if (data.age >= retirementAge) {
+        // Simulate the actual retirement phase for chart data if retirement is possible
-          data.phase = "retirement";
+        let simulationCapital = requiredCapital!;
-        }
+        let simulationAge = retirementAge;
-      });
+        let simulationAllowance = finalInflationAdjustedAllowance!;
 
-      // Continue simulation for retirement phase if needed
+        // Mark retirement phase in existing data
-      let simulationCapital = currentCapital;
+        yearlyData.forEach((data) => {
-      let simulationAllowance = monthlyAllowance;
+          if (data.age >= retirementAge!) {
-      let simulationAge = age;
+            data.phase = "retirement";
-
+          }
-      // If we haven't simulated up to life expectancy, continue
-      while (simulationAge < lifeExpectancy) {
-        for (let month = 0; month < 12; month++) {
-          simulationCapital -= simulationAllowance;
-          simulationCapital *= 1 + monthlyGrowthRate;
-          simulationAllowance *= 1 + monthlyInflationRate;
-        }
-        simulationAge++;
-
-        // Record yearly data
-        yearlyData.push({
-          age: simulationAge,
-          year: currentYear + (simulationAge - currentAge),
-          balance: Math.round(simulationCapital),
-          phase: "retirement",
         });
-      }
-    }
 
-    if (canRetire) {
+        // Simulate remaining years until life expectancy
+        while (simulationAge < lifeExpectancy) {
+          for (let month = 0; month < 12; month++) {
+            simulationCapital -= simulationAllowance;
+            simulationCapital *= 1 + monthlyGrowthRate;
+            simulationAllowance *= 1 + monthlyInflationRate;
+          }
+          simulationAge++;
+
+          // Ensure capital doesn't go below zero for chart visibility in Depletion
+          const displayBalance =
+            retirementStrategy === "Depletion"
+              ? Math.max(0, simulationCapital)
+              : simulationCapital;
+
+          yearlyData.push({
+            age: simulationAge,
+            year: currentYear + (simulationAge - currentAge),
+            balance: Math.round(displayBalance),
+            phase: "retirement",
+          });
+        }
+      }
+    } // End Depletion/Maintenance logic
+
+    // --- Set Final Result ---
+    if (
+      canRetire &&
+      retirementAge !== null &&
+      requiredCapital !== null &&
+      finalInflationAdjustedAllowance !== null
+    ) {
+      // Ensure yearlyData covers up to lifeExpectancy if retirement happens early
+      const lastDataYear =
+        yearlyData[yearlyData.length - 1]?.year ?? currentYear;
+      const expectedEndYear = currentYear + (lifeExpectancy - currentAge);
+      if (lastDataYear < expectedEndYear) {
+        // Need to continue simulation purely for charting if the main calc stopped early
+        // (This might already be covered by the post-retirement simulation loops added above)
+        console.warn(
+          "Chart data might not extend fully to life expectancy in some scenarios.",
+        );
+      }
+
       setResult({
         fireNumber: requiredCapital,
         retirementAge: retirementAge,
@@ -298,11 +358,9 @@ export default function FireCalculatorForm() {
         retirementAge: null,
         inflationAdjustedAllowance: null,
         retirementYears: null,
-        yearlyData: yearlyData,
+        yearlyData: yearlyData, // Show accumulation data even if goal not reached
         error:
-          iterations >= maxIterations
+          errorMessage ?? "Calculation failed to find a retirement scenario.",
-            ? "Calculation exceeded maximum iterations."
-            : "Cannot reach FIRE goal before life expectancy with current parameters.",
       });
     }
   }
@@ -451,6 +509,33 @@ export default function FireCalculatorForm() {
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="retirementStrategy"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Retirement Strategy</FormLabel>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select a retirement strategy" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="Depletion">Depletion</SelectItem>
+                          <SelectItem value="Maintenance">
+                            Maintenance
+                          </SelectItem>
+                          <SelectItem value="4% Rule">4% Rule</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
               </div>
 
               <Button type="submit" className="w-full">
@@ -473,7 +558,10 @@ export default function FireCalculatorForm() {
               ) : (
                 <div className="space-y-4">
                   <div>
-                    <Label>FIRE Number (Required Capital)</Label>
+                    <Label>
+                      FIRE Number (Required Capital at Retirement - Strategy:{" "}
+                      {form.getValues().retirementStrategy})
+                    </Label>
                     <p className="text-2xl font-bold">
                       {formatNumber(result.fireNumber)}
                     </p>
@@ -562,8 +650,8 @@ export default function FireCalculatorForm() {
                             <div className="bg-background border p-2 shadow-sm">
                               <p className="font-medium">{`Year: ${data.year.toString()} (Age: ${data.age.toString()})`}</p>
                               <p className="text-primary">{`Balance: ${formatNumber(data.balance)}`}</p>
-                              {result.fireNumber && (
+                              {result.fireNumber !== null && (
-                                <p className="text-destructive">{`FIRE Number: ${formatNumber(result.fireNumber)}`}</p>
+                                <p className="text-destructive">{`Target FIRE Number: ${formatNumber(result.fireNumber)}`}</p>
                               )}
                               <p>{`Phase: ${data.phase === "accumulation" ? "Accumulation" : "Retirement"}`}</p>
                             </div>

src/components/ui/select.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+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,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *: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",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </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-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          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(
+            "p-1",
+            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("text-muted-foreground px-2 py-1.5 text-xs", 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 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </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,
+}