@crystallize/design-system 1.24.46 → 2.0.2

package/src/iconography/transition-in-disabled.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { stroke } from './variables';
 
-type TransitionInDisabledProps = SVGProps<SVGSVGElement>;
-
-type TransitionInDisabledRef = SVGSVGElement;
-
-export const TransitionInDisabled = forwardRef<TransitionInDisabledRef, TransitionInDisabledProps>((delegated, ref) => {
+export const TransitionInDisabled = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <rect width="7" height="1" x="12.95" y="18.77" fill={stroke} rx=".5" transform="rotate(-135 12.95 18.77)" />

package/src/iconography/transition-in.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type TransitionInProps = SVGProps<SVGSVGElement>;
-
-type TransitionInRef = SVGSVGElement;
-
-export const TransitionIn = forwardRef<TransitionInRef, TransitionInProps>((delegated, ref) => {
+export const TransitionIn = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/transition-out-disabled.tsx

@@ -1,24 +1,18 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { stroke } from './variables';
 
-type TransitionOutDisabledProps = SVGProps<SVGSVGElement>;
-
-type TransitionOutDisabledRef = SVGSVGElement;
-
-export const TransitionOutDisabled = forwardRef<TransitionOutDisabledRef, TransitionOutDisabledProps>(
-  (delegated, ref) => {
-    return (
-      <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
-        <path
-          fill={stroke}
-          d="M2.475 18.428h1.06a.3.3 0 0 0 0-.6h-1.06c-.27 0-.401-.176-.401-.296v-.944a.3.3 0 0 0-.601 0v.944c0 .54.497.896 1.002.896Zm0-4.968h1.06a.3.3 0 0 0 0-.6h-1.06c-.505 0-1.002.357-1.002.896v.944a.3.3 0 0 0 .6 0v-.944c0-.12.133-.296.402-.296Zm3.18 4.968h2.122a.3.3 0 1 0 0-.6H5.656a.3.3 0 0 0 0 .6Zm0-4.968h2.122a.3.3 0 1 0 0-.6H5.656a.3.3 0 0 0 0 .6Zm4.243 4.968h2.12a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm0-4.968h2.12a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm4.241 4.968h2.121a.3.3 0 1 0 0-.6H14.14a.3.3 0 0 0 0 .6Zm0-4.968h2.121a.3.3 0 1 0 0-.6H14.14a.3.3 0 0 0 0 .6Zm4.242 4.968h1.06c.506 0 1.002-.357 1.002-.896v-.944a.3.3 0 1 0-.6 0v.944c0 .12-.132.296-.401.296h-1.06a.3.3 0 1 0 0 .6Zm0-4.968h1.06c.27 0 .402.177.402.296v.944a.3.3 0 0 0 .6 0v-.944c0-.538-.496-.895-1.001-.895h-1.06a.3.3 0 1 0 0 .6Z"
-        />
-        <rect width="7" height="1" x="8.707" y="4" fill={stroke} rx=".5" transform="rotate(45 8.707 4)" />
-        <rect width="7" height="1" x="13.657" y="4.707" fill={stroke} rx=".5" transform="rotate(135 13.657 4.707)" />
-      </svg>
-    );
-  },
-);
+export const TransitionOutDisabled = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill={stroke}
+        d="M2.475 18.428h1.06a.3.3 0 0 0 0-.6h-1.06c-.27 0-.401-.176-.401-.296v-.944a.3.3 0 0 0-.601 0v.944c0 .54.497.896 1.002.896Zm0-4.968h1.06a.3.3 0 0 0 0-.6h-1.06c-.505 0-1.002.357-1.002.896v.944a.3.3 0 0 0 .6 0v-.944c0-.12.133-.296.402-.296Zm3.18 4.968h2.122a.3.3 0 1 0 0-.6H5.656a.3.3 0 0 0 0 .6Zm0-4.968h2.122a.3.3 0 1 0 0-.6H5.656a.3.3 0 0 0 0 .6Zm4.243 4.968h2.12a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm0-4.968h2.12a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm4.241 4.968h2.121a.3.3 0 1 0 0-.6H14.14a.3.3 0 0 0 0 .6Zm0-4.968h2.121a.3.3 0 1 0 0-.6H14.14a.3.3 0 0 0 0 .6Zm4.242 4.968h1.06c.506 0 1.002-.357 1.002-.896v-.944a.3.3 0 1 0-.6 0v.944c0 .12-.132.296-.401.296h-1.06a.3.3 0 1 0 0 .6Zm0-4.968h1.06c.27 0 .402.177.402.296v.944a.3.3 0 0 0 .6 0v-.944c0-.538-.496-.895-1.001-.895h-1.06a.3.3 0 1 0 0 .6Z"
+      />
+      <rect width="7" height="1" x="8.707" y="4" fill={stroke} rx=".5" transform="rotate(45 8.707 4)" />
+      <rect width="7" height="1" x="13.657" y="4.707" fill={stroke} rx=".5" transform="rotate(135 13.657 4.707)" />
+    </svg>
+  );
+});
 
 TransitionOutDisabled.displayName = 'TransitionOutDisabledIcon';

package/src/iconography/transition-out.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type TransitionOutProps = SVGProps<SVGSVGElement>;
-
-type TransitionOutRef = SVGSVGElement;
-
-export const TransitionOut = forwardRef<TransitionOutRef, TransitionOutProps>((delegated, ref) => {
+export const TransitionOut = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/unpublish.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type UnpublishProps = SVGProps<SVGSVGElement>;
-
-type UnpublishRef = SVGSVGElement;
-
-export const Unpublish = forwardRef<UnpublishRef, UnpublishProps>((delegated, ref) => {
+export const Unpublish = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/usage-meter.tsx

@@ -1,13 +1,9 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type UsageMeterProps = SVGProps<SVGSVGElement>;
-
-type UsageMeterRef = SVGSVGElement;
-
-export const UsageMeter = forwardRef<UsageMeterRef, UsageMeterProps>((delegated, ref) => {
+export const UsageMeter = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="17" height="16" viewBox="0 0 17 16" fill="none" {...delegated}>
-      <g clipPath="url(#a)">
+      <g clipPath="url(#usage-meter)">
         <path
           d="M15.836 9.0665a1.7036 1.7036 0 0 0 .0053-.3334 6.6839 6.6839 0 0 0-1.1166-3.0268c-.0423-.0635-.0846-.1217-.1217-.18-.0582-.074-.1111-.1534-.1693-.2275a5.5278 5.5278 0 0 0-.3175-.381c-.0053-.0053-.0106-.0158-.0212-.0211a7.2427 7.2427 0 0 0-.6403-.635c-.0741-.0635-.1534-.1165-.2275-.1747a.0053.0053 0 0 0-.0016-.0037.0052.0052 0 0 0-.0037-.0015c-.1535-.1165-.3069-.2329-.471-.3387a.2946.2946 0 0 0-.0423-.0265c-.1376-.09-.2857-.1746-.4286-.2593-.0582-.0317-.1217-.0582-.1799-.09-.1059-.0528-.2117-.1058-.3175-.1534-.1059-.0476-.217-.09-.3228-.1323-.0741-.0264-.1429-.0582-.217-.0846a4.7983 4.7983 0 0 0-.3651-.1112 4.3458 4.3458 0 0 0-.2487-.0688 3.9942 3.9942 0 0 0-.2434-.0529 6.621 6.621 0 0 0-1.5134-.1534 6.9257 6.9257 0 0 0-6.768 6.1224c0 .0476.0053.0846.0053.1323a6.6487 6.6487 0 0 0 .09 2.0478 6.838 6.838 0 0 0 .3439 1.1695c.0794.1958.164.3863.2593.5768a7.523 7.523 0 0 0 .1534.2857l.037.0688.0795.1217.1534.2593c1.7568 0 3.5613-.0053 5.5615-.0106.0741 0 .1482.0053.2223.0053 1.434.0106 2.5664.0212 4.1327-.0106.5133 0 1.0372-.0053 1.5822-.0053.0688-.1111.1482-.2381.2329-.381.0423-.0846.0952-.1799.1481-.2804a6.1283 6.1283 0 0 0 .3122-.7091 6.9592 6.9592 0 0 0 .4181-1.8785c0-.0371-.0053-.0635-.0053-.1006a7.2363 7.2363 0 0 0 .0053-.9577Zm-.7885 1.6986a5.9413 5.9413 0 0 1-.3175 1.0477 5.3569 5.3569 0 0 1-.2275.508c-.0477.0847-.09.1693-.1376.254l-.0476.0741-5.3763.0159H7.1154c-1.1536-.0106-2.309-.0141-3.466-.0106a.0399.0399 0 0 0-.0212.0106c-.0053-.0053-.0053-.0106-.0159-.0265-.0423-.0741-.0952-.1534-.1376-.2434a5.1632 5.1632 0 0 1-.2963-.635 6.1699 6.1699 0 0 1-.4075-1.688v-.0265a6.5296 6.5296 0 0 1-.0053-.9102c.03-.1036.0494-.21.0583-.3174a6.203 6.203 0 0 1 2.323-4.1434c.0317-.0265.0635-.0476.0952-.074.0847-.0636.1747-.127.2646-.1906a6.2837 6.2837 0 0 1 3.5771-1.0583 6.1823 6.1823 0 0 1 3.8365 1.4234c.0688.0583.1376.1165.2063.18a6.244 6.244 0 0 1 1.7675 2.7569c.0052.0159.0052.0265.0105.0423.0477.1482.0847.3017.1165.4498.0154.0593.0277.1194.037.18.0212.127.0423.254.0582.3862a6.1523 6.1523 0 0 1-.0688 1.995Z"
           fill="#528693"
@@ -30,7 +26,7 @@ export const UsageMeter = forwardRef<UsageMeterRef, UsageMeterProps>((delegated,
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="usage-meter">
           <path fill="#fff" transform="translate(.984)" d="M0 0h16v16H0z" />
         </clipPath>
       </defs>

package/src/iconography/usage.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type UsageProps = SVGProps<SVGSVGElement>;
-
-type UsageRef = SVGSVGElement;
-
-export const Usage = forwardRef<UsageRef, UsageProps>((delegated, ref) => {
+export const Usage = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="23" height="23" viewBox="0 0 23 23" fill="none" {...delegated}>
       <path

package/src/iconography/user-card.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type UserCardProps = SVGProps<SVGSVGElement>;
-
-type UserCardRef = SVGSVGElement;
-
-export const UserCard = forwardRef<UserCardRef, UserCardProps>((delegated, ref) => {
+export const UserCard = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="17" height="16" viewBox="0 0 17 16" fill="none" {...delegated}>
       <rect x="2.184" y="4.2" width="13.6" height="8.6" rx=".8" fill="#BFF6F8" stroke="#528693" strokeWidth=".4" />

package/src/iconography/user.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type UserProps = SVGProps<SVGSVGElement>;
-
-type UserRef = SVGSVGElement;
-
-export const User = forwardRef<UserRef, UserProps>((delegated, ref) => {
+export const User = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
       <path

package/src/iconography/users.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type UsersProps = SVGProps<SVGSVGElement>;
-
-type UsersRef = SVGSVGElement;
-
-export const Users = forwardRef<UsersRef, UsersProps>((delegated, ref) => {
+export const Users = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="24" height="24" viewBox="0 0 24 24" fill="none" {...delegated}>
       <path

package/src/iconography/variant.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type VariantProps = SVGProps<SVGSVGElement>;
-
-type VariantRef = SVGSVGElement;
-
-export const Variant = forwardRef<VariantRef, VariantProps>((delegated, ref) => {
+export const Variant = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/video.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type VideoProps = SVGProps<SVGSVGElement>;
-
-type VideoRef = SVGSVGElement;
-
-export const Video = forwardRef<VideoRef, VideoProps>((delegated, ref) => {
+export const Video = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/wand.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type WandProps = SVGProps<SVGSVGElement>;
-
-type WandRef = SVGSVGElement;
-
-export const Wand = forwardRef<WandRef, WandProps>((delegated, ref) => {
+export const Wand = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="19" height="19" viewBox="0 0 19 19" fill="none" {...delegated}>
       <g clipPath="url(#wand)">

package/src/iconography/warning.tsx

@@ -1,13 +1,10 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { stroke } from './variables';
 
 const fill = 'var(--c-icon-fill, #FFDE99)';
 
-type WarningProps = SVGProps<SVGSVGElement>;
-type WarningRef = SVGSVGElement;
-
-export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) => {
+export const Warning = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
       <path

package/src/iconography/x-for-y.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type XForYProps = SVGProps<SVGSVGElement>;
-
-type XForYRef = SVGSVGElement;
-
-export const XForY = forwardRef<XForYRef, XForYProps>((delegated, ref) => {
+export const XForY = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/label/label.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, LabelHTMLAttributes } from 'react';
+import { forwardRef, type LabelHTMLAttributes } from 'react';
 import { cx } from 'class-variance-authority';
 
 import './label.css';

package/src/popover/popover.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { cx } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
@@ -6,12 +5,12 @@ import { PopoverClose } from './popover-close';
 import './popover.css';
 
 type PopoverProps = Pick<PopoverPrimitive.PopoverProps, 'open' | 'onOpenChange'> &
-  Pick<PopoverPrimitive.PortalProps, 'container'> &
-  PopoverPrimitive.PopperContentProps & {
-    children: ReactNode;
-    closeButton?: boolean | JSX.Element;
+  Pick<PopoverPrimitive.PopoverPortalProps, 'container'> &
+  Omit<PopoverPrimitive.PopoverContentProps, 'content'> & {
+    children: React.ReactNode;
+    closeButton?: boolean | React.JSX.Element;
     hasArrow?: boolean;
-    content: ReactNode;
+    content: React.ReactNode;
     onOpenAutoFocus?: (e: Event) => void;
   };
 

package/src/rich-text-editor/tests/rich-text-editor-basic-rendering.test.tsx

@@ -10,7 +10,8 @@ const emptyParagraph: CrystallizeRichText = [{ kind: 'block', type: 'paragraph',
 describe('RichTextEditor basic rendering', () => {
   it('shows placeholder when no initial data is passed', async () => {
     const onChange = vi.fn();
-    await render(<RichTextEditor placeholder="Get your content in here" />);
+    render(<RichTextEditor placeholder="Get your content in here" />);
+
     await sleep(1);
 
     expect(screen.getByText('Get your content in here')).toBeInTheDocument();
@@ -20,7 +21,8 @@ describe('RichTextEditor basic rendering', () => {
 
   it('should not trigger onChange on mount when no initialData is passed', async () => {
     const onChange = vi.fn();
-    await render(<RichTextEditor onChange={onChange} />);
+    render(<RichTextEditor onChange={onChange} />);
+
     await sleep(1);
 
     expect(onChange).not.toHaveBeenCalled();
@@ -28,7 +30,8 @@ describe('RichTextEditor basic rendering', () => {
 
   it('should not trigger onChange on mount when initialData is passed', async () => {
     const onChange = vi.fn();
-    await render(<RichTextEditor initialData={emptyParagraph} onChange={onChange} />);
+    render(<RichTextEditor initialData={emptyParagraph} onChange={onChange} />);
+
     await sleep(1);
 
     expect(onChange).not.toHaveBeenCalled();
@@ -36,9 +39,8 @@ describe('RichTextEditor basic rendering', () => {
 
   it('should trigger onChange on mount if triggerOnChangeOnAutoFocus and autoFocus is passed', async () => {
     const onChange = vi.fn();
-    await render(
-      <RichTextEditor initialData={emptyParagraph} onChange={onChange} triggerOnChangeOnAutoFocus autoFocus />,
-    );
+    render(<RichTextEditor initialData={emptyParagraph} onChange={onChange} triggerOnChangeOnAutoFocus autoFocus />);
+
     await sleep(1);
 
     expect(onChange).toHaveBeenCalledTimes(1);

package/src/rich-text-editor/tests/rich-text-editor-code.test.tsx

@@ -5,6 +5,7 @@ import { RichTextEditor } from '../rich-text-editor';
 
 describe('RichTextEditor code node', () => {
   it('can add a code block to an existing paragraph text', async () => {
+    const user = userEvent.setup();
     const onChange = vi.fn();
 
     render(
@@ -20,7 +21,6 @@ describe('RichTextEditor code node', () => {
       />,
     );
 
-    const user = userEvent.setup();
     await user.click(screen.getByTestId('toggle-block-format'));
     await user.click(screen.getByTestId('toggle-block-format-code'));
 

package/src/rich-text-editor/tests/rich-text-editor-onchange.test.tsx

@@ -5,33 +5,19 @@ import { RichTextEditor } from '../rich-text-editor';
 
 describe('RichTextEditor onChange behaves like expected', () => {
   it('will fire exactly 1 onChange if a single character was entered', async () => {
+    const user = userEvent.setup();
     const onChange = vi.fn();
 
     render(
-      <RichTextEditor
-        initialData={[
-          {
-            type: 'paragraph',
-            kind: 'block',
-            textContent: 'Hi',
-          },
-        ]}
-        onChange={onChange}
-      />,
+      <RichTextEditor initialData={[{ type: 'paragraph', kind: 'block', textContent: 'Hi' }]} onChange={onChange} />,
     );
 
     expect(onChange).toHaveBeenCalledTimes(0);
 
-    const user = userEvent.setup();
+    await user.click(screen.getByRole('textbox'));
     await user.type(screen.getByRole('textbox'), '!');
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([
-      {
-        type: 'paragraph',
-        kind: 'block',
-        textContent: 'Hi!',
-      },
-    ]);
+    expect(onChange).toHaveBeenCalledWith([{ type: 'paragraph', kind: 'block', textContent: 'Hi!' }]);
   });
 });

package/src/rich-text-editor/tests/rich-text-editor-quote.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { CrystallizeRichText, RichTextEditor } from '../rich-text-editor';
+import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
 
 describe('RichTextEditor code node', () => {
   it('can replace an existing paragraph to a quote with clicking a dropdown item', async () => {

package/src/rich-text-editor/tests/rich-text-editor-typing.test.tsx

@@ -29,8 +29,10 @@ describe('RichTextEditor typing', () => {
   // });
 
   it('can change a simple text, keeping the textContent on paragraph', async () => {
+    const user = userEvent.setup();
     const onChange = vi.fn();
     const initialText = 'rabbit';
+
     render(
       <RichTextEditor
         initialData={[{ kind: 'block', type: 'paragraph', textContent: initialText }]}
@@ -38,10 +40,9 @@ describe('RichTextEditor typing', () => {
       />,
     );
 
-    const user = userEvent.setup();
-
     const addedText = faker.lorem.paragraph();
 
+    await user.click(screen.getByRole('textbox'));
     await user.type(screen.getByRole('textbox'), addedText);
 
     const endText = initialText + addedText;
@@ -51,8 +52,10 @@ describe('RichTextEditor typing', () => {
   });
 
   it('can type a text with line breaks', async () => {
+    const user = userEvent.setup();
     const onChange = vi.fn();
     const initialText = 'rabbit';
+
     render(
       <RichTextEditor
         initialData={[{ kind: 'block', type: 'paragraph', textContent: initialText }]}
@@ -60,10 +63,9 @@ describe('RichTextEditor typing', () => {
       />,
     );
 
-    const user = userEvent.setup();
-
     const addedText = faker.lorem.paragraphs();
 
+    await user.click(screen.getByRole('textbox'));
     await user.type(screen.getByRole('textbox'), addedText);
 
     const endText = initialText + addedText;

package/src/rich-text-editor/tests/utils.ts

@@ -1,4 +1,6 @@
-export const sleep = (t: number) => new Promise(r => setTimeout(r, t));
+import { act } from '@testing-library/react';
+
+export const sleep = async (t: number) => act(async () => new Promise(r => setTimeout(r, t)));
 
 export async function selectTextInElement({
   element,

package/src/select/select-root.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { cva, VariantProps } from 'class-variance-authority';
 import * as SelectPrimitives from '@radix-ui/react-select';
 
@@ -19,7 +19,7 @@ const selectTriggerStyles = cva('c-select-trigger', {
 });
 
 export type SelectRef = HTMLButtonElement;
-export type SelectProps = ComponentProps<typeof SelectPrimitives.Root> &
+export type SelectProps = React.ComponentProps<typeof SelectPrimitives.Root> &
   VariantProps<typeof selectTriggerStyles> & {
     triggerClassName?: string;
     disabled?: boolean;

package/src/spinner/index.tsx

@@ -1,12 +1,12 @@
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+import { forwardRef } from 'react';
 import { cx } from 'class-variance-authority';
 
 import './spinner.css';
 
 const realSize = 40;
 
-type SpinnerProps = ComponentPropsWithRef<'div'> & {
-  children?: ReactNode;
+type SpinnerProps = React.ComponentPropsWithRef<'div'> & {
+  children?: React.ReactNode;
   className?: string;
   color?: string;
   size?: number;

package/src/tag/tag.tsx

@@ -1,4 +1,4 @@
-import { cva, VariantProps, cx } from 'class-variance-authority';
+import { cva, type VariantProps, cx } from 'class-variance-authority';
 
 import { Icon } from '../iconography';
 import './tag.css';
@@ -24,7 +24,7 @@ const tagStyles = cva('c-tag', {
   },
 });
 
-export type TagProps = React.ComponentProps<'div'> &
+export type TagProps = React.ComponentPropsWithRef<'div'> &
   TagStylesProps & {
     prepend?: React.ReactNode;
     onRemove?: () => void;

package/src/tooltip/tooltip.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 
 type TooltipStylesProps = VariantProps<typeof tooltipStyles>;