Change jsxImportSource to react

.changeset/twenty-cobras-wink.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Changed the `jsxImportSource` from `@emotion/react` to `react`.

packages/circuit-ui/components/Calendar/RangePicker.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { ArrowRight, ArrowLeft, Close } from '@sumup/icons';
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -32,7 +34,7 @@
 const CloseIcon = styled(Close)(
   ({ theme }) => css`
     color: var(--cui-fg-normal);
     margin: ${theme.spacings.bit} ${theme.spacings.bit} 0 0; /* Adjust spacing to fit in the 32px customArrowIcon container */
   `,
 );
 

packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import type { ReactNode } from 'react';
 import type { Theme } from '@sumup/design-tokens';
 import { css, Global } from '@emotion/react';
@@ -99,16 +101,16 @@
   .DateRangePickerInput,
   .SingleDatePickerInput {
     background-color: var(--cui-bg-normal);
     padding: ${theme.spacings.kilo} ${theme.spacings.mega};
     transition: border-color ${theme.transitions.default};
     width: 100%;
     ${typography('one')(theme)};
 
     &.DateRangePickerInput__withBorder,
     &.SingleDatePickerInput__withBorder {
       border: none;
       border-radius: ${theme.borderRadius.byte};
       transition: box-shadow ${theme.transitions.default};
       box-shadow: 0 0 0 1px var(--cui-border-strong);
 
       &:hover {
@@ -129,8 +131,8 @@
   }
 
   .DateRangePickerInput_arrow {
     margin: 0 ${theme.spacings.kilo};
     width: ${theme.spacings.giga};
     height: ${theme.spacings.giga};
   }
 

packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Component, createRef } from 'react';
 import { css } from '@emotion/react';
 import type { Moment } from 'moment';

packages/circuit-ui/components/Grid/Col/Col.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

packages/circuit-ui/components/Grid/Grid/Grid.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

packages/circuit-ui/components/Grid/Row/Row.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

packages/circuit-ui/components/Grid/utils.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import type { Theme } from '@sumup/design-tokens';
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';

packages/circuit-ui/components/InlineElements/InlineElements.stories.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled from '../../styles/styled.js';

packages/circuit-ui/components/InlineElements/InlineElements.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Children, ReactElement } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/List/List.stories.tsx

@@ -15,8 +15,7 @@
 
 import { Fragment } from 'react';
 
-import Body from '../Body/index.js';
-import { spacing } from '../../styles/style-mixins.js';
+import { Stack } from '../../../../.storybook/components/index.js';
 
 import { List, ListProps } from './List.js';
 
