Ability to use an object with the value representing the css type

[adrhumphreys]

Sorry for the terrible title, what I effectively want to be able to do is define an object that has responsive values

const breakpoints = {
  xs: 0,
  sm: 480,
  md: 768,
  lg: 1024,
};

type Breakpoint = keyof typeof breakpoints;

type ResponsiveProps<T> = {
  [Type in Breakpoint]?: T;
};

type ResponsiveStyle = CSS.Properties<string | number | ResponsiveProps<string | number>>;

const example: ResponsiveStyle = {
  height: 40,
  width: { xs: 20, md: 768 },
  display: { xs: "none", md: "block" },
};

When I do this I lose the ability to verify the types and anything that has a set of properties (e.g. display) will throw an error

Does anyone know a way to achieve this?