How to use the @emotion/styled/macro function in @emotion/styled

* This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
// @flow
import * as React from 'react';
import css from '@emotion/css/macro';
import styled from '@emotion/styled/macro';

type Props = {
  /** Icon name */
  name: string,
  /** Forces the icon to be rendered with a squared area, this helps icons alignment */
  squared?: boolean,
};

const Icon = styled(
  React.forwardRef(({ name, squared, ...props }: Props, ref) => (
    <i>
      {name}
    </i>
  ))
)`
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'quid-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: inherit;

  /* Enable Ligatures */

{...props}
              className={cn}
              tabIndex={-1}
              data-state={this.state.buttonState.join(' ')}
              disabled={disabled}
            >
              
            
          
        )}
      
    );
  }
}

const InputColor: React.StatelessFunctionalComponent = styled(
  React.forwardRef((props, ref) => )
)();

// @component
export default InputColor;

import styled from '@emotion/styled/macro'

styled('div', { shouldForwardProp: window.whatever }, window.whatever)()

styled('div', { shouldForwardProp: window.whatever }, window.whatever)``

styled(
  window.whatever,
  { shouldForwardProp: window.whatever },
  window.whatever
)()

styled(
  window.whatever,
  { shouldForwardProp: window.whatever },
  window.whatever
)``

return (
    <div>
      {entries.map(entry =&gt;
        entry.type === EntryKind.Directory ? (
          <div>{entry.uri.fsPath.slice(1)}</div>
        ) : (
          
        )
      )}
       onClickCreate()}&gt;Create...
    </div>
  );
};

export default styled(Sidebar)`
  display: flex;
  flex-direction: column;
`;

export const Primary = styled(ButtonBase)`
  border: none;
  background-color: #044e54;
  color: white;

  &:focus,
  &:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    background-color: #0a6c74;
  }
  > svg {
    margin-right: 1rem;
  }
`;

export const Secondary = styled(ButtonBase)`
  background-color: #d9e2ec;
  color: black;

  &:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  }
`;

export const Tertiary = styled(ButtonBase)`
  background-color: transparent;
  color: #627d98;

  &:hover {
    background-color: #f0f4f8;
  }
`;

flex-shrink: 0;

  &:hover,
  &:focus-visible {
    color: ${wf(props => props.theme.primary)};
  }
`;

const SortAsc = styled(props => )``;
const SortDesc = styled(props => )``;
const NEXT_ARROW = props =>
  props.sort == null ? SortDesc : props.sort === 'desc' ? SortAsc : false;
const ACTIVE_ARROW = props =>
  props.sort === 'desc' ? SortDesc : props.sort === 'asc' ? SortAsc : false;

export const SortIcon = styled(
  React.forwardRef(({ sort, ...props }, ref) => (
    <button type="button">
      
      
    </button>
  ))
)`
  all: unset;
  display: inline-block;
  position: relative;
  height: 14px;
  width: 14px;
  cursor: pointer;
  margin-left: ${wf(props =&gt; props.theme.sizes.small)};
  flex-shrink: 0;

renderTooltip: RenderTooltipProps => React.Node,
  placement?: Placement,
  modifiers?: Modifiers,
  eventsEnabled?: boolean,
  positionFixed?: boolean,
  children: ({ ref: React.ElementRef } & Helpers) => React.Node,
};

export const Tooltip = ({ renderTooltip, ...props }: Props) => (
  
);
Tooltip.defaultProps = {
  closeOnMouseOutside: true,
};

export const Container = styled(
  React.forwardRef(({ arrowProps, children, ...props }, ref) => (
    
      {children}
      
    
  ))
)``;

const editor = editorManager.mount(el.current);

    return () => {
      editor.dispose();
    };
  }, [editorManager, el]);

  return (
    <div>
      <div></div>
    </div>
  );
};

export default styled(Editor)``;

? props.theme.colors.white
      : props.theme.colors.gray6
  )};
  color: ${wf(props => props.theme.primary)};
  border: 1px solid ${wf(props => props.theme.colors.gray2)};
  border-radius: 2px;
  box-shadow: 0 1px 2px
    ${wf(props =>
      Color(props.theme.colors.black)
        .alpha(0.4)
        .string()
    )};
  min-width: 27.86em;
`;

const DropdownList: React.ComponentType = styled(
  React.forwardRef(
    (
      {
        items,
        categories,
        inputValue,
        getItemProps,
        useFilter,
        filterFn,
        twoColumn,
        highlightedIndex,
        selectedItems,
        highlight,
        multiselect,
        ...props
      }: Props,

project,
}) => {
  const editorManager = new EditorManager({ files: project, initialPath: initialPath });

  return (
    <div>
      
        
        
        
      
    </div>
  );
};

export const Playground = styled(PlaygroundCmp)`
  display: flex;
  flex-direction: row;

  font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #222;

  ${Sidebar} {
    flex: 1 1 100px;
    min-width: 100px;
    max-width: 400px;
    border-right: 1px solid #ccc;
  }