Property 'inverted' does not exist on type '{ outline: string; primary: string; }'

[guoapeng]

when I build the project using the cli command npm run build in typescript strict mode.
there are several build errors, I fixed some but the serious erros is as the following.

$npm run build

> purple-plasma@2.2.0 build
> astro check && astro build

18:53:57 Types generated 168ms
18:53:57 [check] Getting diagnostics for Astro files in /astro/purple-plasma...
src/components/ui/button.astro:36:5 - error ts(7053): Element implicitly has an 'any' type because expression of type '"inverted" | "outline" | "primary"' can't be used to index type '{ outline: string; primary: string; }'.
  Property 'inverted' does not exist on type '{ outline: string; primary: string; }'.

36     styles[style],
       ~~~~~~~~~~~~~

I looked into the code and found that those two styles consts are defined differently, which is causing issue when building the project. please have a look and advise, thanks in advance!

src/components/ui/link.astro

const styles = {
inverted: "bg-white text-black border-2 border-transparent",
outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ",
primary: "bg-black text-white hover:bg-gray-800 border-2 border-transparent",
muted: "bg-gray-100 hover:bg-gray-200 border-2 border-transparent",
};

src/components/ui/button.astro
const styles = {
outline: "border-2 border-black hover:bg-black text-black hover:text-white",
primary:
"bg-black text-white hover:bg-slate-900 border-2 border-transparent",
};

[surjithctly]

Thanks for noticing. Were you able to fix the issue?

Can you open a PR?