From 641324b1da3ea6466f27b6ba7dcc1aa1ff70c5b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor.baer@sumup.com>
Date: Fri, 14 Jul 2023 14:07:42 +0200
Subject: [PATCH 1/2] Change jsxImportSource to react

---
 .changeset/twenty-cobras-wink.md                             | 5 +++++
 packages/circuit-ui/components/Calendar/RangePicker.tsx      | 2 ++
 .../Calendar/components/CalendarWrapper/CalendarWrapper.tsx  | 2 ++
 .../components/CalendarTagTwoStep/CalendarTagTwoStep.tsx     | 2 ++
 packages/circuit-ui/components/Grid/Col/Col.ts               | 2 ++
 packages/circuit-ui/components/Grid/Grid/Grid.ts             | 2 ++
 packages/circuit-ui/components/Grid/Row/Row.ts               | 2 ++
 packages/circuit-ui/components/Grid/utils.ts                 | 2 ++
 .../components/InlineElements/InlineElements.stories.tsx     | 2 ++
 .../circuit-ui/components/InlineElements/InlineElements.tsx  | 2 ++
 packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx   | 2 ++
 packages/circuit-ui/components/Sidebar/Sidebar.tsx           | 2 ++
 .../components/Sidebar/components/Aggregator/Aggregator.tsx  | 2 ++
 .../components/Sidebar/components/Backdrop/Backdrop.ts       | 2 ++
 .../components/Sidebar/components/CloseButton/CloseButton.ts | 2 ++
 .../components/Sidebar/components/Footer/Footer.ts           | 2 ++
 .../components/Sidebar/components/Header/Header.ts           | 2 ++
 .../components/Sidebar/components/NavItem/NavItem.tsx        | 2 ++
 .../components/Sidebar/components/NavLabel/NavLabel.ts       | 2 ++
 .../components/Sidebar/components/NavList/NavList.tsx        | 2 ++
 .../components/Sidebar/components/Separator/Separator.tsx    | 2 ++
 .../components/Sidebar/components/SubNavList/SubNavList.tsx  | 2 ++
 packages/circuit-ui/components/Tooltip/Tooltip.tsx           | 2 ++
 packages/circuit-ui/styles/style-mixins.spec.tsx             | 2 ++
 packages/circuit-ui/styles/style-mixins.ts                   | 2 ++
 packages/circuit-ui/tsconfig.json                            | 2 +-
 tsconfig.json                                                | 2 +-
 27 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/twenty-cobras-wink.md

diff --git a/.changeset/twenty-cobras-wink.md b/.changeset/twenty-cobras-wink.md
new file mode 100644
index 0000000000..8d730e95e9
--- /dev/null
+++ b/.changeset/twenty-cobras-wink.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Changed the `jsxImportSource` from `@emotion/react` to `react`.
diff --git a/packages/circuit-ui/components/Calendar/RangePicker.tsx b/packages/circuit-ui/components/Calendar/RangePicker.tsx
index bc2f722ef7..596922e765 100644
--- a/packages/circuit-ui/components/Calendar/RangePicker.tsx
+++ b/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
diff --git a/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.tsx b/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.tsx
index 1823e30d6d..7db43c0a01 100644
--- a/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.tsx
+++ b/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';
diff --git a/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx b/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx
index f915d99f80..3bb6c48cdf 100644
--- a/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx
+++ b/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';
diff --git a/packages/circuit-ui/components/Grid/Col/Col.ts b/packages/circuit-ui/components/Grid/Col/Col.ts
index 3701050abb..c4fd7141b3 100644
--- a/packages/circuit-ui/components/Grid/Col/Col.ts
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Grid/Grid/Grid.ts b/packages/circuit-ui/components/Grid/Grid/Grid.ts
index 070d0255bc..7163465577 100644
--- a/packages/circuit-ui/components/Grid/Grid/Grid.ts
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Grid/Row/Row.ts b/packages/circuit-ui/components/Grid/Row/Row.ts
index 7ece904d47..45409f6fdc 100644
--- a/packages/circuit-ui/components/Grid/Row/Row.ts
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Grid/utils.ts b/packages/circuit-ui/components/Grid/utils.ts
index 9efaa0b0e9..dcff855d02 100644
--- a/packages/circuit-ui/components/Grid/utils.ts
+++ b/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';
diff --git a/packages/circuit-ui/components/InlineElements/InlineElements.stories.tsx b/packages/circuit-ui/components/InlineElements/InlineElements.stories.tsx
index 92b330d797..d3cddbd6e1 100644
--- a/packages/circuit-ui/components/InlineElements/InlineElements.stories.tsx
+++ b/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';
diff --git a/packages/circuit-ui/components/InlineElements/InlineElements.tsx b/packages/circuit-ui/components/InlineElements/InlineElements.tsx
index e9b77a50f1..e0aee61d54 100644
--- a/packages/circuit-ui/components/InlineElements/InlineElements.tsx
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx b/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx
index e9f1891fd7..51adef89f1 100644
--- a/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx
+++ b/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';
diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.tsx b/packages/circuit-ui/components/Sidebar/Sidebar.tsx
index 76bdd8f107..bd33a62ff8 100644
--- a/packages/circuit-ui/components/Sidebar/Sidebar.tsx
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx
index 0a9c79188f..91e1df1869 100644
--- a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts b/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts
index 706dc22210..5d25f5121b 100644
--- a/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts b/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts
index 14bcda4fa2..0bcbc4e46f 100644
--- a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts
+++ b/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';
diff --git a/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts b/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts
index f37394ed4d..b79c7359e7 100644
--- a/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts
+++ b/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';
diff --git a/packages/circuit-ui/components/Sidebar/components/Header/Header.ts b/packages/circuit-ui/components/Sidebar/components/Header/Header.ts
index d5706754de..9c1b3105af 100644
--- a/packages/circuit-ui/components/Sidebar/components/Header/Header.ts
+++ b/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';
diff --git a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx
index 8af8bc1643..b3a5c63f8f 100644
--- a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts b/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts
index 92a2a4086e..6618610868 100644
--- a/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx
index eb8a3273c4..16aa0dd0e5 100644
--- a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx
index 030ca35d99..2b6e7bd7b6 100644
--- a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx
index 327f76054f..313300689c 100644
--- a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx
+++ b/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';
 
