From 36d083bf0066a1e33ca3f5d584f5a5846ae1133f Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Wed, 12 Mar 2025 14:08:56 -0500
Subject: [PATCH 01/22] basic build config for types

---
 package-lock.json | 179 ++++++++++++++++++++++++++++++++++++++--------
 package.json      |  16 +++--
 tsconfig.json     |  17 +++++
 3 files changed, 177 insertions(+), 35 deletions(-)
 create mode 100644 tsconfig.json

diff --git a/package-lock.json b/package-lock.json
index 1302363..35482a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,9 +15,13 @@
       },
       "devDependencies": {
         "@carbonplan/prettier": "^1.2.0",
+        "@types/node": "^22.13.10",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
         "microbundle": "^0.13.0",
         "prettier": "^2.2.1",
-        "rimraf": "3.0.2"
+        "rimraf": "3.0.2",
+        "typescript": "^5.8.2"
       },
       "peerDependencies": {
         "@emotion/react": ">=11.1.5",
@@ -2595,16 +2599,48 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.8.tgz",
-      "integrity": "sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==",
-      "dev": true
+      "version": "22.13.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.10.tgz",
+      "integrity": "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
+      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
+      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3368,6 +3404,7 @@
       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
       "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "commondir": "^1.0.1",
         "make-dir": "^3.0.2",
@@ -3391,6 +3428,7 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -3417,6 +3455,7 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
       "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^4.0.0",
@@ -3447,9 +3486,13 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/generic-names": {
       "version": "4.0.0",
@@ -3511,10 +3554,11 @@
       "dev": true
     },
     "node_modules/graceful-fs": {
-      "version": "4.2.10",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "dev": true
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/gzip-size": {
       "version": "6.0.0",
@@ -3764,6 +3808,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
       "dev": true,
+      "license": "MIT",
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -3805,6 +3850,7 @@
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -3868,6 +3914,7 @@
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -3977,6 +4024,7 @@
       "resolved": "https://registry.npmjs.org/microbundle/-/microbundle-0.13.3.tgz",
       "integrity": "sha512-nlP20UmyqGGeh6jhk8VaVFEoRlF+JAvnwixPLQUwHEcAF59ROJCyh34eylJzUAVNvF3yrCaHxIBv8lYcphDM1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.12.10",
         "@babel/plugin-proposal-class-properties": "7.12.1",
@@ -4023,6 +4071,20 @@
         "microbundle": "dist/cli.js"
       }
     },
+    "node_modules/microbundle/node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4216,6 +4278,7 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -4231,6 +4294,7 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -4271,6 +4335,7 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -4308,6 +4373,7 @@
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -4368,6 +4434,7 @@
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
       "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "find-up": "^4.0.0"
       },
@@ -5318,6 +5385,7 @@
       "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.29.0.tgz",
       "integrity": "sha512-YytahBSZCIjn/elFugEGQR5qTsVhxhUwGZIsA9TmrSsC88qroGo65O5HZP/TTArH2dm0vUmYWhKchhwi2wL9bw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^3.1.0",
         "find-cache-dir": "^3.3.1",
@@ -5335,6 +5403,7 @@
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
       "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-parse": "^1.0.6"
       },
@@ -5346,7 +5415,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
       "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==",
-      "dev": true
+      "dev": true,
+      "license": "0BSD"
     },
     "node_modules/rollup-pluginutils": {
       "version": "2.8.2",
@@ -5685,18 +5755,26 @@
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -5742,6 +5820,7 @@
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -7611,16 +7690,42 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.11.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.8.tgz",
-      "integrity": "sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==",
-      "dev": true
+      "version": "22.13.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.10.tgz",
+      "integrity": "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==",
+      "dev": true,
+      "requires": {
+        "undici-types": "~6.20.0"
+      }
     },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "18.3.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
