Merge pull request #577 from kendallgassner/Add_ARRAY_To_STYLED

allowing more then one Component to be passed in to styled

packages/utils/README.md

@@ -379,7 +379,7 @@ all the same props as the element prop.
 
 **Parameters:**
 
-- element (`T`) - The html dom element to create a Component for
+- element (`T | [T, ...ReactNode[]]`) - The html dom element to create a Component for
 - options (`string | WrappedComponent`) - The class an metadata to attach to the Component
 
 **returns:** DocGen & Slotted & WithRef

packages/utils/src/utils/styled.tsx

@@ -49,7 +49,7 @@ interface WrappedComponent {
  * }
  */
 export function styled<T extends keyof JSX.IntrinsicElements>(
-  element: T,
+  element:  T | [T, ...React.ReactNode[]],
   options: string | WrappedComponent
 ) {
   const defaultDescription = `This component accepts all HTML attributes for a "${element}" element.`;
@@ -67,24 +67,34 @@ export function styled<T extends keyof JSX.IntrinsicElements>(
     React.PropsWithoutRef<Props> & React.RefAttributes<HTMLElement>
   >;
 
+  const elements = Array.isArray(element) ? element : [element];
+
   /** The result "styled" component. */
   const Wrapped = React.forwardRef<HTMLElement, Props>((props, ref) => {
-    const { as, ...rest } = props;
-    const Component = (as || element) as any;
+    const { as,  ...rest } = props;
+
+    const [component, ...innerElements] = elements as any;
+    const Component = as || component;
 
     return (
       <Component
         ref={ref}
         {...rest}
         className={makeClass(className, (props as any).className)}
       >
-        {props.children}
+        {innerElements.length
+          ? innerElements
+              .reverse()
+              .reduce((Children: React.ReactChildren, Parent: any) => {
+                return <Parent> {Children} </Parent>;
+              }, props.children)
+          : props.children}
       </Component>
     );
   }) as DocGen & Slotted & WithRef;
 
   // eslint-disable-next-line no-underscore-dangle
-  Wrapped._SLOT_ = slot || Symbol(element);
+  Wrapped._SLOT_ = slot || Symbol(elements[0]);
   Wrapped.displayName = name;
   // eslint-disable-next-line no-underscore-dangle
   Wrapped.__docgenInfo = {