@@ -40,31 +39,27 @@ export const Base = (args: ListProps) => (
 
 const variants: ListProps['variant'][] = ['unordered', 'ordered'];
 
-export const Variants = (args: ListProps) =>
-  variants.map((variant) => (
-    <List
-      key={variant}
-      {...args}
-      variant={variant}
-      css={spacing({ bottom: 'giga' })}
-    >
-      <ListItems />
-    </List>
-  ));
+export const Variants = (args: ListProps) => (
+  <Stack vertical>
+    {variants.map((variant) => (
+      <List key={variant} {...args} variant={variant}>
+        <ListItems />
+      </List>
+    ))}
+  </Stack>
+);
 
 const sizes: ListProps['size'][] = ['one', 'two'];
 
-export const Sizes = (args: ListProps) =>
-  sizes.map((size) => (
-    <>
-      <Body size={size} css={spacing({ bottom: 'mega' })}>
-        Use List size {size} with Body {size} text.
-      </Body>
-      <List key={size} {...args} size={size} css={spacing({ bottom: 'giga' })}>
+export const Sizes = (args: ListProps) => (
+  <Stack vertical>
+    {sizes.map((size) => (
+      <List key={size} {...args} size={size}>
         <ListItems />
       </List>
-    </>
-  ));
+    ))}
+  </Stack>
+);
 
 export const Nested = (args: ListProps) => (
   <List {...args}>

packages/circuit-ui/components/Modal/Modal.stories.tsx

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable react/display-name */
 import { Fragment } from 'react';
 
 import { Stack } from '../../../../.storybook/components/index.js';
@@ -22,7 +21,6 @@ import Headline from '../Headline/index.js';
 import Body from '../Body/index.js';
 import Image from '../Image/index.js';
 import { ModalProvider } from '../ModalContext/index.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { Modal, ModalProps, useModal } from './Modal.js';
 
@@ -34,7 +32,7 @@ export default {
 
 const defaultModalChildren = () => (
   <Fragment>
-    <Headline as="h2" size="four" css={spacing({ bottom: 'giga' })}>
+    <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
       Hello World!
     </Headline>
     <Body>I am a modal.</Body>
@@ -109,10 +107,10 @@ export const PreventClose = (modal: ModalProps): JSX.Element => {
 PreventClose.args = {
   children: ({ onClose }: { onClose: ModalProps['onClose'] }) => (
     <Fragment>
-      <Headline as="h2" size="four" css={spacing({ bottom: 'giga' })}>
+      <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
         Complete the action
       </Headline>
-      <Body css={spacing({ bottom: 'giga' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         Users have to complete the action inside the modal to close it. The
         close button is hidden and clicking outside the modal or pressing the
         escape key does not close the modal either.
@@ -169,10 +167,10 @@ CustomStyles.args = {
           borderTopRightRadius: 'var(--cui-border-radius-mega)',
         }}
       />
-      <Headline as="h2" size="four" css={spacing('giga')}>
+      <Headline as="h2" size="four" style={{ margin: '1rem' }}>
         Custom styles
       </Headline>
-      <Body css={spacing('giga')}>
+      <Body style={{ margin: '1rem' }}>
         Custom styles can be applied using the <code>css</code> prop.
       </Body>
     </Fragment>

packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx

@@ -24,7 +24,6 @@ import { TopNavigation } from '../TopNavigation/index.js';
 import { baseArgs as topNavigationProps } from '../TopNavigation/TopNavigation.stories.js';
 import { SideNavigation } from '../SideNavigation/index.js';
 import { baseArgs as sideNavigationProps } from '../SideNavigation/SideNavigation.stories.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { SidePanelProvider } from './SidePanelContext.js';
 import {
@@ -69,7 +68,7 @@ const basePlay = ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => {
 };
 
 const StoryInstructions = () => (
-  <Body css={spacing('mega')}>
+  <Body style={{ margin: '1rem' }}>
     Select an item to open its details in a side panel. When this story is
     viewed in canvas mode we simulate a selection of the third item.
   </Body>
@@ -98,12 +97,12 @@ const DefaultChildren = ({
 
   return (
     <>
-      <Body css={spacing({ bottom: 'mega' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         {showMoreInfo
           ? `These are the details of ${label}.`
           : `This is more information about ${label}.`}
       </Body>
-      <Body css={spacing({ bottom: 'mega' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         {
           'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.'
         }
@@ -127,7 +126,7 @@ const DefaultChildren = ({
               headline: 'More information',
             })
           }
-          css={spacing({ bottom: 'mega' })}
+          style={{ marginBottom: '1rem' }}
         >
           Show more
         </Button>
@@ -140,7 +139,7 @@ const DefaultChildren = ({
               variant="tertiary"
               size="kilo"
               onClick={onBack}
-              css={spacing({ bottom: 'mega' })}
+              style={{ marginBottom: '1rem' }}
             >
               Back
             </Button>
@@ -150,7 +149,7 @@ const DefaultChildren = ({
             variant="tertiary"
             size="kilo"
             onClick={onClose}
-            css={spacing({ left: 'mega', bottom: 'mega' })}
+            style={{ marginBottom: '1rem', marginLeft: '1rem' }}
           >
             Close
           </Button>
@@ -182,7 +181,7 @@ const ComponentWithSidePanel = (props: SidePanelHookProps) => {
       }))}
       label="List of items with details in a side panel"
       hideLabel
-      css={spacing('mega')}
+      style={{ margin: '1rem' }}
     />
   );
 };
@@ -216,7 +215,7 @@ export const WithTopNavigation = (props: SidePanelHookProps): JSX.Element => {
           onClose={() => setSideNavigationOpen(false)}
         />
         <div style={{ flex: '1' }}>
-          <SidePanelProvider withTopNavigation>
+          <SidePanelProvider>
             <StoryInstructions />
             <ComponentWithSidePanel {...props} />
           </SidePanelProvider>
@@ -279,7 +278,7 @@ const ComponentWithSidePanelExtended = (props: SidePanelHookProps) => {
       }))}
       label="List of items with details in a side panel"
       hideLabel
-      css={spacing('mega')}
+      style={{ margin: '1rem' }}
     />
   );
 };

packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { useState } from 'react';
 import { css } from '@emotion/react';
 import { Home, Profile, Sales, Shop } from '@sumup/icons';

packages/circuit-ui/components/Sidebar/Sidebar.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Fragment, ReactNode } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { useState, useEffect, ReactElement } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../../../styles/styled.js';

packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../../../styles/styled.js';

packages/circuit-ui/components/Sidebar/components/Header/Header.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../../../styles/styled.js';

packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { ReactElement } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

packages/circuit-ui/components/Tooltip/Tooltip.tsx

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled from '../../styles/styled.js';