+      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
+      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "dev": true,
+      "requires": {}
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -8227,9 +8332,9 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "generic-names": {
       "version": "4.0.0",
@@ -8279,9 +8384,9 @@
       "dev": true
     },
     "graceful-fs": {
-      "version": "4.2.10",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
     "gzip-size": {
@@ -8693,6 +8798,14 @@
         "tiny-glob": "^0.2.8",
         "tslib": "^2.0.3",
         "typescript": "^4.1.3"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "4.9.5",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+          "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+          "dev": true
+        }
       }
     },
     "minimatch": {
@@ -9838,9 +9951,15 @@
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "dev": true
+    },
+    "undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
       "dev": true
     },
     "unicode-canonical-property-names-ecmascript": {
diff --git a/package.json b/package.json
index b00e3e8..30e600e 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,14 @@
   "name": "@carbonplan/components",
   "version": "13.1.1",
   "description": "shared components for our websites",
-  "main": "dst/index.js",
+  "main": "dst/index.ts",
   "module": "dst/index.esm.js",
+  "types": "dst/types/index.d.ts",
   "scripts": {
-    "build": "rimraf dst && microbundle src/index.js -o dst/index.js --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment",
-    "watch": "microbundle watch src/index.js -o dst/index.js --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment",
-    "format": "prettier --write 'src/**/*.js' '*.css'"
+    "clean": "rimraf dst",
+    "build": "npm run clean && tsc --emitDeclarationOnly && microbundle src/index.ts -o dst/index.js --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment",
+    "watch": "npm run clean && microbundle watch src/index.ts -o dst/index.js --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment & tsc --watch --emitDeclarationOnly",
+    "format": "prettier --write 'src/**/*.{ts,tsx,js}' '*.css'"
   },
   "repository": {
     "type": "git",
@@ -45,8 +47,12 @@
   },
   "devDependencies": {
     "@carbonplan/prettier": "^1.2.0",
+    "@types/node": "^22.13.10",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "microbundle": "^0.13.0",
     "prettier": "^2.2.1",
-    "rimraf": "3.0.2"
+    "rimraf": "3.0.2",
+    "typescript": "^5.8.2"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..daad392
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "./dst/types",
+    "outDir": "./dst"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

From c56c8cb31647a4d89517f6614bacc8be18bbfb31 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Wed, 12 Mar 2025 14:16:09 -0500
Subject: [PATCH 02/22] types for layout related components

---
 src/{dimmer.js => dimmer.tsx}     | 11 ++++--
 src/{header.js => header.tsx}     | 57 +++++++++++++++++++++++++------
 src/{index.js => index.ts}        |  4 +++
 src/{layout.js => layout.tsx}     | 35 +++++++++++++++----
 src/{settings.js => settings.tsx} | 10 +++++-
 5 files changed, 98 insertions(+), 19 deletions(-)
 rename src/{dimmer.js => dimmer.tsx} (77%)
 rename src/{header.js => header.tsx} (82%)
 rename src/{index.js => index.ts} (91%)
 rename src/{layout.js => layout.tsx} (81%)
 rename src/{settings.js => settings.tsx} (90%)

diff --git a/src/dimmer.js b/src/dimmer.tsx
similarity index 77%
rename from src/dimmer.js
rename to src/dimmer.tsx
index 77d00a8..edeebaa 100644
--- a/src/dimmer.js
+++ b/src/dimmer.tsx
@@ -1,9 +1,16 @@
 import React from 'react'
-import { Box, IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode } from 'theme-ui'
 import { useCallback } from 'react'
+// @ts-ignore
 import { Sun } from '@carbonplan/icons'
+import { ThemeUIStyleObject } from 'theme-ui'
 
-const Dimmer = ({ sx, ...props }) => {
+export type DimmerProps = {
+  sx?: ThemeUIStyleObject
+  [key: string]: any
+}
+
+const Dimmer = ({ sx = {}, ...props }: DimmerProps) => {
   const [colorMode, setColorMode] = useColorMode()
 
   const toggle = useCallback(() => {
diff --git a/src/header.js b/src/header.tsx
similarity index 82%
rename from src/header.js
rename to src/header.tsx
index a7ba0f5..6225fe0 100644
--- a/src/header.js
+++ b/src/header.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
+import React, { useState, ReactNode, MouseEvent } from 'react'
 import { default as NextLink } from 'next/link'
-import { Box, Flex, Container, Link } from 'theme-ui'
+import { Box, Flex, Container, Link, ThemeUIStyleObject } from 'theme-ui'
+// @ts-ignore
 import { Arrow } from '@carbonplan/icons'
 import Logo from './logo'
 import Row from './row'
@@ -8,7 +9,11 @@ import Column from './column'
 import Menu from './menu'
 
 const sx = {
-  link: (current, label, first = false) => {
+  link: (
+    current: string | undefined,
+    label: string,
+    first = false
+  ): ThemeUIStyleObject => {
     return {
       width: 'auto',
       color: current === label ? 'secondary' : 'text',
@@ -37,14 +42,19 @@ const sx = {
   },
 }
 
-const links = [
+export type LinkItem = {
+  url: string
+  display: string
+}
+
+const links: LinkItem[] = [
   { url: 'about', display: 'About' },
   { url: 'research', display: 'Research' },
   { url: 'blog', display: 'Blog' },
   { url: 'press', display: 'Press' },
 ]
 
-const HoverArrow = () => {
+const HoverArrow: React.FC = () => {
   return (
     <Arrow
       id='arrow'
@@ -64,7 +74,15 @@ const HoverArrow = () => {
   )
 }
 
-const Nav = ({ link, mode, nav, first, setExpanded }) => {
+export type NavProps = {
+  link: LinkItem
+  mode: 'homepage' | 'local' | 'remote' | null
+  nav?: string
+  first: boolean
+  setExpanded: (expanded: boolean) => void
+}
+
+const Nav: React.FC<NavProps> = ({ link, mode, nav, first, setExpanded }) => {
   const { url, display } = link
   const href = mode === 'remote' ? 'https://carbonplan.org/' + url : '/' + url
 
@@ -92,7 +110,19 @@ const Nav = ({ link, mode, nav, first, setExpanded }) => {
   }
 }
 
-const NavGroup = ({ links, nav, mode, setExpanded }) => {
+export type NavGroupProps = {
+  links: LinkItem[]
+  nav?: string
+  mode: 'homepage' | 'local' | 'remote' | null
+  setExpanded: (expanded: boolean) => void
+}
+
+const NavGroup: React.FC<NavGroupProps> = ({
+  links,
+  nav,
+  mode,
+  setExpanded,
+}) => {
   return links.map((d, i) => {
     return (
       <Nav
@@ -107,10 +137,17 @@ const NavGroup = ({ links, nav, mode, setExpanded }) => {
   })
 }
 
-const Header = ({ status, mode, nav, menuItems }) => {
-  const [expanded, setExpanded] = useState(false)
+export type HeaderProps = {
+  status?: string
+  mode: 'homepage' | 'local' | 'remote' | null
+  nav?: string
+  menuItems?: ReactNode
+}
+
+const Header: React.FC<HeaderProps> = ({ status, mode, nav, menuItems }) => {
+  const [expanded, setExpanded] = useState<boolean>(false)
 
-  const toggle = (e) => {
+  const toggle = (e: MouseEvent<HTMLButtonElement>): void => {
     setExpanded(!expanded)
   }
 
diff --git a/src/index.js b/src/index.ts
similarity index 91%
rename from src/index.js
rename to src/index.ts
index 499d8de..6be1c02 100644
--- a/src/index.js
+++ b/src/index.ts
@@ -10,6 +10,7 @@ export { default as Colors } from './colors'
 export { default as Column } from './column'
 export { default as Custom404 } from './custom-404'
 export { default as Dimmer } from './dimmer'
+export type { DimmerProps } from './dimmer'
 export { default as Expander } from './expander'
 export { default as FadeIn } from './fade-in'
 export { default as Figure } from './figure'
@@ -19,9 +20,11 @@ export { default as Footer } from './footer'
 export { default as Group } from './group'
 export { default as Guide } from './guide'
 export { default as Header } from './header'
+export type { HeaderProps } from './header'
 export { default as Heading } from './heading'
 export { default as Input } from './input'
 export { default as Layout } from './layout'
+export type { LayoutProps } from './layout'
 export { default as Link } from './link'
 export { default as LinkGroup } from './link-group'
 export { default as Logo } from './logo'
@@ -32,6 +35,7 @@ export { default as Row } from './row'
 export { default as Scrollbar } from './scrollbar'
 export { default as Select } from './select'
 export { default as Settings } from './settings'
+export type { SettingsProps } from './settings'
 export { default as Slider } from './slider'
 export { default as Table } from './table'
 export { default as TableCaption } from './table-caption'
diff --git a/src/layout.js b/src/layout.tsx
similarity index 81%
rename from src/layout.js
rename to src/layout.tsx
index 60c92dc..2fe221b 100644
--- a/src/layout.js
+++ b/src/layout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, ReactNode } from 'react'
 import { useThemeUI, Container, Flex, Box } from 'theme-ui'
 import Meta from './meta'
 import Header from './header'
@@ -8,9 +8,30 @@ import Metadata from './metadata'
 import FadeIn from './fade-in'
 import Scrollbar from './scrollbar'
 import Guide from './guide'
-import Settings from './settings'
+import Settings, { SettingsProps } from './settings'
 
-const Layout = ({
+export type LayoutProps = {
+  title?: string
+  description?: string
+  url?: string
+  card?: string
+  children?: ReactNode
+  status?: string
+  nav?: string
+  settings?: SettingsProps
+  footer?: boolean
+  header?: boolean
+  metadata?: 'mouse' | 'scroll' | boolean
+  links?: 'remote' | 'local' | 'homepage' | null
+  dimmer?: 'bottom' | 'top'
+  guide?: boolean | string
+  scrollbar?: boolean
+  fade?: boolean
+  container?: boolean
+  printable?: boolean
+}
+
+const Layout: React.FC<LayoutProps> = ({
   title,
   description,
   url,
@@ -56,13 +77,15 @@ const Layout = ({
   useEffect(() => {
     if (!theme) return
 
-    const handler = (e) => {
+    const handler = (e: MediaQueryListEvent) => {
       if (e.matches && settings?.value && settings?.onClick) {
         settings?.onClick()
       }
     }
 
-    const query = window.matchMedia(`(min-width: ${theme.breakpoints[1]})`)
+    const query = window.matchMedia(
+      `(min-width: ${theme?.breakpoints?.[1] || '64em'})`
+    )
     query.onchange = handler
 
     return () => {
@@ -98,7 +121,7 @@ const Layout = ({
 
   return (
     <>
-      {guide && <Guide color={guide} />}
+      {typeof guide === 'string' ? <Guide color={guide} /> : guide && <Guide />}
       {scrollbar && <Scrollbar />}
       <Meta card={card} description={description} title={title} url={url} />
       <Flex
diff --git a/src/settings.js b/src/settings.tsx
similarity index 90%
rename from src/settings.js
rename to src/settings.tsx
index 61c46de..396f4c4 100644
--- a/src/settings.js
+++ b/src/settings.tsx
@@ -1,7 +1,15 @@
 import React from 'react'
 import { IconButton } from 'theme-ui'
+import { ThemeUIStyleObject } from 'theme-ui'
 
-const Settings = ({ value, sx, ...props }) => {
+export type SettingsProps = {
+  value: boolean
+  onClick?: () => void
+  sx?: ThemeUIStyleObject
+  [key: string]: any
+}
+
+const Settings = ({ value, sx, ...props }: SettingsProps) => {
   return (
     <IconButton
       sx={{

From 348aaea463130fd167c551bd8282f6295beba43b Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Wed, 12 Mar 2025 14:36:43 -0500
Subject: [PATCH 03/22] row and column typed

---
 src/{column.js => column.tsx} | 42 ++++++++++++++++++++++++++---------
 src/index.ts                  |  3 +++
 src/{row.js => row.tsx}       | 24 ++++++++++++++------
 3 files changed, 52 insertions(+), 17 deletions(-)
 rename src/{column.js => column.tsx} (56%)
 rename src/{row.js => row.tsx} (62%)

diff --git a/src/column.js b/src/column.tsx
similarity index 56%
rename from src/column.js
rename to src/column.tsx
index b5be553..a62ae58 100644
--- a/src/column.js
+++ b/src/column.tsx
@@ -1,16 +1,38 @@
-import React from 'react'
-import { Box } from 'theme-ui'
+import React, { ReactNode } from 'react'
+import { Box, ThemeUIStyleObject } from 'theme-ui'
 
-const Column = ({ start, width, dl, dr, children, sx, ...props }) => {
+export type ColumnProps = {
+  start?: number | 'auto' | (number | 'auto')[]
+  width?: number | 'auto' | (number | 'auto')[]
+  dl?: 0.5 | 1
+  dr?: 0.5 | 1
+  children: ReactNode
+  sx?: ThemeUIStyleObject
+  [key: string]: any
+}
+
+type GridValue = number | 'auto'
+type GridArray = GridValue[]
+type ResponsiveValue = Array<string | number>
+
+const Column = ({
+  start,
+  width,
+  dl,
+  dr,
+  children,
+  sx,
+  ...props
+}: ColumnProps) => {
   start = start || 'auto'
   width = width || 'auto'
 
-  const makeArray = (input) => {
+  const makeArray = (input: GridValue | GridArray): GridArray => {
     if (input && !Array.isArray(input)) {
       input = [input]
     }
 
-    if (![1, 2, 4].includes(input.length)) {
+    if (![1, 2, 4].includes((input as GridArray).length)) {
       throw new Error('Array length must be 1, 2, or 4')
     }
 
@@ -20,18 +42,18 @@ const Column = ({ start, width, dl, dr, children, sx, ...props }) => {
       input = input.map((d) => [d, d]).flat()
     }
 
-    return input
+    return input as GridArray
   }
 
-  start = makeArray(start)
-  width = makeArray(width)
+  start = makeArray(start as GridValue | GridArray)
+  width = makeArray(width as GridValue | GridArray)
 
   const end = start.map((d, i) => {
     if (d == 'auto') return 'auto'
-    return d + width[i]
+    return (d as number) + (width[i] as number)
   })
 
-  let ml, mr
+  let ml: ResponsiveValue | undefined, mr: ResponsiveValue | undefined
 
   if (dl) {
     if (![0.5, 1].includes(dl)) {
diff --git a/src/index.ts b/src/index.ts
index 6be1c02..46681ae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,7 @@ export { default as Caption } from './caption'
 export { default as Colorbar } from './colorbar'
 export { default as Colors } from './colors'
 export { default as Column } from './column'
+export type { ColumnProps } from './column'
 export { default as Custom404 } from './custom-404'
 export { default as Dimmer } from './dimmer'
 export type { DimmerProps } from './dimmer'
@@ -32,6 +33,7 @@ export { default as Meta } from './meta'
 export { default as Monogram } from './monogram'
 export { default as Menu } from './menu'
 export { default as Row } from './row'
+export type { RowProps } from './row'
 export { default as Scrollbar } from './scrollbar'
 export { default as Select } from './select'
 export { default as Settings } from './settings'
@@ -43,3 +45,4 @@ export { default as Tag } from './tag'
 export { default as Toggle } from './toggle'
 export { default as Tray } from './tray'
 export { formatDate, getScrollbarWidth, useScrollbarClass } from './utils'
+export { default as Sidenote } from './sidenote'
diff --git a/src/row.js b/src/row.tsx
similarity index 62%
rename from src/row.js
rename to src/row.tsx
index 0f8d59f..f5ca674 100644
--- a/src/row.js
+++ b/src/row.tsx
@@ -1,10 +1,20 @@
-import React from 'react'
-import { Grid } from 'theme-ui'
+import React, { ReactNode } from 'react'
+import { Grid, ThemeUIStyleObject } from 'theme-ui'
 
-const Row = ({ children, sx, columns, gap, ...props }) => {
-  const makeArray = (input) => {
+export type RowProps = {
+  children: ReactNode
+  sx?: ThemeUIStyleObject
+  columns?: number | number[]
+  gap?: number | number[]
+  [key: string]: any
+}
+
+type ArrayInput = number | number[] | undefined
+
+const Row = ({ children, sx, columns, gap, ...props }: RowProps) => {
+  const makeArray = (input: ArrayInput): number[] => {
     if (!Array.isArray(input)) {
-      input = [input, input, input, input]
+      input = [input, input, input, input] as number[]
     }
     if (Array.isArray(input) && ![1, 2, 4].includes(input.length)) {
       throw new Error('Array length must be 1, 2, or 4')
@@ -15,10 +25,10 @@ const Row = ({ children, sx, columns, gap, ...props }) => {
     if (Array.isArray(input) && input.length == 2) {
       input = input.map((d) => [d, d]).flat()
     }
-    return input
+    return input as number[]
   }
 
-  let columnGap, rowGap
+  let columnGap: number[], rowGap: number[]
   if (Number.isInteger(gap) || Array.isArray(gap)) {
     gap = makeArray(gap)
     columnGap = gap

From 961c5506121d89232d9f4c8e93de8302d2dc4fc5 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Thu, 13 Mar 2025 08:28:02 -0500
Subject: [PATCH 04/22] fix react types

---
 src/header.tsx | 16 +++++++++++-----
 src/layout.tsx |  4 ++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/header.tsx b/src/header.tsx
index 6225fe0..d7805ab 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -54,7 +54,7 @@ const links: LinkItem[] = [
   { url: 'press', display: 'Press' },
 ]
 
-const HoverArrow: React.FC = () => {
+const HoverArrow = (): JSX.Element => {
   return (
     <Arrow
       id='arrow'
@@ -82,7 +82,13 @@ export type NavProps = {
   setExpanded: (expanded: boolean) => void
 }
 
-const Nav: React.FC<NavProps> = ({ link, mode, nav, first, setExpanded }) => {
+const Nav = ({
+  link,
+  mode,
+  nav,
+  first,
+  setExpanded,
+}: NavProps): JSX.Element => {
   const { url, display } = link
   const href = mode === 'remote' ? 'https://carbonplan.org/' + url : '/' + url
 
@@ -117,12 +123,12 @@ export type NavGroupProps = {
   setExpanded: (expanded: boolean) => void
 }
 
-const NavGroup: React.FC<NavGroupProps> = ({
+const NavGroup = ({
   links,
   nav,
   mode,
   setExpanded,
-}) => {
+}: NavGroupProps): JSX.Element[] => {
   return links.map((d, i) => {
     return (
       <Nav
@@ -144,7 +150,7 @@ export type HeaderProps = {
   menuItems?: ReactNode
 }
 
-const Header: React.FC<HeaderProps> = ({ status, mode, nav, menuItems }) => {
+const Header = ({ status, mode, nav, menuItems }: HeaderProps): JSX.Element => {
   const [expanded, setExpanded] = useState<boolean>(false)
 
   const toggle = (e: MouseEvent<HTMLButtonElement>): void => {
diff --git a/src/layout.tsx b/src/layout.tsx
index 2fe221b..6845ec3 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -31,7 +31,7 @@ export type LayoutProps = {
   printable?: boolean
 }
 
-const Layout: React.FC<LayoutProps> = ({
+const Layout = ({
   title,
   description,
   url,
@@ -50,7 +50,7 @@ const Layout: React.FC<LayoutProps> = ({
   fade = true,
   container = true,
   printable = false,
-}) => {
+}: LayoutProps): JSX.Element => {
   let content = children
 
   if (fade) {

From bb6fee4c3d2691abc417e7f0e50a6f8d8118a3dd Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Fri, 14 Mar 2025 13:38:00 -0500
Subject: [PATCH 05/22] avatar, avatar-group, group types

---
 src/{avatar-group.js => avatar-group.tsx} | 63 ++++++++++++++++-------
 src/{avatar.js => avatar.tsx}             | 16 +++++-
 src/{group.js => group.tsx}               | 33 +++++++++---
 src/index.ts                              |  3 ++
 4 files changed, 88 insertions(+), 27 deletions(-)
 rename src/{avatar-group.js => avatar-group.tsx} (54%)
 rename src/{avatar.js => avatar.tsx} (82%)
 rename src/{group.js => group.tsx} (50%)

diff --git a/src/avatar-group.js b/src/avatar-group.tsx
similarity index 54%
rename from src/avatar-group.js
rename to src/avatar-group.tsx
index 776d070..990e5eb 100644
--- a/src/avatar-group.js
+++ b/src/avatar-group.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Box } from 'theme-ui'
-import Avatar from './avatar'
+import { Box, ThemeUIStyleObject } from 'theme-ui'
+import Avatar, { AvatarProps } from './avatar'
 import Row from './row'
 import Column from './column'
 import Group from './group'
@@ -13,7 +13,14 @@ const sizes = {
   xl: [9],
 }
 
-const Blank = ({ overflow, maxWidth }) => {
+type SizeKey = keyof typeof sizes
+
+type BlankProps = {
+  overflow: number
+  maxWidth?: string | number
+}
+
+const Blank = ({ overflow, maxWidth }: BlankProps) => {
   return (
     <Box
       sx={{
@@ -45,6 +52,23 @@ const Blank = ({ overflow, maxWidth }) => {
   )
 }
 
+type Alignment = 'left' | 'right'
+
+type StartValue = 'auto' | number | (number | 'auto')[]
+
+export type AvatarGroupProps = {
+  members: AvatarProps[]
+  direction?: 'horizontal' | 'vertical'
+  align?: Alignment | Alignment[]
+  spacing?: SizeKey | number | number[]
+  limit?: number
+  width?: string
+  maxWidth?: string | number
+  fixedCount?: number
+  sx?: ThemeUIStyleObject
+  [key: string]: any
+}
+
 const AvatarGroup = ({
   members,
   direction = 'horizontal',
@@ -56,34 +80,37 @@ const AvatarGroup = ({
   fixedCount,
   sx,
   ...props
-}) => {
-  let gap
-  if (sizes.hasOwnProperty(spacing)) {
-    gap = sizes[spacing]
+}: AvatarGroupProps) => {
+  let gap: number[] | number
+
+  if (typeof spacing === 'string' && spacing in sizes) {
+    gap = sizes[spacing as SizeKey]
   } else {
-    gap = spacing
+    gap = spacing as number | number[]
   }
 
-  let start = (idx) => 'auto'
+  let start = (idx: number): StartValue => 'auto'
   if (align) {
     if (!Array.isArray(align)) {
       align = [align]
     }
-    start = (idx) =>
-      align.map((d) => {
+    start = (idx: number): StartValue => {
+      const alignArray = align as Alignment[]
+      return alignArray.map((d: Alignment) => {
         if (d === 'left') {
           return 'auto'
         } else if (d === 'right') {
-          const offset = Math.max(1, fixedCount - members.length + 1)
-          return (offset + idx) % fixedCount
+          const offset = Math.max(1, (fixedCount ?? 0) - members.length + 1)
+          return (offset + idx) % (fixedCount ?? 1)
         } else {
-          throw Error(`alignment '${align}' not recognized`)
+          throw Error(`alignment '${d}' not recognized`)
         }
       })
+    }
   }
 
-  const excess = members.length > limit
-  const overflow = members.length - limit + 1
+  const excess = limit !== undefined && members.length > limit
+  const overflow = limit !== undefined ? members.length - limit + 1 : 0
 
   return (
     <>
@@ -91,10 +118,10 @@ const AvatarGroup = ({
         <Row columns={fixedCount} gap={gap} sx={sx} {...props}>
           {members.map((props, idx) => (
             <Column key={idx} start={start(idx)}>
-              {(!excess || idx < limit - 1) && (
+              {(!excess || (limit !== undefined && idx < limit - 1)) && (
                 <Avatar {...props} width={width} maxWidth={maxWidth} />
               )}
-              {excess && idx === limit - 1 && (
+              {excess && limit !== undefined && idx === limit - 1 && (
                 <Blank overflow={overflow} maxWidth={maxWidth} />
               )}
             </Column>
diff --git a/src/avatar.js b/src/avatar.tsx
similarity index 82%
rename from src/avatar.js
rename to src/avatar.tsx
index 223c566..0ac24e9 100644
--- a/src/avatar.js
+++ b/src/avatar.tsx
@@ -1,5 +1,17 @@
 import React from 'react'
-import { Box, Image } from 'theme-ui'
+import { Box, Image, ThemeUIStyleObject } from 'theme-ui'
+
+export type AvatarProps = {
+  color?: string
+  width?: string
+  maxWidth?: string | number
+  name?: string
+  github?: string
+  alt?: string
+  src?: string
+  sx?: ThemeUIStyleObject
+  [key: string]: any
+}
 
 const Avatar = ({
   color = 'transparent',
@@ -11,7 +23,7 @@ const Avatar = ({
   src,
   sx,
   ...props
-}) => {
+}: AvatarProps) => {
   if (!name && !src && !github) {
     console.warn('must specify either name, github, or src')
   }
diff --git a/src/group.js b/src/group.tsx
similarity index 50%
rename from src/group.js
rename to src/group.tsx
index 391002d..09920b8 100644
--- a/src/group.js
+++ b/src/group.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import { Box } from 'theme-ui'
+import React, { ReactNode } from 'react'
+import { Box, ThemeUIStyleObject } from 'theme-ui'
 
 const sizes = {
   xs: [1],
@@ -8,12 +8,30 @@ const sizes = {
   lg: [7],
   xl: [9],
 }
-const Group = ({ children, direction = 'vertical', spacing = 'md', sx }) => {
-  let marginValue
-  if (typeof spacing === 'string' && sizes.hasOwnProperty(spacing)) {
+
+type SizeKey = keyof typeof sizes
+type Direction = 'horizontal' | 'vertical'
+type SpacingValue = SizeKey | number | number[]
+
+export type GroupProps = {
+  children: ReactNode
+  direction?: Direction
+  spacing?: SpacingValue
+  sx?: ThemeUIStyleObject
+}
+
+const Group = ({
+  children,
+  direction = 'vertical',
+  spacing = 'md',
+  sx,
+}: GroupProps) => {
+  let marginValue: number | number[]
+
+  if (typeof spacing === 'string' && spacing in sizes) {
     marginValue = sizes[spacing]
   } else {
-    marginValue = spacing
+    marginValue = spacing as number | number[]
   }
 
   if (!['horizontal', 'vertical'].includes(direction)) {
@@ -28,10 +46,11 @@ const Group = ({ children, direction = 'vertical', spacing = 'md', sx }) => {
   return (
     <Box sx={sx}>
       {React.Children.map(children, (child, i) => {
+        const childrenCount = React.Children.count(children)
         return (
           <Box
             sx={{
-              [marginProperty]: i < children.length - 1 ? marginValue : 0,
+              [marginProperty]: i < childrenCount - 1 ? marginValue : 0,
               ...additionalStyles,
             }}
           >
diff --git a/src/index.ts b/src/index.ts
index 46681ae..10f64f7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,7 @@
 export { default as Avatar } from './avatar'
+export type { AvatarProps } from './avatar'
 export { default as AvatarGroup } from './avatar-group'
+export type { AvatarGroupProps } from './avatar-group'
 export { default as Badge } from './badge'
 export { default as Blockquote } from './blockquote'
 export { default as Button } from './button'
@@ -19,6 +21,7 @@ export { default as FigureCaption } from './figure-caption'
 export { default as Filter } from './filter'
 export { default as Footer } from './footer'
 export { default as Group } from './group'
+export type { GroupProps } from './group'
 export { default as Guide } from './guide'
 export { default as Header } from './header'
 export type { HeaderProps } from './header'

From cbdea07157ef6a0615fa31687f41d187f45d1fe0 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Fri, 14 Mar 2025 13:38:07 -0500
Subject: [PATCH 06/22] fix main pointer

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 30e600e..860241f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@carbonplan/components",
   "version": "13.1.1",
   "description": "shared components for our websites",
-  "main": "dst/index.ts",
+  "main": "dst/index.js",
   "module": "dst/index.esm.js",
   "types": "dst/types/index.d.ts",
   "scripts": {

From 032a20990528b1329acdfa7292df0219d6cabc03 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Fri, 14 Mar 2025 16:39:07 -0500
Subject: [PATCH 07/22] use theme-ui types

---
 src/avatar-group.tsx | 17 ++++++++---------
 src/avatar.tsx       |  6 ++----
 src/column.tsx       | 24 ++++++++++--------------
 src/dimmer.tsx       |  8 ++------
 src/group.tsx        | 17 ++++++++---------
 src/header.tsx       | 12 ++++++------
 src/layout.tsx       |  4 ++--
 src/row.tsx          | 20 ++++++--------------
 src/settings.tsx     |  8 ++------
 9 files changed, 46 insertions(+), 70 deletions(-)

diff --git a/src/avatar-group.tsx b/src/avatar-group.tsx
index 990e5eb..dbd0675 100644
--- a/src/avatar-group.tsx
+++ b/src/avatar-group.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Box, ThemeUIStyleObject } from 'theme-ui'
+import { Box, ResponsiveStyleValue } from 'theme-ui'
 import Avatar, { AvatarProps } from './avatar'
-import Row from './row'
+import Row, { RowProps } from './row'
 import Column from './column'
-import Group from './group'
+import Group, { GroupProps } from './group'
 
 const sizes = {
   xs: [1],
@@ -60,14 +60,13 @@ export type AvatarGroupProps = {
   members: AvatarProps[]
   direction?: 'horizontal' | 'vertical'
   align?: Alignment | Alignment[]
-  spacing?: SizeKey | number | number[]
+  spacing?: SizeKey | ResponsiveStyleValue<number | string>
   limit?: number
   width?: string
   maxWidth?: string | number
   fixedCount?: number
-  sx?: ThemeUIStyleObject
-  [key: string]: any
-}
+} & RowProps &
+  GroupProps
 
 const AvatarGroup = ({
   members,
@@ -81,12 +80,12 @@ const AvatarGroup = ({
   sx,
   ...props
 }: AvatarGroupProps) => {
-  let gap: number[] | number
+  let gap: ResponsiveStyleValue<number | string>
 
   if (typeof spacing === 'string' && spacing in sizes) {
     gap = sizes[spacing as SizeKey]
   } else {
-    gap = spacing as number | number[]
+    gap = spacing as ResponsiveStyleValue<number | string>
   }
 
   let start = (idx: number): StartValue => 'auto'
diff --git a/src/avatar.tsx b/src/avatar.tsx
index 0ac24e9..1fae655 100644
--- a/src/avatar.tsx
+++ b/src/avatar.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { Box, Image, ThemeUIStyleObject } from 'theme-ui'
+import { Box, Image, BoxProps } from 'theme-ui'
 
-export type AvatarProps = {
+export type AvatarProps = BoxProps & {
   color?: string
   width?: string
   maxWidth?: string | number
@@ -9,8 +9,6 @@ export type AvatarProps = {
   github?: string
   alt?: string
   src?: string
-  sx?: ThemeUIStyleObject
-  [key: string]: any
 }
 
 const Avatar = ({
diff --git a/src/column.tsx b/src/column.tsx
index a62ae58..c866cc8 100644
--- a/src/column.tsx
+++ b/src/column.tsx
@@ -1,19 +1,14 @@
-import React, { ReactNode } from 'react'
-import { Box, ThemeUIStyleObject } from 'theme-ui'
+import React from 'react'
+import { Box, BoxProps, ResponsiveStyleValue } from 'theme-ui'
 
-export type ColumnProps = {
+export type ColumnProps = BoxProps & {
   start?: number | 'auto' | (number | 'auto')[]
   width?: number | 'auto' | (number | 'auto')[]
   dl?: 0.5 | 1
   dr?: 0.5 | 1
-  children: ReactNode
-  sx?: ThemeUIStyleObject
-  [key: string]: any
 }
 
 type GridValue = number | 'auto'
-type GridArray = GridValue[]
-type ResponsiveValue = Array<string | number>
 
 const Column = ({
   start,
@@ -27,12 +22,12 @@ const Column = ({
   start = start || 'auto'
   width = width || 'auto'
 
-  const makeArray = (input: GridValue | GridArray): GridArray => {
+  const makeArray = (input: GridValue[]): GridValue[] => {
     if (input && !Array.isArray(input)) {
       input = [input]
     }
 
-    if (![1, 2, 4].includes((input as GridArray).length)) {
+    if (![1, 2, 4].includes(input.length)) {
       throw new Error('Array length must be 1, 2, or 4')
     }
 
@@ -42,18 +37,19 @@ const Column = ({
       input = input.map((d) => [d, d]).flat()
     }
 
-    return input as GridArray
+    return input
   }
 
-  start = makeArray(start as GridValue | GridArray)
-  width = makeArray(width as GridValue | GridArray)
+  start = makeArray(start as GridValue[])
+  width = makeArray(width as GridValue[])
 
   const end = start.map((d, i) => {
     if (d == 'auto') return 'auto'
     return (d as number) + (width[i] as number)
   })
 
-  let ml: ResponsiveValue | undefined, mr: ResponsiveValue | undefined
+  let ml: ResponsiveStyleValue<number | string> | undefined,
+    mr: ResponsiveStyleValue<number | string> | undefined
 
   if (dl) {
     if (![0.5, 1].includes(dl)) {
diff --git a/src/dimmer.tsx b/src/dimmer.tsx
index edeebaa..4d1cad9 100644
--- a/src/dimmer.tsx
+++ b/src/dimmer.tsx
@@ -1,14 +1,10 @@
 import React from 'react'
-import { IconButton, useColorMode } from 'theme-ui'
+import { IconButton, useColorMode, IconButtonProps } from 'theme-ui'
 import { useCallback } from 'react'
 // @ts-ignore
 import { Sun } from '@carbonplan/icons'
-import { ThemeUIStyleObject } from 'theme-ui'
 
-export type DimmerProps = {
-  sx?: ThemeUIStyleObject
-  [key: string]: any
-}
+export type DimmerProps = IconButtonProps
 
 const Dimmer = ({ sx = {}, ...props }: DimmerProps) => {
   const [colorMode, setColorMode] = useColorMode()
diff --git a/src/group.tsx b/src/group.tsx
index 09920b8..c8f02dd 100644
--- a/src/group.tsx
+++ b/src/group.tsx
@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react'
-import { Box, ThemeUIStyleObject } from 'theme-ui'
+import React from 'react'
+import { ResponsiveStyleValue } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
 
 const sizes = {
   xs: [1],
@@ -11,14 +12,12 @@ const sizes = {
 
 type SizeKey = keyof typeof sizes
 type Direction = 'horizontal' | 'vertical'
-type SpacingValue = SizeKey | number | number[]
+type SpacingValue = SizeKey | ResponsiveStyleValue<number | string>
 
 export type GroupProps = {
-  children: ReactNode
   direction?: Direction
   spacing?: SpacingValue
-  sx?: ThemeUIStyleObject
-}
+} & BoxProps
 
 const Group = ({
   children,
@@ -26,12 +25,12 @@ const Group = ({
   spacing = 'md',
   sx,
 }: GroupProps) => {
-  let marginValue: number | number[]
+  let marginValue: ResponsiveStyleValue<number | string>
 
   if (typeof spacing === 'string' && spacing in sizes) {
-    marginValue = sizes[spacing]
+    marginValue = sizes[spacing as SizeKey]
   } else {
-    marginValue = spacing as number | number[]
+    marginValue = spacing as ResponsiveStyleValue<number | string>
   }
 
   if (!['horizontal', 'vertical'].includes(direction)) {
diff --git a/src/header.tsx b/src/header.tsx
index d7805ab..ab039c1 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -36,7 +36,7 @@ const sx = {
         },
       },
       '&:hover': {
-        color: current == label ? 'secondary' : 'text',
+        color: current === label ? 'secondary' : 'text',
       },
     }
   },
@@ -76,7 +76,7 @@ const HoverArrow = (): JSX.Element => {
 
 export type NavProps = {
   link: LinkItem
-  mode: 'homepage' | 'local' | 'remote' | null
+  mode?: 'homepage' | 'local' | 'remote'
   nav?: string
   first: boolean
   setExpanded: (expanded: boolean) => void
@@ -119,7 +119,7 @@ const Nav = ({
 export type NavGroupProps = {
   links: LinkItem[]
   nav?: string
-  mode: 'homepage' | 'local' | 'remote' | null
+  mode?: 'homepage' | 'local' | 'remote'
   setExpanded: (expanded: boolean) => void
 }
 
@@ -145,7 +145,7 @@ const NavGroup = ({
 
 export type HeaderProps = {
   status?: string
-  mode: 'homepage' | 'local' | 'remote' | null
+  mode?: 'homepage' | 'local' | 'remote'
   nav?: string
   menuItems?: ReactNode
 }
@@ -168,7 +168,7 @@ const Header = ({ status, mode, nav, menuItems }: HeaderProps): JSX.Element => {
         <Box
           sx={{ pointerEvents: 'all', display: 'block', width: 'fit-content' }}
         >
-          {(mode == 'homepage' || mode == 'local') && (
+          {(mode === 'homepage' || mode === 'local') && (
             <NextLink href='/' passHref legacyBehavior>
               <Link
                 aria-label='CarbonPlan Homepage'
@@ -186,7 +186,7 @@ const Header = ({ status, mode, nav, menuItems }: HeaderProps): JSX.Element => {
               </Link>
             </NextLink>
           )}
-          {(mode == null || mode == 'remote') && (
+          {(mode === undefined || mode === 'remote') && (
             <Link
               href='https://carbonplan.org'
               aria-label='CarbonPlan Homepage'
diff --git a/src/layout.tsx b/src/layout.tsx
index 6845ec3..4ae38c5 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -22,7 +22,7 @@ export type LayoutProps = {
   footer?: boolean
   header?: boolean
   metadata?: 'mouse' | 'scroll' | boolean
-  links?: 'remote' | 'local' | 'homepage' | null
+  links?: 'remote' | 'local' | 'homepage'
   dimmer?: 'bottom' | 'top'
   guide?: boolean | string
   scrollbar?: boolean
@@ -79,7 +79,7 @@ const Layout = ({
 
     const handler = (e: MediaQueryListEvent) => {
       if (e.matches && settings?.value && settings?.onClick) {
-        settings?.onClick()
+        settings.onClick({} as React.MouseEvent<HTMLButtonElement>)
       }
     }
 
diff --git a/src/row.tsx b/src/row.tsx
index f5ca674..50fc096 100644
--- a/src/row.tsx
+++ b/src/row.tsx
@@ -1,18 +1,10 @@
 import React, { ReactNode } from 'react'
-import { Grid, ThemeUIStyleObject } from 'theme-ui'
+import { Grid, GridProps } from 'theme-ui'
 
-export type RowProps = {
-  children: ReactNode
-  sx?: ThemeUIStyleObject
-  columns?: number | number[]
-  gap?: number | number[]
-  [key: string]: any
-}
-
-type ArrayInput = number | number[] | undefined
+export type RowProps = GridProps
 
-const Row = ({ children, sx, columns, gap, ...props }: RowProps) => {
-  const makeArray = (input: ArrayInput): number[] => {
+const Row = ({ children, sx, columns, gap, ...props }: GridProps) => {
+  const makeArray = (input: GridProps['gap']): GridProps['gap'] => {
     if (!Array.isArray(input)) {
       input = [input, input, input, input] as number[]
     }
@@ -25,10 +17,10 @@ const Row = ({ children, sx, columns, gap, ...props }: RowProps) => {
     if (Array.isArray(input) && input.length == 2) {
       input = input.map((d) => [d, d]).flat()
     }
-    return input as number[]
+    return input
   }
 
-  let columnGap: number[], rowGap: number[]
+  let columnGap: GridProps['gap'], rowGap: GridProps['gap']
   if (Number.isInteger(gap) || Array.isArray(gap)) {
     gap = makeArray(gap)
     columnGap = gap
diff --git a/src/settings.tsx b/src/settings.tsx
index 396f4c4..a0730ee 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -1,12 +1,8 @@
 import React from 'react'
-import { IconButton } from 'theme-ui'
-import { ThemeUIStyleObject } from 'theme-ui'
+import { IconButton, IconButtonProps } from 'theme-ui'
 
-export type SettingsProps = {
+export type SettingsProps = IconButtonProps & {
   value: boolean
-  onClick?: () => void
-  sx?: ThemeUIStyleObject
-  [key: string]: any
 }
 
 const Settings = ({ value, sx, ...props }: SettingsProps) => {

From 8dfa9e8376f9a4becc6cce52dbf2225ccfa588e1 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Fri, 14 Mar 2025 16:39:55 -0500
Subject: [PATCH 08/22] update node

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index c52b508..0d55914 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [20.x, 22.x]
 
     steps:
       - uses: actions/checkout@v2

From 05959f5648cce92c2387ade7f328b3448e0a448a Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Mon, 17 Mar 2025 15:08:07 -0500
Subject: [PATCH 09/22] badge

---
 src/{badge.js => badge.tsx} | 11 ++++++++---
 src/index.ts                |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)
 rename src/{badge.js => badge.tsx} (76%)

diff --git a/src/badge.js b/src/badge.tsx
similarity index 76%
rename from src/badge.js
rename to src/badge.tsx
index f72f2eb..7f2892e 100644
--- a/src/badge.js
+++ b/src/badge.tsx
@@ -1,9 +1,14 @@
 import React from 'react'
-import { Box } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
 import { transparentize } from '@theme-ui/color'
 
-const Badge = ({ sx, children, ...props }) => {
-  const color = sx && sx.color ? sx.color : 'primary'
+export type BadgeProps = BoxProps
+
+const Badge = ({ sx, children, ...props }: BadgeProps) => {
+  const color =
+    sx && typeof sx === 'object' && 'color' in sx
+      ? (sx.color as string)
+      : 'primary'
   return (
     <Box
       sx={{
diff --git a/src/index.ts b/src/index.ts
index 10f64f7..343f305 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ export type { AvatarProps } from './avatar'
 export { default as AvatarGroup } from './avatar-group'
 export type { AvatarGroupProps } from './avatar-group'
 export { default as Badge } from './badge'
+export type { BadgeProps } from './badge'
 export { default as Blockquote } from './blockquote'
 export { default as Button } from './button'
 export { default as Callout } from './callout'

From cf4b89daa88bdc46421cf984ab176a801111d2d4 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Mon, 17 Mar 2025 15:13:43 -0500
Subject: [PATCH 10/22] blockquote

---
 src/{blockquote.js => blockquote.tsx} | 9 +++++----
 src/index.ts                          | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)
 rename src/{blockquote.js => blockquote.tsx} (79%)

diff --git a/src/blockquote.js b/src/blockquote.tsx
similarity index 79%
rename from src/blockquote.js
rename to src/blockquote.tsx
index 88d13e7..c734170 100644
--- a/src/blockquote.js
+++ b/src/blockquote.tsx
@@ -1,16 +1,17 @@
 import React, { Children } from 'react'
-import { Box } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
+
+export type BlockQuoteProps = BoxProps
 
 const specialChars = ['“', '"', "'", '‘']
 
-const Blockquote = ({ children }) => {
+const Blockquote = ({ children }: BlockQuoteProps) => {
   return (
     <Box variant='styles.blockquote'>
       {Children.map(children, (d, i) => {
         let firstChar = ''
         let remaining = children
-
-        if (d.props && typeof d.props.children === 'string') {
+        if (React.isValidElement(d) && typeof d.props.children === 'string') {
           firstChar = d.props.children.slice(0, 1)
           remaining = d.props.children.slice(1)
         } else if (typeof d === 'string') {
diff --git a/src/index.ts b/src/index.ts
index 343f305..4fa7d09 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ export type { AvatarGroupProps } from './avatar-group'
 export { default as Badge } from './badge'
 export type { BadgeProps } from './badge'
 export { default as Blockquote } from './blockquote'
+export type { BlockQuoteProps } from './blockquote'
 export { default as Button } from './button'
 export { default as Callout } from './callout'
 export { default as Caption } from './caption'

From fd34e7fd954afb876b14ab15fc5cf7857f8a16a3 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Tue, 18 Mar 2025 10:42:27 -0500
Subject: [PATCH 11/22] simplify blockquote types

---
 src/blockquote.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/blockquote.tsx b/src/blockquote.tsx
index c734170..15ca205 100644
--- a/src/blockquote.tsx
+++ b/src/blockquote.tsx
@@ -1,7 +1,7 @@
-import React, { Children } from 'react'
-import { Box, BoxProps } from 'theme-ui'
+import React, { Children, PropsWithChildren } from 'react'
+import { Box } from 'theme-ui'
 
-export type BlockQuoteProps = BoxProps
+export type BlockQuoteProps = PropsWithChildren<{}>
 
 const specialChars = ['“', '"', "'", '‘']
 

From 6e77c35fb97bf9a51a3412b347e4b83e688d55b3 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Tue, 18 Mar 2025 10:48:51 -0500
Subject: [PATCH 12/22] clean up badge color use type

---
 src/badge.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/badge.tsx b/src/badge.tsx
index 7f2892e..d0a764b 100644
--- a/src/badge.tsx
+++ b/src/badge.tsx
@@ -1,14 +1,15 @@
 import React from 'react'
-import { Box, BoxProps } from 'theme-ui'
+import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
 import { transparentize } from '@theme-ui/color'
 
-export type BadgeProps = BoxProps
+export type BadgeProps = BoxProps & {
+  sx?: ThemeUIStyleObject & {
+    color?: string // ThemeUIStyleObject doesn't have a color property
+  }
+}
 
 const Badge = ({ sx, children, ...props }: BadgeProps) => {
-  const color =
-    sx && typeof sx === 'object' && 'color' in sx
-      ? (sx.color as string)
-      : 'primary'
+  const color = sx && sx.color ? sx.color : 'primary'
   return (
     <Box
       sx={{

From de76289640056ea00964d2be0d63e3418774db7f Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Tue, 18 Mar 2025 11:03:11 -0500
Subject: [PATCH 13/22] link

---
 src/index.ts              |  1 +
 src/{link.js => link.tsx} | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 rename src/{link.js => link.tsx} (63%)

diff --git a/src/index.ts b/src/index.ts
index 4fa7d09..1045c72 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -32,6 +32,7 @@ export { default as Input } from './input'
 export { default as Layout } from './layout'
 export type { LayoutProps } from './layout'
 export { default as Link } from './link'
+export type { LinkProps } from './link'
 export { default as LinkGroup } from './link-group'
 export { default as Logo } from './logo'
 export { default as Meta } from './meta'
diff --git a/src/link.js b/src/link.tsx
similarity index 63%
rename from src/link.js
rename to src/link.tsx
index b718e8d..5c5220f 100644
--- a/src/link.js
+++ b/src/link.tsx
@@ -1,8 +1,16 @@
 import React, { forwardRef } from 'react'
-import { Link as ThemedLink } from 'theme-ui'
+import { Link as ThemedLink, LinkProps as ThemedLinkProps } from 'theme-ui'
 import { default as NextLink } from 'next/link'
 
-const Link = ({ href, children, internal = false, ...props }, ref) => {
+export type LinkProps = ThemedLinkProps & {
+  href: string
+  internal?: boolean
+}
+
+const Link = (
+  { href, children, internal = false, ...props }: LinkProps,
+  ref: React.Ref<HTMLAnchorElement>
+) => {
   if (internal || (href && href.startsWith('/'))) {
     return (
       <NextLink href={href} passHref legacyBehavior>

From d14b9c050b250bb0ef6a76ccd8be7623c330c7fc Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Tue, 18 Mar 2025 12:13:20 -0500
Subject: [PATCH 14/22] button types started

---
 src/{button.js => button.tsx} | 64 +++++++++++++++++++++++++----------
 src/index.ts                  |  1 +
 2 files changed, 48 insertions(+), 17 deletions(-)
 rename src/{button.js => button.tsx} (76%)

diff --git a/src/button.js b/src/button.tsx
similarity index 76%
rename from src/button.js
rename to src/button.tsx
index 8b190be..017d240 100644
--- a/src/button.js
+++ b/src/button.tsx
@@ -1,8 +1,30 @@
 import React, { forwardRef, cloneElement } from 'react'
-import { Box } from 'theme-ui'
-import Link from './link'
+import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
+import Link, { LinkProps } from './link'
 import getSizeStyles from './utils/get-size-styles'
 
+export type ButtonProps = BoxProps & {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  align?:
+    | 'baseline'
+    | 'sub'
+    | 'super'
+    | 'text-top'
+    | 'text-bottom'
+    | 'middle'
+    | 'top'
+    | 'bottom'
+    | 'initial'
+  prefix?: React.ReactElement
+  suffix?: React.ReactElement
+  inverted?: boolean
+  href?: string
+  internal?: boolean
+  sx?: ThemeUIStyleObject & {
+    color?: string // ThemeUIStyleObject doesn't have a color property
+  }
+}
+
 const Button = (
   {
     size = 'sm',
@@ -15,14 +37,14 @@ const Button = (
     href,
     internal,
     ...props
-  },
-  ref
+  }: ButtonProps,
+  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>
 ) => {
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl')
   }
 
-  let offset, margin, top, height, width, strokeWidth
+  let offset, margin, height, width, strokeWidth
 
   const { color, ...sxProp } = sx || {}
 
@@ -99,14 +121,16 @@ const Button = (
     suffixOffset = offset
   }
 
+  let clonedPrefix, clonedSuffix
+
   if (prefix) {
     prefixHover = {
       '&:hover > #prefix-span > #prefix': {
         color: hoverColor,
-        ...prefix.type.hover,
+        ...(prefix.type as any).hover,
       },
     }
-    prefix = cloneElement(prefix, {
+    clonedPrefix = cloneElement(prefix, {
       id: 'prefix',
       sx: {
         position: 'relative',
@@ -125,10 +149,10 @@ const Button = (
     suffixHover = {
       '&:hover > #suffix-span >#suffix': {
         color: hoverColor,
-        ...suffix.type.hover,
+        ...(suffix.type as any).hover,
       },
     }
-    suffix = cloneElement(suffix, {
+    clonedSuffix = cloneElement(suffix, {
       id: 'suffix',
       sx: {
         height: height,
@@ -152,7 +176,7 @@ const Button = (
     display: 'block',
     color: baseColor,
     padding: [0],
-    textAlign: 'left',
+    textAlign: 'left' as const,
     cursor: 'pointer',
     width: 'fit-content',
     '@media (hover: hover) and (pointer: fine)': {
@@ -172,7 +196,7 @@ const Button = (
         id='prefix-span'
         sx={{ display: 'inline-block', ...prefixOffset }}
       >
-        {prefix && prefix}
+        {clonedPrefix && clonedPrefix}
       </Box>
       <Box as='span' sx={{ transition: 'color 0.15s' }}>
         {children}
@@ -182,7 +206,7 @@ const Button = (
         id='suffix-span'
         sx={{ display: 'inline-block', ...suffixOffset }}
       >
-        {suffix && suffix}
+        {clonedSuffix && clonedSuffix}
       </Box>
     </>
   )
@@ -190,25 +214,31 @@ const Button = (
   if (href) {
     return (
       <Link
-        ref={ref}
-        href={href}
+        ref={ref as React.Ref<HTMLAnchorElement>}
         internal={internal}
         sx={{
           ...style,
           textDecoration: 'none',
         }}
-        {...props}
+        {...(props as LinkProps)}
       >
         {Inner}
       </Link>
     )
   } else {
     return (
-      <Box ref={ref} as='button' sx={style} {...props}>
+      <Box
+        ref={ref as React.Ref<HTMLButtonElement>}
+        as='button'
+        sx={style}
+        {...props}
+      >
         {Inner}
       </Box>
     )
   }
 }
 
-export default forwardRef(Button)
+export default forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(
+  Button
+)
diff --git a/src/index.ts b/src/index.ts
index 1045c72..40ccafd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@ export type { BadgeProps } from './badge'
 export { default as Blockquote } from './blockquote'
 export type { BlockQuoteProps } from './blockquote'
 export { default as Button } from './button'
+export type { ButtonProps } from './button'
 export { default as Callout } from './callout'
 export { default as Caption } from './caption'
 export { default as Colorbar } from './colorbar'

From eb84639aa78f2003c9193fe2119a551c97b77ce4 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Wed, 19 Mar 2025 13:18:57 -0500
Subject: [PATCH 15/22] button type improvements

---
 src/button.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/button.tsx b/src/button.tsx
index 017d240..b316424 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -3,7 +3,10 @@ import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
 import Link, { LinkProps } from './link'
 import getSizeStyles from './utils/get-size-styles'
 
-export type ButtonProps = BoxProps & {
+const hasCustomHover = (comp: any): comp is { hover: ThemeUIStyleObject } =>
+  !!comp?.hover
+
+export type ButtonProps = Omit<BoxProps, 'prefix'> & {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   align?:
     | 'baseline'
@@ -15,8 +18,8 @@ export type ButtonProps = BoxProps & {
     | 'top'
     | 'bottom'
     | 'initial'
-  prefix?: React.ReactElement
-  suffix?: React.ReactElement
+  suffix?: React.ReactElement & { props?: { sx?: ThemeUIStyleObject } }
+  prefix?: React.ReactElement & { props?: { sx?: ThemeUIStyleObject } }
   inverted?: boolean
   href?: string
   internal?: boolean
@@ -127,7 +130,7 @@ const Button = (
     prefixHover = {
       '&:hover > #prefix-span > #prefix': {
         color: hoverColor,
-        ...(prefix.type as any).hover,
+        ...(hasCustomHover(prefix.type) ? prefix.type.hover : {}),
       },
     }
     clonedPrefix = cloneElement(prefix, {
@@ -140,7 +143,7 @@ const Button = (
         strokeWidth: strokeWidth,
         verticalAlign: prefixAlign,
         transition: 'color 0.15s, transform 0.15s',
-        ...prefix.props.sx,
+        ...prefix.props?.sx,
       },
     })
   }
@@ -149,7 +152,7 @@ const Button = (
     suffixHover = {
       '&:hover > #suffix-span >#suffix': {
         color: hoverColor,
-        ...(suffix.type as any).hover,
+        ...(hasCustomHover(suffix.type) ? suffix.type.hover : {}),
       },
     }
     clonedSuffix = cloneElement(suffix, {
@@ -161,7 +164,7 @@ const Button = (
         strokeWidth: strokeWidth,
         verticalAlign: suffixAlign,
         transition: 'color 0.15s, transform 0.15s',
-        ...suffix.props.sx,
+        ...suffix.props?.sx,
       },
     })
   }

From 0b63c1fb30d6b9332d4c36a4f166691ba1cfc878 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Wed, 19 Mar 2025 13:20:00 -0500
Subject: [PATCH 16/22] rm redundant check

---
 src/button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/button.tsx b/src/button.tsx
index b316424..9a52b07 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -199,7 +199,7 @@ const Button = (
         id='prefix-span'
         sx={{ display: 'inline-block', ...prefixOffset }}
       >
-        {clonedPrefix && clonedPrefix}
+        {clonedPrefix}
       </Box>
       <Box as='span' sx={{ transition: 'color 0.15s' }}>
         {children}
@@ -209,7 +209,7 @@ const Button = (
         id='suffix-span'
         sx={{ display: 'inline-block', ...suffixOffset }}
       >
-        {clonedSuffix && clonedSuffix}
+        {clonedSuffix}
       </Box>
     </>
   )

From a9503cc47f6cacb001942aaab446ad77e806b375 Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Tue, 22 Apr 2025 12:04:55 -0400
Subject: [PATCH 17/22] Use interface for prop type definitions

---
 src/avatar.tsx | 2 +-
 src/badge.tsx  | 2 +-
 src/button.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/avatar.tsx b/src/avatar.tsx
index 1fae655..539a643 100644
--- a/src/avatar.tsx
+++ b/src/avatar.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, Image, BoxProps } from 'theme-ui'
 
-export type AvatarProps = BoxProps & {
+export interface AvatarProps extends BoxProps {
   color?: string
   width?: string
   maxWidth?: string | number
diff --git a/src/badge.tsx b/src/badge.tsx
index d0a764b..5fee12d 100644
--- a/src/badge.tsx
+++ b/src/badge.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
 import { transparentize } from '@theme-ui/color'
 
-export type BadgeProps = BoxProps & {
+export interface BadgeProps extends BoxProps {
   sx?: ThemeUIStyleObject & {
     color?: string // ThemeUIStyleObject doesn't have a color property
   }
diff --git a/src/button.tsx b/src/button.tsx
index 9a52b07..068c3d9 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -6,7 +6,7 @@ import getSizeStyles from './utils/get-size-styles'
 const hasCustomHover = (comp: any): comp is { hover: ThemeUIStyleObject } =>
   !!comp?.hover
 
-export type ButtonProps = Omit<BoxProps, 'prefix'> & {
+export interface ButtonProps extends Omit<BoxProps, 'prefix'> {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   align?:
     | 'baseline'

From f231f2cfe4ccdff16b30bb31483a31c6b21191b1 Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Tue, 22 Apr 2025 12:06:15 -0400
Subject: [PATCH 18/22] Add prop types for Tag

---
 src/index.ts            |  2 +-
 src/{tag.js => tag.tsx} | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)
 rename src/{tag.js => tag.tsx} (74%)

diff --git a/src/index.ts b/src/index.ts
index 40ccafd..200c983 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -48,7 +48,7 @@ export type { SettingsProps } from './settings'
 export { default as Slider } from './slider'
 export { default as Table } from './table'
 export { default as TableCaption } from './table-caption'
-export { default as Tag } from './tag'
+export { default as Tag, TagProps } from './tag'
 export { default as Toggle } from './toggle'
 export { default as Tray } from './tray'
 export { formatDate, getScrollbarWidth, useScrollbarClass } from './utils'
diff --git a/src/tag.js b/src/tag.tsx
similarity index 74%
rename from src/tag.js
rename to src/tag.tsx
index 8e00e7e..fff4c70 100644
--- a/src/tag.js
+++ b/src/tag.tsx
@@ -1,7 +1,14 @@
 import React from 'react'
-import { Box } from 'theme-ui'
+import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
 
-const Tag = ({ label, value, sx, children, ...props }) => {
+export interface TagProps extends BoxProps {
+  label: BoxProps['aria-label']
+  value: BoxProps['aria-checked']
+  sx?: ThemeUIStyleObject & {
+    color?: string // ThemeUIStyleObject doesn't have a color property
+  }
+}
+const Tag = ({ label, value, sx, children, ...props }: TagProps) => {
   const color = sx && sx.color ? sx.color : 'primary'
   const isClickable = props && (props.onClick || props.onDoubleClick)
 

From b10801c7ea86e0d6b212aa748905e5b57b6bf199 Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Tue, 22 Apr 2025 12:12:22 -0400
Subject: [PATCH 19/22] More interface definitions

---
 src/avatar-group.tsx | 5 ++---
 src/column.tsx       | 2 +-
 src/group.tsx        | 4 ++--
 src/header.tsx       | 8 ++++----
 src/layout.tsx       | 2 +-
 src/link.tsx         | 2 +-
 src/row.tsx          | 2 +-
 src/settings.tsx     | 2 +-
 8 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/avatar-group.tsx b/src/avatar-group.tsx
index dbd0675..cdd7f6e 100644
--- a/src/avatar-group.tsx
+++ b/src/avatar-group.tsx
@@ -56,7 +56,7 @@ type Alignment = 'left' | 'right'
 
 type StartValue = 'auto' | number | (number | 'auto')[]
 
-export type AvatarGroupProps = {
+export interface AvatarGroupProps extends RowProps, GroupProps {
   members: AvatarProps[]
   direction?: 'horizontal' | 'vertical'
   align?: Alignment | Alignment[]
@@ -65,8 +65,7 @@ export type AvatarGroupProps = {
   width?: string
   maxWidth?: string | number
   fixedCount?: number
-} & RowProps &
-  GroupProps
+}
 
 const AvatarGroup = ({
   members,
diff --git a/src/column.tsx b/src/column.tsx
index c866cc8..aa18d48 100644
--- a/src/column.tsx
+++ b/src/column.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, BoxProps, ResponsiveStyleValue } from 'theme-ui'
 
-export type ColumnProps = BoxProps & {
+export interface ColumnProps extends BoxProps {
   start?: number | 'auto' | (number | 'auto')[]
   width?: number | 'auto' | (number | 'auto')[]
   dl?: 0.5 | 1
diff --git a/src/group.tsx b/src/group.tsx
index c8f02dd..cc2ccb1 100644
--- a/src/group.tsx
+++ b/src/group.tsx
@@ -14,10 +14,10 @@ type SizeKey = keyof typeof sizes
 type Direction = 'horizontal' | 'vertical'
 type SpacingValue = SizeKey | ResponsiveStyleValue<number | string>
 
-export type GroupProps = {
+export interface GroupProps extends BoxProps {
   direction?: Direction
   spacing?: SpacingValue
-} & BoxProps
+}
 
 const Group = ({
   children,
diff --git a/src/header.tsx b/src/header.tsx
index ab039c1..3c35625 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -42,7 +42,7 @@ const sx = {
   },
 }
 
-export type LinkItem = {
+export interface LinkItem {
   url: string
   display: string
 }
@@ -74,7 +74,7 @@ const HoverArrow = (): JSX.Element => {
   )
 }
 
-export type NavProps = {
+export interface NavProps {
   link: LinkItem
   mode?: 'homepage' | 'local' | 'remote'
   nav?: string
@@ -116,7 +116,7 @@ const Nav = ({
   }
 }
 
-export type NavGroupProps = {
+export interface NavGroupProps {
   links: LinkItem[]
   nav?: string
   mode?: 'homepage' | 'local' | 'remote'
@@ -143,7 +143,7 @@ const NavGroup = ({
   })
 }
 
-export type HeaderProps = {
+export interface HeaderProps {
   status?: string
   mode?: 'homepage' | 'local' | 'remote'
   nav?: string
diff --git a/src/layout.tsx b/src/layout.tsx
index 4ae38c5..0ab5036 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -10,7 +10,7 @@ import Scrollbar from './scrollbar'
 import Guide from './guide'
 import Settings, { SettingsProps } from './settings'
 
-export type LayoutProps = {
+export interface LayoutProps {
   title?: string
   description?: string
   url?: string
diff --git a/src/link.tsx b/src/link.tsx
index 5c5220f..9b78177 100644
--- a/src/link.tsx
+++ b/src/link.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { Link as ThemedLink, LinkProps as ThemedLinkProps } from 'theme-ui'
 import { default as NextLink } from 'next/link'
 
-export type LinkProps = ThemedLinkProps & {
+export interface LinkProps extends ThemedLinkProps {
   href: string
   internal?: boolean
 }
diff --git a/src/row.tsx b/src/row.tsx
index 50fc096..ffe4e57 100644
--- a/src/row.tsx
+++ b/src/row.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { Grid, GridProps } from 'theme-ui'
 
 export type RowProps = GridProps
diff --git a/src/settings.tsx b/src/settings.tsx
index a0730ee..af30d84 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { IconButton, IconButtonProps } from 'theme-ui'
 
-export type SettingsProps = IconButtonProps & {
+export interface SettingsProps extends Omit<IconButtonProps, 'value'> {
   value: boolean
 }
 

From 2e1fcca5e453fe4e698bfb62e8e5ac679e71e69c Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Tue, 22 Apr 2025 13:54:39 -0400
Subject: [PATCH 20/22] Add more types and cleanup index

---
 src/blockquote.tsx                |   4 +-
 src/{callout.js => callout.tsx}   |  51 ++++++++++++---
 src/{caption.js => caption.tsx}   |  18 +++++-
 src/{colorbar.js => colorbar.tsx} | 100 +++++++++++++++++++++---------
 src/index.ts                      |  45 +++++---------
 5 files changed, 148 insertions(+), 70 deletions(-)
 rename src/{callout.js => callout.tsx} (66%)
 rename src/{caption.js => caption.tsx} (71%)
 rename src/{colorbar.js => colorbar.tsx} (80%)

diff --git a/src/blockquote.tsx b/src/blockquote.tsx
index 15ca205..741a8e5 100644
--- a/src/blockquote.tsx
+++ b/src/blockquote.tsx
@@ -1,11 +1,11 @@
 import React, { Children, PropsWithChildren } from 'react'
 import { Box } from 'theme-ui'
 
-export type BlockQuoteProps = PropsWithChildren<{}>
+export type BlockquoteProps = PropsWithChildren<{}>
 
 const specialChars = ['“', '"', "'", '‘']
 
-const Blockquote = ({ children }: BlockQuoteProps) => {
+const Blockquote = ({ children }: BlockquoteProps) => {
   return (
     <Box variant='styles.blockquote'>
       {Children.map(children, (d, i) => {
diff --git a/src/callout.js b/src/callout.tsx
similarity index 66%
rename from src/callout.js
rename to src/callout.tsx
index af2468a..c74c88e 100644
--- a/src/callout.js
+++ b/src/callout.tsx
@@ -1,11 +1,33 @@
-import React, { forwardRef } from 'react'
-import { Box } from 'theme-ui'
+import React, { forwardRef, ReactNode } from 'react'
+import { Box, ThemeUIStyleObject } from 'theme-ui'
+// @ts-ignore
 import { Arrow } from '@carbonplan/icons'
 import Link from './link'
 
+export interface CalloutProps {
+  label: ReactNode
+  children: ReactNode
+  inverted?: boolean
+  color: string
+  href?: string
+  internal?: boolean
+  sx?: ThemeUIStyleObject
+}
+
+type RefType = React.Ref<HTMLAnchorElement | HTMLButtonElement>
+
 const Callout = (
-  { label, children, inverted, color, href, internal, sx, ...props },
-  ref
+  {
+    label,
+    children,
+    inverted,
+    color,
+    href,
+    internal,
+    sx,
+    ...props
+  }: CalloutProps,
+  ref: RefType
 ) => {
   const baseColor = color || (inverted ? 'secondary' : 'primary')
   const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary'
@@ -22,7 +44,7 @@ const Callout = (
     letterSpacing: 'body',
     width: 'fit-content',
     cursor: 'pointer',
-    textAlign: 'left',
+    textAlign: 'left' as const,
     mb: [1],
     '@media (hover: hover) and (pointer: fine)': {
       '&:hover > #container > #arrow': {
@@ -78,17 +100,30 @@ const Callout = (
 
   if (href) {
     return (
-      <Link ref={ref} href={href} internal={internal} sx={style} {...props}>
+      <Link
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        href={href}
+        internal={internal}
+        sx={style}
+        {...props}
+      >
         {Inner}
       </Link>
     )
   } else {
     return (
-      <Box ref={ref} as='button' sx={style} {...props}>
+      <Box
+        ref={ref as React.Ref<HTMLButtonElement>}
+        as='button'
+        sx={style}
+        {...props}
+      >
         {Inner}
       </Box>
     )
   }
 }
 
-export default forwardRef(Callout)
+export default forwardRef<HTMLAnchorElement | HTMLButtonElement, CalloutProps>(
+  Callout
+)
diff --git a/src/caption.js b/src/caption.tsx
similarity index 71%
rename from src/caption.js
rename to src/caption.tsx
index 28688c1..d80dd98 100644
--- a/src/caption.js
+++ b/src/caption.tsx
@@ -1,7 +1,19 @@
-import React from 'react'
-import { Box } from 'theme-ui'
+import React, { ReactNode } from 'react'
+import { Box, BoxProps } from 'theme-ui'
 
-const Caption = ({ as = 'figcaption', number, children, label = 'figure' }) => {
+export interface CaptionProps {
+  as?: BoxProps['as']
+  number?: number
+  children: ReactNode
+  label?: string
+}
+
+const Caption = ({
+  as = 'figcaption',
+  number,
+  children,
+  label = 'figure',
+}: CaptionProps) => {
   return (
     <Box
       as={as}
diff --git a/src/colorbar.js b/src/colorbar.tsx
similarity index 80%
rename from src/colorbar.js
rename to src/colorbar.tsx
index 882e4cd..3b6e7b7 100644
--- a/src/colorbar.js
+++ b/src/colorbar.tsx
@@ -1,8 +1,32 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { Box, Flex } from 'theme-ui'
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  ReactNode,
+  MouseEventHandler,
+} from 'react'
+import { Box, Flex, FlexProps, ThemeUIStyleObject, get } from 'theme-ui'
 
+type SetClim = (setter: (prev: [number, number]) => [number, number]) => any
+
+export interface ColorbarProps extends FlexProps {
+  colormap: string[]
+  label: ReactNode
+  clim: [number, number]
+  setClim?: SetClim
+  setClimStep?: number
+  units: ReactNode
+  width: string
+  height: string
+  format?: (d: number) => ReactNode
+  discrete?: boolean
+  horizontal?: boolean
+  bottom?: boolean
+  sx?: ThemeUIStyleObject
+  sxClim?: ThemeUIStyleObject
+}
 const styles = {
-  clim: (setClim) => {
+  clim: (setClim?: SetClim): ThemeUIStyleObject & { userSelect: any } => {
     return {
       bg: 'unset',
       border: 'none',
@@ -25,7 +49,7 @@ const DIMENSIONS = {
   height: ['80px', '110px', '110px', '130px'],
 }
 
-const hexToRgb = (hex) => {
+const hexToRgb = (hex: string) => {
   let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result
     ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
@@ -35,7 +59,16 @@ const hexToRgb = (hex) => {
     : null
 }
 
-const Gradient = ({ colormap, discrete, horizontal, width, height }) => {
+const Gradient = ({
+  colormap,
+  discrete,
+  horizontal,
+  width,
+  height,
+}: Pick<
+  ColorbarProps,
+  'colormap' | 'discrete' | 'horizontal' | 'width' | 'height'
+>) => {
   const step = (1 / colormap.length) * 100
   const isHex = String(colormap[0]).startsWith('#')
   const values = colormap.map((color, i) => {
@@ -63,20 +96,26 @@ const Gradient = ({ colormap, discrete, horizontal, width, height }) => {
               minHeight: height || DIMENSIONS.height,
             }),
         mt: horizontal ? ['1px', '1px', '1px', 0] : 0,
-        border: ({ colors }) => `solid 1px ${colors.hinted}`,
+        border: (t) => `solid 1px ${get(t, 'colors.hinted')}`,
         background: css,
       }}
     />
   )
 }
 
-const Label = ({ label, units, horizontal }) => (
+const Label = ({
+  label,
+  units,
+  horizontal,
+}: Pick<ColorbarProps, 'label' | 'units' | 'horizontal'>) => (
   <Box
     sx={
-      !horizontal && {
-        width: ['13px', '17px', '17px', '19px'],
-        alignSelf: 'flex-end',
-      }
+      horizontal
+        ? undefined
+        : {
+            width: ['13px', '17px', '17px', '19px'],
+            alignSelf: 'flex-end',
+          }
     }
   >
     <Box
@@ -128,24 +167,25 @@ const Colorbar = ({
   sx,
   sxClim,
   ...props
-}) => {
+}: ColorbarProps) => {
   if (!Array.isArray(colormap)) {
     throw new Error(`expected array for colormap, got '${colormap}'.`)
   }
 
-  const climRef = [useRef(), useRef()]
+  const climRef = [useRef<HTMLDivElement>(), useRef<HTMLDivElement>()]
   const [climMinDragging, setClimMinDragging] = useState(false)
   const [climMaxDragging, setClimMaxDragging] = useState(false)
 
-  let x,
-    y,
-    dx,
-    dy = 0
-  let id = null
+  let x: number,
+    y: number,
+    dx: number,
+    dy: number = 0
+  let id: null | string = null
   let init = [0, 0]
   let scale = setClimStep
 
-  const draggingFunction = (e) => {
+  const draggingFunction = (e: MouseEvent) => {
+    if (!setClim) return
     if (id === 'min' && !climMinDragging) setClimMinDragging(true)
     if (id === 'max' && !climMaxDragging) setClimMaxDragging(true)
     dx = e.pageX - x
@@ -163,10 +203,10 @@ const Colorbar = ({
     }
   }
 
-  const handleMouseDown = (e) => {
+  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
     y = e.pageY
     x = e.pageX
-    id = e.target.id
+    id = (e.target as HTMLDivElement).id
     init = clim
 
     document.body.setAttribute(
@@ -186,7 +226,9 @@ const Colorbar = ({
     window.addEventListener('mouseup', updater)
   }
 
-  const increment = (e) => {
+  const increment = (e: KeyboardEvent) => {
+    if (!setClim) return
+
     if (climRef[0].current === document.activeElement) {
       e.preventDefault()
       setClim((prev) => [Math.min(prev[0] + scale, prev[1]), prev[1]])
@@ -199,7 +241,9 @@ const Colorbar = ({
     }
   }
 
-  const decrement = (e) => {
+  const decrement = (e: KeyboardEvent) => {
+    if (!setClim) return
+
     if (climRef[0].current === document.activeElement) {
       e.preventDefault()
       setClim((prev) => [Math.min(prev[0] - scale, prev[1]), prev[1]])
@@ -213,7 +257,7 @@ const Colorbar = ({
   }
 
   useEffect(() => {
-    const listener = (e) => {
+    const listener = (e: KeyboardEvent) => {
       if (
         ['ArrowUp', 'ArrowRight'].includes(e.code) ||
         ['ArrowUp', 'ArrowRight'].includes(e.key)
@@ -253,7 +297,7 @@ const Colorbar = ({
           mr: horizontal ? ['2px', '1px', '1px', '2px'] : 0,
           mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px'],
           borderBottom: setClim
-            ? ({ colors }) => `solid 1px ${colors.primary}`
+            ? (t) => `solid 1px ${get(t, 'colors.primary')}`
             : 'unset',
           cursor: setClim
             ? horizontal
@@ -263,7 +307,7 @@ const Colorbar = ({
           ...sxClim,
         }}
         onMouseDown={setClim ? handleMouseDown : () => {}}
-        onClick={() => climRef[0].current.focus()}
+        onClick={() => climRef[0].current?.focus()}
       >
         {format(clim[0])}
       </Box>
@@ -284,7 +328,7 @@ const Colorbar = ({
             : ['2px', '1px', '1px', '2px'],
           mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px'],
           borderBottom: setClim
-            ? ({ colors }) => `solid 1px ${colors.primary}`
+            ? (t) => `solid 1px ${get(t, 'colors.primary')}`
             : 'unset',
           cursor: setClim
             ? horizontal
@@ -294,7 +338,7 @@ const Colorbar = ({
           ...sxClim,
         }}
         onMouseDown={setClim ? handleMouseDown : () => {}}
-        onClick={() => climRef[1].current.focus()}
+        onClick={() => climRef[1].current?.focus()}
       >
         {format(clim[1])}
       </Box>
diff --git a/src/index.ts b/src/index.ts
index 200c983..2b541f7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,50 +1,37 @@
-export { default as Avatar } from './avatar'
-export type { AvatarProps } from './avatar'
-export { default as AvatarGroup } from './avatar-group'
-export type { AvatarGroupProps } from './avatar-group'
-export { default as Badge } from './badge'
-export type { BadgeProps } from './badge'
-export { default as Blockquote } from './blockquote'
-export type { BlockQuoteProps } from './blockquote'
-export { default as Button } from './button'
-export type { ButtonProps } from './button'
-export { default as Callout } from './callout'
-export { default as Caption } from './caption'
-export { default as Colorbar } from './colorbar'
+export { default as Avatar, AvatarProps } from './avatar'
+export { default as AvatarGroup, AvatarGroupProps } from './avatar-group'
+export { default as Badge, BadgeProps } from './badge'
+export { default as Blockquote, BlockquoteProps } from './blockquote'
+export { default as Button, ButtonProps } from './button'
+export { default as Callout, CalloutProps } from './callout'
+export { default as Caption, CaptionProps } from './caption'
+export { default as Colorbar, ColorbarProps } from './colorbar'
 export { default as Colors } from './colors'
-export { default as Column } from './column'
-export type { ColumnProps } from './column'
+export { default as Column, ColumnProps } from './column'
 export { default as Custom404 } from './custom-404'
-export { default as Dimmer } from './dimmer'
-export type { DimmerProps } from './dimmer'
+export { default as Dimmer, DimmerProps } from './dimmer'
 export { default as Expander } from './expander'
 export { default as FadeIn } from './fade-in'
 export { default as Figure } from './figure'
 export { default as FigureCaption } from './figure-caption'
 export { default as Filter } from './filter'
 export { default as Footer } from './footer'
-export { default as Group } from './group'
-export type { GroupProps } from './group'
+export { default as Group, GroupProps } from './group'
 export { default as Guide } from './guide'
-export { default as Header } from './header'
-export type { HeaderProps } from './header'
+export { default as Header, HeaderProps } from './header'
 export { default as Heading } from './heading'
 export { default as Input } from './input'
-export { default as Layout } from './layout'
-export type { LayoutProps } from './layout'
-export { default as Link } from './link'
-export type { LinkProps } from './link'
+export { default as Layout, LayoutProps } from './layout'
+export { default as Link, LinkProps } from './link'
 export { default as LinkGroup } from './link-group'
 export { default as Logo } from './logo'
 export { default as Meta } from './meta'
 export { default as Monogram } from './monogram'
 export { default as Menu } from './menu'
-export { default as Row } from './row'
-export type { RowProps } from './row'
+export { default as Row, RowProps } from './row'
 export { default as Scrollbar } from './scrollbar'
 export { default as Select } from './select'
-export { default as Settings } from './settings'
-export type { SettingsProps } from './settings'
+export { default as Settings, SettingsProps } from './settings'
 export { default as Slider } from './slider'
 export { default as Table } from './table'
 export { default as TableCaption } from './table-caption'

From 52c53ec208ea97f5f5eb5946c27e5ae622852524 Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Tue, 22 Apr 2025 14:39:08 -0400
Subject: [PATCH 21/22] Add more types

---
 src/colors.js                                 | 66 ------------------
 src/colors.tsx                                | 69 +++++++++++++++++++
 src/{custom-404.js => custom-404.tsx}         |  1 +
 src/{expander.js => expander.tsx}             | 10 ++-
 src/{fade-in.js => fade-in.tsx}               | 14 +++-
 src/{figure-caption.js => figure-caption.tsx} |  8 ++-
 src/{figure.js => figure.tsx}                 |  4 +-
 src/index.ts                                  |  6 +-
 8 files changed, 101 insertions(+), 77 deletions(-)
 delete mode 100644 src/colors.js
 create mode 100644 src/colors.tsx
 rename src/{custom-404.js => custom-404.tsx} (99%)
 rename src/{expander.js => expander.tsx} (75%)
 rename src/{fade-in.js => fade-in.tsx} (66%)
 rename src/{figure-caption.js => figure-caption.tsx} (53%)
 rename src/{figure.js => figure.tsx} (75%)

diff --git a/src/colors.js b/src/colors.js
deleted file mode 100644
index 305f1f0..0000000
--- a/src/colors.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-
-const InlineColor = ({ sx, color, children, ...props }) => {
-  return (
-    <Box
-      as='span'
-      sx={{ display: 'inline-block', color: color, ...sx }}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-}
-
-const Colors = {}
-
-Colors.Primary = (props) => {
-  return <InlineColor color='primary' {...props} />
-}
-
-Colors.Secondary = (props) => {
-  return <InlineColor color='secondary' {...props} />
-}
-
-Colors.Background = (props) => {
-  return <InlineColor color='background' {...props} />
-}
-
-Colors.Red = (props) => {
-  return <InlineColor color='red' {...props} />
-}
-
-Colors.Orange = (props) => {
-  return <InlineColor color='orange' {...props} />
-}
-
-Colors.Yellow = (props) => {
-  return <InlineColor color='yellow' {...props} />
-}
-
-Colors.Green = (props) => {
-  return <InlineColor color='green' {...props} />
-}
-
-Colors.Teal = (props) => {
-  return <InlineColor color='teal' {...props} />
-}
-
-Colors.Blue = (props) => {
-  return <InlineColor color='blue' {...props} />
-}
-
-Colors.Purple = (props) => {
-  return <InlineColor color='purple' {...props} />
-}
-
-Colors.Pink = (props) => {
-  return <InlineColor color='pink' {...props} />
-}
-
-Colors.Grey = (props) => {
-  return <InlineColor color='grey' {...props} />
-}
-
-export default Colors
diff --git a/src/colors.tsx b/src/colors.tsx
new file mode 100644
index 0000000..f2d322a
--- /dev/null
+++ b/src/colors.tsx
@@ -0,0 +1,69 @@
+import React, { ReactNode } from 'react'
+import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
+
+interface InlineColorProps extends BoxProps {
+  sx: ThemeUIStyleObject
+  color: string
+  children: ReactNode
+}
+const InlineColor = ({ sx, color, children, ...props }: InlineColorProps) => {
+  return (
+    <Box
+      as='span'
+      sx={{ display: 'inline-block', color: color, ...sx }}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
+}
+
+type ColorProps = Omit<InlineColorProps, 'color'>
+
+export const Primary = (props: ColorProps) => {
+  return <InlineColor color='primary' {...props} />
+}
+
+export const Secondary = (props: ColorProps) => {
+  return <InlineColor color='secondary' {...props} />
+}
+
+export const Background = (props: ColorProps) => {
+  return <InlineColor color='background' {...props} />
+}
+
+export const Red = (props: ColorProps) => {
+  return <InlineColor color='red' {...props} />
+}
+
+export const Orange = (props: ColorProps) => {
+  return <InlineColor color='orange' {...props} />
+}
+
+export const Yellow = (props: ColorProps) => {
+  return <InlineColor color='yellow' {...props} />
+}
+
+export const Green = (props: ColorProps) => {
+  return <InlineColor color='green' {...props} />
+}
+
+export const Teal = (props: ColorProps) => {
+  return <InlineColor color='teal' {...props} />
+}
+
+export const Blue = (props: ColorProps) => {
+  return <InlineColor color='blue' {...props} />
+}
+
+export const Purple = (props: ColorProps) => {
+  return <InlineColor color='purple' {...props} />
+}
+
+export const Pink = (props: ColorProps) => {
+  return <InlineColor color='pink' {...props} />
+}
+
+export const Grey = (props: ColorProps) => {
+  return <InlineColor color='grey' {...props} />
+}
diff --git a/src/custom-404.js b/src/custom-404.tsx
similarity index 99%
rename from src/custom-404.js
rename to src/custom-404.tsx
index 312c135..b19ab15 100644
--- a/src/custom-404.js
+++ b/src/custom-404.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Box } from 'theme-ui'
+// @ts-ignore
 import { PoopSad } from '@carbonplan/emoji'
 import Layout from './layout'
 import Row from './row'
diff --git a/src/expander.js b/src/expander.tsx
similarity index 75%
rename from src/expander.js
rename to src/expander.tsx
index 717a6ec..2584917 100644
--- a/src/expander.js
+++ b/src/expander.tsx
@@ -1,7 +1,13 @@
 import React from 'react'
-import { Box, IconButton } from 'theme-ui'
+import { IconButton, IconButtonProps } from 'theme-ui'
 
-const Expander = ({ value, id, onClick, sx }) => {
+export interface ExpanderProps {
+  value: IconButtonProps['aria-checked']
+  id: IconButtonProps['id']
+  onClick: IconButtonProps['onClick']
+  sx: IconButtonProps['sx']
+}
+const Expander = ({ value, id, onClick, sx }: ExpanderProps) => {
   return (
     <IconButton
       onClick={onClick}
diff --git a/src/fade-in.js b/src/fade-in.tsx
similarity index 66%
rename from src/fade-in.js
rename to src/fade-in.tsx
index 60334e5..3ebfdea 100644
--- a/src/fade-in.js
+++ b/src/fade-in.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
 import { keyframes } from '@emotion/react'
 
 const fade = keyframes({
@@ -11,7 +11,17 @@ const fade = keyframes({
   },
 })
 
-const FadeIn = ({ duration = 300, delay = 0, children, ...delegated }) => {
+export interface FadeInProps extends BoxProps {
+  duration?: number
+  delay?: number
+}
+
+const FadeIn = ({
+  duration = 300,
+  delay = 0,
+  children,
+  ...delegated
+}: FadeInProps) => {
   return (
     <Box
       {...delegated}
diff --git a/src/figure-caption.js b/src/figure-caption.tsx
similarity index 53%
rename from src/figure-caption.js
rename to src/figure-caption.tsx
index b06e436..428a6fe 100644
--- a/src/figure-caption.js
+++ b/src/figure-caption.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import Caption from './caption'
+import Caption, { CaptionProps } from './caption'
 
-const FigureCaption = ({ as = 'figcaption', number, children }) => {
+const FigureCaption = ({
+  as = 'figcaption',
+  number,
+  children,
+}: CaptionProps) => {
   return (
     <Caption as={as} number={number} label='figure'>
       {children}
diff --git a/src/figure.js b/src/figure.tsx
similarity index 75%
rename from src/figure.js
rename to src/figure.tsx
index 874d6df..0160b9b 100644
--- a/src/figure.js
+++ b/src/figure.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Box } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
 
 import Group from './group'
 
-const Figure = ({ as = 'figure', children, sx }) => {
+const Figure = ({ as = 'figure', children, sx }: BoxProps) => {
   return (
     <Box
       as={as}
diff --git a/src/index.ts b/src/index.ts
index 2b541f7..442a781 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,12 +6,12 @@ export { default as Button, ButtonProps } from './button'
 export { default as Callout, CalloutProps } from './callout'
 export { default as Caption, CaptionProps } from './caption'
 export { default as Colorbar, ColorbarProps } from './colorbar'
-export { default as Colors } from './colors'
+export * as Colors from './colors'
 export { default as Column, ColumnProps } from './column'
 export { default as Custom404 } from './custom-404'
 export { default as Dimmer, DimmerProps } from './dimmer'
-export { default as Expander } from './expander'
-export { default as FadeIn } from './fade-in'
+export { default as Expander, ExpanderProps } from './expander'
+export { default as FadeIn, FadeInProps } from './fade-in'
 export { default as Figure } from './figure'
 export { default as FigureCaption } from './figure-caption'
 export { default as Filter } from './filter'

From 1afa73cfccf89ba6c0b4c0a5041639f63c6fe562 Mon Sep 17 00:00:00 2001
From: Kata Martin <katasm@gmail.com>
Date: Tue, 22 Apr 2025 16:59:21 -0400
Subject: [PATCH 22/22] Add types for Filter

---
 src/{filter.js => filter.tsx} | 66 +++++++++++++++++++++++++----------
 src/index.ts                  |  2 +-
 2 files changed, 49 insertions(+), 19 deletions(-)
 rename src/{filter.js => filter.tsx} (61%)

diff --git a/src/filter.js b/src/filter.tsx
similarity index 61%
rename from src/filter.js
rename to src/filter.tsx
index 14154af..5377997 100644
--- a/src/filter.js
+++ b/src/filter.tsx
@@ -1,33 +1,59 @@
-import React, { useMemo } from 'react'
-import { Box } from 'theme-ui'
+import React, { ReactNode, useMemo } from 'react'
+import { Box, BoxProps } from 'theme-ui'
 import Tag from './tag'
 
+export interface FilterProps<T> extends BoxProps {
+  values: { [Property in keyof T]: boolean }
+  setValues: (updated: { [Property in keyof T]: boolean }) => void
+  order?: (keyof T)[]
+  colors?: { [Property in keyof T]: string }
+  labels?: { [Property in keyof T]: ReactNode }
+  label?: ReactNode
+  showAll?: boolean
+  multiSelect?: boolean
+}
 const sx = {
   label: {
     fontFamily: 'mono',
     letterSpacing: 'mono',
     fontSize: [1, 1, 1, 2],
     color: 'secondary',
-    userSelect: 'none',
-    textTransform: 'uppercase',
+    userSelect: 'none' as const,
+    textTransform: 'uppercase' as const,
   },
 }
 
-const duplicateOptions = (options, defaultValue, overrides = {}) => {
-  return Object.keys(options).reduce(
-    (o, key) => Object.assign(o, { [key]: overrides[key] || defaultValue }),
-    {}
-  )
+const duplicateOptions = <T,>(
+  options: { [Property in keyof T]: boolean },
+  defaultValue: boolean,
+  overrides: Partial<{ [Property in keyof T]: boolean }> = {}
+): { [Property in keyof T]: boolean } => {
+  let result = { ...options }
+  Object.keys(options).forEach((key) => {
+    result[key as keyof T] = !!overrides[key as keyof T] || defaultValue
+  })
+
+  return result
 }
 
-const isAll = (option) => {
+const isAll = <T,>(option: FilterProps<T>['values']) => {
   return (
-    Object.keys(option).filter((d) => option[d]).length ==
+    Object.keys(option).filter((d) => option[d as keyof T]).length ==
     Object.keys(option).length
   )
 }
 
-const updateValues = ({ values, multiSelect, setValues, value }) => {
+const updateValues = <T,>({
+  values,
+  multiSelect,
+  setValues,
+  value,
+}: {
+  values: FilterProps<T>['values']
+  multiSelect: FilterProps<T>['multiSelect']
+  setValues: FilterProps<T>['setValues']
+  value: keyof T
+}) => {
   const isAllAlreadySelected = isAll(values)
   const isSelectingAll = value === 'all'
 
@@ -52,7 +78,9 @@ const updateValues = ({ values, multiSelect, setValues, value }) => {
       // do nothing
     } else {
       // select only value
-      updatedToggle = duplicateOptions(values, false, { [value]: true })
+      updatedToggle = duplicateOptions(values, false, {
+        [value]: true,
+      } as Partial<{ [Property in keyof T]: boolean }>)
     }
   }
 
@@ -61,7 +89,7 @@ const updateValues = ({ values, multiSelect, setValues, value }) => {
   }
 }
 
-const Filter = ({
+const Filter = <T,>({
   values,
   setValues,
   label,
@@ -71,12 +99,12 @@ const Filter = ({
   showAll = false,
   multiSelect = false,
   ...props
-}) => {
+}: FilterProps<T>) => {
   const keys = useMemo(() => {
     if (order) {
       return order
     } else {
-      return Object.keys(values)
+      return Object.keys(values) as (keyof T)[]
     }
   }, [order, ...Object.keys(values).sort()])
 
@@ -86,12 +114,13 @@ const Filter = ({
       <Box sx={{ mt: label ? [3] : 0 }}>
         {showAll && (
           <Tag
+            label='all'
             onClick={() =>
               updateValues({
                 values: values,
                 multiSelect,
                 setValues: setValues,
-                value: 'all',
+                value: 'all' as keyof T,
               })
             }
             value={isAll(values)}
@@ -102,6 +131,7 @@ const Filter = ({
         )}
         {keys.map((d, i) => (
           <Tag
+            label={String(d)}
             onClick={() =>
               updateValues({
                 values: values,
@@ -127,7 +157,7 @@ const Filter = ({
               mb: [1],
             }}
           >
-            {labels ? labels[d] : d}
+            {labels ? labels[d] : String(d)}
           </Tag>
         ))}
       </Box>
diff --git a/src/index.ts b/src/index.ts
index 442a781..7035d24 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,7 +14,7 @@ export { default as Expander, ExpanderProps } from './expander'
 export { default as FadeIn, FadeInProps } from './fade-in'
 export { default as Figure } from './figure'
 export { default as FigureCaption } from './figure-caption'
-export { default as Filter } from './filter'
+export { default as Filter, FilterProps } from './filter'
 export { default as Footer } from './footer'
 export { default as Group, GroupProps } from './group'
 export { default as Guide } from './guide'