Allow react components in tagged template

Author: Brijesh Bittu

packages/pigment-css-react-new/src/styled.d.ts

@@ -46,7 +46,7 @@ export interface CreateStyledComponent<
 > {
   <Props extends {} = {}>(
     arg: TemplateStringsArray,
-    ...templateArgs: (Primitive | ((props: Props) => Primitive))[]
+    ...templateArgs: (StyledComponent<any> | Primitive | ((props: Props) => Primitive))[]
   ): StyledComponent<Substitute<OuterProps, Props>> & (Component extends string ? {} : Component);
 
   <V extends {}>(

packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx

@@ -149,7 +149,7 @@ describe('styled - runtime', () => {
       });
 
       const { getByTestId } = render(<StyledParent as="div" data-testid="component" />);
-      expect(getByTestId('component').className).to.equal('child');
+      expect(getByTestId('component').className).to.equal('child parent');
     });
 
     it('use component forward prop if provided `as` is a component', () => {