paris 0.17.10 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # paris
 
+## 0.18.0
+
+### Minor Changes
+
+- 0c3b686: Add Markdown component that renders markdown strings using Paris design system components. Supports GFM (tables, task lists, strikethrough, footnotes), HTML passthrough (kbd, mark, details/summary, definition lists), and a configurable `size` prop for base text sizing.
+
+### Patch Changes
+
+- 12fb9a7: Migrate tooling from pnpm/ESLint/Husky to Bun/Biome/Lefthook/Commitlint
+
 ## 0.17.10
 
 ### Patch Changes

package/package.json

@@ -1,152 +1,141 @@
 {
-  "name": "paris",
-  "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
-  "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.17.10",
-  "homepage": "https://paris.slingshot.fm",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/slingshot/paris"
-  },
-  "files": [
-    "src/stories",
-    "src",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "keywords": [
-    "react",
-    "design system",
-    "rsc",
-    "server components",
-    "ui",
-    "components",
-    "typescript",
-    "nextjs",
-    "storybook"
-  ],
-  "packageManager": "pnpm@8.15.5",
-  "engines": {
-    "node": ">=22.0.0"
-  },
-  "exports": {
-    "./*": "./src/stories/*",
-    "./accordion": "./src/stories/accordion/index.ts",
-    "./accordionselect": "./src/stories/accordionselect/index.ts",
-    "./avatar": "./src/stories/avatar/index.ts",
-    "./button": "./src/stories/button/index.ts",
-    "./callout": "./src/stories/callout/index.ts",
-    "./card": "./src/stories/card/index.ts",
-    "./cardbutton": "./src/stories/cardbutton/index.ts",
-    "./checkbox": "./src/stories/checkbox/index.ts",
-    "./combobox": "./src/stories/combobox/index.ts",
-    "./dialog": "./src/stories/dialog/index.ts",
-    "./drawer": "./src/stories/drawer/index.ts",
-    "./field": "./src/stories/field/index.ts",
-    "./icon": "./src/stories/icon/index.ts",
-    "./informationaltooltip": "./src/stories/informationaltooltip/index.ts",
-    "./input": "./src/stories/input/index.ts",
-    "./menu": "./src/stories/menu/index.ts",
-    "./pagination": "./src/stories/pagination/index.ts",
-    "./popover": "./src/stories/popover/index.ts",
-    "./select": "./src/stories/select/index.ts",
-    "./styledlink": "./src/stories/styledlink/index.ts",
-    "./table": "./src/stories/table/index.ts",
-    "./tabs": "./src/stories/tabs/index.ts",
-    "./tag": "./src/stories/tag/index.ts",
-    "./text": "./src/stories/text/index.ts",
-    "./textarea": "./src/stories/textarea/index.ts",
-    "./theme": "./src/stories/theme/index.ts",
-    "./tilt": "./src/stories/tilt/index.ts",
-    "./toast": "./src/stories/toast/index.ts",
-    "./utility": "./src/stories/utility/index.ts"
-  },
-  "dependencies": {
-    "@ariakit/react": "^0.4.20",
-    "@emotion/is-prop-valid": "^1.4.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@headlessui/react": "^2.2.4",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "clsx": "^1.2.1",
-    "font-color-contrast": "^11.1.0",
-    "framer-motion": "^12.24.10",
-    "pte": "^0.5.0",
-    "react-hot-toast": "^2.4.1",
-    "react-tiny-popover": "^8.1.6",
-    "ts-deepmerge": "^6.0.3"
-  },
-  "peerDependencies": {
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "react": "^19.x",
-    "react-dom": "^19.x",
-    "sass": "^1.x",
-    "typescript": "^5.0"
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.26.1",
-    "@ssh/csstypes": "^1.1.0",
-    "@ssh/eslint-config": "^2.0.3",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/addon-mdx-gfm": "8.6.14",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/manager-api": "8.6.14",
-    "@storybook/nextjs": "8.6.14",
-    "@storybook/preview-api": "^8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/test": "8.6.14",
-    "@storybook/theming": "8.6.14",
-    "@stylistic/eslint-plugin": "^5.2.0",
-    "@types/node": "^22.0.0",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@typescript-eslint/eslint-plugin": "^8.46.1",
-    "@typescript-eslint/parser": "^8.46.1",
-    "autoprefixer": "^10.4.14",
-    "change-case": "^4.1.2",
-    "csstype": "^3.1.2",
-    "esbuild-sass-plugin": "^2.16.0",
-    "eslint": "^9.37.0",
-    "eslint-plugin-css": "^0.8.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^7.0.0",
-    "eslint-plugin-storybook": "^0.10.2",
-    "globals": "^16.4.0",
-    "husky": "^8.0.0",
-    "jss": "^10.10.0",
-    "jss-preset-default": "^10.10.0",
-    "next": "^15.1.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sass": "^1.62.1",
-    "storybook": "8.6.14",
-    "storybook-dark-mode": "^4.0.2",
-    "title-case": "^3.0.3",
-    "ts-node": "^10.9.1",
-    "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "tsup": "^7.2.0",
-    "type-fest": "^3.10.0",
-    "typescript": "^5.2.2"
-  },
-  "scripts": {
-    "build": "pnpm generate:exports && next build",
-    "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build",
-    "create:component": "node ./scripts/createComponent.js",
-    "generate:exports": "node ./scripts/generateExports.js",
-    "generate:theme": "pte export ./src/stories/theme/themes.ts LightTheme -o ./public/pte.css",
-    "generate:text": "ts-node --esm ./scripts/text.ts",
-    "release": "pnpm generate:exports && pnpm changeset publish",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint ."
-  }
+    "name": "paris",
+    "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
+    "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
+    "version": "0.18.0",
+    "homepage": "https://paris.slingshot.fm",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/slingshot/paris"
+    },
+    "files": [
+        "src/stories",
+        "src",
+        "README.md",
+        "CHANGELOG.md"
+    ],
+    "keywords": [
+        "react",
+        "design system",
+        "rsc",
+        "server components",
+        "ui",
+        "components",
+        "typescript",
+        "nextjs",
+        "storybook"
+    ],
+    "scripts": {
+        "build": "bun run generate:exports && next build",
+        "storybook": "storybook dev -p 6006",
+        "build:storybook": "storybook build",
+        "create:component": "node ./scripts/createComponent.js",
+        "generate:exports": "node ./scripts/generateExports.js",
+        "generate:theme": "pte export ./src/stories/theme/themes.ts LightTheme -o ./public/pte.css",
+        "generate:text": "ts-node --esm ./scripts/text.ts",
+        "release": "bun run generate:exports && bunx changeset publish",
+        "prepare": "test -n \"$CI\" || lefthook install",
+        "typecheck": "tsc --noEmit",
+        "lint": "biome check .",
+        "lint:fix": "biome check --write .",
+        "format": "biome format --write ."
+    },
+    "engines": {
+        "node": "22.x"
+    },
+    "exports": {
+        "./*": "./src/stories/*",
+        "./accordion": "./src/stories/accordion/index.ts",
+        "./accordionselect": "./src/stories/accordionselect/index.ts",
+        "./avatar": "./src/stories/avatar/index.ts",
+        "./button": "./src/stories/button/index.ts",
+        "./callout": "./src/stories/callout/index.ts",
+        "./card": "./src/stories/card/index.ts",
+        "./cardbutton": "./src/stories/cardbutton/index.ts",
+        "./checkbox": "./src/stories/checkbox/index.ts",
+        "./combobox": "./src/stories/combobox/index.ts",
+        "./dialog": "./src/stories/dialog/index.ts",
+        "./drawer": "./src/stories/drawer/index.ts",
+        "./field": "./src/stories/field/index.ts",
+        "./icon": "./src/stories/icon/index.ts",
+        "./informationaltooltip": "./src/stories/informationaltooltip/index.ts",
+        "./input": "./src/stories/input/index.ts",
+        "./markdown": "./src/stories/markdown/index.ts",
+        "./menu": "./src/stories/menu/index.ts",
+        "./pagination": "./src/stories/pagination/index.ts",
+        "./popover": "./src/stories/popover/index.ts",
+        "./select": "./src/stories/select/index.ts",
+        "./styledlink": "./src/stories/styledlink/index.ts",
+        "./table": "./src/stories/table/index.ts",
+        "./tabs": "./src/stories/tabs/index.ts",
+        "./tag": "./src/stories/tag/index.ts",
+        "./text": "./src/stories/text/index.ts",
+        "./textarea": "./src/stories/textarea/index.ts",
+        "./theme": "./src/stories/theme/index.ts",
+        "./tilt": "./src/stories/tilt/index.ts",
+        "./toast": "./src/stories/toast/index.ts",
+        "./utility": "./src/stories/utility/index.ts"
+    },
+    "dependencies": {
+        "@ariakit/react": "^0.4.20",
+        "@emotion/is-prop-valid": "^1.4.0",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
+        "@headlessui/react": "^2.2.4",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "clsx": "^1.2.1",
+        "font-color-contrast": "^11.1.0",
+        "framer-motion": "^12.24.10",
+        "pte": "^0.5.0",
+        "react-hot-toast": "^2.4.1",
+        "react-markdown": "^10.1.0",
+        "react-tiny-popover": "^8.1.6",
+        "rehype-raw": "^7.0.0",
+        "remark-gfm": "^4.0.1",
+        "ts-deepmerge": "^6.0.3"
+    },
+    "peerDependencies": {
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "react": "^19.x",
+        "react-dom": "^19.x",
+        "sass": "^1.x",
+        "typescript": "^5.0"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.0.6",
+        "@changesets/cli": "^2.26.1",
+        "@commitlint/cli": "^19.8.1",
+        "@commitlint/config-conventional": "^19.8.1",
+        "@ssh/csstypes": "^1.1.0",
+        "@storybook/addon-docs": "10.3.4",
+        "@storybook/addon-links": "10.3.4",
+        "@storybook/nextjs-vite": "10.3.4",
+        "@types/node": "^22.0.0",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "autoprefixer": "^10.4.14",
+        "change-case": "^4.1.2",
+        "csstype": "^3.1.2",
+        "esbuild-sass-plugin": "^2.16.0",
+        "jss": "^10.10.0",
+        "jss-preset-default": "^10.10.0",
+        "lefthook": "^1.11.13",
+        "next": "^16.2.2",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "sass": "^1.62.1",
+        "storybook": "10.3.4",
+        "storybook-dark-mode": "^5.0.0",
+        "title-case": "^3.0.3",
+        "ts-node": "^10.9.1",
+        "tsup": "^7.2.0",
+        "type-fest": "^3.10.0",
+        "typescript": "^5.2.2",
+        "vite": "^7.0.0"
+    }
 }

