💥(react) upgrade to React 19

https://react.dev/blog/2024/04/25/react-19-upgrade-guide
https://react.dev/blog/2024/12/05/react-19

packages/react/src/components/Button/index.tsx

@@ -2,80 +2,76 @@ import React, {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   createElement,
-  forwardRef,
   ReactNode,
+  RefAttributes,
 } from "react";
 
 type DomProps = ButtonHTMLAttributes<HTMLButtonElement> &
   AnchorHTMLAttributes<HTMLAnchorElement>;
 
-export type ButtonProps = Omit<DomProps, "color"> & {
-  size?: "medium" | "small" | "nano";
-  color?:
-    | "primary"
-    | "primary-text"
-    | "secondary"
-    | "tertiary"
-    | "tertiary-text"
-    | "danger";
-  icon?: ReactNode;
-  iconPosition?: "left" | "right";
-  active?: boolean;
-  fullWidth?: boolean;
-};
-
 export type ButtonElement = HTMLButtonElement & HTMLAnchorElement;
+export type ButtonProps = Omit<DomProps, "color"> &
+  RefAttributes<ButtonElement> & {
+    size?: "medium" | "small" | "nano";
+    color?:
+      | "primary"
+      | "primary-text"
+      | "secondary"
+      | "tertiary"
+      | "tertiary-text"
+      | "danger";
+    icon?: ReactNode;
+    iconPosition?: "left" | "right";
+    active?: boolean;
+    fullWidth?: boolean;
+  };
 
-export const Button = forwardRef<ButtonElement, ButtonProps>(
-  (
+export const Button = ({
+  children,
+  color = "primary",
+  size = "medium",
+  iconPosition = "left",
+  icon,
+  active,
+  className,
+  fullWidth,
+  ref,
+  ...props
+}: ButtonProps) => {
+  const classes = [
+    "c__button",
+    "c__button--" + color,
+    "c__button--" + size,
+    className,
+  ];
+  if (icon && children) {
+    classes.push("c__button--with-icon--" + iconPosition);
+  }
+  if (icon && !children) {
+    classes.push("c__button--icon-only");
+  }
+  if (active) {
+    classes.push("c__button--active");
+  }
+  if (fullWidth) {
+    classes.push("c__button--full-width");
+  }
+  if (["primary-text", "tertiary-text"].includes(color)) {
+    classes.push("c__button--text");
+  }
+  const iconElement = <span className="c__button__icon">{icon}</span>;
+  const tagName = props.href ? "a" : "button";
+  return createElement(
+    tagName,
     {
-      children,
-      color = "primary",
-      size = "medium",
-      iconPosition = "left",
-      icon,
-      active,
-      className,
-      fullWidth,
-      ...props
+      className: classes.join(" "),
+      ...props,
+      ref,
     },
-    ref,
-  ) => {
-    const classes = [
-      "c__button",
-      "c__button--" + color,
-      "c__button--" + size,
-      className,
-    ];
-    if (icon && children) {
-      classes.push("c__button--with-icon--" + iconPosition);
-    }
-    if (icon && !children) {
-      classes.push("c__button--icon-only");
-    }
-    if (active) {
-      classes.push("c__button--active");
-    }
-    if (fullWidth) {
-      classes.push("c__button--full-width");
-    }
-    if (["primary-text", "tertiary-text"].includes(color)) {
-      classes.push("c__button--text");
-    }
-    const iconElement = <span className="c__button__icon">{icon}</span>;
-    const tagName = props.href ? "a" : "button";
-    return createElement(
-      tagName,
-      {
-        className: classes.join(" "),
-        ...props,
-        ref,
-      },
-      <>
-        {!!icon && iconPosition === "left" && iconElement}
-        {children}
-        {!!icon && iconPosition === "right" && iconElement}
-      </>,
-    );
-  },
-);
+    <>
+      {!!icon && iconPosition === "left" && iconElement}
+      {children}
+      {!!icon && iconPosition === "right" && iconElement}
+    </>,
+  );
+};