Struggle with presedence when merging styled components

[pfrang]

Hello,

I have an issue I cannot re-create in the panda playground.

The gridSpan property is taken from the caller (App component) and the gridSpan property set on the Div has lower presedence, as I would expect.

Link to exmaple:
https://play.panda-css.com/4xgMMdG0hp

However, locally, the gridSpan property in the Div component takes presedence, it for some reason turns around.

This is the setup locally.

// panda.config.ts

export default defineConfig({
  presets: [sioPreset],
  include: ["./src/**/*.{ts,tsx}"],
  exclude: [],
  jsxFramework: 'react',
})

// preset.ts

export const sioPreset = definePreset({
  name: "sio-preset",
  theme,
  utilities,
  globalCss
})

// utilities.ts

export const utilities: UtilityConfig  = {
  gridSpan: {
    values: { type: 'number'},
    transform(value) {
      return {
        gridColumnEnd: `span ${value}`
      }
    }
  },
}

// some-component.ts

const Div = styled('div', {
  base: {
    gridSpan: 8,
  }
})

const Wrapper = ({ children, ...props }: any) => {
  return (
    <Div  {...props}>
      {children}
    </Div>
  )
}


const Div2 = styled(Wrapper, {
  base: {
    m: ["45px", "47px", "49px"],
  }
})

export const TableOfContents = <T extends Item>({
  children,
  ...props
}: TableOfContentsProps<T>) => {
  return (
    <Grid {...props} data-noindex>
      <Div2 gridSpan={4}>
           {children}
      </Div>
   )
}