diff --git a/packages/circuit-ui/components/Tooltip/Tooltip.tsx b/packages/circuit-ui/components/Tooltip/Tooltip.tsx
index 15694dc81e..ba9bd639c0 100644
--- a/packages/circuit-ui/components/Tooltip/Tooltip.tsx
+++ b/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';
diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx
index b162e4f83a..057667c4a5 100644
--- a/packages/circuit-ui/styles/style-mixins.spec.tsx
+++ b/packages/circuit-ui/styles/style-mixins.spec.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { describe, expect, it } from 'vitest';
 import { css } from '@emotion/react';
 import { light } from '@sumup/design-tokens';
diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts
index c5a3dfa07a..35020cb69d 100644
--- a/packages/circuit-ui/styles/style-mixins.ts
+++ b/packages/circuit-ui/styles/style-mixins.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css, SerializedStyles } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 
diff --git a/packages/circuit-ui/tsconfig.json b/packages/circuit-ui/tsconfig.json
index 7074a4eb51..d2a8a7f9cd 100644
--- a/packages/circuit-ui/tsconfig.json
+++ b/packages/circuit-ui/tsconfig.json
@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
+    "jsxImportSource": "react",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noFallthroughCasesInSwitch": true,
diff --git a/tsconfig.json b/tsconfig.json
index a7225805e4..3a3a6522f6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
+    "jsxImportSource": "react",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,

From d2e373af354456c2d5b50b6b04b248c35ae1d6bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor.baer@sumup.com>
Date: Fri, 14 Jul 2023 16:09:53 +0200
Subject: [PATCH 2/2] Fix jsxImportSource in story files

---
 .../components/List/List.stories.tsx          | 39 ++++++++-----------
 .../components/Modal/Modal.stories.tsx        | 12 +++---
 .../SidePanel/SidePanel.stories.tsx           | 19 +++++----
 .../useCollapsible/useCollapsible.stories.tsx |  6 +--
 .../styles/style-mixins.stories.tsx           |  2 +
 5 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/packages/circuit-ui/components/List/List.stories.tsx b/packages/circuit-ui/components/List/List.stories.tsx
index e702de079c..01e1f762aa 100644
--- a/packages/circuit-ui/components/List/List.stories.tsx
+++ b/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}>
diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx
index a8481e6112..8c15f82043 100644
--- a/packages/circuit-ui/components/Modal/Modal.stories.tsx
+++ b/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>
diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx
index bd640a6cc8..0b208c03ba 100644
--- a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx
+++ b/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' }}
     />
   );
 };
diff --git a/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx b/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx
index e4adf46cad..f70fc5e4a8 100644
--- a/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx
+++ b/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx
@@ -15,7 +15,6 @@
 
 import Body from '../../components/Body/index.js';
 import Button from '../../components/Button/index.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { CollapsibleOptions, useCollapsible } from './useCollapsible.js';
 
@@ -24,14 +23,15 @@ export default {
 };
 
 export const Example = (args: CollapsibleOptions) => {
-  const { isOpen, getButtonProps, getContentProps } = useCollapsible(args);
+  const { isOpen, getButtonProps, getContentProps } =
+    useCollapsible<HTMLParagraphElement>(args);
 
   return (
     <section>
       <Button {...getButtonProps()}>
         {isOpen ? 'Close section' : 'Open section'}
       </Button>
-      <Body {...getContentProps()} css={spacing({ top: 'kilo' })}>
+      <Body {...getContentProps({ style: { marginTop: '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.'
         }
diff --git a/packages/circuit-ui/styles/style-mixins.stories.tsx b/packages/circuit-ui/styles/style-mixins.stories.tsx
index fcfcc7b956..0afabec567 100644
--- a/packages/circuit-ui/styles/style-mixins.stories.tsx
+++ b/packages/circuit-ui/styles/style-mixins.stories.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Stack } from '../../../.storybook/components/index.js';
 import Button from '../components/Button/index.js';