build(deps): update to Next.js v16 + use image digests instead of tags

Ref:
- https://docs.docker.com/dhi/core-concepts/digests/
- https://github.com/goldbergyoni/nodebestpractices/blob/master/sections/docker/image-tags.md
- https://emmer.dev/blog/what-is-a-docker-digest/

packages/ui/src/Design/Button/Button.tsx

@@ -7,7 +7,7 @@ import { Spinner } from "../Spinner/Spinner.tsx"
 import { Ripple } from "./Ripple.tsx"
 
 const buttonVariants = cva({
-  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     variant: {
       solid: "bg-primary hover:bg-primary/80 text-white",

packages/ui/src/Design/Link/Link.tsx

@@ -17,7 +17,7 @@ export const Link: React.FC<LinkProps> = (props) => {
   return (
     <NextLink
       className={classNames(
-        "text-primary dark:text-primary-dark inline-flex items-center gap-1 font-semibold hover:underline focus:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "text-primary dark:text-primary-dark inline-flex items-center gap-1 font-semibold hover:underline focus:rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
         className,
       )}
       target={target}

packages/ui/src/Design/Typography/Typography.tsx

@@ -11,8 +11,8 @@ const typographyVariants = cva({
       h4: "text-primary dark:text-primary-dark text-xl font-semibold",
       h5: "text-primary dark:text-primary-dark text-xl font-medium",
       h6: "text-primary dark:text-primary-dark text-lg font-medium",
-      text1: "break-words text-base",
-      text2: "break-words text-sm",
+      text1: "text-base break-words",
+      text2: "text-sm break-words",
     },
   },
 })

packages/ui/src/Layout/Header/SwitchTheme.tsx

@@ -62,7 +62,7 @@ export const SwitchTheme: React.FC<SwitchThemeProps> = () => {
 
   return (
     <div className="flex items-center justify-center" onClick={toggleTheme}>
-      <div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
+      <div className="relative inline-block cursor-pointer touch-pan-x border-0 bg-transparent p-0 select-none">
         <div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
           <div
             className={classNames(

packages/ui/src/Layout/Section/Section.tsx

@@ -75,7 +75,7 @@ export const SectionContent: React.FC<SectionContentProps> = (props) => {
   return (
     <div
       className={classNames(
-        "size-full max-w-full break-words px-6 py-4 sm:px-16",
+        "size-full max-w-full px-6 py-4 break-words sm:px-16",
         {
           "shadow-light dark:shadow-dark max-w-full rounded-2xl border border-solid border-black":
             shadowContainer,