Is there a way to extract keys or their types from tokens?

[DaleSeo]

For example, let's say you have font weights tokens defined in panda.config.ts.

import { defineConfig } from "@pandacss/dev";
import type { Tokens } from "@pandacss/types";

export const fontWeights: Tokens["fontWeights"] = {
  thin: { value: "100" },
  light: { value: "300" },
  normal: { value: "400" },
  medium: { value: "500" },
  bold: { value: "700" },
};

export default defineConfig({
  // ...
  theme: {
    extend: {
      tokens: {
        fontWeights,
      },
    },
  },
});

I would like to extract the keys from the tokens to define prop types for my components instead of repeating myself like this:

function SomeComponent({ fontWeight }: { fontWeight: "thin" | "light" | "normal" | "medium" | "bold" }) {
  // ...
}

If fontWeights was a plain object, I would just do keyof typeof fontWeights but it's type of Tokens["fontWeights"].

[anubra266]

@DaleSeo
https://play.panda-css.com/DvC0dSJe8R/xmL79a-Jn-?tab=config

[DaleSeo]

Thanks so much, @anubra266! This works like a charm!