Fix: Change base styled import to baseStyled to use styled as default export

Author: rockyroed

.changeset/plenty-rules-heal.md

@@ -0,0 +1,9 @@
+---
+'@emotion/styled': major
+---
+
+What: Add autocomplete suggestion for styled. Fixes #3312
+
+Why: When typing "styled" while coding, there are no autocompletion suggestions for `styled`. It's expected behavior is to have a suggestion option and when selected, imports `styled` like this: `import styled from @emotion/styled`
+
+How: The previous code imports the base styled as `styled`. This changes it to `baseStyled` so the module can use `styled` as the default export.

packages/styled/src/index.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@emotion/react'
-import styled from './base'
+import baseStyled from './base'
 import { ReactJSXIntrinsicElements } from './jsx-namespace'
 import { tags } from './tags'
 import {
@@ -33,11 +33,10 @@ export type StyledTags = {
 export interface CreateStyled extends BaseCreateStyled, StyledTags {}
 
 // bind it to avoid mutating the original function
-const newStyled = styled.bind(null) as CreateStyled
+const styled = baseStyled.bind(null) as CreateStyled
 
 tags.forEach(tagName => {
-  ;(newStyled as any)[tagName] = newStyled(tagName as keyof typeof newStyled)
+  ;(styled as any)[tagName] = styled(tagName as keyof typeof styled)
 })
 
-export { newStyled as styled }
-export default newStyled
+export default styled