[styled] Implicit styleProps should be explicit

[eps1lon]

Summary 💡

styleProps is currently repeating the same mistakes as React.FC with children.
By default it assumes a generic shape that can result in writing code that's impossible at runtime when we should be able to verify it statically

Examples 🌈

const FancySpan = styled('span')(({ styleProps }) => {
  const size = styleProps?.size;
  if (typeof size !== 'number') throw new TypeError('Expected a number')
  return { height: size + 5 }
});

<FancySpan styleProps={{ size: 1 }} />;

Motivation 🔦

This currently type-checks when it should fail:

const FancySpan = styled('span')(({ styleProps }) => {
  const size = styleProps?.size;
  if (typeof size !== 'number') throw new TypeError('Expected a number')
  return { height: size + 5 }
});

// currently type-checks but fails at runtime
<FancySpan styleProps={{ size: '' }} />;
const FancyDiv = styled('span')()
// @ts-expect-error There are no styleProps. Passing this is an author error that should be caught
<FancyDiv styleProps={{ }} />;

Note that you can get better type-safety with explicit prop shapes but considering past experience with implicit props this should be default:

const ClockNumberRoot = styled('span', { skipSx: true })<{ styleProps: { inner: boolean }>(
  ({ theme, styleProps }) => ({
....

// @ts-expect-error `theme` is required now
<ClockNumberRoot styleProps={{inner}} />

styleProps should be explicitly declared not implicitly provided considering styled does not inject such a prop.