00:00 In this exercise we have a icon component here. And the icon component takes in a single prop, which is size. And size here is loose size, which is size or string. OK, well, what is size? So size is basically a type here that we're deriving from preset sizes.

00:19 Now, these preset sizes are basically just sort of like aliases over the top of 0.5 rem, 1 rem here. And we're using key of type of just like in the kind of exercise we've already seen to derive the type from this. This means then that we should be able to either pass in size or pass in a string. And this is working.

00:39 There's a funny little bit here where we need to pass an as to it because TypeScript isn't quite understanding that props.size is size. But it's absolutely fine. And you don't need to change this in order to make the exercise work. The thing that's sort of breaking, though, is that autocomplete for SM and XS are no longer working.

00:59 So inside here, SM is like we're not getting the options that are possible for this here. And we're not getting options for this either for XS. We can still pass in any string, which is really nice, but it's not actually behaving in the way that we want to.

01:15 So your job here is to try to find a type for loose size here that is actually going to make it work and make sense. Now, this exercise is really hard, and it's actually probably if you're just trying to like work it out yourself, it's probably not possible to work it out yourself.

01:34 So feel free to have a go and feel free to like try a few things and then see what the solution is, because the solution is pretty crazy.