chore(deps): update styled-jsx to ^3.3.1 (#520)

* chore(deps): update styled-jsx to ^3.3.1

update styled-jsx to ^3.3.1 to allow compatiblity with react@^17

* fix(modules): fix 695-issue to compatible with React 17

* docs: fix module error caused by styled-jsx update

Co-authored-by: unix <unix.bio@gmail.com>

components/css-baseline/css-baseline.tsx

@@ -2,6 +2,25 @@ import React from 'react'
 import useTheme from '../use-theme'
 import flush from 'styled-jsx/server'
 import flushToReact from 'styled-jsx/server'
+/**
+ * Hack Patch for 695 issue.
+ *
+ * This is to fix a compilation issue for styled-jsx,
+ * perhaps for reasons that may be related to babel:
+ *   https://github.com/vercel/styled-jsx/issues/695
+ *
+ * styled-jsx has not considered fixing this issue in recent versions,
+ * and we had to hack it into our code to be compatible with React 17.
+ */
+/* istanbul ignore next */
+/* eslint-disable */
+// @ts-ignore
+import _JSXStyle from 'styled-jsx/style'
+/* istanbul ignore if */
+if (typeof global !== 'undefined') {
+  Object.assign(global, { _JSXStyle })
+}
+/* eslint-enable */
 
 const CssBaseline: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme = useTheme()

components/grid/grid-container.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import useTheme from '../use-theme'
 import GridBasicItem, { GridBasicItemComponentProps } from './basic-item'
 import { Wrap } from './grid-types'
-import css from 'styled-jsx/css'
+import { css } from 'styled-jsx/css'
 
 interface Props {
   gap: number

components/grid/grid.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import css from 'styled-jsx/css'
+import { css } from 'styled-jsx/css'
 import GridContainer from './grid-container'
 import GridBasicItem, { GridBasicItemComponentProps } from './basic-item'
 

components/modal/modal-action.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react'
-import css from 'styled-jsx/css'
+import { css } from 'styled-jsx/css'
 import useTheme from '../use-theme'
 import { useModalContext } from './modal-context'
 import Button, { ButtonProps } from '../button/button'