Improve tree-shaking using the verbatimModuleSyntax flag (#2493)

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

@@ -17,16 +17,16 @@
 
 import {
   forwardRef,
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ReactNode,
-  Ref,
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+  type Ref,
 } from 'react';
 
 import type { ReturnType } from '../../types/return-type.js';
 import type { ClickEvent } from '../../types/events.js';
 import type { AsPropType } from '../../types/prop-types.js';
-import { Body, BodyProps } from '../Body/Body.js';
+import { Body, type BodyProps } from '../Body/Body.js';
 import { useComponents } from '../ComponentsContext/index.js';
 import { clsx } from '../../styles/clsx.js';
 import utilityClasses from '../../styles/utility.js';

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

@@ -17,8 +17,8 @@ import {
   Children,
   forwardRef,
   cloneElement,
-  ReactElement,
-  HTMLAttributes,
+  type ReactElement,
+  type HTMLAttributes,
 } from 'react';
 
 import { clsx } from '../../styles/clsx.js';

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { ImgHTMLAttributes } from 'react';
+import type { ImgHTMLAttributes } from 'react';
 import { Profile, Image as ImageIcon } from '@sumup/icons';
 
 import { CircuitError } from '../../util/errors.js';

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
 import type { AsPropType } from '../../types/prop-types.js';
 import { clsx } from '../../styles/clsx.js';

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { forwardRef, HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
 import type { AsPropType } from '../../types/prop-types.js';
 import { clsx } from '../../styles/clsx.js';

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { forwardRef, HTMLAttributes, Ref } from 'react';
+import { forwardRef, type HTMLAttributes, type Ref } from 'react';
 
 import type { AsPropType } from '../../types/prop-types.js';
 import { clsx } from '../../styles/clsx.js';

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

@@ -27,9 +27,9 @@ import { deprecate } from '../../util/logger.js';
 
 import classes from './Button.module.css';
 import {
-  SharedButtonProps,
   createButtonComponent,
   legacyButtonSizeMap,
+  type SharedButtonProps,
 } from './base.js';
 
 export type ButtonProps = SharedButtonProps & {

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

@@ -13,9 +13,9 @@
  * limitations under the License.
  */
 
-import { forwardRef, HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
-import Button, { ButtonProps } from '../Button/index.js';
+import Button, { type ButtonProps } from '../Button/index.js';
 import { clsx } from '../../styles/clsx.js';
 import { deprecate } from '../../util/logger.js';
 

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
 import { clsx } from '../../styles/clsx.js';
 import type { AsPropType } from '../../types/prop-types.js';

packages/circuit-ui/components/Card/components/Footer/Footer.tsx

@@ -13,21 +13,7 @@
  * limitations under the License.
  */
 
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
 import { clsx } from '../../../../styles/clsx.js';
 import type { AsPropType } from '../../../../types/prop-types.js';

packages/circuit-ui/components/Card/components/Header/Header.tsx

@@ -15,7 +15,7 @@
 
 'use client';
 
-import { ReactNode, HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
 
 import type { ClickEvent } from '../../../../types/events.js';
 import CloseButton from '../../../CloseButton/index.js';

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

@@ -15,14 +15,14 @@
 
 'use client';
 
-import { ReactNode, useRef, useState } from 'react';
+import { useRef, useState, type ReactNode } from 'react';
 
 import ProgressBar from '../ProgressBar/index.js';
 import Step from '../Step/index.js';
 import { useComponentSize } from '../../hooks/useComponentSize/index.js';
-import { ImageProps } from '../Image/index.js';
+import type { ImageProps } from '../Image/index.js';
 import { isFunction } from '../../util/type-check.js';
-import { Actions, State } from '../Step/types.js';
+import type { Actions, State } from '../Step/types.js';
 
 import { Container } from './components/Container/index.js';
 import { Slides } from './components/Slides/index.js';

packages/circuit-ui/components/Carousel/components/Buttons/Buttons.tsx

@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import { ChevronLeft, ChevronRight, Pause, Play } from '@sumup/icons';
 
-import { IconButton, IconButtonProps } from '../../../Button/index.js';
+import { IconButton, type IconButtonProps } from '../../../Button/index.js';
 import { clsx } from '../../../../styles/clsx.js';
 
 import classes from './Buttons.module.css';

packages/circuit-ui/components/Carousel/components/Slides/Slides.tsx

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
 import { clsx } from '../../../../styles/clsx.js';
 

packages/circuit-ui/components/Carousel/components/Status/Status.tsx

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import Body, { BodyProps } from '../../../Body/index.js';
+import Body, { type BodyProps } from '../../../Body/index.js';
 import { clsx } from '../../../../styles/clsx.js';
 
 import classes from './Status.module.css';

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

@@ -16,11 +16,11 @@
 'use client';
 
 import {
-  InputHTMLAttributes,
   forwardRef,
   useEffect,
   useId,
   useRef,
+  type InputHTMLAttributes,
 } from 'react';
 import { Checkmark } from '@sumup/icons';
 

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

@@ -16,14 +16,14 @@
 'use client';
 
 import {
-  FieldsetHTMLAttributes,
-  InputHTMLAttributes,
-  Ref,
   forwardRef,
   useId,
+  type FieldsetHTMLAttributes,
+  type InputHTMLAttributes,
+  type Ref,
 } from 'react';
 
-import { Checkbox, CheckboxProps } from '../Checkbox/Checkbox.js';
+import { Checkbox, type CheckboxProps } from '../Checkbox/Checkbox.js';
 import {
   FieldLabelText,
   FieldValidationHint,

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

@@ -16,7 +16,7 @@
 import { forwardRef } from 'react';
 import { Close } from '@sumup/icons';
 
-import { IconButton, IconButtonProps } from '../Button/IconButton.js';
+import { IconButton, type IconButtonProps } from '../Button/IconButton.js';
 
 export type CloseButtonProps = Omit<IconButtonProps, 'icon'>;
 

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

@@ -13,9 +13,9 @@
  * limitations under the License.
  */
 
-import { ComponentType, createContext } from 'react';
+import { createContext, type ComponentType } from 'react';
 
-import { Link, LinkProps } from './components/Link/index.js';
+import { Link, type LinkProps } from './components/Link/index.js';
 
 export const defaultComponents = { Link };
 

packages/circuit-ui/components/ComponentsContext/components/Link/Link.tsx

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { forwardRef, AnchorHTMLAttributes, Ref } from 'react';
+import { forwardRef, type AnchorHTMLAttributes, type Ref } from 'react';
 
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   ref?: Ref<HTMLAnchorElement>;

packages/circuit-ui/components/ComponentsContext/useComponents.ts

@@ -16,9 +16,9 @@
 import { useContext } from 'react';
 
 import {
-  ComponentsContext,
-  ComponentsContextType,
   defaultComponents,
+  ComponentsContext,
+  type ComponentsContextType,
 } from './ComponentsContext.js';
 
 /**

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

@@ -17,10 +17,10 @@
 
 import { forwardRef, useId } from 'react';
 import { resolveCurrencyFormat } from '@sumup/intl';
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import { NumericFormat, type NumericFormatProps } from 'react-number-format';
 
 import { clsx } from '../../styles/clsx.js';
-import Input, { InputElement, InputProps } from '../Input/index.js';
+import Input, { type InputElement, type InputProps } from '../Input/index.js';
 
 import { formatPlaceholder } from './CurrencyInputService.js';
 import classes from './CurrencyInput.module.css';

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

@@ -18,7 +18,7 @@
 import { forwardRef, useState, useEffect } from 'react';
 import { PatternFormat } from 'react-number-format';
 
-import Input, { InputElement, InputProps } from '../Input/index.js';
+import Input, { type InputElement, type InputProps } from '../Input/index.js';
 import { clsx } from '../../styles/clsx.js';
 
 import classes from './DateInput.module.css';

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

@@ -14,10 +14,10 @@
  */
 
 import {
-  FieldsetHTMLAttributes,
-  HTMLAttributes,
-  LabelHTMLAttributes,
   forwardRef,
+  type FieldsetHTMLAttributes,
+  type HTMLAttributes,
+  type LabelHTMLAttributes,
 } from 'react';
 import { Confirm, Notify, Alert } from '@sumup/icons';
 

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

@@ -18,7 +18,7 @@
 import { forwardRef } from 'react';
 
 import { legacyButtonSizeMap } from '../Button/index.js';
-import { IconButton, IconButtonProps } from '../Button/IconButton.js';
+import { IconButton, type IconButtonProps } from '../Button/IconButton.js';
 import { Skeleton } from '../Skeleton/index.js';
 import {
   AccessibilityError,

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
 import { clsx } from '../../styles/clsx.js';
 import { CircuitError } from '../../util/errors.js';

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 
 import type { AsPropType } from '../../types/prop-types.js';
 import { clsx } from '../../styles/clsx.js';

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { ImgHTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type ImgHTMLAttributes } from 'react';
 
 import { clsx } from '../../styles/clsx.js';
 

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

@@ -18,16 +18,16 @@
 import {
   useState,
   useRef,
-  InputHTMLAttributes,
-  ChangeEvent,
-  ClipboardEvent,
-  DragEvent,
   useId,
-  ComponentType,
+  type InputHTMLAttributes,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type DragEvent,
+  type ComponentType,
 } from 'react';
 import { Delete, Plus } from '@sumup/icons';
 
-import { ClickEvent } from '../../types/events.js';
+import type { ClickEvent } from '../../types/events.js';
 import utilityClasses from '../../styles/utility.js';
 import {
   FieldWrapper,

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

@@ -16,11 +16,11 @@
 'use client';
 
 import {
-  ComponentType,
   forwardRef,
-  InputHTMLAttributes,
-  TextareaHTMLAttributes,
   useId,
+  type ComponentType,
+  type InputHTMLAttributes,
+  type TextareaHTMLAttributes,
 } from 'react';
 
 import {
@@ -29,7 +29,7 @@ import {
   FieldLabelText,
   FieldValidationHint,
 } from '../Field/index.js';
-import { ReturnType } from '../../types/return-type.js';
+import type { ReturnType } from '../../types/return-type.js';
 import {
   AccessibilityError,
   isSufficientlyLabelled,

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { forwardRef, OlHTMLAttributes } from 'react';
+import { forwardRef, type OlHTMLAttributes } from 'react';
 
 import { clsx } from '../../styles/clsx.js';