Update dependencies to version 16.2.12 in package.json and yarn.lock. Adjust styles and layout in various components for improved UI consistency, including profile menu, sidebar items, and navbar. Enhance button and input settings for better responsiveness and accessibility.

apps/next/package.json

@@ -26,10 +26,10 @@
     "@vercel/speed-insights": "^1.2.0",
     "@vis.gl/react-google-maps": "^1.7.1",
     "app": "*",
-    "eslint-config-next": "16.2.9",
+    "eslint-config-next": "16.2.12",
     "lucide-react": "1.16.0",
     "lucide-static": "1.16.0",
-    "next": "16.2.9",
+    "next": "16.2.12",
     "raf": "^3.4.1",
     "react": "19.1.4",
     "react-dom": "19.1.4",
@@ -49,12 +49,12 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "16.2.9",
+    "@next/bundle-analyzer": "16.2.12",
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "17.0.21",
     "cross-env": "^7.0.3",
-    "eslint-config-next": "16.2.9",
+    "eslint-config-next": "16.2.12",
     "postcss": "^8.4.27",
     "tailwindcss": "^4.2.4"
   }

packages/app/components/elements/profile_menu.js

@@ -12,7 +12,7 @@ export default function ElementProfileMenu({ data, blockWrapperProps }) {
     const menu_items = appSetting('layout', 'user_remote_config') ? menuItemsByNameNew('menu_post', data, currentUser) : menuItemsByName('', appSetting('menu_items', 'menu_sidebar'), currentUser);
     return (
         <BlockWrapper {...blockWrapperProps}>
-            <View className="profile-menu gap-4 ">
+            <View className="profile-menu gap-0.5 -mx-2">
                 {menu_items.map((item, index) => (
                     <MenuItemSidebarWithWrapper key={`menu-${index}`} icon={item.icon} link={item.link} title={t(item.title)} index={index} userUrl={currentUser.url} />
                 ))}

packages/app/components/form-fields/password.js

@@ -39,7 +39,7 @@ export default function FormFieldPassword(props) {
                         aria-label={props.caption}
                     />
                 </AdaptiveLabel>
-                <View className="absolute right-1 top-1/2 -translate-y-1/2 justify-center items-center z-20">
+                <View className="absolute right-2 top-1/2 -translate-y-1/2 justify-center items-center z-20">
                     <Button
                         startDecorator={isVisible ? buttonConfig.startDecorator.visible : buttonConfig.startDecorator.hidden}
                         size={buttonConfig.size}

packages/app/components/menu-items/sidebar-with-wrapper.js

@@ -1,27 +1,54 @@
-import { Pressable } from 'app/design/view'
-import Link from 'app/ui/atoms/link'
 import { getComponent } from 'app/components/registry'
-import { Platform } from 'react-native'
+import { NeoButton, NeoButtonLink } from 'app/design/controls'
 
-export default function MenuItemSidebarWithWrapper({ link, title, index, icon = 'Circle', userUrl, isActive, onPress, addon }) {
+export default function MenuItemSidebarWithWrapper({
+    link,
+    title,
+    icon = 'Circle',
+    userUrl,
+    isActive,
+    onPress,
+    addon,
+    className = '',
+}) {
+    const MenuItemSidebar = getComponent('menu-item', 'sidebar')
+    const finalLink = link?.includes('{profile}')
+        ? link.replace('{profile}', userUrl || '')
+        : link
 
-    const MenuItemSidebar = getComponent('menu-item', 'sidebar');
-    const finalLink = link?.includes('{profile}') ? link.replace('{profile}', userUrl || '') : link;
-    const isWeb = Platform.OS === 'web';
-    const Wrapper = onPress && !isWeb ? Pressable : Link;
-    const activeWrapperClassName = isActive ? 'u-link-ghost-active bg-accent/60 web:hover:bg-accent rounded-lg' : '';
-    const wrapperProps = onPress
-        ? {
-            ...(isWeb
-                ? { emulate: true, onPress, alt: title, variant: 'ghost', size: 'lg' }
-                : { onPress }),
-            className: `group ${activeWrapperClassName}`.trim(),
-        }
-        : { href: finalLink, alt: title, variant: 'ghost', size: 'lg', className: `group ${activeWrapperClassName}`.trim() };
+    const content = (
+        <MenuItemSidebar
+            title={title}
+            icon={icon}
+            isActive={isActive}
+            addon={addon}
+        />
+    )
+
+    const commonProps = {
+        alt: title,
+        style: 'borderless',
+        controlSize: 'xlarge',
+        width: 'fill',
+        align: 'start',
+        contentInsets: { x: 8 },
+        selected: isActive,
+        selectedState: 'pressed',
+        className: `group ${className}`.trim(),
+        onPress,
+    }
+
+    if (finalLink) {
+        return (
+            <NeoButtonLink href={finalLink} {...commonProps}>
+                {content}
+            </NeoButtonLink>
+        )
+    }
 
     return (
-        <Wrapper {...wrapperProps}>
-            <MenuItemSidebar title={title} icon={icon} isActive={isActive} addon={addon} />
-        </Wrapper>
+        <NeoButton {...commonProps} interactive>
+            {content}
+        </NeoButton>
     )
 }

packages/app/components/nav/navbar-ver.web.js

@@ -92,7 +92,7 @@ const SideBar = memo(({ headerSettings, currentUser, uri, url, bSearch, menuPopu
                         <ContextSelector data={context} url={url} uri={uri} />
                     )
                 }
-                <View className='hidden lg:block'>
+                <View className='hidden lg:block gap-1 -mx-2'>
                     {menu_sidebar_items.map(
                         (item, index) =>
                             <MenuItemSidebarWithWrapper key={`menu-${index}`} icon = {item.icon} link={item.link} title={t(item.title)} index={index} userUrl={currentUser.url}/>  

packages/app/components/page-layout/home.js

@@ -9,7 +9,6 @@ import {
 } from 'app/lib/util'
 import { useCurrentUser } from 'app/context/user'
 import { useTranslation } from 'react-i18next'
-import Link from 'app/ui/atoms/link'
 import Profile from 'app/ui/molecules/profile'
 import { Text } from 'app/design/typography'
 import { Platform } from 'react-native'
@@ -26,7 +25,7 @@ import Badges from 'app/ui/molecules/badges'
 import { useBreakpoint, useWindowSize, useIsDesktop, useWindowHeight, useWindowWidth, useBreakpointName } from 'app/context/measure';
 import { useSetHeader, useHeaderHeight, defaultHeader } from 'app/context/jotai/layout';
 import { useFocusEffect }  from 'app/lib/hooks/router'
-import { Button, ButtonLink, NeoButton } from 'app/design/controls'
+import { Button, ButtonLink, NeoButton, NeoButtonLink } from 'app/design/controls'
 import { Icon } from 'app/ui/atoms/icon';
 
 const TABLET_MODE_FROM = appSetting('layout', 'tablet_mode_from')
@@ -304,49 +303,55 @@ export default function ({ data, blocks }) {
                 height: `calc(100vh - ${headerHeight}px)`,
                 width: sideBarWidth,
             }}
-            className="flex-auto p-4 gap-1 fixed overflow-scroll "
+            className="flex-auto p-4 gap-0.5 fixed overflow-scroll "
         >
             
                 {appSetting('layout', 'show_profile_info') && (
-                    
-                    <Link variant='ghost' size='lg' href={currentUser.url} emulate={true} className="mt-2 flex-row items-center">
-                      
-
-                            <Profile
-                                {...currentUser}
-                                url_avatar={currentUser.avatar}
-                                displayType="unit_wo_info"
-                                displaySize="md"
-                                showLinks={false}
-                            />
-
-
-                            <Row className="flex-auto items-center gap-1">
-                                <Row className="items-center gap-1 flex-auto">
-                                    <Text className="px-2 text-sm leading-tighter font-semibold truncate text-card-foreground web:group-hover:text-foreground ">
-                                        {currentUser.display_name}
-                                    </Text>
-                                    {currentUser.badges && <Badges badges={currentUser.badges} size="xs" />}
+                    <View className="-mx-2">
+                        <NeoButtonLink
+                            href={currentUser.url}
+                            alt={currentUser.display_name}
+                            style="borderless"
+                            controlSize="xlarge"
+                            width="fill"
+                            align="start"
+                            contentInsets={{ x: 8 }}
+                            className="group"
+                        >
+                            <Row className="w-full items-center">
+                                <Profile
+                                    {...currentUser}
+                                    url_avatar={currentUser.avatar}
+                                    displayType="unit_wo_info"
+                                    displaySize="sm"
+                                    showLinks={false}
+                                />
+                                <Row className="flex-auto items-center gap-1">
+                                    <Row className="items-center gap-1 flex-auto">
+                                        <Text className="px-2 text-sm leading-tighter font-semibold truncate text-card-foreground web:group-hover:text-foreground">
+                                            {currentUser.display_name}
+                                        </Text>
+                                        {currentUser.badges ? <Badges badges={currentUser.badges} size="xs" /> : null}
+                                    </Row>
+                                    {currentUser.membership_name ? (
+                                        <Badge
+                                            size="xs"
+                                            variant="default"
+                                            data={{
+                                                text: currentUser.membership_name,
+                                                icon: currentUser.membership_icon,
+                                                icon_url: currentUser.membership_icon_url
+                                            }}
+                                        />
+                                    ) : null}
                                 </Row>
-                                {currentUser.membership_name && (
-                                    <Badge
-                                        size="xs"
-                                        variant="default"
-                                        data={{
-                                            text: currentUser.membership_name,
-                                            icon: currentUser.membership_icon,
-                                            icon_url: currentUser.membership_icon_url
-                                        }}
-                                    />
-                                )}
                             </Row>
-                        
-                    </Link>
-
+                        </NeoButtonLink>
+                    </View>
                 )}
 
                 {feedList.length > 1 && (
-                    <View className=" py-3 border-b border-border/60 gap-4  ">
+                    <View className="py-3 border-b border-border/60 gap-0.5 -mx-2">
                         {feedList.map((item, index) => {
                             return (
                                 <MenuItemSidebarWithWrapper
@@ -367,7 +372,7 @@ export default function ({ data, blocks }) {
 
                 {navBarBlocks.map((item, index) => {
                     return (
-                        <View className={(appSetting('layout', 'show_profile_info') || feedList.length > 1) || index > 0 ? "mt-3 " : ''} key={'block_' + index}>
+                        <View className={(appSetting('layout', 'show_profile_info') || feedList.length > 1) || index > 0 ? " " : ''} key={'block_' + index}>
                             <BlockByName
                                 name={item.block}
                                 data={data}

packages/app/design/styles/global.web.css

@@ -1,9 +1,12 @@
-/* Global outline color only (no width). Components control size/offset. */
+/* Global focus ring. Use solid (not auto) — auto ignores custom outline-color
+ * in Firefox/Safari. Keep offset ≥ 0 so overflow:hidden/clip on inputs doesn't
+ * eat the ring. Same alpha in light and dark (dark used to force / 0.8 and
+ * override this). */
 *:focus-visible {
-    outline-color: rgb(var(--ring) / 0.8);
-    outline-style: auto;    
-    outline-offset: 2px;
-    outline-width: 3px;
+    outline-color: rgb(var(--ring) / 0.5);
+    outline-style: solid;
+    outline-offset: -1px;
+    outline-width: 4px;
 }
 
 select {
@@ -12,16 +15,6 @@ select {
     -moz-appearance: none;
 }
 
-[data-theme="dark"] *:focus-visible {
-    outline-color: rgb(var(--ring) / 0.8);
-}
-
-@media (prefers-color-scheme: dark) {
-    :root *:focus-visible {
-        outline-color: rgb(var(--ring) / 0.8);
-    }
-}
-
 /* The enriched editor (Tiptap/ProseMirror) gets its focus affordance from its
  * container. Suppress the global focus-visible outline on the editable element
  * itself — otherwise it shows up as a stray blue line under the current line

packages/app/design/styles/palette.css

@@ -77,8 +77,8 @@
             --destructive: var(--red);
             --destructive-foreground: var(--white);
             --border: var(--neutral-300);
-            --input: var(--neutral-200);
-            --ring: var(--accent-500);
+            --input: var(--white);
+            --ring: var(--accent-600);
             --segment: var(--neutral-200);
             --segment-foreground: var(--neutral-700);
             --link-primary: var(--primary);
@@ -107,14 +107,14 @@
             --secondary: var(--neutral-800);
             --secondary-foreground: var(--neutral-400);
             --accent: var(--accent-950);
-            --accent-foreground: var(--accent-500);
+            --accent-foreground: var(--accent-600);
             --muted: var(--neutral-700);
             --muted-foreground: var(--neutral-500);
             --destructive: var(--red);
             --destructive-foreground: var(--neutral-950);
             --border: var(--neutral-800);
-            --input: var(--neutral-800);
-            --ring: var(--accent-500);
+            --input: var(--neutral-900);
+            --ring: var(--accent-600);
             --segment: var(--neutral-800);
             --segment-foreground: var(--neutral-200);
             --link-primary: var(--primary);

packages/app/design/styles/theme.css

@@ -165,8 +165,8 @@
         --neo-shadow-card-outline:       inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 4px 12px -4px rgb(0 0 0 / 0.1);
         --neo-shadow-card-outline-deep:  inset 0 0 0 1px rgb(255 255 255 / 0.025), 0 4px 12px -4px rgb(0 0 0 / 0.5);
         
-        --neo-shadow-input-outline:      0 0 0 1px rgb(0 0 0 / 0.1);
-        --neo-shadow-input-outline-deep: 0 0 0 1px rgb(255 255 255 / 0.1);
+        --neo-shadow-input-outline:      inset 0 0 0 1px rgb(0 0 0 / 0.15);
+        --neo-shadow-input-outline-deep: inset 0 0 0 1px rgb(255 255 255 / 0.1);
        
         --neo-shadow-btn-outline:        inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 4px 12px -4px rgb(0 0 0 / 0.1);
         --neo-shadow-btn-outline-deep:   inset 0 0 0 1px rgb(255 255 255 / 0.025), 0 4px 12px -4px rgb(0 0 0 / 0.5);

packages/app/lib/form-helpers.js

@@ -1,11 +1,15 @@
 
 import { Platform } from 'react-native';
 import { getComponent } from 'app/components/registry';
-import { Text } from 'app/design/typography'
 import { Button, NeoButton } from "app/design/controls";
 import emitter from 'app/context/emitter';
 import { appSetting } from 'app/lib/util';
 
+/** Ignores injected field props (e.g. use_caption_as_placeholder) — do not use DOM Text. */
+function UnsupportedFormField() {
+    return null;
+}
+
 const isWeb = Platform.OS === 'web';
 const dirtyFormInstances = new Set();
 
@@ -96,7 +100,7 @@ export function getFormFieldByData(inputData, handleSubmit, format, externalProp
     const InputType = getComponent('form-field', String(inputData.type));
     if (!InputType){
         console.log(`Unsupported field type: ${JSON.stringify(inputData)}`)
-        return <Text key={fallbackKey}></Text>
+        return <UnsupportedFormField key={fallbackKey} />;
     }
     return <InputType {...inputData} format={format} handleSubmit={handleSubmit} {...externalProps} key={fallbackKey} />;
 

packages/app/settings/elements.js

@@ -48,8 +48,8 @@ export const settingsElements = {
         show_nav_titles: false, // OLD appSetting('layout', 'show_nav_titles')
         hide_browse_filter: true, // OLD appSetting('layout', 'hide_browse_filter')
         sidebar_container: ' ns--sidebar-container-- h-full ne--  ',
-        sidebar_inner_container: ' xl:mx-4 px-4 py-2 gap-1 overflow-y-auto flex flex-col bg-card/80 shadow-card-outline dark:shadow-card-outline-deep rounded-xl mt-4',
-        sidebar_title: 'sticky h-10 justify-between items-center z-10',
+        sidebar_inner_container: ' xl:mx-4 px-4 py-2 gap-2 overflow-y-auto flex flex-col bg-card/80 shadow-card-outline dark:shadow-card-outline-deep rounded-2xl mt-4',
+        sidebar_title: 'sticky h-12 justify-between items-center z-10',
         sidebar_position: ' z-50  ',
         bgrDecorator: true, // Enable/disable decorator background globally for conductor buttons
         add_menu_native:false,

packages/app/settings/theme/buttons.js

@@ -9,32 +9,40 @@ export const settingsButtons = {
             container: 'px-2 gap-1 h-7 min-w-7',
             container_icon_only: 'h-7 w-7 items-center justify-center',
             text: 'text-xs leading-7',
-            icon_size: 16,
+            icon_size: 14,
             hitSlop: 8,
         },
         sm: {
             rounded: 'rounded-lg ',
-            container: 'px-2.5 gap-1 h-9 min-w-9 ',
-            container_icon_only: 'h-9 w-9',
+            container: 'px-2.5 gap-1 h-8 min-w-8 ',
+            container_icon_only: 'h-8 w-8',
             text: 'text-sm leading-5',
-            icon_size: 20,
+            icon_size: 16,
             hitSlop: 6,
         },
         base: {
             rounded: 'rounded-xl',
-            container: 'px-3 gap-2 min-h-11 min-w-11',
-            container_icon_only: 'min-h-11 min-w-11',
-            title_container: ' leading-11 text-base',
-            icon_size: 24,
-            hitSlop: 2,
+            container: 'px-3 gap-2 min-h-9 min-w-9',
+            container_icon_only: 'min-h-9 min-w-9',
+            title_container: ' leading-9 text-base',
+            icon_size: 20,
+            hitSlop: 4,
         },
         lg: {
+            rounded: 'rounded-xl',
+            container: 'px-4 gap-2 min-h-10 min-w-10',
+            container_icon_only: 'min-h-10 min-w-10',
+            title_container: ' leading-10 text-base',
+            icon_size: 20,
+            hitSlop: 2,
+        },
+        xl: {
             rounded: 'rounded-xl',
             container: 'px-4 gap-2 min-h-12 min-w-12',
             container_icon_only: 'min-h-12 min-w-12',
             title_container: ' leading-12 text-base',
             icon_size: 24,
-            hitSlop: 14,
+            hitSlop: 0,
         },
     },
     button_styles: {
@@ -287,8 +295,8 @@ export const settingsButtons = {
         // iOS HIG-style minimum is 44pt; web/mouse trims a few pixels because
         // pointers don't need finger-sized targets.
         controlSizes: {
-            mini:    { height: 28, paddingX: 12,  font: 'text-sm leading-7', icon: 16, hitSlop: 10, labelGap: 4, contentInsets: { mediaLeading: { left: 2 } } },
-            small:   { height: 32, paddingX: 12, font: 'text-sm leading-8', icon: 20, hitSlop: 6, labelGap: 6, contentInsets: { mediaLeading: { left: 6 } } },
+            mini:    { height: 28, paddingX: 12,  font: 'text-sm leading-7', icon: 14, hitSlop: 10, labelGap: 4, contentInsets: { mediaLeading: { left: 2 } } },
+            small:   { height: 32, paddingX: 12, font: 'text-sm leading-8', icon: 16, hitSlop: 6, labelGap: 6, contentInsets: { mediaLeading: { left: 6 } } },
             regular: {
                 default: { height: 36, paddingX: 12, font: 'text-sm leading-9', icon: 20, hitSlop: 4, labelGap: 8, contentInsets: { mediaLeading: { left: 4 } } },
                // web:     { height: 36, paddingX: 12 },
@@ -363,13 +371,13 @@ export const settingsButtons = {
             // for the glass family).
             bordered: {
                 container: {
-                    default: 'bg-muted/60 ',
+                    default: 'bg-muted/50 ',
                     hovered: 'bg-muted ',
                     focused: 'bg-muted ',
-                    pressed: 'bg-accent/60 ',
+                    pressed: 'bg-accent/50 ',
                     active: 'bg-muted ',
-                    pressedToggle: 'bg-accent/60 ',
-                    disabled: 'bg-muted opacity-60 ',
+                    pressedToggle: 'bg-accent/50 ',
+                    disabled: 'bg-muted opacity-50 ',
                 },
                 text: {
                     base: 'font-medium tracking-tight',
@@ -412,10 +420,10 @@ export const settingsButtons = {
             borderless: {
                 container: {
                     default: '',
-                    hovered: 'bg-muted/60',
-                    focused: 'bg-muted/60',
-                    pressed: 'bg-accent/60 web:hover:bg-accent',
-                    active: 'bg-muted/60 ',
+                    hovered: 'bg-muted/50',
+                    focused: 'bg-muted/50',
+                    pressed: 'bg-accent/50 web:hover:bg-accent',
+                    active: 'bg-muted/50 ',
                     pressedToggle: 'bg-muted',
                     disabled: 'opacity-50',
                 },

packages/app/settings/theme/elements.js

@@ -86,8 +86,8 @@ export const settingsElements = {
             ' bg-card/80 shadow-card-outline dark:shadow-card-outline-deep ',
         'u-block-pad':
             ' p-4 ',
-        'u-block-rounded': 'rounded-xl',
-        'u-block-rounded-default': 'sm:rounded-xl',
+        'u-block-rounded': 'rounded-2xl',
+        'u-block-rounded-default': 'sm:rounded-2xl',
         'u-block-header':
             ' flex-row items-center gap-3 justify-center ',
         'u-block-icon': ' items-center w-6 h-6 justify-center text-card-foreground flex-none',

packages/app/settings/theme/inputs.js

@@ -30,35 +30,35 @@ export const settingsInputs = {
     },
     inputs: {
         rounded:{
-            default: 'rounded-lg',
+            default: 'rounded-xl',
             full: 'rounded-full',
         },
         // Shared control heights — text inputs, selects, and matching surfaces.
         size:{
-            small: 'px-2 leading-5 min-h-9',
-            regular: 'px-3 leading-5 min-h-11',
-            large: 'px-3 leading-5 min-h-12',
+            small: 'px-3 leading-4 min-h-9',
+            regular: 'px-3.5 leading-5 min-h-12',
+            large: 'px-4 leading-6 min-h-14',
         },
         // Height-only tokens for chip wells / wrappers that bring their own padding.
         surface_size:{
             small: 'min-h-9',
-            regular: 'min-h-10',
+            regular: 'min-h-12',
             large: 'min-h-12',
         },
         base: 
-        'text-card-foreground placeholder:text-muted-foreground py-2 bg-input/50 shadow-input-outline dark:shadow-input-outline-deep flex-auto text-base placeholder-muted-foreground web:duration-200 web:file:text-foreground web:selection:bg-primary selection:text-primary-foreground web:focus-visible:bg-card web:focus-visible:border-ring web:overflow-hidden',
+        'text-card-foreground placeholder:text-muted-foreground py-2 bg-input shadow-input-outline dark:shadow-input-outline-deep flex-auto text-base placeholder-muted-foreground web:duration-200 web:file:text-foreground web:selection:bg-primary selection:text-primary-foreground web:focus-visible:bg-card web:focus-visible:border-ring web:overflow-hidden',
         // Height/padding come from `size` (same as Input) so select stays in sync.
         select: ' pr-10 bg-input/60 shadow-input-outline dark:shadow-input-outline-deep web:focus:bg-card flex-auto text-base leading-6 overflow-hidden placeholder:text-muted-foreground text-card-foreground web:duration-300 ',
 
         // Adaptive / floating eyebrow labels (`forms.adaptive_labels`)
         // Vertical position is Animated (center → top edge) — see adaptive-label.js.
         // Tune horizontal inset / chip / type here; use *_offset (px) for vertical nudge.
-        adaptive_label: 'ml-2 px-2 self-start',
-        adaptive_label_floated: 'bg-card',
+        adaptive_label: 'ml-3 self-start',
+        adaptive_label_floated: 'bg-card px-1.5 shadow-input-outline dark:shadow-input-outline-deep rounded-md',
         adaptive_label_text_resting: 'text-base text-muted-foreground',
-        adaptive_label_text_floated: 'text-sm text-muted-foreground',
+        adaptive_label_text_floated: 'text-xs leading-5 text-muted-foreground',
         adaptive_label_resting_offset: 0,
-        adaptive_label_floated_offset: -2,
+        adaptive_label_floated_offset: -1,
         adaptive_label_duration: 200,
     },
     switcher: {

packages/app/ui/molecules/conductor.web.js

@@ -1362,7 +1362,7 @@ const LeftSideBarContainer = ({
                     )}
                     <View className="flex-1 gap-4">
                         {layoutName == 'navigator' && routes.length > 1 && (
-                            <View className=' gap-1 -mx-2'>
+                            <View className=' gap-0.5 -mx-2'>
                                 {routes
                                     .filter((aItem) => aItem.hideInTop != true)
                                     .map((a) => {
@@ -1376,7 +1376,7 @@ const LeftSideBarContainer = ({
                                                     key={`lmenu-${a.index}`}
                                                     alt={a.title}
                                                     style="borderless"
-                                                    controlSize="large"
+                                                    controlSize="xlarge"
                                                     width="fill"
                                                     align="start"
                                                     contentInsets={{ x: 8 }}
@@ -1394,7 +1394,7 @@ const LeftSideBarContainer = ({
                                                 key={`lmenu-${a.index}`}
                                                 alt={a.title}
                                                 style="borderless"
-                                                controlSize="large"
+                                                controlSize="xlarge"
                                                 width="fill"
                                                 align="start"
                                                 contentInsets={{ x: 8 }}

yarn.lock

@@ -2640,64 +2640,64 @@
     htmlparser2 "^7.1.2"
     ramda "^0.27.2"
 
-"@next/bundle-analyzer@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-16.2.9.tgz#38f64a55bb76a3650c990dd7972a4d06f0ddbd6c"
-  integrity sha512-yGWyLbC8MMn+hk9j6l6GammpbUz5S3yZzl3lpoWfVXhIpJfh6kAWG7JwF4WoG3f0VnYRY959yo1QQEI8mV/+jg==
+"@next/bundle-analyzer@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-16.2.12.tgz#285573c55c96104d81ff625fd90f50cd85e031a4"
+  integrity sha512-0dYhmCYsTMFYUFaoEUx+VKw/oYP6b3XiGgq47EujXTE2UGgwVWAaur2tbko2pxfUka3WRZ9YWxa3PlSv3luWNQ==
   dependencies:
     webpack-bundle-analyzer "4.10.1"
 
-"@next/env@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-16.2.9.tgz#c2bbcb1647503cae0f11e6a326799acd1ea29e9e"
-  integrity sha512-ki5VxxXfzD/9TDe13wyeTKIjQTAwBVpnr8KhRDUr8ltMUq1/NBpWNT5tiPoxiGl+PHM4X2ahSOiPk6iAimIzPg==
+"@next/env@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-16.2.12.tgz#64b4efce303c53da7f942a0f39eb7b84f89bb543"
+  integrity sha512-d0Z5Bc13Fa4nR8pFAKx2jay2yhJM16vlfHbTzYnUQAxlNb6B6lmn4hjt69lYNt4kRtyYP6gEM49lPRHNbIyneg==
 
-"@next/eslint-plugin-next@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.9.tgz#0d788da191971636def239cdf3b42458796df6ff"
-  integrity sha512-UZi8+YT/MLgTC9nrrn2Xd4lBYv1B7lVmtWHfPcthAI5Tt/C1LuDe6DfmtCtJ+WQod3ksY4VrKSvk3oMVAnL7qw==
+"@next/eslint-plugin-next@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.12.tgz#05662b01de738ceb87b927f760561a6597aa3e5c"
+  integrity sha512-uF2z/qAK2q7B5/6CpnFcBRX6jOq5iCO+Uqh1UkJhXljX1JwLarLYhhoJadO6dPb6moTprOKewMXheBcbIoSbug==
   dependencies:
     fast-glob "3.3.1"
 
-"@next/swc-darwin-arm64@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.9.tgz#b67a7e67466e39be621553b7a32520bc73ca4fa4"
-  integrity sha512-HkfxNYUCmcct0Xsqib5KxqMSHV4AHJq857BNRchyBDs4YS19aHzVfn1kDuBYKqLLQBjXgnkIsjV2Kd4d2wzYhw==
-
-"@next/swc-darwin-x64@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.9.tgz#817f3609c231b07d6910c074eeaf7c41ae781f2d"
-  integrity sha512-7IAtK4MeybpqRV9GRABWEhJ62mOS+rzWOzOTFie4cSEtm12xsoOMJRcECoZx3FHPzFAqN/IJtHqWAFOLfl152w==
-
-"@next/swc-linux-arm64-gnu@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.9.tgz#f7314d5c268a6c440208c46da92ab8d914c02d36"
-  integrity sha512-hBD75iWpUtkL9SmQmcRhmLomn9jgkPzCEkbOcLgHymPEKzv+6ONy13RRiIEz/iEObjkS2Jlb5gYS2XGoS3X4rw==
-
-"@next/swc-linux-arm64-musl@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.9.tgz#9258cf7a3f2f10a605ef85fb76601123f3b1d5ab"
-  integrity sha512-qZTI3pf9SGc/obr8NkQAekBxmp1QK+kVm+VAf3BALLfFAj+1kUhkTxmrWpVos9R/UYIA8AWX2p6cGI5WdwzVUA==
-
-"@next/swc-linux-x64-gnu@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.9.tgz#a6db6095f6495c6d55c48ba946b1578f5e75a359"
-  integrity sha512-xm0HfRNX+UkH4R3c18ynswjj5o5uEj/7iI9p9omdtTSIsRCzQqkGMA+10nzJ4EHnYC3as65IMhbbl5fWRUWHYg==
-
-"@next/swc-linux-x64-musl@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.9.tgz#d7f857879886c3a378285fea438ba4636fcc3a9a"
-  integrity sha512-QumimHkGEG6vM3PfEDWKyKen03NcqLOkeKB1EfcPe7VxzmEiCa4jNnMyBn/US5zcd/VE1CI+O8Ovb3lfjVHfGw==
-
-"@next/swc-win32-arm64-msvc@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.9.tgz#d6d67c8e803b2c44b76b16495b5eda47165faf43"
-  integrity sha512-hzQpKZvw8rAwI6A2uQh6SacCSvNAXaIkPNsWwzqqfRiIMiXMfH936skDhz1OO6KpvdKkJrgHHtqQOq5PIXOvdQ==
-
-"@next/swc-win32-x64-msvc@16.2.9":
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.9.tgz#6e36f17dd615c52761691b7f5be1d9d161abed2a"
-  integrity sha512-qr2VL3Ce5QrwgO2yh1ujSBawrimjVKX8FGF/cOynmdYKJY0BdHpGVNIRK1tqONB10Vkm25Ub1BD2bkjWs4+96w==
+"@next/swc-darwin-arm64@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.12.tgz#8c415904e0196d2ea9885a4188c6a95924185292"
+  integrity sha512-0W1R0teHWJrqKX0FH20IzzIWAOuGtBxPGuObrxy1lE8hQvCFj49KE8a3WUg0D7sq6rn6zkM4c7YGUnhudBS6oA==
+
+"@next/swc-darwin-x64@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.12.tgz#0dcbad426a42f2cdbf78f8a65c2537f8f9850569"
+  integrity sha512-Hy5Ls099+aFUmOLmIgPfLqNi6iCwhL3uQCssz5rWk+5Nkc6TUKCE83DY5BbNylfm3+mfwcSFnLRfrZDJhVxdtw==
+
+"@next/swc-linux-arm64-gnu@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.12.tgz#83286d4d22ad88dc5a765e1a91dba9a19615372e"
+  integrity sha512-+YqU2h1cQkHsGfvjAsrSmst8UIFBibBGm5x3Xgel8NLMiDQtNOM4sM2GOEMvG5YiOBNeN/Ykk8cQC2S0Xrqljg==
+
+"@next/swc-linux-arm64-musl@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.12.tgz#3aaa7fa98b4bfd2487ceb09fd5c1496ef0a080ea"
+  integrity sha512-0qjhiYBaKAqF63LA1ZWAAnKTzFUguAaZiRa5etMLGGPj/B6uEVjtIZldIzFEp3wHlB0koK6aTzqPtSdplTCjoA==
+
+"@next/swc-linux-x64-gnu@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.12.tgz#1d27087b852121471de183227170c933a9026117"
+  integrity sha512-7A3q26W+h7gnA15uqBToNuDqBEFZZcqh0mW2mn4AJh/G5pdg2RVE3n4slzLEliASZFG3NmsbEzng/x2Sh09mBg==
+
+"@next/swc-linux-x64-musl@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.12.tgz#a34f6236a2f77523e31e41ef98a1cd2c84f2f17c"
+  integrity sha512-qSjL/uppm+cbh21s72Ss8gkiOhQ4dExWHNGOWy6eZV7STj5WsKehgxT61beSsOj+YYQuTplL376lOCdMQU5T8w==
+
+"@next/swc-win32-arm64-msvc@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.12.tgz#c073d27123301269d4cae56b3513e7718632130a"
+  integrity sha512-X6hzsOUJac/e7AWSbn9gQ9nzHld1xWP5iyjHpYWvud8pufB679O1xg4JDyKr8Xd69Jvd+kM2Der6uftiZCmjYA==
+
+"@next/swc-win32-x64-msvc@16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.12.tgz#1d75fd3b4ff50609ad19956718e0920cfa70f0f5"
+  integrity sha512-F6fakeHuFTLOPt0bslQJdf+xtT+WIP9DVn/m4y1w1mRnVPyh3D/cNvzlRkxM444xfm+IvvYNSOrKiA2CDJ0Uxw==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -6838,12 +6838,12 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-eslint-config-next@16.2.9:
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-16.2.9.tgz#cc3f63fe657cdb980078835f85f1f518cd549276"
-  integrity sha512-olGtBrs07bQchpaJWeqbk9GaMoU0oGmN/pYNEBXSbfgKngb5uHnPe37X6tVeh6DJfaWFQildvinGEOrolo5fmw==
+eslint-config-next@16.2.12:
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-16.2.12.tgz#c72a2317a4146d5b91413b56cd460ec4b046357b"
+  integrity sha512-iaaf4vvKo5h2LBdGt0JuRv7t0Ysqr9FMCiFxbptDg8LqOE//mIKR80DdpOnSVM7qjLH3jT8P0aFiwXxBEGZRXw==
   dependencies:
-    "@next/eslint-plugin-next" "16.2.9"
+    "@next/eslint-plugin-next" "16.2.12"
     eslint-import-resolver-node "^0.3.6"
     eslint-import-resolver-typescript "^3.5.2"
     eslint-plugin-import "^2.32.0"
@@ -10276,26 +10276,26 @@ nested-error-stacks@~2.0.1:
   resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.0.1.tgz#d2cc9fc5235ddb371fc44d506234339c8e4b0a4b"
   integrity sha512-SrQrok4CATudVzBS7coSz26QRSmlK9TzzoFbeKfcPBUFPjcQM9Rqvr/DlJkOrwI/0KcgvMub1n1g5Jt9EgRn4A==
 
-next@16.2.9:
-  version "16.2.9"
-  resolved "https://registry.yarnpkg.com/next/-/next-16.2.9.tgz#320c5b5701deeb18c0b596d137ca5dccf976682c"
-  integrity sha512-MEOJiq/UvuezAdqVSceHbqDgZt1kDw2tpGVOlsdIoJsQdbN2JY2hpVG4xnXGkbdJUOEWhnRfiu/O4Hpc9Juwww==
+next@16.2.12:
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/next/-/next-16.2.12.tgz#70c834b297c9ac573a41b00555b507a827506a52"
+  integrity sha512-iD59eYQWmbFcEbX7v/acG5DRym9iw1DdaPoD0WTA920naWsE25wShzJW4+UvAs8MK9EC2kBfIH6vtto1H1PHGw==
   dependencies:
-    "@next/env" "16.2.9"
+    "@next/env" "16.2.12"
     "@swc/helpers" "0.5.15"
     baseline-browser-mapping "^2.9.19"
     caniuse-lite "^1.0.30001579"
     postcss "8.4.31"
     styled-jsx "5.1.6"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "16.2.9"
-    "@next/swc-darwin-x64" "16.2.9"
-    "@next/swc-linux-arm64-gnu" "16.2.9"
-    "@next/swc-linux-arm64-musl" "16.2.9"
-    "@next/swc-linux-x64-gnu" "16.2.9"
-    "@next/swc-linux-x64-musl" "16.2.9"
-    "@next/swc-win32-arm64-msvc" "16.2.9"
-    "@next/swc-win32-x64-msvc" "16.2.9"
+    "@next/swc-darwin-arm64" "16.2.12"
+    "@next/swc-darwin-x64" "16.2.12"
+    "@next/swc-linux-arm64-gnu" "16.2.12"
+    "@next/swc-linux-arm64-musl" "16.2.12"
+    "@next/swc-linux-x64-gnu" "16.2.12"
+    "@next/swc-linux-x64-musl" "16.2.12"
+    "@next/swc-win32-arm64-msvc" "16.2.12"
+    "@next/swc-win32-x64-msvc" "16.2.12"
     sharp "^0.34.5"
 
 no-case@^3.0.4: