fix incorrect mjs export

emotion-js/emotion#2730

demo.tsx

@@ -1,17 +1,14 @@
 import { createRoot } from 'react-dom/client'
 import * as React from 'react'
+import { Yup, DropdownMenu, Section, Box } from './src'
 import {
     EditingForm,
     DateTimeField,
     SelectField,
     InputField,
-    Yup,
     FormSubmitHandler,
-    DropdownMenu,
-    Section,
-    Box,
     SelectOnChangeHandler,
-} from './src'
+} from './src/form'
 
 import 'bootstrap/dist/css/bootstrap.css'
 import 'flatpickr/dist/flatpickr.css'

src/alert.tsx

@@ -1,7 +1,6 @@
-import { React, FC, useEffect, cx, useState } from './common'
+import { React, FC, useEffect, cx, styled, useState } from './common'
 import { ColProps } from './col'
 import { CombinedError } from 'urql'
-import styled from '@emotion/styled'
 import { errorToString } from './util'
 import { BSVariants, bsClassNames } from './bs'
 import { Delayed } from './ui-state'

src/button.tsx

@@ -1,5 +1,4 @@
-import { React, PropsWithOptionalChildren, cx } from './common'
-import styled, { CSSObject } from '@emotion/styled'
+import { React, PropsWithOptionalChildren, CSSObject, styled, cx } from './common'
 import { BSVariants, bsClassNames } from './bs'
 import { LoadingDots as LD } from './loading-dots'
 import { IconKey, Icon } from './icon'

src/common.ts

@@ -5,13 +5,20 @@ export * from './types'
 export * from './util'
 export { useIsSSR, useSSRSafeId, SSRProvider } from '@react-aria/ssr'
 const { useState, useEffect, useMemo, useContext, useId, useCallback, useLayoutEffect } = React
+import _styled, { CSSObject, CreateStyled } from '@emotion/styled'
 
+// emotion/styled has bad cjs export: https://github.com/emotion-js/emotion/issues/2730
+let styled = _styled
+if ((_styled as any).default) styled = (styled as any).default as any as CreateStyled
+
+export type { CSSObject }
 export {
     cx,
     css,
     Yup,
     React,
     useId,
+    styled,
     useMemo,
     useState,
     useEffect,

src/date-time-field.tsx

@@ -1,6 +1,5 @@
-import { React, useId, useMemo, useState, useCallback, cx } from './common'
+import { React, styled, useId, useMemo, useState, useCallback, cx } from './common'
 import { Box } from 'boxible'
-import styled from '@emotion/styled'
 import { DateTime, DateTimeProps } from './date-time'
 import { useFormContext } from './form-hooks'
 import { FloatingField, FloatingFieldProps } from './floating-field'

src/floating-field.tsx

@@ -1,5 +1,4 @@
-import { React, FCWC, cx } from './common'
-import styled from '@emotion/styled'
+import { React, FCWC, styled, cx } from './common'
 import { BoxProps } from 'boxible'
 import { Col, ColProps } from './col'
 import { ExtraInfo } from './label'

src/footer.tsx

@@ -1,6 +1,5 @@
-import { React, FCWC, cx } from './common'
+import { React, FCWC, styled, cx } from './common'
 import { Box, BoxProps } from 'boxible'
-import styled from '@emotion/styled'
 import { Theme } from './theme'
 
 const FooterWrapper = styled(Box)({

src/hooks.ts

@@ -119,7 +119,8 @@ function setRef<T>(ref: PossibleRef<T> | null, value: T) {
     if (typeof ref === 'function') {
         ref(value)
     } else if (ref !== null && ref !== undefined) {
-        ;(ref as MutableRefObject<T>).current = value
+        const r = ref as MutableRefObject<T>
+        r.current = value
     }
 }
 
@@ -139,10 +140,9 @@ export function useForkRef<T>(
     }, [refA, refB])
 }
 
-export function useRefElement<T>(): [
-    (refElement: RefElementOrNull<T>) => void,
-    RefElementOrNull<T>
-] {
+type useRefElementReturn<T> = [(refElement: RefElementOrNull<T>) => void, RefElementOrNull<T>]
+
+export function useRefElement<T>(): useRefElementReturn<T> {
     const [refElement, setRefElement] = useState<RefElementOrNull<T>>(null)
     const ref = useCallback<(refElement: RefElementOrNull<T>) => void>(
         (element: RefElementOrNull<T>) => {

src/icon.tsx

@@ -1,5 +1,4 @@
-import { css, cx, React, PropsWithOptionalChildren } from './common'
-import styled from '@emotion/styled'
+import { css, cx, styled, React, PropsWithOptionalChildren } from './common'
 import { keyframes, CSSObject } from '@emotion/react'
 import { Popover, PopoverProps, Tooltip, TooltipProps } from './popover'
 import { Icon as IconifyIconComponent } from '@iconify/react'

src/input-field.tsx

@@ -1,5 +1,4 @@
-import { React, useMemo, cx, useId } from './common'
-import styled from '@emotion/styled'
+import { React, styled, useMemo, cx, useId } from './common'
 import { FloatingField, FloatingFieldProps } from './floating-field'
 import { useField } from './form-hooks'
 import { useCallback } from 'react'

src/label.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled'
+import { styled } from './common'
 
 export const FloatingLabel = styled.label<{
     isRaised?: boolean

src/loading-dots.tsx

@@ -1,5 +1,4 @@
-import { React, FC } from './common'
-import styled from '@emotion/styled'
+import { styled, React, FC } from './common'
 import { keyframes } from '@emotion/react'
 
 const BounceAnimation = keyframes`

src/modal.tsx

@@ -1,5 +1,4 @@
-import { React, cx, FCWC } from './common'
-import styled from '@emotion/styled'
+import { React, styled, cx, FCWC } from './common'
 import OverlayModal, { BaseModalProps } from '@restart/ui/Modal'
 import { Icon } from './icon'
 

src/section.tsx

@@ -1,7 +1,6 @@
 import { Icon } from './icon'
-import { React, FCWC, useCallback, cx } from './common'
+import { React, FCWC, styled, useCallback, cx } from './common'
 import { Box } from 'boxible'
-import styled from '@emotion/styled'
 import { themeColors, themeMedia } from './theme'
 import { useRetainedCollapse } from './use-collapse'
 

src/select-field.tsx

@@ -1,5 +1,4 @@
-import { React, useId, useState, cx } from './common'
-import styled from '@emotion/styled'
+import { React, useId, styled, useState, cx } from './common'
 import { useField } from './form-hooks'
 import { FloatingFieldProps, FloatingField } from './floating-field'
 import { FloatingLabel } from './label'

src/ui-state.tsx

@@ -1,5 +1,4 @@
-import { FC, React } from './common'
-import styled from '@emotion/styled'
+import { FC, React, styled } from './common'
 import { cx } from '@emotion/css'
 import { Box } from 'boxible'
 import { Icon } from './icon'