fix: update dependencies and lint

package.json

@@ -91,21 +91,21 @@
         "eslint-plugin-storybook": "^0.8.0",
         "eslint-plugin-tsdoc": "0.2.17",
         "jsdom": "^24.1.0",
-        "prettier": "^3.1.0",
-        "prettier-plugin-tailwindcss": "0.5.9",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "0.6.8",
         "prop-types": "^15.8.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "rimraf": "^5.0.5",
         "rollup": "^4.6.1",
         "rollup-plugin-dts": "^6.1.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-postcss": "^4.0.2",
         "semantic-release": "^23.0.5",
         "storybook": "^8.2.4",
-        "tailwind-merge": "^2.1.0",
-        "tailwindcss": "^3.3.6",
-        "typescript": "^5.5.3",
+        "tailwind-merge": "^2.5.4",
+        "tailwindcss": "^3.4.14",
+        "typescript": "^5.6.3",
         "vite": "^5.3.4",
         "vitest": "^1.0.1"
     },

src/components/button-group/button-group.tsx

@@ -14,7 +14,7 @@ const Button = ({ children, type, isActive, ...props }: ButtonProps) => {
             // eslint-disable-next-line react/button-has-type
             type={type}
             className={classNames(
-                "relative -ml-px inline-flex bg-neutral-0 px-4 py-2 font-medium text-neutral-700  ring-1 ring-inset ring-neutral-400 hover:bg-neutral-100 hover:text-neutral-800 focus:z-10 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary-200 active:bg-neutral-200 disabled:bg-neutral-0 disabled:text-neutral-500",
+                "relative -ml-px inline-flex bg-neutral-0 px-4 py-2 font-medium text-neutral-700 ring-1 ring-inset ring-neutral-400 hover:bg-neutral-100 hover:text-neutral-800 focus:z-10 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary-200 active:bg-neutral-200 disabled:bg-neutral-0 disabled:text-neutral-500",
                 isActive &&
                     "bg-primary-50 text-primary-500 hover:bg-primary-50 hover:text-primary-500 active:bg-primary-50 disabled:bg-neutral-100 disabled:text-neutral-500"
             )}
@@ -31,7 +31,7 @@ interface ButtonGroupProps {
 
 const ButtonGroup = ({ children }: ButtonGroupProps) => {
     return (
-        <div className="isolate inline-flex [&>[data-slot=group-button]:first-of-type]:ml-0 [&>[data-slot=group-button]:first-of-type]:rounded-l  [&>[data-slot=group-button]:last-of-type]:rounded-r">
+        <div className="isolate inline-flex [&>[data-slot=group-button]:first-of-type]:ml-0 [&>[data-slot=group-button]:first-of-type]:rounded-l [&>[data-slot=group-button]:last-of-type]:rounded-r">
             {children}
         </div>
     );

src/components/checkbox/checkbox.tsx

@@ -11,7 +11,7 @@ interface CheckboxProps {
 
 export const Checkbox = ({ id, label, checked, onChange, disabled = false }: CheckboxProps) => {
     return (
-        <div className="flex items-center gap-3 ">
+        <div className="flex items-center gap-3">
             <input
                 id={id}
                 className="h-4 w-4 rounded border-neutral-400 outline-none checked:border-none checked:bg-primary-400 hover:border-neutral-600 checked:hover:bg-primary-500 focus:ring-0 focus:ring-transparent active:border-neutral-500 active:bg-neutral-100 checked:active:bg-primary-600 disabled:border-none disabled:bg-neutral-100 disabled:checked:fill-neutral-500 disabled:hover:bg-neutral-100"

src/components/form-field/form-field-error-message.tsx

@@ -9,7 +9,7 @@ export const FormFieldErrorMessage = ({ children }: FormFieldErrorMessageProps)
     return (
         <div className="mt-0.5 flex items-center gap-1">
             <WarningSignIcon className="h-3 w-3 fill-danger-500" />
-            <p className="paragraph-100 text-danger-500 ">{children}</p>
+            <p className="paragraph-100 text-danger-500">{children}</p>
         </div>
     );
 };

src/components/form-field/listbox/listbox-button.tsx

@@ -1,9 +1,9 @@
 import { ListboxButton as HeadlessUiListboxButton } from "@headlessui/react";
 import React from "react";
 import { CaretDownIcon } from "../../../icons";
+import { classNames } from "../../../util/class-names";
 import { ListboxButtonBadgeValue } from "./listbox-button-badge-value";
 import { ListboxButtonTextValue } from "./listbox-button-text-value";
-import { classNames } from "../../../util/class-names";
 
 export interface ListboxButtonProps {
     children: React.ReactNode;
@@ -23,7 +23,7 @@ const ListboxButton = ({ children, disabled }: ListboxButtonProps) => {
             {children}
 
             <div className="absolute inset-y-0 right-0 flex items-center px-1.5">
-                <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100  focus:outline-none">
+                <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100 focus:outline-none">
                     <CaretDownIcon className="h-3 w-3 fill-neutral-600" aria-hidden="true" />
                 </div>
             </div>

src/components/page/page-description.tsx

@@ -5,5 +5,5 @@ export interface PageDescriptionProps {
 }
 
 export const PageDescription = ({ children }: PageDescriptionProps) => {
-    return <p className="paragraph-200  text-neutral-800">{children}</p>;
+    return <p className="paragraph-200 text-neutral-800">{children}</p>;
 };

src/components/sidesheet/sidesheet-panel-header-action-group.tsx

@@ -7,5 +7,5 @@ export interface SidesheetPanelHeaderActionGroupProps {
 export const SidesheetPanelHeaderActionGroup = ({
     children,
 }: SidesheetPanelHeaderActionGroupProps) => {
-    return <div className="flex gap-4 ">{children}</div>;
+    return <div className="flex gap-4">{children}</div>;
 };

src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx

@@ -18,7 +18,7 @@ export const TableEmptyPlaceholder = ({
     return (
         <TableBodyRow aria-label="No data available in this table">
             <TableBodyCell colSpan={colSpan} className="h-80">
-                <div className="min-h-96 flex flex-col items-center justify-center">
+                <div className="flex min-h-96 flex-col items-center justify-center">
                     <h5 className="headline-300 mb-1">{title}</h5>
 
                     <p className="paragraph-100 mb-2">{description}</p>

src/components/toggle/toggle.tsx

@@ -46,7 +46,7 @@ const Switch = ({ checked = false, onChange, disabled = false, ariaLabel }: Swit
                 className={classNames(
                     "inline-block h-3 w-3 transform rounded-full transition",
                     checked ? "translate-x-3.5" : "translate-x-0.5",
-                    checked && disabled && "bg-neutral-400 ",
+                    checked && disabled && "bg-neutral-400",
                     checked && !disabled && "bg-neutral-0",
                     !checked && disabled && "bg-neutral-400",
                     !checked && !disabled && "bg-neutral-0"

src/components/top-bar/top-bar-nav-links/top-bar-nav-link.tsx

@@ -12,7 +12,7 @@ export const TopBarNavLink = ({ isActive = false, children }: TopBarNavLinkProps
             <div className="group rounded px-4 py-1 hover:bg-neutral-800 group-focus:ring-2 group-focus:ring-primary-200">
                 <div
                     className={classNames(
-                        "relative font-sans text-sm text-neutral-0 ",
+                        "relative font-sans text-sm text-neutral-0",
                         isActive &&
                             "after:absolute after:left-0 after:right-0 after:top-7 after:block after:h-0.5 after:bg-neutral-0"
                     )}