🐛(pandacss) use recipes instead of bare style objects to fix gen issues

it seems panda-css didn't like my way of sharing css code. When sharing
bare objects matching panda-css interface, panda-css didn't understand
those were styles and didn't parse them. Now using actual recipes via
the `cva` helper, panda understands correctly those styles need to be
updated on change.

ps: cleaned a few panda imports that didn't use our "@" alias

src/frontend/src/layout/Centered.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Div, VerticallyOffCenter } from '@/primitives'
-import type { SystemStyleObject } from '../styled-system/types'
+import type { SystemStyleObject } from '@/styled-system/types'
 
 export const Centered = ({
   width = '38rem',

src/frontend/src/primitives/Box.tsx

@@ -1,5 +1,5 @@
 import { cva } from '@/styled-system/css'
-import { styled } from '../styled-system/jsx'
+import { styled } from '@/styled-system/jsx'
 
 const box = cva({
   base: {

src/frontend/src/primitives/MenuList.tsx

@@ -1,9 +1,6 @@
 import { ReactNode } from 'react'
-import { Menu, MenuProps, MenuItem as RACMenuItem } from 'react-aria-components'
+import { Menu, MenuProps, MenuItem } from 'react-aria-components'
-import { styled } from '@/styled-system/jsx'
+import { menuItemRecipe } from './menuItemRecipe'
-import { menuItemStyles } from './menuItemStyles'
-
-const MenuItem = styled(RACMenuItem, menuItemStyles)
 
 /**
  * render a Button primitive that shows a popover showing a list of pressable items
@@ -29,6 +26,7 @@ export const MenuList = <T extends string | number = string>({
         const label = typeof item === 'string' ? item : item.label
         return (
           <MenuItem
+            className={menuItemRecipe()}
             key={value}
             id={value as string}
             onAction={() => {

src/frontend/src/primitives/Select.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-aria-components'
 import { Box } from './Box'
 import { StyledPopover } from './Popover'
-import { menuItemStyles } from './menuItemStyles'
+import { menuItemRecipe } from './menuItemRecipe'
 
 const StyledButton = styled(Button, {
   base: {
@@ -44,8 +44,6 @@ const StyledSelectValue = styled(SelectValue, {
   },
 })
 
-const StyledListBoxItem = styled(ListBoxItem, menuItemStyles)
-
 export const Select = <T extends string | number>({
   label,
   items,
@@ -67,9 +65,13 @@ export const Select = <T extends string | number>({
         <Box size="sm" type="popover" variant="control">
           <ListBox>
             {items.map((item) => (
-              <StyledListBoxItem id={item.value} key={item.value}>
+              <ListBoxItem
+                className={menuItemRecipe()}
+                id={item.value}
+                key={item.value}
+              >
                 {item.label}
-              </StyledListBoxItem>
+              </ListBoxItem>
             ))}
           </ListBox>
         </Box>

src/frontend/src/primitives/Ul.tsx

@@ -1,4 +1,4 @@
-import { styled } from '../styled-system/jsx'
+import { styled } from '@/styled-system/jsx'
 
 export const Ul = styled('ul', {
   base: {

src/frontend/src/primitives/menuItemRecipe.ts

@@ -1,21 +1,30 @@
+import { cva } from '@/styled-system/css'
+
 /**
  * reusable styles for a menu item, select item, etc… to be used with panda `css()` or `styled()`
  *
  * these are in their own files because react hot refresh doesn't like exporting stuff
  * that aren't components in component files
  */
-export const menuItemStyles = {
+export const menuItemRecipe = cva({
   base: {
     paddingY: 0.125,
     paddingX: 0.5,
+    paddingLeft: 1.5,
     textAlign: 'left',
     width: 'full',
     borderRadius: 4,
     cursor: 'pointer',
     color: 'box.text',
     border: '1px solid transparent',
+    position: 'relative',
     '&[data-selected]': {
-      fontWeight: 'bold!',
+      '&::before': {
+        content: '"✓"',
+        position: 'absolute',
+        top: '2px',
+        left: '6px',
+      },
     },
     '&[data-focused]': {
       color: 'primary.text',
@@ -28,4 +37,4 @@ export const menuItemStyles = {
       outline: 'none!',
     },
   },
-}
+})