refactor: add "use client" to all components

src/components/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useState } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Accordion/AccordionControl/AccordionControl.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Accordion/AccordionIcon/AccordionIcon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ReactNode, forwardRef } from "react";
 import { CaretUp } from "@phosphor-icons/react";
 // Components

src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Accordion/AccordionPanel/AccordionPanel.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useRef, useEffect, useState } from "react";
 // Components
 import Box from "@components/Box";

src/components/ActionButton/ActionButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Button, { ButtonProps } from "@components/Button";

src/components/Alert/Alert.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, ReactNode, useState } from "react";
 import {
   Warning,

src/components/Alert/AlertDescription/AlertDescription.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Text, { TextProps } from "@components/Text";

src/components/Alert/AlertTitle/AlertTitle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Text, { TextProps } from "@components/Text";

src/components/Animation/Animation.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useEffect, useState } from "react";
 // Components
 import Transition, { TransitionProps } from "@components/Transition";

src/components/AspectRatio/AspectRatio.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/AutocompleteField/AutocompleteField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useState, useEffect } from "react";
 // Components
 import SelectField, { SelectFieldProps } from "@components/SelectField";

src/components/Avatar/Avatar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 import { UserCircle } from "@phosphor-icons/react";
 // Components

src/components/Backdrop/Backdrop.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Center, { CenterProps } from "@components/Center";

src/components/Badge/Badge.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, ReactNode } from "react";
 // Components
 import Box from "@components/Box";

src/components/Box/Box.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Hooks
 import useStyling from "./useStyling";

src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Breadcrumb/BreadcrumbSeparator/BreadcrumbSeparator.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, ReactNode } from "react";
 // Components
 import Transition, { TransitionProps } from "@components/Transition";

src/components/Card/Card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Component
 import Paper, { PaperProps } from "@components/Paper";

src/components/Card/CardFooter/CardFooter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Card/CardHeader/CardHeader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Center/Center.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, ReactNode } from "react";
 import { Check, Minus } from "@phosphor-icons/react";
 // Components

src/components/Chip/Chip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, ReactNode } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Circle/Circle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Center, { CenterProps } from "@components/Center";

src/components/CloseButton/CloseButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 import { X } from "@phosphor-icons/react";
 // Components

src/components/Collapse/Collapse.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useRef } from "react";
 // Components
 import Animation, { AnimationProps } from "@components/Animation";

src/components/ColorField/ColorField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import SelectField, { SelectFieldProps } from "@components/SelectField";

src/components/Container/Container.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Dialog/Dialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useEffect } from "react";
 // Components
 import Animation, { AnimationProps } from "@components/Animation";

src/components/Dialog/DialogFooter/DialogFooter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Dialog/DialogHeader/DialogHeader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Divider/Divider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Drawer/Drawer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useEffect } from "react";
 // Components
 import Paper, { PaperProps } from "@components/Paper";

src/components/Drawer/DrawerFooter/DrawerFooter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Drawer/DrawerHeader/DrawerHeader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Field/Field.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box from "@components/Box";

src/components/Field/FieldAddon/FieldAddon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Transition, { TransitionProps } from "@components/Transition";

src/components/Field/FieldError/FieldError.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Field/FieldLabel/FieldLabel.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Text, { TextProps } from "@components/Text";

src/components/Field/FieldWrapper/FieldWrapper.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Flex/Flex.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Footer/Footer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Form/Form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Gradient/Gradient.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 import * as CSS from "csstype";
 // Component

src/components/Grid/Grid.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Grid/GridItem/GridItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Header/Header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Hidden/Hidden.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Hide/Hide.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Highlight/Highlight.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Icon/Icon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Square, { SquareProps } from "@components/Square";

src/components/Image/Image.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Initials/Initials.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 
 export type InitialsProps = {

src/components/Key/Key.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "@components/Box";

src/components/Link/Link.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Text, { TextProps } from "@components/Text";

src/components/List/List.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/List/ListIcon/ListIcon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Icon, { IconProps } from "@components/Icon";

src/components/List/ListItem/ListItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/List/ListOrdered/ListOrdered.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import List, { ListProps } from "@components/List";

src/components/List/ListUnordered/ListUnordered.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import List, { ListProps } from "@components/List";

src/components/Main/Main.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Flex, { FlexProps } from "@components/Flex";

src/components/Menu/Menu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Paper, { PaperProps } from "@components/Paper";

src/components/Menu/MenuIcon/MenuIcon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 // Components
 import Icon, { IconProps } from "@components/Icon";