package/src/helpers/renderEnhancer.tsx

@@ -14,8 +14,7 @@ export const renderEnhancer = (enhancer: Enhancer, size: number): ReactNode => {
     return enhancer;
 };
 
-export const MemoizedEnhancer = memo<{ enhancer: Enhancer, size: number }>(({ enhancer, size }) => (
-    <>
-        { renderEnhancer(enhancer, size)}
-    </>
-), (prev, next) => prev.enhancer === next.enhancer && prev.size === next.size);
+export const MemoizedEnhancer = memo<{ enhancer: Enhancer; size: number }>(
+    ({ enhancer, size }) => <>{renderEnhancer(enhancer, size)}</>,
+    (prev, next) => prev.enhancer === next.enhancer && prev.size === next.size,
+);

package/src/helpers/useResizeObserver.ts

@@ -1,15 +1,11 @@
 // Copied from https://usehooks-ts.com/react-hook/use-resize-observer
 
-import { useEffect, useRef, useState } from 'react';
-
 import type { RefObject } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useIsMounted } from './useIsMounted';
 
-type BoxSizesKey = keyof Pick<
-    ResizeObserverEntry,
-'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize'
->;
+type BoxSizesKey = keyof Pick<ResizeObserverEntry, 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize'>;
 
 function extractSize(
     entry: ResizeObserverEntry,
@@ -25,19 +21,19 @@ function extractSize(
 
     return Array.isArray(entry[box])
         ? entry[box][0][sizeType]
-    // @ts-ignore Support Firefox's non-standard behavior
-        : (entry[box][sizeType] as number);
+        : // @ts-expect-error Support Firefox's non-standard behavior
+          (entry[box][sizeType] as number);
 }
 
 type Size = {
-    width: number | undefined
-    height: number | undefined
+    width: number | undefined;
+    height: number | undefined;
 };
 
 type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
-    ref: RefObject<T>
-    onResize?: (size: Size) => void
-    box?: 'border-box' | 'content-box' | 'device-pixel-content-box'
+    ref: RefObject<T>;
+    onResize?: (size: Size) => void;
+    box?: 'border-box' | 'content-box' | 'device-pixel-content-box';
 };
 
 const initialSize: Size = {
@@ -45,9 +41,7 @@ const initialSize: Size = {
     height: undefined,
 };
 
-export function useResizeObserver<T extends HTMLElement = HTMLElement>(
-    options: UseResizeObserverOptions<T>,
-): Size {
+export function useResizeObserver<T extends HTMLElement = HTMLElement>(options: UseResizeObserverOptions<T>): Size {
     const { ref, box = 'content-box' } = options;
     const [{ width, height }, setSize] = useState<Size>(initialSize);
     const isMounted = useIsMounted();
@@ -64,17 +58,17 @@ export function useResizeObserver<T extends HTMLElement = HTMLElement>(
         if (typeof window === 'undefined' || !('ResizeObserver' in window)) return undefined;
 
         const observer = new ResizeObserver(([entry]) => {
-            const boxProp = box === 'border-box'
-                ? 'borderBoxSize'
-                : box === 'device-pixel-content-box'
-                    ? 'devicePixelContentBoxSize'
-                    : 'contentBoxSize';
+            const boxProp =
+                box === 'border-box'
+                    ? 'borderBoxSize'
+                    : box === 'device-pixel-content-box'
+                      ? 'devicePixelContentBoxSize'
+                      : 'contentBoxSize';
 
             const newWidth = extractSize(entry, boxProp, 'inlineSize');
             const newHeight = extractSize(entry, boxProp, 'blockSize');
 
-            const hasChanged = previousSize.current.width !== newWidth
-                || previousSize.current.height !== newHeight;
+            const hasChanged = previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
 
             if (hasChanged) {
                 const newSize: Size = { width: newWidth, height: newHeight };

package/src/pages/_document.tsx

@@ -1,6 +1,4 @@
-import {
-    Html, Head, Main, NextScript,
-} from 'next/document';
+import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
     return (

package/src/pages/index.tsx

@@ -1,6 +1,6 @@
+import { Inter } from 'next/font/google';
 import Head from 'next/head';
 import Image from 'next/image';
-import { Inter } from 'next/font/google';
 import styles from 'src/styles/Home.module.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -26,8 +26,7 @@ export default function Home() {
                             target="_blank"
                             rel="noopener noreferrer"
                         >
-                            By
-                            {' '}
+                            By{' '}
                             <Image
                                 src="/vercel.svg"
                                 alt="Vercel Logo"
@@ -50,13 +49,7 @@ export default function Home() {
                         priority
                     />
                     <div className={styles.thirteen}>
-                        <Image
-                            src="/thirteen.svg"
-                            alt="13"
-                            width={40}
-                            height={31}
-                            priority
-                        />
+                        <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
                     </div>
                 </div>
 
@@ -68,9 +61,7 @@ export default function Home() {
                         rel="noopener noreferrer"
                     >
                         <h2 className={inter.className}>
-                            Docs
-                            {' '}
-                            <span>-&gt;</span>
+                            Docs <span>-&gt;</span>
                         </h2>
                         <p className={inter.className}>
                             Find in-depth information about Next.js features and&nbsp;API.
@@ -84,9 +75,7 @@ export default function Home() {
                         rel="noopener noreferrer"
                     >
                         <h2 className={inter.className}>
-                            Learn
-                            {' '}
-                            <span>-&gt;</span>
+                            Learn <span>-&gt;</span>
                         </h2>
                         <p className={inter.className}>
                             Learn about Next.js in an interactive course with&nbsp;quizzes!
@@ -100,9 +89,7 @@ export default function Home() {
                         rel="noopener noreferrer"
                     >
                         <h2 className={inter.className}>
-                            Templates
-                            {' '}
-                            <span>-&gt;</span>
+                            Templates <span>-&gt;</span>
                         </h2>
                         <p className={inter.className}>
                             Discover and deploy boilerplate example Next.js&nbsp;projects.
@@ -116,13 +103,10 @@ export default function Home() {
                         rel="noopener noreferrer"
                     >
                         <h2 className={inter.className}>
-                            Deploy
-                            {' '}
-                            <span>-&gt;</span>
+                            Deploy <span>-&gt;</span>
                         </h2>
                         <p className={inter.className}>
-                            Instantly deploy your Next.js site to a shareable URL
-                            with&nbsp;Vercel.
+                            Instantly deploy your Next.js site to a shareable URL with&nbsp;Vercel.
                         </p>
                     </a>
                 </div>

package/src/stories/Pagination.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Surfaces/Pagination" />
 

package/src/stories/Tokens.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import { LightTheme, pget, pvar } from './theme';
 
 <Meta title="Tokens" />

package/src/stories/Welcome.mdx

@@ -1,4 +1,4 @@
-import { Markdown, Meta } from '@storybook/blocks';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import Readme from '../../README.md?raw';
 
 <Meta title="Welcome" />

package/src/stories/accordion/Accordion.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { Accordion } from './Accordion';
 
 const meta: Meta<typeof Accordion> = {

package/src/stories/accordion/Accordion.tsx

@@ -1,13 +1,13 @@
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { useState } from 'react';
-import type { MotionProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
-import styles from './Accordion.module.scss';
-import { TextWhenString } from '../utility';
+import type { MotionProps } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { useState } from 'react';
 import { ChevronRight, Icon } from '../icon';
+import { TextWhenString } from '../utility';
+import styles from './Accordion.module.scss';
 
 export type AccordionProps = {
     /** The title of the Accordion. */
@@ -33,7 +33,7 @@ export type AccordionProps = {
         titleContainer?: ComponentPropsWithoutRef<'div'>;
         dropdownContainer?: ComponentPropsWithoutRef<'div'> & MotionProps;
         dropdownContent?: ComponentPropsWithoutRef<'div'>;
-    }
+    };
 };
 
 /**
@@ -79,11 +79,7 @@ export const Accordion: FC<AccordionProps> = ({
     return (
         <div
             {...overrides?.container}
-            className={clsx(
-                styles[kind],
-                open && styles.open,
-                overrides?.container?.className,
-            )}
+            className={clsx(styles[kind], open && styles.open, overrides?.container?.className)}
         >
             <div
                 onClick={handleToggle}
@@ -97,30 +93,18 @@ export const Accordion: FC<AccordionProps> = ({
                 tabIndex={0}
                 {...overrides?.titleContainer}
                 data-state={open ? 'open' : 'closed'}
-                className={clsx(
-                    overrides?.titleContainer?.className,
-                    styles.title,
-                    styles[size],
-                    open && styles.open,
-                )}
+                className={clsx(overrides?.titleContainer?.className, styles.title, styles[size], open && styles.open)}
             >
                 <TextWhenString kind="paragraphSmall" weight="medium">
                     {title}
                 </TextWhenString>
                 {kind === 'default' && (
                     <div className={styles.plusIcon}>
-                        <FontAwesomeIcon
-                            icon={faPlus}
-                            className={clsx(open && styles.open)}
-                        />
+                        <FontAwesomeIcon icon={faPlus} className={clsx(open && styles.open)} />
                     </div>
                 )}
                 {kind === 'card' && (
-                    <Icon
-                        icon={ChevronRight}
-                        size={16}
-                        className={clsx(styles.chevron, open && styles.open)}
-                    />
+                    <Icon icon={ChevronRight} size={16} className={clsx(styles.chevron, open && styles.open)} />
                 )}
             </div>
             <AnimatePresence>
@@ -139,10 +123,7 @@ export const Accordion: FC<AccordionProps> = ({
                             ease: [0.87, 0, 0.13, 1],
                         }}
                         {...overrides?.dropdownContainer}
-                        className={clsx(
-                            styles.dropdown,
-                            overrides?.dropdownContainer?.className,
-                        )}
+                        className={clsx(styles.dropdown, overrides?.dropdownContainer?.className)}
                     >
                         <div
                             {...overrides?.dropdownContent}
@@ -152,9 +133,7 @@ export const Accordion: FC<AccordionProps> = ({
                                 overrides?.dropdownContent?.className,
                             )}
                         >
-                            <TextWhenString kind="paragraphXSmall">
-                                {children}
-                            </TextWhenString>
+                            <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
                         </div>
                     </motion.div>
                 )}