Change type import rule (#13751)

Forcing "type" to be explicit, works best will rollup on the frontend to
exclude depdendencies

packages/twenty-ui/src/input/button/components/AnimatedButton.tsx

@@ -2,15 +2,15 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useIsMobile } from '@ui/utilities';
 import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
-import { MotionProps, motion } from 'framer-motion';
+import { type MotionProps, motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 
 import { Pill } from '@ui/components/Pill/Pill';
 import {
-  ButtonAccent,
-  ButtonProps,
-  ButtonSize,
-  ButtonVariant,
+  type ButtonAccent,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
 } from './Button/Button';
 
 export type AnimatedButtonProps = ButtonProps &

packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx

@@ -1,12 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { type IconComponent } from '@ui/display';
 import {
-  LightIconButtonAccent,
-  LightIconButtonSize,
+  type LightIconButtonAccent,
+  type LightIconButtonSize,
 } from '@ui/input/button/components/LightIconButton';
-import { motion, MotionProps } from 'framer-motion';
-import { ComponentProps, MouseEvent } from 'react';
+import { motion, type MotionProps } from 'framer-motion';
+import { type ComponentProps, type MouseEvent } from 'react';
 
 export type AnimatedLightIconButtonProps = {
   className?: string;

packages/twenty-ui/src/input/button/components/Button/Button.tsx

@@ -1,12 +1,12 @@
 import isPropValid from '@emotion/is-prop-valid';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { type IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/ButtonHotKeys';
 import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
 import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
 import { useIsMobile } from '@ui/utilities';
-import { ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
+import { type ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';

packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx

@@ -1,5 +1,9 @@
 import { getOsShortcutSeparator } from '@ui/utilities';
-import { ButtonAccent, ButtonSize, ButtonVariant } from '@ui/input';
+import {
+  type ButtonAccent,
+  type ButtonSize,
+  type ButtonVariant,
+} from '@ui/input';
 import styled from '@emotion/styled';
 
 const StyledSeparator = styled.div<{

packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { type IconComponent } from '@ui/display';
 import { Loader } from '@ui/feedback';
 import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
 

packages/twenty-ui/src/input/button/components/ButtonGroup.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 
-import { ButtonPosition, ButtonProps } from './Button/Button';
+import { type ButtonPosition, type ButtonProps } from './Button/Button';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledButtonGroupContainer = styled.div`

packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ColorSample, ColorSampleProps } from '@ui/display';
+import { ColorSample, type ColorSampleProps } from '@ui/display';
 import {
   LightIconButton,
-  LightIconButtonProps,
+  type LightIconButtonProps,
 } from '@ui/input/button/components/LightIconButton';
 
 type ColorPickerButtonProps = Pick<ColorSampleProps, 'colorName'> &

packages/twenty-ui/src/input/button/components/FloatingButton.tsx

@@ -1,7 +1,7 @@
 import isPropValid from '@emotion/is-prop-valid';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { type IconComponent } from '@ui/display';
 import { Link } from 'react-router-dom';
 
 export type FloatingButtonSize = 'small' | 'medium';

packages/twenty-ui/src/input/button/components/FloatingButtonGroup.tsx

@@ -1,7 +1,10 @@
 import styled from '@emotion/styled';
 import React from 'react';
 
-import { FloatingButtonPosition, FloatingButtonProps } from './FloatingButton';
+import {
+  type FloatingButtonPosition,
+  type FloatingButtonProps,
+} from './FloatingButton';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledFloatingButtonGroupContainer = styled.div`

packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx

@@ -1,6 +1,6 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { type IconComponent } from '@ui/display';
 import React from 'react';
 
 export type FloatingIconButtonSize = 'small' | 'medium';

packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
-import { MouseEvent } from 'react';
+import { type IconComponent } from '@ui/display';
+import { type MouseEvent } from 'react';
 
 import {
   FloatingIconButton,
-  FloatingIconButtonPosition,
-  FloatingIconButtonProps,
+  type FloatingIconButtonPosition,
+  type FloatingIconButtonProps,
 } from './FloatingIconButton';
 
 const StyledFloatingIconButtonGroupContainer = styled.div`

packages/twenty-ui/src/input/button/components/IconButton.tsx

@@ -1,6 +1,6 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { type IconComponent } from '@ui/display';
 import React from 'react';
 
 export type IconButtonSize = 'medium' | 'small';

packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
-import { MouseEvent } from 'react';
+import { type IconComponent } from '@ui/display';
+import { type MouseEvent } from 'react';
 
 import { InsideButton } from '@ui/input/button/components/InsideButton';
 

packages/twenty-ui/src/input/button/components/InsideButton.tsx

@@ -1,4 +1,4 @@
-import { IconComponent } from '@ui/display';
+import { type IconComponent } from '@ui/display';
 import styled from '@emotion/styled';
 import React from 'react';
 import { useTheme } from '@emotion/react';

packages/twenty-ui/src/input/button/components/LightButton.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
-import { MouseEvent } from 'react';
+import { type IconComponent } from '@ui/display';
+import { type MouseEvent } from 'react';
 
 export type LightButtonAccent = 'secondary' | 'tertiary';
 

packages/twenty-ui/src/input/button/components/LightIconButton.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
-import { ComponentProps, MouseEvent } from 'react';
+import { type IconComponent } from '@ui/display';
+import { type ComponentProps, type MouseEvent } from 'react';
 
 export type LightIconButtonAccent = 'secondary' | 'tertiary';
 export type LightIconButtonSize = 'small' | 'medium';

packages/twenty-ui/src/input/button/components/LightIconButtonGroup.tsx

@@ -1,8 +1,12 @@
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
-import { FunctionComponent, MouseEvent, ReactElement } from 'react';
+import { type IconComponent } from '@ui/display';
+import {
+  type FunctionComponent,
+  type MouseEvent,
+  type ReactElement,
+} from 'react';
 
-import { LightIconButton, LightIconButtonProps } from './LightIconButton';
+import { LightIconButton, type LightIconButtonProps } from './LightIconButton';
 
 const StyledLightIconButtonGroupContainer = styled.div`
   display: inline-flex;

packages/twenty-ui/src/input/button/components/MainButton.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
-import React, { FunctionComponent } from 'react';
+import { type IconComponent } from '@ui/display';
+import React, { type FunctionComponent } from 'react';
 
 export type MainButtonVariant = 'primary' | 'secondary';
 

packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { type IconComponent } from '@ui/display';
 
 const StyledIconButton = styled.button`
   align-items: center;

packages/twenty-ui/src/input/button/components/TabButton.tsx

@@ -1,9 +1,9 @@
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import { Pill } from '@ui/components/Pill/Pill';
-import { Avatar, IconComponent } from '@ui/display';
+import { Avatar, type IconComponent } from '@ui/display';
 import { ThemeContext } from '@ui/theme';
-import { ReactElement, useContext } from 'react';
+import { type ReactElement, useContext } from 'react';
 import { Link } from 'react-router-dom';
 
 const StyledTabButton = styled('button', {

packages/twenty-ui/src/input/button/components/__stories__/AnimatedLightIconButton.stories.tsx

@@ -1,12 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconSearch } from '@ui/display';
 import {
-  LightIconButtonAccent,
-  LightIconButtonSize,
+  type LightIconButtonAccent,
+  type LightIconButtonSize,
 } from '@ui/input/button/components/LightIconButton';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
 import { AnimatedLightIconButton } from '../AnimatedLightIconButton';

packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx

@@ -1,16 +1,16 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconReload, IconSearch } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
 import {
   Button,
-  ButtonAccent,
-  ButtonPosition,
-  ButtonSize,
-  ButtonVariant,
+  type ButtonAccent,
+  type ButtonPosition,
+  type ButtonSize,
+  type ButtonVariant,
 } from '../Button/Button';
 
 const meta: Meta<typeof Button> = {

packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx

@@ -1,15 +1,15 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
 import {
   Button,
-  ButtonAccent,
-  ButtonSize,
-  ButtonVariant,
+  type ButtonAccent,
+  type ButtonSize,
+  type ButtonVariant,
 } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup';
 

packages/twenty-ui/src/input/button/components/__stories__/ColorPickerButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { ComponentDecorator } from '@ui/testing';
 import { ColorPickerButton } from '../ColorPickerButton';
 

packages/twenty-ui/src/input/button/components/__stories__/FloatingButton.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconSearch } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { FloatingButton, FloatingButtonSize } from '../FloatingButton';
+import { FloatingButton, type FloatingButtonSize } from '../FloatingButton';
 
 const meta: Meta<typeof FloatingButton> = {
   title: 'UI/Input/Button/FloatingButton',

packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { FloatingButton, FloatingButtonSize } from '../FloatingButton';
+import { FloatingButton, type FloatingButtonSize } from '../FloatingButton';
 import { FloatingButtonGroup } from '../FloatingButtonGroup';
 
 const meta: Meta<typeof FloatingButtonGroup> = {

packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButton.stories.tsx

@@ -1,13 +1,13 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconSearch } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
 import {
   FloatingIconButton,
-  FloatingIconButtonSize,
+  type FloatingIconButtonSize,
 } from '../FloatingIconButton';
 
 const meta: Meta<typeof FloatingIconButton> = {

packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { FloatingIconButtonSize } from '../FloatingIconButton';
+import { type FloatingIconButtonSize } from '../FloatingIconButton';
 import { FloatingIconButtonGroup } from '../FloatingIconButtonGroup';
 
 const meta: Meta<typeof FloatingIconButtonGroup> = {

packages/twenty-ui/src/input/button/components/__stories__/IconButton.stories.tsx

@@ -1,16 +1,16 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconSearch } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
 import {
   IconButton,
-  IconButtonAccent,
-  IconButtonPosition,
-  IconButtonSize,
-  IconButtonVariant,
+  type IconButtonAccent,
+  type IconButtonPosition,
+  type IconButtonSize,
+  type IconButtonVariant,
 } from '../IconButton';
 
 const meta: Meta<typeof IconButton> = {

packages/twenty-ui/src/input/button/components/__stories__/IconButtonGroup.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
 

packages/twenty-ui/src/input/button/components/__stories__/LightButton.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconSearch } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { LightButton, LightButtonAccent } from '../LightButton';
+import { LightButton, type LightButtonAccent } from '../LightButton';
 
 const meta: Meta<typeof LightButton> = {
   title: 'UI/Input/Button/LightButton',

packages/twenty-ui/src/input/button/components/__stories__/LightIconButton.stories.tsx

@@ -1,14 +1,14 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { IconSearch } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
 import {
   LightIconButton,
-  LightIconButtonAccent,
-  LightIconButtonSize,
+  type LightIconButtonAccent,
+  type LightIconButtonSize,
 } from '../LightIconButton';
 
 const meta: Meta<typeof LightIconButton> = {

packages/twenty-ui/src/input/button/components/__stories__/MainButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 import { IconBrandGoogle } from '@ui/display';
 import { ComponentDecorator } from '@ui/testing';

packages/twenty-ui/src/input/button/components/__stories__/RoundedIconButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 import { IconArrowRight } from '@ui/display';
 import { ComponentDecorator } from '@ui/testing';

packages/twenty-ui/src/input/button/components/__stories__/TabButton.stories.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import {
   IconCheckbox,
   IconChevronDown,
@@ -10,7 +10,7 @@ import {
 } from '@ui/display';
 import {
   CatalogDecorator,
-  CatalogStory,
+  type CatalogStory,
   ComponentWithRouterDecorator,
   RecoilRootDecorator,
 } from '@ui/testing';