agent(#9): Margin and Padding on base component

[matthias-reis]

Closes #9

[matthias-reis]

IMPORTANT. PLEASE FIX:

The implementation is significantly wrong. Please re-iterate over the whole solution in the following way:

Work with Next Yak, not with Style Props. Next Yak supports so called mixings. Here's a snippet on how you can approach the switch between different values:

const Card = styled.div<{ p: string }>`
  background: green;
  ${(props) => {
    switch (props.p) {
      case "l": {
        return css`padding: 1rem`;
      }
      case "xl": {
        return css`padding: rem`;
      }
    }
  }}
`;

Please treat this just as an implementation example. The other features must also be available.

[matthias-reis]

Does not lead to proper results. Starting from scratch.